/* =============================================================================
   HerbGreen Inc. — site.css
   ASSAY: The Calibrated Instrument. Single stylesheet, no build step.

    1  Tokens (spec §3 verbatim) + derived tokens (§4 type scale, layout)
    2  Base, reset, accessibility primitives (§12)
    3  Typography (§4)
    4  Layout: wrap, sections, C-grid, bleed (§5.1–5.2)
    5  Background graticule (§5.5)
    6  Motifs: figures, status chip, buttons, links, notice plates (§5.4)
    7  Nav, menu, skip link (§6.6)
    8  Sections §00–§08 + footer (§8)
    9  Decode markup (§6.3)
   10  Motion: reveals, intro, power-on, state classes (§6)
   11  Forced colours + print (§7.12, §12)

   State contract (set by js/ui.js, js/decode.js, js/main.js and the scenes):
   html.js · html.motion-off · html.q1 · html.is-loaded · html.menu-open
   Hidden pre-reveal states exist ONLY under html.js:not(.motion-off).
   Notice plates (.notice, .fls) are never hidden or animated.
   Only transform / opacity / clip-path are animated (plus the spec'd 120ms
   decode colour settle and the §01 step colour). No shadows, no filters;
   backdrop-filter on the nav only.
   ========================================================================== */


/* =============================================================================
   1  TOKENS — spec §3, verbatim
   ========================================================================== */

:root {
  /* ── surfaces ── */
  --hg-housing:#0A0F0D;      /* page bg (instrument housing) */
  --hg-panel:#0F1714;        /* raised panels, canvas wells, scrolled nav fallback, row hover */
  --hg-notice:#17140A;       /* notice / disclaimer plates */
  --hg-paper:#ECEEE8;        /* §04 only */

  /* ── decorative lines (never text) ── */
  --hg-graticule:#1A2520;    /* page dot graticule */
  --hg-rule:#26332D;         /* hairlines, idle corner brackets */
  --hg-rule-strong:#3A4A43;  /* major ticks, nav ticks, table rules */
  --hg-paper-rule:#C9CEC6;   /* paper hairlines + graph-paper texture */

  /* ── text ── */
  --hg-ink:#E8EDE9;          /* headings, disclaimers         16.2:1 on housing */
  --hg-ink-body:#C3CDC8;     /* long-form body                11.9:1 */
  --hg-ink-2:#9AA8A1;        /* decks, secondary               7.8:1 */
  --hg-ink-3:#7A8981;        /* mono labels/captions min; chip & input borders 5.3:1 housing, 5.0:1 panel/notice */
  --hg-paper-ink:#0B120F;    /* text on paper                 ~17:1 */
  --hg-paper-ink-2:#46534D;  /* secondary on paper             6.9:1 */

  /* ── accents ── */
  --hg-signal:#8FE9C0;       /* "eluent mint": links, accent phrases, CTA fill  13.5:1 */
  --hg-amber:#F2B544;        /* calibration marker: reticles, scan, focus, NOTICE  10.6:1 */
  --hg-amber-deep:#8A5A00;   /* amber on paper: focus, status sub-labels   5.1:1 on paper */
  --hg-amber-30:rgba(242,181,68,.30);

  /* ── canvas glyph tones (decorative, aria-hidden canvases only) ── */
  --hg-glyph-0:#1E3B30;
  --hg-glyph-1:#2F6B53;
  --hg-glyph-2:#4FAE85;
  --hg-glyph-peak:#E6FFF2;
  --hg-amber-dim:#9C7630;
  --hg-paper-faint:#B9C1BA;
  --hg-paper-mid:#7D8A83;

  /* ── semantic aliases (dark default; §04 remaps) ── */
  --surface:var(--hg-housing); --surface-raised:var(--hg-panel);
  --text:var(--hg-ink); --text-body:var(--hg-ink-body); --text-2:var(--hg-ink-2); --text-3:var(--hg-ink-3);
  --line:var(--hg-rule); --line-strong:var(--hg-rule-strong);
  --accent:var(--hg-signal); --marker:var(--hg-amber); --focus:var(--hg-amber);
  --decode-color:var(--hg-signal);

  /* ── fonts ── */
  --font-sans:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* ── spacing (4px base) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:192px;
  --gutter:clamp(16px,4vw,64px);              /* exactly 16px at 360 */
  --gap:24px;                                  /* 16px below 900 */
  --section-pad:clamp(96px,11vw,192px);
  --head-gap:clamp(48px,5vw,72px);             /* header block → content */
  --plate-pad:clamp(20px,2.4vw,32px);

  /* ── shape ── */
  --r-0:0;              /* every box, button, chip, plate, figure, input */
  --r-dot:50%;          /* status dots only */
  --bw:1px; --bw-notice:3px; --bw-focus:2px; --focus-offset:3px;
  --bracket:12px;       /* corner-bracket arm length */

  /* ── shadows / glows ── */
  --shadow:none;        /* no box-shadows anywhere; depth = surface steps */
  --glow:none;          /* no CSS glows/filters; "glow" exists only as --hg-glyph-peak glyphs in canvas */

  /* ── motion ── */
  --ease-instrument:cubic-bezier(.2,.7,.1,1);   /* all reveals */
  --ease-snap:cubic-bezier(.7,0,.2,1);          /* UI state changes */
  --dur-micro:200ms; --dur-ui:240ms; --dur-bracket:400ms;
  --dur-reveal:700ms; --dur-rule:900ms;

  /* ── layers ── */
  --z-graticule:0; --z-figure:1; --z-figure-overlay:2; --z-content:3;
  --z-sticky:10; --z-reminder:40; --z-nav:50; --z-menu:60; --z-skip:70;
}
@media (max-width:899px){ :root{ --gap:16px; } }

.is-paper {            /* §04 only */
  --surface:var(--hg-paper); --surface-raised:var(--hg-paper);
  --text:var(--hg-paper-ink); --text-body:var(--hg-paper-ink); --text-2:var(--hg-paper-ink-2); --text-3:var(--hg-paper-ink-2);
  --line:var(--hg-paper-rule); --line-strong:var(--hg-paper-ink-2);
  --accent:var(--hg-amber-deep); --marker:var(--hg-amber-deep); --focus:var(--hg-amber-deep);
  --decode-color:var(--hg-amber-deep);
}

/* ── derived tokens: §4 type scale + layout helpers ── */
:root {
  --fs-h1:clamp(42px, 5.2vw + 10px, 104px);
  --fs-h2:clamp(34px, 3.4vw + 14px, 72px);
  --fs-deck:clamp(20px, 1.1vw + 15px, 30px);
  --fs-pull:clamp(28px, 2.6vw + 12px, 60px);
  --fs-statement:clamp(26px, 2vw + 14px, 40px);
  --fs-statement-xl:clamp(26px, 2.2vw + 12px, 44px);
  --fs-lead:clamp(18px, .5vw + 15px, 22px);
  --fs-body:clamp(16px, .2vw + 15px, 18px);
  --fs-notice:17px;
  --fs-email:clamp(24px, 3.4vw + 8px, 60px);
  --fs-menu:28px;
  --fs-label:11px;
  --fs-data:13px;
  --fs-stamp:12px;
  --fs-nav:12px;
  --fs-step:clamp(20px, 1vw + 14px, 28px);     /* §01 scrub step copy */

  --nav-h:56px;
  --block:clamp(72px, 7.2vw, 128px);           /* vertical gap between major blocks */
  --lr-gap:clamp(36px, 3.4vw, 56px);           /* label row → heading */
  --hero-h:max(760px, 100svh);                 /* §8.0: min-height 100svh, min 760px */
  --hero-strip:calc(max(84px, 9.375%) + 10px); /* hero profile strip: 6 rows (or 6/64 of a capped grid) */
  --bleed:var(--gutter);                       /* right bleed to the viewport edge (≥1200 refined below) */
}
@supports not (height:1svh) { :root { --hero-h:max(760px, 100vh); } }
@media (max-width:899px) { :root { --nav-h:48px; } }
@media (max-width:599px) { :root { --fs-notice:16px; --hero-strip:calc(max(52px, 8.33%) + 8px); } }
/* main is an inline-size container, so 100cqw = page width without the scrollbar (never 100vw) */
@media (min-width:1200px) {
  :root { --bleed:calc(var(--gutter) + max(0px, (100cqw - 1440px - 2 * var(--gutter)) / 2)); }
}
@supports not (width:1cqw) { :root { --bleed:var(--gutter); } }


