/* ============================================================
   BUILT PIPELINE — "Night Desk Dossier"
   Monochrome editorial system. Mobile-first, fluid throughout.
   ------------------------------------------------------------
   01  Tokens
   02  Reset + base
   03  Background field (grain, streaks, margin rail)
   04  Layout primitives
   05  Typography
   06  Buttons + controls
   07  Header / nav / mobile menu
   08  Scroll progress + section rail
   09  Hero
   10  Facts strip
   11  Cards (what we do)
   12  Split + stat stack (why you got an email)
   13  Steps
   14  Markets (+ three-up, focus panel, statement)
   14b The gap
   14c In practice
   15  Principles
   16  FAQ
   17  Contact + form
   18  Footer
   19  Legal pages
   20  Reveal motion
   21  Reduced motion + print
   ============================================================ */

/* Archivo Black is self-hosted so we can pin its vertical metrics. The font
   ships two sets: Windows sizes its text box from usWin (1.347em tall), while
   Android, iOS and macOS use hhea (1.088em). The .mark bar is positioned in
   that box, so without the overrides it sat centred on Windows but slid off
   the letters on phones. These values are the font's own hhea numbers, so
   every platform now lays it out the way Android/iOS already did. */
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/archivo-black-v23-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* ---------- 01  TOKENS ---------- */
:root {
  /* Ink scale — warm-neutral blacks, never pure #000 (too flat on OLED) */
  --ink:        #0a0a0b;
  --ink-2:      #101012;
  --ink-3:      #17171a;
  --ink-4:      #1f1f23;

  /* Paper scale — archival off-whites */
  --paper:      #f4f2ec;
  --paper-2:    #d6d4ce;
  --muted:      #93939b;
  /* lightened from #6c6c74, which measured 3.65:1 on --ink-2 and failed WCAG AA
     for the small footer labels; this sits at ~5.1:1 */
  --muted-2:    #83838c;

  /* Success — used only to confirm a sent form; ~9:1 against --ink */
  --ok:         #6fcf97;
  --ok-soft:    rgba(111, 207, 151, 0.10);
  --ok-line:    rgba(111, 207, 151, 0.45);

  /* Hairlines */
  --line:       rgba(244, 242, 236, 0.11);
  --line-2:     rgba(244, 242, 236, 0.20);
  --line-3:     rgba(244, 242, 236, 0.34);

  /* Fluid type scale */
  --t-micro:    clamp(0.6875rem, 0.665rem + 0.11vw, 0.75rem);
  --t--1:       clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --t-0:        clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  --t-1:        clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-2:        clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --t-3:        clamp(1.625rem, 1.35rem + 1.35vw, 2.75rem);
  --t-4:        clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  /* Sized so the longest headline line (~7.4em in Archivo Black) never wraps
     inside the hero column at any width from 320px up. */
  --t-display:  clamp(2.25rem, 0.2rem + 6.6vw, 6rem);

  /* Space */
  --gutter:     clamp(1.125rem, 4vw, 3.5rem);
  --wrap:       1320px;
  --sec-y:      clamp(4.5rem, 9vw, 9.5rem);

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:    cubic-bezier(0.65, 0, 0.35, 1);

  --header-h:   64px;
  --radius:     999px;

  /* native controls, scrollbars and dropdowns render dark to match */
  color-scheme: dark;
}

@media (min-width: 900px) { :root { --header-h: 76px; } }

/* ---------- 02  RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  background: var(--ink);
}

body {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-0);
  line-height: 1.62;
  color: var(--paper-2);
  background: var(--ink);
  /* the single most important line for "no horizontal scroll, ever" */
  overflow-x: clip;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--paper); color: var(--ink); }

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 300;
  background: var(--paper); color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-size: var(--t--1);
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* ---------- 03  BACKGROUND FIELD ---------- */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Diagonal light streaks, straight out of the reference frames */
.field::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(118deg, transparent 38%, rgba(244,242,236,0.045) 46%, transparent 52%),
    linear-gradient(104deg, transparent 58%, rgba(244,242,236,0.030) 64%, transparent 70%),
    radial-gradient(70% 55% at 78% 8%,  rgba(244,242,236,0.055), transparent 62%),
    radial-gradient(60% 50% at 8% 88%,  rgba(244,242,236,0.035), transparent 60%);
  filter: blur(2px);
}

