/* ============================================================
   Reef Pass Investors — Design System
   Concept: a descent through the pass, from sunlit surface to deep.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Depth palette */
  --abyss:      #062430;   /* deepest ground */
  --pass:       #0c3a46;   /* mid-deep teal */
  --pass-2:     #0f4653;   /* raised surface on dark */
  --current:    #2d8f95;   /* muted teal accent */
  --current-lo: #57aeb3;   /* lighter current */
  --sand:       #dce8e5;   /* seafoam — light surface, green-grey undertone matching the teals */
  --sand-2:     #cfdeda;   /* deeper seafoam for alternating sections */
  --brass:      #c29b54;   /* sunlight glint / capital */
  --brass-lo:   #d8b878;
  --foam:       #eaf3f1;   /* pale cool light */
  --foam-body:  #c6d8d6;   /* readable body text on dark */
  --ink:        #08191f;   /* text on light */
  --ink-soft:   #3e5359;   /* muted text on light */
  --foam-soft:  #a9c3c4;   /* muted text on dark */

  /* Type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif; /* universal text face */
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Metrics */
  --wide: 1320px;
  --container: 1160px;
  --reading: 720px;
  /* Text-block measure tokens: every body text block uses one of these (rag control) */
  --w-passage: 700px;
  --w-body: 640px;
  --w-quote: 300px;
  --brass-ink: #7a5f26; /* text-grade brass on light zones: 4.9:1 on --sand (AA) */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --zone-y: clamp(3rem, 5vw, 4.5rem);
  --radius: 3px;
  --hair: rgba(234, 243, 241, 0.10);  /* hairline on dark zones */
  --hair-dark: rgba(8, 25, 31, 0.12); /* hairline on light zones */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-offset: 178px; /* header height (~130px with the 92px logo) + 48px */

  /* Type scale: ALL font sizes come from these tokens; hardcoded sizes are forbidden */
  --t-hero: clamp(1.4rem, 2.9vw, 2.4rem);
  --t-h2: clamp(1.45rem, 2.7vw, 2.05rem);
  --t-statement: clamp(1.7rem, 3.4vw, 2.9rem);
  --t-passage: 1.375rem;
  --t-body: 1.1875rem;
  --t-excerpt: 1.05rem;
  --t-quote: 1.25rem;
  --t-mono-kicker: 11px;
  --t-mono-label: 10px;
  --t-mono-legal: 0.68rem;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  hyphens: none; -webkit-hyphens: none; /* inherited: no word ever breaks, sitewide */
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; border-radius: 2px; }
.zone--dark a:focus-visible, .zone--pass a:focus-visible, .site-header a:focus-visible, .site-footer a:focus-visible, .nav-overlay a:focus-visible { outline-color: var(--current-lo); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.06; text-wrap: balance; }
/* Copy rule: every HEADING is Title Case (capitalize every word, incl. small words).
   Body text is authored in sentence case. Acronyms (CEO, LTH, HoldCos) are safe —
   capitalize only touches each word's first letter. */
h1, h2, h3 { text-transform: capitalize; }
/* Verbatim-cased headings render exactly as sourced: essay titles (.article-spread__title) and legal headings (.legal h2/h3/h4) carry text-transform: none in their own blocks. */
p { margin: 0 0 1.1em; text-wrap: pretty; }
::selection { background: var(--current); color: var(--abyss); }

/* Skip link: hidden until keyboard focus, then a small ink-on-foam chip at top left */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--foam); color: var(--ink); padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus-visible { left: 12px; top: 12px; outline: 2px solid var(--current); outline-offset: 2px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--wide); }
.reading { max-width: var(--reading); }
.reading p { font-size: var(--t-body); line-height: 1.7; text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; }
.zone { padding-block: var(--zone-y); position: relative; }
.zone--dark  { background: var(--ink); color: var(--foam); }
.zone--pass  { background: var(--pass);  color: var(--foam); }
.zone--sand  { background: var(--sand);  color: var(--ink); }
.zone--paper { background: var(--sand-2); color: var(--ink); }
/* Deepest zones sit below #0c3a46, so secondary-accent text there uses --current-lo */
.zone--dark .tlink { color: var(--current-lo); }
.zone--dark .btn:focus-visible { outline-color: var(--current-lo); }

/* Zone blend: 120px gradient band at dark/light boundaries so zones shade into each other */
.zone-blend { position: relative; }
/* Zone transition: exactly 20px, two stops. Reads as a soft border where sections meet. */
.zone-blend::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 20px;
  pointer-events: none; z-index: 0;
}
.zone-blend > .container, .zone-blend > .container--wide { position: relative; z-index: 1; }
.blend-from-ink::before  { background: linear-gradient(180deg, var(--ink), var(--sand)); }
.blend-from-pass::before { background: linear-gradient(180deg, var(--pass), var(--sand)); }
.blend-from-sand::before { background: linear-gradient(180deg, var(--sand), var(--pass)); }
.blend-sand-ink::before  { background: linear-gradient(180deg, var(--sand), var(--ink)); }

/* ---------- Typography roles ---------- */
/* ONE body-paragraph spec for every long-form paragraph sitewide.
   Left-aligned, ragged right with controlled measure; justification is not used
   (see DESIGN_SYSTEM: alignment). The CEO letter passage keeps its serif face/size
   but adopts these spacing rules. */
.body-para {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.7;               /* the single body rhythm; no per-page overrides */
  margin: 0 0 1.5rem;
  max-width: var(--w-body);
  text-align: justify; text-justify: inter-word;
  hyphens: none; -webkit-hyphens: none;   /* words never break across lines */
  text-wrap: pretty;
  overflow-wrap: normal;
}
.body-para:last-child { margin-bottom: 0; }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono-kicker);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brass);
  display: flex;   /* block-level: no baseline strut offset at section tops */
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 22px; /* identical kicker-to-content gap on every page */
}
/* (dash before section labels removed at user request) */
.zone--sand .eyebrow, .zone--paper .eyebrow { color: var(--ink-soft); }

.display-xl { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.02em; }
.display-l  { font-size: var(--t-hero); }
.display-m  { font-size: var(--t-h2); }
.lede { font-size: var(--t-body); line-height: 1.7; color: var(--ink-soft); text-align: left; }
.zone--dark .lede, .zone--pass .lede, .imgband .lede { color: var(--foam-body); }
.muted { color: var(--ink-soft); }
.zone--dark .muted, .zone--pass .muted, .imgband .muted { color: var(--foam-body); }
em, .italic { font-style: italic; }
.current-word { color: var(--current); font-style: italic; }
.zone--sand .current-word, .zone--paper .current-word { color: var(--current); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.95rem 1.6rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; }
.btn .arw { transition: transform 0.35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn--primary { background: var(--current); color: var(--ink); }
.btn--primary:hover { background: var(--current-lo); transform: translateY(-2px); }
.btn--ghost { border-color: var(--hair); color: var(--brass); background: transparent; }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-lo); }
.zone--sand .btn--ghost, .zone--paper .btn--ghost { color: var(--current); border-color: var(--hair-dark); }
.btn--dark { background: var(--abyss); color: var(--foam); }
.btn--dark:hover { background: var(--pass); transform: translateY(-2px); }