/* =============================================================================
   2  BASE
   ========================================================================== */

*, *::before, *::after { box-sizing:border-box; }

html, body { background:var(--hg-housing); color:var(--hg-ink-body); }
html {
  overflow-x:clip;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:72px;
  scrollbar-color:var(--hg-rule-strong) var(--hg-housing);
  scrollbar-gutter:stable;
  color-scheme:dark;
}
html:not(.motion-off) { scroll-behavior:smooth; }
html.menu-open { overflow:hidden; }

body {
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  font-stretch:100%;
  line-height:1.62;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin:0; }
ol, ul { padding:0; list-style:none; }
fieldset { border:0; padding:0; min-width:0; }
legend { padding:0; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button {
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; border-radius:0; padding:0; margin:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
canvas { display:block; }
em { font-style:normal; }
[hidden] { display:none !important; }
::selection { background:var(--hg-rule-strong); color:var(--hg-ink); }
.is-paper ::selection { background:var(--hg-paper-rule); color:var(--hg-paper-ink); }

main { display:block; container-type:inline-size; }
#main:focus { outline:none; }

/* focus (§6.7): 2px solid, 3px offset; amber-deep on paper via --focus */
:focus-visible { outline:var(--bw-focus) solid var(--focus); outline-offset:var(--focus-offset); }
:focus:not(:focus-visible) { outline:none; }

.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link {
  position:fixed; top:8px; left:8px; z-index:var(--z-skip);
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  background:var(--hg-signal); color:var(--hg-housing);
  font:500 var(--fs-nav)/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(calc(-100% - 16px));
}
.skip-link:focus, .skip-link:focus-visible { transform:none; }


/* =============================================================================
   3  TYPOGRAPHY
   ========================================================================== */

.h1, .h2 { font-family:var(--font-sans); font-weight:520; font-stretch:90%; color:var(--text); text-wrap:balance; }
.h1 { font-size:var(--fs-h1); line-height:.96; letter-spacing:-.035em; }
.h2 { font-size:var(--fs-h2); line-height:1; letter-spacing:-.03em; }

/* Instrument Serif italic: one accent word per headline, and pull statements */
.acc { font-family:var(--font-serif); font-style:italic; font-weight:400; font-stretch:normal; letter-spacing:-.01em; }

.deck {
  font-family:var(--font-sans); font-size:var(--fs-deck); font-weight:440; line-height:1.25;
  letter-spacing:-.01em; color:var(--text-2); max-width:36ch; text-wrap:balance;
}
.pull {
  font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:var(--fs-pull);
  line-height:1.12; letter-spacing:-.01em; color:var(--text); max-width:26ch; text-wrap:balance;
}
.statement {
  font-family:var(--font-sans); font-size:var(--fs-statement); font-weight:500; line-height:1.18;
  letter-spacing:-.015em; color:var(--text); max-width:30ch; text-wrap:balance;
}
.statement--xl { font-size:var(--fs-statement-xl); }
.lead { font-size:var(--fs-lead); line-height:1.5; max-width:58ch; color:var(--text-body); }
p { text-wrap:pretty; }

.signal { color:var(--accent); }
.tone-1 { color:var(--text); }
.tone-2 { color:var(--text-2); }

/* mono label voice: 11px / 500 / uppercase / .14em (hard floor for any text) */
.eyebrow, .notice__label, .fls__label, .channels__label, .rail-labels__item, .band__name {
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase; font-stretch:normal;
}
.eyebrow { color:var(--text-2); }


/* =============================================================================
   4  LAYOUT
   ========================================================================== */

.wrap { max-width:calc(1440px + 2*var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }

.hero, .section, .footer { position:relative; isolation:isolate; }
.section { padding-block:var(--section-pad); color:var(--text-body); }

/* content grid: one column below 900px, ten columns above */
.c-grid { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; }
.c-grid > * { grid-column:1 / -1; min-width:0; }
@media (min-width:900px) {
  .c-grid { grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); }
}

/* vertical rhythm inside a section: H2 → deck → head-gap → content */
.section__body > * + * { margin-top:var(--block); }
.section__body > .section__head + * { margin-top:var(--head-gap); }
.section__head > .deck { margin-top:24px; }


/* =============================================================================
   5  BACKGROUND GRATICULE (§5.5)
   ========================================================================== */

.hero::before, .section::before, .footer::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(var(--hg-graticule) 1px, transparent 1.5px) 50% 0 / 24px 24px;
  -webkit-mask-image:linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
          mask-image:linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
}


/* =============================================================================
   6  MOTIFS
   ========================================================================== */

/* ── 6.1 figures + canvas wells (the engine sizes the grid from the canvas box) ── */
.fig { position:relative; margin:0; min-width:0; }
.fig__well {
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--surface-raised); touch-action:pan-y;
}
.fig > .fig__well { width:100%; }   /* definite width: min/max-height must not transfer through aspect-ratio */
.fig__well > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.fig__well--bare { background:transparent; }
.fig__well--paper { background:var(--hg-paper); }

/* the one quiet figure note (FIG. 03) */
.fig__note { margin-top:14px; font-size:13px; line-height:1.4; color:var(--text-3); }

/* ── 6.2 status chip (HerbX) ── */

/* hover rows bleed 12px for their panel fill; their hairlines stay on the content edge */
.recognition__row {
  --rule-b:linear-gradient(var(--line), var(--line)) 12px 100% / calc(100% - 24px) 1px no-repeat;
  --rule-t:linear-gradient(var(--line), var(--line)) 12px 0 / calc(100% - 24px) 1px no-repeat;
}

/* ── 6.3 buttons ── */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:50px; padding:0 22px; border:1px solid transparent; border-radius:999px;
  font:500 15px/1 var(--font-sans); letter-spacing:.005em;
  white-space:nowrap; cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:background-color var(--dur-ui) var(--ease-snap), border-color var(--dur-ui) var(--ease-snap);
}
.btn__arrow { display:inline-block; transition:transform var(--dur-ui) var(--ease-snap); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform:translateX(3px); }
.btn--primary { background:var(--hg-signal); color:var(--hg-housing); }
.btn--primary:hover { background:var(--hg-glyph-peak); }
.btn--ghost { border-color:var(--hg-ink-3); color:var(--hg-ink); }
.btn--ghost:hover { border-color:var(--hg-ink); }

/* ghost text link with arrow (hero) */
.link-arrow {
  position:relative; display:inline-flex; align-items:center; gap:10px; min-height:48px;
  font:500 15px/1 var(--font-sans); letter-spacing:.005em; color:var(--hg-ink);
}
.link-arrow::before, .link-arrow::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:var(--hg-rule-strong);
}
.link-arrow::after { background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform var(--dur-ui) var(--ease-snap); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform:scaleX(1); }
.link-arrow__arrow { display:inline-block; color:var(--hg-signal); }

