/* ============================================================================
   Drinkwell — component layer
   ----------------------------------------------------------------------------
   Rules for anyone (human or Claude) editing this file:
     1. No raw hex, px font size, or radius. Use a token from tokens.css.
     2. No box-shadow. Depth comes from --bg-alt fills and hairlines.
     3. No gradient on text, ever. That single effect is most of what reads
        as "AI made this".
     4. Sections are separated by air, not by rules or coloured bands.
     5. If a component needs a new colour, add a token first.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout primitives --------------------------------------------------- */
.wrap  { width: 100%; max-width: var(--w-body); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--w-wide); }
.wrap--text { max-width: var(--w-text); }
.section    { padding-block: var(--section-y); }
.section--sm{ padding-block: var(--section-y-sm); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--ink-inverse); }

/* --- Type -----------------------------------------------------------------
   Semantic classes, not utility soup. A section head is always .headline. */
.eyebrow {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.section--dark .eyebrow { color: var(--ink-inverse-2); }

.display {
  font-size: var(--t-display);
  font-weight: var(--w-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.headline {
  font-size: var(--t-headline);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  letter-spacing: var(--track-headline);
  text-wrap: balance;
}
.title {
  font-size: var(--t-title);
  font-weight: var(--w-semi);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--track-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.section--dark .lead { color: var(--ink-inverse-2); }
.caption { font-size: var(--t-caption); color: var(--ink-3); }

/* --- Links and buttons ----------------------------------------------------
   Apple uses a chevron text link far more than a button. Buttons are reserved
   for the one action that matters on the page. */
.link {
  color: var(--accent);
  font-size: var(--t-lead);
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}
.link:hover { text-decoration: underline; text-underline-offset: .2em; }
.link::after {
  content: "\203A";                 /* single right chevron */
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}
.link:hover::after { transform: translateX(2px); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-body);
  padding: .7em 1.4em;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); }

/* --- Nav ------------------------------------------------------------------
   Fixed to the top. Desktop: a row of groups, each the chapter's number and
   name with its sub-sections in a dropdown (hover, focus or the caret).
   Phone: a hamburger on the left opens the same map as a drawer from the
   left. The scroll-spy lights the group and sub-link under the bar. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--hairline-soft);
}
body { padding-top: var(--nav-h); }
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
.nav__in {
  max-width: var(--w-wide); margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
}
.nav__brand { display: flex; align-items: center; margin-right: auto; }
.nav__logo  { display: block; height: 22px; width: auto; }
@media (max-width: 420px) { .nav__logo { height: 20px; } }
.nav__title { display: none; }
.nav__links { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.4rem); }
.nav__group { position: relative; display: flex; align-items: center; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: .4em; padding-block: .35em; font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.nav__link:hover { color: var(--ink); }
.nav__n { font-size: .8em; font-weight: var(--w-semi); letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav__group.is-current .nav__link { color: var(--ink); }
.nav__group.is-current .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent-bright); }
.nav__more { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-left: -2px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.nav__more::after { content: ""; position: absolute; left: 5px; top: 4px; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
.nav__subs {
  position: absolute; top: calc(100% + 8px); left: -12px; min-width: 15rem; margin: 0; padding: .5rem 0; list-style: none;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.nav__group:hover .nav__subs, .nav__group:focus-within .nav__subs, .nav__group.is-open .nav__subs { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__group.is-open .nav__more::after, .nav__group:hover .nav__more::after { transform: rotate(225deg); top: 7px; }
.nav__sub { display: block; padding: .45em 1rem; font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.nav__sub:hover { color: var(--ink); background: var(--bg-alt); }
.nav__sub.is-current { color: var(--accent); font-weight: var(--w-medium); }
.nav__cta { font-size: var(--t-caption); font-weight: var(--w-medium); background: var(--accent); color: #fff; padding: .45em 1em; border-radius: var(--r-pill); white-space: nowrap; }
.nav__cta:hover { background: var(--accent-hover); }
/* the hamburger: three lines that become a cross when the drawer is open */
.nav__menu { appearance: none; -webkit-appearance: none; display: none; width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.nav__menu[hidden] { display: none; }
.nav__burger, .nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav__burger { top: 19px; }
.nav__burger::before { left: 0; top: -6px; }
.nav__burger::after { left: 0; top: 6px; }
.nav.is-open .nav__burger { background: transparent; }
.nav.is-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }
/* the bar's backdrop-filter makes it the containing block for anything fixed
   inside it, so the drawer and scrim are positioned from the bar itself */
.nav__scrim { position: absolute; top: var(--nav-h); left: 0; right: 0; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); background: rgba(0, 0, 0, .3); }
.nav__scrim[hidden] { display: none; }
@media (max-width: 800px) {
  .nav__menu:not([hidden]) { display: block; }
  .nav__links {
    position: absolute; top: var(--nav-h); left: 0; width: min(20rem, 86vw); height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); z-index: 1;
    display: block; overflow-y: auto; padding: var(--stack-2) var(--gutter) var(--stack-4);
    background: var(--bg); border-right: 1px solid var(--hairline-soft);
    transform: translateX(-100%); transition: transform var(--dur) var(--ease-out);
  }
  .nav.is-open .nav__links { transform: none; }
  .nav__title { display: block; margin: var(--stack-1) 0 var(--stack-2); font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
  .nav__group { display: block; border-top: 1px solid var(--hairline-soft); padding: .4em 0; }
  .nav__link { font-size: var(--t-body); padding-block: .5em; color: var(--ink); }
  .nav__group.is-current .nav__link::after { display: none; }
  .nav__more { display: none; }
  .nav__subs { position: static; min-width: 0; padding: 0 0 .4em 1.6rem; border: 0; border-radius: 0; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav__sub { padding: .3em 0; font-size: var(--t-small); white-space: normal; }
  .nav__sub:hover { background: none; }
}
@media (prefers-reduced-motion: reduce) { .nav__links, .nav__subs, .nav__burger, .nav__burger::before, .nav__burger::after { transition: none; } }

/* --- Hero -----------------------------------------------------------------
   Centred, enormous, and then it gets out of the way. The photograph runs
   full-bleed underneath with no overlay -- the previous site put a blue wash
   over a portrait and lost both the face and the credibility. */
.hero { padding-block: clamp(4.5rem, 10vw, 8.5rem) 0; text-align: center; }
.hero__sub { margin: var(--stack-3) auto 0; max-width: 34rem; }
.hero__links { margin-top: var(--stack-3); display: flex; gap: var(--stack-4); justify-content: center; flex-wrap: wrap; }

/* --- Media lineup --------------------------------------------------------
   The three media, side by side at the foot of the horse section. This was
   once the top half of a two-row "band" in the solution section; the bottom
   half was the three deployment photographs, which the harness cards already
   carried, so the page showed each of them twice. The band is gone and this
   row moved down to the media it belongs to. Horizontal flow is a standing
   rule, not a layout preference -- do not stack these as columns.

   The media images are transparent WebP, so they composite straight onto the
   page. That is the preferred format for any product shot here: it removes the
   background-seam problem entirely. */
.lineup { text-align: center; margin-top: var(--stack-5); }
.lineup__label {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.lineup__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-3); margin-top: var(--stack-3); }
@media (max-width: 900px) { .lineup__row { grid-template-columns: repeat(2, 1fr); gap: var(--stack-4); } }
@media (max-width: 480px) { .lineup__row { grid-template-columns: 1fr; } }
.lineup__note { margin-top: var(--stack-3); text-wrap: pretty; }

/* No card, no fill -- the beads sit directly on the page. */
.med { display: flex; flex-direction: column; align-items: center; }
/* The three media were photographed at different distances, so left alone they
   render at three different sizes with no shared ground line and the row reads
   as an accident. A fixed-height box with object-fit:contain and bottom
   alignment normalises the footprint and sits all three beads on one baseline,
   which is what makes a product lineup read as a lineup. */
.med__img {
  width: 100%; max-width: 16rem;
  height: clamp(6.5rem, 11vw, 9.5rem);
  object-fit: contain; object-position: bottom;
}
.med figcaption { margin-top: var(--stack-2); display: flex; flex-direction: column; gap: 2px; }
.med__name { font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.med__role { font-size: var(--t-small); color: var(--c-horse); font-weight: var(--w-medium); }
.med__spec { font-size: var(--t-caption); color: var(--ink-3); }

/* --- Horse · Harness · Habit ----------------------------------------------
   Each part tints only its eyebrow. Tinting headlines or backgrounds as well
   would turn a restrained page into a colour-coded one. */
.eyebrow--part { color: var(--part, var(--ink-3)); }
.pt-habitat { --part: var(--c-habitat); }
.pt-horse   { --part: var(--c-horse); }
.pt-harness { --part: var(--c-harness); }
.pt-habit   { --part: var(--c-habit); }
.pt-hay     { --part: var(--c-hay); }

/* Five columns since 13 Sep 2026 (habitat joined the spine). The habit points
   further down are still four, so they get their own count. */
.points { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--stack-3); margin-top: var(--stack-5); }
.points--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .points { grid-template-columns: repeat(3, 1fr); row-gap: var(--stack-4); } .points--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .points, .points--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .points, .points--4 { grid-template-columns: 1fr; } }
.point { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.point__gear { display: block; width: 4.25rem; height: 4.25rem; margin-bottom: var(--stack-2); overflow: visible; }
.gear__glyph { fill: var(--part); }
.gear__glyph .stroke { fill: none; stroke: var(--part); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.point__value { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.point__label { margin-top: 2px; font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--part, var(--ink-3)); }
.point__note  { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }

/* --- Stages: build / neglect / runaway -------------------------------------
   The temptation here is arrows, a loop diagram, or red. All three would make
   the sector's failure mode look like our illustration of it. Three hairline
   columns in the same rhythm as .points, numbered and set in the page's own
   ink, state it as fact and let the reader supply the alarm. */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4); margin-top: var(--stack-5); }
