/* A shared tablet/mobile menu breakpoint across the portfolio. */
header #menu-open{display:none}
@media(max-width:1100px){
 header nav[aria-label="Main"]>a{display:none!important}
 header #menu-open{display:flex!important;align-items:center;justify-content:center;width:48px;height:48px;padding:12px;border-radius:50%;border:1px solid #ffffff40;background:#1c1d20;color:#fff;flex:0 0 auto}
 header #menu-open svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;pointer-events:none}
 header #menu-open:focus-visible{outline:3px solid #3455f5;outline-offset:5px}
 #menu{box-sizing:border-box;max-height:85dvh;overflow:auto}
}
/* Right-hand drawer, with a curved leading edge that settles flat. */
#menu{position:fixed;inset:0;box-sizing:border-box;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;padding:0;border:0;background:transparent;color:#fff;overflow:clip;overscroll-behavior:none;outline:none}
#menu::backdrop{background:rgba(0,0,0,0);transition:background .55s ease}
#menu.is-open::backdrop{background:rgba(0,0,0,.25)}
#menu .navigation-panel{position:absolute;right:0;top:0;display:flex;flex-direction:column;width:min(52vw,600px);min-width:410px;height:100%;padding:clamp(100px,15vh,160px) clamp(36px,6vw,80px) 36px;background:#1c1d20;transform:translateX(calc(100% + 110px));transition:transform .7s cubic-bezier(.76,0,.24,1);isolation:isolate;will-change:transform;backface-visibility:hidden}
#menu .navigation-panel::before{content:"";position:absolute;right:calc(100% - 1px);top:0;width:100px;height:100%;border-radius:100% 0 0 100%;background:#1c1d20;transform-origin:right;transition:transform .7s cubic-bezier(.76,0,.24,1);z-index:-1}
#menu.is-open .navigation-panel{transform:translateX(0)}
#menu:not(.is-open) .navigation-panel,#menu:not(.is-open) .navigation-panel::before{transition-duration:.55s}
#menu.is-open .navigation-panel::before{transform:scaleX(0)}
#menu .close{position:absolute;top:24px;right:24px;display:flex;align-items:center;justify-content:center;margin:0;padding:18px;width:64px;height:64px;border:0;border-radius:50%;background:#3455f5;color:#fff;cursor:pointer}
#menu .close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#menu .navigation-caption{margin:0;padding-bottom:24px;border-bottom:1px solid #ffffff30;color:#99999c;text-transform:uppercase;letter-spacing:.08em;font-size:11px;line-height:1.5}
#menu nav{display:flex;flex-direction:column;margin:28px 0;gap:6px;overflow:auto;padding-left:22px;margin-left:-22px}
#menu nav a{position:relative;display:block;width:fit-content;border:0;padding:2px 0;font-size:clamp(32px,4.5vw,52px);font-weight:400;line-height:1.2;letter-spacing:-.035em;opacity:0;transform:translateX(65px);transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s;transition-delay:0s}
#menu.is-open nav a{opacity:1;transform:translateX(0);transition-delay:calc(.18s + var(--menu-index)*.045s)}
#menu nav a::before{content:"";position:absolute;left:-20px;top:50%;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translateY(-50%) scale(0);transition:transform .2s}
#menu nav a[aria-current="page"]::before,#menu nav a:hover::before,#menu nav a:focus-visible::before{transform:translateY(-50%) scale(1)}
#menu a:focus-visible,#menu button:focus-visible{outline:2px solid #fff;outline-offset:6px}
#menu .navigation-footer{margin-top:auto;padding-top:24px;border-top:1px solid #ffffff30;display:flex;flex-direction:column;gap:10px;font-size:11px;color:#99999c;line-height:1.5}
@media(max-width:600px){#menu .navigation-panel{width:100%;min-width:0;padding:130px 9vw 30px}#menu nav a{font-size:42px}#menu .close{top:22px;right:6vw;width:56px;height:56px;padding:16px}}
@media(max-height:550px){#menu .navigation-panel{padding-top:82px;padding-bottom:20px}#menu .navigation-caption{padding-bottom:12px}#menu nav{margin:16px 0}#menu nav a{font-size:28px}#menu .navigation-footer{padding-top:12px}}
@media(prefers-reduced-motion:reduce){#menu .navigation-panel,#menu .navigation-panel::before,#menu nav a,#menu::backdrop{transition:none!important}#menu nav a{opacity:1;transform:none}}

html{scrollbar-gutter:stable}
#menu .close:focus:not(:focus-visible){outline:none}

/* Safari may mark programmatic focus as focus-visible after a tap. */
#menu .close:focus{outline:none;box-shadow:none}
#menu.keyboard-navigation .close:focus-visible{outline:2px solid #fff;outline-offset:6px}

/* Desktop header scrolls naturally; its drawer stays available through a compact toggle. */
.scroll-menu-toggle{position:fixed;top:24px;right:24px;z-index:100;display:none;align-items:center;justify-content:center;width:64px;height:64px;padding:18px;border:0;border-radius:50%;background:#1c1d20;color:#fff;visibility:hidden;pointer-events:none;opacity:0;transform:scale(.6);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,background-color .2s,visibility .35s}
.scroll-menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;pointer-events:none}
.scroll-menu-toggle.is-visible{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1)}
.scroll-menu-toggle:hover{background:#3455f5}.scroll-menu-toggle:focus-visible{outline:3px solid #3455f5;outline-offset:5px}
@media(min-width:1101px){.header{position:relative;top:auto}.scroll-menu-toggle{display:flex}}
@media(prefers-reduced-motion:reduce){.scroll-menu-toggle{transition:none;transform:none}}

/* Share the circular CTA magnet and rising cobalt fill. */
.scroll-menu-toggle.cta-circle.cta-magnet,header #menu-open.cta-circle.cta-magnet{background:#1c1d20;cursor:pointer}
.scroll-menu-toggle.cta-circle>.cta-circle-fill,header #menu-open.cta-circle>.cta-circle-fill{background:#3455f5}
.scroll-menu-toggle>.cta-magnet-label,header #menu-open>.cta-magnet-label,#menu .close>.cta-magnet-label{display:flex;align-items:center;justify-content:center;line-height:0}
.scroll-menu-toggle.cta-magnet{transition:translate .85s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .35s}
.scroll-menu-toggle.cta-magnet.is-magnet-active{transition-duration:.3s,.35s,.25s,.35s}
@media(prefers-reduced-motion:reduce){.scroll-menu-toggle.cta-magnet{transition:none}}