/* ============================================================
   Fifthline — design tokens
   Paper-and-ink. Light page, deep navy bands, blue accent.
   ============================================================ */
:root {
  /* ground */
  --bg:        #f4f5f7;   /* paper   — the page */
  --surface:   #e9edf3;   /* paper-2 — a section that steps forward */
  --elevated:  #dfe4ec;   /* paper-3 */

  /* the dark bands (hero, thesis, footer) */
  --ink:       #081224;
  --ink-2:     #0d1930;
  --ink-3:     #14223d;

  /* type */
  --text:      #10182a;   /* primary   */
  --text-2:    #3c465e;   /* secondary — body prose, decks */
  --muted:     #697284;   /* tertiary  — labels, captions */

  /* accent */
  --blue:       #7898ff;  /* on ink, and as a hairline accent on paper */
  --blue-2:     #a9bcff;  /* on ink — eyebrows, primary buttons */
  --blue-deep:  #526ba8;  /* on paper — focus rings, interactive marks */
  --blue-slate: #6d7aa0;  /* on paper — small caps, indices */
  /* The move-37 pill — the hero background navy. A literal, not var(--ink):
     the pill sits inside .hero, and custom properties resolve at the point of
     use, so a var() here can pick up the dark band's rebinding. Tune freely. */
  --pill-bg:    #081224;
  --pill-fg:    #ffffff;

  --hairline:  rgba(16, 24, 42, .10);
  --hairline-2:rgba(16, 24, 42, .18);

  /* buttons — remapped inside dark bands, see .hero/.thesis/.site-footer */
  --btn-bg: var(--ink);
  --btn-fg: #ffffff;
  --btn-bg-hover: var(--ink-3);

  /* board — a lit neutral object, ink lines, blue marking */
  --board-wood: #d9d5cc;
  --board-hi:   #e3e0d9;
  --board-lo:   #c4bfb4;
  --board-ink:  #081224;
  --board-line: rgba(8, 18, 36, .55);
  --board-dot:  rgba(8, 18, 36, .80);
  --board-mark: rgba(120, 152, 255, .85);
  --stone-size: 4.15%;

  --display: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
  --sans:    'Nunito Sans', ui-sans-serif, system-ui, sans-serif;

  --shell:  1200px;
  --gutter: clamp(22px, 4vw, 56px);
  --ease:   cubic-bezier(.2, .75, .25, 1);
  --header: 76px;
}

/* Dark bands rebind the type and hairline tokens rather than restating a colour
   on every descendant. Anything dropped inside one inherits the right palette. */