/* text links that draw a 1px underline left → right (240ms) */
.case-reminder a, .contact__email { position:relative; display:inline-block; }
.case-reminder a::after, .contact__email::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:0 50%; transition:transform var(--dur-ui) var(--ease-snap);
}
.case-reminder a:hover::after, .contact__email:hover::after, .contact__email:focus-visible::after { transform:scaleX(1); }

/* ── 6.6 notice plates — never hidden, never animated ── */
.notice {
  background:var(--hg-notice); border:1px solid var(--hg-amber-30); border-left:var(--bw-notice) solid var(--hg-amber);
  padding:var(--plate-pad); opacity:1; transform:none;
}
.notice__label { color:var(--hg-amber); margin-bottom:12px; }
.notice__text { font-size:var(--fs-notice); font-weight:450; line-height:1.6; color:var(--hg-ink); font-style:normal; max-width:76ch; }
.fls { background:var(--hg-panel); border:1px solid var(--hg-rule); padding:var(--plate-pad); opacity:1; transform:none; }
.fls__label { color:var(--hg-ink-2); margin-bottom:12px; }
.fls__text { font-size:16px; line-height:1.6; color:var(--hg-ink-2); max-width:96ch; }


/* =============================================================================
   7  NAV · PROGRESS RULER · MENU
   ========================================================================== */

.nav { position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); height:var(--nav-h); color:var(--hg-ink); }
.nav::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(10,15,13,.84);
  -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%);
  opacity:0; transition:opacity var(--dur-ui) var(--ease-snap);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .nav::before { background:var(--hg-panel); }
}
html.q1 .nav::before { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--hg-panel); }
html:not(.js) .nav::before, .nav.is-condensed::before { opacity:1; }
.nav::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hg-rule);
  opacity:0; transition:opacity var(--dur-ui) var(--ease-snap); pointer-events:none;
}
html:not(.js) .nav::after, .nav.is-condensed::after { opacity:1; }

.nav__bar { position:relative; z-index:1; height:100%; display:flex; align-items:center; gap:20px; }
.nav__brand { display:inline-flex; align-items:baseline; gap:7px; padding-block:15px; flex:none; }
.nav__wordmark { font-family:var(--font-sans); font-size:15px; font-weight:600; font-stretch:80%; line-height:1; letter-spacing:.06em; color:var(--hg-ink); }
.nav__inc { font:500 var(--fs-label)/1 var(--font-mono); letter-spacing:.14em; color:var(--hg-ink-3); }

.nav__links { display:none; margin-inline:auto; }
.nav__links ul { display:flex; gap:20px; }
.nav__links a {
  position:relative; display:flex; align-items:center; height:44px;
  font:500 var(--fs-nav)/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--hg-ink-2); white-space:nowrap;
}
.nav__links a::after {
  content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--hg-ink-3);
  transform:scaleX(0); transform-origin:0 50%; transition:transform var(--dur-ui) var(--ease-snap);
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="true"] { color:var(--hg-ink); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform:scaleX(1); }
.nav__links a[aria-current="true"]::after { background:var(--hg-amber); transform:scaleX(1); }

.nav__actions { display:flex; align-items:center; gap:16px; margin-left:auto; flex:none; }
.nav__cta { display:none; min-height:38px; padding:0 16px; font-size:14px; }
.nav__cta::before { content:""; position:absolute; inset:-4px 0; }   /* 46px hit area */

.nav__menu-btn, .menu__close {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:44px; min-height:44px;
  font:500 var(--fs-nav)/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--hg-ink);
}
.nav__menu-btn::after { content:""; width:16px; height:5px; border-block:1px solid currentColor; }
.menu__close::after {
  content:""; width:13px; height:13px;
  background:
    linear-gradient(45deg, transparent calc(50% - .6px), currentColor calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(-45deg, transparent calc(50% - .6px), currentColor calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px));
}

@media (min-width:600px) {
  .nav__cta { display:inline-flex; }
}
@media (min-width:1200px) {
  .nav__links { display:block; }
  .nav__menu-btn { display:none; }
  .nav__actions { margin-left:0; gap:20px; }
}

