/* ==========================================================================
   EXTOL AFFILIATES — design system
   Route A · Forest & moss. Structure and UX modelled on tennr.com:
   saturated gradient field + layered motif + film grain, square outline
   buttons, wide-tracked uppercase eyebrows. One typeface throughout —
   Oranienbaum, self-hosted as a 35 KB woff2 in assets/fonts. It has a single
   weight, so hierarchy runs on size, tracking and colour, never on bold.
   House laws hold: warm neutrals, no pure black/white, no rounded cards,
   no drop shadows, no glassmorphism, no icon-soup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · TYPEFACE
   Oranienbaum (SIL Open Font License 1.1) — self-hosted, no external request.
   It ships in ONE weight (400). Everything below therefore sets weight 400
   explicitly and `font-synthesis: none` stops browsers faking bold or italic,
   which on a high-contrast serif smears the hairlines. Hierarchy is carried by
   size, tracking and colour instead of weight.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Oranienbaum";
  src: url("../fonts/oranienbaum-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* The field — deep forest, top to bottom */
  --field-top:  #0C1A11;
  --field-mid:  #1B3A22;
  --field-bot:  #25482A;

  /* Paper — warm oat, never white */
  --oat:        #EDE9DC;
  --oat-2:      #E4DFCE;
  --oat-3:      #D9D2BE;

  /* Ink — warm, never black */
  --forest:     #1D2A1B;   /* ink on oat */
  --bone:       #EAE7DA;   /* ink on field */

  /* Accents */
  --moss:       #C6DE93;   /* light accent, used on the field */
  --fern:       #55703A;   /* mid accent, used on oat */

  /* Contextual roles — flipped by .panel--field */
  --canvas:     var(--oat);
  --surface:    var(--oat-2);
  --ink:        var(--forest);
  --ink-70:     #4A5545;
  --ink-45:     #5A6255;
  --rule:       #D2CBB6;
  --rule-ink:   #BDB49C;
  --accent:     var(--fern);

  /* Type */
  /* One face throughout. The three tokens are kept so every rule keeps its
     intent readable, but they all resolve to Oranienbaum. */
  --font-display: "Oranienbaum", Georgia, "Times New Roman", serif;
  --font-sans:    "Oranienbaum", Georgia, "Times New Roman", serif;
  --font-mono:    "Oranienbaum", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2rem, 2.9vw, 2.5rem);      /* 40px — restrained, as measured */
  --fs-h1:      clamp(1.85rem, 2.5vw, 2.125rem);  /* 34px */
  --fs-h2:      clamp(1.5rem, 1.9vw, 1.75rem);    /* 28px — the workhorse */
  --fs-h4:      clamp(1.2rem, 1.5vw, 1.3125rem);  /* 21px */
  --fs-h3:      clamp(1.1rem, 1.3vw, 1.1875rem);  /* 19px */
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.1875rem);
  --fs-body:    1.125rem;                          /* 18px */
  --fs-small:   1rem;
  --fs-label:   0.8125rem;

  /* Space */
  --gap:      clamp(1.1rem, 2.2vw, 2rem);
  /* Fixed rhythm, measured off the reference: 80 / 120 / 140 at desktop.
     Only scales down on small screens — no fluid canyon at large ones. */
  --section-s: 80px;
  --section-m: 120px;
  --section-l: 140px;
  --section:  var(--section-m);
  --shell:    42px;
  --measure:  58ch;

  --header-h: 99px;
  --ease:     cubic-bezier(0.16, 0.84, 0.28, 1);
}

@media (max-width: 899px) {
  :root { --section-s: 40px; --section-m: 60px; --section-l: 70px; --shell: 22px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-synthesis: none;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.030em;   /* body closes... */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Film grain — sits over everything, like the reference */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--moss); color: var(--field-top); }

:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--field-top); color: var(--bone);
  padding: 0.85rem 1.25rem; font-family: var(--font-mono); font-size: var(--fs-label);
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   03 · TYPE
   -------------------------------------------------------------------------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;     /* ...display opens. That opposition is the signature. */
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.1; letter-spacing: 0.01em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.15; letter-spacing: normal; }
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.24;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.028em;
}

/* Light-on-dark blooms optically — give the dark contexts weight back so the
   300 doesn't go wispy against the field. */