/* Film grain — SVG turbulence, no network request */
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Perforated left margin rail — the "dossier edge" */
.margin-rail {
  position: fixed;
  top: 0; bottom: 0;
  left: calc(var(--gutter) * 0.32);
  width: 3px;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--line-2) 1.1px, transparent 1.2px);
  background-size: 3px 13px;
  display: none;
}
@media (min-width: 1100px) { .margin-rail { display: block; } }

/* ---------- 04  LAYOUT PRIMITIVES ---------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

main { position: relative; z-index: 2; }

.section {
  padding-block: var(--sec-y);
  position: relative;
}
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }

/* Section index label: "01  WHAT WE DO" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85em;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.eyebrow__num { color: var(--paper); font-weight: 700; }
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/* Perforated tear-line divider (wildcard element) */
.tear {
  height: 3px;
  width: 100%;
  background-image: radial-gradient(circle, var(--line-2) 1.2px, transparent 1.3px);
  background-size: 11px 3px;
  background-repeat: repeat-x;
}

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- 05  TYPOGRAPHY ---------- */
.display, h1, h2, h3 {
  font-family: "Archivo Black", "Archivo", Impact, sans-serif;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}

.h-display { font-size: var(--t-display); line-height: 0.88; letter-spacing: -0.03em; }
.h-1 { font-size: var(--t-4); }
.h-2 { font-size: var(--t-3); }
.h-3 { font-size: var(--t-2); line-height: 1.02; }
.h-4 { font-size: var(--t-1); line-height: 1.12; letter-spacing: -0.01em; }

