/* =========================================================================
   SpeedPro: shared site styles
   Inherited from the SpeedPro print design system (project 930db87f).
   Every page links this file. Page-specific rules live in css/<page>.css.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand neutrals (carried over verbatim from the print system) */
  --ink: #141414;
  --ink-70: #3A3A3A;
  --muted: #6E6C66;
  --slate: #F1EFEA;
  --paper: #FBFAF7;
  --canvas: #D7D5CE;
  --hairline: #E4E1D9;
  --dim: #8A887F;

  /* Accent. One per project. Track Coral is the SpeedPro default.
     It is a fill colour, not a text colour: raw #FF5A4D is 2.9:1 on Paper, and
     white on coral is 3.08:1. Rather than darken it into a second, muddier
     orange, coral is reserved for fills, marks and the dot motif, and text
     accents are Ink. The colour stays clean and always passes AA. */
  --accent: #FF5A4D;
  --accent-text: #141414;   /* inline accents, links and emphasis */
  --accent-ink: #141414;    /* text sitting on a coral fill */
  --accent-soft: rgba(255, 90, 77, 0.12);
  --accent-line: rgba(255, 90, 77, 0.32);

  /* Semantic surface tokens. These flip in dark mode, the brand ones do not. */
  --bg: var(--paper);
  --bg-alt: var(--slate);
  --bg-invert: var(--ink);
  --surface: #FFFFFF;
  --surface-2: var(--slate);
  --fg: var(--ink);
  --fg-2: var(--ink-70);
  --fg-muted: var(--muted);
  --fg-invert: var(--paper);
  --border: var(--hairline);
  --border-strong: #CFCBC1;

  /* Status */
  --danger: #C8321F;
  --danger-soft: rgba(200, 50, 31, 0.10);
  --success: #157F5F;
  --amber: #B26A00;
  --amber-soft: rgba(178, 106, 0, 0.10);

  /* Type */
  --font-display: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 8px base unit */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .06), 0 2px 6px rgba(20, 20, 20, .04);
  --shadow-md: 0 6px 18px -8px rgba(20, 20, 20, .22);
  --shadow-lg: 0 22px 50px -26px rgba(20, 20, 20, .36);

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 72px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --speed: .28s;
}

[data-theme="dark"] {
  --bg: #141414;
  --bg-alt: #1B1B1A;
  --bg-invert: #FBFAF7;
  --surface: #1C1C1B;
  --surface-2: #232322;
  --fg: #FBFAF7;
  --fg-2: #D9D7D0;
  --fg-muted: #9C9A93;
  --fg-invert: #141414;
  --border: #2E2E2C;
  --border-strong: #3E3E3B;
  --dim: #8A887F;
  --accent-text: #FBFAF7;
  --accent-soft: rgba(255, 133, 119, 0.16);
  --accent-line: rgba(255, 133, 119, 0.36);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-lg: 0 22px 50px -26px rgba(0, 0, 0, .85);
  --danger: #FF7A66;
  --danger-soft: rgba(255, 122, 102, .12);
  --amber: #E0A34A;
  --amber-soft: rgba(224, 163, 74, .12);
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(34px, 7vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
h2, .h2 {
  font-size: clamp(28px, 5.2vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
}
h3, .h3 {
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}
h4, .h4 {
  font-size: clamp(21px, 2.4vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
}
h5, .h5 { font-size: clamp(18px, 1.8vw, 20px); font-weight: 700; line-height: 1.45; }
h6, .h6 { font-size: 16px; font-weight: 700; line-height: 1.45; }

p { margin: 0 0 var(--s-3); text-wrap: pretty; }

.lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--fg-2);
  font-weight: 500;
}
.small { font-size: 14px; line-height: 1.6; }
.muted { color: var(--fg-muted); }

/* Eyebrow: the house signature, thin letter-spaced caps above a heavy headline */
/* Eyebrows are muted rather than accent: with coral off text duty, a full-strength
   ink eyebrow would compete with the headline beneath it. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--s-2);
  display: block;
}
.eyebrow--muted { color: var(--fg-muted); }

/* The dot always carries the coral, in both themes. It is the one place the
   brand colour is guaranteed to appear on every page. */
.dot { color: var(--accent); }
.dot-mark {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.dot-mark--sm { width: 6px; height: 6px; }
.dot-end { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); display: inline-block; }

/* Headline mark: one word of a display heading set as a coral slab. Coral is a
   fill colour here, so the word sits on the accent rather than being set in it.
   Padding is in em so it scales with the heading. Display sizes only.
   The slab is optically centred, not mathematically: caps sit on the baseline
   with the descender space empty below, so the top padding is the larger of
   the two or the word rides high in the block. */
.mark {
  position: relative;
  display: inline-block;
  color: var(--accent-ink);
  padding: .14em .18em .02em;
  margin-right: .06em;
}
/* The slab is a pseudo-element so it can wipe in from the left when the block
   it sits in is revealed. At rest, or with no reveal parent, it is simply
   there at full width. */
.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform-origin: left center;
}
.reveal .mark::before { transform: scaleX(0); }
.reveal.is-in .mark::before {
  transform: scaleX(1);
  transition: transform .62s cubic-bezier(.22,.61,.36,1) .18s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal .mark::before { transform: scaleX(1); }
  .reveal.is-in .mark::before { transition: none; }
}

/* ---------- Links ---------- */
/* No underlines on navigation, cards, footers or breadcrumbs. Inline prose links
   keep a coral underline, because --accent-text is Ink: with no underline and no
   colour shift a link in running text is indistinguishable from the copy, and
   weight alone is not a sufficient cue. */
a { color: var(--fg); text-decoration: none; }
a:hover { text-decoration: none; }
p > a, .prose a, .prose li > a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
p > a:hover, .prose a:hover, .prose li > a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.link-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; color: var(--accent); transition: transform var(--speed) var(--ease); }
/* When the arrow link IS the anchor it must meet the 44px tap target. Nested
   spans inside a card keep their intrinsic height, the card is the target. */
a.link-arrow { min-height: 44px; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(56px, 9vw, 112px); }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5, .section--ink h6 { color: var(--paper); }
.section--ink p { color: #C9C7C0; }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

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

.skip-link {
  position: absolute; left: -9999px;
  z-index: 200;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-md);
}
.skip-link:focus { left: var(--gutter); top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled {
  opacity: .45; cursor: not-allowed; transform: none; pointer-events: none;
}

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-theme="dark"] .btn--primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--fg); background: var(--surface-2); color: var(--fg); }

.btn--ghost { background: transparent; color: var(--accent-text); border-color: transparent; padding-inline: 12px; }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-text); }

.btn--on-ink { background: #fff; color: var(--ink); border-color: #fff; }
.btn--on-ink:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.btn--sm { min-height: 44px; padding: 12px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 18px 34px; font-size: 17px; }
.btn--block { width: 100%; }

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s-3); }
.label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-2);
}
.hint { font-size: 13px; color: var(--fg-muted); }
.hint--amber { color: var(--amber); }

