/* ==========================================================================
   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 family throughout: Geist for
   text and headings, Geist Mono for labels, buttons and small caps lines.
   Both are self-hosted variable woff2 files in assets/fonts (weights 100 to 900).
   House laws hold: warm neutrals, no pure black/white, no rounded cards,
   no drop shadows, no glassmorphism, no icon-soup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · TYPEFACE
   Geist and Geist Mono (SIL Open Font License 1.1, by Vercel), self-hosted,
   no external request. Variable fonts, so every weight is real, not faked.
   Weights are set through the --fw-* tokens below.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  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:     #2E372B;
  --ink-45:     #434C3F;
  --rule:       #D2CBB6;
  --rule-ink:   #BDB49C;
  --accent:     var(--fern);

  /* Type */
  /* Geist for display and text, Geist Mono for labels. */
  --font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Weights (real weights from the variable fonts) */
  --fw-text:  500;   /* body copy, links, form fields */
  --fw-label: 500;   /* mono labels, buttons */
  --fw-head:  600;   /* headings, figures, quotes */
  --fw-hero:  700;   /* the page's main heading */

  --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: var(--fw-text);
  line-height: 1.5;
  letter-spacing: -0.011em;
  -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: var(--fw-head);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.04em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-head); line-height: 1.15; letter-spacing: -0.03em; }
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.24;
  font-family: var(--font-sans);
  font-weight: var(--fw-text);
  letter-spacing: -0.02em;
}

/* 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: var(--fw-hero); }

/* 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: var(--fw-text);
  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: var(--fw-label);
  letter-spacing: 0.07em;
  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: var(--fw-label);
  letter-spacing: 0.07em;
  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.07em; }

/* Booking buttons: a solid moss block so "Book a call" stands out on light and dark panels. */
a.btn[href*="calendly.com"] {
  padding: 0.95rem 1.5rem;
  background: var(--moss);
  color: var(--field-top);
  border: 1px solid var(--moss);
}
a.btn[href*="calendly.com"]:hover { background: var(--fern); border-color: var(--fern); color: var(--oat); }
a.btn--sm[href*="calendly.com"] { padding: 0.7rem 1.15rem; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  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: var(--fw-text);
  font-size: 1.35rem;
  letter-spacing: -0.035em;
  line-height: 1;
}
.wordmark__text span { color: var(--ink-45); font-weight: var(--fw-text); }

.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; } }

/* 34px visual, 44px touch target. Below 760px the header CTA is hidden, so
   this is the only navigation control on a phone; padding plus a negative
   margin grows the hit area without moving anything in the layout. */
.nav-toggle {
  padding: 5px;
  margin: -5px;
  box-sizing: content-box;
}
.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: var(--fw-head);
  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.09em;
  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.08em; 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.08em; 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.11em; 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: var(--fw-head);
  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: var(--fw-head);
  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.07em; 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.08em; 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.05em; 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.08em; 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.08em; 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: var(--fw-head);
  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.09em; 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.02em; }
  .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.04em; 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.02em; }

/* --- 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: var(--fw-label);
  letter-spacing: 0.06em; fill: var(--forest);
}
text.iso-label--accent { fill: var(--fern); }
text.iso-sub {
  font-family: var(--font-mono); font-size: 18px;
  letter-spacing: 0.03em; 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: var(--fw-head);
  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.08em; 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: var(--fw-text); }
.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.06em; 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.06em;
  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.08em; 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: var(--fw-head);
  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: var(--fw-head); font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; margin-top: 2em; color: var(--ink); }
.prose h3 + p { margin-top: 0.55em; }
.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.06em; color: var(--accent);
}
.prose blockquote {
  border-left: 2px solid var(--accent); padding-left: 1.6rem;
  font-family: var(--font-display); font-weight: var(--fw-head); 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.08em; text-transform: uppercase; color: var(--ink-45); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-weight: var(--fw-text); font-size: var(--fs-body); letter-spacing: -0.011em;
  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:nth-last-child(3) { grid-column: 5 / span 2; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: 0.09em; 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(3),
  .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: var(--fw-head); 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.07em;
  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.1em;
  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: var(--fw-text); 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; }
}


/* ==========================================================================
   Cursor glow
   The glow IS the cursor, everywhere on the site. The native pointer is
   hidden on every element, links and buttons included.

   It has to change colour to work. White is invisible on the oat sections,
   and a hidden cursor you cannot see is a broken page, so the glow inverts
   to forest over light backgrounds and returns to white over the dark field
   sections. The hot centre carries the precision either way.

   Both fallbacks restore the native cursor rather than leaving none: a
   touch device has no pointer to draw, and anyone who has asked for reduced
   motion should not be chasing an eased light around the screen.
   ========================================================================== */
*, *::before, *::after { cursor: none !important; }

.ray {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.ray.is-live { opacity: 1; }
.ray__glow {
  position: absolute; left: 0; top: 0; display: block;
  width: 330px; height: 330px; margin: -165px 0 0 -165px;
  background: radial-gradient(circle closest-side,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.40) 5%,
    rgba(255,255,255,.20) 16%, rgba(255,255,255,.115) 34%,
    rgba(255,255,255,.045) 60%, rgba(255,255,255,0) 100%);
  transform: translate3d(var(--gx, 50vw), var(--gy, 50vh), 0);
  will-change: transform;
}
/* Over oat: invert, or the cursor disappears. */
.ray.on-light .ray__glow {
  background: radial-gradient(circle closest-side,
    rgba(29,42,27,.62) 0%, rgba(29,42,27,.34) 5%,
    rgba(29,42,27,.17) 16%, rgba(29,42,27,.10) 34%,
    rgba(29,42,27,.04) 60%, rgba(29,42,27,0) 100%);
}
@media (hover: none) {
  *, *::before, *::after { cursor: auto !important; }
  a, button, [role="button"], summary { cursor: pointer !important; }
  .ray { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { cursor: auto !important; }
  a, button, [role="button"], summary { cursor: pointer !important; }
  .ray { display: none; }
}

/* --------------------------------------------------------------------------
   Email capture forms (assets/js/lead.js posts them to /api/lead)
   -------------------------------------------------------------------------- */
.lead-form { position: relative; margin-top: clamp(2.5rem, 4.5vw, 3.5rem); max-width: 36rem; }
.lead-form--wide { max-width: 48rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.lead-form__title { font-weight: var(--fw-head); font-size: var(--fs-h4); letter-spacing: -0.02em; line-height: 1.25; }
.mt-xs { margin-top: 0.4rem; }
.lead-form__row { display: flex; gap: 1rem 1.25rem; align-items: flex-end; margin-top: 1.25rem; }
.lead-form__row .field { flex: 1; min-width: 0; }
.btn--lead {
  padding: 0.95rem 1.4rem; background: var(--moss); color: var(--field-top);
  border: 1px solid var(--moss); white-space: nowrap; cursor: pointer;
}
.btn--lead:hover, .panel--field .btn--lead:hover { background: var(--fern); border-color: var(--fern); color: var(--oat); }
.btn--lead:disabled { opacity: 0.65; cursor: default; }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form .form-note { margin-top: 0.8rem; }
.lead-form .form-note a { color: inherit; text-decoration: underline; }
.lead-form [data-lead-status] { color: var(--ink); }
.lead-form [data-lead-status]:empty { display: none; }
@media (max-width: 599px) { .lead-form__row { flex-direction: column; align-items: stretch; } }
.lead-form--hero { margin-top: clamp(1.75rem, 3vw, 2.25rem); max-width: 30rem; }
.lead-form--hero input::placeholder { color: var(--ink-45); opacity: 1; }