.lede {
  font-size: var(--t-1);
  line-height: 1.55;
  color: var(--paper-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.body { max-width: 66ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.tight { max-width: 46ch; }

.mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Inverted marker highlight — the signature "color event".
   Painted as a size-controlled gradient rather than a plain background: an
   inline background fills the font's content area (~1.34em in Archivo Black),
   which is far taller than our display leading and would collide with the line
   above. A gradient lets us pin the bar to the cap height instead.
   Geometry (Archivo Black, metrics pinned by the @font-face overrides): the
   caps run from 0.19em to 0.878em below the top of the text box, so a bar at
   0.08em, 0.908em tall leaves an even 0.11em of paper above and below. */
.mark {
  --mark-y: 0.08em;
  --mark-h: 0.908em;
  color: var(--ink);
  background-image: linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-size: 100% var(--mark-h);
  background-position: 0 var(--mark-y);
  padding: 0 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1:has(.mark), h2:has(.mark), h3:has(.mark) { line-height: 0.98; }

/* Badge pill with a pulsing aperture dot */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.05rem 0.5rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgba(244, 242, 236, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
}
.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--paper);
  animation: aperture 2.8s var(--ease-io) infinite;
  flex: none;
}
@keyframes aperture {
  0%   { box-shadow: 0 0 0 0 rgba(244,242,236,0.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 9px rgba(244,242,236,0); opacity: 0.72; }
  100% { box-shadow: 0 0 0 0 rgba(244,242,236,0); opacity: 1; }
}

/* ---------- 06  BUTTONS ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: var(--line-3);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* 48px min touch target on every device */
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background-color 0.35s var(--ease), transform 0.35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* wipe fill on hover — press-plate feel */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--paper); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn--solid {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-bd: var(--paper);
  font-weight: 700;
}
.btn--solid::before { background: var(--ink-3); }
.btn--solid:hover { color: var(--paper); border-color: var(--paper); }

.btn--lg { min-height: 54px; padding: 1rem 2rem; font-size: var(--t-0); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Text link with an underline that draws in */
.link {
  position: relative;
  color: var(--paper);
  font-weight: 500;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link--dim { color: var(--muted); }
.link--dim:hover { color: var(--paper); }

/* ---------- 07  HEADER / NAV ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
}
.header.is-stuck {
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line);
}

.header__inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Stacked wordmark, in the spirit of the reference */
.logo {
  display: block;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(0.7rem, 0.62rem + 0.35vw, 0.82rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  flex: none;
  transition: opacity 0.3s var(--ease);
}
.logo:hover { opacity: 0.72; }
.logo span { display: block; }
.logo span + span { padding-left: 0.12em; }

/* Numbered chips — the reference's signature nav */
.chips {
  display: none;
  align-items: center;
  gap: 0.4rem;
}
@media (min-width: 1080px) { .chips { display: flex; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 242, 236, 0.02);
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.chip__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  transition: color 0.3s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--line-2); }
.chip.is-active {
  color: var(--paper);
  border-color: var(--line-3);
  background: rgba(244, 242, 236, 0.07);
}
.chip.is-active .chip__num { color: var(--paper); }

.header__cta { display: none; flex: none; }
@media (min-width: 560px) { .header__cta { display: inline-flex; } }
/* below the chip breakpoint the CTA would float in the middle of the bar —
   pin it to the right, beside the burger */
@media (max-width: 1079px) { .header__cta { margin-left: auto; margin-right: 0.75rem; } }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  align-items: flex-end;
  flex: none;
  margin-right: -0.5rem;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1.5px;
  background: var(--paper);
  transition: transform 0.4s var(--ease), width 0.4s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { width: 22px; }
.burger span:nth-child(2) { width: 15px; }
body.menu-open .burger span:nth-child(1) { width: 22px; transform: translateY(3.25px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { width: 22px; transform: translateY(-3.25px) rotate(-45deg); }

/* Full-screen editorial menu.
   It starts BELOW the header rather than under it, so when the list is taller
   than a short phone screen it scrolls inside its own area and can never slide
   behind the logo. Content is centred with auto margins, not
   justify-content: center — centring overflow would push the first items
   above the top edge, where they can't be scrolled back into view. */
.menu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 1.25rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease), visibility 0.6s;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu__list { margin-top: auto; }
.menu__foot { margin-bottom: auto; }
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
body.menu-open { overflow: hidden; }
/* while the menu is open the header is its solid top edge, whatever the scroll
   position — at the top of the page it is otherwise transparent */
body.menu-open .header {
  background: var(--ink);
  border-bottom-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.menu__list { display: flex; flex-direction: column; gap: 0.15rem; }
.menu__item a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  /* both size and spacing also scale with screen height, so the full list
     fits on a phone with its browser bars showing */
  padding: clamp(0.3rem, 0.9vh, 0.55rem) 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.25rem, min(7.5vw, 3.6vh), 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
body.menu-open .menu__item a { opacity: 1; transform: none; }
.menu__item:nth-child(1) a { transition-delay: 0.10s; }
.menu__item:nth-child(2) a { transition-delay: 0.15s; }
.menu__item:nth-child(3) a { transition-delay: 0.20s; }
.menu__item:nth-child(4) a { transition-delay: 0.25s; }
.menu__item:nth-child(5) a { transition-delay: 0.30s; }
.menu__item:nth-child(6) a { transition-delay: 0.35s; }
.menu__item:nth-child(7) a { transition-delay: 0.40s; }
.menu__item:nth-child(8) a { transition-delay: 0.45s; }
.menu__item:nth-child(9) a { transition-delay: 0.50s; }
.menu__item:nth-child(10) a { transition-delay: 0.55s; }
.menu__item a:hover { color: var(--muted); }
.menu__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted-2);
  flex: none;
}
.menu__foot {
  margin-top: clamp(1.25rem, 4vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* ---------- 08  SCROLL PROGRESS + SECTION RAIL ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--paper);
  z-index: 101;
  will-change: transform;
}

.rail {
  position: fixed;
  right: clamp(10px, 1.6vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
@media (min-width: 1200px) { .rail { display: flex; } }
.rail__dot {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  position: relative;
}
.rail__dot::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted-2);
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease);
}
.rail__dot:hover::after { background: var(--paper-2); transform: scale(1.25); }
.rail__dot.is-active::after { background: var(--paper); transform: scale(1.7); }
.rail__dot span {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.rail__dot:hover span { opacity: 1; transform: none; }

/* ---------- 09  HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(2rem, 7vh, 4.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@supports not (min-height: 100svh) { .hero { min-height: 100vh; } }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 4vw, 5rem); }
}

.hero__title { margin-block: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.6rem); }
.hero__title .line { display: block; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.hero__actions .btn { flex: 1 1 auto; min-width: 190px; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.hero__meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__meta li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--muted-2);
  flex: none;
}

/* Schematic artwork — sits below the copy on phones so the headline leads */
.hero__art {
  position: relative;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 900px) { .hero__art { max-width: none; } }
.hero__art svg { width: 100%; height: auto; overflow: visible; }

/* Stacked variant: the three-sentence headline runs the full width, with the
   copy and the schematic side by side beneath it. Below 900px each sentence
   may wrap, sized so the longest word ("INTRODUCTION.") always fits; from
   900px up each sentence holds one line. */
.hero__grid--stack { row-gap: clamp(1.75rem, 4vw, 2.75rem); }
.hero__grid--stack .hero__title { margin-bottom: 0; }
.hero__title--stack { font-size: clamp(2rem, 10.2vw - 0.25rem, 4.5rem); }
@media (min-width: 900px) {
  /* top-aligned so the CTAs sit as high as possible above the fold */
  .hero__grid--stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    align-items: start;
    row-gap: clamp(1.5rem, 3vw, 2.25rem);
  }
  .hero__grid--stack .hero__head { grid-column: 1 / -1; }
  .hero__grid--stack .hero__art { max-width: 400px; justify-self: end; margin-top: -1.5rem; }
  /* the longest sentence measures ~16.9em; capped so it clears the 1320px
     wrap with room to spare at every desktop width */
  .hero__title--stack { font-size: min(5.2vw, 4.75rem); }
  .hero__title--stack .line { white-space: nowrap; }
}

.scrollcue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (min-width: 900px) and (min-height: 700px) { .scrollcue { display: flex; } }
.scrollcue__bar {
  width: 1px; height: 34px;
  background: linear-gradient(var(--line-3), transparent);
  position: relative;
  overflow: hidden;
}
.scrollcue__bar::after {
  content: "";
  position: absolute;
  top: -100%; left: 0;
  width: 1px; height: 100%;
  background: var(--paper);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ---------- 10  FACTS STRIP ---------- */
.facts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(244, 242, 236, 0.015);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fact {
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts__grid .fact:nth-child(2n) { border-right: 0; }
@media (min-width: 860px) {
  .facts__grid .fact { border-bottom: 0; }
  .facts__grid .fact:nth-child(2n) { border-right: 1px solid var(--line); }
  .facts__grid .fact:last-child { border-right: 0; }
}
.fact__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.7rem;
}
.fact__v {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--paper);
  letter-spacing: -0.01em;
}

/* ---------- 11  CARDS ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 720px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,242,236,0.035), rgba(244,242,236,0.008));
  overflow: hidden;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.card::after {
  /* raking light that sweeps on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(244,242,236,0.07) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card:hover::after { transform: translateX(120%); }

.card__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--muted-2);
}
.card__icon { width: 34px; height: 34px; color: var(--paper); }
.card p { color: var(--muted); font-size: var(--t--1); line-height: 1.68; }

/* ---------- 12  SPLIT + STAT STACK ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 5rem); }
  .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem)); }
}

/* The meter bar between stats IS the separator — no extra borders, or the
   two stack up into a doubled rule. */
.stat { padding-block: clamp(1.4rem, 3vw, 1.9rem); }
.stat:first-child { padding-top: 0; }
.stat__dots {
  height: 3px;
  margin-bottom: clamp(1.1rem, 2.5vw, 1.5rem);
  background-image: radial-gradient(circle, var(--paper-2) 1.3px, transparent 1.4px);
  background-size: 11px 3px;
  background-repeat: repeat-x;
}
.stat h3 { margin-bottom: 0.6rem; }
.stat p { color: var(--muted); font-size: var(--t--1); line-height: 1.68; max-width: 46ch; }
/* progress bars between stats */
.stat__bar {
  height: 3px;
  background: var(--ink-4);
  overflow: hidden;
  margin-block: clamp(1.4rem, 3vw, 1.9rem) 0;
}
.stat__bar i {
  display: block;
  height: 100%;
  width: var(--w, 60%);
  background: var(--line-3);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}
.is-in .stat__bar i { transform: scaleX(1); }

/* ---------- 13  STEPS ---------- */
.steps { counter-reset: step; margin-top: clamp(2rem, 4vw, 3rem); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 860px) {
  .step { grid-template-columns: 5rem minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: baseline; }
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted-2);
  padding-top: 0.35em;
  transition: color 0.4s var(--ease);
}
.step:hover .step__num { color: var(--paper); }
.step__title { grid-column: 2; }
@media (min-width: 860px) { .step__title { grid-column: auto; } }
.step__body {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--t--1);
  line-height: 1.7;
  max-width: 54ch;
}
@media (min-width: 860px) { .step__body { grid-column: auto; } }

/* ---------- 14  MARKETS ---------- */
.markets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 640px)  { .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .markets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.market {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background-color 0.4s var(--ease);
}
.market:hover { background: var(--ink-3); }
.market__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--muted-2);
}
.market p { font-size: var(--t--1); color: var(--muted); line-height: 1.6; }