.input, .textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.is-invalid, .textarea.is-invalid, .cselect.is-invalid .cselect__trigger {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.error-text { font-size: 13px; color: var(--danger); font-weight: 600; }

/* Custom select. Never use a raw native <select> on this site. */
.cselect { position: relative; width: 100%; }
.cselect__trigger {
  font-family: var(--font-body);
  font-size: 16px;
  text-align: left;
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 44px 13px 15px;
  min-height: 48px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.cselect.is-filled .cselect__trigger { color: var(--fg); font-weight: 600; }
.cselect__trigger:hover { border-color: var(--border-strong); }
.cselect__chev {
  position: absolute;
  right: 15px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent-text);
  pointer-events: none;
  transition: transform var(--speed) var(--ease);
  display: flex;
}
.cselect.is-open .cselect__chev { transform: translateY(-50%) rotate(180deg); }
.cmenu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.cselect.is-open .cmenu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cmenu__opt {
  font-size: 15px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--fg-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.cmenu__opt:hover,
.cmenu__opt.is-active { background: var(--accent-soft); color: var(--accent-text); }
.cmenu__opt[aria-selected="true"] { font-weight: 700; color: var(--accent-text); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--fg-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
a.card:hover, .card--link:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
/* Author display declarations beat the UA sheet's [hidden] rule, so any card
   or panel toggled with the hidden attribute (filters, load more, tabs) needs
   this to actually leave the layout. */
[hidden] { display: none !important; }

.card__media {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; }
.card__text { color: var(--fg-muted); font-size: 15px; margin: 0; flex: 1; }
.card__meta {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  min-width: 0;
}

.pill {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.pill--accent { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brand img { height: 20px; width: auto; }
.brand__dark { display: none; }
[data-theme="dark"] .brand__light { display: none; }
[data-theme="dark"] .brand__dark { display: block; }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--s-4); }
}
.nav__link {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--fg);
  padding: 10px 2px;
  position: relative;
}
.nav__link:hover { color: var(--fg); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--fg); display: inline-flex; align-items: baseline; gap: 6px; }
.nav__link[aria-current="page"]::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  flex: none;
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 36px; margin-left: 2px; padding: 0;
  background: none; border: 0; color: var(--fg-muted); cursor: pointer;
  transition: transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav__item:hover .nav__caret, .nav__item.is-open .nav__caret { color: var(--fg); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: 100%; left: -14px; z-index: 70;
  min-width: 240px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility 0s linear var(--speed);
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item:hover .nav__menu, .nav__item.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility 0s;
}
.nav__menu a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--fg); padding: 10px 12px; border-radius: var(--radius-md);
  white-space: nowrap;
}
.nav__menu a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  flex: none; opacity: 0; transition: opacity var(--speed) var(--ease);
}
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--bg-alt); text-decoration: none; }
.nav__menu a:hover::before, .nav__menu a:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav__menu, .nav__caret { transition: none; } }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--fg); cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0;
  background: var(--bg);
  z-index: 55;
  padding: var(--s-4) var(--gutter) var(--s-7);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--fg);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}