.panel--field .display, .panel--field .h1, .panel--field .h2,
.hero .display, .page-hero .display, .page-hero .h1 { font-weight: 400; }

/* Mid-register — the voice that lets a section carry a sub-argument */
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.022em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 50ch;
}

.body-copy { max-width: var(--measure); color: var(--ink); }
.body-copy > * + * { margin-top: 1.05em; }
.body-copy strong { color: var(--ink); }   /* single-weight face: colour, not weight, marks emphasis */

.small { font-size: var(--fs-small); color: var(--ink-45); }

/* The mono eyebrow — wide tracked, uppercase */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;   /* 1.82px at 13px, as measured */
  text-transform: uppercase;
  color: var(--ink-70);
  display: inline-block;
  line-height: 1.5;
}
.label--accent { color: var(--accent); }
.panel--field .label { color: var(--moss); }

/* Section heading marker — the small bullet the reference uses */
.marker { display: flex; gap: 0.9em; align-items: baseline; }
.marker::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  background: var(--accent);
  transform: translateY(-0.35em);
}
.panel--field .marker::before { background: var(--moss); }

/* Typographic device — the moss rule under a phrase */
.mark-word {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.045em;
  background-position: 0 100%;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.panel--field .mark-word,
.hero .mark-word { background-image: linear-gradient(var(--moss), var(--moss)); }


/* --------------------------------------------------------------------------
   04 · LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--shell);
}
.shell--narrow { max-width: 900px; }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: var(--section-s); }
.section--roomy { padding-block: var(--section-l); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }

/* Section header: the eyebrow always sits directly above the heading, at every
   width. Deliberately NOT a side rail — a label that changes position as the
   viewport resizes reads as unstable. */
.section__eyebrow { margin-bottom: 0.9rem; }
.section__body > * + * { margin-top: 0.9rem; }

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

.panel--oat2 { background: var(--surface); }

/* Zone transitions.
   Each section keeps its own background — so text is never on the wrong colour —
   and the boundary between two differently-coloured sections is dissolved by a
   gradient band carrying the previous zone's colour down into the next. The
   page reads as one tone travelling with the scroll rather than hard edges.
   JS inserts the bands; without JS you simply get clean section edges. */
.zone-fade {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(110px, 16vh, 240px);
  background: linear-gradient(to bottom, var(--zone-from), transparent);
  pointer-events: none;
}
.has-zone-fade { position: relative; }

/* The field — deep forest, inverted roles */
.panel--field {
  position: relative;
  background: linear-gradient(180deg, var(--field-top) 0%, var(--field-mid) 55%, var(--field-bot) 100%);
  --canvas:   var(--field-mid);
  --surface:  rgba(234, 231, 218, 0.05);
  --ink:      var(--bone);
  --ink-70:   #B9C2AF;
  --ink-45:   #A3AE9A;
  --rule:     rgba(234, 231, 218, 0.16);
  --rule-ink: rgba(234, 231, 218, 0.34);
  --accent:   var(--moss);
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   05 · BUTTONS — square, outlined, mono
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.55rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 0;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.panel--field .btn:hover,
.hero .btn:hover { background: var(--moss); color: var(--field-top); border-color: var(--moss); }

.btn--solid {
  padding: 1rem 1.75rem;
  border: 1px solid currentColor;
  border-bottom-width: 1px;
  background: transparent;
}
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--field-top); }

.btn--sm { padding: 0.8rem 1.3rem; letter-spacing: 0.14em; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.arrow-link:hover { color: var(--accent); border-color: var(--accent); }
.arrow-link svg { transition: transform 0.4s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   06 · HEADER — logo left, CTA + burger right, full-screen overlay menu
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--bone);                 /* every page opens on a dark field */
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
.header.is-past-field { color: var(--forest); }
.header.is-past-field.is-stuck {
  background: color-mix(in srgb, var(--oat) 92%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .header.is-past-field.is-stuck { background: var(--oat); }
}
body.is-nav-open .header,
body.is-nav-open .header.is-past-field { color: var(--bone); background: transparent; border-bottom-color: transparent; }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); width: 100%;
}

.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; position: relative; z-index: 260; }
.wordmark__mark { width: 30px; height: 30px; flex: none; }
.wordmark__node { fill: var(--moss); }
.header.is-past-field .wordmark__node { fill: var(--fern); }
.wordmark__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.035em;
  line-height: 1;
}
.wordmark__text span { color: var(--ink-45); font-weight: 400; }

