/* The header on the pillar pages that tell a story (/web, /growth) — loaded by those pages only (docs/public-site.md ›
   Header and menu). One header from desktop to phone that folds continuously, and a menu that unfolds under it.
   Colours come from --hd-* (the site's tokens by default; a page maps them to its own palette). */
:root {
  --hd-ink: var(--text-primary); --hd-muted: var(--text-secondary); --hd-meta: var(--text-meta);
  --hd-line: var(--border-subtle); --hd-edge: var(--border); --hd-bg: var(--surface-base);
  --hd-action: var(--action-bg); --hd-action-ink: var(--action-text); --hd-action-hover: var(--action-hover);
}
/* The header is fixed here, not sticky: focusing something in it must never scroll the story (for a sticky header,
   the page's scroll-padding makes Chrome "reveal" it by moving the page). Its room is kept by the body. */
.site-header { position: fixed; inset: 0 0 auto 0; }
body { padding-top: var(--header-h); }
.skip { position: fixed; } /* same reason: tabbing onto it from mid-story must not scroll the page to the top */

/* ── One header from desktop to phone: it folds continuously, never swaps ──────────────────────────────────
   --fold 0 → 1: the secondary links (Work, About, language) fade and give up their width first, then Services,
   and the menu button grows in where they were. --tight 0 → 1: on the narrowest phones the header action steps out.
   A real resize animates the registered variables across the breakpoint; in "Every screen" web.js drives the very
   same variables from the page's width (and says when the folded parts leave the tab order: .is-folded/.is-tight). */
@property --fold { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tight { syntax: "<number>"; inherits: true; initial-value: 0; }
.site-header {
  --fold: 0; --tight: 0;
  --fo-2: clamp(0, 1 - var(--fold) / .45, 1);
  --fo-1: clamp(0, 1 - (var(--fold) - .3) / .4, 1);
  --fo-m: clamp(0, (var(--fold) - .5) / .5, 1);
  transition: --fold 480ms var(--ease-state), --tight 360ms var(--ease-state), background-color var(--dur-state) var(--ease-state), border-color var(--dur-state) var(--ease-state);
}
@media (max-width: 899px) { .site-header { --fold: 1; } }
@media (max-width: 420px) { .site-header { --tight: 1; } }
.site-header .nav { display: flex; gap: calc(.25rem * var(--fo-1)); transition: visibility 480ms linear; }
.site-header .nav-link { overflow: hidden; white-space: nowrap; }
.site-header .nav > a.nav-link { opacity: var(--fo-2); max-width: calc(7rem * var(--fo-2)); padding-inline: calc(.75rem * var(--fo-2)); translate: calc(8px * (1 - var(--fo-2))) 0; }
.site-header .nav-item--menu > .nav-link { opacity: var(--fo-1); max-width: calc(8rem * var(--fo-1)); padding-inline: calc(.75rem * var(--fo-1)); translate: calc(8px * (1 - var(--fo-1))) 0; }
.site-header .lang { display: block; margin-right: calc(-.5rem * (1 - var(--fo-2))); transition: visibility 480ms linear; }
.site-header .lang-btn { opacity: var(--fo-2); max-width: calc(5rem * var(--fo-2)); padding-inline: calc(.625rem * var(--fo-2)); overflow: hidden; }
.site-header .header-cta { display: inline-flex; opacity: clamp(0, 1 - var(--tight) * 2.5, 1); max-width: calc(12rem * (1 - var(--tight))); padding-inline: calc(.875rem * (1 - var(--tight))); overflow: hidden; white-space: nowrap; transition: visibility 360ms linear; }
.site-header .header-actions { margin-left: auto; }
.site-header .menu-toggle {
  display: inline-grid; position: relative; overflow: hidden; visibility: hidden;
  width: calc(2.75rem * var(--fo-m)); margin-left: calc(-.5rem * (1 - var(--fo-m)));
  opacity: var(--fo-m); scale: calc(.72 + .28 * var(--fo-m));
  transition: visibility 480ms linear, border-color var(--dur-feedback) var(--ease-state);
}
@media (max-width: 899px) {
  .site-header :is(.nav, .lang) { visibility: hidden; }
  .site-header .menu-toggle { visibility: visible; }
}
@media (max-width: 420px) { .site-header .header-cta { visibility: hidden; } }
.site-header.is-folded :is(.nav, .lang) { visibility: hidden; }
.site-header.is-toggle .menu-toggle { visibility: visible; }
.site-header.is-tight .header-cta { visibility: hidden; }

/* The menu button: two lines that turn into a cross in place (the same button opens and closes the menu). */
.menu-toggle > .i { display: none; }
.menu-toggle::before, .menu-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1.125rem; height: 1.5px; margin: -.75px 0 0 -.5625rem;
  border-radius: 1px; background: currentColor; transition: transform 320ms var(--ease-enter);
}
.menu-toggle::before { transform: translateY(-3.5px); }
.menu-toggle::after { transform: translateY(3.5px); }
.menu-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
.site-header .menu-toggle[aria-expanded="true"] { color: var(--hd-ink); border-color: color-mix(in srgb, var(--hd-ink) 35%, transparent); }
.menu-toggle:focus-visible { outline: 2px solid var(--hd-ink); outline-offset: 2px; }