.mobile-menu__nav a:hover { color: var(--accent-text); text-decoration: none; }
.mobile-menu__nav a:has(+ .mobile-menu__sub) { border-bottom: 0; padding-bottom: 6px; }
.mobile-menu__sub { display: flex; flex-direction: column; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.mobile-menu__nav .mobile-menu__sub a {
  font-size: 16px; font-weight: 600; color: var(--fg-2);
  padding: 10px 0; border-bottom: 0;
  display: flex; align-items: center;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C9C7C0; padding-block: var(--s-7) var(--s-5); }
.site-footer a { color: #C9C7C0; }
.site-footer a:hover { color: #fff; }
.site-footer__top {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__brand { font-family: var(--font-display); font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.site-footer__head {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s-2);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 15px; }
.site-footer__list a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__bottom {
  padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; align-items: center; text-align: center;
  font-size: 13px; color: var(--dim);
}
/* 2xN credit (playbook, wording fixed): centred, on the copyright line after a | (wraps under it on narrow screens) */
.site-footer__sep { color: var(--dim); }
@media (max-width: 680px) { .site-footer__sep { display: none; } .site-footer__bottom { flex-direction: column; gap: 0; } }
.site-footer__credit { margin: 0; text-align: center; font-size: 13px; color: var(--dim); text-wrap: balance; }
.site-footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; transition: color .2s ease; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color: #fff; }

/* ---------- Cookie consent ----------
   Structure follows the 2xN reference (corner panel, banner view plus a modal
   preferences view with switches), re-skinned to the SpeedPro system. The panel
   stays ink in both themes so it reads as chrome rather than page content.
   Markup is built by scripts/cookie-consent.js so every page is identical. */
.cookie {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: clamp(16px, 4vw, 32px);
  pointer-events: none;
}
.cookie[hidden] { display: none; }
.cookie--modal { align-items: center; justify-content: center; }

.cookie__backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: cookieFadeIn .26s ease both;
  pointer-events: auto;
}
.cookie__backdrop[hidden] { display: none; }
@keyframes cookieFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cookieFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes cookiePanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cookiePanelOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }

.cookie__panel {
  position: relative; pointer-events: auto;
  width: 100%; max-width: 420px;
  background: var(--ink); color: var(--paper);
  border: 1px solid rgba(255, 90, 77, .28);
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, .7);
  border-radius: var(--radius-lg);
  padding: 26px 26px 24px;
}
.cookie--modal .cookie__panel { max-width: 540px; }
.cookie.is-in .cookie__panel { animation: cookiePanelIn .34s var(--ease) forwards; }
.cookie.is-out .cookie__panel { animation: cookiePanelOut .22s ease forwards; }
.cookie.is-out .cookie__backdrop { animation: cookieFadeOut .22s ease both; }

.cookie__view--banner { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.cookie__view[hidden] { display: none !important; }

.cookie__icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
}
.cookie__icon svg { width: 21px; height: 21px; }
.cookie__body { min-width: 0; }

.cookie__title {
  font-family: var(--font-display); font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 13px; margin: 0 0 8px; color: var(--paper);
}
.cookie__copy { font-size: 14px; line-height: 1.6; color: #C9C6BE; margin: 0; text-wrap: pretty; }
.cookie__copy a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cookie__copy a:hover { color: var(--accent); }

.cookie__actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 20px;
}
.cookie__btn {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  min-height: 44px; padding: 12px 20px; border-radius: 0; cursor: pointer;
  border: 1px solid transparent; transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.cookie__btn--primary { background: var(--accent); color: var(--accent-ink); min-width: 120px; }
.cookie__btn--primary:hover { background: #FF6F63; }
.cookie__btn--ghost { background: transparent; color: var(--paper); border-color: rgba(251, 250, 247, .28); min-width: 110px; }
.cookie__btn--ghost:hover { border-color: var(--accent); }
.cookie__btn--text {
  background: transparent; color: #C9C6BE; padding: 12px 6px;
  text-decoration: underline; text-decoration-color: rgba(255, 90, 77, .5); text-underline-offset: 4px;
}
.cookie__btn--text:hover { color: var(--paper); }

.cookie__prefs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.cookie__close {
  position: relative; width: 34px; height: 34px; flex: none;
  background: transparent; border: 1px solid rgba(251, 250, 247, .22); cursor: pointer;
  transition: border-color var(--speed) var(--ease);
}
.cookie__close:hover { border-color: var(--accent); }
.cookie__close span { position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: #C9C6BE; }
.cookie__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.cookie__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.cookie__cats { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; }
.cookie__cat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid rgba(251, 250, 247, .12);
}
.cookie__cat:first-child { border-top: none; }
.cookie__cat-text { min-width: 0; }
.cookie__cat-name { display: block; font-size: 15px; font-weight: 700; color: var(--paper); margin-bottom: 4px; }
.cookie__cat-desc { display: block; font-size: 13px; line-height: 1.55; color: #A8A49B; text-wrap: pretty; }
/* Coral stays a fill: the tag is a coral pill with ink type, not coral text. */
.cookie__always {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  padding: 4px 9px; margin-top: 2px;
}

.cookie__switch { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.cookie__switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie__track {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(251, 250, 247, .14); border: 1px solid rgba(251, 250, 247, .22);
  transition: background .22s ease, border-color .22s ease;
}
.cookie__track::after {
  content: ""; position: absolute; top: 50%; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #C9C6BE;
  transform: translateY(-50%);
  transition: transform .22s var(--ease), background .22s ease;
}
.cookie__switch input:checked ~ .cookie__track { background: var(--accent); border-color: var(--accent); }
.cookie__switch input:checked ~ .cookie__track::after { transform: translateY(-50%) translateX(20px); background: var(--ink); }
.cookie__switch input:focus-visible ~ .cookie__track { outline: 2px solid var(--accent); outline-offset: 2px; }

.cookie__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cookie__actions--prefs { margin-top: 24px; }

@media (max-width: 540px) {
  .cookie { padding: 14px; }
  .cookie__panel { max-width: none; }
  .cookie__actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie__btn--text { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie__panel, .cookie.is-in .cookie__panel, .cookie__backdrop,
  .cookie__track, .cookie__track::after { animation: none; transition: none; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 76px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  color: var(--fg-muted);
}
.theme-toggle__thumb {
  position: absolute; top: calc(50% - 16px); left: 3px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--speed) var(--ease);
}
[data-theme="dark"] .theme-toggle__thumb { transform: translateX(36px); }
.theme-toggle svg { position: relative; z-index: 1; width: 16px; height: 16px; }
/* The icon sitting on the accent thumb turns white; the other stays muted. */
.theme-toggle svg:first-of-type { color: #fff; }
[data-theme="dark"] .theme-toggle svg:first-of-type { color: var(--fg-muted); }
[data-theme="dark"] .theme-toggle svg:last-of-type { color: #fff; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, a.card:hover { transform: none; }
}

/* ---------- Logo marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--s-7); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: opacity var(--speed) var(--ease), filter var(--speed) var(--ease); }
.marquee img:hover { filter: none; opacity: 1; }
[data-theme="dark"] .marquee img { filter: grayscale(1) invert(1) brightness(1.6); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--fg);
  background: transparent; border: 0;
  width: 100%;
  min-height: 64px;
  padding: 20px 44px 20px 0;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; gap: 14px;
}
.accordion__trigger:hover { color: var(--accent-text); }
.accordion__sign {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--accent-text);
  transition: transform var(--speed) var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__sign { transform: translateY(-50%) rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--speed) var(--ease); }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { color: var(--fg-2); font-size: 16px; padding-bottom: 22px; margin: 0; max-width: 68ch; }

/* ---------- Filter pills ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
/* Mobile: the pills collapse into a house custom select (initFilterSelects, 12 Oct 2026). */
.filters-dd { display: none; }
@media (max-width: 699px) {
  .filters--dd .filters-dd { display: block; }
  .filters--dd .filter-btn { display: none; }
}
.filter-btn {
  min-width: 44px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.filter-btn:hover { border-color: var(--fg); color: var(--fg); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-theme="dark"] .filter-btn.is-active { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.filter-empty { color: var(--fg-muted); padding: var(--s-5) 0; }

/* ---------- Testimonial spotlight (dark sections only) ---------- */
.tspot { position: relative; }
.tspot__viewport { overflow: hidden; }
.tspot__track { display: flex; transition: transform .5s var(--ease); }
.tspot__slide { flex: 0 0 100%; padding-inline: 4px; opacity: .28; transition: opacity .5s var(--ease); }
.tspot__slide.is-current { opacity: 1; }
@media (min-width: 900px) { .tspot__slide { flex-basis: 56%; } }
.tspot__quote {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 var(--s-4);
}
.tspot__quote.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tspot__more { background: none; border: 0; color: var(--accent-text); font-family: var(--font-display); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0; min-height: 44px; }
/* --accent-text is Ink, so on an ink band the button needs the paper token. */
.section--ink .tspot__more { color: var(--paper); }
.tspot__who { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; }
.tspot__role { font-size: 13px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.tspot__controls { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.tspot__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--speed) var(--ease);
}
.tspot__btn:hover { background: #fff; color: var(--ink); }
.tspot__dots { display: flex; gap: 0; }
/* 8px visual dot inside a 44px transparent hit area */
.tspot__dot {
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 18px;
  border: 0; background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
}
.tspot__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background var(--speed) var(--ease);
}
.tspot__dot.is-active::before { background: var(--accent); }
.tspot__dots { margin-inline: -12px; }
.tspot__count { margin-left: auto; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- Before / after slider ---------- */
.ba { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); }
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  cursor: ew-resize;
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__label {
  position: absolute; bottom: 14px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(20,20,20,.72); color: #fff;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; }

/* ---------- Utility ---------- */
.placeholder-flag {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px dashed var(--amber);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* ---------- Timeline / process rail ----------
   Interactive: each stage is a button. The rail fills to the selected stage,
   the marker pulses, and a detail panel crossfades below. Progressive: with no
   JS every stage and its detail are visible as a plain list. */
.timeline-c { display: grid; gap: var(--s-5); }
.timeline { position: relative; display: grid; gap: 0; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline__track {
  content: ""; position: absolute;
  left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: var(--border);
  border-radius: 2px;
}
@media (min-width: 900px) {
  .timeline__track { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 2px; }
}
.timeline__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: var(--accent); border-radius: 2px;
  transition: height .55s var(--ease), width .55s var(--ease);
}
@media (min-width: 900px) { .timeline__fill { width: 0; height: 100%; } }

.tl-step {
  position: relative;
  padding: 0 0 30px 30px;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  display: block; width: 100%;
  min-height: 44px;
}
@media (min-width: 900px) { .tl-step { padding: 30px 22px 8px 0; } }
.tl-step:last-child { padding-bottom: 8px; }
.tl-step__dot {
  position: absolute; left: 0; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  z-index: 1;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
@media (min-width: 900px) { .tl-step__dot { top: 0; left: 0; } }
.tl-step.is-in .tl-step__dot { background: var(--accent); border-color: var(--accent); }
.tl-step[aria-selected="true"] .tl-step__dot {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.45);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.tl-step:hover .tl-step__dot { transform: scale(1.25); }
.tl-step__num {
  display: block;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted);
  transition: color var(--speed) var(--ease);
}
.tl-step[aria-selected="true"] .tl-step__num { color: var(--accent-text); }
.tl-step__name {
  display: block;
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
  margin: 6px 0 6px; letter-spacing: -.01em;
  color: var(--fg-muted);
  transition: color var(--speed) var(--ease);
}
.tl-step[aria-selected="true"] .tl-step__name,
.tl-step:hover .tl-step__name { color: var(--fg); }
.tl-step__desc { display: block; font-size: 14.5px; color: var(--fg-muted); margin: 0; max-width: 30ch; }

.tl-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(22px, 3vw, 34px);
}
.tl-panel__body { animation: tl-fade .4s var(--ease); }
@keyframes tl-fade { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tl-panel__body { animation: none; } }
.tl-panel h4 { margin-bottom: 10px; }
.tl-panel ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-panel li { display: grid; grid-template-columns: 10px 1fr; gap: 14px; align-items: start; font-size: 15px; color: var(--fg-2); }
.tl-panel li .dot-mark { margin-top: 8px; }

/* Without JS the panels simply stack, so nothing is hidden. */
.no-js .tl-panel__item + .tl-panel__item { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }

/* ---------- Animated stat counters ---------- */
.stats { display: grid; gap: 0; border-top: 1px solid var(--border); }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.stat { padding: 26px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 700px) {
  .stat { padding: 30px 30px 30px 0; border-bottom: 0; }
  .stat + .stat { border-left: 1px solid var(--border); padding-left: 30px; }
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 62px); font-weight: 900;
  line-height: 1; letter-spacing: -.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
}
.stat__suffix { color: var(--accent-text); }
.stat__label { font-size: 14.5px; color: var(--fg-muted); margin: 10px 0 0; max-width: 26ch; }

/* ---------- Gallery and lightbox ---------- */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery__item {
  position: relative; padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 1; background: var(--surface-2);
}
.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,20,20,.28);
  opacity: 0; transition: opacity var(--speed) var(--ease);
}
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }

/* The author rule would otherwise beat the UA's dialog:not([open]) { display: none },
   leaving a closed lightbox visible and swallowing clicks. Scope layout to [open]. */
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12,12,12,.94);
  padding: 24px;
  border: 0;
}
.lightbox::backdrop { background: rgba(12,12,12,.94); }
.lightbox img { max-width: 100%; max-height: 78vh; border-radius: var(--radius-md); }
.lightbox__cap {
  color: #C9C7C0; font-size: 14px; text-align: center;
  margin-top: 14px; max-width: 60ch;
}
.lightbox__count { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 8px; text-align: center; }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox__btn:hover { background: #fff; color: var(--ink); }
.lightbox__btn--prev { left: 16px; }
.lightbox__btn--next { right: 16px; }
.lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lightbox__close:hover { background: #fff; color: var(--ink); }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--fg-muted); font-weight: 600; }
.crumbs a:hover { color: var(--accent-text); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 700; }
.crumbs__sep { color: var(--border-strong); }

/* ---------- Inline notice ---------- */
.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 15px; color: var(--fg-2);
}
.notice__icon { flex: none; margin-top: 1px; }
.notice p { margin: 0; }
.notice strong { color: var(--fg); }
.notice--success { border-color: rgba(21, 127, 95, .34); background: rgba(21, 127, 95, .08); }
.notice--success .notice__icon { color: var(--success); }
.notice--error { border-color: rgba(200, 50, 31, .34); background: var(--danger-soft); }
.notice--error .notice__icon { color: var(--danger); }
.notice--info { border-color: var(--accent-line); background: var(--accent-soft); }
.notice--info .notice__icon { color: var(--accent-text); }

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 10px;
  width: calc(100% - 32px); max-width: 420px;
  pointer-events: none;
}
.toast {
  display: flex; gap: 12px; align-items: center;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 15px;
  pointer-events: auto;
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
[data-theme="dark"] .toast { background: var(--paper); color: var(--ink); }
.toast__icon { flex: none; color: var(--accent); }
.toast__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.toast__close:hover { opacity: 1; }

/* ---------- Forms: submit states ---------- */
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: var(--s-4); }
.form-status { font-size: 14.5px; font-weight: 600; }
.form-status--pending { color: var(--fg-muted); }
.form-status--error { color: var(--danger); }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 2s; } }

/* ---------- Newsletter inline signup ---------- */
.signup {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid; gap: var(--s-4);
}
@media (min-width: 900px) { .signup { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-6); } }
.signup h3 { color: #fff; margin-bottom: 8px; }
.signup p { color: #C9C7C0; margin: 0; font-size: 15px; }
.signup__row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup__row .input { flex: 1 1 200px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
.signup__row .input::placeholder { color: rgba(255,255,255,.5); }
.signup__row .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,77,.28); }
.signup__small { font-size: 12.5px; color: var(--dim); margin-top: 10px; }

/* ---------- Tabs ---------- */
.tabs__list {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}
.tabs__tab {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--fg-muted);
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 16px; min-height: 48px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.tabs__panel[hidden] { display: none; }

/* ---------- Sticky in-page section nav ---------- */
.pagenav {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.pagenav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pagenav__inner::-webkit-scrollbar { display: none; }
.pagenav a {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--fg-muted);
  white-space: nowrap;
  padding: 15px 14px; min-height: 48px;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent;
}
.pagenav a:hover { color: var(--fg); text-decoration: none; }
.pagenav a.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ---------- Load more ---------- */
.loadmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: var(--s-6); }
.loadmore__count { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.loadmore__bar { width: 160px; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.loadmore__fill { height: 100%; background: var(--accent); transition: width .4s var(--ease); }

/* ---------- Timetable ---------- */
.timetable { border-top: 1px solid var(--border); }
.tt-row {
  display: grid; gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
@media (min-width: 760px) { .tt-row { grid-template-columns: 130px 150px 1fr 170px; align-items: center; } }
.tt-row--head { display: none; }
@media (min-width: 760px) {
  .tt-row--head { display: grid; padding-block: 12px; }
  .tt-row--head span {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted);
  }
}
.tt-day { font-family: var(--font-display); font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.tt-time { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.tt-group { font-size: 15.5px; color: var(--fg-2); }
.tt-venue { font-size: 14px; color: var(--fg-muted); }
@media (max-width: 759px) {
  .tt-time::before { content: "Time "; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .tt-venue::before { content: "Venue "; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
}

/* ---------- Results table ---------- */
.table-scroll { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.rtable th, .rtable td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rtable thead th { border-bottom: 1px solid var(--border-strong); padding: 0; }
.rtable__sort {
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
  padding: 14px 16px; min-height: 48px;
  display: flex; align-items: center; gap: 7px;
}
.rtable__sort:hover { color: var(--fg); }
.rtable th[aria-sort] .rtable__sort { color: var(--accent-text); }
.rtable__arrow { opacity: 0; transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease); }
.rtable th[aria-sort] .rtable__arrow { opacity: 1; }
.rtable th[aria-sort="descending"] .rtable__arrow { transform: rotate(180deg); }
.rtable tbody tr:hover { background: var(--surface-2); }
.rtable td.is-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.rtable__athlete { font-family: var(--font-display); font-weight: 700; }
.rtable__pb {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: 3px 7px; margin-left: 8px;
}

/* ---------- Coach profile cards ---------- */
.coaches { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.coach-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.coach-card__photo { aspect-ratio: 4 / 5; background: var(--surface-2); }
.coach-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-card__body { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.coach-card__name { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin: 0; }
.coach-card__role { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.coach-card__bio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--speed) var(--ease); }
.coach-card__bio.is-open { grid-template-rows: 1fr; }
.coach-card__bio > div { overflow: hidden; }
.coach-card__bio p { font-size: 14.5px; color: var(--fg-muted); margin: 12px 0 0; }
.coach-card__toggle {
  align-self: flex-start; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--accent-text);
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
}
.coach-card__toggle svg { transition: transform var(--speed) var(--ease); }
.coach-card__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Video, click to load ---------- */
.video { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.video::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,.34) 0%, rgba(20,20,20,.16) 45%, rgba(20,20,20,.78) 100%);
  pointer-events: none; z-index: 1;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  background: none; border: 0; cursor: pointer;
  color: #fff; padding: 24px;
}
.video__disc {
  width: clamp(84px, 11vw, 116px); height: clamp(84px, 11vw, 116px);
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.8);
  transition: transform var(--speed) var(--ease);
  position: relative;
}
/* One slow pulse ring, so the control reads as live without becoming a nightclub. */
.video__disc::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--accent);
  animation: video-pulse 2.8s var(--ease) infinite;
}
@keyframes video-pulse {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .video__disc::after { animation: none; opacity: .4; } }
.video__play:hover .video__disc { transform: scale(1.06); }
.video__play:hover .video__disc::after { animation-play-state: paused; }
.video__eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.video__label {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 38px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1;
  text-align: center; text-wrap: balance;
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.video__note {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 18px; font-size: 12.5px;
  color: rgba(255,255,255,.72);
  text-align: center;
  pointer-events: none;
}


/* ==========================================================================
   Promoted section patterns
   Full-width page sections, promoted from the ideas page (since removed) and
   documented in design-system.html. Each one is a whole band rather than a
   control, so they are placed in a page, not nested inside another component.
   ========================================================================== */

/* ---------- Statement rail ---------- */
.mission { padding-top: clamp(40px, 6vw, 88px); overflow: hidden; }
.mission__grid { display: grid; gap: clamp(28px, 4vw, 40px); }
/* The lead column starts on the same left edge as .wrap everywhere else; only the
   rail runs past the grid, off the right of the page. */
.mission__grid { padding-left: max(0px, calc((100% - var(--wrap)) / 2)); }
@media (min-width: 1000px) {
  /* The rail starts inside the photograph's right edge and runs off the page,
     so the overlap is the whole point of the layout. */
  .mission__grid { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 0; align-items: start; }
  .mission__lead { grid-column: 1; grid-row: 1; padding-left: var(--gutter); }
  /* The rail starts just inside the photograph and drops below its top edge,
     as in the reference: the cards sit lower and finish lower. */
  .statement-rail { grid-column: 2; grid-row: 1; margin-left: -5%; margin-top: clamp(34px, 5.2vw, 92px); }
}
.mission__lead { padding-inline: var(--gutter); }
@media (min-width: 1000px) { .mission__lead { padding-right: 0; } }
.mission__figure { margin: 0 0 clamp(24px, 3vw, 36px); }
/* Moved from location.css (11 Oct 2026) so the home page athletes section shares them. */
.mission .eyebrow { display: block; margin-bottom: 10px; }
/* Main photograph caption: the edge-split ink box, set inside the photo since the
   figure starts at the page edge. */
.mission__figure { position: relative; }
.mission__caption {
  position: absolute; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  max-width: min(78%, 34ch); margin: 0;
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
  font-size: 13px; line-height: 1.4; font-weight: 500; color: #FBFAF7;
  background: #141414; box-shadow: 0 10px 30px rgba(20, 20, 20, .18);
}
.mission__caption::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 44px; height: 4px; background: var(--accent);
}

/* Rail photo cropped in on the athlete. `scale` stacks with the hover transform. */
.statement-rail__card img.statement-rail__img--zoom { scale: 1.55; transform-origin: 42% 58%; }
.statement-rail__card img.statement-rail__img--zoom-sm { scale: 1.2; transform-origin: 50% 40%; }
.statement-rail__card img.statement-rail__img--zoom-seaa { scale: 1.45; transform-origin: 32% 58%; }
.statement-rail__card img.statement-rail__img--zoom-esaa { scale: 2.3; transform-origin: 50% 62%; }
.statement-rail__card img.statement-rail__img--zoom-walk { scale: 1.5; transform-origin: 66% 52%; }
.statement-rail__card img.statement-rail__img--zoom-reps { scale: 2.05; transform-origin: 66% 62%; }
.statement-rail__card img.statement-rail__img--zoom-crosara { scale: 1.15; transform-origin: 36% 50%; }
.statement-rail__card img.statement-rail__img--zoom-group { scale: 1.15; transform-origin: 68% 55%; }
.statement-rail__card img.statement-rail__img--zoom-evening { scale: 1.8; transform-origin: 76% 62%; }

/* Cropped to a wide landscape whatever the source file, so the rail has
   something horizontal to overlap. */
.mission__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
.mission__title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(34px, 5vw, 62px); line-height: .96; margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: var(--fg);
}
.mission__lede {
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; font-weight: 500;
  color: var(--fg-2); max-width: 52ch; margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.statement-rail { position: relative; min-width: 0; }
.statement-rail__track {
  display: flex; gap: 6px; margin: 0; padding: 0 var(--gutter) 0 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  cursor: grab;
}
.statement-rail__track::-webkit-scrollbar { display: none; }
.statement-rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.statement-rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (min-width: 1000px) {
  /* No side padding at all here: the rail is meant to bleed off the right
     edge, and any padding would put an extra sliver of card in view. */
  .statement-rail__track { padding: 0; }
  /* Two and a half cards in view at rest, whatever the window width. */
  .statement-rail__card { width: calc((100% - 12px) / 2.5); }
}

.statement-rail__card {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  width: calc((100% - 12px - var(--gutter)) / 1.6); aspect-ratio: 7 / 10;
  background: var(--surface-2); overflow: hidden;
  display: flex; align-items: flex-end;
}
.statement-rail__card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; -webkit-user-drag: none;
}
/* Just enough ground under the words to hold them off the photograph. */
.statement-rail__card:not(.statement-rail__card--ink)::after {
  content: ""; position: absolute; inset: 40% 0 0 0;
  background: linear-gradient(to bottom, rgba(20,20,20,0), rgba(20,20,20,.68));
}
/* The flat card inverts with the theme, so it stays a card rather than a
   hole in the page when the background is ink. */
.statement-rail__card--ink { background: var(--fg); }
.statement-rail__card--ink .statement-rail__quote { color: var(--bg); }
.statement-rail__quote {
  position: relative; z-index: 1; margin: 0; padding: 22px;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.24; color: #FBFAF7;
  text-wrap: pretty;
}
/* Athlete name set as an eyebrow above the caption. */
.statement-rail__name {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
}
.mission__cta { gap: 10px; }
.mission__arrow { display: inline-block; transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.mission__cta:hover .mission__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .mission__arrow { transition: none; } }

.statement-rail__controls { display: flex; gap: 8px; padding: 18px var(--gutter) 0; }
@media (min-width: 1000px) { .statement-rail__controls { padding-left: 0; } }
.statement-rail__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); background: transparent; color: var(--fg);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.statement-rail__btn svg { width: 20px; height: 20px; }
.statement-rail__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.statement-rail__btn:disabled { opacity: .3; cursor: default; }
.statement-rail__btn:disabled:hover { background: transparent; border-color: var(--border-strong); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .statement-rail__btn { transition: none; } }

