/* Home page sections: the overlaid navigation and mega menu, the edge-bleed
   splits, the pathway lanes, the disciplines block, the journal grid, the
   quotes band, the map-led location and the closing band. Shared tokens and
   components come from styles.css and home.css. */

/* Stat rail sits straight under the photograph: no top rule, no top gap.
   Coral treatment ties it to the section rules further down the page: a short
   coral bar over each figure, and a coral dot closing each line of support
   copy. Figures stay ink, since coral is a fill colour, not a text colour. */
.hero-overlay__stats { position: relative; }
.hero-overlay__stats .statrail { border-top: 0; margin-top: 0; }
.hero-overlay__stats .statrail__item { padding-top: clamp(24px, 3.5vw, 40px); }
.hero-overlay__stats .statrail__item::before {
  content: ""; display: block; width: 40px; height: 4px;
  background: var(--accent); margin-bottom: clamp(14px, 1.8vw, 20px);
}
.hero-overlay__stats .statrail__k { font-size: clamp(28px, 3.6vw, 44px); }
/* minmax(0,1fr) so a nowrap figure can never force a track wider than the
   wrap and push the page sideways. */
@media (min-width: 700px) {
  .hero-overlay__stats .statrail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .hero-overlay__stats .statrail__k { white-space: normal; }
}
.hero-overlay__stats .statrail__v { font-size: 16px; color: var(--fg-2); line-height: 1.5; }
@media (min-width: 700px) {
  .hero-overlay__stats .statrail__item { padding-bottom: clamp(28px, 4vw, 44px); }
}

/* ---------- Stat rail, coral band variant ----------
   The whole rail runs as a Track Coral band with ink type. Remove the
   --band class from the wrapper to roll back to the hairline rail. */
.hero-overlay__stats--band { background: var(--accent); }
.hero-overlay__stats--band .statrail__item {
  padding-block: clamp(28px, 4vw, 48px);
  border-color: rgba(20, 20, 20, .22);
}
.hero-overlay__stats--band .statrail__item::before {
  background: #141414; width: 32px; height: 3px;
}
.hero-overlay__stats--band .statrail__k { color: #141414; }
.hero-overlay__stats--band .statrail__v { color: #141414; opacity: .82; }
@media (min-width: 700px) {
  .hero-overlay__stats--band .statrail__item + .statrail__item { border-left-color: rgba(20, 20, 20, .22); }
}

/* ---------- B4 Overlaid nav, full screen ---------- */
.hero-overlay {
  position: relative; min-height: min(94vh, 940px);
  display: grid; align-content: end; overflow: hidden; background: #141414;
}
.hero-overlay__media { position: absolute; inset: 0; }
.hero-overlay__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* Two soft gradients only: the nav and the type each get just enough
   ground to sit on, so the photograph is not flattened by a full wash. */
.hero-overlay__media::before {
  content: ""; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(to bottom, rgba(20,20,20,.55), rgba(20,20,20,0));
}
.hero-overlay__media::after {
  content: ""; position: absolute; inset: 30% 0 0 0;
  background: linear-gradient(to bottom, rgba(20,20,20,0), rgba(20,20,20,.72));
}

.hero-overlay__inner { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 72px) clamp(6px, 0.8vw, 10px); color: #FBFAF7; }
.hero-overlay__title {
  font-size: clamp(38px, 6.4vw, 92px); line-height: 1.0; letter-spacing: -.035em;
  font-weight: 900; color: #FBFAF7; margin: 0 0 clamp(14px, 1.6vw, 20px);
  text-transform: none; text-wrap: balance;
}
/* House rule: the hero lede sets on two balanced lines at desktop. */
.hero-overlay__lede {
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.42; font-weight: 400;
  color: #FBFAF7; max-width: 44ch; margin: 0 0 clamp(18px, 2vw, 24px);
  text-wrap: balance;
}
.hero-overlay__row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-overlay__creditwrap { position: relative; z-index: 1; padding-block: clamp(30px, 3.5vw, 48px) 20px; }
.hero-overlay__credit { margin: 0; font-size: 11.5px; color: rgba(251,250,247,.72); }
/* The dot motif opening the credit line. */
.hero-overlay__credit::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; position: relative; top: -1px;
}

/* Scroll cue, mobile and tablet only: the hero fills the screen there, so a
   thin rail with the coral dot travelling down it says there is more below. */
/* Top right of the hero copy, level with the first (short) line of the H1, so it
   uses the empty space there and never meets the credit or the theme toggle. */
.hero-overlay__scroll {
  position: absolute; top: clamp(40px, 6vw, 72px); right: var(--gutter, 20px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0;
  color: #FBFAF7; text-decoration: none;
}
.hero-overlay__scroll-track {
  position: relative; width: 1px; height: 30px; background: rgba(251,250,247,.4); overflow: visible;
}
.hero-overlay__scroll-dot {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--accent);
  animation: hero-scroll-cue 2.2s cubic-bezier(.45,0,.25,1) infinite;
}
.hero-overlay__scroll-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}
@keyframes hero-scroll-cue {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(23px); opacity: 1; }
  100% { transform: translateY(23px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-overlay__scroll-dot { animation: none; top: auto; bottom: 0; }
}
@media (max-width: 899px) {
  .hero-overlay__creditwrap { padding-top: 24px; }
  /* Sized to the small viewport (browser bars showing) so the headline, buttons and
     scroll cue all sit inside the first screen. */
  .hero-overlay { min-height: 86vh; min-height: 86svh; }
  .hero-overlay__inner { padding-bottom: 0; }
}
@media (min-width: 900px) { .hero-overlay__scroll { display: none; } }

/* ---------- Free trial ----------
   Option C's editorial move: the text column keeps the wrap's left margin
   while the photograph runs off the right edge of the page. On narrow
   screens it stacks and the picture goes full width. */
.edge-split { padding-block: clamp(48px, 8vw, 104px); }
.edge-split__grid { display: grid; gap: clamp(32px, 5vw, 64px); }
.edge-split__text { padding-inline: var(--gutter); }
.edge-split__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: clamp(18px, 2.4vw, 28px); }
.edge-split__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.02; letter-spacing: -.03em;
  margin: 14px 0 clamp(16px, 2vw, 24px);
}
/* The copy block is graded rather than flat: a light large lede, then a
   hairline, then the detail set smaller against a display sub-heading with the
   dot motif leading it in. Three distinct sizes, three distinct weights. */