/* Desktop inline nav: serif links one row; overlay + hamburger are mobile-only */
.nav-inline { list-style: none; margin: 0; padding: 0; display: none; align-items: center; gap: 28px; }
.nav-inline a {
  font-family: var(--display); font-size: var(--t-excerpt); color: var(--foam);
  white-space: nowrap; transition: color 200ms var(--ease);
}
.nav-inline a:hover { color: var(--current-lo); }
.nav-inline a.is-active {
  color: var(--current-lo);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
@media (min-width: 1024px) {
  .nav-inline { display: flex; }
  .site-header .nav-toggle { display: none !important; } /* the inline row and the hamburger never show together */
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .nav-inline { gap: 20px; }
  .nav-inline a { font-size: calc(var(--t-excerpt) - 0.1rem); }
}

/* Text link with underline reveal */
.tlink {
  font-family: var(--mono); font-size: var(--t-excerpt); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--current); display: inline-flex; gap: 0.55rem; align-items: center;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.zone--sand .tlink, .zone--paper .tlink { color: var(--current); }
.tlink:hover { border-color: currentColor; gap: 0.9rem; }

/* ============================================================
   Header / Nav
   ============================================================ */
/* STATIC fixed header: one state, one size, permanent. Nothing changes on scroll
   except a legibility tint (background/backdrop only; height never alters). */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 1.15rem 0;
  transition: background 280ms var(--ease), box-shadow 280ms var(--ease);
}
.site-header.site-header--solid, .site-header.site-header--solid.header--tinted { background: var(--abyss); }
.site-header.header--tinted {
  background: rgba(6, 36, 48, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--hair);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.brand { display: flex; align-items: baseline; gap: 0.55rem; color: var(--foam); }
.brand__mark {
  font-family: var(--display); font-size: var(--t-quote); letter-spacing: 0.02em;
}
.brand__mark b { color: var(--current); font-weight: 600; }
.brand__logo { height: 92px; width: auto; display: block; } /* static: never scales, never transitions */
@media (max-width: 940px) { .brand__logo { height: 68px; } }
.brand__tag {
  font-family: var(--mono); font-size: var(--t-mono-legal); letter-spacing: 0.06em; text-transform: none;
  color: var(--foam-soft); display: none;
}
/* Menu button — always visible */
.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: none; border: 0; cursor: pointer; padding: 0.5rem 0.2rem;
  color: var(--foam); position: relative; z-index: 61;
}
.nav-toggle__txt {
  font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--foam); transition: color 0.3s var(--ease);
}
.nav-toggle__ic { position: relative; width: 26px; height: 15px; flex: none; }
.nav-toggle__ic span {
  position: absolute; left: 0; height: 1.6px; width: 100%; background: var(--foam);
  transition: width 0.35s var(--ease), background 0.3s var(--ease);
}
.nav-toggle__ic span:nth-child(1) { top: 0; }
.nav-toggle__ic span:nth-child(2) { top: 6.7px; width: 62%; }
.nav-toggle__ic span:nth-child(3) { top: 13.4px; }
.nav-toggle:hover .nav-toggle__txt { color: var(--current); }
.nav-toggle:hover .nav-toggle__ic span { background: var(--current); width: 100%; }
.nav-toggle:focus-visible { outline: 2px solid var(--current); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 540px) { .nav-toggle__txt { display: none; } }

/* Full-page menu overlay — phases in from the top */
.nav-overlay {
  position: fixed; inset: 0; z-index: 80;
  width: 100%; height: 100vh; height: 100dvh;
  background: var(--abyss);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-12px);
  will-change: opacity, transform;
  transition: opacity 0.6s var(--ease), transform 0.75s var(--ease), visibility 0s linear 0.75s;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), visibility 0s;
}
.nav-overlay::after {
  content: ""; position: absolute; right: -8%; bottom: -14%; width: 55%; height: 55%;
  background: radial-gradient(closest-side, rgba(45,143,149,0.16), transparent 72%);
  pointer-events: none;
}
.nav-overlay__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2.2vw, 1.3rem) var(--gutter);
  position: relative; z-index: 2;
}
.nav-overlay__body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.6rem, 4vh, 3rem);
  padding: clamp(1rem, 4vh, 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  position: relative; z-index: 2;
}
.nav-close {
  font-family: var(--body);
  background: none; border: 1px solid var(--hair); color: var(--brass);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: var(--t-quote); line-height: 1;
  display: grid; place-items: center; flex: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.nav-close:hover { color: var(--brass-lo); border-color: var(--brass); transform: rotate(90deg); }
.nav-close:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; }

.nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-links li {
  border-top: 1px solid var(--hair);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
}
.nav-links li:last-child { border-bottom: 1px solid var(--hair); }
.nav-overlay.is-open .nav-links li { opacity: 1; transform: none; }
.nav-overlay.is-open .nav-links li:nth-child(1) { transition-delay: 0.12s; }
.nav-overlay.is-open .nav-links li:nth-child(2) { transition-delay: 0.17s; }
.nav-overlay.is-open .nav-links li:nth-child(3) { transition-delay: 0.22s; }
.nav-overlay.is-open .nav-links li:nth-child(4) { transition-delay: 0.27s; }
.nav-overlay.is-open .nav-links li:nth-child(5) { transition-delay: 0.32s; }
.nav-overlay.is-open .nav-links li:nth-child(6) { transition-delay: 0.37s; }
.nav-overlay.is-open .nav-links li:nth-child(7) { transition-delay: 0.42s; }
.nav-overlay.is-open .nav-links li:nth-child(8) { transition-delay: 0.47s; }
.nav-links a {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--foam); padding: clamp(0.35rem, 0.9vw, 0.6rem) 0;
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--current); padding-left: 0.7rem; outline: none; }
.nav-links a.is-active { color: var(--current); }
.nav-overlay__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  opacity: 0; transition: opacity 0.6s var(--ease) 0.5s;
}
.nav-overlay.is-open .nav-overlay__foot { opacity: 1; }
.nav-cta { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .nav-overlay, .nav-links li, .nav-overlay__foot { transition: none; }
  .nav-links li { opacity: 1; transform: none; }
}

/* ============================================================
   Hero — scroll-scrubbed descent
   ============================================================ */
.hero { position: relative; height: 300vh; background: var(--abyss); }
.dive { height: 400vh; }
@media (max-width: 720px) { .dive { height: 400vh; } }

/* Each dive stage is pinned in the sticky stage and cross-fades by scroll depth */
.dive-stage {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  padding: var(--header-offset) 0 clamp(4rem, 8vh, 6rem);
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
.dive-stage > .container { width: 100%; }
/* One spacing token for every rule in the dive lists: 28px above and below each hairline,
   and the same 28px between a section heading and its first rule. No ad hoc margins. */
.dive-h { color: var(--foam); font-family: var(--display); font-weight: 400; letter-spacing: -0.01em;
  font-size: var(--t-statement); line-height: 1.12; max-width: 24ch; margin-bottom: 28px; }
.dive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: var(--w-passage); }
/* Ruled-row lists are ONE component sitewide: serif 1.5rem, matching accordion row labels */
.dive-list li {
  font-family: var(--display); font-weight: 400; color: var(--foam);
  font-size: var(--t-passage); line-height: 1.15; letter-spacing: -0.01em;
  padding: 28px 0; border-top: 1px solid var(--hair);
}
.zone--sand .dive-list li, .zone--paper .dive-list li { color: var(--ink); border-top-color: var(--hair-dark); }
.dive-list li:last-child { border-bottom: 1px solid var(--hair); }
.glance-h { color: var(--foam); font-family: var(--display); font-weight: 400; letter-spacing: -0.01em;
  font-size: var(--t-h2); line-height: 1.12; margin-bottom: 28px; }