.hero,
.thesis,
.band,
.site-footer,
.site-header.on-dark {
  --text:       #ffffff;
  --text-2:     rgba(255, 255, 255, .78);
  --muted:      rgba(255, 255, 255, .52);
  --blue-slate: var(--blue-2);
  --blue-deep:  var(--blue-2);
  --hairline:   rgba(255, 255, 255, .10);
  --hairline-2: rgba(255, 255, 255, .18);
  --btn-bg:     var(--blue-2);
  --btn-fg:     var(--ink);
  --btn-bg-hover: #ffffff;
  color: #fff;
}
.hero, .thesis, .band, .site-footer { background: var(--ink); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
h1, h2, h3, p, figure, ul { margin: 0; }
::selection { background: var(--blue); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 4px; }

.shell {
  width: min(100%, calc(var(--shell) + var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- shared type ---------- */
.label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.label .idx { color: var(--blue-slate); font-variant-numeric: tabular-nums; }
/* On ink, the eyebrow is the blue that opens a section — the same note the
   hero and the guide's .chapter-index strike. Without this it falls back to
   --muted, which on ink is a washed white and reads as body text. */
.hero .label,
.page-head.band .label { color: var(--blue-2); }

h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 28px 0 32px;
}

h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.028em;
}

.section-title { max-width: 16ch; margin: 26px 0 0; }
.section-title.wide { max-width: 22ch; }

.deck {
  max-width: 34ch;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--text-2);
}

.prose p { max-width: 62ch; color: var(--text-2); }
.prose p + p { margin-top: 1.35em; }
.prose .emphasis {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 24ch;
  margin-top: 1.5em;
}
.prose .emphasis:first-child { margin-top: 0; }
.prose .emphasis.wide { max-width: 30ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-ghost { border-color: var(--hairline-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--blue-deep); background: rgba(120, 152, 255, .08); }

/* ============================================================
   header
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
/* .on-dark is the transparent-over-hero state; .scrolled/.menu-active come
   after it so the paper bar always wins once either is set. */
.site-header.scrolled,
.site-header.menu-active {
  --text: #10182a;
  --muted: #697284;
  --hairline-2: rgba(16, 24, 42, .18);
  color: var(--text);
  background: rgba(244, 245, 247, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.header-inner {
  min-height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
/* The wordmark is the SVG painted through a mask, so it takes currentColor
   and needs no per-ground filter — it inherits white over the ink hero and
   ink on paper automatically. Set --wordmark-h to scale it; the width follows
   the artwork's own 9.2859:1 ratio. Override `color` to recolour it. */
.wordmark { --wordmark-h: 13px; display: inline-flex; }
.wordmark-mark {
  display: block;
  height: var(--wordmark-h);
  width: calc(var(--wordmark-h) * 9.2859);
  background: currentColor;
  opacity: .92;
  -webkit-mask: url(assets/fifthline.svg) no-repeat center / contain;
  mask: url(assets/fifthline.svg) no-repeat center / contain;
}
/* Set inline in a headline, standing in for the word it spells. Width drives
   the size here rather than height, so it can shrink to the measure instead of
   overflowing on narrow screens; aspect-ratio derives the height. The artwork
   is all caps with no descenders, so its bottom edge is the baseline. */
.wordmark-mark.inline {
  display: inline-block;
  vertical-align: baseline;
  width: min(6.87em, 84%);
  height: auto;
  aspect-ratio: 9.2859;
  opacity: 1;
}
.hero h1 .wordmark-mark { background: var(--blue-2); }
/* The Fifthline name spelled out in the hero headline, in the on-ink blue
   the logo mark used, so the trailing "?" sits cleanly beside it. */
.hero h1 .brand-text { color: var(--blue-2); letter-spacing: .03em; }
/* Keeps the mark and the punctuation that follows it on one line. */
.nowrap { white-space: nowrap; }

.desktop-nav { display: flex; gap: 30px; }
.desktop-nav a {
  position: relative;
  text-decoration: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--text); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"] { color: var(--text); }
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--muted); }

.menu-button {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--hairline-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.menu-button span,
.menu-button::before,
.menu-button::after {
  content: "";
  display: block;
  width: 16px; height: 1px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.menu-button[aria-expanded="true"] span { opacity: 0; }
.menu-button[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"]::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header) 0 0;
  z-index: 90;
  padding: 30px var(--gutter) 60px;
  background: var(--bg);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: -.03em;
  color: var(--muted);
}
.mobile-nav a[aria-current="page"] { color: var(--text); }

/* ============================================================
   hero — the first ink band
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header) + 40px);
  padding-bottom: 80px;
  overflow: hidden;
  /* Own stacking context, so the negative-z ornaments below sit above the ink
     ground but behind every child without escaping into the page. */
  isolation: isolate;
}
/* Ruled grid, masked so it carries the headline and dissolves before the board. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 48%, transparent 90%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 48%, transparent 90%);
}
/* Home page: rings bleed off the bottom-left, diagonally opposite the board.
   The guide sets .hero-alt to swing them to the top-right instead, so the two
   heroes share a language without being the same picture. */
.hero::after {
  content: "";
  position: absolute;
  width: 72vw;
  height: 72vw;
  min-width: 780px;
  min-height: 780px;
  bottom: -46vw;
  left: -32vw;
  z-index: -1;
  border: 1px solid rgba(120, 152, 255, .23);
  border-radius: 50%;
  box-shadow:
    0 0 0 11vw rgba(120, 152, 255, .025),
    0 0 0 22vw rgba(120, 152, 255, .018);
}
.hero-alt::after {
  top: -46vw;
  bottom: auto;
  right: -30vw;
  left: auto;
}
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .8fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero h1 { max-width: 10ch; }
.hero .deck { max-width: 36ch; }
/* No companion artwork: the copy takes the whole shell and the headline is
   sized to fill it rather than sitting in a 10ch column of empty screen. */
.hero-inner.solo { grid-template-columns: minmax(0, 1fr); }
.hero-inner.solo .hero-copy { max-width: none; }
.hero-inner.solo h1 {
  max-width: 15ch;
  font-size: clamp(3.5rem, 9.5vw, 8rem);
  line-height: .93;
  letter-spacing: -.045em;
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
/* The hero owns the boundary with the section below it; no hairline needed. */
.hero + .section { border-top: 0; }

/* ---------- go board ---------- */
.board-frame { margin: 0; }
.go-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  /* faint vertical grain over a neutral gradient */
  background:
    repeating-linear-gradient(90deg,
      rgba(8, 18, 36, .04) 0 2px,
      rgba(8, 18, 36, 0) 2px 7px),
    linear-gradient(155deg, var(--board-hi) 0%, var(--board-wood) 48%, var(--board-lo) 100%);
  box-shadow:
    inset 0 0 60px rgba(8, 18, 36, .16),
    0 18px 44px rgba(8, 18, 36, .45);
}
.board-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* Stones sit above the grid and above the fifth-line marking — a line painted
   over a stone reads as a chart annotation, not a board. */
/* Grid pitch is 89/18 = 4.94%. Stones sit just under that so neighbours read
   as separate pieces rather than a merged mass. */
.stone {
  position: absolute;
  z-index: 3;
  width: var(--stone-size);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  transition: opacity .28s ease, transform .3s var(--ease);
}
.stone.placed { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* On the board both colours carry themselves; no rim needed. Slate and shell. */
.stone.black {
  background: radial-gradient(circle at 32% 26%, #59607a 0%, #1d2436 40%, #060a13 100%);
  box-shadow: 0 2px 5px rgba(8, 18, 36, .40);
}
.stone.white {
  background: radial-gradient(circle at 32% 26%, #fff 0%, #eceef2 55%, #c8ccd4 100%);
  box-shadow: 0 2px 5px rgba(8, 18, 36, .38);
}

.stone.move-37 { z-index: 4; }
.stone.move-37.placed {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, .95),
    0 0 0 3.5px rgba(120, 152, 255, .95),
    0 2px 6px rgba(8, 18, 36, .5);
}

.halo {
  position: absolute;
  width: var(--stone-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(120, 152, 255, .95);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.halo.on { animation: ping 3.4s ease-out infinite; }
@keyframes ping {
  0%        { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  45%, 100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.6); }
}

/* z-index 2: above the grid, below every stone — a marking painted on the
   board, never over a piece. */
.fifth-line {
  position: absolute;
  background: var(--board-mark);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.fifth-line.active { opacity: 1; transition: transform .7s var(--ease), opacity .2s ease; }

/* The Fifthline pill — floats above move 37 once it lands. z-index 6 keeps it
   above stones and halo. Accent blue, so the pill, the fifth-line marking, and
   move 37's halo all read as one mark. --blue-deep carries white at 5.2:1;
   --blue itself does not (2.7:1), which is why the pill uses the darker step. */
.move-label {
  position: absolute;
  z-index: 6;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-50% - 20px));
  transition: opacity .3s ease .15s, transform .4s var(--ease) .15s;
}
.move-label.active {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 30px));
}

.board-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.replay-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.replay-button:hover { color: var(--text); }
.replay-button svg { width: 13px; height: 13px; }

/* ============================================================
   sections
   ============================================================ */
.section {
  position: relative;
  padding: clamp(88px, 11vw, 168px) 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--header);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(44px, 8vw, 120px);
  align-items: start;
}
.split-head h2 { margin-top: 26px; max-width: 12ch; }

/* ---------- interior page head ---------- */
.page-head {
  padding-top: calc(var(--header) + clamp(72px, 10vw, 148px));
  padding-bottom: clamp(56px, 7vw, 104px);
}
.page-title {
  max-width: 16ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 26px 0 0;
}
.lede { max-width: 46ch; margin-top: 32px; }

/* ---------- arrow links ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2.2em;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .2s ease;
}
.arrow-link:hover { color: var(--blue-deep); }
.arrow-link.spaced { margin-top: clamp(44px, 5vw, 72px); }
.arrow-link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* ---------- next-page footer link ---------- */
.next-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline-2);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.next-link svg { width: clamp(30px, 4vw, 46px); height: auto; flex: none; transition: transform .35s var(--ease); }
.next-link:hover svg { transform: translateX(12px); }
.next-note { margin-top: 20px; color: var(--muted); }

/* ---------- numbered steps ---------- */
/* The section's own top border is the divider. The list adds no rule of its own,
   and the section drops its top padding so step 01 sits against that border with
   exactly the same spacing every later step has against its divider. */
.steps-section { padding-top: 0; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(36px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--hairline);
}
.step-no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--blue-slate);
  font-variant-numeric: tabular-nums;
  padding-top: .7em;
}
.step-body h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 18px;
  max-width: 16ch;
}
.step-body p { color: var(--text-2); max-width: 56ch; }