/* full-screen menu (below 1200px); ui.js toggles [hidden] + .is-open */
.menu {
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:var(--z-menu); overflow-y:auto; overscroll-behavior:contain;
  background:var(--hg-housing); color:var(--hg-ink);
}
html.js:not(.motion-off) .menu {
  opacity:0; transform:translateY(-8px);
  transition:opacity 280ms var(--ease-snap), transform 280ms var(--ease-snap);
}
html.js:not(.motion-off) .menu.is-open { opacity:1; transform:none; }
.menu__inner { min-height:100%; display:flex; flex-direction:column; padding-bottom:32px; }
.menu__top { height:var(--nav-h); flex:none; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hg-rule); }
.menu__list { margin-top:16px; }
.menu__list a {
  display:flex; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--hg-rule);
  font-family:var(--font-sans); font-size:var(--fs-menu); font-weight:520; font-stretch:90%; line-height:1.15;
  letter-spacing:-.02em; color:var(--hg-ink);
}
.menu__list a[aria-current="true"] { color:var(--hg-signal); }
.menu__foot { margin-top:auto; padding-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.menu__foot .btn { flex:1 1 100%; }
html.js:not(.motion-off) .menu.is-open .menu__list li { animation:hg-rise 520ms var(--ease-instrument) both; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(2) { animation-delay:30ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(3) { animation-delay:60ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(4) { animation-delay:90ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(5) { animation-delay:120ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(6) { animation-delay:150ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(7) { animation-delay:180ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(8) { animation-delay:210ms; }
html.js:not(.motion-off) .menu.is-open .menu__list li:nth-child(9) { animation-delay:240ms; }


/* =============================================================================
   8  SECTIONS
   ========================================================================== */

/* ── §00 HERO ─────────────────────────────────────────────────────────────── */
.hero { padding-bottom:var(--section-pad); }
.hero__grid { display:grid; grid-template-columns:minmax(0,1fr); }
.hero__intro, .hero__ctas { position:relative; z-index:var(--z-content); }
.hero__intro { padding-top:calc(var(--nav-h) + 48px); }
.hero__eyebrow { margin-bottom:24px; }
.hero__title { font-size:12.3vw; line-height:.95; letter-spacing:-.036em; }
@media (min-width:600px) { .hero__title { font-size:min(12.6vw, 112px); } }
@media (min-width:900px) { .hero__title { font-size:6.3vw; } }
@media (min-width:1200px) { .hero__title { font-size:min(7.3vw, 118px); } }
.hero__deck { margin-top:28px; max-width:34ch; }
.hero__ctas { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:40px; }

.fig--hero .fig__well { aspect-ratio:16 / 10; }

.premise { padding-top:var(--section-pad); display:grid; grid-template-columns:minmax(0,1fr); }
.premise__leads { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; margin-top:var(--block); }
.premise__lead { padding-top:24px; border-top:1px solid var(--line); }
.premise__statement { margin-top:var(--block); }

@media (max-width:599px) {
  .hero__intro { padding-top:calc(var(--nav-h) + 36px); }
  .hero__eyebrow { margin-bottom:16px; }
  .hero__deck { margin-top:20px; }
  .hero__fig { order:2; margin-top:40px; margin-inline:calc(-1 * var(--gutter)); }
  .fig--hero .fig__well { aspect-ratio:1 / 1.05; }
  .hero__ctas { order:3; flex-direction:column; align-items:stretch; gap:8px; margin-top:32px; }
  .hero__ctas .btn { width:100%; justify-content:center; }
  .hero__ctas .link-arrow { align-self:center; }
  .glance { order:4; }
  .premise { order:5; }
}
@media (min-width:600px) and (max-width:899px) {
  .hero__fig { margin-top:56px; margin-inline:calc(-1 * var(--gutter)); }
}
@media (min-width:900px) {
  .hero__grid { grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); grid-template-rows:1fr auto auto auto; }
  .hero__intro { grid-column:1 / 8; grid-row:1; align-self:end; padding-top:calc(var(--nav-h) + 40px); }
  .hero__ctas { grid-column:1 / 8; grid-row:2; align-self:start; margin-top:0; padding-top:44px; margin-bottom:calc(var(--hero-h) * .14); }
  .hero__fig {
    grid-column:7 / 13; grid-row:1 / 3; align-self:start;
    margin-top:calc(var(--hero-h) * .12); margin-bottom:calc(var(--hero-h) * .10); margin-right:calc(-1 * var(--gutter));
  }
  .fig--hero .fig__well { aspect-ratio:auto; height:calc(var(--hero-h) * .78); min-height:560px; }
  .glance { grid-column:1 / -1; grid-row:3; }
  .premise { grid-column:1 / -1; grid-row:4; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); }
  .premise > * { grid-column:1 / -1; }
  .premise__pull { grid-column:1 / 12; }
  .premise__leads { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--gap); }
  .premise__statement { grid-column:1 / 11; }
}
@media (min-width:900px) and (max-width:1199px) {
  .hero__intro, .hero__ctas { grid-column:1 / 7; }
}
@media (min-width:1200px) {
  .hero__intro { grid-column:1 / 8; }
  .hero__ctas { grid-column:1 / 8; }
  .hero__fig { grid-column:8 / 13; margin-right:calc(-1 * var(--bleed)); }
  .premise__pull { grid-column:1 / 12; }
  .premise__leads { grid-column:1 / 13; grid-template-columns:repeat(12, minmax(0,1fr)); }
  .premise__lead:first-child { grid-column:1 / 6; }
  .premise__lead:last-child { grid-column:7 / 12; }
  .premise__statement { grid-column:1 / 10; }
}

/* ── §01 APPROACH ─────────────────────────────────────────────────────────── */
.deck--ticks .deck__line { display:block; }
.deck--ticks .deck__line + .deck__line { margin-top:.15em; }

.scrub__fig .fig__well { aspect-ratio:1 / 1; }
.scrub__steps { margin-top:48px; }
.step + .step { margin-top:32px; }
.step__text { font-size:var(--fs-body); line-height:1.62; color:var(--text-body); max-width:64ch; }

.approach__lead { max-width:58ch; }
.section__body > .approach__lead + .fig--channels { margin-top:48px; }

@media (min-width:900px) {
  .approach__head { grid-column:1 / 8; }
  .scrub { display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); min-height:280vh; }
  .scrub__fig {
    grid-column:1 / 6; grid-row:1; align-self:start; position:sticky; top:72px;
    height:min(calc(100svh - 120px), 820px); display:flex; flex-direction:column;
  }
  .scrub__fig .fig__well { aspect-ratio:auto; flex:1 1 0; min-height:0; }
  .scrub__steps { grid-column:7 / 11; grid-row:1; margin-top:0; padding-block:10vh 30vh; }
  .step { min-height:80vh; display:flex; flex-direction:column; justify-content:center; }
  .step + .step { margin-top:0; }
  .step__text { font-size:var(--fs-step); line-height:1.4; letter-spacing:-.01em; color:var(--hg-ink); max-width:30ch; }
  html.js .step__text { color:var(--hg-ink-3); transition:color var(--dur-ui) var(--ease-snap); }
  html.js .step:not(.is-active) .signal { color:inherit; }
  html.js .step.is-active .step__text { color:var(--hg-ink); }
  .approach__lead { grid-column:1 / 8; }
  .approach__pull { grid-column:1 / 10; }
}

/* FIG. 01b — channels: DOM label column + transparent canvas */
.channels { display:flex; align-items:flex-start; border-top:1px solid var(--line); }
.channels__labels { flex:0 0 30%; min-width:0; padding-top:var(--hg-ch-top, 0px); }
.channels__label {
  display:flex; align-items:center; gap:12px; height:var(--hg-ch, 28px); padding-right:16px;
  letter-spacing:.1em; color:var(--text-2); white-space:nowrap; overflow:hidden;
}
.channels__label + .channels__label { border-top:1px solid var(--hg-rule); }
@media (min-width:600px) and (max-width:899px) {
  .channels__label { white-space:normal; line-height:1.25; letter-spacing:.06em; padding-right:10px; }
}
.channels__label:hover, .channels__label.is-hot { color:var(--hg-amber); }
.fig--channels .fig__well { flex:1 1 auto; min-width:0; height:140px; border-left:1px solid var(--line); }
@media (max-width:599px) {
  .channels__labels { flex-basis:44%; }
  .channels__label { height:var(--hg-ch, 39px); gap:8px; padding-right:10px; letter-spacing:.06em; line-height:1.25; white-space:normal; }
  .fig--channels .fig__well { height:195px; }
}

/* ── §02 THE CASE ─────────────────────────────────────────────────────────── */
.case__body { display:grid; grid-template-columns:minmax(0,1fr); }
.case__narrative { margin-top:48px; min-width:0; }
.case__status { margin-top:var(--block); }
.case__statement { margin-top:var(--block); }

.case-log { border-left:1px solid var(--line); }
.log-entry { position:relative; padding:0 0 40px 28px; }
.log-entry:last-child { padding-bottom:0; }
.log-entry::before {   /* timeline node */
  content:""; position:absolute; left:-4px; top:.62em; width:7px; height:7px; border-radius:50%;
  background:var(--hg-housing); border:1px solid var(--hg-ink-3);
}
.log-entry__body { font-size:17px; line-height:1.62; color:var(--hg-ink-body); max-width:62ch; }
.log-entry__body p + p { margin-top:.8em; }

.case__lead { margin-top:72px; color:var(--text-2); }
.case__pull { margin-top:20px; }
.case__text { margin-top:28px; max-width:64ch; }

.status-row { padding-top:28px; border-top:1px solid var(--line); }
.status-row__text { color:var(--hg-ink); max-width:60ch; font-size:var(--fs-lead); line-height:1.5; }

.case-reminder { display:none; }

@media (max-width:599px) {
  .log-entry { padding-left:20px; padding-bottom:32px; }
}
@media (max-width:899px) {
  .case-reminder {
    position:sticky; bottom:0; z-index:var(--z-reminder);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 16px;
    margin:40px calc(-1 * var(--gutter)) 0; padding:12px var(--gutter);
    background:var(--hg-notice); border-top:2px solid var(--hg-amber);
    font-family:var(--font-sans); font-size:14px; font-weight:450; line-height:1.4; color:var(--hg-ink);
    transition:transform var(--dur-micro) var(--ease-snap);
  }
  .case-reminder > span { flex:1 1 240px; }
  .case-reminder a {
    display:inline-flex; align-items:center; min-height:44px; margin-block:-6px;   /* 44px target, 32px of layout */
    font:500 var(--fs-label)/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--hg-amber); white-space:nowrap;
  }
  .case-reminder a::after { bottom:12px; }
  .case-reminder.is-hidden { transform:translateY(100%); }
}
@media (min-width:900px) {
  .case__head { grid-column:1 / 8; }
  .case__body { grid-template-columns:repeat(10, minmax(0,1fr)); grid-template-rows:auto auto auto; column-gap:var(--gap); }
  .case__notice { grid-column:7 / 11; grid-row:1 / 4; align-self:start; position:sticky; top:88px; z-index:var(--z-sticky); margin-left:12px; }
  .case__narrative { grid-column:1 / 7; grid-row:1; margin-top:0; }
  .case__status { grid-column:1 / 7; grid-row:2; }
  .case__statement { grid-column:1 / 7; grid-row:3; }
  .log-entry { padding-left:36px; }
}

/* ── §03 HERBX ────────────────────────────────────────────────────────────── */
.herbx__title { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.herbx__title .h2 { flex:0 1 auto; }
/* regulatory status: plain disclaimer text with the notice plates' amber rule */
.herbx__status { flex:1 1 100%; max-width:52ch; padding-left:14px; border-left:2px solid var(--hg-amber); font-size:15px; line-height:1.5; color:var(--text-2); }
.herbx__text > .deck { margin-top:24px; }
.herbx__paras { margin-top:36px; max-width:64ch; }
.herbx__paras p + p { margin-top:1em; }
.herbx__fig { margin-top:56px; margin-inline:calc(-1 * var(--gutter)); }
.fig--profile .fig__well { aspect-ratio:1 / 1; }
.herbx__fig .fig__note { padding-inline:var(--gutter); }


.flow { max-width:none; }
.flow__line { display:block; }
.flow__line + .flow__line { margin-top:.3em; }
.flow__a, .flow__b { white-space:nowrap; }
@media (max-width:599px) {
  .flow__line + .flow__line { margin-top:.5em; }
  .flow__a, .flow__b { white-space:normal; }
}
@media (min-width:900px) {
  .herbx__intro { display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); align-items:start; }
  .herbx__text { grid-column:1 / 6; padding-right:var(--sp-6); }
  .herbx__fig { grid-column:6 / 11; margin:0 calc(-1 * var(--gutter)) 0 0; }
  .fig--profile .fig__well { aspect-ratio:5 / 4; min-height:520px; }
  .herbx__fig .fig__note { padding-inline:0 var(--gutter); }
}
@media (min-width:1200px) {
  .herbx__fig { margin-right:calc(-1 * var(--bleed)); }
  .herbx__fig .fig__note { padding-right:var(--bleed); }
}

/* ── §04 REGULATORY (paper) ───────────────────────────────────────────────── */
.section.is-paper { background-color:var(--hg-paper); color:var(--text-body); border-block:1px solid var(--hg-paper-ink); }
.section.is-paper::before { content:none; }
.fig--pathway .fig__well { height:98px; }
.rail-labels { position:relative; height:56px; }
.rail-labels__item {
  position:absolute; top:6px; left:0; display:flex; flex-direction:column; gap:3px;
  letter-spacing:.1em; color:var(--hg-paper-ink); white-space:nowrap;
}
/* N0 / N3 align to the outer edge of their node cell (--cell-w from the scene) */
.rail-labels__item[data-node="0"] { left:calc(var(--n0, 3%) - .5 * var(--cell-w, 0px)); }
.rail-labels__item[data-node="1"] { left:var(--n1, 36%); transform:translateX(-50%); align-items:center; text-align:center; }
.rail-labels__item[data-node="2"] { left:var(--n2, 66%); transform:translateX(-50%); align-items:center; text-align:center; }
.rail-labels__item[data-node="3"] { left:calc(var(--n3, 97%) + .5 * var(--cell-w, 0px)); transform:translateX(-100%); align-items:flex-end; text-align:right; }
.rail-labels__sub { color:var(--hg-amber-deep); }
.rail-labels__name { text-decoration:underline 1px transparent; text-underline-offset:4px; }
.rail-labels__item.is-hot .rail-labels__name { text-decoration-color:var(--hg-amber-deep); }

.regulatory__cols { display:grid; grid-template-columns:minmax(0,1fr); row-gap:56px; }
.regulatory__text p { max-width:64ch; }
.regulatory__text p + p { margin-top:1em; }
.priorities__label { color:var(--text); margin-bottom:10px; }
.nowrap { white-space:nowrap; }
.priority { padding:16px 0; border-top:1px solid var(--line); }
.priority:last-child { border-bottom:1px solid var(--line); }
.priority__text { color:var(--text); line-height:1.5; }

@media (max-width:899px) and (min-width:600px) {
  .rail-labels { height:60px; }
  .rail-labels__item { top:8px; white-space:normal; max-width:16ch; letter-spacing:.06em; }
}
@media (max-width:599px) {
  /* vertical rail: 9-column well on the left, labels to the right of each node */
  .fig--pathway { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:16px; }
  .fig--pathway > .fig__well { grid-column:1; grid-row:1; width:64px; height:442px; }
  .rail-labels { grid-column:2; grid-row:1; height:442px; }
  .rail-labels__item[data-node] { left:0; transform:translateY(-50%); align-items:flex-start; text-align:left; top:auto; white-space:normal; }
  .rail-labels__item[data-node="0"] { top:var(--n0, 3%); }
  .rail-labels__item[data-node="1"] { top:var(--n1, 36%); }
  .rail-labels__item[data-node="2"] { top:var(--n2, 66%); }
  .rail-labels__item[data-node="3"] { top:var(--n3, 97%); }
  .rail-labels__item::before { content:""; position:absolute; left:-12px; top:50%; width:8px; height:1px; background:var(--hg-paper-ink-2); }
}
@media (min-width:900px) {
  .regulatory__head { grid-column:1 / 9; }
  .regulatory__cols { grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); }
  .regulatory__text { grid-column:1 / 6; padding-right:var(--sp-6); }
  .priorities { grid-column:6 / 11; }
  .regulatory__pull { grid-column:1 / 10; }
}

/* ── §05 SOURCE ───────────────────────────────────────────────────────────── */
.source__intro { margin-top:28px; max-width:58ch; }
.column-fig { display:flex; height:520px; }
.column-fig > .fig__well { flex:0 0 62%; min-width:0; }
.bands { position:relative; flex:1 1 auto; min-width:0; background:var(--hg-panel); border-left:1px solid var(--line); }
.band {
  position:absolute; left:0; right:0; height:var(--band-h, 20%);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:6px 12px 6px 14px;
  color:var(--text-2); overflow:hidden;
}
.band[data-band="0"] { top:calc(var(--band-y0, 10%) - var(--band-h, 20%) / 2); }
.band[data-band="1"] { top:calc(var(--band-y1, 30%) - var(--band-h, 20%) / 2); }
.band[data-band="2"] { top:calc(var(--band-y2, 50%) - var(--band-h, 20%) / 2); }
.band[data-band="3"] { top:calc(var(--band-y3, 70%) - var(--band-h, 20%) / 2); }
.band[data-band="4"] { top:calc(var(--band-y4, 90%) - var(--band-h, 20%) / 2); }
.band + .band::before { content:""; position:absolute; left:0; right:0; top:0; border-top:1px dashed var(--hg-rule); }
.band::after { content:""; position:absolute; left:-1px; top:18%; bottom:18%; width:2px; background:var(--hg-amber); transform:scaleY(0); transform-origin:50% 50%; transition:transform var(--dur-ui) var(--ease-snap); }
.band__name { letter-spacing:.08em; line-height:1.35; }
.band.is-hover { color:var(--hg-ink); }
.band.is-active { color:var(--hg-amber); }
.band.is-active::after { transform:scaleY(1); }
html.motion-off .band { color:var(--hg-ink); }   /* still frame: no highlight, labels in ink */
.stage__copy { margin-top:48px; }
.stage__para { font-size:var(--fs-lead); line-height:1.5; max-width:40ch; }
.stage__para + .stage__para { margin-top:1.1em; }

@media (max-width:599px) { .band { padding-inline:10px 6px; } .band__name { letter-spacing:.02em; } }
@media (min-width:900px) {
  .source__head { grid-column:1 / 8; }
  .stage { display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); min-height:200vh; }
  .stage__fig {
    grid-column:1 / 6; grid-row:1; align-self:start; position:sticky; top:72px;
    height:min(86svh, 820px); display:flex; flex-direction:column;
  }
  .stage__fig .column-fig { flex:1 1 0; min-height:0; height:auto; }
  .column-fig > .fig__well { flex-basis:60%; }
  .stage__copy { grid-column:7 / 11; grid-row:1; margin-top:0; padding-block:10vh; }
  .stage__para { min-height:60vh; display:flex; align-items:center; }
  .stage__para + .stage__para { margin-top:0; }
  .source__pull { grid-column:1 / 10; }
}

/* ── §06 BEYOND ───────────────────────────────────────────────────────────── */
.beyond__stage { display:grid; grid-template-columns:minmax(0,1fr); }
.beyond__panel { position:relative; z-index:var(--z-content); min-width:0; }
.beyond__panel > .deck { margin-top:24px; }
.beyond__panel > p:not(.deck) { margin-top:20px; max-width:56ch; }
.beyond__panel > .deck + p { margin-top:32px; }
.beyond__fig { margin-top:48px; margin-inline:calc(-1 * var(--gutter)); }
.fig--phyllotaxis .fig__well { aspect-ratio:1 / 1; }

.floret-label {
  position:absolute; left:0; top:0; z-index:var(--z-figure-overlay); display:block;
  width:max-content; max-width:200px; padding:0 0 4px 8px;
  font:500 var(--fs-label)/1.35 var(--font-mono); letter-spacing:.1em; color:var(--hg-ink);
  transform:translate3d(var(--fx, 50%), var(--fy, 50%), 0) translateY(calc(-100% - 28px));
  pointer-events:none;
}
.floret-label__leader {
  position:absolute; left:0; top:100%; width:1px; height:24px;
  background:var(--hg-amber); transform-origin:50% 100%;
}
.floret-label__leader::after { content:""; position:absolute; left:0; top:0; width:7px; height:1px; background:var(--hg-amber); }
.floret-label__text { display:block; }

.beyond__lead { max-width:58ch; }
.beyond__statement { max-width:30ch; }

@media (min-width:900px) {
  .beyond__stage { grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); }
  .beyond__panel { grid-column:1 / 6; grid-row:1; align-self:start; padding:var(--sp-6) var(--sp-6) var(--sp-6) 0; margin-top:8px; }
  .beyond__fig { grid-column:1 / -1; grid-row:1; margin-top:0; }
  .fig--phyllotaxis .fig__well { aspect-ratio:auto; height:88svh; min-height:640px; }
  .beyond__lead { grid-column:1 / 8; }
  .beyond__statement { grid-column:1 / 10; }
}
@media (min-width:1200px) {
  .beyond__panel { grid-column:1 / 5; padding-left:var(--sp-6); }
  .beyond__fig { margin:0 calc(-1 * var(--bleed)) 0 0; }
}