@media (max-width: 760px) { .stages { grid-template-columns: 1fr; gap: var(--stack-3); } }
.stage { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.stage__step { font-size: var(--t-caption); letter-spacing: var(--track-caps); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stage__name { margin-top: var(--stack-1); font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.stage__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.stages__close { margin-top: var(--stack-5); max-width: var(--w-text); font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--track-title); }

/* --- The 3Ts --------------------------------------------------------------
   Tariffs, taxes and transfers are peers, not a ranking, so they get identical
   columns and no colour between them. Only the eyebrow above carries --c-hay. */
.tees { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4); margin-top: var(--stack-5); }
@media (max-width: 760px) { .tees { grid-template-columns: 1fr; gap: var(--stack-3); } }
/* Flex column with the note flexing so the __where rule lands on the same
   baseline in all three columns however ragged the copy above it is. */
.tee { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.tee__name  { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.tee__note  { flex: 1 1 auto; margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.tee__where { margin-top: var(--stack-2); padding-top: var(--stack-2); border-top: 1px solid var(--hairline-soft); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }
.tees__foot { margin-top: var(--stack-4); max-width: var(--w-text); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }

/* --- Ladder: one engine at four depths ---------------------------------------
   Rungs on the left in the same hairline rhythm as .entry; the five-gear
   engine on the right, sticky so it stays in view while the rungs scroll.
   Choosing a rung (js/gears.js) lights that rung's gears and spins them; the
   rest go hairline-grey and still. The lit gears inherit --part from
   pt-<key>, so the reader already met violet Habitat, blue Horse, rust
   Harness, gold Hay and teal Habit further up and needs no legend.

   Dimmed chips use opacity rather than a fifth grey token. They deliberately
   fail contrast, which is why .rung__parts carries the aria-label and the chips
   are decorative. */
.ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem); gap: var(--stack-5); align-items: start; margin-top: var(--stack-5); }
.rungs { min-width: 0; }
.rung {
  display: grid; grid-template-columns: 1fr; gap: var(--stack-2);
  align-items: start; padding-block: var(--stack-3);
  border-top: 1px solid var(--hairline);
  cursor: pointer; outline: none;
  transition: opacity var(--dur, .3s) var(--ease-out, ease);
}
.rung:last-child { border-bottom: 1px solid var(--hairline); }
.rung:focus-visible .rung__name { text-decoration: underline; text-underline-offset: .2em; }
.rungs.is-set .rung { opacity: .55; }
.rungs.is-set .rung.is-on { opacity: 1; }
.rung__buyer { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.rung__name  { margin-top: var(--stack-1); font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.rung.is-on .rung__name { color: var(--accent); }
.rung__note  { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); max-width: 36rem; text-wrap: pretty; }
.rung__parts { display: flex; flex-wrap: wrap; gap: var(--stack-1) var(--stack-2); align-items: baseline; }
.rung__part  { font-size: var(--t-caption); font-weight: var(--w-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--part, var(--ink-3)); }
.rung__part b { font-weight: var(--w-semi); }
.rung__part.is-off { color: var(--ink-3); opacity: .3; }
.rungs__foot { margin-top: var(--stack-4); max-width: var(--w-text); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }

/* The engine. Every gear is lit in the markup (the top rung), so with JS off
   or blocked the drawing is still true: all five turn at a site that works. */
.engine { position: sticky; top: calc(var(--nav-h, 64px) + var(--stack-3)); }
.engine__label { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.engine__rung { color: var(--accent); }
.engine__svg { display: block; width: 100%; height: auto; margin-top: var(--stack-2); }
.engine__caption { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }
.gear__teeth { fill: var(--part); transition: fill var(--dur, .3s) ease; }
.gear__hub { fill: var(--bg); }
.gear__letter { font-size: 22px; font-weight: var(--w-semi); fill: var(--part); font-family: inherit; }
.gear__name { font-size: 12px; font-weight: var(--w-semi); letter-spacing: .06em; text-transform: uppercase; fill: var(--part); font-family: inherit; }
.gear:not(.is-on) .gear__teeth { fill: var(--bg-alt); stroke: var(--hairline); stroke-width: 1.5; }
.gear:not(.is-on) .gear__hub { fill: var(--bg-alt); }
.gear:not(.is-on) .gear__letter { fill: var(--ink-3); opacity: .5; }
.gear:not(.is-on) .gear__name { fill: var(--ink-3); opacity: .5; }
.belt { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.lad__rail { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.lad__bar  { stroke: var(--hairline); stroke-width: 2.5; }
.lad__dot  { fill: var(--bg); stroke: var(--hairline); stroke-width: 1.5; transition: fill var(--dur, .3s) ease, stroke var(--dur, .3s) ease; }
.lad__step { font-size: 9px; font-weight: var(--w-semi); fill: var(--ink-3); font-family: inherit; }
.lad__name { font-size: 12px; font-weight: var(--w-medium); fill: var(--ink-3); font-family: inherit; }
.lad__rung.is-climbed .lad__bar { stroke: var(--ink); }
.lad__rung.is-climbed .lad__dot { fill: var(--ink); stroke: var(--ink); }
.lad__rung.is-climbed .lad__step { fill: var(--bg); }
.lad__rung.is-climbed .lad__name { fill: var(--ink); }
.lad__rung.is-on .lad__dot { fill: var(--accent); stroke: var(--accent); }
.lad__rung.is-on .lad__name { fill: var(--accent); font-weight: var(--w-semi); }
@media (prefers-reduced-motion: no-preference) {
  .gear.is-on .gear__wheel { animation: gear-turn 9s linear infinite; }
  .gear.is-on.rev .gear__wheel { animation-direction: reverse; }
}
@keyframes gear-turn { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr; gap: var(--stack-4); }
  .engine { position: static; order: -1; max-width: 34rem; }
}

/* --- Figures --------------------------------------------------------------
   Numbers on the page, not in boxes. The old site had four glowing bordered
   cards with blue numerals; that is the single most template-looking element
   a startup homepage can have. Here they are separated by hairlines only. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
/* The figures close the solution section rather than standing as one of their
   own: on their own they carried a full --section-y above and a --section-y-sm
   below, and between two white grounds that stacked padding read as a hole. One
   --stack-5 keeps them a beat apart from the four parts and no more. */
.figures--joined { margin-top: var(--stack-5); }
.figure { padding: var(--stack-2) var(--stack-3); border-left: 1px solid var(--hairline); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure__value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-headline);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure__label { margin-top: var(--stack-1); font-size: var(--t-caption); color: var(--ink-3); text-wrap: balance; }
@media (max-width: 720px) {
  .figures { grid-template-columns: repeat(2, 1fr); row-gap: var(--stack-4); }
  .figure:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* --- Section head --------------------------------------------------------- */
.head { max-width: var(--w-text); }
.head--center { margin-inline: auto; text-align: center; }
.head .eyebrow + .headline { margin-top: var(--stack-2); }
.head .headline + .lead { margin-top: var(--stack-3); }
.head--sub { margin-top: var(--stack-5); padding-top: var(--stack-4); border-top: 1px solid var(--hairline); }
.headline--sub { font-size: var(--t-title); }

/* --- Product shot ---------------------------------------------------------
   The resin photograph is already lit like an Apple product shot: object on
   white seamless. Centre it, give it room, and say nothing over the top of it. */
.product { text-align: center; }
.product__media { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* No radius, no frame, no mask. The media shots are transparent WebP, so they
   composite straight onto whatever the section colour is and there is no edge
   to hide. Keep it that way: shoot or cut product images to transparency
   rather than reaching for scripts/normalize_product_shot.py, which exists
   only as the fallback for an opaque photograph on a grey sweep. */
.product__media img {
  margin-inline: auto;
  max-width: 40rem; width: 100%;
}
.product__caption { margin-top: var(--stack-2); }

/* --- Spec table -----------------------------------------------------------
   Apple's tech-specs treatment: label left, value right, hairline between. */
.specs { margin: var(--stack-5) auto 0; max-width: var(--w-text); }
.spec {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: var(--stack-2);
  padding-block: var(--stack-3);
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.spec:last-child { border-bottom: 1px solid var(--hairline); }
.spec__label { font-weight: var(--w-medium); }
.spec__value { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; }
.spec__note  { grid-column: 1 / -1; margin-top: calc(var(--stack-1) * -1); font-size: var(--t-caption); color: var(--ink-3); }

/* --- Card grid ------------------------------------------------------------
   Flat --bg-alt fills, no border, no shadow. The image sits inside the card
   at the top with the corners inherited. */
.cards { display: grid; gap: var(--stack-3); grid-template-columns: repeat(3, 1fr); margin-top: var(--stack-5); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-alt);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card__body { padding: var(--stack-3); display: flex; flex-direction: column; gap: var(--stack-1); flex: 1; }
.card__body p,
.card__text { color: var(--ink-2); font-size: var(--t-small); }
/* Names a real, checkable deployment. It is the line that turns a claim into
   evidence, so it sits above the CTA and is pushed to the foot of the card. */
.card__meta {
  margin-top: auto; padding-top: var(--stack-2);
  font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty;
}
.card__more { padding-top: var(--stack-1); color: var(--accent); font-size: var(--t-small); }
.card__more::after { content: " \203A"; }

/* Selectable cards: the harness three, which drive the rail under them.

   The card's own title is the button, so it carries no chrome of its own --
   it inherits the title's size, weight and tracking and is invisible as a
   control. Pressing anywhere else on the card selects it too; that is a
   pointer convenience added in js/rail.js, and the title button is what makes
   it reachable by keyboard. */
.card__pick {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit;
  cursor: pointer;
}
.cards--pick .card { cursor: pointer; }
/* The selected card is ringed in the harness colour. An outline rather than a
   box-shadow, because there is no shadow anywhere on this site and there should
   not be one; the negative offset keeps the ring inside the card's radius. */
.cards--pick .card {
  outline: 2px solid transparent; outline-offset: -2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease),
              outline-color var(--dur) var(--ease);
}
.cards--pick .card.is-on { outline-color: var(--c-harness); }
/* Once one is selected the other two step back, so the rail below is
   unambiguously about the one that is lit. */
.cards--pick.is-set .card { opacity: .5; }
.cards--pick.is-set .card.is-on { opacity: 1; }

/* --- Output rail ----------------------------------------------------------
   Sits under the harness cards and holds all three on one scale, which is the
   claim the section is making: one media, one regeneration model, three
   decades of output. Selecting a card shortens the fill onto that card's own
   range. The scale is logarithmic -- see js/rail.js -- because three decades on
   a linear rail would pile the filter and the kiosk onto the left endpoint. */
.rail { margin-top: var(--stack-4); text-align: center; }
.rail__scale {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--stack-2);
  font-size: var(--t-caption); font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}
.rail__track { height: 1px; background: var(--hairline); position: relative; }
.rail__track::before,
.rail__track::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ink-3); transform: translateY(-50%);
}
.rail__track::before { left: 0; }
.rail__track::after  { right: 0; }

/* Full width and near-invisible at rest, so a page with no JS sees the same
   hairline rail it always had. */
.rail__fill {
  position: absolute; top: 50%; left: 0; width: 100%; height: 3px;
  border-radius: var(--r-pill); background: var(--hairline);
  transform: translateY(-50%);
  transition: left var(--dur) var(--ease-out), width var(--dur) var(--ease-out),
              background var(--dur) var(--ease);
}
.rail.is-set .rail__fill { background: var(--c-harness); }
@media (prefers-reduced-motion: reduce) { .rail__fill { transition: none; } }

/* Fixed height so swapping the readout never shifts the note under it. Hidden
   until js/rail.js says it is live: with the script blocked or failed the cards
   do not select, and an invitation to press one would be a lie. */
.rail__readout {
  margin-top: var(--stack-2); min-height: 1.4em; visibility: hidden;
  font-size: var(--t-caption); font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.rail.is-live .rail__readout { visibility: visible; }
.rail.is-set .rail__readout { color: var(--c-harness); font-weight: var(--w-semi); }
.rail__note { margin-top: var(--stack-1); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }

/* On a phone the three harnesses become a swipe carousel with the rail sitting
   directly under it, so the card and the range it lights are on screen together
   -- stacked as three full-width cards they are a scroll apart and the rail
   looks like it is doing nothing. */
@media (max-width: 900px) {
  .cards--pick {
    display: flex;
    position: relative;            /* offsetLeft in rail.js is measured off this */
    gap: var(--stack-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* Bleed to the screen edges so a card can scroll past the text column. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: 6px;        /* room for the focus ring on the last card */
    scrollbar-width: none;
  }
  .cards--pick::-webkit-scrollbar { display: none; }
  .cards--pick .card { flex: 0 0 82%; scroll-snap-align: start; }
  /* A lift on a horizontally scrolling card fights the swipe. */
  .cards--pick .card:hover { transform: none; }
}

/* --- Contaminant list -----------------------------------------------------
   A list, not eight icon circles in a row. One flat list: grouping it by which
   media does the work published something we do not publish -- see the comment
   in content.json before adding any label back. */
.list { margin-top: var(--stack-5); border-top: 1px solid var(--hairline); }
.list__note { margin-top: var(--stack-3); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }
/* a link inside a note is set at the note's size, not the standfirst's */
.list__note .link { font-size: inherit; }
.row {
  display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto;
  align-items: baseline; gap: var(--stack-3);
  padding-block: var(--stack-3);
  border-bottom: 1px solid var(--hairline);
  transition: padding-inline-start var(--dur) var(--ease-out);
}
.row:hover { padding-inline-start: var(--stack-1); }
@media (prefers-reduced-motion: reduce) { .row:hover { padding-inline-start: 0; } }
/* A row with no product page behind it: same rhythm, nothing to press. */
.row--plain:hover { padding-inline-start: 0; }
.row__name { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.row__note { color: var(--ink-2); font-size: var(--t-small); }
.row__go   { color: var(--accent); font-size: var(--t-lead); }
/* A short explanatory aside under a list: label + one paragraph, text measure. */
.aside { margin-top: var(--stack-5); padding-top: var(--stack-4); border-top: 1px solid var(--hairline); max-width: var(--w-text); }
.aside__label { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-horse); }
.aside__body { margin-top: var(--stack-2); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 700px) {
  .row { grid-template-columns: 1fr auto; }
  .row__note { grid-column: 1 / -1; }
}

/* --- Backers --------------------------------------------------------------
   Wordmarks as type. Real logos would be better; setting them in the page
   typeface at one weight is the honest interim and still reads as a system. */
/* Two rows on the same three-column grid so every column lines up: governments
   first, split by country, then the institutions that back them. The government
   row leaves its third cell empty on purpose -- filling it would push the two
   countries into widths that do not match the row below. */
.backers { display: grid; gap: var(--stack-4); grid-template-columns: repeat(3, 1fr); margin-top: var(--stack-5); }
.backers--gov { margin-top: var(--stack-5); }
.backers--gov + .backers { margin-top: var(--stack-5); }
@media (max-width: 820px) { .backers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .backers { grid-template-columns: 1fr; } }
/* Two lines' worth of height whether the label needs them or not, so a kind
   that wraps ("Corporates & foundations") keeps its hairline on the same line
   as the ones that don't. */
.backer__kind {
  font-size: var(--t-caption); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3); padding-bottom: var(--stack-2);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: flex-end;
  line-height: 1.3;
  /* border-box, so the reserved height has to carry the padding too */
  min-height: calc(2 * 1.3em + var(--stack-2));
}
.backer__names { margin-top: var(--stack-2); display: flex; flex-direction: column; gap: var(--stack-1); }
.backer__names li { list-style: none; font-size: var(--t-lead); font-weight: var(--w-medium); letter-spacing: var(--track-title); }

/* --- Highlight ------------------------------------------------------------ */
.highlight { margin-top: var(--stack-5); padding: clamp(2rem, 5vw, 3.5rem); background: var(--bg-alt); border-radius: var(--r-media); text-align: center; }
.highlight__value { font-size: clamp(3rem, 8vw, 5rem); font-weight: var(--w-semi); letter-spacing: var(--track-display); line-height: 1; }
.highlight__label { margin-top: var(--stack-2); font-size: var(--t-lead); font-weight: var(--w-medium); }
.highlight__body  { margin-top: var(--stack-1); color: var(--ink-2); }
.highlight__body + .link { margin-top: var(--stack-3); }

/* --- Awards + press -------------------------------------------------------
   Two column hairline lists, same rhythm as the spec table so the page reads
   as one system rather than a stack of unrelated widgets. */
.entries { margin-top: var(--stack-4); }
.entry {
  display: grid; grid-template-columns: 1fr auto; gap: var(--stack-3);
  align-items: baseline; padding-block: var(--stack-3);
  border-top: 1px solid var(--hairline);
}
.section--dark .entry { border-color: var(--hairline-dark); }
.entry:last-child { border-bottom: 1px solid var(--hairline); }
.section--dark .entry:last-child { border-color: var(--hairline-dark); }
.entry__main { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.entry__sub  { display: block; margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-3); font-weight: var(--w-regular); letter-spacing: var(--track-body); }
.section--dark .entry__sub { color: var(--ink-inverse-2); }
.entry__year { font-size: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.section--dark .entry__year { color: var(--ink-inverse-2); }

/* --- Closer --------------------------------------------------------------- */
.closer { text-align: center; }
.closer .lead { margin: var(--stack-3) auto 0; max-width: 34rem; }
.closer .btn { margin-top: var(--stack-4); }
.closer__media { margin-top: clamp(3rem, 6vw, 5rem); }
.closer__media img { width: 100%; border-radius: var(--r-media); aspect-ratio: 21 / 9; object-fit: cover; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--bg-alt); padding-block: var(--section-y-sm); font-size: var(--t-caption); color: var(--ink-2); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-4); }
@media (max-width: 760px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
.footer__heading { color: var(--ink); font-weight: var(--w-semi); margin-bottom: var(--stack-2); }
.footer__cols ul { list-style: none; display: flex; flex-direction: column; gap: .55em; }
.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.footer__note { margin-top: var(--stack-5); padding-top: var(--stack-3); border-top: 1px solid var(--hairline); max-width: var(--w-text); }
.footer__bar { margin-top: var(--stack-3); display: flex; gap: var(--stack-3); flex-wrap: wrap; align-items: baseline; }
.footer__bar .legal { margin-right: auto; color: var(--ink-3); }

/* --- Scroll reveal --------------------------------------------------------
   Fade and 24px rise, staggered by the observer in js/reveal.js. Elements are
   visible by default so the page still reads with JS disabled or blocked. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
}

/* --- Inner pages ----------------------------------------------------------
   /hix and /deployments run on the homepage's components. Only the pieces
   that have no equivalent there are defined below. */
.headline--page { max-width: 18ch; }

/* The spec table on /hix is the whole section rather than a footnote to a
   photograph, so it takes the full text measure and loses the top margin the
   homepage version needs. */
.specs--flush { margin-top: var(--stack-3); }

/* Comparison rows. A claim, the reason, and the number that settles it. */
.versuses { margin-top: var(--stack-3); border-top: 1px solid var(--hairline); }
.versus {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: var(--stack-3); align-items: start;
  padding-block: var(--stack-3);
  border-bottom: 1px solid var(--hairline);
}
.versus__name { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.versus__note { color: var(--ink-2); font-size: var(--t-small); max-width: 46ch; }
.versus__fig  { text-align: right; }
.versus__value { font-size: var(--t-title); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; letter-spacing: var(--track-title); }
.versus__unit  { font-size: var(--t-caption); color: var(--ink-3); }
@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr auto; }
  .versus__note { grid-column: 1 / -1; }
}

/* Citations. Hairline rows, no cards -- a reference list should look like one. */
.cites { margin-top: var(--stack-4); border-top: 1px solid var(--hairline); }
.cite {
  display: flex; flex-direction: column; gap: 2px;
  padding-block: var(--stack-3); border-bottom: 1px solid var(--hairline);
  transition: padding-inline-start var(--dur) var(--ease-out);
}
.cite:hover { padding-inline-start: var(--stack-1); }
@media (prefers-reduced-motion: reduce) { .cite:hover { padding-inline-start: 0; } }
.cite__title  { font-weight: var(--w-medium); text-wrap: pretty; }
.cite__source { font-size: var(--t-caption); color: var(--ink-3); }
.cites + p { margin-top: var(--stack-3); }

/* --- Deployment map -------------------------------------------------------
   The one place on this site that loads anything from another origin: MapLibre
   and the CARTO basemap. Everything else here is self-hosted, so if that ever
   becomes a problem the fallback paragraph under the map is what a reader gets,
   and it points at the same data file the map draws. */
.chips { display: flex; flex-wrap: wrap; gap: var(--stack-1); }
.chip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: .55em;
  padding: .5em 1em; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: none;
  font: inherit; font-size: var(--t-small); color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__count { font-size: var(--t-caption); font-variant-numeric: tabular-nums; opacity: .7; }

.mapwrap { margin-top: var(--stack-3); }
.map {
  height: clamp(24rem, 62vh, 40rem);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--bg-alt);
}
.map__empty { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); }
html.js .map__empty { display: none; }
.maplibregl-popup-content {
  font-family: var(--font); font-size: var(--t-caption);
  border-radius: var(--r-input); padding: .75em 1em;
  box-shadow: none; border: 1px solid var(--hairline);
}
.maplibregl-popup-content strong { display: block; font-size: var(--t-small); letter-spacing: var(--track-title); }
.maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-attrib { font-size: 10px !important; }

.dtypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-3); }
@media (max-width: 760px) { .dtypes { grid-template-columns: 1fr; gap: var(--stack-4); } }
.dtype { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.dtype__name { display: flex; align-items: center; gap: .55em; font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.dtype__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.dtype__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.dt-atm   { background: var(--c-horse); }
.dt-kiosk { background: var(--c-harness); }
.dt-piped { background: var(--c-habit); }

/* --- Canvas demos ---------------------------------------------------------
   The two bead animations on /hix, ported from impact.drinkwell.com along with
   js/beads.js. They sit inside a hairline frame on --bg-alt rather than a card
   with a shadow, and every figure they animate is also printed as text beneath,
   so nothing is only available to someone watching pixels move. */
.demo {
  margin-top: var(--stack-4);
  background: var(--bg-alt);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.demo + .demo { margin-top: var(--stack-5); }
.demo figcaption { display: flex; flex-direction: column; gap: var(--stack-1); }
.demo__title { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.demo__note  { font-size: var(--t-small); color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.demo canvas {
  display: block; width: 100%;
  margin-top: var(--stack-3);
  background: var(--bg);
  border-radius: var(--r-input);
  border: 1px solid var(--hairline);
}
/* Readouts. Tabular figures so a counter ticking up does not shuffle the row. */
.demo-controls {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--stack-1) var(--stack-3);
  margin-top: var(--stack-2);
  font-size: var(--t-caption); color: var(--ink-3);
}
.demo-stat { font-variant-numeric: tabular-nums; }
.demo-stat b { margin-left: .45em; color: var(--ink); font-weight: var(--w-medium); }
.demo-stat--lead { color: var(--c-horse); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; }
.demo-msg { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--c-harness); text-wrap: pretty; }
.demo-msg a { color: var(--accent); }
.demo-btn {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: var(--t-caption); font-weight: var(--w-medium);
  padding: .6em 1.2em; border-radius: var(--r-pill);
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer; transition: opacity var(--dur-fast) var(--ease);
}
.demo-btn:disabled { opacity: .35; cursor: default; }
.legend { display: flex; flex-wrap: wrap; gap: var(--stack-1) var(--stack-3); margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: .5em; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--ink-3); }
.sw--amber { background: var(--c-harness); }
.sw--blue  { background: var(--c-horse); }
.sw--brine { background: #67c3cf; }   /* the rinse, as it reads on the impact site */

/* --- Recovery diagram -----------------------------------------------------
   Ported from impact.drinkwell.com. The dashes crawl in the direction of flow,
   which is the only motion on this page that is not driven by a press. Stroke
   width carries the share of the water, so the RO lane reads as worse before
   the numbers are read. */
.colviz { margin-block: var(--stack-4); }
.colviz svg { width: 100%; height: auto; display: block; }
.colviz__lane + .colviz__lane { margin-top: var(--stack-2); padding-top: var(--stack-3); border-top: 1px dashed var(--hairline); }
.cv-mono { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; fill: var(--ink-3); text-transform: uppercase; }
.cv-lane { font-size: 10px; letter-spacing: .14em; }
.cv-val  { font-size: 26px; font-weight: var(--w-semi); letter-spacing: var(--track-title); fill: var(--ink); }
.cv-val2 { font-size: 17px; font-weight: var(--w-medium); fill: var(--ink-2); }
.cv-under { fill: none; stroke-linecap: round; }
.cv-dots  { fill: none; stroke-linecap: round; stroke-dasharray: .1 13; animation: dwflow 1s linear infinite; }
@keyframes dwflow { to { stroke-dashoffset: -13.1; } }
@media (prefers-reduced-motion: reduce) { .cv-dots { animation: none; } }

/* =========================================================================
   One page (17 Sep 2026). Everything below serves the sections that used to
   be pages of their own, or the chrome a very long page needs: a phone menu,
   anchor offsets under the sticky bar, and the headliner gallery.
   ========================================================================= */

/* --- Anchors under a sticky bar ------------------------------------------ */
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Headliner carousel ---------------------------------------------------
   Under the hero: one announcement at a time. The slide is a split card, the
   photograph on the left running clean and the caption on --bg-alt beside it;
   on a phone the two stack. Slides sit in the same grid cell and crossfade
   under js/carousel.js; with JS off they stack top to bottom so every one is
   readable and every link reachable. Arrows and dots appear only once the
   script has confirmed there is more than one slide. */
.carousel { margin-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--stack-4); text-align: left; }
.carousel__track { margin-top: var(--stack-3); display: grid; gap: var(--stack-3); }
.js .carousel__track { gap: 0; }
.js .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); }
.js .slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .slide { transition: none; } }
.slide {
  display: grid; grid-template-columns: 3fr 2fr;
  background: var(--bg-alt); border-radius: var(--r-media); overflow: hidden;
  color: inherit;
}
@media (max-width: 800px) { .slide { grid-template-columns: 1fr; } }
.slide__img { display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 800px) { .slide__img { aspect-ratio: 16 / 10; height: auto; } }
.slide__body { display: flex; flex-direction: column; gap: var(--stack-2); padding: clamp(1.5rem, 3.5vw, 3rem); justify-content: center; }
.slide__org { font-size: var(--t-caption); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.slide__year { color: var(--ink-3); font-weight: var(--w-regular); }
.slide__title { font-size: var(--t-headline); font-weight: var(--w-semi); letter-spacing: var(--track-headline); line-height: var(--lh-head); text-wrap: balance; }
.slide__text { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); text-wrap: pretty; }
.slide__more { margin-top: var(--stack-1); color: var(--accent); font-size: var(--t-body); }
.slide__more::after { content: " \203A"; }
.slide:hover .slide__more { color: var(--accent-hover); }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--stack-3); margin-top: var(--stack-3); }
.carousel__nav[hidden] { display: none; }
.carousel__btn {
  appearance: none; -webkit-appearance: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.carousel__btn:hover { background: var(--bg-alt); }
.carousel__dots { display: flex; gap: var(--stack-2); }
/* The active dot stretches into a bar that fills over one interval, so the
   ten seconds are visible rather than a surprise. The fill is a CSS animation
   whose duration the script sets from data-interval; paused with the rest. */
.carousel__dot {
  appearance: none; -webkit-appearance: none; padding: 0; border: 0; cursor: pointer;
  width: .5rem; height: .5rem; border-radius: var(--r-pill);
  background: var(--hairline); position: relative; overflow: hidden;
  transition: width var(--dur) var(--ease-out), background var(--dur-fast) var(--ease);
}
.carousel__dot.is-on { width: 2.5rem; background: var(--hairline); }
.carousel__dot.is-on::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform-origin: left; transform: scaleX(0);
  animation: carousel-fill var(--carousel-interval, 10s) linear forwards;
}
.carousel.is-paused .carousel__dot.is-on::after { animation-play-state: paused; }
.carousel.is-still .carousel__dot.is-on::after { animation: none; transform: none; }
@keyframes carousel-fill { to { transform: scaleX(1); } }

