.alpstone-patch {
    --alpstone-blue: #438dd7;
    --alpstone-blue-dark: #20375d;
    --patch-white: #fff;
    --patch-text: #101828;
    --patch-size: 76px;
    --patch-open-width: min(720px, calc(100vw - 44px));
    --patch-open-height: min(580px, calc(100vh - 44px));
    --patch-hover-height: min(652px, calc(100vh - 44px));
    position: fixed;
    inset: 0;
    z-index: 900;
    color: var(--patch-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    color-scheme: light;
    pointer-events: auto;
}

html.is-patch-open,
html.is-patch-open body { overflow: hidden; }

.alpstone-patch.is-initializing { visibility: hidden; }

.alpstone-patch-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(5, 6, 8, .62);
    cursor: pointer;
    opacity: 1;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: opacity .48s ease, background .48s ease, backdrop-filter .48s ease;
}

.alpstone-patch-card {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: var(--patch-open-width);
    height: var(--patch-open-height);
    min-height: 0;
    display: grid;
    grid-template-rows: 84px 1fr;
    overflow: hidden;
    border: 0;
    border-radius: 34px;
    background: rgba(255, 255, 255, .92);
    background-clip: padding-box;
    box-shadow: 0 34px 92px rgba(0, 0, 0, .3);
    isolation: isolate;
    transform: translate(-50%, -50%);
    transform-origin: center;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    transition: top .78s cubic-bezier(.22,1,.36,1), left .78s cubic-bezier(.22,1,.36,1), width .78s cubic-bezier(.22,1,.36,1), height .78s cubic-bezier(.22,1,.36,1), grid-template-rows .78s cubic-bezier(.22,1,.36,1), border-radius .68s cubic-bezier(.22,1,.36,1), background .54s ease, box-shadow .54s ease, opacity .42s ease, transform .78s cubic-bezier(.22,1,.36,1);
}