.markets__note {
  margin-top: 1.25rem;
  font-size: var(--t--1);
  color: var(--muted);
}

/* Three-up variant (relevance / timing / context). Stays single-column until
   there's room for all three: a 2-up row would leave an empty cell, which the
   1px-gap grid paints as a solid hairline-coloured block. */
.markets--3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .markets--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Single current market: one headed panel, operators beside suppliers */
.focus {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line-2);
}
.focus__head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,242,236,0.035), rgba(244,242,236,0.008));
}
.focus__sides {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 640px) { .focus__sides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.focus .market__k { text-transform: uppercase; letter-spacing: 0.24em; }

/* Pull statement closing a section */
.statement {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-left: clamp(1rem, 2.5vw, 1.5rem);
  border-left: 2px solid var(--paper);
  max-width: 32ch;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: var(--t-2);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}

/* ---------- 14b  THE GAP (demand / hub / supply) ---------- */
.gap { --spine: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; }
.gap__node {
  padding: clamp(1.4rem, 3vw, 2rem) var(--spine);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(244,242,236,0.035), rgba(244,242,236,0.008));
}
.gap__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.gap__v {
  margin-top: 0.6rem;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: var(--t-2);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.gap__note {
  margin-top: 0.55rem;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--muted);
  max-width: 40ch;
}
/* the hub: a dashed spine joins the two boxes, with a marker where we sit */
.gap__hub {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.4rem) 0 clamp(1.6rem, 4vw, 2.4rem) calc(var(--spine) + 1.75rem);
}
.gap__hub::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--spine);
  border-left: 1px dashed var(--line-3);
}
.gap__hub::after {
  content: "";
  position: absolute;
  left: calc(var(--spine) - 5px);
  top: calc(clamp(1.6rem, 4vw, 2.4rem) + 0.2rem);
  width: 11px; height: 11px;
  background: var(--paper);
  box-shadow: 0 0 0 5px var(--ink), 0 0 0 6px var(--line-3);
}
.gap__hub .gap__k {
  display: inline-block;
  padding: 0.3em 0.6em;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 14c  IN PRACTICE (scenario + flow) ---------- */
.scenario {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 34rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--paper-2);
  background: rgba(244, 242, 236, 0.03);
}
.scenario__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.8rem;
}
.scenario h3 { margin-bottom: 0.7rem; }
.scenario p:last-child { color: var(--muted); font-size: var(--t--1); line-height: 1.68; }