/* ── The menu: a panel that unfolds from under the header, over a scrim; the header (and its X) stay usable ────
   header.js opens it without a modal layer (so the same button closes it), traps focus between that button and the
   panel, locks the page's scroll, and closes it on Escape, the scrim, a link, a return to desktop or a history step.
   Its colours are the page's own, whatever state the story is in. */
.mobile-menu.hd-mm {
  --text-primary: var(--hd-ink); --text-secondary: var(--hd-muted); --text-meta: var(--hd-meta);
  --border-subtle: var(--hd-line); --border: var(--hd-edge); --surface-base: var(--hd-bg);
  --action-bg: var(--hd-action); --action-text: var(--hd-action-ink); --action-hover: var(--hd-action-hover);
  position: fixed; inset: var(--header-h) auto auto var(--mm-l, 0px); z-index: 49;
  width: var(--mm-w, 100%); height: auto; max-height: calc(100dvh - var(--header-h));
  overflow: auto; overscroll-behavior: contain; background: transparent; animation: none;
}
.mobile-menu.hd-mm[open] { animation: none; }
.mobile-menu.hd-mm .mobile-menu-top { display: none; }
.mobile-menu.hd-mm .mobile-menu-inner {
  min-height: 0; gap: 1.5rem; padding: 1.25rem var(--mm-pad, var(--gutter)) max(1.5rem, env(safe-area-inset-bottom));
  background: var(--hd-bg); border-bottom: 1px solid var(--hd-line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .35);
}
.mobile-menu.hd-mm .brand .mark { color: var(--hd-ink); }
@media (max-width: 599px) { .mobile-menu.hd-mm { height: calc(100dvh - var(--header-h)); } .mobile-menu.hd-mm .mobile-menu-inner { min-height: 100%; } }
.mobile-menu.hd-mm .mobile-pillars a, .mobile-menu.hd-mm .mobile-links a, .mobile-menu.hd-mm .mobile-langs a { transition: color var(--dur-feedback) var(--ease-state); }
.mobile-menu.hd-mm .mobile-pillars a:is(:hover, :focus-visible) b, .mobile-menu.hd-mm .mobile-links a:is(:hover, :focus-visible) { color: var(--hd-ink); }
.mobile-menu.hd-mm :is(a, button):focus-visible { outline: 2px solid var(--hd-ink); outline-offset: 2px; border-radius: 2px; }
.mobile-menu.hd-mm[open] .mobile-menu-inner { animation: hd-mm-in 420ms var(--ease-enter) both; }
.mobile-menu.hd-mm[open] .mobile-menu-inner > * { animation: hd-mm-item 380ms var(--ease-enter) both; animation-delay: 90ms; }
.mobile-menu.hd-mm[open] .mobile-menu-inner > :last-child { animation-delay: 150ms; }
.mobile-menu.hd-mm.is-closing .mobile-menu-inner { animation: hd-mm-out 240ms var(--ease-state) both; }
.mobile-menu.hd-mm.is-closing .mobile-menu-inner > * { animation: hd-mm-fade 120ms linear both; }
@keyframes hd-mm-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hd-mm-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes hd-mm-item { from { opacity: 0; transform: translateY(-8px); } }
@keyframes hd-mm-fade { to { opacity: 0; } }
.hd-scrim { position: fixed; inset: var(--header-h) 0 0 0; z-index: 48; background: rgba(5, 5, 5, .42); opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-state), visibility 280ms linear; }
.hd-scrim.is-on { opacity: 1; visibility: visible; }
html.hd-menu-open { overflow: hidden; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.hd-mm[open] .mobile-menu-inner, .mobile-menu.hd-mm[open] .mobile-menu-inner > *, .mobile-menu.hd-mm.is-closing .mobile-menu-inner { animation-duration: 1ms; }
  .site-header, .menu-toggle::before, .menu-toggle::after { transition-duration: 1ms; }
}