.edge-split__lede {
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.34; font-weight: 300;
  letter-spacing: -.012em; color: var(--fg); max-width: 34ch; margin: 0;
}
.edge-split__p {
  font-size: 18px; line-height: 1.68; color: var(--fg-2);
  margin: 0 0 16px; max-width: 46ch;
}
/* The detail paragraph carries the hairline that used to sit above the
   sub-heading, with the short coral bar riding on the rule. Declared after
   .edge-split__p so its margin is not reset by the shorthand there. */
.edge-split__detail {
  position: relative;
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--border);
}
.edge-split__detail::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: calc(40px + (100% - 40px) * var(--fill, 0)); height: 3px; background: var(--accent);
}

.tlist { list-style: none; margin: clamp(24px, 3vw, 32px) 0 clamp(28px, 3.5vw, 40px); padding: 0; display: flex; flex-direction: column; }
.tlist li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 16px; line-height: 1.5; color: var(--fg);
  padding: 14px 0; border-top: 1px solid var(--border);
}
.tlist li:last-child { border-bottom: 1px solid var(--border); }
.tlist__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--accent); }

.edge-split__media { margin: 0; }
.edge-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
/* The credit is a dark glass card over the bottom-left of the photograph, with a
   coral rule over it, at every width (mobile matched to desktop 12 Oct 2026). */
.edge-split__media { position: relative; }
.edge-split__media figcaption {
  position: absolute; left: 16px; bottom: 16px;
  margin: 0; padding: 14px 16px;
  max-width: min(calc(100% - 32px), 34ch);
  font-size: 14px; line-height: 1.4; font-weight: 500; color: #FBFAF7;
  background: rgba(20, 20, 20, .62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(20, 20, 20, .18);
}
.edge-split__media figcaption::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 44px; height: 4px; background: var(--accent);
}

@media (min-width: 980px) {
  .edge-split__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
  }
  .edge-split__text {
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-right: 0;
  }
  .edge-split__media img { aspect-ratio: 3 / 4; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
  /* Desktop: the card breaks out past the photograph's left edge. */
  .edge-split__media figcaption {
    left: clamp(-28px, -2vw, -16px); bottom: clamp(20px, 3vw, 40px);
    padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px);
    max-width: min(78%, 34ch); font-size: 13px;
  }
}

/* The H1 now carries the proposition itself, set as display type. The
   supporting sentence sits under it as the lede. */
.hero-overlay__h1 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -.035em;
  color: #FBFAF7;
  max-width: 18ch;
}

/* ---------- Training pathway ----------
   An ink band after the paper trial section, so the page alternates dark,
   light, dark. The four stages are set as track lanes: a coral start line
   drawn across the top, a dot where each lane begins, and the stage number
   as outlined display type. The line draws once when the block arrives. */
.pathlanes {
  background: #141414;
  color: #FBFAF7;
  padding-block: clamp(56px, 9vw, 112px);
}
[data-theme="dark"] .pathlanes { background: #1B1B1A; border-top: 1px solid #2E2E2C; border-bottom: 1px solid #2E2E2C; }
.pathlanes .eyebrow { color: rgba(251,250,247,.62); }
/* The headline holds the left, the copy takes the space on the right: a hairline
   separates the two columns, and the standfirst sits at the top of that column
   with the detail beneath it. Colours come from the tokens so the block reads on
   either band. */
.pathlanes__head { margin-bottom: clamp(40px, 6vw, 72px); display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 900px) {
  .pathlanes__head {
    grid-template-columns: minmax(0, 8fr) minmax(0, 9fr);
    gap: clamp(32px, 4.5vw, 64px); align-items: start;
  }
  .pathlanes__head-right {
    padding-left: clamp(32px, 4.5vw, 64px);
    border-left: 1px solid rgba(251,250,247,.16);
  }
  .pathlanes--slate .pathlanes__head-right { border-left-color: var(--border); }
}
.pathlanes__head-left { max-width: 16ch; }
.pathlanes__lede {
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.32; font-weight: 300;
  letter-spacing: -.012em; color: var(--fg); margin: 0 0 clamp(14px, 1.6vw, 18px); max-width: 34ch;
}
.pathlanes__p {
  font-size: 17px; line-height: 1.62; color: var(--fg-2);
  margin: 0; max-width: 52ch;
}
/* On the ink variant the tokens do not flip, so the two are set to paper. */
.pathlanes:not(.pathlanes--slate) .pathlanes__lede { color: #FBFAF7; }
.pathlanes:not(.pathlanes--slate) .pathlanes__p { color: rgba(251,250,247,.76); }
/* Same coral rule that heads the trial section, so both blocks open the same way. */
.pathlanes__kicker { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: clamp(18px, 2.4vw, 28px); }
.pathlanes__h {
  color: #FBFAF7; font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.03em;
  margin: 14px 0 0;
}

.pathlanes__lanes { position: relative; padding-top: 3px; }
/* The start line is the progress bar: a dim full-width track with a coral
   fill that advances to the stage currently lit. */
.pathlanes__line {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(251,250,247,.16);
}
.pathlanes__line-fill {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}

.lanes { display: grid; }
@media (min-width: 900px) { .lanes { grid-template-columns: repeat(4, 1fr); } }
.lane {
  position: relative;
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0;
  font: inherit; color: inherit; cursor: pointer;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 32px) clamp(28px, 3.5vw, 40px) 0;
  border-top: 1px solid rgba(251,250,247,.16);
}
@media (min-width: 900px) {
  .lane { border-top: 0; padding-left: clamp(20px, 2.4vw, 32px); }
  .lane:first-child { padding-left: 0; }
}
.lane__dot {
  position: absolute; top: -6px; left: 0;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  opacity: 0; transform: scale(.4);
  transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.3,.64,1), box-shadow .45s ease;
}
@media (min-width: 900px) { .lane + .lane .lane__dot { left: clamp(20px, 2.4vw, 32px); } }
.lane.is-in .lane__dot { opacity: 1; transform: scale(1); }
.lane__dot { box-shadow: 0 0 0 0 var(--accent-soft); }
.lane.is-lit .lane__dot { box-shadow: 0 0 0 7px var(--accent-soft); }