/* ── §07 PERCEPTION ───────────────────────────────────────────────────────── */
.fig--evidence { margin-inline:calc(-1 * var(--gutter)); }
.fig--evidence .fig__well { height:clamp(200px, 34vw, 460px); }
.section__body > .fig--evidence + .perception__deck { margin-top:48px; }

.deck--split { max-width:none; }
.deck--split .deck__a, .deck--split .deck__b { display:block; width:fit-content; max-width:100%; }
.deck__a { color:var(--text-2); font-weight:440; }
.deck__b { position:relative; margin-top:.12em; color:var(--hg-ink); font-weight:560; }
.deck__b::after {
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:1px; background:var(--hg-signal);
  transform-origin:0 50%; transition:transform 600ms var(--ease-instrument);
}

.perception__cols { display:grid; grid-template-columns:minmax(0,1fr); row-gap:24px; }
.perception__l75 { font-size:var(--fs-lead); line-height:1.5; color:var(--text-2); max-width:44ch; }
.perception__r p { max-width:58ch; }
.perception__r p:first-child { color:var(--text); font-size:var(--fs-lead); line-height:1.5; }
.perception__r p + p { margin-top:1em; }

.recognition { border-top:1px solid var(--line); }
.recognition__row { padding:20px 0; border-bottom:1px solid var(--line); color:var(--text-body); max-width:62ch; font-size:var(--fs-lead); line-height:1.5; }