.flow { counter-reset: flow; }
.flow__step {
  --node: 2.2rem;
  position: relative;
  counter-increment: flow;
  padding: 0 0 clamp(1.75rem, 4vw, 2.5rem) calc(var(--node) + 1.25rem);
}
/* numbered node */
.flow__step::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 0; top: -0.2rem;
  width: var(--node); height: var(--node);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-3);
  background: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--paper);
}
/* the dashed connector down to the next node */
.flow__step::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2);
  top: calc(var(--node) - 0.2rem);
  bottom: -0.2rem;
  border-left: 1px dashed var(--line-2);
}
.flow__step:last-child::before { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.flow__step h3 { margin-bottom: 0.45rem; }
.flow__step p { color: var(--muted); font-size: var(--t--1); line-height: 1.68; max-width: 50ch; }

.flow__end {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-2);
}
.flow__that {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: var(--t-2);
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 1.1rem;
}
.nots { display: flex; flex-direction: column; gap: 0.6rem; }
.nots li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nots li::before { content: ""; width: 12px; height: 1px; background: var(--muted-2); flex: none; }
.nots li.is-yes { color: var(--paper); font-weight: 700; }
.nots li.is-yes::before { width: 12px; height: 7px; background: var(--paper); }

/* ---------- 15  PRINCIPLES ---------- */
.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.principle {
  display: grid;
  grid-template-columns: auto 1fr;
  /* rows in a 2-up grid stretch to the taller neighbour; keep the heading and
     its copy together at the top instead of spreading them apart */
  align-content: start;
  gap: 0.9rem 1rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-2);
}
.principle__check { width: 18px; height: 18px; color: var(--paper); margin-top: 0.22em; flex: none; }
.principle h3 { grid-column: 2; margin-bottom: 0.45rem; }
.principle p { grid-column: 2; font-size: var(--t--1); color: var(--muted); line-height: 1.68; }