.lane__num {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 5.6vw, 76px); line-height: .84; letter-spacing: -.05em;
  color: rgba(251,250,247,.34);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.lane__name {
  display: block;
  color: #FBFAF7; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.01em; margin: 0 0 10px;
}
.lane__desc { display: block; font-size: 15px; line-height: 1.55; color: rgba(251,250,247,.72); margin: 0; max-width: 30ch; }

.pathlanes__link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: #FBFAF7; text-decoration: none;
}
.pathlanes__link svg { color: var(--accent); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.pathlanes__link:hover { color: #FBFAF7; }
.pathlanes__link:hover svg { transform: translateX(5px); }

/* Lit stage: the outline number fills to coral and the copy brightens. No
   panel tint, so the change reads as attention moving along the track. */
.lane__num { transition: color .5s ease; }
.lane[aria-pressed="true"] .lane__num { color: var(--accent); }
.lane__desc { transition: color .5s ease; }
.lane[aria-pressed="true"] .lane__desc { color: rgba(251,250,247,.9); }
.lane:hover .lane__num { color: rgba(251,250,247,.62); }
.lane:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pathlanes__line-fill, .lane__dot, .lane__num, .lane__desc, .pathlanes__link svg { transition: none; }
  .lane__dot { opacity: 1; transform: none; }
}

/* Alternative band: warm Slate rather than ink. Swap by adding or removing
   pathlanes--slate on the section; the ink version is untouched underneath. In
   dark mode it becomes the lifted surface so the band still separates from
   the page. */
.pathlanes--slate { background: #EDEBE5; color: var(--ink); }
[data-theme="dark"] .pathlanes--slate { background: #1B1B1A; }
.pathlanes--slate .eyebrow { color: var(--fg-muted); }
.pathlanes--slate .pathlanes__h,
.pathlanes--slate .lane__name { color: var(--fg); }
.pathlanes--slate .lane__desc { color: var(--fg-muted); }
.pathlanes--slate .lane[aria-pressed="true"] .lane__desc { color: var(--fg-2); }
.pathlanes--slate .lane { border-top-color: var(--border-strong); }
.pathlanes--slate .pathlanes__line { background: rgba(20,20,20,.14); }
[data-theme="dark"] .pathlanes--slate .pathlanes__line { background: rgba(251,250,247,.16); }
.pathlanes--slate .lane__num { color: var(--border-strong); }
[data-theme="dark"] .pathlanes--slate .lane__num { color: rgba(251,250,247,.34); }
.pathlanes--slate .lane:hover .lane__num { color: var(--muted); }
.pathlanes--slate .lane[aria-pressed="true"] .lane__num { color: var(--accent); }
.pathlanes--slate .pathlanes__link { color: var(--fg); }
.pathlanes--slate .pathlanes__link:hover { color: var(--fg); }

/* Hero wordmark: Libre Franklin, like everything else on the site. It will
   never be an exact match for the logotype, which is a Helvetica-style
   grotesk, so it is set heavy and tight and read as a headline rather than as
   a reproduction of the mark. The header carries the real artwork. */
.hero-overlay__title { letter-spacing: -.05em; }

/* ---------- Inside SpeedPro ----------
   The mirror of the trial section: photograph off the LEFT edge, text held on
   the grid, so the page leans right then left rather than the same way twice. */
.edge-split-alt { padding-block: clamp(48px, 8vw, 104px) clamp(28px, 4vw, 56px); }
.edge-split-alt__grid { display: grid; gap: clamp(32px, 5vw, 64px); }
.edge-split-alt__text { padding-inline: var(--gutter); }
.edge-split-alt__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: clamp(18px, 2.4vw, 28px); }
.edge-split-alt__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.02; letter-spacing: -.03em;
  margin: 14px 0 clamp(16px, 2vw, 24px);
}
/* Copy graded as in the trial section: a light large lede, a hairline with a
   coral bar riding on it, then the detail paragraph. */
.edge-split-alt__lede {
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.34; font-weight: 300;
  letter-spacing: -.012em; color: var(--fg); max-width: 34ch; margin: 0;
}
.edge-split-alt__p {
  font-size: 18px; line-height: 1.68; color: var(--fg-2);
  margin: 0 0 16px; max-width: 46ch;
}
.edge-split-alt__detail {
  position: relative;
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--border);
}
.edge-split-alt__detail::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: calc(40px + (100% - 40px) * var(--fill, 0)); height: 3px; background: var(--accent);
}
.edge-split-alt__media { margin: 0; }
.edge-split-alt__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.edge-split-alt__media { position: relative; }
.edge-split-alt__media figcaption {
  position: absolute; right: 16px; bottom: 16px;
  margin: 0; padding: 14px 16px;
  max-width: min(calc(100% - 32px), 34ch);
  font-size: 14px; line-height: 1.4; font-weight: 500; color: #FBFAF7;
  background: rgba(20, 20, 20, .62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(20, 20, 20, .18);
}
.edge-split-alt__media figcaption::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 44px; height: 4px; background: var(--accent);
}