@media (max-width:599px) { .fig--evidence .fig__well { height:154px; } }
@media (min-width:900px) {
  .perception__head, .perception__deck { grid-column:1 / 9; }
  .perception__cols { grid-template-columns:repeat(10, minmax(0,1fr)); column-gap:var(--gap); }
  .perception__l75 { grid-column:1 / 6; padding-right:var(--sp-6); }
  .perception__r { grid-column:6 / 11; }
  .recognition { grid-column:1 / 9; }
  .recognition__row { padding-block:22px; }
  .perception__pull { grid-column:1 / 10; }
}
@media (min-width:1200px) {
  .fig--evidence { margin:0 calc(-1 * var(--bleed)) 0 0; }
}

/* ── §08 PARTNER ──────────────────────────────────────────────────────────── */
.partner__plate {
  --br-color:var(--hg-amber);
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); row-gap:56px;
  padding:clamp(32px, 5vw, 88px); background:var(--hg-panel);
}
.partner__text { min-width:0; container-type:inline-size; }
.partner__text > p { max-width:60ch; }
.partner__text > * + * { margin-top:22px; }
.partner__text > .deck { margin-top:24px; }
.partner__text > .deck + p { margin-top:32px; }
.partner__lead { color:var(--text-2); }


.partner__text > .request { margin-top:40px; }
.contact__email {
  font-family:var(--font-sans); font-size:var(--fs-email); font-size:min(var(--fs-email), 9.4cqi); font-weight:500; line-height:1.15;
  letter-spacing:-.02em; white-space:nowrap; color:var(--hg-ink); padding-block:6px;
}
.contact__email::after { background:var(--hg-signal); bottom:2px; }
.contact__email::before { content:""; position:absolute; inset:-12px -4px; }   /* 44px hit area */
/* "Request investor materials" discloses the address */
.request__toggle { list-style:none; }
.request__toggle::-webkit-details-marker { display:none; }
.request[open] > .request__toggle .btn__arrow { transform:rotate(90deg); }
.request__panel { margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; }
.request[open] > .request__toggle { background:transparent; border-color:var(--hg-ink-3); color:var(--hg-ink); }
.request[open] > .request__toggle:hover { border-color:var(--hg-ink); }
.request__hint, .audience__legend { font-size:15px; color:var(--text-2); }
.request__hint + .contact__email { margin-top:6px; }
.audience { align-self:stretch; min-width:0; margin:0 0 32px; padding:0; border:0; }
.audience__legend { padding:0; }
.audience__chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.a-chip { position:relative; display:inline-flex; }
.a-chip input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.a-chip span {
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--hg-ink-3); border-radius:999px; font:500 15px/1 var(--font-sans); color:var(--hg-ink-2);
  transition:background-color var(--dur-ui) var(--ease-snap), border-color var(--dur-ui) var(--ease-snap), color var(--dur-ui) var(--ease-snap);
}
.a-chip:hover span { border-color:var(--hg-ink); color:var(--hg-ink); }
.a-chip input:checked + span { background:var(--hg-signal); border-color:var(--hg-signal); color:var(--hg-housing); }
.a-chip input:focus-visible + span { outline:var(--bw-focus) solid var(--focus); outline-offset:var(--focus-offset); }
html.js:not(.motion-off) .request[open] > .request__panel { animation:hg-rise 520ms var(--ease-instrument) both; }
.partner__actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.request__panel > .partner__actions { align-self:stretch; margin-top:24px; }
.sr-status { min-height:1.3em; font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--hg-signal); }