/* Stamp — the wildcard */
.stamp {
  display: inline-grid;
  place-items: center;
  padding: 0.9rem 1.5rem;
  border: 2px solid var(--line-3);
  border-radius: 4px;
  transform: rotate(-4deg);
  text-align: center;
  color: var(--paper-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.9;
  opacity: 0.8;
}
.stamp b { font-weight: 700; color: var(--paper); letter-spacing: 0.3em; }

/* ---------- 16  FAQ ---------- */
.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }

.qa { border-bottom: 1px solid var(--line); }
.qa > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.6vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--paper-2);
  transition: color 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--paper); }
.qa[open] > summary { color: var(--paper); }

.qa__sign {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
  margin-top: 0.35em;
}
.qa__sign::before, .qa__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.qa__sign::before { top: 50%; left: 0; width: 14px; height: 1.5px; transform: translateY(-50%); }
.qa__sign::after  { left: 50%; top: 0; width: 1.5px; height: 14px; transform: translateX(-50%); }
.qa[open] .qa__sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

/* grid-rows trick = smooth height animation on a native <details> */
.qa__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.qa[open] .qa__body { grid-template-rows: 1fr; }
.qa__body > div { overflow: hidden; }
.qa__body p {
  padding-bottom: clamp(1.1rem, 2.6vw, 1.6rem);
  padding-right: clamp(0rem, 4vw, 3rem);
  color: var(--muted);
  font-size: var(--t--1);
  line-height: 1.75;
  max-width: 72ch;
}
.qa__body p + p { padding-top: 0; }

/* ---------- 17  CONTACT + FORM ---------- */
.contact-panel {
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(244,242,236,0.04), rgba(244,242,236,0.01));
  padding: clamp(1.5rem, 4vw, 3rem);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.25rem);
}
@media (min-width: 620px) { .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: clamp(1rem, 2.5vw, 1.25rem); }
.field-group label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-group label .req { color: var(--paper-2); }