/* ---------- inline cta ---------- */
.cta-inline { margin-top: 2em; }

/* ---------- thesis — the second ink band ---------- */
.thesis {
  padding: clamp(96px, 14vw, 210px) 0;
  border-top: 0;
}
.statement {
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.statement em { font-style: italic; color: var(--blue-2); }

/* ---------- approach cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--hairline);
}
.card {
  padding: 36px 32px 40px 0;
  border-right: 1px solid var(--hairline);
}
.card + .card { padding-left: 32px; }
.card:last-child { border-right: 0; padding-right: 0; }
.card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.card p { color: var(--muted); font-size: 16px; max-width: 34ch; }

/* ---------- the work ---------- */
.work { background: var(--surface); }

/* ---------- values ---------- */
.values { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--hairline); }
.values li { padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.values h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.values p { color: var(--muted); font-size: 16px; }

/* ---------- contact ---------- */
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: clamp(40px, 5vw, 64px);
}
.contact-row p { max-width: 46ch; color: var(--muted); }

/* ============================================================
   candidate guide
   Components for the long-form guide page. Each one is scoped to a
   ground: .truth-card/.fit-column paint themselves --bg, so keep them on
   plain sections; .checklist assumes it sits inside a .band.
   ============================================================ */

/* ---------- read-progress bar ---------- */
/* Above the header (z 100) so the 3px rule stays visible once the paper bar
   fades in. Renders only on pages that include the markup. */