.edge-split-alt__link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--fg); text-decoration: none;
}
.edge-split-alt__link svg { color: var(--accent); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.edge-split-alt__link:hover { color: var(--fg); }
.edge-split-alt__link:hover svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .edge-split-alt__link svg { transition: none; } }

@media (min-width: 980px) {
  .edge-split-alt__grid {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
  }
  .edge-split-alt__text {
    padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-left: 0;
  }
  .edge-split-alt__media img { aspect-ratio: 3 / 4; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
  /* Credit card, mirrored: it breaks the photograph's bottom-right corner,
     since this picture runs off the left edge. */
  /* Desktop: mirrored, the card breaks out past the photograph's right edge. */
  .edge-split-alt__media figcaption {
    right: clamp(-28px, -2vw, -16px); bottom: clamp(20px, 3vw, 40px);
    padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px);
    max-width: min(78%, 34ch); font-size: 13px;
  }
}

/* ---------- Journal ----------
   Option B's filter pills and post cards, kept as they are, under an Option C
   section head: coral rule, eyebrow, heavy uppercase heading. Held inside the
   wrap, since the two sections above it both bleed. */
.journal { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 8vw, 104px); }
.journal__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s-4) var(--s-6);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.journal__headtext { max-width: 60ch; }
.journal__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: clamp(18px, 2.4vw, 28px); }
.journal__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.03em;
  margin: 14px 0 clamp(14px, 1.6vw, 20px);
}
.journal__lede { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 56ch; }
.journal__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.journal__link svg { color: var(--accent); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.journal__link:hover svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .journal__link svg { transition: none; } }

/* ---------- What we coach ----------
   The two disciplines as a pair of tall cards, with the distances set as the
   largest type in the section and each one closed by the coral dot. The card
   is the link: the whole panel takes the hover, and only the rule and the
   arrow move. */
.disciplines { padding-block: clamp(40px, 6vw, 80px); background: var(--bg-alt); }
.disciplines__head { max-width: 62ch; margin-bottom: clamp(32px, 4.5vw, 56px); }
.disciplines__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: clamp(18px, 2.4vw, 28px); }
.disciplines__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.03em;
  margin: 14px 0 clamp(14px, 1.6vw, 20px);
}
.disciplines__lede { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 56ch; }

.disciplines__pair { display: grid; gap: var(--s-4); }
@media (min-width: 860px) { .disciplines__pair { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.disciplines__card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: clamp(26px, 3.5vw, 44px);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-xl); text-decoration: none; color: var(--fg);
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.disciplines__card:hover { border-color: var(--fg); transform: translateY(-3px); color: var(--fg); }
/* Label as a pill, following the screen grab: tinted fill, accent hairline,
   full-strength ink type. */
.disciplines__label {
  display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg);
}
.disciplines__events {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -.04em;
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(14px, 1.8vw, 20px);
}
.disciplines__desc { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 clamp(20px, 2.6vw, 30px); max-width: 30ch; }
.disciplines__more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg);
}
.disciplines__more svg { color: var(--accent); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.disciplines__card:hover .disciplines__more svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .disciplines__card, .disciplines__more svg { transition: none; }
  .disciplines__card:hover { transform: none; }
}

/* ---------- What we coach, ink band ----------
   Sits straight after Inside SpeedPro, so it returns the page to ink. The
   cards become transparent panels with a paper hairline rather than filled
   boxes: on ink, a filled card would read as a second band. */