.input, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  background: rgba(10, 10, 11, 0.6);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--paper);
  font-size: var(--t-0);
  /* 16px+ on iOS prevents the zoom-on-focus jump */
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
  appearance: none;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--paper);
  background: rgba(10, 10, 11, 0.85);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #d98b8b; }

/* appearance:none strips the native dropdown arrow — put one back */
select.input {
  cursor: pointer;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2393939b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
select.input option { background: var(--ink-2); color: var(--paper); }

.field-error {
  font-size: 0.75rem;
  color: #e0a2a2;
  min-height: 0;
  display: none;
}
.field-error.is-shown { display: block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 0.78rem; color: var(--muted-2); line-height: 1.6; margin-top: 0.9rem; }

.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-size: var(--t--1);
  display: none;
}
.form-status.is-shown { display: block; }
.form-status.is-ok { border-color: var(--ok-line); color: var(--paper); background: var(--ok-soft); }
.form-status.is-ok.is-shown { display: flex; align-items: flex-start; gap: 0.75rem; }
.form-status__icon { flex: none; margin-top: 0.1rem; color: var(--ok); }
.form-status.is-err { border-color: #7a4a4a; color: #e8bcbc; background: rgba(122,74,74,0.12); }

.btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; }

/* sent — button turns green, arrow swaps for a check; cleared on next edit */
.btn__check { display: none; }
.btn.is-sent { --btn-bg: var(--ok); --btn-bd: var(--ok); --btn-fg: var(--ink); pointer-events: none; }
.btn.is-sent::before { display: none; }
.btn.is-sent .btn__arrow { display: none; }
.btn.is-sent .btn__check { display: block; }

/* Contact detail list */
.details-list { display: flex; flex-direction: column; gap: 0; }
.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding-block: clamp(1rem, 2.4vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 480px) { .detail { grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; } }
.detail:first-child { border-top: 1px solid var(--line); }
.detail__k {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.detail__v { color: var(--paper-2); font-size: var(--t--1); }
.detail__v strong { color: var(--paper); font-weight: 600; }

.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  margin-left: 0.5rem;
  transition: color 0.3s, border-color 0.3s;
  vertical-align: middle;
}
.copy-btn:hover { color: var(--paper); border-color: var(--line-3); }
/* keeps the chip visually small but gives it a 44px touch target */
.copy-btn::after { content: ""; position: absolute; inset: -9px -8px; }

/* ---------- 18  FOOTER ---------- */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px));
  background: var(--ink-2);
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 820px) { .footer__top { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.7fr)); } }

.footer__wordmark {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 1rem;
}
/* h3, not h4: the preceding section heading is an h2, and skipping a level
   breaks sequential heading order for screen readers. */
.footer h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.1rem;
}
.footer__links { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__links a { color: var(--muted); font-size: var(--t--1); width: fit-content; transition: color 0.3s; }
.footer__links a:hover { color: var(--paper); }

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom p { font-size: 0.75rem; color: var(--muted-2); }

/* ---------- 19  LEGAL PAGES ---------- */
.legal-hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
}
.legal-meta span {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); } }

.toc { display: none; }
@media (min-width: 1000px) {
  .toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 4rem);
    overflow-y: auto;
  }
}
.toc h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1rem;
}
.toc ol { display: flex; flex-direction: column; gap: 0.1rem; counter-reset: toc; }
.toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  border-left: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted-2);
  transition: color 0.3s, border-color 0.3s;
}
.toc a:hover { color: var(--paper-2); border-color: var(--line-3); }
.toc a.is-active { color: var(--paper); border-color: var(--paper); }