.header__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); position: relative; z-index: 260; }
.header__cta { display: none; }
@media (min-width: 760px) { .header__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 6px; width: 34px; height: 34px;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
body.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Overlay menu */
.nav {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) var(--shell) 3rem;
  background: linear-gradient(180deg, var(--field-top) 0%, var(--field-mid) 100%);
  color: var(--bone);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--ease);
  overflow-y: auto;
}
body.is-nav-open .nav { clip-path: inset(0 0 0 0); }
body.is-nav-open { overflow: hidden; }
body.is-nav-open .header { color: var(--bone); }

.nav__list { display: grid; gap: 0; max-width: 1400px; margin-inline: auto; width: 100%; }
.nav__link {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.6vw, 4.25rem);
  letter-spacing: -0.035em;
  line-height: 1.16;
  padding-block: clamp(0.5rem, 1.4vw, 1rem);
  border-bottom: 1px solid rgba(234, 231, 218, 0.14);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.4s var(--ease);
}
body.is-nav-open .nav__link {
  opacity: 1; transform: none;
  transition-delay: calc(0.07s * var(--i, 0) + 0.2s);
}
.nav__link:hover { color: var(--moss); }
.nav__link .idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--moss);
  flex: none;
}
.nav__foot {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: #8E9A86;
  max-width: 1400px; margin-inline: auto; width: 100%;
  opacity: 0; transition: opacity 0.6s var(--ease) 0.55s;
}
body.is-nav-open .nav__foot { opacity: 1; }

main { display: block; }

/* --------------------------------------------------------------------------
   07 · THE FIELD HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--bone);
  --ink: var(--bone);
  --ink-70: #C2CAB8;
  --ink-45: #A3AE9A;
  --rule: rgba(234, 231, 218, 0.2);
  --accent: var(--moss);
}
.field-bg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scrim — the motif is bright at the centre and the viewBox slices hard on
   narrow screens, so copy gets a guaranteed floor of contrast beneath it. */
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(12, 26, 17, 0.88) 0%,
    rgba(12, 26, 17, 0.55) 38%,
    rgba(12, 26, 17, 0.10) 72%,
    rgba(12, 26, 17, 0) 100%
  );
}
.hero__inner, .page-hero__inner { z-index: 1; }

.hero__inner { position: relative; padding-bottom: clamp(3.5rem, 8vw, 7rem); padding-top: calc(var(--header-h) + 2rem); }
.hero__copy { max-width: 20ch; }
.hero .display { margin-top: 1.5rem; }
.hero__lead { margin-top: 1.75rem; max-width: 54ch; color: var(--ink-70); }
.hero__actions { margin-top: clamp(2rem, 3.5vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.hero__meta {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex; flex-wrap: wrap; gap: 1rem 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45);
}

/* Inner page hero — shorter field */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--bone);
  --ink: var(--bone);
  --ink-70: #C2CAB8;
  --ink-45: #A3AE9A;
  --rule: rgba(234, 231, 218, 0.2);
  --accent: var(--moss);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.page-hero__inner { position: relative; }
.page-hero .display, .page-hero .h1 { margin-top: 1.4rem; }
.page-hero__lead { margin-top: 1.5rem; color: var(--ink-70); max-width: 54ch; }

/* --------------------------------------------------------------------------
   08 · MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--rule);
  padding-block: 1.2rem;
  overflow: hidden; display: flex; user-select: none;
}
.marquee__track {
  display: flex; flex: none; gap: 3rem; padding-right: 3rem;
  animation: marquee 46s linear infinite; will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-45); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3rem;
}
.marquee__item::after { content: ""; width: 5px; height: 5px; background: var(--accent); flex: none; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- Logo strip: client marks travelling right to left ------------------
   The supplied set mixes white, black and full-colour marks, so each gets
   the treatment it needs rather than one blanket filter — a blanket
   brightness/invert would erase the white letterform inside a coloured
   mark. Opacity is unified so the strip still reads as one family. */
.marquee--logos { padding-block: clamp(1.6rem, 3vw, 2.4rem); border-block-width: 1px 0; }
.marquee--logos .marquee__track {
  gap: clamp(3.5rem, 7vw, 7rem);
  padding-right: clamp(3.5rem, 7vw, 7rem);
  animation-duration: 46s;
  align-items: center;
}
.marquee__logo { flex: none; display: flex; align-items: center; }
.marquee__logo img {
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.4s var(--ease);
}
.marquee--logos:hover .marquee__logo img { opacity: 0.95; }

