/* 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;align-items:center;justify-content:space-between;gap:18px;padding-top:24px;flex-wrap:wrap;}
.s2d-mobnav__foot .lang{display:flex;gap:2px;font-family:var(--font-mono);font-size:14px;font-weight:600;align-items:center;}
.s2d-mobnav__foot .cta-sm{display:inline-flex;align-items: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;}
.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);}

/* 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; }
}