.progress-track {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  background: rgba(16, 24, 42, .07);
}
.progress-bar {
  width: 0;
  height: 100%;
  background: var(--blue);
  transition: width .12s linear;
}

/* ---------- truth grid ---------- */
/* 1px gaps over a hairline ground: the rules between cells are the gaps. */
.truth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.truth-card {
  min-height: 215px;
  padding: 28px;
  background: var(--bg);
}
.truth-card small {
  display: block;
  margin-bottom: 42px;
  color: var(--blue-slate);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.truth-card h3 {
  margin-bottom: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.truth-card p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- pullquote ---------- */
.pullquote {
  position: relative;
  max-width: 900px;
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding: 44px 0 0 58px;
  border-top: 1px solid var(--hairline);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  line-height: 1.24;
  letter-spacing: -.025em;
}
.pullquote::before {
  content: "37";
  position: absolute;
  left: 0;
  top: 50px;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- fit / not-fit panel ---------- */
.fit-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.fit-column { padding: 30px; background: var(--bg); }
.fit-column h3 {
  margin-bottom: 26px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.fit-column ul { list-style: none; padding: 0; margin: 0; }
.fit-column li {
  position: relative;
  padding: 15px 0 15px 26px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--text-2);
}
.fit-column li:last-child { border-bottom: 1px solid var(--hairline); }
.fit-column li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 15px;
  color: var(--blue-deep);
  font-weight: 800;
}
/* The one off-palette colour on the site, and deliberately so: the negative
   column should not read as another shade of the brand blue. */
.fit-column.not li::before { content: "\2212"; color: #7a5960; }

/* ---------- loop strip ---------- */
/* Horizontal step sequence: the ownership loop. */
.loop {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--hairline);
}
.loop div {
  position: relative;
  padding: 24px 20px 24px 0;
  font-size: 13px;
  font-weight: 700;
}
.loop div:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue-slate);
}
.loop small {
  display: block;
  margin-bottom: 7px;
  color: var(--blue-slate);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* ---------- floor grid ---------- */
.floor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: clamp(40px, 5vw, 64px);
}
.floor-item { padding-top: 20px; border-top: 1px solid var(--hairline); }
.floor-item h3 {
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.025em;
}
.floor-item p { color: var(--muted); font-size: 14px; }