/* shape: square marks carry more height than long wordmarks, and a stacked
   lockup needs more again or its wordmark becomes unreadable */
.marquee__logo--mark img    { height: clamp(26px, 2.9vw, 34px); }
.marquee__logo--wide img    { height: clamp(19px, 2.1vw, 26px); }
.marquee__logo--stacked img { height: clamp(38px, 4.2vw, 50px); }

/* colour: only what each mark actually needs */
.marquee__logo--light img { }                                  /* already white */
.marquee__logo--dark  img { filter: brightness(0) invert(1); }  /* black -> white */
.marquee__logo--brand img { filter: saturate(0.9); opacity: 0.88; }

/* --------------------------------------------------------------------------
   09 · INTRO STATEMENT
   -------------------------------------------------------------------------- */
.intro__label { grid-column: 1 / span 3; }
.intro__body  { grid-column: 5 / span 7; }
.intro__statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.intro__after { margin-top: 2.25rem; max-width: 56ch; color: var(--ink-70); }
.intro__after > * + * { margin-top: 1.05em; }
@media (max-width: 899px) {
  .intro__label { grid-column: 1 / -1; margin-bottom: 1.75rem; }
  .intro__body  { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10 · STATS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 1.8vw, 1.75rem); border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__figure {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.7rem);
  line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.04em;
}
.stat__suffix { color: var(--accent); }
/* A bare "+" rides at full size beside the numeral; a worded suffix
   ("+ agents") has to drop back or it competes with the figure itself. */
.stat__suffix--word { font-size: 0.34em; letter-spacing: 0.03em; vertical-align: 0.34em; }
.stat__label {
  margin-top: 1rem; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); line-height: 1.6;
}
@media (max-width: 899px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   11 · SPLIT
   -------------------------------------------------------------------------- */
.split { align-items: center; row-gap: clamp(2rem, 4vw, 3rem); }
.split__media { grid-column: 1 / span 7; }
.split__body  { grid-column: 9 / span 4; }
.split--reverse .split__media { grid-column: 6 / span 7; grid-row: 1; }
.split--reverse .split__body  { grid-column: 1 / span 4; grid-row: 1; }
.split__body > * + * { margin-top: 1.25rem; }
@media (max-width: 1023px) {
  .split__media, .split__body,
  .split--reverse .split__media, .split--reverse .split__body { grid-column: 1 / -1; grid-row: auto; }
}

/* --------------------------------------------------------------------------
   12 · SERVICE ROWS
   -------------------------------------------------------------------------- */
.service {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
  border-top: 1px solid var(--rule);
}
.service:last-child { border-bottom: 1px solid var(--rule); }
.service__idx { grid-column: 1 / span 1; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--ink-45); padding-top: 0.45rem; }
.service__head { grid-column: 2 / span 4; }
.service__body { grid-column: 7 / span 4; color: var(--ink); }
.service__list { grid-column: 11 / span 2; }
.service__body > * + * { margin-top: 1rem; }
.service__title { transition: color 0.4s var(--ease); }
.service:hover .service__title { color: var(--accent); }
.service__tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-45); border: 1px solid var(--rule); padding: 0.35rem 0.65rem;
}
@media (max-width: 1023px) {
  .service__idx  { grid-column: 1 / -1; padding-top: 0; }
  .service__head { grid-column: 1 / -1; margin-top: 0.75rem; }
  .service__body { grid-column: 1 / -1; margin-top: 1rem; }
  .service__list { grid-column: 1 / -1; margin-top: 1.25rem; }
}

.ticks { display: grid; gap: 0.65rem; }
.ticks li { font-size: var(--fs-small); color: var(--ink-70); padding-left: 1.2rem; position: relative; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1px; background: var(--accent); }