/* Expanding rail ([data-rail-expand]). At rest it is still and carries no controls
   on wide screens; choosing a card opens it across the page. */
.statement-rail__close { display: none; margin-left: auto; background: var(--fg); border-color: var(--fg); color: var(--bg); }
.statement-rail__close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.statement-rail[data-rail-expand] .statement-rail__card { cursor: pointer; }
.statement-rail[data-rail-expand] .statement-rail__card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.statement-rail[data-rail-expand] .statement-rail__card img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.statement-rail[data-rail-expand]:not(.is-expanded) .statement-rail__card:hover img { transform: scale(1.03); }
@media (min-width: 1000px) {
  .statement-rail[data-rail-expand]:not(.is-expanded) .statement-rail__controls { display: none; }
}
.mission.is-expanded .mission__grid { grid-template-columns: minmax(0, 1fr); }
.mission__grid { position: relative; }
.mission.is-expanded .statement-rail { grid-column: 1; margin: 0; }
.mission.is-expanded .statement-rail__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
/* Cards keep the width they had at rest, so the push is a pure slide. */
.mission.is-expanded .statement-rail__card { width: var(--rail-card-w, calc((100% - 18px - var(--gutter)) / 3.4)); }
.mission.is-expanded .statement-rail__card img { transform: none; }
.mission.is-expanded .statement-rail__controls { display: flex; padding-inline: var(--gutter); }
.mission.is-expanded .statement-rail__close { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .statement-rail[data-rail-expand] .statement-rail__card img { transition: none; }
}