.zone--sand .glance-h, .zone--paper .glance-h { color: var(--ink); }
/* Single rule between glance groups: the list above drops its bottom border so the
   divider carries the 28px-above / 28px-below rhythm like every other rule. */
.glance-group .dive-list li:last-child { border-bottom: 0; }
.glance-group + .glance-group { margin-top: 0; padding-top: 28px;
  border-top: 1px solid var(--hair); }
/* No rule may touch the depth gauge: dive content ends min 48px clear of the gauge line */
.dive-stage .container, .dive-stage .container--wide { padding-right: calc(var(--gutter) + 78px); }
@media (max-width: 720px) { .dive-stage .container, .dive-stage .container--wide { padding-right: var(--gutter); } }
.dive-stage .stats { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 4vw, 3rem); }
@media (max-width: 620px) { .dive-stage .stats { grid-template-columns: 1fr; row-gap: 1.8rem; } }
.hero__content { will-change: opacity, transform; }
.hero__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__video, .hero__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero__video { z-index: 1; opacity: 0; transition: opacity 0.8s ease; filter: brightness(0.6) saturate(0.58) contrast(0.95); }
.hero__video.is-ready { opacity: 1; }

/* Base layer under the video: the exact seabed frame the video seeks to (65%), same filter
   treatment, so first paint already shows the final picture and the video fade-in is invisible.
   The caustic gradient remains beneath as the last-resort fallback if the image fails. */
.hero__fallback { z-index: 0; background:
  url("../img/hero-seabed.jpg") center / cover no-repeat,
  radial-gradient(120% 90% at 50% -10%, #3fd0d6 0%, #1aa0aa 22%, #0c5762 46%, #073843 68%, var(--abyss) 100%);
  filter: brightness(0.6) saturate(0.58) contrast(0.95);
}
.hero__fallback::before, .hero__fallback::after {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(closest-side, rgba(180,255,252,0.28), rgba(180,255,252,0) 70%);
  mix-blend-mode: screen; filter: blur(6px);
}
.hero__fallback::before { width: 55%; height: 55%; top: -6%; left: 8%; animation: drift1 16s ease-in-out infinite; }
.hero__fallback::after  { width: 45%; height: 45%; top: 2%; right: 6%; animation: drift2 21s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.8; } 50% { transform: translate(6%, 10%) scale(1.15); opacity: 0.4; } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.1); opacity: 0.5; } 50% { transform: translate(-8%, 8%) scale(0.9); opacity: 0.85; } }

.hero__scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(6,36,48,0.7) 0%, rgba(6,36,48,0.5) 38%, rgba(6,36,48,0.62) 72%, rgba(6,36,48,1) 100%);
}
.hero__content {
  position: absolute; z-index: 3; inset: 0 0 auto 0; padding-top: clamp(7rem, 14vh, 9.5rem);
}
.hero__eyebrow { color: var(--current-lo); }
.hero h1 { color: var(--foam); max-width: 44rem; margin-bottom: 1.4rem; font-size: var(--t-hero); line-height: 1.14; letter-spacing: -0.01em; }
.hero__sub { color: var(--foam-body); max-width: var(--w-body); font-size: var(--t-body); line-height: 1.7; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* Stats band inside the hero — revealed deeper in the descent, in the upper band */
.hero__stats { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(7rem, 15vh, 10rem); opacity: 0; will-change: opacity, transform; }
.hero__stats .stats { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 4vw, 3rem); }
.hero__stats .stat__num { font-size: var(--t-statement); }
.hero__stats .stat__label { margin-top: 0.7rem; padding-top: 0.7rem; }
@media (max-width: 620px) { .hero__stats { top: clamp(6rem, 13vh, 8rem); } .hero__stats .stat__num { font-size: var(--t-h2); } }

/* depth meter on the right of hero */
.hero__meter {
  position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  font-family: var(--mono); font-size: var(--t-mono-legal); letter-spacing: 0.05em; color: var(--foam-soft);
}
.hero__meter-track { width: 1px; height: 34vh; background: rgba(234,243,241,0.25); position: relative; }
.hero__meter-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--current); }
@media (max-width: 720px) { .hero__meter { display: none; } .hero { height: 240vh; } }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--t-mono-legal); letter-spacing: 0.05em; text-transform: uppercase; color: var(--foam-soft);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
/* the stage variant repeats the cue inside the Our Mission stage */
.scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--current), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 40% { transform: scaleY(1); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
/* LIGHT band (2026-09-01): interior tops read airy; the dark fixed header above renders solid
   (site-header--solid) so its light text stays legible and the dark/light edge is crisp. */
.page-hero {
  background: var(--sand); color: var(--ink); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Content-hugging: no min-height; the band is exactly title/subhead + 32px below */
  padding-bottom: 32px;
  /* Constant top offset sized for the EXPANDED header; never linked to header state */
  padding-top: var(--header-offset);
}
/* Watermark wash (RB): the sunlit surface of the homepage hero image as a faint shimmer.
   Image + seafoam gradient live in ::before at 0.15 opacity; the gradient runs to solid
   --sand by 95% so the band dissolves into the flat seafoam at its bottom edge. */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 60%, var(--sand) 95%),
    url("../img/page-hero-band.jpg") center top / cover no-repeat;
  opacity: 0.4;
  filter: saturate(0.7); /* calm the photo blue toward the seafoam palette */
}
.page-hero > .container, .page-hero > .container--wide { position: relative; z-index: 1; }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: radial-gradient(80% 120% at 80% 100%, rgba(45,143,149,0.10), transparent 70%); pointer-events: none; }
.page-hero h1 { color: var(--ink); max-width: none; font-size: var(--t-hero); line-height: 1.12; letter-spacing: -0.01em; }
.page-hero .lede { margin-top: 10px; margin-bottom: 0; max-width: var(--w-body); color: var(--ink); } /* ink-soft measured 3.3:1 over the stronger wash; ink holds 7.4:1 */ /* no trailing p margin: the band's 32px bottom pad is the only gap */

/* ============================================================
   Components
   ============================================================ */