/* --------------------------------------------------------------------------
   13 · PROCESS
   -------------------------------------------------------------------------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step { padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 1.8vw, 1.75rem) 0 0; border-top: 1px solid var(--rule); position: relative; }
.step + .step { padding-left: clamp(1rem, 1.8vw, 1.75rem); }
.step::before { content: ""; position: absolute; top: -3px; left: 0; width: 6px; height: 6px; background: var(--accent); }
.step__idx { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--ink-45); }
.step__title { margin-top: 1rem; }
.step__copy { margin-top: 0.8rem; font-size: var(--fs-small); color: var(--ink-70); }
@media (max-width: 899px) {
  .process { grid-template-columns: 1fr; }
  .step, .step + .step { padding-left: 0; padding-right: 0; padding-bottom: 1.75rem; }
}

/* --------------------------------------------------------------------------
   14 · CARDS
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 719px)  { .cards, .cards--2 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink); padding-top: 1.5rem; min-height: 100%;
  transition: border-color 0.4s var(--ease);
}
.card:hover { border-top-color: var(--accent); }
.card__eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); }
.card__title { margin-top: 1.2rem; }
.card__copy { margin-top: 0.9rem; color: var(--ink-70); font-size: var(--fs-small); }
.card__figure {
  margin-top: 1.6rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 3.1vw, 2.6rem); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.card__figure span { color: var(--accent); }
/* The figure arrow is drawn rather than set, so its weight and colour match
   the rule system regardless of which typeface is in use. Sized in em so it
   tracks the figure. */
.fig-arrow { display: inline-block; width: 0.78em; height: 0.4em; color: var(--accent); }
.card__foot { margin-top: auto; padding-top: 1.9rem; }

/* Case rows */
.case-row {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  padding-block: clamp(2rem, 3.6vw, 3rem); border-top: 1px solid var(--rule); align-items: start;
}
.case-row:last-of-type { border-bottom: 1px solid var(--rule); }
.case-row__media { grid-column: 1 / span 5; }
.case-row__meta  { grid-column: 7 / span 2; }
.case-row__body  { grid-column: 9 / span 4; }
.case-row__body > * + * { margin-top: 1rem; }
@media (max-width: 1023px) {
  .case-row__media { grid-column: 1 / -1; }
  .case-row__meta  { grid-column: 1 / -1; margin-top: 1.5rem; }
  .case-row__body  { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   15 · ILLUSTRATION FRAME + CALLOUT CHIPS
   -------------------------------------------------------------------------- */
.frame { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.25rem, 2.4vw, 2rem); position: relative; }
.frame--plain { background: transparent; border: 0; padding: 0; }
.frame__cap {
  position: absolute; top: 0.85rem; right: 1rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-45);
}
.frame--scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.frame--scroll .diagram { min-width: 680px; }
@media (max-width: 900px) {
  .frame--scroll { overflow-x: visible; }
  .frame--scroll .diagram { min-width: 0; }
  .diagram text { font-size: 17px; letter-spacing: 0.04em; }
  .diagram .t-strong { font-size: 18px; }
}