/* ---------- Progress ladder ---------- */
.ladder { padding-top: clamp(32px, 5vw, 64px); }
.ladder__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .ladder__grid { grid-template-columns: .8fr 1.2fr; } }
.ladder__title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.04em;
  font-size: clamp(48px, 8vw, 104px); line-height: .9; margin: 10px 0 16px; color: var(--fg);
}
.ladder__lede { margin: 0; max-width: 30ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--fg-2); }
.ladder__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ladder__row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; }
.ladder__year { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg-muted); }
.ladder__track { display: block; }
.ladder__bar {
  display: flex; align-items: center; justify-content: flex-end;
  width: 0; min-height: 46px; padding-inline: 14px; border: 0; cursor: pointer;
  /* Clipped, so the time label can never escape a collapsed bar and land on
     the year beside it. */
  overflow: hidden; white-space: nowrap;
  background: var(--surface-2); color: var(--fg);
  transition: width .9s cubic-bezier(.22,.61,.36,1), background .24s ease, color .24s ease;
}
.ladder.is-in .ladder__bar { width: var(--pct); }
.ladder__row.is-best .ladder__bar { background: var(--accent); color: var(--accent-ink); }
.ladder__bar:hover, .ladder__bar:focus-visible { background: var(--fg); color: var(--bg); }
.ladder__time { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: -.01em; }
.ladder__note { font-size: 12px; color: var(--fg-muted); margin: 18px 0 0; }
.ladder__row:nth-child(2) .ladder__bar { transition-delay: .08s; }
.ladder__row:nth-child(3) .ladder__bar { transition-delay: .16s; }
.ladder__row:nth-child(4) .ladder__bar { transition-delay: .24s; }