.fig--phaselock .fig__well { aspect-ratio:1 / 1; max-height:360px; }

@media (max-width:599px) {
  .request__toggle { display:flex; }
}
@media (min-width:600px) and (max-width:899px) {
  .partner__actions { align-items:flex-start; }
  .partner__actions .btn, .request__toggle { min-width:280px; }
}
@media (min-width:900px) {
  .partner__actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 16px; }
  .sr-status { flex:1 1 100%; }
  .partner__plate { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; align-items:center; }
  .partner__fig { width:100%; max-width:560px; justify-self:end; }
  .fig--phaselock .fig__well { max-height:none; }
}

/* ── NEWS: dated updates, newest first ── */
.news__list { list-style:none; }
.news__list > li + li { margin-top:var(--block); }
.news-item { padding-top:28px; border-top:1px solid var(--line); }
.news-item__date { font-size:14px; line-height:1.4; color:var(--text-3); }
.news-item__title {
  margin-top:14px; max-width:24ch; font-size:clamp(28px, 1.9vw + 18px, 50px); font-weight:520; font-stretch:90%;
  line-height:1.08; letter-spacing:-.025em; color:var(--text); text-wrap:balance;
}
.news-item__lede { margin-top:22px; max-width:56ch; font-size:var(--fs-lead); line-height:1.5; color:var(--text-body); }
.results { margin-top:48px; }
.results__label { font-size:14px; line-height:1.4; color:var(--text-3); }
.results__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--gap); margin-top:14px; }
.result { display:flex; flex-direction:column; min-width:0; padding:20px 0 22px; border-top:1px solid var(--line); }
.result dd {   /* the value reads first; the virus name labels it */
  order:-1; font-size:clamp(36px, 3.6vw + 18px, 80px); font-weight:520; font-stretch:90%;
  line-height:1; letter-spacing:-.035em; color:var(--text); white-space:nowrap;
}
.result dt { margin-top:12px; font-size:16px; line-height:1.35; color:var(--text); }
.result__note { display:block; font-size:14px; color:var(--text-3); }
.news-item__body { margin-top:40px; max-width:62ch; }
.news-item__body p + p { margin-top:1em; }
@media (min-width:900px) {
  .results__grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .result { padding-right:16px; }
}
@media (min-width:1200px) {
  .news-item__body { max-width:none; columns:2; column-gap:calc(var(--gap) * 3); }
  .news-item__body p { break-inside:avoid; }
}

/* ── INVESTOR BLOCKS: at a glance · origin details · evidence · roadmap · IP ── */

.block-title, .glance__title {
  font-family:var(--font-sans); font-size:clamp(20px, .8vw + 16px, 26px); font-weight:520; font-stretch:95%;
  line-height:1.2; letter-spacing:-.012em; color:var(--text); margin:0 0 20px;
}

/* at a glance */
.glance { position:relative; z-index:var(--z-content); margin-top:var(--block); padding-top:28px; border-top:1px solid var(--line); }
.glance__grid { display:grid; grid-template-columns:minmax(0,1fr); }
.glance__item { padding:16px 0; border-bottom:1px solid var(--line); }
.glance__item dt { font-size:13px; line-height:1.4; color:var(--text-3); }
.glance__item dd { margin-top:6px; font-size:17px; line-height:1.45; color:var(--text); }
@media (min-width:600px) {
  .glance__grid { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--gap); }
}
@media (min-width:900px) {
  .glance { margin-top:0; }
  .glance__grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .glance__item { padding:20px 24px 22px 0; }
}

/* origin: the timeline, then the closing line */
.case-log + .case__pull { margin-top:56px; }

.roadmap__fls { margin-top:16px; font-size:14px; color:var(--text-2); }
.roadmap__fls a { text-decoration:underline; text-underline-offset:3px; }
.partner__legal { font-size:14px; line-height:1.5; color:var(--text-2); }

/* evidence to date */
.evidence__table { width:100%; border-collapse:collapse; }
.evidence__table th, .evidence__table td { text-align:left; vertical-align:top; font-weight:400; }
.evidence__table thead th { padding:0 24px 12px 0; font-size:13px; color:var(--text-3); }
.evidence__table tbody th, .evidence__table tbody td { padding:22px 24px 22px 0; border-top:1px solid var(--line); line-height:1.55; }
.evidence__table tbody tr:last-child > * { border-bottom:1px solid var(--line); }
.evidence__table tbody th { width:22%; font-weight:500; color:var(--text); }
.evidence__table tbody td { color:var(--text-body); }
.evidence__table tbody td:last-child { width:32%; padding-right:0; font-size:15px; color:var(--text-2); }
.evidence__caveat { margin-top:22px; max-width:62ch; color:var(--text); }
@media (max-width:899px) {
  .evidence__table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .evidence__table, .evidence__table tbody, .evidence__table tr, .evidence__table th, .evidence__table td { display:block; width:auto !important; }
  .evidence__table tbody tr { padding:20px 0; border-top:1px solid var(--line); }
  .evidence__table tbody tr:last-child { border-bottom:1px solid var(--line); }
  .evidence__table tbody th, .evidence__table tbody td { padding:0; border:0 !important; }
  .evidence__table tbody td { margin-top:10px; }
}

/* development roadmap (paper section) */
.roadmap__indication { margin-bottom:20px; color:var(--text); }
.roadmap__list { border-top:1px solid var(--line); }
.milestone {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:4px;
  padding:18px 0 18px 30px; border-bottom:1px solid var(--line);
}
.milestone::before {
  content:""; position:absolute; left:2px; top:calc(18px + .45em); width:9px; height:9px; border-radius:50%;
  border:1px solid var(--hg-paper-ink-2); background:var(--hg-paper);
}
.milestone.is-done::before { background:var(--hg-paper-ink); border-color:var(--hg-paper-ink); }
.milestone.is-current::before { background:var(--hg-amber-deep); border-color:var(--hg-amber-deep); }
.milestone__name { font-weight:500; color:var(--text); }
.milestone__status { font-size:14px; color:var(--text-2); }
.milestone.is-current .milestone__status { color:var(--hg-amber-deep); }
.milestone__note { font-size:15px; color:var(--text-2); }

/* IP + standardization */
.assurances { display:grid; grid-template-columns:minmax(0,1fr); row-gap:40px; }
.assurance { padding-top:24px; border-top:1px solid var(--line); }
.assurance p { max-width:52ch; }