.prose { max-width: 74ch; }
.prose section + section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.prose h2 {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}
.prose h2 .n {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--muted-2);
  flex: none;
}
.prose h3 {
  font-size: var(--t-0);
  color: var(--paper-2);
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  line-height: 1.4;
}
.prose p { margin-bottom: 1rem; color: var(--muted); line-height: 1.75; font-size: var(--t--1); }
.prose p strong { color: var(--paper-2); font-weight: 600; }
.prose a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.prose a:hover { text-decoration-color: var(--paper); }
.prose ul { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.prose ul li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: var(--t--1);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 1px;
  background: var(--muted-2);
}
.prose .callout {
  border: 1px solid var(--line-2);
  border-left-width: 2px;
  border-left-color: var(--paper-2);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  background: rgba(244,242,236,0.03);
  margin-bottom: 1.5rem;
}
.prose .callout p:last-child { margin-bottom: 0; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.back-link:hover { color: var(--paper); }
.back-link svg { transition: transform 0.35s var(--ease); }
.back-link:hover svg { transform: translateX(-3px); }

/* ---------- 20  REVEAL MOTION ---------- */
/* Printing-press impression: clip wipe + small rise */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Headline lines wipe up one after another.
   The clip lives on the CHILD spans, never on the observed element itself —
   a fully-clipped element reports an intersection ratio of 0 and would
   never trigger its own reveal. */
[data-reveal="lines"] { opacity: 1; transform: none; }
[data-reveal="lines"] .line {
  clip-path: inset(0 0 105% 0);
  transition: clip-path 0.85s var(--ease);
}
[data-reveal="lines"].is-in .line { clip-path: inset(0 0 -25% 0); }
[data-reveal="lines"].is-in .line:nth-child(2) { transition-delay: 0.10s; }
[data-reveal="lines"].is-in .line:nth-child(3) { transition-delay: 0.20s; }
[data-reveal="lines"].is-in .line:nth-child(4) { transition-delay: 0.30s; }

/* The marker sweeps in behind the word and the text flips from paper to ink
   as it passes. Scoped to reveal containers so a standalone .mark is never
   left as dark text on a dark background. */
[data-reveal] .mark {
  color: var(--paper);
  background-size: 0% var(--mark-h);
  transition: background-size 0.7s var(--ease) 0.2s, color 0.2s linear 0.55s;
}
[data-reveal].is-in .mark { color: var(--ink); background-size: 100% var(--mark-h); }

/* Schematic draw-on */
.schem-path {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 1.6s var(--ease) 0.2s;
}
.is-in .schem-path { stroke-dashoffset: 0; }
.schem-node { opacity: 0; transition: opacity 0.6s var(--ease); }
.is-in .schem-node { opacity: 1; }
.is-in .schem-node:nth-of-type(2) { transition-delay: 0.45s; }
.is-in .schem-node:nth-of-type(3) { transition-delay: 0.6s; }
.is-in .schem-node:nth-of-type(4) { transition-delay: 0.75s; }

/* traveling pulse along the main connector */
.pulse-dot { offset-path: var(--p); animation: travel 4.2s var(--ease-io) infinite; }
@keyframes travel {
  0%, 8%   { offset-distance: 0%;   opacity: 0; }
  14%      { opacity: 1; }
  86%      { opacity: 1; }
  92%,100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- 21  REDUCED MOTION + PRINT ---------- */
@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;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal] .line {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  [data-reveal] .mark { background-size: 100% var(--mark-h) !important; color: var(--ink) !important; }
  .schem-path { stroke-dashoffset: 0 !important; }
  .schem-node { opacity: 1 !important; }
  .card::after { display: none; }
  .stat__bar i { transform: scaleX(1) !important; }
}

@media print {
  .field, .margin-rail, .rail, .progress, .header, .menu, .scrollcue, .footer__links { display: none !important; }
  body { background: #fff; color: #111; }
  .prose p, .prose li { color: #222; }
  h1, h2, h3, .display { color: #000; }
  .legal-layout { display: block; }
  a { color: #000; }
}

/* Ultra-wide guard: keep measure sane on 4K displays */
@media (min-width: 1800px) {
  :root { --wrap: 1440px; }
}