/* ---------- decision checklist ---------- */
/* Assumes an ink ground. The whole row is the label, so the 22px box is not
   the only hit target. */
.checklist {
  max-width: 900px;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--hairline);
}
.check-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 19px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  /* Literal, not --hairline-2: at .18 on ink an empty box reads as absent. */
  border: 1px solid rgba(255, 255, 255, .45);
  transition: background .2s ease, border-color .2s ease;
}
.check-box svg {
  width: 14px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s ease;
}
.check-row input:checked + .check-box {
  color: var(--ink);
  background: var(--blue-2);
  border-color: var(--blue-2);
}
.check-row input:checked + .check-box svg { opacity: 1; transform: scale(1); }
.check-row input:focus-visible + .check-box { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.check-text { color: var(--text-2); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.38; }

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 38px;
}
.ready-button { opacity: .42; pointer-events: none; }
.ready-button.enabled { opacity: 1; pointer-events: auto; }
.decision-status { color: var(--muted); font-size: 12px; }
.decision-note { max-width: 760px; margin-top: 44px; color: var(--muted); font-size: 14px; }


/* ============================================================
   guide layout
   The candidate guide runs as one sticky-railed column. The reference
   carries this nav twice — an aria-hidden mirror — because its worldview
   band splits the layout in half. Worldview is its own page here, so the
   chapters are contiguous and one rail covers all of them.
   ============================================================ */
.guide { position: relative; background: var(--bg); }
.guide-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(56px, 7vw, 112px);
  align-items: start;
}
/* The rail's top padding matches .guide-nav's sticky `top`, so the rail is
   already sitting at its pinned offset when the guide reaches the viewport
   top — it settles instead of jumping. Padding goes on the wrapper, not the
   sticky child, or it would be carried into the pinned position too. */
.guide-nav-wrap { position: relative; height: 100%; padding-top: 118px; }
.guide-nav { position: sticky; top: 118px; padding: 0 0 60px; }
.guide-nav-label {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.guide-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  transition: color .2s ease;
}
/* :last-of-type, not :last-child — .guide-note is the actual last child, so
   the reference's a:last-child rule silently matches nothing. */
.guide-nav a:last-of-type { border-bottom: 1px solid var(--hairline); }
.guide-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width .25s var(--ease);
}
.guide-nav a span {
  color: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}