.diagram { width: 100%; height: auto; display: block; }
.diagram .flow   { fill: none; stroke: var(--ink-45); stroke-width: 1.25; }
.diagram .accent { stroke: var(--accent); }
.diagram .hair   { fill: none; stroke: var(--rule-ink); stroke-width: 1; }
.diagram .dash   { fill: none; stroke: var(--rule-ink); stroke-width: 1; stroke-dasharray: 2 5; }
.diagram .box    { fill: none; stroke: var(--rule-ink); stroke-width: 1; }
.diagram .fillbox { fill: var(--canvas); stroke: var(--rule-ink); stroke-width: 1; }
.diagram .chip   { fill: var(--moss); }
.diagram .node   { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.diagram .node--accent { fill: var(--accent); }
/* Authored in viewBox units — the record renders at ~0.93 scale, so 15px
   here lands at ~14px on screen. */
.diagram text { font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.08em; fill: var(--ink-45); }
.diagram .t-strong { fill: var(--ink); font-size: 17px; }
.diagram .t-accent { fill: var(--accent); }
.diagram .t-chip   { fill: var(--field-top); font-size: 16px; letter-spacing: 0.04em; }

/* --- The isometric stack ------------------------------------------------
   Translucent planes in axonometric projection; a solid bar on each is what
   that layer is responsible for, with a leader line out to a mono label.
   The picture carries the explanation, so the copy doesn't have to. */
.iso { max-width: 780px; margin-inline: auto; overflow: visible; }
.iso-plane { stroke: rgba(29, 42, 27, 0.18); stroke-width: 1; }
.iso-plane--1 { fill: rgba(198, 222, 147, 0.82); }
.iso-plane--2 { fill: rgba(150, 185, 110, 0.70); }
.iso-plane--3 { fill: rgba(105, 145, 80, 0.56); }
.iso-plane--4 { fill: rgba(60, 100, 60, 0.46); }
.iso-marker { fill: rgba(29, 42, 27, 0.72); }
.iso-marker--accent { fill: var(--fern); }
.iso-lead { fill: none; stroke: rgba(29, 42, 27, 0.55); stroke-width: 1; }
.iso-lead--accent { stroke: var(--fern); }
/* The iso renders at ~0.85 scale, so these authored sizes land at roughly
   18px and 15px on screen. They were 8.3px before — unreadable. */
text.iso-label {
  font-family: var(--font-mono); font-size: 21px; font-weight: 400;
  letter-spacing: 0.12em; fill: var(--forest);
}
text.iso-label--accent { fill: var(--fern); }
text.iso-sub {
  font-family: var(--font-mono); font-size: 18px;
  letter-spacing: 0.06em; fill: rgba(29, 42, 27, 0.55);
}
.panel--field .iso-plane { stroke: rgba(234, 231, 218, 0.22); }
.panel--field .iso-marker { fill: rgba(234, 231, 218, 0.85); }
.panel--field .iso-lead { stroke: rgba(234, 231, 218, 0.5); }
.panel--field text.iso-label { fill: var(--bone); }
.panel--field text.iso-sub { fill: rgba(234, 231, 218, 0.55); }
.panel--field text.iso-label--accent,
.panel--field .iso-marker--accent { fill: var(--moss); }
.panel--field .iso-lead--accent { stroke: var(--moss); }

@media (max-width: 700px) {
  text.iso-label { font-size: 26px; }     /* narrower render = smaller scale again */
  text.iso-sub { font-size: 22px; }
}

/* --- Callout chips: offset shadow block, like a print registration ------ */
.chip-shadow { fill: rgba(29, 42, 27, 0.22); }

/* --- The record: a lead being filled in, field by field ----------------- */
.rec-card  { fill: var(--canvas); stroke: var(--rule-ink); stroke-width: 1; }
.rec-line  { fill: rgba(29, 42, 27, 0.10); }
.rec-hit   { fill: var(--fern); opacity: 0; }
.rec-scan  { fill: var(--fern); opacity: 0.55; }   /* a sweep, not a divider — moss is too pale on oat */
.panel--field .rec-scan { fill: var(--moss); }
.lead-line { fill: none; stroke: rgba(29, 42, 27, 0.45); stroke-width: 1; }
.lead-line.accent { stroke: var(--fern); }
.panel--field .rec-line { fill: rgba(234, 231, 218, 0.12); }
.panel--field .lead-line { stroke: rgba(234, 231, 218, 0.45); }

/* Wide diagrams keep their horizontal scroll on small screens — squeezing
   them to 375px would make the labels unreadable. */
@media (max-width: 900px) {
  .frame--wide { overflow-x: auto; }
  .frame--wide .diagram { min-width: 820px; }
}

/* Compact service row — title and one line, nothing else */
.service--tight { padding-block: clamp(1.35rem, 2.3vw, 1.95rem); }
.service--tight .service__body { grid-column: 7 / span 6; }
@media (max-width: 1023px) { .service--tight .service__body { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   16 · QUOTE
   -------------------------------------------------------------------------- */
.quote { grid-column: 2 / span 9; }
.quote__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.1vw, 2.5rem); line-height: 1.2;
  letter-spacing: -0.035em; margin-left: -0.42em;   /* hanging quote, not text-indent */
}
.quote__attr {
  margin-top: 2.25rem; display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45);
}
.quote__attr::before { content: ""; width: 38px; height: 1px; background: var(--accent); flex: none; }
@media (max-width: 899px) { .quote { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   17 · TEAM
   -------------------------------------------------------------------------- */
/* Two people, so the grid is two columns and capped — three-across rules
   would stretch two portraits to an awkward width on a wide screen. */
/* Left-aligned to the shell like every other block. It was margin-inline:
   auto, which centred it under a left-aligned heading. */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 720px; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 559px) { .team { grid-template-columns: 1fr; max-width: 380px; } }
.member__portrait {
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: block;
  width: 100%;
  object-fit: cover;
  /* The portraits are already black and white; this only holds the line if a
     future one is supplied in colour. */
  filter: grayscale(1);
}
.member__name { margin-top: 1.2rem; font-weight: 400; }
.member__role { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--ink-70); }
.member__creds { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); }
.member__link {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-ink);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.member__link:hover, .member__link:focus-visible { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   18 · POST ROWS
   -------------------------------------------------------------------------- */
.post-row {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  padding-block: clamp(1.6rem, 2.8vw, 2.2rem); border-top: 1px solid var(--rule); align-items: baseline;
}
.post-row:last-of-type { border-bottom: 1px solid var(--rule); }
.post-row__date { grid-column: 1 / span 2; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--ink-45); text-transform: uppercase; }
.post-row__title { grid-column: 3 / span 6; transition: color 0.4s var(--ease); }
.post-row__cat  { grid-column: 10 / span 2; }
.post-row__go   { grid-column: 12 / span 1; justify-self: end; color: var(--ink-45); transition: transform 0.4s var(--ease), color 0.4s var(--ease); }
.post-row:hover .post-row__title { color: var(--accent); }
.post-row:hover .post-row__go { color: var(--accent); transform: translateX(4px); }
@media (max-width: 899px) {
  .post-row__date { grid-column: 1 / -1; }
  .post-row__title { grid-column: 1 / -1; margin-top: 0.6rem; }
  .post-row__cat { grid-column: 1 / -1; margin-top: 0.9rem; }
  .post-row__go { display: none; }
}