.alpstone-patch.is-intro .alpstone-patch-card {
    background: var(--patch-white);
    clip-path: inset(0 round 34px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.alpstone-patch.is-intro.is-intro-entering .alpstone-patch-backdrop { opacity: 0; }
.alpstone-patch.is-intro.is-intro-entering .alpstone-patch-card { opacity: 0; transform: translate(-50%, -50%) scale(.95); }

.alpstone-patch-backdrop:focus-visible,
.alpstone-patch-card:focus,
.alpstone-patch-card:focus-visible,
.alpstone-patch-card:focus-within,
.alpstone-patch-logo:focus-visible { outline: none; }

.alpstone-patch-header {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 122px 10px 38px;
    background: var(--alpstone-blue);
    color: var(--patch-white);
    opacity: 1;
    transition: opacity .24s ease, transform .24s ease;
}

.alpstone-patch-header img { width: 70px; height: 70px; flex: 0 0 auto; object-fit: contain; }
.alpstone-patch-header span { font-size: clamp(1rem, 2vw, 1.24rem); font-weight: 900; line-height: 1.12; }

.alpstone-patch-body {
    position: relative;
    min-height: 0;
    padding: 42px 54px 104px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .24s ease, transform .24s ease;
}

.alpstone-patch-step {
    position: absolute;
    inset: 42px 54px 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
}

.alpstone-patch-step.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.alpstone-patch-card.is-step-changing .alpstone-patch-step.is-active { opacity: 0; transform: translateY(8px); }

.alpstone-patch-step h2,
.alpstone-patch-notice h2 {
    max-width: 13ch;
    margin: 0;
    color: var(--patch-text);
    font-family: inherit;
    font-size: clamp(2.45rem, 4.8vw, 4.35rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: 0;
}

.alpstone-patch-step p,
.alpstone-patch-notice p {
    max-width: 42rem;
    margin: 24px 0 0;
    color: #667085;
    font-size: clamp(1rem, 1.8vw, 1.16rem);
    font-weight: 720;
    line-height: 1.55;
}

.alpstone-patch-close {
    position: absolute;
    top: 42px;
    right: 18px;
    z-index: 5;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    padding: 0 20px;
    background: var(--patch-white);
    color: var(--alpstone-blue);
    cursor: pointer;
    font: inherit;
    font-size: .94rem;
    font-weight: 850;
    line-height: 1;
    transform: translateY(-50%);
    transition: background .22s ease, color .18s ease, transform .22s ease, opacity .24s ease;
}

.alpstone-patch-close:hover,
.alpstone-patch-close:focus-visible { background: var(--alpstone-blue-dark); color: var(--patch-white); transform: translateY(calc(-50% - 1px)); }
.alpstone-patch-close:focus-visible { outline: 3px solid rgba(32,55,93,.48); outline-offset: 3px; }

.alpstone-patch-nav {
    position: absolute;
    right: 34px;
    bottom: 28px;
    z-index: 4;
    display: flex;
    gap: 12px;
    opacity: 1;
    transition: opacity .24s ease, transform .24s ease;
}

.alpstone-patch-arrow {
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--patch-white);
    color: var(--alpstone-blue);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    box-shadow: 0 4px 16px rgba(67,141,215,.25);
    transition: width .36s cubic-bezier(.2,.8,.2,1), padding .36s cubic-bezier(.2,.8,.2,1), background .22s ease, color .18s ease, box-shadow .22s ease, opacity .24s ease, transform .36s cubic-bezier(.2,.8,.2,1);
}

.alpstone-patch-arrow:hover,
.alpstone-patch-arrow:focus-visible { background: var(--alpstone-blue-dark); color: var(--patch-white); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(67,141,215,.35); }
.alpstone-patch-arrow:focus-visible,
.alpstone-patch-primary:focus-visible,
.alpstone-patch-notice a:focus-visible { outline: 3px solid rgba(32,55,93,.48); outline-offset: 3px; }
.alpstone-patch-arrow:disabled { opacity: 0; pointer-events: none; transform: translateX(10px) scale(.92); }

.alpstone-patch-arrow-icon { width: 12px; height: 12px; display: block; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transition: opacity .2s ease, transform .26s cubic-bezier(.22,1,.36,1); }
.alpstone-patch-arrow:first-child .alpstone-patch-arrow-icon { transform: translateX(2px) rotate(-135deg); }
.alpstone-patch-next .alpstone-patch-arrow-icon,
.alpstone-patch-next-label { position: absolute; top: 50%; left: 50%; }
.alpstone-patch-next .alpstone-patch-arrow-icon { transform: translate(-58%, -50%) rotate(45deg); }
.alpstone-patch-next-label { opacity: 0; transform: translate(-50%, calc(-50% + 2px)) scale(.82); white-space: nowrap; transition: opacity .2s ease, transform .26s cubic-bezier(.22,1,.36,1); }
.alpstone-patch.is-last-step .alpstone-patch-next { width: 126px; padding: 0 26px; }
.alpstone-patch.is-last-step .alpstone-patch-next .alpstone-patch-arrow-icon { opacity: 0; transform: translate(-58%, -50%) rotate(45deg) scale(.82); }
.alpstone-patch.is-last-step .alpstone-patch-next-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.alpstone-patch.is-nav-changing .alpstone-patch-next .alpstone-patch-arrow-icon,
.alpstone-patch.is-nav-changing .alpstone-patch-next-label,
.alpstone-patch.is-nav-changing .alpstone-patch-arrow:first-child { opacity: 0; pointer-events: none; }

.alpstone-patch-primary {
    position: absolute;
    left: 54px;
    bottom: 29px;
    z-index: 4;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    border-radius: 999px;
    padding: 0 20px;
    background: #eaf3fc;
    color: var(--alpstone-blue-dark);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    opacity: 1;
    transition: opacity .24s ease, transform .24s ease, background .2s ease, color .2s ease;
}

.alpstone-patch-primary:hover,
.alpstone-patch-primary:focus-visible { background: var(--alpstone-blue-dark); color: var(--patch-white); outline: none; }

.alpstone-patch-return {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--patch-size);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: var(--alpstone-blue);
    color: var(--patch-white);
    font-size: 1.05rem;
    font-weight: 950;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease, background .22s ease;
}

.alpstone-patch-return span { width: 13px; height: 13px; display: block; border-bottom: 3px solid currentColor; border-left: 3px solid currentColor; border-radius: 2px; transform: translateX(2px) rotate(45deg); }
.alpstone-patch-return:hover,
.alpstone-patch-return:focus-visible { background: var(--alpstone-blue-dark); }
.alpstone-patch-return:focus-visible { outline: 3px solid var(--patch-white); outline-offset: -6px; }

.alpstone-patch-hint {
    position: fixed;
    top: calc(100vh - 22px - var(--patch-size));
    left: 22px;
    z-index: 1;
    width: 0;
    max-width: calc(100vw - 42px);
    height: var(--patch-size);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #344054;
    box-shadow: 0 18px 42px rgba(8,9,11,.14);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: width .52s cubic-bezier(.22,1,.36,1), padding .52s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility 0s linear .52s;
}

.alpstone-patch-hint span { min-width: 370px; display: block; opacity: 0; transform: translateX(-8px); white-space: nowrap; font-size: .9rem; font-weight: 850; transition: opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1); }