.guide-nav a:hover,
.guide-nav a.active { color: var(--text); }
.guide-nav a.active::after { width: 100%; }
.guide-note { margin: 30px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.guide-content { min-width: 0; }

/* ---------- chapters ---------- */
/* Each chapter holds most of a screen and centres in it, so scrolling the
   guide advances one idea at a time. */
.chapter {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px, 11vw, 168px) 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 84px;
}
.chapter:last-child { border-bottom: 0; }
.chapter-index {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 26px;
  color: var(--blue-slate);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.chapter-index::before { content: ""; width: 42px; height: 1px; background: currentColor; }
.chapter h2 {
  max-width: 11ch;
  margin-bottom: 30px;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  line-height: .97;
  letter-spacing: -.058em;
}
.chapter h2.wide { max-width: 14ch; }
.chapter-lead {
  max-width: 780px;
  margin-bottom: 34px;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.chapter-body { max-width: 760px; color: var(--muted); font-size: 17px; }
.chapter-body strong { color: var(--text); font-weight: 650; }
.chapter-body p:last-child { margin-bottom: 0; }

/* ---------- guide hero ---------- */
.hero-lead {
  max-width: 760px;
  margin-bottom: 20px;
  color: var(--text-2);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.42;
  letter-spacing: -.018em;
}
.hero-truth { max-width: 660px; margin-bottom: 36px; color: var(--muted); font-size: 15px; }

/* ---------- disciplines ---------- */
/* Number pinned to the top, heading pushed to the bottom by margin auto. */
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 52px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.discipline {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--bg);
}
.discipline-number {
  margin-bottom: auto;
  color: var(--blue-slate);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.discipline h3 {
  margin: 62px 0 12px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.discipline p { color: var(--muted); font-size: 14px; }

/* ---------- AI manifesto ---------- */
.ai-manifesto {
  margin-top: clamp(40px, 5vw, 52px);
  counter-reset: manifesto;
  border-top: 1px solid var(--hairline);
}
.ai-rule {
  counter-increment: manifesto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.ai-rule::before {
  content: "0" counter(manifesto);
  padding-top: 3px;
  color: var(--blue-slate);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  font-variant-numeric: tabular-nums;
}
.ai-rule h3 { margin-bottom: 6px; font-size: 21px; font-weight: 600; letter-spacing: -.024em; }
.ai-rule p { max-width: 760px; color: var(--muted); font-size: 14px; }

.ai-callout {
  max-width: 900px;
  padding: 34px;
  margin-top: 46px;
  color: #fff;
  background: var(--ink-2);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.3;
  letter-spacing: -.03em;
}
.ai-callout em { color: var(--blue-2); font-style: normal; }

/* ---------- workflow strip ---------- */
.workflow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 52px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.workflow div { min-height: 150px; padding: 20px 16px; background: var(--bg); }
.workflow small {
  display: block;
  margin-bottom: 48px;
  color: var(--blue-slate);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.workflow strong { display: block; font-size: 15px; letter-spacing: -.02em; }

/* ---------- decision ---------- */
.decision {
  position: relative;
  padding: clamp(112px, 13vw, 190px) 0;
  overflow: hidden;
  /* Linked to from every "start a conversation" CTA, so the fixed header must
     not sit over the top of it on arrival. */
  scroll-margin-top: var(--header);
}
/* Oversized wordmark sitting on the bottom edge, barely there. The real logo
   rather than set type, which changes two things from the text version this
   replaced: its strokes are far lighter, so the alpha is raised to match; and
   the mask is cropped tight to the glyphs, so it cannot be pulled below the
   edge. The text version's -2.4vw only ate the line box's descender space —
   here the same offset clipped 20% off the letterforms and turned the final
   E into an F. Keep bottom at 0. */
.decision::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 92vw;
  aspect-ratio: 9.2859;
  background: rgba(255, 255, 255, .05);
  -webkit-mask: url(assets/fifthline.svg) no-repeat center / contain;
  mask: url(assets/fifthline.svg) no-repeat center / contain;
}
.decision-inner { position: relative; z-index: 2; }
.decision h2 {
  max-width: 9ch;
  margin-bottom: 32px;
  font-size: clamp(60px, 8vw, 118px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.068em;
}
.decision-lead {
  max-width: 760px;
  margin-bottom: 50px;
  color: var(--text-2);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.42;
  letter-spacing: -.02em;
}

/* ============================================================
   footer — the closing ink band
   ============================================================ */
.site-footer { border-top: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(56px, 6vw, 84px);
}
.footer-brand .wordmark-mark { --wordmark-h: 12px; opacity: .6; }
.footer-brand p { margin-top: 18px; font-size: 14px; color: var(--muted); max-width: 22ch; }

.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a {
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--text); }

.footer-cta { justify-self: end; text-align: left; max-width: 34ch; }
.footer-cta p { font-size: 14px; color: var(--muted); margin-bottom: 22px; }

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr 380px; gap: 48px; }
  /* Was .hero-copy { max-width: 12ch }, which crushed the whole copy column
     to ~12 characters and overflowed the hero. The cap belongs on the
     headline; the grid column already constrains everything else. */
  .hero-inner:not(.solo) h1 { max-width: 12ch; }

  .guide-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 54px; }
  .discipline-grid { grid-template-columns: 1fr; }
  .discipline { min-height: 230px; }
  .discipline h3 { margin-top: 40px; }
  .workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-button { display: block; }

  .hero { min-height: 0; padding-top: calc(var(--header) + 48px); padding-bottom: 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { max-width: none; }
  h1 { max-width: 11ch; }
  .board-frame { max-width: 520px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-head h2 { max-width: none; }
  .section-title { max-width: none; }

  .cards { grid-template-columns: 1fr; }
  .card, .card + .card {
    padding: 30px 0 34px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .card:last-child { border-bottom: 0; }
  .card p { max-width: none; }

  .contact-row { flex-direction: column; align-items: flex-start; gap: 28px; }

  .page-title { max-width: none; }
  .steps li { grid-template-columns: 1fr; gap: 10px; }
  .step-no { padding-top: 0; }
  .step-body h2 { max-width: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-cta { justify-self: start; max-width: none; }
  .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 20px; }

  /* The rail is desktop-only; the progress bar carries position on mobile. */
  .guide-layout { display: block; }
  .guide-nav-wrap { display: none; }
  .chapter { min-height: auto; padding: 104px 0; }
  .chapter h2, .chapter h2.wide { max-width: none; }
  .decision h2 { max-width: none; }
  .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .truth-grid, .fit-panel, .floor-grid { grid-template-columns: 1fr; }
  .floor-grid { gap: 0; }
  .floor-item { padding-block: 20px 4px; }
  /* Stacked, the arrows point down a column they no longer describe.
     Recast as a compact inline flow so the loop still reads as a
     Notice -> Frame -> Decide -> Build -> Measure sequence. */
  .loop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 10px;
    grid-template-columns: none;
    margin-top: clamp(28px, 7vw, 44px);
  }
  .loop div {
    display: inline-flex;
    align-items: baseline;
    padding: 0;
    font-size: 15px;
  }
  .loop small { display: none; }
  .loop div:not(:last-child)::after {
    content: "\2192";
    position: static;
    transform: none;
    margin-left: 12px;
    color: var(--blue-slate);
  }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .btn { width: 100%; justify-content: center; }
  .board-caption { font-size: 10px; }
  .footer-base { flex-direction: column; gap: 10px; }

  .truth-card { min-height: 0; padding: 24px; }
  .truth-card small { margin-bottom: 28px; }
  .fit-column { padding: 24px; }
  .pullquote { padding-left: 0; }
  .pullquote::before { position: static; display: block; margin-bottom: 14px; }
  .decision-actions { align-items: stretch; }
  .decision-actions .btn { width: 100%; }

  .chapter h2 { font-size: clamp(44px, 14vw, 66px); }
  .decision h2 { font-size: clamp(58px, 19vw, 82px); }
  .discipline { padding: 24px; }
  .ai-rule { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .ai-callout { padding: 26px; }
  .workflow { grid-template-columns: 1fr; }
  .workflow div { min-height: 118px; }
  .workflow small { margin-bottom: 28px; }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .halo.on { animation: none; opacity: .5; }
}