/* ---------- Two-step form ---------- */
.twostep { padding-top: clamp(32px, 5vw, 64px); }
.twostep__inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .twostep__inner { grid-template-columns: 1fr 1fr; } }
.twostep__title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(34px, 5vw, 62px); line-height: .98; margin: 10px 0 14px; color: var(--fg);
}
.twostep__lede { margin: 0; max-width: 32ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--fg-2); }
.twostep__form { border: 1px solid var(--border); padding: clamp(20px, 3vw, 32px); background: var(--surface); }
.twostep__steps { display: flex; gap: 6px; margin-bottom: 22px; }
.twostep__step { width: 26px; height: 4px; background: var(--border); transition: background .3s ease; }
.twostep__step.is-on { background: var(--accent); }
.twostep__fs { border: 0; margin: 0; padding: 0; }
.twostep__legend {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -.015em; color: var(--fg); padding: 0 0 16px;
}
.twostep__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.twostep__pill { position: relative; }
.twostep__pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.twostep__pill span {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; color: var(--fg); cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.twostep__pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.twostep__pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.twostep__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.twostep__field span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.twostep__field input {
  min-height: 48px; padding: 0 14px; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border-strong);
}
.twostep__field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.twostep__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.twostep__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.twostep__next { gap: 10px; }
.twostep__msg { margin: 16px 0 0; font-size: 15px; }
.twostep__msg.is-error { color: var(--fg); font-weight: 600; }
.twostep__msg.is-ok { color: var(--fg); font-weight: 600; }
.twostep__msg.is-ok::before, .twostep__msg.is-error::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .sx-events__item, .sx-events__meta, .sx-stages__fill, .sx-stages__dot, .sx-stages__t,
  .ladder__bar, .twostep__step, .twostep__pill span { transition: none; }
  .sx-events__item[aria-selected="true"] { transform: none; }
}

/* ---------- Session finder ---------- */
.find { padding-top: clamp(32px, 5vw, 64px); }
.find__days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 3vw, 32px); }
.find__day {
  min-height: 44px; padding-inline: 18px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--fg); font-size: 15px; font-weight: 600;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.find__day.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.find__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.find__row {
  display: grid; gap: 4px 20px; align-items: baseline;
  grid-template-columns: 1fr; padding: 18px 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 760px) { .find__row { grid-template-columns: 92px 1fr 200px 120px; } }
.find__time { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; color: var(--fg); }
.find__what { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: var(--fg); }
.find__where, .find__day-tag { font-size: 14px; color: var(--fg-muted); }
.find__note, .sx-wall__note, .sx-loc__flag {
  font-size: 12px; color: var(--fg-muted); margin: 16px 0 0;
}
.sx-loc__flag, .sx-coach__flag {
  display: inline-block; padding: 4px 10px; border: 1px dashed var(--border-strong);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}

/* ---------- Pace tool ---------- */
.pace { padding-top: clamp(32px, 5vw, 64px); }
.pace__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .pace__grid { grid-template-columns: 1fr 1fr; } }
.pace__title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; margin: 10px 0 24px; max-width: 22ch; color: var(--fg);
}
.pace__field { margin-bottom: 20px; }
.pace__field label, .pace__field > span {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px;
}
.pace__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pace__pill {
  min-height: 44px; padding-inline: 18px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--fg); font-size: 15px; font-weight: 600;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.pace__pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pace__field input {
  width: 100%; max-width: 220px; min-height: 52px; padding: 0 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong);
}
.pace__hint { font-size: 12px; color: var(--fg-muted); margin: 0; }
.pace__splits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.pace__split {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.pace__seg { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.pace__lap { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; color: var(--fg); }
.pace__cum { font-size: 14px; color: var(--fg-muted); min-width: 72px; text-align: right; }
.pace__avg { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--fg-2); }

/* ---------- Kit strip ---------- */
.kit { padding-top: clamp(32px, 5vw, 64px); }
.kit__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.5vw, 28px); }
.kit__title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(28px, 3.6vw, 46px); margin: 0; color: var(--fg); }
.kit__track { padding: 0 var(--gutter); scroll-snap-type: x mandatory; }
.kit__card { flex: 0 0 auto; width: clamp(200px, 42vw, 280px); scroll-snap-align: start; }
.kit__ph {
  display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
}
.kit__ph span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); text-align: center; padding: 0 12px; }
.kit__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 2px; color: var(--fg); }
.kit__price { font-size: 14px; color: var(--fg-muted); margin: 0; }


/* ==========================================================================
   Promoted hero patterns
   Two page tops promoted from the hero options review (since removed), plus
   the stat rail that sits under both. Heroes are page-level bands: one per
   page, immediately under the header.
   ========================================================================== */

/* ---------- Stat rail ----------
   minmax(0, 1fr) so a nowrap figure can never force a track wider than its
   container: 1fr has an automatic minimum, and the display-size keys are wide
   enough to push the rail out of any column narrower than the home page's.
   The keys hold one line where there is room for it, and wrap below 1024px. */
.statrail { display: grid; gap: 0; border-top: 1px solid var(--border); margin-top: clamp(40px, 6vw, 72px); }
.statrail__k { white-space: nowrap; }
@media (max-width: 1023px) { .statrail__k { white-space: normal; } }
@media (min-width: 700px) { .statrail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.statrail__item { padding: 26px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 700px) {
  .statrail__item { padding: 28px 28px 28px 0; border-bottom: 0; }
  .statrail__item + .statrail__item { border-left: 1px solid var(--border); padding-left: 28px; }
}
.statrail__k { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--fg); }
.statrail__v { font-size: 16px; color: var(--fg-muted); margin-top: 8px; max-width: 30ch; }

/* ---------- Hero, editorial split ---------- */
.hero-split { padding-block: clamp(40px, 7vw, 88px) 0; }
.hero-split__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 980px) { .hero-split__grid { grid-template-columns: .82fr 1.18fr; } }
.hero-split h1 { font-size: clamp(48px, 8vw, 92px); line-height: .86; margin: 0 0 24px; }
.hero-split__lede { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; font-weight: 500; color: var(--fg-2); max-width: 32ch; margin: 0 0 32px; }
.hero-split__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface-2); }
.hero-split__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero-credit { font-size: 11.5px; color: var(--fg-muted); margin: 10px 0 0; }