/* --- Media tile data-sheet link ------------------------------------------ */
.med__sheet { display: inline-block; margin-top: var(--stack-1); font-size: var(--t-caption); }

/* --- Named lists: services, platforms, field notes, careers ---------------- */
.nameds { margin-top: var(--stack-5); }
.named__lead { margin-top: var(--stack-2); }
.named__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4) var(--stack-3); margin-top: var(--stack-3); }
.named__grid--4 { grid-template-columns: repeat(4, 1fr); }
.named__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .named__grid, .named__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .named__grid, .named__grid--4, .named__grid--2 { grid-template-columns: 1fr; } }
.named { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.section--dark .named { border-color: var(--hairline-dark); }
.named__name { font-size: var(--t-lead); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.named__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.section--dark .named__note { color: var(--ink-inverse-2); }

/* --- Ways to work together ------------------------------------------------ */
.ways-wrap { margin-top: var(--stack-5); }
.ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-3); margin-top: var(--stack-3); }
@media (max-width: 900px) { .ways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ways { grid-template-columns: 1fr; } }
.way {
  display: flex; flex-direction: column; gap: var(--stack-1);
  padding: var(--stack-3); background: var(--bg); border-radius: var(--r-card);
  color: inherit; transition: transform var(--dur) var(--ease-out);
}
.way:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .way:hover { transform: none; } }
.way__name { font-size: var(--t-lead); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.way__note { font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.way__more { margin-top: auto; padding-top: var(--stack-2); color: var(--accent); font-size: var(--t-small); }
.way__more::after { content: " \203A"; }

/* --- Video ------------------------------------------------------------------ */
.video { margin-top: var(--stack-5); }
.video__frame { margin-top: var(--stack-3); aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--bg-dark); }
.video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: var(--stack-2); }