/* Section heading block */
.head-block { max-width: 44ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head-block.center { margin-inline: auto; text-align: center; }

/* Grid utilities */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--start { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Card */
.card {
  background: var(--sand); border: 1px solid var(--hair-dark); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.2rem); position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.zone--dark .card, .zone--pass .card { background: var(--pass-2); border-color: rgba(234,243,241,0.1); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(6,36,48,0.5); border-color: var(--hair); }
.card__index { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.03em; color: var(--current); margin-bottom: 1rem; }
.card h3 { font-size: var(--t-passage); margin-bottom: 0.6rem; }
.card p { font-size: var(--t-excerpt); color: var(--ink-soft); margin: 0; }
.zone--dark .card p, .zone--pass .card p { color: var(--foam-soft); }

/* Tenet (mission) — not numbered, they are parallel not sequential */
.tenet { border-top: 1px solid var(--hair); padding-top: 1.5rem; }
.tenet h3 { font-size: var(--t-passage); margin-bottom: 0.6rem; }
.tenet p { color: var(--foam-soft); margin: 0; }

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; row-gap: 2.5rem; } }
.stat { text-align: left; }
.stat__num { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--current); letter-spacing: -0.02em; }
.stat__num .unit { color: var(--brass); font-size: 0.5em; }
.stat__label { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.04em; text-transform: none; color: var(--foam-soft); margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--hair); }
/* Stats on light zones: ink-ramp label and dark hairline (pattern is zone-aware) */
.zone--sand .stat__label, .zone--paper .stat__label { color: var(--ink-soft); border-top-color: var(--hair-dark); }

/* Feature list */
.flist { list-style: none; margin: 0; padding: 0; }
.flist li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.3rem 0; border-top: 1px solid var(--hair-dark); align-items: baseline; }
.zone--dark .flist li, .zone--pass .flist li { border-color: rgba(234,243,241,0.12); }
.flist .k { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.03em; text-transform: none; color: var(--brass); padding-top: 0.2rem; white-space: nowrap; }
.flist h3 { font-size: var(--t-quote); margin-bottom: 0.3rem; }
.flist p { margin: 0; color: var(--ink-soft); font-size: var(--t-excerpt); }
.zone--dark .flist p, .zone--pass .flist p { color: var(--foam-soft); }

/* Pull quote / statement */
.statement { font-family: var(--display); font-size: var(--t-statement); line-height: 1.22; letter-spacing: -0.01em; max-width: 20ch; margin: 0; text-wrap: balance; }
/* Statement to its follow-up note: exactly 24px, no stacked paragraph margins */
.statement + .statement-note { margin-top: 24px; }
/* Inline CTA at the end of a final content section (no standalone contact sections) */
.cta-inline { margin-top: 32px; }

/* Manifesto with margin notes: one editorial section, letter-style passage + sticky aside */
.manifesto { display: grid; grid-template-columns: 62% 30%; justify-content: space-between; align-items: start; }
.manifesto__passage {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--t-passage); line-height: 1.7; letter-spacing: -0.005em; margin: 0;
  max-width: var(--w-passage);
}
.brass-em { color: var(--brass); font-weight: 500; }
.brass-deep { color: #a07d34; font-weight: 500; } /* brass shade for emphasis on seafoam */
.zone--dark .body-para { color: var(--foam-body); }

/* Proportion visual: serif counters + reef bar (see DESIGN_SYSTEM 4.14) */
.prop-visual { margin-top: 48px; max-width: var(--w-body); }
.prop-row { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; }
.prop-stat { opacity: 0; } /* no idle zero */
.prop-stat__num { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--current-lo); }
.prop-stat__num .unit { font-family: var(--display); color: var(--brass); font-size: 0.6em; vertical-align: baseline; letter-spacing: -0.01em; }
.prop-stat__label { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--foam-soft); opacity: 0.7; margin: 6px 0 0; }
.prop-arrow { font-family: var(--display); color: var(--brass); font-size: var(--t-passage); align-self: center; }
/* Proportion visual + brass emphasis on LIGHT zones: darker accents for contrast */
.zone--sand .brass-em, .zone--paper .brass-em,
.zone--sand .brass-deep, .zone--paper .brass-deep { color: var(--brass-ink); }
.zone--sand .eyebrow, .zone--paper .eyebrow { color: var(--brass-ink); }
.zone--sand .prop-stat__num, .zone--paper .prop-stat__num { color: var(--current); }
.zone--sand .prop-stat__num .unit, .zone--paper .prop-stat__num .unit,
.zone--sand .prop-arrow, .zone--paper .prop-arrow { color: #a07d34; }
.zone--sand .prop-stat__label, .zone--paper .prop-stat__label,
.zone--sand .prop-caption, .zone--paper .prop-caption { color: var(--ink-soft); opacity: 1; }
.prop-bar { position: relative; height: 10px; margin-top: 28px; background: rgba(234,243,241,0.07); overflow: hidden; }
.prop-bar__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: rgba(87,174,179,0.55); transition: width 900ms var(--ease); }
.prop-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--brass); }
.prop-caption { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--foam-soft); opacity: 0.7; margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .prop-stat { opacity: 1; } .prop-bar__fill { width: 25%; transition: none; } }

/* Pull-quote companion: TOP-ALIGNED side column with full-height hairline + brass tick (DESIGN_SYSTEM 4.16/4.17) */
.manifesto__side {
  align-self: stretch; position: relative;
  border-left: 1px solid var(--hair-dark); padding-left: 40px;
}
.spread__tick {
  position: absolute; top: -11px; left: 40px; /* 12px above the shared first line + its 2px height */
  width: 22px; height: 2px; background: var(--brass);
}
.manifesto__side .pull-quote { margin-top: 3px; } /* cap-height alignment with the passage first line */
/* Adjacent zones of the same surface: the second opens flush so the gap is ONE --zone-y, never stacked */
.zone--flush-top { padding-top: 0; }
.pull-quote {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--t-quote); line-height: 1.5; letter-spacing: -0.01em;
  max-width: var(--w-quote); margin: 0;
}
.pull-quote.reveal { transition-delay: 200ms; } /* fades in 200ms after the passage */
/* Rag control: an emphasis phrase never splits across lines inside the narrow quote measure */
.pull-quote .brass-em, .pull-quote .brass-deep { white-space: nowrap; }
@media (max-width: 800px) {
  .manifesto__side { align-self: auto; margin-top: 48px; border-left: 0; padding-left: 0; border-top: 1px solid var(--hair-dark); padding-top: 20px; }
  .spread__tick { position: static; display: block; margin: 0 0 12px; }
}

/* Closed door, photo-led variant (see DESIGN_SYSTEM: closed-door pattern).
   Reuses the homepage hero image; homepage tint + a local gradient patch for AA contrast. */
.photo-hold {
  position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: center;
  background-image: url("../img/hero-poster.jpg"); /* AA-validated fallback under the video */
  background-size: cover; background-position: 50% 12%;
  color: var(--foam);
}
.photo-hold__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  filter: brightness(0.6) saturate(0.58) contrast(0.95); /* homepage video treatment, verbatim */
  opacity: 0; transition: opacity 0.8s ease;
}
.photo-hold__video.is-ready { opacity: 1; }
.photo-hold::before { /* the homepage scrim, verbatim stops */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,36,48,0.7) 0%, rgba(6,36,48,0.5) 38%, rgba(6,36,48,0.62) 72%, rgba(6,36,48,1) 100%);
}
.photo-hold::after { /* local patch behind the text block: a gradient, not a box */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,25,31,0.88) 0%, rgba(8,25,31,0.72) 45%, rgba(8,25,31,0.58) 70%, rgba(8,25,31,0) 100%);
}
.photo-hold > .container { position: relative; z-index: 2; }
.photo-hold__kicker {
  font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(234,243,241,0.8); margin: 0 0 20px;
}
.page-hero .photo-hold__kicker { color: var(--ink-soft); } /* on the LIGHT hero; foam is for the dark photo-hold only */
.photo-hold__statement {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-statement); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--foam); max-width: 560px; margin: 0; text-wrap: balance;
}
.photo-hold__statement.reveal { transition-delay: 150ms; }
@media (max-width: 800px) {
  .photo-hold { min-height: auto; padding: 96px 0; background-position: 62% 10%; }
  /* text spans nearly full width here, so the patch holds strength across it */
  .photo-hold::after { background: linear-gradient(90deg, rgba(8,25,31,0.85) 0%, rgba(8,25,31,0.6) 100%); }
}