/* ---------- Hero, type-led ----------
   The wordmark is sized against its own container rather than the viewport
   (container-type + cqw), so it fills the measure exactly at any width and
   never wraps. */
.hero-type { padding-block: clamp(64px, 11vw, 148px) 0; }
.hero-type__eyebrow { margin-bottom: clamp(20px, 3vw, 36px); }
.hero-type__top { container-type: inline-size; }
.hero-type h1 {
  font-size: 17.4cqw; line-height: .78; margin: 0;
  letter-spacing: -.035em; font-weight: 900; white-space: nowrap;
}
/* Page title: every inner page's H1 at the Wimbledon Park size (15.3cqw of the
   wrap's measure), on pages that do not use the type-led hero. Put
   .wrap--title on the wrap that holds it so cqw resolves against the same
   measure. Lines are set with <br>, never wrapped. */
.wrap--title { container-type: inline-size; }
.page-title {
  font-family: var(--font-display); font-size: 15.3cqw; font-weight: 900;
  line-height: .84; letter-spacing: -.035em; text-transform: uppercase;
  white-space: nowrap; margin: 0 0 clamp(20px, 3vw, 32px);
}
.hero-type__rule { height: 6px; background: var(--accent); margin: clamp(20px, 3vw, 34px) 0 clamp(24px, 3.5vw, 40px); }
.hero-type__cols { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 900px) { .hero-type__cols { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.hero-type__lede { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.38; font-weight: 500; color: var(--fg); max-width: 40ch; margin: 0; }
.hero-type__row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Overlaid header and mega menu ----------
   Moved from home-sections.css (6 Oct 2026) so every page carries the home
   page navigation. */
/* The header is fixed to the viewport so it travels with the page. Over the
   hero photograph it is bare; once the page has moved it takes an ink glass
   ground, which keeps the white links legible over every section below. */
.hero-overlay__header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  transition: background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease;
}
.hero-overlay__header.is-stuck {
  background: rgba(20, 20, 20, .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 -1px 0 rgba(251, 250, 247, .14);
}
.hero-overlay__header-inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(16px, 2.4vw, 28px);
  transition: padding-block .28s ease;
}
.hero-overlay__header.is-stuck .hero-overlay__header-inner { padding-block: clamp(10px, 1.4vw, 16px); }
@media (prefers-reduced-motion: reduce) {
  .hero-overlay__header, .hero-overlay__header-inner { transition: none; }
}
.hero-overlay__brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.hero-overlay__brand img { height: clamp(22px, 2.42vw, 28.6px); width: auto; display: block; }
.hero-overlay__nav { display: none; gap: clamp(18px, 2.6vw, 40px); margin-left: auto; }
@media (min-width: 1080px) { .hero-overlay__nav { display: flex; } }
.hero-overlay__nav a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(14px, 1vw, 16px); color: #FBFAF7; text-decoration: none;
  padding-block: 10px;
}
.hero-overlay__nav a:hover { color: var(--accent); }
.hero-overlay__tools { display: flex; align-items: center; gap: 8px; margin-left: clamp(20px, 3vw, 56px); }
.hero-overlay__pill--sm { min-height: 40px; padding-inline: 20px; font-size: 15px; }
@media (max-width: 1079px) { .hero-overlay__tools .hero-overlay__pill--sm { display: none; } }
.hero-overlay__icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: transparent;
  color: #FBFAF7; cursor: pointer; border-radius: var(--radius-pill);
  transition: background .22s ease, color .22s ease;
}
.hero-overlay__icon svg { width: 22px; height: 22px; }
.hero-overlay__icon:hover { background: rgba(251,250,247,.14); }
@media (min-width: 1080px) { .hero-overlay__icon--menu { display: none; } }