/* --- Three-up points and stages, for the sections that need them ----------- */
.points--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .points--3 { grid-template-columns: 1fr; } }
.point__measure { margin-top: var(--stack-2); padding-top: var(--stack-1); border-top: 1px solid var(--hairline-soft); font-size: var(--t-caption); color: var(--ink-3); }
.stages--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stages--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stages--4 { grid-template-columns: 1fr; } }
.stage__list, .tee__list { margin-top: var(--stack-1); padding: 0; list-style: none; font-size: var(--t-small); color: var(--ink-2); }
.stage__list li, .tee__list li { padding-block: .3em; border-top: 1px solid var(--hairline-soft); }
.stage__list li:first-child, .tee__list li:first-child { border-top: 0; }
.tees--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .tees--2 { grid-template-columns: 1fr; } }
.figures--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .figures--3 { grid-template-columns: 1fr; } .figures--3 .figure { border-left: 0; padding-left: 0; } }
.lineup__label + .stages, .lineup__label + .figures, .lineup__label + .points { margin-top: var(--stack-3); }
.section .lineup__label { margin-top: var(--stack-5); }
.section .head + .lineup__label, .gallery .lineup__label { margin-top: var(--stack-4); }

/* --- Family rows: name + role, and a labelled chevron ----------------------- */
.row__role { display: block; margin-top: 2px; font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-horse); }
.row__go--label { font-size: var(--t-small); white-space: nowrap; }
.list--family .row { align-items: start; }