/* --------------------------------------------------------------------------
   19 · PROSE
   -------------------------------------------------------------------------- */
.prose { max-width: 62ch; }
.prose > * + * { margin-top: 1.35em; }
.prose p { color: var(--ink); }
.prose h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.14;
  letter-spacing: -0.035em; margin-top: 2.6em; color: var(--ink);
}
.prose h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; margin-top: 2em; color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: 0.65rem; padding-left: 0; }
.prose ul li { padding-left: 1.2rem; position: relative; color: var(--ink-70); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 1px; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { padding-left: 2.2rem; position: relative; color: var(--ink-70); counter-increment: n; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0.15em;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--accent);
}
.prose blockquote {
  border-left: 2px solid var(--accent); padding-left: 1.6rem;
  font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.26;
  letter-spacing: -0.035em; color: var(--ink);
}
.prose a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.prose a:hover { color: var(--accent); }
.prose hr { margin-block: 2.5em; height: 1px; background: var(--rule); border: 0; }

/* --------------------------------------------------------------------------
   20 · FORMS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.6rem; }
.field label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); letter-spacing: -0.028em;
  color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: 0.75rem 0; border-radius: 0; width: 100%;
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field select { appearance: none; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.9rem var(--gap); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 719px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-small); color: var(--ink-45); }

/* --------------------------------------------------------------------------
   21 · CTA
   -------------------------------------------------------------------------- */
.cta__head { grid-column: 1 / span 7; }
@media (max-width: 1023px) {
  .cta__head, .cta__side { grid-column: 1 / -1; }
  .cta__side { margin-top: 2rem; }
}

/* --------------------------------------------------------------------------
   22 · FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: linear-gradient(180deg, var(--field-mid) 0%, var(--field-top) 100%);
  color: var(--bone);
  --ink: var(--bone);
  --ink-70: #B9C2AF;
  --ink-45: #8E9A86;
  --rule: rgba(234, 231, 218, 0.14);
  --accent: var(--moss);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}
.footer a { color: var(--ink-70); transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--moss); }
.footer__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.footer__brand { grid-column: 1 / span 4; }
/* Two columns since Capabilities came out, placed to run out to the right
   grid edge. NB the old rule here was `.footer__col:nth-of-type(1)`, which
   never matched anything: nth-of-type counts by ELEMENT type, and the first
   div in .footer__top is .footer__brand — so the columns were silently being
   auto-placed all along. Keyed off the end of the list instead. */
.footer__col { grid-column: span 3; }
.footer__col:nth-last-child(2) { grid-column: 7 / span 3; }
.footer__col:last-child { grid-column: 10 / span 3; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-45); }
.footer__col ul { margin-top: 1.2rem; display: grid; gap: 0.7rem; }
.footer__col a { font-size: var(--fs-small); }
.footer__blurb { margin-top: 1.35rem; font-size: var(--fs-small); color: var(--ink-70); max-width: 34ch; }
@media (max-width: 899px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col,
  .footer__col:nth-last-child(2),
  .footer__col:last-child { grid-column: span 6; margin-top: 2.25rem; }
}