.disciplines--ink { background: #141414; }
.disciplines--ink .eyebrow { color: rgba(251,250,247,.62); }
.disciplines--ink .disciplines__h,
.disciplines--ink .disciplines__events,
.disciplines--ink .disciplines__more { color: #FBFAF7; }
.disciplines--ink .disciplines__lede,
.disciplines--ink .disciplines__desc { color: rgba(251,250,247,.76); }
.disciplines--ink .disciplines__label, .disciplines__pair--type .disciplines__label {
  color: #FBFAF7;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.disciplines--ink .disciplines__card {
  background: transparent; border-color: rgba(251,250,247,.22); color: #FBFAF7;
}
.disciplines--ink .disciplines__card:hover { border-color: #FBFAF7; color: #FBFAF7; }

/* ---------- What we coach, type-led variant ----------
   The hairline panels are dropped: the two events carry the block as large
   coral display type, split by a single vertical rule. Coral stays a fill in
   spirit here, since at this size it is a mark rather than running text. */
.disciplines__pair--type { gap: 0; }
.disciplines__pair--type .disciplines__card {
  background: transparent; border: 0; border-radius: 0;
  padding: clamp(24px, 3vw, 30px) 0;
  border-top: 1px solid rgba(251,250,247,.16);
}
.disciplines__pair--type .disciplines__card:hover { transform: none; border-color: rgba(251,250,247,.16); }
.disciplines__pair--type .disciplines__events {
  color: var(--accent);
  font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: -.04em;
  margin: clamp(14px, 1.6vw, 18px) 0 clamp(10px, 1.2vw, 14px);
}
.disciplines__pair--type .disciplines__desc { font-size: 16px; max-width: 52ch; margin-bottom: clamp(14px, 1.6vw, 18px); }
@media (min-width: 860px) {
  .disciplines__pair--type { grid-template-columns: 1fr 1px 1fr; gap: 0; }
  .disciplines__pair--type .disciplines__card { border-top: 0; padding: 0 clamp(32px, 4vw, 60px) 0 0; }
  .disciplines__pair--type .disciplines__card + .disciplines__card { padding: 0 0 0 clamp(32px, 4vw, 60px); }
  .disciplines__pair--type::before {
    content: ""; grid-column: 2; grid-row: 1; background: rgba(251,250,247,.16);
  }
  .disciplines__pair--type .disciplines__card:first-of-type { grid-column: 1; grid-row: 1; }
  .disciplines__pair--type .disciplines__card + .disciplines__card { grid-column: 3; grid-row: 1; }
}

/* ---------- Sections carried over whole ----------
   Training Series, location, the call to action band, the FAQ and partners run
   on the shared components in styles.css rather than Option C classes, since
   nothing about them needed a new treatment. The one Option C detail they take
   is the coral rule above the eyebrow, so every section on the page opens the
   same way. */
.page-sec .eyebrow::before {
  content: ""; display: block;
  width: 56px; height: 4px; background: var(--accent);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
/* Centred blocks need the rule centred with them. */
.page-sec [style*="text-align:center"] .eyebrow::before { margin-inline: auto; }

/* ---------- Map-led location ----------
   The map takes the full width with the details as a card over it. Still
   click-to-load, so nothing third-party runs before it is asked for. */
/* ---------- S14 Map-led location ---------- */
.map-led { position: relative; padding-top: clamp(32px, 5vw, 64px); }
.map-led__frame {
  position: relative; height: clamp(420px, 62vh, 640px);
  background: var(--surface-2); display: grid; place-items: center;
  border: 0; overflow: hidden;
}
@media (min-width: 900px) {
  /* Tall enough for the card to sit inside the frame, and the load prompt
     moves to the right half so the card is never on top of its button. */
  .map-led__frame { height: clamp(560px, 78vh, 760px); place-items: center start; }
  .map-led__frame .map-led__prompt { margin-left: clamp(24px, 5vw, 72px); }
}
.map-led__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* The load prompt is a card, so the map's empty state is noticed rather than read
   as a grey gap: paper surface, hairline, coral rule over it, body-size type. */
.map-led__prompt {
  position: relative; text-align: left; max-width: 38ch; margin: 24px;
  padding: clamp(24px, 3vw, 32px); padding-top: clamp(30px, 3.6vw, 38px);
  background: #141414; color: #FBFAF7; border: 1px solid #141414; border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(20, 20, 20, .18);
}
/* Dark theme reverses it: a paper card on the dark map frame. */
[data-theme="dark"] .map-led__prompt { background: #FBFAF7; color: #141414; border-color: #FBFAF7; box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
[data-theme="dark"] .map-led__prompt p { color: #3A3A3A; }
[data-theme="dark"] .map-led__prompt p::before { color: #6E6C66; }
.map-led__prompt::before { content: ""; position: absolute; left: clamp(24px, 3vw, 32px); top: 0; width: 44px; height: 4px; background: var(--accent); }
.map-led__prompt p { font-size: 16px; line-height: 1.5; color: #D7D5CE; margin: 0 0 18px; text-wrap: pretty; }
.map-led__prompt p::before { content: "Map"; display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A8A49B; margin-bottom: 8px; }
/* The card sits over the map on wide screens and beneath it on narrow ones,
   where an overlay would cover most of the map. */
.map-led__overlay { margin-top: 16px; }
@media (min-width: 900px) {
  .map-led__overlay {
    position: absolute; left: 0; right: 0; bottom: clamp(24px, 4vw, 48px);
    margin-top: 0; pointer-events: none;
  }
  .map-led__overlay { display: flex; justify-content: flex-end; }
  .map-led__card { max-width: 420px; pointer-events: auto; }
}
.map-led__card {
  background: var(--bg); border: 1px solid var(--border);
  padding: clamp(20px, 2.6vw, 32px);
}
.map-led__title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1; margin: 10px 0 20px; color: var(--fg);
}
.map-led__rows { margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.map-led__rows > div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.map-led__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.map-led__rows dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.map-led__rows dd { margin: 0; font-size: 16px; color: var(--fg); }
.map-led__rows dd .sx-loc__flag { margin-left: 8px; }
.map-led__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* The card is the only place a coral rule would double up with the section
   head above it. */
.map-led__card .eyebrow::before { display: none; }
.map-led__lede { font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: -8px 0 20px; }
/* The section head moved into the card, so the band is the map: no Slate
   padding above or below it. */
#location.page-sec { padding-block: 0; }
#location .map-led { padding-top: 0; }
/* The frame and the card share one grid cell, so the band grows to fit the
   card instead of the card overflowing a fixed-height frame. */
@media (min-width: 900px) {
  #location .map-led { display: grid; }
  #location .map-led__frame {
    grid-area: 1 / 1; height: auto; min-height: clamp(560px, 78vh, 760px);
  }
  #location .map-led__overlay {
    grid-area: 1 / 1; position: relative; inset: auto;
    align-self: end; margin: clamp(24px, 4vw, 48px) 0;
    /* Pushed 150px right, capped at the gutter so it never causes a sideways
       scroll on narrower screens. */
    padding-right: 0;
    transform: translateX(min(150px, calc((100vw - 100%) / 2)));
  }
}


/* ---------- What we coach, head beside the events ----------
   Above 1000px the section head sits in a left column and the two events
   stack to its right, which halves the height of the block. */
@media (min-width: 1000px) {
  .disciplines--ink .wrap {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 5vw, 88px); align-items: start;
  }
  .disciplines--ink .disciplines__head { margin-bottom: 0; }
  .disciplines--ink .disciplines__pair--type { grid-template-columns: 1fr; gap: 0; }
  .disciplines--ink .disciplines__pair--type::before { display: none; }
  .disciplines--ink .disciplines__pair--type .disciplines__card {
    padding: clamp(22px, 2.4vw, 30px) 0; border-top: 1px solid rgba(251,250,247,.16);
  }
  .disciplines--ink .disciplines__pair--type .disciplines__card:first-of-type { border-top: 0; padding-top: 0; }
  .disciplines--ink .disciplines__pair--type .disciplines__card,
  .disciplines--ink .disciplines__pair--type .disciplines__card + .disciplines__card { grid-column: 1; grid-row: auto; padding-left: 0; }
  .disciplines--ink .disciplines__pair--type .disciplines__card:last-of-type { padding-bottom: 0; }
}

/* ---------- Journal, lead story ----------
   The first post runs across two tracks with the photograph beside the copy,
   so the grid opens with one story rather than six equal cards. */
.post-card--lead .card__text { -webkit-line-clamp: unset; display: block; }
.post-card--lead .card__media img { object-position: 50% 30%; }
/* The lead story runs on ink, so it reads as the featured post rather than a
   larger version of the cards beside it. */
.journal .post-card--lead { background: #141414; border-color: #141414; }
.journal .post-card--lead .card__title { color: #FBFAF7; }
/* The dot motif: the full stop closing the headline, in Track Coral. */
.journal .post-card--lead .card__title::after { content: "."; color: var(--accent); }
.journal .post-card--lead .card__meta { color: rgba(251,250,247,.62); }
/* The dot motif is coral on every card, not just the lead. */
.journal .dot-mark { background: var(--accent); }
/* Text-only cards carry the title instead of a photograph, so they open with a
   coral bar and set the title larger and heavier. */
.journal .post-card:not(.post-card--image)::before {
  content: ""; width: 40px; height: 4px; background: var(--accent); flex: 0 0 auto;
  margin-bottom: 6px;
}
.journal .post-card:not(.post-card--image) .card__title {
  font-size: clamp(32px, 3.1vw, 41px); line-height: 1.04;
  font-weight: 800; letter-spacing: -.02em;
}
.journal .post-card:not(.post-card--image) .card__text { display: none; }
/* The dot motif closes the headline, as on the lead story. */
/* Pillars without photography (Coaching Insights, Athlete Insights, Training
   Series) sit on Slate with a hairline: the lead card stays the only ink block. */
.journal .post-card[data-category="insights"],
.journal .post-card[data-category="athlete-insights"],
.journal .post-card[data-category="series"] { background: var(--surface-2); border-color: var(--border); }
.journal .post-card[data-category="insights"] .card__title,
.journal .post-card[data-category="athlete-insights"] .card__title,
.journal .post-card[data-category="series"] .card__title { color: var(--fg); }
.journal .post-card[data-category="insights"] .card__meta,
.journal .post-card[data-category="athlete-insights"] .card__meta,
.journal .post-card[data-category="series"] .card__meta { color: var(--fg-muted); }
.journal .post-card[data-category="insights"] .link-arrow,
.journal .post-card[data-category="athlete-insights"] .link-arrow,
.journal .post-card[data-category="series"] .link-arrow { color: var(--fg); }
.journal a.post-card[data-category="insights"]:hover { border-color: var(--accent); }
/* In dark mode an ink card is a hole in the page, so the lead, photograph and
   insights cards take the ordinary dark surface and hairline instead. */
[data-theme="dark"] .journal .post-card--lead,
[data-theme="dark"] .journal .post-card--photo,
[data-theme="dark"] .journal .post-card[data-category="insights"] {
  background: var(--surface); border-color: var(--border);
}
[data-theme="dark"] .journal .post-card--lead .card__title,
[data-theme="dark"] .journal .post-card--photo .card__title,
[data-theme="dark"] .journal .post-card[data-category="insights"] .card__title,
[data-theme="dark"] .journal .card__by { color: var(--fg); }
[data-theme="dark"] .journal .post-card--lead .card__meta,
[data-theme="dark"] .journal .post-card--photo .card__meta,
[data-theme="dark"] .journal .post-card[data-category="insights"] .card__meta,
[data-theme="dark"] .journal .card__by-role { color: var(--fg-muted); }
[data-theme="dark"] .journal .post-card--lead .card__text,
[data-theme="dark"] .journal .post-card--photo .card__text { color: var(--fg-muted); }
[data-theme="dark"] .journal .card__by { border-top-color: var(--border); }
[data-theme="dark"] .journal .post-card[data-category="insights"] .link-arrow { color: var(--fg); }
/* The photograph card keeps paper type: the copy still sits on the image. */
[data-theme="dark"] .journal .post-card--photo .card__title { color: #FBFAF7; }
[data-theme="dark"] .journal .post-card--photo .card__meta { color: rgba(251,250,247,.72); }
[data-theme="dark"] .journal .post-card--photo .card__text { color: rgba(251,250,247,.82); }

/* One hover line across every journal card: full-strength Track Coral. */
.journal a.post-card:hover { border-color: var(--accent); }
.journal a.post-card[data-category="insights"]:hover { border-color: var(--accent); }
.card__by {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg);
}
.card__by-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card__by .link-arrow { margin: 0 0 0 auto; flex-shrink: 0; align-self: flex-end; align-self: last baseline; }
.card__by-text { align-self: last baseline; }
.card__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
}
.card__by-role {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted);
}
.journal .post-card:not(.post-card--image) .card__title::after { content: "."; color: var(--accent); }
.journal .post-card--lead .card__text { color: rgba(251,250,247,.78); }
.journal a.post-card--lead:hover { border-color: var(--accent); }
@media (min-width: 700px) {
  .journal .post-card--lead { grid-column: span 2; }
}
@media (min-width: 900px) {
  .journal .post-card--lead {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; column-gap: clamp(24px, 3vw, 40px); row-gap: 10px;
  }
  .journal .post-card--lead .card__media {
    grid-row: 1 / span 4; align-self: stretch;
    margin: calc(var(--s-4) * -1) 0 calc(var(--s-4) * -1) calc(var(--s-4) * -1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    aspect-ratio: auto; height: calc(100% + (var(--s-4) * 2)); min-height: 260px;
  }
  .journal .post-card--lead .card__meta { grid-column: 2; align-self: end; }
  /* Coral bar opens the text column, as the section heads do. */
  .journal .post-card--lead::before {
    content: ""; grid-column: 2; width: 48px; height: 4px;
    background: var(--accent); align-self: end;
  }
  .journal .post-card--lead .card__title {
    grid-column: 2; font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900; letter-spacing: -.03em; line-height: 1.04;
  }
  .journal .post-card--lead .card__text { grid-column: 2; align-self: start; font-size: 16px; }
}
/* Only the lead story carries an excerpt; the rest run on title and meta. */
.journal .post-card:not(.post-card--lead) .post-card__excerpt { display: none; }
/* The filter pills already name the category, so it only shows in the All view. */
.card__cat { display: inline-flex; align-items: center; gap: 8px; }
#journal-list.is-filtered .card__cat { display: none; }

/* ---------- Journal, photograph card ----------
   The photograph fills the card and the copy sits on it, held off the image by
   a single bottom-up ink wash rather than a flat panel. */
.journal .post-card--photo {
  position: relative; overflow: hidden; min-height: 400px;
  justify-content: flex-end; background: #141414; border-color: #141414;
}
/* The lead card sets the height, and the photograph cards match it, so the two
   photographs are the same size wherever they land in the grid. */
@media (min-width: 900px) {
  .journal { --lead-h: 520px; }
  .journal .post-card--lead { height: var(--lead-h); }
  .journal .post-card--photo { height: var(--lead-h); align-self: start; min-height: 0; }
}
.journal .post-card--photo .card__media {
  position: absolute; inset: 0; margin: 0; border-radius: inherit; aspect-ratio: auto;
}
.journal .post-card--photo .card__media img { object-position: 50% 18%; }
/* Mobile (12 Oct 2026): portrait photographs get a taller frame so more of the athlete shows. */
@media (max-width: 899px) {
  .journal .post-card--lead .card__media { aspect-ratio: 4 / 5; }
  .journal .post-card--photo { min-height: 0; aspect-ratio: 4 / 5; }
}
.journal .post-card--photo .card__media::after {
  content: ""; position: absolute; inset: 25% 0 0 0;
  background: linear-gradient(to bottom, rgba(20,20,20,0) 0%, rgba(20,20,20,.72) 52%, rgba(20,20,20,.92) 100%);
}
.journal .post-card--photo .card__meta,
.journal .post-card--photo .card__title,
.journal .post-card--photo .card__text { position: relative; z-index: 1; flex: 0 0 auto; }
.journal .post-card--photo .card__meta { color: rgba(251,250,247,.72); }
.journal .post-card--photo .card__title {
  color: #FBFAF7; font-size: clamp(24px, 2.3vw, 31px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
}
.journal .post-card--photo .card__text { color: rgba(251,250,247,.82); }

/* ---------- Testimonial spotlight ----------
   The house spotlight, under an Option C head: coral rule above the eyebrow. */
.quotes { padding-block: clamp(44px, 6vw, 88px); }
.quotes__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: 16px; }
/* Journal-style section head, centred over the two-up quotes. */
.quotes__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s-4) var(--s-6);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.quotes__headtext { max-width: 62ch; }
.quotes__head .quotes__rule { margin-bottom: clamp(18px, 2.4vw, 28px); }
.quotes__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.03em;
  margin: 14px 0 clamp(14px, 1.6vw, 20px);
}
.quotes__lede { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 56ch; }
.quotes .eyebrow { color: rgba(251,250,247,.62); }

/* Paper variant. The page already carries a lot of ink (what we coach, the
   journal photographs, the insights cards, the closing band and the footer),
   so the quotes read better on paper and the closing band lands harder for
   following them. The house spotlight is written for dark sections, so its
   white furniture is retoned here. */
.quotes--paper { background: var(--bg); }
.quotes--paper .eyebrow { color: var(--fg-muted); }
.quotes--paper .tspot__quote { color: var(--fg); font-size: clamp(21px, 2.7vw, 30px); }
.quotes--paper .tspot__who { color: var(--fg); }
.quotes--paper .tspot__role,
.quotes--paper .tspot__count { color: var(--fg-muted); }
.quotes--paper .tspot__more { color: var(--accent-text); }
.quotes--paper .tspot__btn { border-color: var(--border-strong); color: var(--fg); }
.quotes--paper .tspot__btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.quotes--paper .tspot__dot::before { background: var(--border-strong); }
.quotes--paper .tspot__dot.is-active::before { background: var(--accent); }
/* Pill-style pagination: active dot stretches, no arrows or counter. */
.quotes--paper .tspot__controls { justify-content: center; }
/* Two quotes per view above 800px, so a quote is never shown alone. */
@media (min-width: 800px) { .quotes--paper .tspot__slide { flex-basis: 50%; padding-inline: 0 28px; } }
.quotes--paper .tspot__dot { width: 14px; min-width: 14px; }
.quotes--paper .tspot__dots { margin-inline: -3px; }
.quotes--paper .tspot__dot::before { width: 8px; transition: width var(--speed) var(--ease), background var(--speed) var(--ease); }
.quotes--paper .tspot__dot.is-active::before { width: 26px; border-radius: 999px; }

/* ---------- FAQ ----------
   The house accordion, under an Option C head. */
.faq { padding-block: clamp(44px, 6vw, 88px); }
.faq__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: 18px; }
.faq__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.02; letter-spacing: -.03em;
}

/* The questions page groups the accordion under quiet subheads. */
.faq__group + .faq__group { margin-top: 0; padding-top: clamp(40px, 5vw, 64px); }
.faq__group-h {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 15px; letter-spacing: .14em; color: var(--fg-muted);
  margin: 0 0 var(--s-3);
}

/* ---------- Affiliations, in the footer ----------
   The partner logos no longer take a section of their own: they sit as a quiet
   strip above the footer's bottom rule, on the ink ground, so the page ends on
   the closing band. */
.site-footer__partners {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-4);
}
.site-footer__partners .site-footer__head { margin: 0; }
.partners { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); align-items: center; justify-content: center; }
/* The supplied logos are opaque rasters on a white plate. Inverting turns that
   plate near black, and screening it against the ink ground drops it out
   altogether, so only the mark is left. */