@media (min-width:900px) {
  .evidence, .roadmap { grid-column:1 / -1; }
  .milestone { grid-template-columns:4fr 2fr 6fr; column-gap:var(--gap); align-items:baseline; }
  .assurances { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--gap); }
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.footer { padding-block:var(--sp-9) var(--sp-6); border-top:1px solid var(--hg-rule); color:var(--hg-ink-body); }
.fig--baseline .fig__well { height:clamp(96px, 16vw, 230px); background:var(--hg-housing); }
@media (max-width:599px) { .fig--baseline { display:none; } .notice--site { margin-top:0; } }
.notice--site { margin-top:48px; }
.fls { margin-top:16px; }
.footer__row { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; margin-top:72px; }
.footer__name { font:500 var(--fs-data)/1.3 var(--font-mono); letter-spacing:.14em; color:var(--hg-ink); }
.footer__tagline { margin-top:16px; max-width:28ch; font-size:20px; font-weight:440; line-height:1.35; color:var(--hg-ink-2); text-wrap:balance; }
.footer__index ol { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px; }
.footer__index a {
  position:relative; display:flex; align-items:center; gap:12px; min-height:44px;
  font:500 var(--fs-nav)/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--hg-ink-2);
}
.footer__index a::after {
  content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--hg-ink-3);
  transform:scaleX(0); transform-origin:0 50%; transition:transform var(--dur-ui) var(--ease-snap);
}
.footer__index a:hover, .footer__index a:focus-visible { color:var(--hg-ink); }
.footer__index a:hover::after, .footer__index a:focus-visible::after { transform:scaleX(1); }
.footer__tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.footer__bar {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 32px;
  margin-top:72px; padding-top:20px; border-top:1px solid var(--hg-rule);
  font:500 var(--fs-label)/1.5 var(--font-mono); letter-spacing:.04em; color:var(--hg-ink-3);
}
@media (min-width:900px) {
  .footer__row { grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap); }
  .footer__brand { grid-column:1 / 6; }
  .footer__index { grid-column:6 / 10; margin-top:-13px; }
  .footer__tools { grid-column:10 / 13; flex-direction:column; align-items:flex-end; align-self:start; }
}


/* =============================================================================
   9  DECODE MARKUP (js/decode.js)
   ========================================================================== */

.dc { font:inherit; letter-spacing:inherit; }
.dc .w { display:inline-block; white-space:nowrap; }
.dc .c { position:relative; display:inline; transition:color 120ms linear; }
.c.is-s { color:transparent; }
.c.is-s::after {
  content:attr(data-g); position:absolute; inset:0; display:grid; place-items:center;
  font:500 .62em/1 var(--font-mono); letter-spacing:0; color:var(--decode-color);
}
.c.is-m { color:var(--decode-color); }


/* =============================================================================
   10  MOTION
   ========================================================================== */

@keyframes hg-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes hg-pulse { 0%, 100% { opacity:1; } 50% { opacity:.2; } }
@keyframes hg-bob { 0%, 82%, 100% { transform:translateY(0); } 91% { transform:translateY(2px); } }

/* reveal on scroll: [data-reveal] → .is-revealed (ui.js adds hero / group delays inline) */
html.js:not(.motion-off) [data-reveal] {
  transition:opacity var(--dur-reveal) var(--ease-instrument), transform var(--dur-reveal) var(--ease-instrument);
}
html.js:not(.motion-off) [data-reveal]:not(.is-revealed) { opacity:0; transform:translateY(14px); }
/* hero backup: deck then CTAs at 900ms once html.is-loaded lands */
html.js.is-loaded:not(.motion-off) .hero__intro [data-reveal],
html.js.is-loaded:not(.motion-off) .hero__ctas[data-reveal] { opacity:1; transform:none; }
html.js:not(.motion-off) .hero__deck { transition-delay:900ms; }
html.js:not(.motion-off) .hero__ctas { transition-delay:960ms; }

/* §02 log: stamp decodes first, then the body wipes top → bottom */
html.js:not(.motion-off) .log-entry__body { transition:clip-path 500ms var(--ease-instrument); }
html.js:not(.motion-off) .log-entry:not(.is-revealed) .log-entry__body { clip-path:inset(0 0 100% 0); }
html.js:not(.motion-off) .log-entry.is-revealed .log-entry__body { clip-path:inset(0 0 0 0); }

/* §07 underline under "We Are Building the Evidence." when the morph completes */
html.js:not(.motion-off) .perception__deck:not(.is-evidence) .deck__b::after { transform:scaleX(0); }

/* figure power-on (.fig.is-on): floret leader draws */
html.js:not(.motion-off) .floret-label__leader { transition:transform var(--dur-bracket) var(--ease-instrument) 200ms; }
html.js:not(.motion-off) .fig:not(.is-on) .floret-label__leader { transform:scaleY(0); }

/* ghost-link arrow bobs */
html.js:not(.motion-off) .link-arrow__arrow { animation:hg-bob 2.4s var(--ease-instrument) infinite; }

/* motion off: everything visible, nothing moves */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}


/* =============================================================================
   11  FORCED COLOURS · PRINT
   ========================================================================== */

@media (forced-colors:active) {
  .fig canvas { display:none; }
  .fig__well { border:1px solid CanvasText; forced-color-adjust:auto; }
  .nav::before { background:Canvas; }
  .btn { border:1px solid ButtonText; }
}

@media print {
  @page { margin:16mm 14mm; }
  html, body { background:#fff !important; color:#000 !important; }
  *, *::before, *::after { color:#000 !important; background:transparent !important; text-shadow:none !important; }
  .skip-link, .nav, .menu, .case-reminder, .audience, .fig canvas, .fig__well,
  .partner__actions, .footer__tools, .hero::before, .section::before, .footer::before { display:none !important; }
  [data-reveal], .log-entry__body {
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .hero, .section, .footer { padding-block:14pt !important; border:0 !important; break-inside:auto; }
  .hero__grid, .section__grid, .c-grid, .premise, .premise__leads, .scrub, .stage, .case__body, .herbx__intro,
  .regulatory__cols, .beyond__stage, .perception__cols, .partner__plate, .footer__row { display:block !important; min-height:0 !important; height:auto !important; }
  .scrub__fig, .stage__fig, .case__notice { position:static !important; height:auto !important; }
  .step, .stage__para { min-height:0 !important; display:block !important; }
  .hero__intro { padding-top:0 !important; }
  .hero__fig, .herbx__fig, .beyond__fig, .fig--evidence { margin:12pt 0 !important; }
  .fig > .sr-only { position:static !important; width:auto; height:auto; margin:4pt 0 0; overflow:visible; clip:auto; clip-path:none; white-space:normal; font-style:italic; }
  .channels, .column-fig { display:block !important; height:auto !important; border:0 !important; }
  .channels__label, .band { position:static !important; height:auto !important; display:block !important; }
  .rail-labels { position:static !important; height:auto !important; display:block !important; }
  .rail-labels__item { position:static !important; transform:none !important; display:block !important; margin-top:4pt; }
  .fig--pathway { display:block !important; }
  .notice, .fls { border:1pt solid #000 !important; border-left-width:3pt !important; break-inside:avoid; margin:12pt 0 !important; }
  .rail-labels__item::before { display:none !important; }
  .notice__text, .fls__text { color:#000 !important; }
  .request::details-content { content-visibility:visible; }
  .request__toggle { display:none !important; }
  .request__panel { margin-top:0; animation:none !important; }
  .h1 { font-size:30pt; } .h2 { font-size:22pt; } .pull, .statement { font-size:15pt; max-width:none; }
  .deck { font-size:14pt; }
  p, li, dd { orphans:3; widows:3; }
  .h2 { break-after:avoid; }
  .contact__email { font-size:16pt !important; }
}