/* --- Case studies ------------------------------------------------------------ */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-3); margin-top: var(--stack-3); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }
.case { background: var(--bg); border-radius: var(--r-card); padding: var(--stack-3); display: flex; flex-direction: column; gap: var(--stack-1); }
.case__kind { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-horse); }
.case__name { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.case__where { font-size: var(--t-caption); color: var(--ink-3); }
.case__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-2); margin-top: var(--stack-2); }
.case__fig b { display: block; font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; }
.case__fig span { font-size: var(--t-caption); color: var(--ink-3); }
.case__rows { margin-top: var(--stack-2); border-top: 1px solid var(--hairline); }
.case__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--stack-2); padding-block: .5em; border-bottom: 1px solid var(--hairline-soft); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.case__row--head { font-size: var(--t-caption); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-caps); }
.case__label { color: var(--ink-2); }
.case__raw { color: var(--c-harness); }
.case__out { color: var(--c-habit); font-weight: var(--w-medium); }
.case__tags { margin-top: auto; padding-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); }

/* --- SDGs ---------------------------------------------------------------------- */
.sdgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-3); margin-top: var(--stack-3); }
@media (max-width: 900px) { .sdgs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sdgs { grid-template-columns: 1fr; } }
.sdg { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.sdg__n { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--w-semi); letter-spacing: var(--track-headline); line-height: 1; color: var(--ink); }
.sdg__name { margin-top: var(--stack-1); font-size: var(--t-lead); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.sdg__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }

/* --- About: photograph, story, values, people ---------------------------------- */
.about__media { margin-top: var(--stack-5); }
.about__media img { width: 100%; border-radius: var(--r-media); aspect-ratio: 21 / 9; object-fit: cover; }
.story { margin-top: var(--stack-5); max-width: var(--w-text); }
.story .lead + .lead { margin-top: var(--stack-3); }
.story .lineup__label + .lead { margin-top: var(--stack-3); }
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--stack-3); margin-top: var(--stack-4); }
@media (max-width: 1000px) { .values { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }
.value { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.value__letter { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--w-semi); letter-spacing: var(--track-headline); line-height: 1; color: var(--accent); }
.value__name { margin-top: var(--stack-1); font-size: var(--t-lead); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.value__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4) var(--stack-3); margin-top: var(--stack-4); }
.people--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .people, .people--2 { grid-template-columns: 1fr; } }
.person { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.person__country { display: block; font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-harness); margin-bottom: var(--stack-1); }
.person__name { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.person__role { margin-top: 2px; font-size: var(--t-caption); color: var(--ink-3); }
.person__bio { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.person__office { margin-top: var(--stack-2); padding-top: var(--stack-2); border-top: 1px solid var(--hairline-soft); font-size: var(--t-caption); color: var(--ink-3); line-height: 1.5; }
.person__office b { color: var(--ink-2); font-weight: var(--w-medium); }

/* --- Entries that link ---------------------------------------------------------- */
.entry--link { color: inherit; transition: padding-inline-start var(--dur) var(--ease-out); }
.entry--link:hover { padding-inline-start: var(--stack-1); }
.entry--link:hover .entry__main { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .entry--link:hover { padding-inline-start: 0; } }

/* --- Careers -------------------------------------------------------------------- */
.section--dark .headline, .section--dark .title { color: var(--ink-inverse); }
.section--dark .named__name, .section--dark .role__title { color: var(--ink-inverse); }
.section--dark .lineup__label { color: var(--ink-inverse-2); }
.roles { margin-top: var(--stack-3); }
.role {
  display: grid; grid-template-columns: 1fr auto; gap: var(--stack-3); align-items: start;
  padding-block: var(--stack-3); border-top: 1px solid var(--hairline-dark);
}
.role:last-child { border-bottom: 1px solid var(--hairline-dark); }
@media (max-width: 640px) { .role { grid-template-columns: 1fr; } }
.role__title { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.role__meta { margin-top: 2px; font-size: var(--t-caption); color: var(--ink-inverse-2); }
.role__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-inverse-2); max-width: 62ch; text-wrap: pretty; }
.role__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack-2); }
@media (max-width: 640px) { .role__links { flex-direction: row; align-items: center; } }
.btn--small { font-size: var(--t-caption); padding: .55em 1.1em; }
.section--dark .link { color: var(--accent-bright); }

/* --- Connect: the form and the offices ------------------------------------------ */
.connect { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--stack-5); margin-top: var(--stack-5); }
@media (max-width: 900px) { .connect { grid-template-columns: 1fr; gap: var(--stack-4); } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack-3); align-content: start; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4em; font-size: var(--t-caption); color: var(--ink-3); }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-input);
  padding: .65em .85em; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-bright); outline-offset: 1px; border-color: transparent; }