.alpstone-patch-logo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transform: scale(.72);
    transition: opacity .28s ease, transform .34s cubic-bezier(.22,1,.36,1);
}

.alpstone-patch-logo img { width: 56px; height: 56px; object-fit: contain; }
.alpstone-patch-logo-badge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; display: grid; place-items: center; border: 3px solid var(--patch-white); border-radius: 50%; background: #f04438; color: white; font-size: .7rem; font-weight: 900; }

.alpstone-patch.is-docking .alpstone-patch-backdrop,
.alpstone-patch.is-docked .alpstone-patch-backdrop { background: rgba(5,6,8,0); opacity: 0; pointer-events: none; backdrop-filter: blur(0); }

.alpstone-patch.is-docking .alpstone-patch-card,
.alpstone-patch.is-docked .alpstone-patch-card {
    top: calc(100vh - 22px);
    left: 22px;
    width: var(--patch-size);
    height: var(--patch-size);
    grid-template-rows: 0 1fr;
    border-radius: 50%;
    background: var(--alpstone-blue);
    box-shadow: 0 18px 42px rgba(67,141,215,.28), inset 0 0 0 1px rgba(255,255,255,.22);
    transform: translate(0, -100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.alpstone-patch.is-docking .alpstone-patch-header,
.alpstone-patch.is-docking .alpstone-patch-body,
.alpstone-patch.is-docking .alpstone-patch-nav,
.alpstone-patch.is-docking .alpstone-patch-primary,
.alpstone-patch.is-docking .alpstone-patch-return,
.alpstone-patch.is-docking .alpstone-patch-close,
.alpstone-patch.is-docked:not(.is-hover-open) .alpstone-patch-header,
.alpstone-patch.is-docked:not(.is-hover-open) .alpstone-patch-body,
.alpstone-patch.is-docked:not(.is-hover-open) .alpstone-patch-nav,
.alpstone-patch.is-docked:not(.is-hover-open) .alpstone-patch-primary,
.alpstone-patch.is-docked:not(.is-hover-open) .alpstone-patch-return,
.alpstone-patch.is-docked .alpstone-patch-close,
.alpstone-patch.is-docked.is-hover-open:not(.is-preview-ready) .alpstone-patch-body,
.alpstone-patch.is-docked.is-hover-open:not(.is-preview-ready) .alpstone-patch-nav,
.alpstone-patch.is-docked.is-hover-open:not(.is-preview-ready) .alpstone-patch-primary { opacity: 0; pointer-events: none; }

.alpstone-patch.is-docking .alpstone-patch-logo,
.alpstone-patch.is-docked:not(.is-hover-open) .alpstone-patch-logo { z-index: 3; opacity: 1; pointer-events: auto; transform: scale(1); transition-delay: .68s; }
.alpstone-patch.is-logo-fading .alpstone-patch-logo,
.alpstone-patch.is-hover-open .alpstone-patch-logo { opacity: 0; pointer-events: none; transform: scale(.72); transition-delay: 0s; }

.alpstone-patch.is-docked { inset: auto; pointer-events: none; }
.alpstone-patch.is-docked .alpstone-patch-card { pointer-events: auto; }

.alpstone-patch.is-docked.is-hover-open .alpstone-patch-card {
    width: var(--patch-open-width);
    height: var(--patch-hover-height);
    grid-template-rows: 84px 1fr var(--patch-size);
    border-radius: 34px;
    background: var(--patch-white);
    clip-path: inset(0 round 34px);
    box-shadow: 0 28px 72px rgba(8,9,11,.2);
}

.alpstone-patch.is-docked.is-hover-open .alpstone-patch-nav,
.alpstone-patch.is-docked.is-hover-open .alpstone-patch-primary { bottom: calc(var(--patch-size) + 28px); }
.alpstone-patch.is-docked.is-hover-open .alpstone-patch-return,
.alpstone-patch.is-docked.is-hover-open .alpstone-patch-header,
.alpstone-patch.is-docked.is-preview-ready .alpstone-patch-body,
.alpstone-patch.is-docked.is-preview-ready .alpstone-patch-nav,
.alpstone-patch.is-docked.is-preview-ready .alpstone-patch-primary { opacity: 1; pointer-events: auto; transform: translateY(0); }

.alpstone-patch.is-docked.is-hint-expanded:not(.is-hover-open) .alpstone-patch-hint { width: min(590px, calc(100vw - 42px)); padding: 0 30px 0 calc(var(--patch-size) + 44px); opacity: 1; visibility: visible; transition-delay: 0s; }
.alpstone-patch.is-docked.is-hint-text-visible:not(.is-hover-open) .alpstone-patch-hint span { opacity: 1; transform: translateX(0); }

.alpstone-patch-notice {
    position: absolute;
    inset: 42px 54px 94px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--patch-white);
}

.alpstone-patch-notice a { align-self: flex-start; margin-top: 26px; border-radius: 999px; padding: 12px 18px; background: var(--alpstone-blue); color: white; font-size: .94rem; font-weight: 800; text-decoration: none; }
.alpstone-patch.is-notice .alpstone-patch-step,
.alpstone-patch.is-notice .alpstone-patch-nav,
.alpstone-patch.is-notice .alpstone-patch-primary { opacity: 0; pointer-events: none; }

/* Keep the same light, centered mobile patch used throughout the portfolio.
   Sillon's dashboard action remains as a project-specific row above the
   shared close, Alpstone and step-navigation controls. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .alpstone-patch {
        --patch-size: 62px;
        --patch-open-width: min(430px, calc(100vw - 28px));
        --patch-open-height: min(600px, calc(100svh - 28px));
        --patch-hover-height: var(--patch-open-height);
        --patch-mobile-bar-height: 68px;
    }

    .alpstone-patch-card,
    .alpstone-patch.is-intro .alpstone-patch-card,
    .alpstone-patch.is-mobile-reopened .alpstone-patch-card {
        grid-template-rows: 76px minmax(0, 1fr) var(--patch-mobile-bar-height);
        border-radius: 28px;
        clip-path: inset(0 round 28px);
    }

    .alpstone-patch-card::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        height: var(--patch-mobile-bar-height);
        border-top: 1px solid rgba(67, 141, 215, .14);
        background: rgba(245, 248, 252, .96);
        content: "";
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .alpstone-patch.is-docking .alpstone-patch-card::after,
    .alpstone-patch.is-docked .alpstone-patch-card::after { opacity: 0; }

    .alpstone-patch-header { gap: 14px; padding: 9px 22px; }
    .alpstone-patch-header img { width: 58px; height: 58px; }
    .alpstone-patch-header span { font-size: .94rem; }

    .alpstone-patch-body { min-height: 0; padding: 0; }
    .alpstone-patch-step {
        inset: 22px 24px 76px;
        justify-content: safe center;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .alpstone-patch-step::-webkit-scrollbar { display: none; }
    .alpstone-patch-step h2,
    .alpstone-patch-notice h2 { max-width: 11ch; font-size: clamp(2rem, 9.6vw, 3.15rem); }
    .alpstone-patch-step p,
    .alpstone-patch-notice p { margin-top: 18px; font-size: .95rem; line-height: 1.48; }

    .alpstone-patch-close {
        top: auto;
        right: auto;
        bottom: 12px;
        left: 16px;
        z-index: 5;
        width: 44px;
        height: 44px;
        padding: 0;
        color: transparent;
        background: #fff;
        font-size: 0;
        box-shadow: 0 4px 16px rgba(67, 141, 215, .2);
        transform: none;
    }
    .alpstone-patch-close::before,
    .alpstone-patch-close::after {
        position: absolute;
        width: 16px;
        height: 2.5px;
        border-radius: 999px;
        background: var(--alpstone-blue);
        content: "";
    }
    .alpstone-patch-close::before { transform: rotate(45deg); }
    .alpstone-patch-close::after { transform: rotate(-45deg); }
    .alpstone-patch-close:hover,
    .alpstone-patch-close:focus-visible { color: transparent; background: #fff; transform: none; }
    .alpstone-patch-close:hover::before,
    .alpstone-patch-close:hover::after,
    .alpstone-patch-close:focus-visible::before,
    .alpstone-patch-close:focus-visible::after { background: var(--alpstone-blue-dark); }

    .alpstone-patch-nav,
    .alpstone-patch.is-docked.is-hover-open .alpstone-patch-nav {
        right: 16px;
        bottom: 12px;
        z-index: 5;
        gap: 8px;
    }
    .alpstone-patch-arrow { width: 44px; height: 44px; min-width: 44px; }
    .alpstone-patch.is-last-step .alpstone-patch-next { width: 104px; padding-inline: 18px; }

    .alpstone-patch-return {
        right: auto;
        bottom: 12px;
        left: 70px;
        z-index: 5;
        width: 104px;
        height: 44px;
        gap: 7px;
        border-radius: 999px;
        font-size: 0;
        line-height: 1;
        transform: none;
    }
    .alpstone-patch-return span { width: 10px; height: 10px; border-width: 0 0 2px 2px; }
    .alpstone-patch-return::after { content: "Alpstone"; font-size: .76rem; }
    .alpstone-patch.is-mobile-reopened .alpstone-patch-return { opacity: 1; pointer-events: auto; transform: none; }

    .alpstone-patch-primary {
        right: 24px;
        bottom: calc(var(--patch-mobile-bar-height) + 14px);
        left: 24px;
        min-height: 44px;
        justify-content: space-between;
    }

    .alpstone-patch:not(.is-docked):not(.is-docking) .alpstone-patch-close,
    .alpstone-patch:not(.is-docked):not(.is-docking) .alpstone-patch-nav {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .alpstone-patch-close:focus-visible,
    .alpstone-patch-arrow:focus-visible,
    .alpstone-patch-return:focus-visible { outline: 3px solid rgba(67, 141, 215, .48); outline-offset: 2px; }

    .alpstone-patch.is-docking .alpstone-patch-card,
    .alpstone-patch.is-docked .alpstone-patch-card { top: calc(100svh - 14px); left: 14px; }
    .alpstone-patch-hint { top: calc(100svh - 14px - var(--patch-size)); left: 14px; }
    .alpstone-patch-hint span { min-width: 285px; font-size: .76rem; }
    .alpstone-patch.is-docked.is-hint-expanded:not(.is-hover-open) .alpstone-patch-hint { width: calc(100vw - 28px); padding-right: 18px; padding-left: calc(var(--patch-size) + 24px); }
    .alpstone-patch-notice { inset: 22px 24px 18px; justify-content: safe center; overflow-y: auto; }
}

@media (max-width: 360px) {
    .alpstone-patch { --patch-open-width: calc(100vw - 20px); }
    .alpstone-patch-return { left: 66px; width: 96px; }
    .alpstone-patch-return::after { font-size: .72rem; }
}

/* Match the compact, wrapping mobile hint used by the other portfolio patches. */
@media (max-width: 560px) {
    .alpstone-patch-hint span {
        min-width: 0;
        white-space: normal;
        font-size: .7rem;
        line-height: 1.18;
    }

    .alpstone-patch.is-docked.is-hint-expanded:not(.is-hover-open) .alpstone-patch-hint {
        width: min(250px, calc(100vw - 28px));
        max-width: min(250px, calc(100vw - 28px));
        padding-right: 10px;
        padding-left: calc(var(--patch-size) + 14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alpstone-patch *, .alpstone-patch *::before, .alpstone-patch *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}