/* Article spread (Reflections): image left / text right, hairline-separated (DESIGN_SYSTEM 4.19) */
.article-spread { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; padding: 64px 0; }
.article-spread:first-child { padding-top: 0; }
.article-spread:last-child { padding-bottom: 0; }
.article-spread + .article-spread { border-top: 1px solid rgba(8,25,31,0.12); }
.article-spread__img { border-radius: var(--radius); overflow: hidden; }
.article-spread__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-spread__title {
  font-family: var(--display); font-weight: 400; text-transform: none;
  font-size: var(--t-h2); line-height: 1.3; color: var(--ink); margin: 0 0 16px;
}
.article-spread__title.reveal { transition-delay: 90ms; }
.article-spread__excerpt { margin: 0 0 24px; max-width: var(--w-body); }
.article-spread__excerpt p {
  font-family: var(--body); font-size: var(--t-excerpt); line-height: 1.7; color: var(--ink-soft);
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; margin: 0 0 1em;
}
.article-spread__excerpt p:last-child { margin-bottom: 0; }
.article-spread__excerpt.reveal { transition-delay: 180ms; }
.article-spread__link {
  font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-ink); display: inline-flex; align-items: center; gap: 8px;
}
.article-spread__link .arw { transition: transform 250ms var(--ease); }
.article-spread__link:hover .arw { transform: translateX(6px); }
.article-spread__link.reveal { transition-delay: 270ms; }
@media (max-width: 800px) {
  .article-spread { grid-template-columns: 1fr; gap: 24px; }
  .article-spread__img img { aspect-ratio: auto; height: 240px; }
}

/* Framed figure: artwork/group imagery shown UNCROPPED and UNTINTED, mounted on the zone */
.figure-frame {
  display: block; width: 100%; height: auto; /* natural aspect ratio, never cropped */
  border-radius: var(--radius); border: 1px solid var(--hair-dark);
  margin: 0 0 48px;
}

/* Portrait grid (Team; DESIGN_SYSTEM 4.21) */
.team-intro {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--t-passage); line-height: 1.7; letter-spacing: -0.005em;
  max-width: var(--w-passage); margin: 0;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}
.portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
.portrait { display: block; }
.portrait__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 458 / 509; }
.portrait__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%); transition: filter 300ms var(--ease); }
.portrait:hover .portrait__img img { filter: grayscale(0%); }
.portrait__name { font-family: var(--display); font-weight: 400; font-size: var(--t-quote); line-height: 1.2; color: var(--ink); margin: 14px 0 0; transition: color 250ms var(--ease); }
.portrait:hover .portrait__name { color: var(--current); }
.portrait__role { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 0; }
.portrait-grid .portrait.reveal:nth-child(2) { transition-delay: 90ms; }
.portrait-grid .portrait.reveal:nth-child(3) { transition-delay: 180ms; }
.portrait-grid .portrait.reveal:nth-child(4) { transition-delay: 270ms; }
.portrait-grid .portrait.reveal:nth-child(5) { transition-delay: 360ms; }
/* Placeholder tile (member portrait pending): initial on a pass-to-current gradient */
.portrait__ph, .bio__ph {
  aspect-ratio: 458 / 509; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--pass), var(--current));
  display: grid; place-items: center;
  font-family: var(--display); font-size: var(--t-statement); color: var(--foam);
}
/* (placeholder tile rides the sticky wrapper; no positioning of its own) */
@media (max-width: 1024px) { .portrait-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .portrait-grid { grid-template-columns: 1fr; } }

/* Bio spread with Q&A (Bios; DESIGN_SYSTEM 4.22) */
.bio-section {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px;
  padding: 64px 0 48px; /* 48px bottom: room for the sticky handoff at the section end */
  scroll-margin-top: 120px;
}
.bio-section:first-child { padding-top: 0; }
.bio-section:last-child { padding-bottom: 0; }
.bio-section + .bio-section { border-top: 1px solid var(--hair-dark); }
.bio-section--flip { grid-template-columns: 1.6fr 1fr; }
.bio-section--flip .bio__img { order: 2; }
/* Sticky portrait: the WRAPPER is the sticky element, sticking within its grid area
   (the row spans the text column's full height). Nothing in this column is ever
   animated, transformed, or transitioned; sticky needs untransformed ancestors. */
.bio__img { position: sticky; top: 120px; align-self: start; }
.bio__img img {
  width: 100%; aspect-ratio: 458 / 509; height: auto; /* explicit ratio: height never recomputes */
  object-fit: cover; object-position: top; /* faces preserved at any crop */
  border-radius: var(--radius); display: block;
}
.bio__name { font-family: var(--display); font-weight: 400; font-size: var(--t-h2); line-height: 1.2; color: var(--ink); margin: 0 0 16px; }
/* Bio paragraphs: left-aligned like all prose sitewide */
.bio__text > p:not(.qa-label) {
  font-family: var(--body); font-size: var(--t-body); line-height: 1.7; color: var(--ink);
  max-width: var(--w-body); text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; margin: 0 0 1em;
}
.bio__text > p:last-child { margin-bottom: 0; }
/* Q&A hierarchy: section header 11px/0.2em; item labels 9.5px/0.14em; both brass-deep vs ink-soft */
.qa-label { font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink); margin: 28px 0 28px; }
.qa { list-style: none; margin: 0; padding: 0; }
.qa li + li { margin-top: 20px; } /* between pairs */
.qa__q { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 5px; } /* label to answer */
.qa__a { font-family: var(--display); font-size: var(--t-excerpt); line-height: 1.5; color: var(--ink); margin: 0; max-width: var(--w-body); text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; }
@media (max-width: 800px) {
  .bio-section, .bio-section--flip { grid-template-columns: 1fr; gap: 24px; }
  .bio-section--flip .bio__img { order: 0; } /* photo above text everywhere on mobile */
  .bio__img { position: static; align-self: auto; } /* sticky off where the layout stacks */
}

