/* S2D site-wide mobile nav — canonical source. Served from /s2d-mobnav.css (public/).
   Edit the hamburger's look HERE, once. Tokens (--b-ink etc.) cascade from each page. */
.navtoggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:1px solid color-mix(in srgb,var(--b-ink) 16%,transparent);border-radius:10px;cursor:pointer;padding:0;}
.navtoggle span{display:block;width:19px;height:2px;background:var(--b-ink);border-radius:2px;}
.s2d-mobnav{position:fixed;inset:0;z-index:2000;background:var(--b-canvas);padding:90px 26px 36px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s var(--ease-standard,ease),transform .22s var(--ease-standard,ease),visibility .22s;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
body.nav-open .s2d-mobnav{opacity:1;visibility:visible;transform:none;}
.s2d-mobnav a{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,8vw,40px);letter-spacing:-0.02em;color:var(--b-ink);text-decoration:none;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--b-ink) 9%,transparent);}
.s2d-mobnav a:hover,.s2d-mobnav a:active{color:var(--b-accent);}
.s2d-mobnav__foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding-top:24px;}
.s2d-mobnav__foot .lang{display:flex;gap:2px;font-family:var(--font-mono);font-size:14px;font-weight:600;align-items:center;justify-content:center;}
.s2d-mobnav__foot .cta-sm{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--radius-pill);background:var(--b-accent);color:var(--b-accent-ink);font-family:var(--font-sans);font-size:15px;font-weight:700;text-decoration:none;width:100%;}
.navclose{position:fixed;top:24px;right:22px;z-index:2001;width:40px;height:40px;display:none;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--b-ink);}
body.nav-open .navclose{display:inline-flex;}
.navclose svg{width:24px;height:24px;}
/* Flyout deep-link styles — section headings and child links cloned by mobnav.js */
.s2d-mobnav .s2d-flyout-head{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,6vw,34px);letter-spacing:-0.02em;color:var(--b-ink);text-decoration:none;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--b-ink) 9%,transparent);display:block;}
.s2d-mobnav .s2d-flyout-head:hover,.s2d-mobnav .s2d-flyout-head:active{color:var(--b-accent);}
.s2d-mobnav .s2d-flyout-child{font-family:var(--font-sans);font-weight:400;font-size:clamp(13px,3.5vw,17px);letter-spacing:0;color:color-mix(in srgb,var(--b-ink) 70%,transparent);text-decoration:none;padding:6px 0 6px 18px;border-bottom:1px solid color-mix(in srgb,var(--b-ink) 5%,transparent);display:block;}
.s2d-mobnav .s2d-flyout-child:hover,.s2d-mobnav .s2d-flyout-child:active{color:var(--b-accent);}

/* Accordion — slide each child individually (flat siblings, no wrapper div) */
.s2d-flyout-group .s2d-flyout-child{max-height:80px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,padding .3s ease;}
.s2d-flyout-group.collapsed .s2d-flyout-child{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;}
/* Chevron affordance on section head */
.s2d-mobnav .s2d-flyout-head{min-height:44px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.s2d-mobnav .s2d-flyout-head::after{content:'';display:block;width:10px;height:10px;border-right:2px solid var(--b-accent);border-bottom:2px solid var(--b-accent);transform:rotate(45deg);transition:transform .2s ease;flex-shrink:0;margin-left:12px;}
.s2d-mobnav .s2d-flyout-head[aria-expanded="true"]::after{transform:rotate(-135deg);}

/* Re-show the hamburger at mobile width. Base rule above keeps it hidden on desktop;
   this restores the homepages' own @media{.navtoggle{display:inline-flex}} that this
   sheet (loaded last) was otherwise overriding. Matches the pages' 860px breakpoint. */
@media (max-width: 860px){
  .navtoggle{ display: inline-flex; }
  /* The page sets .header{position:sticky} but html/body have overflow-x:hidden,
     which silently breaks sticky. overflow-x:clip suppresses horizontal scroll the
     same way WITHOUT creating a scroll container, so the whole header sticks again. */
  html, body { overflow-x: clip; }
}