.hero-overlay__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding-inline: clamp(20px, 2vw, 28px);
  border-radius: var(--radius-pill); background: #FBFAF7; color: #141414;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  text-decoration: none;
  transition: background .24s ease, color .24s ease, transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease;
}
.hero-overlay__pill:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,20,20,.28); }
.hero-overlay__pill:active { transform: translateY(0); box-shadow: none; }
.hero-overlay__pill:hover { background: var(--accent); color: var(--accent-ink); }
.hero-overlay__pill--ghost {
  background: transparent; color: #FBFAF7;
  border: 1px solid rgba(251,250,247,.42);
}
.hero-overlay__pill--ghost:hover { background: rgba(251,250,247,.12); border-color: #FBFAF7; color: #FBFAF7; }
.hero-overlay__pill--accent { background: var(--accent); color: var(--accent-ink); }
.hero-overlay__pill--accent:hover { background: #141414; color: #FBFAF7; }
/* ---------- B4 mega menu ---------- */
.hero-overlay { --meganav-left: 46%; }
.hero-overlay__header { z-index: 4; }
.hero-overlay__nav a { position: relative; transition: color .16s ease; }
/* Underline wipes in from the left rather than fading, so the pointer's
   direction of travel is echoed. */
.hero-overlay__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.hero-overlay__nav a:hover::after, .hero-overlay__nav a[aria-expanded="true"]::after { transform: scaleX(1); }
/* Over the paper panel the header has to invert, or white links vanish. */
.hero-overlay.is-menu-open .hero-overlay__nav a { color: #141414; transition: color .28s ease; }
/* On the way out the header returns to white in half the time the paper
   takes to clear. */
.hero-overlay.is-menu-closing .hero-overlay__nav a,
.hero-overlay.is-menu-closing .hero-overlay__icon { color: #FBFAF7; transition: color .12s ease; }

.hero-overlay.is-menu-open .hero-overlay__nav a:hover { color: #141414; }
.hero-overlay.is-menu-open .hero-overlay__icon { color: #141414; }
/* Stuck and open at once: the glass turns to paper so the inverted links and
   the wordmark still have something to sit on. */
.hero-overlay.is-menu-open .hero-overlay__header.is-stuck {
  background: rgba(251, 250, 247, .92); box-shadow: inset 0 -1px 0 var(--border);
}
.hero-overlay.is-menu-open .hero-overlay__header.is-stuck .hero-overlay__brand img { filter: invert(1); }



.hero-overlay__panel {
  position: fixed; top: 0; bottom: 0; right: 0; left: var(--meganav-left);
  z-index: 3; background: #FBFAF7; overflow: auto;
  opacity: 0; clip-path: inset(0 0 0 0);
  transform: translateY(-8px);
  transition: opacity .26s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.hero-overlay__panel.is-open { opacity: 1; transform: none; }
/* Swapped-in panel: paper is already there, so only the list moves. */
.hero-overlay__panel.is-closing {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.hero-overlay__panel.is-swap { transition: none; opacity: 1; transform: none; }
.hero-overlay__panel.is-swap .hero-overlay__panel-link { animation-duration: .3s; }
.hero-overlay__panel-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: clamp(96px, 11vw, 150px) clamp(24px, 3vw, 48px) 40px;
}
.hero-overlay__panel-link {
  position: relative; font-family: var(--font-display); font-weight: 800;
  text-decoration: none;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.02em;
  color: #141414; padding-block: 4px; padding-left: 0;
  transition: padding-left .3s cubic-bezier(.22,.61,.36,1);
}
/* The dot motif leads the link in on hover: it grows from nothing as the
   label steps right. Nothing moves at rest. */
.hero-overlay__panel-link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  transform: translateY(-50%) scale(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1);
}
.hero-overlay__panel-link:hover { padding-left: 24px; }
.hero-overlay__panel-link:hover::before { transform: translateY(-50%) scale(1); }
/* Links settle in one after another as the panel arrives. */
.hero-overlay__panel.is-open .hero-overlay__panel-link {
  animation: meganav-rise .42s cubic-bezier(.22,.61,.36,1) backwards;
}
.hero-overlay__panel.is-open .hero-overlay__panel-link:nth-child(1) { animation-delay: .04s; }
.hero-overlay__panel.is-open .hero-overlay__panel-link:nth-child(2) { animation-delay: .08s; }
.hero-overlay__panel.is-open .hero-overlay__panel-link:nth-child(3) { animation-delay: .12s; }
.hero-overlay__panel.is-open .hero-overlay__panel-link:nth-child(4) { animation-delay: .16s; }
.hero-overlay__panel.is-open .hero-overlay__panel-link:nth-child(5) { animation-delay: .20s; }
@keyframes meganav-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-overlay__panel, .hero-overlay__nav a::after, .hero-overlay__panel-link, .hero-overlay__panel-link::before,
  .hero-overlay__pill, .hero-overlay__icon { transition: none; }
  .hero-overlay__panel.is-open .hero-overlay__panel-link { animation: none; }
  .hero-overlay__panel { transform: none; }
}
@media (max-width: 1079px) { .hero-overlay__panel { display: none; } }

/* ---------- B4 mobile drawer ---------- */
.hero-overlay__drawer {
  position: fixed; inset: 0; z-index: 5; background: #FBFAF7;
  overflow: auto; opacity: 0; transform: translateY(-8px);
  transition: opacity .24s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.hero-overlay__drawer.is-open { opacity: 1; transform: none; }
.hero-overlay__drawer-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: clamp(84px, 20vw, 110px) var(--gutter) 48px;
}
.hero-overlay__drawer-top {
  font-family: var(--font-display); font-weight: 800; text-decoration: none;
  font-size: clamp(24px, 6.4vw, 34px); line-height: 1.25; letter-spacing: -.02em;
  color: #141414; padding-block: 10px; min-height: 44px;
}
.hero-overlay__drawer-sub { display: flex; flex-direction: column; padding: 0 0 14px; }
.hero-overlay__drawer-sub a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 500; color: #3A3A3A; text-decoration: none;
}
.hero-overlay__drawer-sub a:hover { color: #141414; }
.hero-overlay__drawer-cta { margin-top: 20px; }
/* The burger sits above the paper and inverts with it. */
.hero-overlay.is-drawer-open .hero-overlay__icon--menu { color: #141414; }
/* The wordmark is the white artwork, so it inverts to ink over the paper. */
.hero-overlay.is-drawer-open .hero-overlay__brand img { filter: invert(1); }
.hero-overlay.is-drawer-open .hero-overlay__header { z-index: 6; }
@media (min-width: 1080px) { .hero-overlay__drawer { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-overlay__drawer { transition: none; } }


/* ---------- Site header on inner pages ----------
   The home page's overlaid header and mega menu, set on the page ground
   instead of a photograph. The wrapper is sticky so the header keeps its
   place in the flow; panels and the drawer are fixed, as on the home page. */
.hero-overlay.hero-overlay--page {
  position: sticky; top: 0; z-index: 60;
  display: block; min-height: 0; overflow: visible; background: none;
}
.hero-overlay.hero-overlay--page .hero-overlay__header {
  position: relative;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: inset 0 -1px 0 var(--border);
}
/* Same padding as the home header at the top of the page (clamp 16 to 28px). */
.hero-overlay.hero-overlay--page .hero-overlay__nav a,
.hero-overlay.hero-overlay--page .hero-overlay__icon { color: var(--fg); }
.hero-overlay.hero-overlay--page .hero-overlay__nav a:hover { color: var(--fg); }
.hero-overlay.hero-overlay--page.is-menu-open .hero-overlay__nav a,
.hero-overlay.hero-overlay--page.is-menu-open .hero-overlay__icon,
.hero-overlay.hero-overlay--page.is-drawer-open .hero-overlay__icon--menu { color: #141414; }
.hero-overlay.hero-overlay--page .hero-overlay__icon:hover { background: var(--bg-alt); }
.hero-overlay--page .hero-overlay__nav a[aria-current="page"]::after { transform: scaleX(1); }
/* The wordmark is the white artwork; on the light ground it inverts to ink. */
html:not([data-theme="dark"]) .hero-overlay--page .hero-overlay__brand img,
.hero-overlay.hero-overlay--page.is-menu-open .hero-overlay__brand img,
.hero-overlay.hero-overlay--page.is-drawer-open .hero-overlay__brand img { filter: invert(1); }
/* With a panel open the header carries the paper across the panel's width,
   so the inverted links always sit on paper, in either theme. */
.hero-overlay.hero-overlay--page.is-menu-open .hero-overlay__header {
  background: linear-gradient(to right, var(--bg) var(--meganav-left), #FBFAF7 var(--meganav-left));
}
.hero-overlay.hero-overlay--page.is-menu-closing .hero-overlay__nav a,
.hero-overlay.hero-overlay--page.is-menu-closing .hero-overlay__icon { color: var(--fg); }
.hero-overlay--page .hero-overlay__panel { box-shadow: -1px 0 0 var(--border), -24px 0 48px -32px rgba(20,20,20,.35); }
.hero-overlay.hero-overlay--page.is-drawer-open .hero-overlay__header { background: #FBFAF7; box-shadow: none; }

/* Links inside photo captions follow the inline prose link rule: ink type, weight 600 and a
   coral underline. Raw coral text fails contrast, so coral stays the underline (9 Oct 2026). */
figcaption a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
figcaption a:hover { text-decoration-thickness: 3px; }

/* Dark theme navigation (9 Oct 2026): the mega panel, the mobile drawer and the header
   across them use the lighter black, never paper; links and wordmark stay light. */
[data-theme="dark"] .hero-overlay__panel,
[data-theme="dark"] .hero-overlay__drawer { background: #232322; }
[data-theme="dark"] .hero-overlay__panel-link,
[data-theme="dark"] .hero-overlay__drawer-top,
[data-theme="dark"] .hero-overlay.is-menu-open .hero-overlay__nav a,
[data-theme="dark"] .hero-overlay.is-drawer-open .hero-overlay__nav a,
[data-theme="dark"] .hero-overlay.is-menu-open .hero-overlay__icon,
[data-theme="dark"] .hero-overlay.is-drawer-open .hero-overlay__icon,
[data-theme="dark"] .hero-overlay.hero-overlay--page.is-drawer-open .hero-overlay__icon--menu { color: #FBFAF7; }
[data-theme="dark"] .hero-overlay__drawer-sub a { color: #D7D5CE; }
[data-theme="dark"] .hero-overlay.is-menu-open .hero-overlay__brand img,
[data-theme="dark"] .hero-overlay.is-drawer-open .hero-overlay__brand img,
[data-theme="dark"] .hero-overlay.is-menu-open .hero-overlay__header.is-stuck .hero-overlay__brand img { filter: none; }
[data-theme="dark"] .hero-overlay.is-menu-open .hero-overlay__header.is-stuck { background: rgba(35, 35, 34, .94); box-shadow: inset 0 -1px 0 #2E2E2C; }
[data-theme="dark"] .hero-overlay.hero-overlay--page.is-menu-open .hero-overlay__header { background: linear-gradient(to right, var(--bg) var(--meganav-left), #232322 var(--meganav-left)); }
[data-theme="dark"] .hero-overlay.hero-overlay--page.is-drawer-open .hero-overlay__header { background: #232322; }
[data-theme="dark"] .hero-overlay--page .hero-overlay__panel { box-shadow: -1px 0 0 #2E2E2C, -24px 0 48px -32px rgba(0,0,0,.6); }