.footer__wordmark { margin-top: clamp(3rem, 6vw, 5rem); display: block; width: 100%; height: auto; user-select: none; }
.footer__wordmark text { font-family: var(--font-display); font-weight: 400; font-size: 112px; fill: rgba(234, 231, 218, 0.13); }

/* Credentials band — small, below the fold, above the legal line.
   Deliberately quieter than the client logos: certificates are supporting
   evidence, not the headline claim. */
.label--quiet { color: var(--ink-45); flex: none; }

.footer__bottom {
  margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--rule);
  padding-block: 1.6rem 2.25rem; display: flex; flex-wrap: wrap;
  gap: 0.75rem 2rem; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-45);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }

/* --------------------------------------------------------------------------
   23 · MOTION
   -------------------------------------------------------------------------- */
.word-mask {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.18em; margin-bottom: -0.18em;
  text-indent: 0;   /* inherited indent would shift the word into the clip */
}
.word { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal], .js-motion .word { opacity: 1 !important; transform: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   24 · PLACEHOLDER MARKER — delete once real content lands
   -------------------------------------------------------------------------- */
.ph > .ph__tag {
  display: block; width: fit-content; margin-bottom: 0.9rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); padding: 0.25rem 0.5rem;
}

/* --------------------------------------------------------------------------
   25 · UTILITIES
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: 1.25rem; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.5rem, 4.5vw, 4.25rem); }
.col-full { grid-column: 1 / -1; }
.col-half { grid-column: span 6; }
.col-7 { grid-column: 1 / span 7; }
.col-5-end { grid-column: 9 / span 4; }
.col-4 { grid-column: 1 / span 4; }
.col-8-end { grid-column: 6 / span 7; }
@media (max-width: 899px) { .col-half, .col-7, .col-5-end { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .col-4, .col-8-end { grid-column: 1 / -1; } }
.text-accent { color: var(--accent); }
.flex-between { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; }

/* The stack row: a short text block beside a tall figure. On the 12-column
   grid the copy stranded itself at the top-left while the figure sat low and
   right, leaving a void between them. Two proportional columns, centred on
   each other, closes it. */
.stack-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 899px) {
  .stack-row { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   26 · PINNED SEQUENCE
   One artefact, five stages. The frame holds while the story advances, so the
   whole argument lands regardless of scroll speed. Below the breakpoint (and
   under reduced motion) it degrades to a plain stacked figure.
   -------------------------------------------------------------------------- */
.pin { position: relative; padding-block: 0; }
/* Full-viewport stage: while the section is pinned the frame should fill the
   screen, not float at the top of a mostly-empty one. Top padding clears the
   sticky header; the content is centred in what's left. */
.pin__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  align-content: center;
  min-height: 100vh;
  padding-top: var(--header-h);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
.pin__aside { position: relative; }
.pin__figure { position: relative; }

.steps { position: relative; margin-top: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: 0; }
.step-row {
  padding-block: 0.9rem;
  border-top: 1px solid var(--rule);
  opacity: 0.32;
  transition: opacity 0.45s var(--ease);
}
.step-row:last-child { border-bottom: 1px solid var(--rule); }
.step-row.is-on { opacity: 1; }
.step-row__t { display: block; font-weight: 400; letter-spacing: -0.02em; }
.step-row__d { display: block; font-size: var(--fs-small); color: var(--ink-70); margin-top: 0.2rem; }

/* The pinned figure is the whole point of the stage — it scales to fit its
   column rather than forcing a horizontal scrollbar the reader won't find. */
.pin__figure .frame--scroll { overflow: visible; }
.pin__figure .diagram,
.pin__figure .frame--wide .diagram { min-width: 0; width: 100%; height: auto; }

/* progress rail down the left of the stepper */
.steps__rail { position: absolute; left: -1.5rem; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.steps__rail i { position: absolute; left: 0; top: 0; width: 1px; background: var(--accent); height: 0; }

@media (max-width: 1023px) {
  .pin { padding-block: var(--section-m); }
  .pin__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .steps__rail { display: none; }
}