/* Closing statement bookend (see DESIGN_SYSTEM 4.15) */
.close-statement { font-family: var(--display); font-weight: 400; font-size: var(--t-statement); line-height: 1.25; letter-spacing: -0.01em; color: var(--foam); max-width: 26ch; margin: 0; text-wrap: balance; }
.manifesto__main .cta-inline { margin-top: 40px; }
.manifesto__aside {
  position: sticky; top: 120px;
  border-left: 1px solid var(--hair-dark); padding-left: 40px;
}
.manifesto__aside > .mnote:first-child { margin-top: 5px; } /* cap-height alignment with the passage first line */
.mnote + .mnote { margin-top: 16px; }
.mnote__label {
  font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 2px;
}
.mnote__value { font-family: var(--body); font-size: calc(var(--t-excerpt) - 0.1rem); color: var(--ink); margin: 0; }
@media (max-width: 800px) {
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__aside {
    position: static; border-left: 0; padding-left: 0;
    margin-top: 40px; border-top: 1px solid var(--hair-dark); padding-top: 20px;
  }
  .mnote + .mnote { border-top: 1px solid var(--hair-dark); padding-top: 12px; margin-top: 12px; }
}

/* Inline emphasis — branded bold phrases inside body copy (like the original site's blue bolds) */
.em { color: var(--current); font-weight: 600; }
.zone--dark .em, .zone--pass .em, .page-hero .em { color: var(--current-lo); }

/* Kicker rule: the one brass hairline allowed, paired with a kicker above a section heading */
.section-rule { border: 0; height: 1px; background: rgba(194, 155, 84, 0.45); margin: 0 0 1.5rem; }

/* Open fact rows (replaces card boxes): one identical pattern per row.
   Fixed 240px label column + 48px gap: every sentence starts at the same x. */
.fact-rows { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.fact-row {
  display: grid; grid-template-columns: 240px 1fr;
  column-gap: 48px; align-items: baseline;
  padding: 2.25rem 0; position: relative;
}
/* Hairline between rows, drawn in left-to-right with its row's reveal */
.fact-row + .fact-row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hair-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.fact-row.is-in::before { transform: scaleX(1); }
.fact-row.reveal { transform: translateY(20px); transition-duration: 0.55s; }
.fact-row.reveal.is-in { transform: none; }
.fact-row__label {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--t-passage); line-height: 1.15; letter-spacing: -0.01em; margin: 0;
  transition: color 250ms var(--ease);
}
.fact-row__body { font-family: var(--body); color: var(--ink-soft); max-width: var(--w-body); margin: 0;
  font-size: var(--t-body); line-height: 1.7; transition: transform 250ms var(--ease); }
.fact-row:hover .fact-row__label { color: var(--current); }
.fact-row:hover .fact-row__body { transform: translateX(4px); }
/* Brass emphasis with a one-time highlight sweep after its row settles */
.fact-row__em {
  color: var(--brass); font-weight: 500;
  background-image: linear-gradient(100deg, rgba(194,155,84,0) 25%, rgba(194,155,84,0.22) 50%, rgba(194,155,84,0) 75%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 200% 0;
}
.fact-row.is-in .fact-row__em { animation: em-sweep 500ms var(--ease) 0.55s 1 both; }
@keyframes em-sweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fact-row + .fact-row::before { transform: scaleX(1); }
  .fact-row.reveal { transform: none; }
  .fact-row.is-in .fact-row__em { animation: none; }
}
@media (max-width: 720px) { .fact-row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Ledger accordion: hairline rows, serif labels, brass line-built toggle.
   Single-open; first row open by default; faint brass wash on the open row. */
.ledger { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.ledger-row { position: relative; }
.ledger-row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hair-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.ledger-row.is-in::before { transform: scaleX(1); }
.ledger-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: none; border: 0; padding: 28px 0; margin: 0; cursor: pointer; text-align: left;
}
.ledger-head:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; }
.ledger-label {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--t-passage); line-height: 1.15; letter-spacing: -0.01em;
  transition: color 250ms var(--ease);
}
.ledger-head:hover .ledger-label { color: var(--current); }
.ledger-glyph { position: relative; width: 18px; height: 18px; flex: none; transition: transform 300ms var(--ease); }
.ledger-glyph span { position: absolute; background: var(--brass); }
.ledger-glyph span:nth-child(1) { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.ledger-glyph span:nth-child(2) { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.ledger-row.is-open .ledger-glyph { transform: rotate(45deg); }
.ledger-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 450ms var(--ease), opacity 450ms var(--ease);
}
.ledger-row.is-open .ledger-panel { grid-template-rows: 1fr; opacity: 1; }
.ledger-panel__inner { overflow: hidden; }
.ledger-panel__inner p {
  font-family: var(--body); font-size: var(--t-body); line-height: 1.7; color: var(--ink-soft);
  max-width: var(--w-body); margin: 0; padding-bottom: 32px;
  text-align: justify; text-justify: inter-word;
}
.ledger-em { color: var(--brass); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .ledger-row::before { transform: scaleX(1); }
  .ledger-panel, .ledger-glyph, .ledger-row { transition: none; }
}
@media (max-width: 700px) {
  .ledger-label { font-size: var(--t-quote); }
  .ledger-head { padding: 20px 0; }
  .ledger-glyph { width: 16px; height: 16px; }
}

/* Follow-up paragraph directly under a statement: plain body copy, no rules, no list styling */
.statement-note {
  font-family: var(--body); font-size: var(--t-body); line-height: 1.7;
  color: var(--foam-body); max-width: var(--w-body); margin: 24px 0 0;
  text-align: justify; text-justify: inter-word;
}

/* Large serif statement line inside reading flow (exact copy, elevated scale) */
.statement-line, .reading p.statement-line {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
}
.zone--dark .statement-line { color: var(--foam); }
.reading > p + .statement-line { margin-top: 2rem; }
.statement .current-word { display: inline; }

/* Reef metaphor band */
.metaphor { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .metaphor { grid-template-columns: 1fr; } }
.metaphor__fact { font-family: var(--display); font-size: var(--t-statement); color: var(--current); line-height: 1; }
.metaphor__fact small { display: block; font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.04em; text-transform: none; color: var(--foam-soft); margin-top: 0.8rem; }
/* (legacy homepage metaphor flex row removed; .fact-row is the open-rows pattern, defined later) */

/* Media / figures */
.figure { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--hair-dark); background: var(--abyss); }
.zone--dark .figure, .zone--pass .figure { border-color: rgba(234,243,241,0.12); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.6) brightness(0.9) contrast(0.97); transition: transform 1.2s var(--ease); }
.figure:hover img { transform: scale(1.04); }
.figure--tall { aspect-ratio: 4/5; }
.figure--wide { aspect-ratio: 16/10; }
.figure--square { aspect-ratio: 1/1; }
.figure__cap { position: absolute; left: 0; bottom: 0; right: 0; padding: 1.4rem 1.5rem; z-index: 2;
  font-family: var(--mono); font-size: var(--t-mono-legal); letter-spacing: 0.04em; text-transform: none; color: var(--foam);
  background: linear-gradient(transparent, rgba(6,36,48,0.85)); }