.partners img {
  height: 44px; width: auto; max-width: 140px; object-fit: contain;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen; opacity: .72;
  transition: opacity var(--speed) var(--ease);
}
.partners a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 4px; }
.partners a:focus-visible { outline: 2px solid var(--accent, #FF5A4D); outline-offset: 4px; }
.partners img:hover, .partners a:focus-visible img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .partners img { transition: none; } }

/* The FAQ shows six on the home page; the rest live on their own page. */
.faq__more { margin-top: clamp(20px, 2.6vw, 28px); }

/* ---------- Closing band ----------
   An inset ink band on paper rather than a full-bleed ink section: the footer
   below is already ink, and two ink blocks running together would read as one. */
.closing { padding-block: clamp(8px, 1.5vw, 20px) clamp(44px, 6vw, 88px); }
.closing__band {
  background: #141414; color: #FBFAF7;
  /* The headline mark's coral slab is a negative-z ::before, so the band needs
     its own stacking context or the ink background paints over it. */
  isolation: isolate;
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 72px);
}
.closing__rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: 18px; }
.closing .eyebrow { color: rgba(251,250,247,.62); }
.closing__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em;
  color: #FBFAF7; margin: 14px 0 16px;
}
/* Held to two balanced lines. */
.closing__lede { font-size: 17px; line-height: 1.6; color: rgba(251,250,247,.78); max-width: 80ch; margin: 0; text-wrap: balance; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 32px); }
.closing__ghost { background: transparent; color: #FBFAF7; border-color: rgba(251,250,247,.3); }
.closing__ghost:hover { background: rgba(251,250,247,.08); color: #FBFAF7; border-color: rgba(251,250,247,.55); }

/* Dark theme: the page ground is already ink, so the band steps up to the lighter
   black with a hairline. It always reads as its own block above the ink footer,
   whatever the section above it is (9 Oct 2026). */
[data-theme="dark"] .closing__band { background: #232322; border: 1px solid #2E2E2C; }

/* Home page athletes section: the map follows full-bleed with no padding of its own,
   so the space under the trial button comes from here (same as the Wimbledon Park page). */
#athletes.mission { padding-bottom: clamp(56px, 8vw, 104px); }

/* Home page journal foot (11 Oct 2026): coral rule and two buttons closing the
   journal section, home page only. Rule as .hero-type__rule. */
.journal__foot { margin-top: clamp(32px, 4vw, 48px); }
/* The strip ends the section, so it needs less space under it than the cards did. */
.journal:has(.journal__foot) { padding-bottom: clamp(24px, 3vw, 40px); }
.journal__foot .hero-type__rule { margin: 0 0 clamp(24px, 3.5vw, 40px); }
.journal__foot-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 599px) { .journal__foot-row { justify-content: flex-start; } }