.field textarea { resize: vertical; min-height: 7rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; align-items: center; gap: var(--stack-3); flex-wrap: wrap; }
.form.is-sent .form__foot .caption { color: var(--c-habit); }
.offices { display: grid; grid-template-columns: 1fr; gap: var(--stack-3); align-content: start; }
.office { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.office__name { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.office__entity { margin-top: var(--stack-1); font-size: var(--t-body); font-weight: var(--w-medium); }
.office__lines { margin-top: 2px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
.office .link { margin-top: var(--stack-1); display: inline-block; }

/* A trailing link under a grid keeps a beat of air. */
.sdgs + p, .nameds + p, .named__grid + p, .entries + p { margin-top: var(--stack-4); }
.office__lines:empty { display: none; }

/* The wordmark above the hero headline: the nav's SVG run large. Its viewBox
   is the ink bounding box, so the margin below is the only space around it. */
.hero__logo { display: block; width: min(26rem, 72vw); height: auto; margin: 0 auto var(--stack-4); }

/* From -> To. A third, auto-width track holds the arrow between the two
   columns; when the columns stack on a phone the arrow turns to point down. */
.tees--arrow { grid-template-columns: 1fr auto 1fr; align-items: start; }
.tee__tag { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--stack-1); }
.tee__arrow { display: flex; align-items: center; justify-content: center; align-self: center; color: var(--ink-3); padding-inline: var(--stack-1); }
@media (max-width: 640px) {
  .tees--arrow { grid-template-columns: 1fr; }
  .tee__arrow { padding-block: var(--stack-1); }
  .tee__arrow svg { transform: rotate(90deg); }
}

/* ── The ten-year race (problem section) ───────────────────────────────
   The page's one dark block above the fold. A year axis with a scrubber, then
   two lanes: each a side column (tag, name, three step chips) and a track the
   script draws into, with the current step's note under it. --lane is the
   lane's colour: rust for the sector, blue for ours. */
.race { margin-top: var(--stack-5); }
.race__axis { position: relative; padding: 0 0 var(--stack-3); }
.race__year { display: flex; align-items: baseline; gap: .4em; font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-inverse-2); }
.race__year output { font: var(--w-semi) var(--t-headline)/1 var(--font); letter-spacing: var(--track-headline); text-transform: none; color: var(--ink-inverse); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.race__scrub { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: var(--stack-2) 0 0; background: transparent; cursor: pointer; }
.race__scrub::-webkit-slider-runnable-track { height: 2px; background: var(--hairline-dark); border-radius: 1px; }
.race__scrub::-moz-range-track { height: 2px; background: var(--hairline-dark); border-radius: 1px; }
.race__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--ink-inverse); border: 0; }
.race__scrub::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink-inverse); border: 0; }
.race__scrub:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; border-radius: 4px; }
.race__ticks { position: relative; height: 1.2em; margin: 2px 9px 0; font-size: var(--t-caption); color: var(--ink-inverse-2); font-variant-numeric: tabular-nums; }
.race__ticks span { position: absolute; transform: translateX(-50%); }
.race__hint { margin-top: var(--stack-1); font-size: var(--t-caption); color: var(--ink-inverse-2); }
.race__lane { --lane: #c9772f; display: grid; grid-template-columns: 15rem 1fr; gap: var(--stack-4); align-items: start; padding: var(--stack-3) 0; border-top: 1px solid var(--hairline-dark); }
.race__lane--to { --lane: var(--accent-bright); }
.race__tag { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--lane); }
.race__tri { display: block; width: 100%; max-width: 16rem; height: auto; margin-top: var(--stack-2); overflow: visible; }
.race__tri marker path { fill: var(--lane); }
.race__edge { stroke: var(--lane); stroke-width: 2.5; stroke-linecap: round; opacity: .8; }
.race__step rect { fill: none; stroke: var(--hairline-dark); stroke-width: 1; transition: fill var(--dur-fast), stroke var(--dur-fast); }
.race__step text { font: var(--w-medium) 13px/1 var(--font); fill: var(--ink-inverse-2); }
.race__step .race__n { fill: var(--lane); font-weight: var(--w-semi); }
.race__step.is-on rect { fill: var(--lane); stroke: var(--lane); }
.race__step.is-on text, .race__step.is-on .race__n { fill: #fff; }
.race__svg { display: block; width: 100%; height: auto; }
.race__svg .ground { stroke: var(--hairline-dark); stroke-width: 1; }
.race__svg .head { stroke: var(--ink-inverse); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .6; }
.race__svg .water { fill: var(--lane); }
.race__svg .water--faint { opacity: .35; }
.race__svg .plant--live { fill: var(--lane); }
.race__svg .plant--live .win { fill: #fff; opacity: .85; }
.race__svg .plant--defunct { fill: none; stroke: var(--ink-inverse-2); stroke-width: 1.4; opacity: .55; }
.race__svg .plant--defunct .win { fill: none; }
.race__svg .cross { stroke: var(--ink-inverse-2); stroke-width: 1.4; fill: none; opacity: .9; }
.race__svg .ring { fill: none; stroke: var(--lane); stroke-width: 2; }
.race__svg .regen { fill: var(--lane); }
.race__svg .ylab { fill: var(--ink-inverse-2); font: 500 12px/1 var(--font); }
.race__notes { position: relative; margin-top: var(--stack-2); min-height: 4.2em; font-size: var(--t-small); line-height: var(--lh-body); color: var(--ink-inverse-2); text-wrap: pretty; max-width: 46rem; }
.race__note { margin: 0; }
.race__note + .race__note { margin-top: .5em; }
.race__note b { color: var(--lane); font-weight: var(--w-semi); }
.race__end { margin: .5em 0 0; color: var(--ink-inverse); font-weight: var(--w-medium); }
.js .race__note, .js .race__end { display: none; }
.js .race__note.is-on, .js .race__end.is-on { display: block; }
@keyframes cycnote { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.raceleg { display: flex; flex-wrap: wrap; gap: var(--stack-1) var(--stack-4); padding-top: var(--stack-3); border-top: 1px solid var(--hairline-dark); font-size: var(--t-caption); color: var(--ink-inverse-2); }
.raceleg__item { display: inline-flex; align-items: center; gap: .6em; }
.raceleg__item::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--ink-inverse); opacity: .9; }
.raceleg__item--defunct::before { background: none; border: 1.4px solid var(--ink-inverse-2); }
.raceleg__item--regen::before { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-bright); }
@media (max-width: 760px) {
  .race__lane { grid-template-columns: 1fr; gap: var(--stack-2); }
}
/* the headline's second half alternates between the two loops' names */
.swap { display: inline-grid; vertical-align: top; }
.swap__w { grid-area: 1 / 1; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .swap__w:not(.is-on) { opacity: 0; transform: translateY(.35em); pointer-events: none; }
.js .swap__w.is-on { opacity: 1; transform: none; }
.swap__w:not(.is-on) { position: relative; }
html:not(.js) .swap__w:not(.is-on) { display: none; }
@media (max-width: 760px) {
  /* the city keeps its size and scrolls sideways inside its box; shrunk to a phone it is unreadable */
  .city { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .city svg { min-width: 880px; }
}

/* ── The promised land: the city as one system ───────────────────────────
   js/city.js draws the SVG. Three groups in it are hot: a halo under each
   appears on hover or focus, and the pointer says it can be clicked. */
.city { margin-top: var(--stack-5); background: var(--bg-alt); border-radius: var(--r-media); padding: var(--stack-2); }
.city svg { display: block; width: 100%; height: auto; }
.city__hot { cursor: pointer; outline: none; }
.city__halo { fill: var(--accent); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.city__hot:hover .city__halo, .city__hot:focus-visible .city__halo { opacity: .22; }
.city__hot:focus-visible .city__halo { opacity: .35; }
.city__lbl { font-family: var(--font); }
.cityleg { display: flex; flex-wrap: wrap; gap: var(--stack-1) var(--stack-4); margin-top: var(--stack-3); font-size: var(--t-caption); color: var(--ink-3); }
.cityleg__item { display: inline-flex; align-items: center; gap: .6em; }
.cityleg__item::before { content: ""; display: inline-block; width: 26px; height: 0; border-top: 3px dashed var(--accent); }
.cityleg__item--regen::before { border-top: 2px dashed var(--c-harness); }
.cityleg__item--glass::before { border-top: 2px dotted var(--c-habit); }
.cityleg__item--truck::before { width: 18px; height: 9px; border: 0; border-radius: 2px; background: #2359a0; }

/* The play button on a video poster. */
.pop__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.pop__play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pop__playicon { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .92); }
.pop__playicon::after { content: ""; position: absolute; left: 55%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--ink); }
.pop__play:hover .pop__playicon { background: #fff; }

/* ── Chapters ────────────────────────────────────────────────────────────
   The 5-H section is the table of contents: each part is a link to its
   chapter, and the chapter eyebrows carry the same 01–05. */
.point--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.point--link .point__go { margin-top: auto; padding-top: var(--stack-2); }
.point--link:hover .point__value { color: var(--part); }
.point__go { display: inline-block; margin-top: var(--stack-2); font-size: var(--t-caption); font-weight: var(--w-semi); color: var(--part, var(--accent)); }
.point--link:hover .point__go { text-decoration: underline; text-underline-offset: .2em; }

/* The three field cards under the city, numbered like the badges. */
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4); margin-top: var(--stack-3); }
.field { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); border-radius: 0 0 var(--r-card) var(--r-card); transition: background var(--dur) var(--ease), box-shadow 0s; }
.field.is-lit { background: var(--bg-alt); box-shadow: 0 0 0 var(--stack-2) var(--bg-alt); }
.field__head { display: flex; align-items: center; gap: var(--stack-2); margin: 0; font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); line-height: var(--lh-title); }
.citykey__n { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--t-small); font-weight: var(--w-semi); display: inline-flex; align-items: center; justify-content: center; }
.field__fig { margin: var(--stack-2) 0 0; }
.field__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); }
.field__fig figcaption { margin-top: var(--stack-2); font-size: var(--t-small); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; }
.field__video { margin-top: var(--stack-2); border-radius: var(--r-card); overflow: hidden; background: var(--bg-dark); aspect-ratio: 16 / 9; position: relative; }
.field__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.field__vcap { margin-top: var(--stack-1); font-size: var(--t-caption); color: var(--ink-3); }
@media (max-width: 760px) { .fields { grid-template-columns: 1fr; } }
/* the badges on the drawing */
.city__badge circle { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.city__badge text { fill: #fff; font: var(--w-semi) 13px/1 var(--font); }

/* ── The folded chapter ("Go deeper") ────────────────────────────────────
   The technology block sits closed under a bar; a link to any anchor inside
   it opens it (js/deep.js). With JS off it is simply open. */
.deep { padding-top: var(--stack-5); }
.deep__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--stack-4); padding: var(--stack-4) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.deep__title { margin-top: var(--stack-1); font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.deep__body { margin-top: var(--stack-1); max-width: var(--w-text); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.deep__toggle { flex: 0 0 auto; padding: .6em 1.4em; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: var(--ink-inverse); font: var(--w-medium) var(--t-small) var(--font); cursor: pointer; }
.deep__toggle:hover { background: #000; }
.deep__toggle[aria-expanded="true"] { background: none; color: var(--ink); }
.js .deep:not(.is-open) .deep__panel { display: none; }
@media (max-width: 640px) { .deep__bar { flex-direction: column; align-items: flex-start; } }
.city__chip { pointer-events: none; }
.backer__sub { margin-top: 4px; font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }
.backers--inkind { margin-top: var(--stack-4); }
.office__phone { margin-top: var(--stack-1); font-size: var(--t-small); }
/* the partners inside each T column: a caption for who they are, then the names */
.tee__who { margin-top: var(--stack-3); padding-top: var(--stack-2); border-top: 1px solid var(--hairline); font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.tee__names { margin: var(--stack-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4em; }
.tee__names li { font-size: var(--t-body); font-weight: var(--w-medium); letter-spacing: var(--track-title); color: var(--ink); }
.lineup__label + .tees { margin-top: var(--stack-3); }
.tees__foot b { color: var(--ink); font-weight: var(--w-semi); }
/* with the partner names inside, the columns start at the top and run to their own length */
.tees--net { align-items: start; }
.tees--net .tee__note { flex: none; }

/* ── The 5-H engine under the framework head ─────────────────────────────
   One chain of five meshing gears, all turning; hovering a part card lights
   its gear and lets the others recede. */
.spine { margin-top: var(--stack-5); }
.spine__svg { display: block; width: 100%; height: auto; margin-top: var(--stack-4); overflow: visible; }
.spine__svg .gear { transition: opacity var(--dur) var(--ease); }
.spine__svg .gear__ring { fill: none; stroke: var(--part); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.spine__svg.has-hot .gear:not(.is-hot) { opacity: .28; }
.spine__svg .gear.is-hot .gear__ring { opacity: .9; }
.spine__svg .gear__name { font-size: 12px; }
.spine__caption { margin-top: 0; max-width: var(--w-text); font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--track-title); color: var(--ink); text-wrap: pretty; }
.point--link.is-hot .point__value { color: var(--part); }
/* the slider rides on the rail: an invisible track, a round thumb */
.rail__track { height: 28px; display: flex; align-items: center; }
.rail__track::before, .rail__track::after { top: 50%; }
.rail__track { background: none; }
.rail__track .rail__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hairline); }
.rail__slider { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; }
.rail__slider::-webkit-slider-runnable-track { height: 1px; background: var(--hairline); }
.rail__slider::-moz-range-track { height: 1px; background: var(--hairline); }
.rail__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8.5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.rail__slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.rail.is-set .rail__slider::-webkit-slider-thumb { border-color: var(--c-harness); }
.rail.is-set .rail__slider::-moz-range-thumb { border-color: var(--c-harness); }
.rail__slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.rail__fill { z-index: 0; }
.rail__slider { z-index: 1; }
html.nav-locked { overflow: hidden; }
/* the UN's own SDG tiles, at the size the number used to be */
.sdg__icon { display: block; width: 5rem; height: 5rem; border-radius: 6px; margin-bottom: var(--stack-2); }
/* the headline's swapping half in the two lanes' colours; the hashtag under the lead */
.swap__w--from { color: #d9843f; }
.swap__w--to { color: var(--accent-bright); }
.hashtag { margin-top: var(--stack-3); font-size: var(--t-lead); font-weight: var(--w-semi); letter-spacing: var(--track-title); color: var(--ink-inverse); }

/* the cards sit directly under their gears */
.points--spine { margin-top: var(--stack-3); }
@media (max-width: 760px) { .spine__svg { display: none; } }

/* --- The award page: /schwab-2026 -----------------------------------------
   The one page that is not a section of the homepage (18 Sep 2026). It reuses
   the homepage's components (.head, .story, .figures, .stages, .named,
   .entries, .video, .closer) and adds only what the homepage has no use for: a
   left-set page hero with an eyebrow, a pull quote, a photo-beside-text pair
   and a three-up photo strip. Same tokens, same hairlines, no shadows. */
.phero { padding-block: clamp(4.5rem, 10vw, 8.5rem) 0; }
.phero .eyebrow + .display { margin-top: var(--stack-2); }
.phero .display { max-width: 14ch; }
.phero .lead { margin-top: var(--stack-3); max-width: var(--w-text); }
.phero__links { display: flex; flex-wrap: wrap; gap: var(--stack-2) var(--stack-4); margin-top: var(--stack-3); }
.phero__media { margin-top: clamp(3rem, 6vw, 5rem); }
.phero__media img { display: block; width: 100%; border-radius: var(--r-media); aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 30%; }
.quote { margin: var(--stack-5) 0 0; max-width: var(--w-text); padding-left: var(--stack-3); border-left: 1px solid var(--hairline); }
.quote p { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--track-title); text-wrap: pretty; }
.quote footer { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); }
.about__media figcaption { margin-top: var(--stack-2); }
.pair { display: grid; grid-template-columns: 5fr 7fr; gap: var(--stack-5); align-items: start; margin-top: var(--stack-5); }
.pair__media { margin: 0; }
.pair__media img { display: block; width: 100%; border-radius: var(--r-media); aspect-ratio: 3 / 4; object-fit: cover; }
.pair__media figcaption { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); }
.pair__text .lead + .lead { margin-top: var(--stack-3); }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; gap: var(--stack-4); } .pair__media img { aspect-ratio: 4 / 5; } }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-3); margin-top: var(--stack-5); }
.strip figure { margin: 0; }
.strip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.strip figcaption { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }
.section--dark .strip figcaption { color: var(--ink-inverse-2); }
.section--dark .named__note { color: var(--ink-inverse-2); }
@media (max-width: 720px) { .strip { grid-template-columns: 1fr; } }
.closer .list__note { margin-top: var(--stack-3); }