/* Full-bleed image band with overlaid content */
.imgband { position: relative; overflow: hidden; padding-block: clamp(6rem, 16vh, 11rem); color: var(--foam); }
.imgband__bg { position: absolute; inset: 0; z-index: 0; }
.imgband__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.5); }
.imgband__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,36,48,0.95) 0%, rgba(6,36,48,0.85) 46%, rgba(6,36,48,0.6) 100%); }
.imgband__scrim--center { background: linear-gradient(180deg, rgba(6,36,48,0.85), rgba(6,36,48,0.72) 50%, rgba(6,36,48,0.93)); }
.imgband .container, .imgband .container--wide { position: relative; z-index: 2; }
.imgband .lede { color: var(--foam-soft); }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.25rem, 2.5vw, 1.8rem); }
@media (max-width: 1040px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .team-grid { grid-template-columns: 1fr; } }
.member__photo { aspect-ratio: 3/4; background: linear-gradient(160deg, var(--pass-2), var(--abyss)); border-radius: var(--radius); position: relative; overflow: hidden; border: 1px solid var(--hair-dark); display: grid; place-items: center; }
.member__initials { font-family: var(--display); font-size: var(--t-statement); color: rgba(45,143,149,0.45); }
.member__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 0%, rgba(45,143,149,0.15), transparent 70%); }
.member h3 { font-size: var(--t-quote); margin: 1.1rem 0 0.2rem; }
.member .role { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.03em; text-transform: none; color: var(--current); }
.member p { font-size: var(--t-excerpt); color: var(--ink-soft); margin-top: 0.7rem; }

/* Reflections index */
.essay { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 4vw, 3rem); align-items: baseline; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--hair-dark); transition: padding-left 0.4s var(--ease); }
.essay:last-child { border-bottom: 1px solid var(--hair-dark); }
.essay:hover { padding-left: 0.6rem; }
.essay__no { font-family: var(--mono); font-size: var(--t-mono-label); color: var(--current); }
.essay__title { font-family: var(--display); font-size: var(--t-h2); line-height: 1.15; }
.essay__excerpt { color: var(--ink-soft); font-size: var(--t-excerpt); margin-top: 0.6rem; max-width: 60ch; }
.essay__go { color: var(--current); font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.03em; text-transform: none; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.essay:hover .essay__go { opacity: 1; transform: translateX(0); }
@media (max-width: 680px) { .essay { grid-template-columns: auto 1fr; } .essay__go { display: none; } }

/* Gated / confidential panel */
.gated { text-align: center; max-width: 44ch; margin-inline: auto; }
.gated__seal { width: 66px; height: 66px; margin: 0 auto 1.8rem; border: 1px solid var(--hair); border-radius: 50%; display: grid; place-items: center; color: var(--brass); font-family: var(--mono); font-size: var(--t-mono-legal); letter-spacing: 0.03em; }

/* ---------- Forms (design-system pattern: underline inputs, mono short labels,
   serif long questions, outlined brass submit; see DESIGN_SYSTEM 4.20) ---------- */
.form {
  max-width: 760px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 32px; row-gap: 40px; /* uniform between all rows, no special cases */
}
.field--full { grid-column: 1 / -1; }
/* ONE label style for every field: serif, sentence case, ink. Mono lives only on Submit. */
.field { align-self: end; } /* labels grow upward; inputs in a row stay level */
.field label, .field legend {
  display: block; font-family: var(--body); font-size: var(--t-excerpt); line-height: 1.4;
  letter-spacing: normal; text-transform: none; color: var(--ink);
  margin: 0 0 12px; padding: 0;
}
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field .req { color: var(--brass-ink); }
.field input, .field select {
  width: 100%; font-family: var(--body); font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(8,25,31,0.25);
  padding: 12px 2px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none; border-bottom: 2px solid var(--current);
  padding-bottom: 11px; /* keeps the baseline steady when the border thickens */
  background: rgba(45,143,149,0.05);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(62,83,89,0.55); }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a07d34' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 28px;
}
.field select option { background: var(--sand); color: var(--ink); }
.field textarea {
  width: 100%; font-family: var(--body); font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 1px solid rgba(8,25,31,0.15); border-radius: var(--radius);
  min-height: 180px; resize: vertical; padding: 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea:focus { outline: none; border-color: var(--current); background: rgba(45,143,149,0.05); }
/* Checkbox group (multi-select fields): custom 16px boxes, current fill, foam check.
   Columns share the form's own gutter so they sit on its grid lines. */
.check-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px; }
.field label.check {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin: 0; /* box BESIDE its text, centered; no label under-gap here */
}
.check input {
  position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer;
}
.check__box {
  width: 16px; height: 16px; flex: none;
  border: 1px solid rgba(8,25,31,0.35); border-radius: 2px;
  display: grid; place-items: center; background: transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.check__box::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--foam); border-bottom: 2px solid var(--foam);
  transform: rotate(-45deg); opacity: 0; transition: opacity 0.15s var(--ease);
}
.check input:checked ~ .check__box { background: var(--current); border-color: var(--current); }
.check input:checked ~ .check__box::after { opacity: 1; }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--current); outline-offset: 2px; }
@media (max-width: 700px) { .check-group { grid-template-columns: repeat(2, 1fr); } }
.form__submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.btn-submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid #a07d34; border-radius: var(--radius);
  color: var(--brass-ink); font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 32px; cursor: pointer;
  transition: background 0.3s var(--ease);
}
.btn-submit .arw { transition: transform 0.25s var(--ease); }
.btn-submit:hover { background: rgba(194,155,84,0.08); }
.btn-submit:hover .arw { transform: translateX(6px); }
.btn-submit:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; }
.form-note { font-family: var(--mono); font-size: var(--t-mono-label); letter-spacing: 0.1em; color: var(--brass-ink); }
/* Direct-email alternative under the form: quiet body line, current link with underline */
.form-alt { margin: 28px 0 0; font-size: var(--t-excerpt); }
.form-alt__link { color: var(--current); text-decoration: underline; text-underline-offset: 3px; }
.form-alt__link:hover { color: var(--current-lo); }
/* Field reveals stagger 60ms apart */
.form .field.reveal:nth-child(2) { transition-delay: 60ms; }
.form .field.reveal:nth-child(3) { transition-delay: 120ms; }
.form .field.reveal:nth-child(4) { transition-delay: 180ms; }
.form .field.reveal:nth-child(5) { transition-delay: 240ms; }
.form .field.reveal:nth-child(6) { transition-delay: 300ms; }
.form .field.reveal:nth-child(7) { transition-delay: 360ms; }
.form .field.reveal:nth-child(8) { transition-delay: 420ms; }
.form .field.reveal:nth-child(9) { transition-delay: 480ms; }
.form .form__submit-row.reveal { transition-delay: 540ms; }
@media (max-width: 700px) {
  .form { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .field textarea { min-height: 160px; }
}

/* ---------- Legal / policy document (matches a standard privacy-policy layout) ---------- */
.legal { color: var(--ink-soft); font-family: var(--body); }
.legal h2, .legal h3, .legal h4 {
  font-family: var(--body); font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: 0; line-height: 1.3;
}
.legal h2 { font-size: var(--t-body); margin: 1.9rem 0 0.5rem; }
.legal h3 { font-size: var(--t-excerpt); margin: 1.4rem 0 0.35rem; }
.legal h4 { font-size: var(--t-excerpt); margin: 1.05rem 0 0.3rem; }
.legal p { font-size: var(--t-excerpt); line-height: 1.5; margin: 0 0 0.65rem; color: var(--ink-soft); text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; }
.legal ul { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.legal li { font-size: var(--t-excerpt); line-height: 1.45; margin-bottom: 0.28rem; color: var(--ink-soft); text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; }
/* Justification exclusions (measured): blocks with forced <br> breaks stretch the line BEFORE
   each break, and blocks whose line carries an unbreakable address/URL token gap badly.
   Those specific blocks stay left-aligned rather than compromising word spacing. */
.legal p:has(br), .legal li:has(br),
.legal p:has(a[href^="mailto"]), .legal li:has(a[href^="http"]), .legal li:has(a[href^="mailto"]) { text-align: left; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--current); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--current); }
.legal-meta { font-family: var(--body); font-size: var(--t-excerpt); color: var(--ink-soft); margin: 0 0 1.3rem; }
.legal-defs > li { margin-bottom: 0.4rem; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin: 0 auto 1.4rem; }
.cta-band .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ============================================================
   Footer
   ============================================================ */
/* Footer (tightened): no column headings, one aligned top line, 48/40/32 rhythm.
   Both rules are container-width (aligned to the text edges), never full-bleed. */
.site-footer {
  background: var(--abyss); color: var(--foam-soft); padding: 0 0 18px;
  /* no top boundary hairline: the footer meets the page above with a clean edge (2026-09-02) */
  position: relative; overflow: hidden;
}
/* ONE continuous scene with the homepage dive: the footer shows the LOWER portion of the
   SAME seabed frame the dive holds (hero-seabed.jpg), with the identical video color
   treatment, so scrolling from the dive into the footer reads as one picture. The ink
   overlay (strongest at the top edge) keeps the footer a readable DARK zone everywhere. */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/hero-seabed.jpg") center bottom / cover no-repeat;
  filter: brightness(0.6) saturate(0.58) contrast(0.95); /* the homepage video treatment, verbatim */
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Top stop MATCHES the dive scrim terminal value (0.96): both sides of the boundary hairline
     are identical flat abyss, so no seam can exist; the scene re-emerges below. */
  background: linear-gradient(180deg, rgba(6,36,48,1) 0%, rgba(6,36,48,1) 4%, rgba(6,36,48,0.78) 32%, rgba(6,36,48,0.66) 60%, rgba(6,36,48,0.7) 100%);
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; column-gap: 64px; align-items: start;
  padding-top: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; row-gap: 2rem; } }
.footer-brand .brand__mark { font-size: var(--t-passage); color: var(--foam); }
.footer-logo { height: auto; max-height: 80px; width: auto; display: block; }
.footer-brand p { max-width: 340px; margin: 10px 0 0; font-size: var(--t-excerpt); line-height: 1.35; text-align: left; } /* footer-column measure: never justified (narrow column gaps badly) */
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: block; padding: 4px 0; font-size: var(--t-excerpt); line-height: 1.25; transition: color 0.3s var(--ease); }
.footer-col li:first-child a { padding-top: 0; } /* column tops align to one line */
.footer-col a:hover { color: var(--foam); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 12px; font-family: var(--mono); font-size: var(--t-mono-legal); letter-spacing: 0.06em; color: var(--foam-soft); }
.footer-bottom a:hover { color: var(--foam); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Standard reveal: fade up 600ms var(--ease) from 24px; stagger steps of 120ms.
   Runs once (observer unobserves). Reduced motion: simply visible. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1, .reveal.d1::before { transition-delay: 0.12s; }
.reveal.d2, .reveal.d2::before { transition-delay: 0.24s; }
.reveal.d3, .reveal.d3::before { transition-delay: 0.36s; }
.reveal.d4, .reveal.d4::before { transition-delay: 0.48s; }
.reveal.d5, .reveal.d5::before { transition-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* (retired sonar theme removed: palette is locked to DESIGN_SYSTEM.md) */

/* ============================================================
   Hero stat rail: brass tick + serif counter + mono label,
   directly over the hero image (no panel, no divider lines)
   ============================================================ */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 620px) 1fr;
  gap: 0 80px; align-items: start; max-width: var(--wide);
}
/* Rail shares row 2 with the paragraph, so the first tick top-aligns with the
   paragraph's top edge (not the headline). */
.hero-grid > .hero__title { grid-column: 1; grid-row: 1; }
.hero-grid > .hero__sub { grid-column: 1; grid-row: 2; margin-bottom: 0; }
/* Rail spans both text rows so the first tick top-aligns with the HEADLINE */
.stat-rail { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; }
/* One instrument: 48px from a label's bottom to the next tick; 10px tick-to-number */
.rail-stat + .rail-stat { margin-top: 48px; }
.rail-stat__tick {
  display: block; width: 28px; height: 3px; background: var(--brass);
  margin: 0 0 10px; transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease);
}
.rail-stat.is-in .rail-stat__tick { transform: scaleX(1); }
.rail-stat__num {
  font-family: var(--display); font-weight: 400; font-size: 4rem;
  line-height: 1; letter-spacing: -0.02em; color: var(--current-lo);
  opacity: 0; /* no idle zero: invisible until its count begins, then 0.25 -> 1 with count progress */
}
@media (prefers-reduced-motion: reduce) { .rail-stat__num { opacity: 1; } }
.rail-stat__num .unit {
  font-family: var(--display); color: var(--brass); font-size: 0.6em;
  vertical-align: baseline; letter-spacing: -0.01em;
}
.rail-stat__label {
  font-family: var(--mono); font-size: var(--t-mono-kicker); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--foam-soft); opacity: 0.7; margin: 6px 0 0;
}
@media (prefers-reduced-motion: reduce) { .rail-stat__tick { transform: scaleX(1); } }
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px 0; }
  .hero-grid > .hero__title, .hero-grid > .hero__sub { grid-column: 1; grid-row: auto; }
  .stat-rail { grid-column: 1; grid-row: auto; flex-direction: row; gap: 40px; }
  .rail-stat + .rail-stat { margin-top: 0; }
}
@media (max-width: 480px) {
  .stat-rail { flex-direction: column; gap: 28px; }
}
/* Under 1024px the dive linearizes: stages stack in flow (no pinned crossfade),
   so long content can never clip inside a 100vh stage. Video stays as backdrop. */
@media (max-width: 1024px) {
  .hero.dive { height: auto; }
  .hero__stage { position: relative; height: auto; }
  .dive-stage {
    position: relative; inset: auto;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
    padding: clamp(2.5rem, 7vw, 4rem) 0;
  }
  /* Class, not :first-of-type: sibling divs (fallback/scrim) made that selector match nothing */
  .dive-stage--first { padding-top: var(--header-offset); }
  .hero__meter, .scroll-cue { display: none; }
}

/* Utilities */
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3rem; }
.center { text-align: center; }
.divider-wave { display: block; width: 100%; height: 46px; color: inherit; }

/* ============================================================
   Mobile: justified text reverts to left (narrow measures gap badly).
   Placed LAST so it wins over the per-class alignment rules above.
   ============================================================ */
@media (max-width: 640px) {
  .body-para, .reading p, .legal p, .legal li, .team-intro, .qa__a,
  .bio__text > p:not(.qa-label), .article-spread__excerpt p,
  .statement-note, .ledger-panel__inner p, .manifesto__passage {
    text-align: left;
  }
}