/* ==========================================================================
   TIPS - Sports Performance & Athlete Development
   Design system. Concept spine: the site is a force-time trace.
   Corner language: radius 0 everywhere. Instruments have square corners.
   Colour rule: lime = the brand's voice. Electric blue = the instrument's
   voice, and it appears ONLY on plotted data. Never a button, never a link.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Lifted dark scale, second pass. Deliberately well above the brief's
     charcoal-black: a slate dark that still reads premium but is no longer
     heavy. Surfaces are separated enough to see structure without hairlines. */
  --ink: #202429;
  --char: #282d34;
  --elev: #32373f;
  --elev-2: #3d434b;
  --line: #4c525d;
  --line-soft: #363b44;
  --white: #ffffff;
  --text: #f2f4f6;
  --mute: #b6bcc5;
  --dim: #949ba6;
  --lime: #a8ff35;
  --lime-ink: #0b0b0c;
  --lime-dim: #86cf25;
  --signal: #2f80ff;
  --signal-mid: #6aa5ff;

  /* The one non-dark material on the site. Instruments print on paper, so the
     printed result is the single place a light surface is allowed. It appears
     on the hero readout and the sample season report, and nowhere else. Using
     it anywhere decorative would turn a material into a theme. */
  --paper: #edefe9;
  --paper-ink: #16191d;
  /* Dark enough to clear 4.5:1 on --paper. The labels it carries are 9 to 10px
     mono, so they get no large-text exemption. */
  --paper-dim: #5a5f65;
  --paper-line: #c9ccc4;

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1440px;
  --nav-h: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 2. Reset ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--white);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

::selection { background: var(--lime); color: var(--lime-ink); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ---- 3. Type scale ------------------------------------------------------ */

.d-xl {
  font-size: clamp(2.6rem, 6.6vw, 6rem);
  letter-spacing: -0.03em;
}
.d-lg {
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  letter-spacing: -0.026em;
}
.d-md {
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  letter-spacing: -0.02em;
}
.d-sm {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  letter-spacing: -0.012em;
  font-weight: 700;
}

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3rem);
  font-weight: 350;
  line-height: 1.62;
  color: var(--text);
  max-width: 60ch;
}
.body-copy {
  max-width: 64ch;
  color: var(--mute);
}
.body-copy + .body-copy { margin-top: 1.15rem; }
.body-copy strong { color: var(--text); font-weight: 500; }

/* Channel label. Sections are measurement channels, so they get channel IDs. */
.chan {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.chan b {
  font-weight: 500;
  color: var(--lime);
}
.chan::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 90px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.mono-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 4. Layout shells --------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 1080px; }

.section { padding-block: clamp(4.5rem, 9vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bot { padding-bottom: 0; }
.section--close { padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem); }
.section--char { background: var(--char); }

/* Baseline with sampling ticks. The site's divider, echoing the trace. */
.baseline {
  position: relative;
  height: 1px;
  background: var(--line);
}
.baseline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--line) 0 1px,
    transparent 1px 24px
  );
  height: 5px;
  top: 0;
}
.baseline--lit::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 1px;
  background: var(--lime);
}

/* ---- 5. Brand mark + nav ------------------------------------------------ */

/* The supplied logo: lowercase "tips" in a light geometric sans. It is the one
   place Poppins appears; Archivo still carries every headline. */
.mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.mark__word {
  font-family: "Poppins", "Century Gothic", "Futura", var(--font-body);
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: 0.01em;
  color: var(--white);
  line-height: 1;
  text-transform: lowercase;
}
.mark__sub {
  display: block;
  margin-top: 0.28rem;   /* clears the "p" descender */
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
  padding-left: 0.12em;
}
.foot .mark__word { font-size: 2.1rem; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(32, 36, 41, 0.76);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(32, 36, 41, 0.95);
  border-bottom-color: var(--line);
}
.nav__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.nav__tabs {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.5rem);
  margin-left: auto;
}
.nav__tab {
  position: relative;
  padding: 0.55rem 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__tab:hover { color: var(--text); }
.nav__tab:hover::after { transform: scaleX(1); }
.nav__tab[aria-current="page"] { color: var(--white); }
.nav__tab[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { display: none; }
@media (min-width: 1120px) {
  .nav__cta { display: inline-flex; margin-left: 0.75rem; }
}

.nav__burger {
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
}
.nav__burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger span:nth-child(3) { top: 28px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1000px) {
  .nav__burger { display: none; }
}
@media (max-width: 999px) {
  .nav__tabs {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem var(--gut) 2rem;
    /* Opaque, not glass: a backdrop-filter nested inside the blurred nav
       breaks compositing in Chrome and the panel paints behind the page. */
    background: var(--ink);
    z-index: 1;
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
  }
  .nav__tabs.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__tab {
    padding: 1rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__tab::after { display: none; }
  .nav__tab[aria-current="page"] { color: var(--lime); }
  .nav__tabs .cta-book {
    margin-top: 1.5rem;
    display: inline-flex;
    align-self: flex-start;
  }
}

/* ---- 6. CTAs. Bespoke chrome, one identity each ------------------------- */

/* Primary. The leading tick extends into a full sampling tick on hover. */
.cta-book {
  --tick: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.5rem;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
}
.cta-book__tick {
  display: block;
  width: 1px;
  height: var(--tick);
  background: var(--lime-ink);
  opacity: 0.55;
  transition: height 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.cta-book:hover { background: #b8ff5c; }
.cta-book:hover .cta-book__tick { height: 22px; opacity: 1; }
.cta-book:active { transform: translateY(1px); }
.cta-book--sm { padding: 0.7rem 1.1rem; font-size: 0.7rem; }

/* Secondary. The border arms from the left edge, like a channel going live. */
.cta-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(40, 45, 52, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.25s var(--ease), border-color 0.4s var(--ease);
}
.cta-ghost::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}
.cta-ghost:hover { color: var(--white); border-color: #3a3d45; }
.cta-ghost:hover::before { transform: scaleY(1); }
.cta-ghost:active { transform: translateY(1px); }

/* Inline. A baseline redraws left to right. */
.cta-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lime);
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease-out);
}
.cta-text:hover { background-size: 100% 1px; }
.cta-text i { font-style: normal; transition: transform 0.35s var(--ease-out); }
.cta-text:hover i { transform: translateX(4px); }

/* Pager. Full-width bar closing every subpage. */
.cta-pager {
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.cta-pager__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.3s var(--ease);
}
.cta-pager__v {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.cta-pager__v span {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
  color: var(--lime);
}
.cta-pager:hover { border-color: var(--lime); }
.cta-pager:hover .cta-pager__k { color: var(--lime); }
.cta-pager:hover .cta-pager__v span { transform: translateX(14px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* ---- 7. Hero (home) ---------------------------------------------------- */

/* Three bands, none of them layered over another. The headline sits on flat
   ink, the demonstration photograph has its own panel, and the readout strip
   runs underneath both.

   The photograph is a panel rather than a full-bleed background for one
   reason: every slide is a standing athlete in a 16:9 frame, and a wide short
   hero box can only cover-crop that vertically, which either cuts his head off
   or hides the plates under his feet. A taller panel crops the sides instead,
   which costs nothing. It also means the headline needs no scrim gradient to
   stay legible, and the hero stops looking like text over a photo. */
.hero {
  display: flex;
  flex-direction: column;
  background: var(--ink);
}
.hero__stage {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  /* Sized against the photographs rather than by eye: the assessment stills
     are portrait, around 0.7 to 0.8 wide-to-tall, so a panel near that ratio
     crops a few percent off the sides instead of taking either the athlete's
     head or the plates under his feet. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: stretch;
  /* Driven by the photographs too. At 68vh the panel came out nearly square,
     which cost a third of a portrait frame; at 84vh it is about 0.8 wide to
     tall, close enough to the stills that both the head and the plates fit. */
  min-height: clamp(540px, 84vh, 880px);
  /* The nav is fixed over the page, so the panel starts below it rather than
     bleeding underneath and hiding the athlete's head behind the tabs. */
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--char);
}
@media (max-width: 899px) {
  .hero__stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* 4:5, not 16:10. The stills are portrait, and a landscape band on a phone
     crops half the frame away: head at one end or plates at the other. */
  .hero__media { aspect-ratio: 4 / 5; }
}

/* Carousel slides. Slide one carries is-live in the markup, so it is visible
   with no CSS transition state and no script. */
.hero__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The slides are portrait, centred, with the force plates along the bottom
     edge. The crop is biased downward so the plates survive it: an athlete
     mid-test with the plates cut off stops reading as a test. */
  object-position: 50% 46%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hero__shot.is-live { opacity: 1; }
/* The squat-jump still is the taller of the two frames, so it loses a little
   more to the crop and sits slightly lower to keep the plates in shot. */
.hero__shot:nth-of-type(2) { object-position: 50% 54%; }

.hero__reel {
  position: absolute;
  z-index: 3;
  right: clamp(0.9rem, 1.8vw, 1.6rem);
  top: clamp(0.9rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
  /* Sits over bright daylight footage, so it carries its own scrim. */
  padding: 0.6rem 0.8rem;
  background: rgba(32, 36, 41, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.hero__reel-k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero__reel-v {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.hero__reel-dots { display: flex; gap: 6px; }
.hero__reel-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.35s var(--ease), transform 0.2s var(--ease);
}
.hero__reel-dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero__reel-dot[aria-selected="true"] { background: var(--lime); }
.hero__reel-dot:active { transform: translateY(1px); }
@media (max-width: 899px) {
  /* Stays top-right on a phone: the athlete is centred in the portrait frame
     with empty wall behind his shoulder, and the bottom-left corner is where
     the force plates are. */
  .hero__reel { top: 0.75rem; right: 0.75rem; }
}

/* A short feather on the panel's left edge only, so the photograph resolves
   into the ink field instead of butting against it with a hard seam. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(32, 36, 41, 0.55) 7%, rgba(32, 36, 41, 0) 20%);
}
@media (max-width: 899px) { .hero__scrim { display: none; } }

/* The copy column holds the page gutter on narrow screens and lines up with
   the centred .wrap once the viewport is wider than --max. */
.hero__in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4.5vw, 3.5rem)
           max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
@media (max-width: 899px) {
  .hero__in { padding: clamp(1.75rem, 5vw, 2.5rem) var(--gut) clamp(1.75rem, 6vw, 2.5rem); }
}
.hero__copy { max-width: 36rem; }

.hero__eyebrow { margin-bottom: 1.5rem; }
.hero h1 {
  margin-bottom: 1.35rem;
  max-width: 15ch;
  font-size: clamp(2.3rem, 5.2vw, 4.4rem);
  line-height: 0.96;
}
/* The headline's one lit term is the measurement the plot below is about to
   show, so the number in the copy and the number on the paper must agree. */
.hero h1 em {
  font-style: normal;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.hero__sub {
  max-width: 50ch;
  margin-bottom: 2rem;
  color: var(--text);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
}

/* ---- 8. Signature: the dual-limb readout ------------------------------- */

/* One countermovement jump, plotted twice, once per limb. The gap between the
   two curves is the product. It is drawn as sampling ticks rather than a
   filled band, which is the same device the section dividers use, so the
   signature and the structure are the same idea at two scales. */
.rdt {
  flex: 0 0 auto;
  margin: 0;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.rdt__in {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  display: grid;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) 236px;
  align-items: stretch;
  padding: 0.9rem 0 1.1rem;
}
@media (max-width: 899px) {
  .rdt__in { grid-template-columns: minmax(0, 1fr); padding-bottom: 0.9rem; }
}

.rdt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
  margin-bottom: 0.7rem;
}
.rdt__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.rdt__rate {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
}
.rdt__key { display: flex; gap: 1rem; margin-left: auto; }
.rdt__key span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
}
.rdt__key i {
  width: 18px;
  height: 0;
  border-top: 2px solid var(--signal);
}
.rdt__key i.is-l { border-top-style: dashed; border-color: var(--signal-mid); }
@media (max-width: 560px) { .rdt__key { margin-left: 0; } }

.rdt__plot { display: block; width: 100%; height: clamp(132px, 17vw, 212px); overflow: visible; }
.rdt__base { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0.6; }
.rdt__axis { stroke: var(--line); stroke-width: 1; }
.rdt__comb line { stroke: var(--signal); stroke-width: 1.6; opacity: 0.55; }
.rdt__curve { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rdt__curve--r { stroke: var(--signal); }
.rdt__curve--l { stroke: var(--signal-mid); stroke-width: 2.3; stroke-dasharray: 8 5; }
.rdt__phases {
  position: relative;
  height: 1.1rem;
  margin: 0.45rem 0 0;
}
.rdt__phases span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width: 620px) { .rdt__phases { display: none; } }

/* The printed result. The only light surface in the hero, and the reason the
   paper tokens exist: this is what the athlete actually goes home with. */
.rdt__print {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  background: var(--paper);
  color: var(--paper-ink);
}
.rdt__print-k {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.rdt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--paper-ink);
}
.rdt__row span { letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); }
.rdt__row b { font-weight: 500; }
.rdt__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--paper-line);
}
.rdt__sum span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.rdt__sum b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}
.rdt__foot {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: var(--paper-dim);
  text-transform: uppercase;
}
@media (max-width: 899px) {
  .rdt__print { margin-top: 0.9rem; }
}

/* ---- 9. Split (text + image) ------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-text { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .split--wide-media { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
  .split--flip .split__media { order: -1; }
}
.split__head { margin-bottom: 1.6rem; }
.split__head .chan { margin-bottom: 1.1rem; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: none;
}
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__media--wide img { aspect-ratio: 16 / 10; }
.split__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
}
.split__caption b { color: var(--lime); font-weight: 400; }

/* ---- 10. Page header (subpages) ---------------------------------------- */

.phead {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.phead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  filter: saturate(0.96) contrast(1);
}
.phead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(32, 36, 41, 0.92) 0%, rgba(32, 36, 41, 0.55) 50%, rgba(32, 36, 41, 0.2) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(32, 36, 41, 0) 72%);
}
.phead__in { position: relative; z-index: 1; }
.phead .chan { margin-bottom: 1.5rem; }
.phead h1 { max-width: 22ch; margin-bottom: 1.4rem; }
.phead__sub {
  max-width: 54ch;
  color: var(--text);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.62;
}
.phead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.phead__meta div { display: grid; gap: 2px; }
.phead__meta dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.phead__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--text);
}

/* ---- 11. Step rail (home: the 5-step system) --------------------------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  background: var(--line);
  border-block: 1px solid var(--line);
  scrollbar-width: thin;
}
.rail__cell {
  scroll-snap-align: start;
  background: var(--char);
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem) clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.85rem;
  transition: background 0.35s var(--ease);
}
.rail__cell:hover { background: var(--elev); }
.rail__step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.rail__step em {
  font-style: normal;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 255, 53, 0.35);
  font-variant-numeric: tabular-nums;
}
.rail__cell h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.rail__cell p { color: var(--mute); font-size: 0.95rem; line-height: 1.6; }
.rail__meter {
  margin-top: 0.4rem;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.rail__meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 20%);
  background: var(--lime);
  transform-origin: left;
}

/* ---- 12. Metrics baseline (animated counters) -------------------------- */

.metrics {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metrics__cell {
  background: var(--char);
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  align-content: space-between;
  gap: 1.75rem;
  min-height: 208px;
}
.metrics__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 4.6vw, 3.9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--white);
}
.metrics__v small {
  font-size: 0.34em;
  letter-spacing: 0.02em;
  color: var(--lime);
  margin-left: 0.35rem;
}
.metrics__v--word { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.metrics__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.metrics__spark { height: 26px; width: 100%; }
.metrics__spark path { fill: none; stroke: var(--signal); stroke-width: 1.5; }

/* ---- 13. Glass card grid (asymmetric bento) --------------------------- */

.bento {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__c--lg { grid-column: span 4; }
  .bento__c--sm { grid-column: span 2; }
  .bento__c--md { grid-column: span 3; }
}
.bento__c {
  position: relative;
  background: var(--char);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: grid;
  align-content: start;
  gap: 0.8rem;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.bento__c::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.bento__c:hover { background: var(--elev); }
.bento__c:hover::after { transform: scaleX(1); }
.bento__c h3 { font-size: 1.2rem; }
.bento__c p { color: var(--mute); font-size: 0.95rem; line-height: 1.62; }
/* Each instrument leads with the question it answers, set on its own line so
   the three cards scan as three questions rather than three product blurbs. */
.bento__c p em {
  display: block;
  margin-bottom: 0.45rem;
  font-style: normal;
  font-weight: 500;
  color: var(--white);
}
.bento__ico {
  width: 34px;
  height: 34px;
  margin-bottom: 0.35rem;
}
.bento__ico [stroke] { stroke: var(--lime); }
.bento__c--tint { background: var(--elev); }
.bento__c--tint:hover { background: var(--elev-2); }
.bento__media { padding: 0; }
.bento__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  filter: none;
}

/* ---- 14. Spec panel (technology page) --------------------------------- */

.spec {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 980px) {
  .spec { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: start; }
  .spec--flip .spec__media { order: -1; }
}
.spec__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  filter: none;
}
.spec__id {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.spec__id b { color: var(--lime); font-weight: 500; }
.spec h2 { margin-bottom: 1rem; }
.spec__desc { color: var(--text); max-width: 52ch; margin-bottom: 1.9rem; }
.spec__table {
  border-top: 1px solid var(--line);
}
.spec__table div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec__table dt {
  font-size: 0.95rem;
  color: var(--text);
}
.spec__table dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.spec__note {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--lime);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--mute);
  text-transform: uppercase;
}

/* A spec panel may carry a second photograph when one view cannot show what
   the spec table claims. It sits under the first with the same caption rule. */
.spec__second { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* ---- 15. Stage timeline (method + parents) ---------------------------- */

.stages { display: grid; gap: 0; border-top: 1px solid var(--line); }
.stage {
  display: grid;
  gap: 0.6rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}
@media (min-width: 900px) {
  .stage {
    grid-template-columns: 128px minmax(0, 20ch) minmax(0, 1fr);
    align-items: baseline;
  }
}
.stage:hover { background: rgba(61, 67, 75, 0.55); }
.stage__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.stage h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.stage p { color: var(--mute); max-width: 58ch; }
.stage__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 0.9rem;
}
.stage__list li {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---- 16. Season journey (interactive) -------------------------------- */

.journey { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 1000px) {
  .journey { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
}
.journey__track {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.journey__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.95rem 0.9rem 0.95rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.journey__btn em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  transition: color 0.25s var(--ease);
}
.journey__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--lime);
  transform: translateY(-50%);
  transition: height 0.35s var(--ease-out);
}
.journey__btn:hover { color: var(--text); }
.journey__btn[aria-selected="true"] {
  color: var(--white);
  padding-left: 0.9rem;
}
.journey__btn[aria-selected="true"]::before { height: 100%; }
.journey__btn[aria-selected="true"] em { color: var(--lime); }
.journey__panel {
  border: 1px solid var(--line);
  background: var(--char);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.journey__phase {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1rem;
}
.journey__panel h3 { margin-bottom: 1rem; }
.journey__panel p { color: var(--mute); max-width: 60ch; }
.journey__out {
  display: grid;
  gap: 1px;
  margin-top: 1.9rem;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 620px) { .journey__out { grid-template-columns: repeat(3, 1fr); } }
.journey__out div {
  background: var(--elev);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 4px;
}
.journey__out dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.journey__out dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--text);
}

/* ---- 17. Metric explorer (science page) ----------------------------- */

.explorer { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1020px) {
  .explorer { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: start; }
}
.explorer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.explorer__item {
  flex: 1 1 168px;
  background: var(--char);
  padding: 0.85rem 0.95rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  transition: background 0.3s var(--ease), color 0.25s var(--ease);
}
.explorer__item:hover { background: var(--elev); color: var(--text); }
.explorer__item[aria-pressed="true"] {
  background: var(--elev-2);
  color: var(--lime);
  box-shadow: inset 2px 0 0 var(--lime);
}
.plot {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--char), var(--ink));
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.plot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.4rem;
}
.plot__name { font-size: 1.15rem; }
.plot__unit {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.plot__svg { width: 100%; height: auto; overflow: visible; }
.plot__grid line { stroke: var(--line-soft); }
.plot__axis { stroke: var(--line); }
.plot__band { fill: rgba(47, 128, 255, 0.09); }
.plot__series { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; }
.plot__dot { fill: var(--ink); stroke: var(--signal); stroke-width: 1.5; }
.plot__dot--now { fill: var(--lime); stroke: var(--lime); }
.plot__tick {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--dim);
}
.plot__why {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.66;
  max-width: 62ch;
}
.plot__why b { color: var(--text); font-weight: 500; }
.plot__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
}
.plot__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.plot__legend i { width: 14px; height: 2px; background: var(--signal); }
.plot__legend i.is-now { background: var(--lime); }

/* ---- 17b. Repeat-error plot (science page) ---------------------------- */

/* The second data graphic on the site, and the only other place the plotted
   blue is allowed. It earns a graphic because it is an argument about
   measurement, and an argument about measurement is easier to see than read. */
.mdc {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--char);
  padding: clamp(1rem, 2.2vw, 1.6rem);
}
.mdc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.mdc__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.mdc__rate {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.mdc__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mdc__band { fill: var(--elev); stroke: var(--line-soft); stroke-width: 1; }
.mdc__zero { stroke: var(--line); stroke-width: 1; }
.mdc__axis { stroke: var(--line); stroke-width: 1; }
.mdc__stem { stroke: var(--dim); stroke-width: 2; }
.mdc__stem--real { stroke: var(--signal); }
.mdc__dot { fill: var(--dim); }
.mdc__dot--real { fill: var(--signal); }
.mdc__who,
.mdc__val,
.mdc__ticks text,
.mdc__bandk,
.mdc__unit {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mdc__who { font-size: 17px; font-weight: 500; fill: var(--text); }
.mdc__val { font-size: 16px; fill: var(--dim); }
.mdc__val--real { fill: var(--signal-mid); }
.mdc__ticks text { font-size: 15px; fill: var(--dim); }
.mdc__bandk { font-size: 14px; fill: var(--dim); }
.mdc__unit { font-size: 14px; fill: var(--dim); }
.mdc__note {
  max-width: 78ch;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.65;
}
@media (max-width: 640px) {
  /* Below this the row labels and value captions collide, so the plot scrolls
     sideways at a fixed width rather than compressing into illegibility. */
  .mdc__svg { min-width: 620px; }
  .mdc { overflow-x: auto; }
}

/* ---- 18. Outcome cards (players page) ------------------------------- */

.outcomes {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 620px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .outcomes { grid-template-columns: repeat(4, 1fr); } }
.outcome {
  position: relative;
  background: var(--char);
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.2rem, 2vw, 1.6rem);
  display: grid;
  align-content: space-between;
  gap: 1.6rem;
  min-height: 190px;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.outcome:hover { background: var(--elev); }
.outcome__k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.outcome__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.98;
}
.outcome__bar {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.outcome__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--lime);
  transform: scaleX(var(--to, 0.5));
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.outcome__m {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---- 19. Report mock (parents page) -------------------------------- */

.report {
  border: 1px solid var(--line);
  background: var(--char);
}
.report__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--elev);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.report__bar b { color: var(--white); font-weight: 500; }
.report__rows { padding: 0.4rem 1.2rem 1.2rem; }
.report__row {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.report__row:last-child { border-bottom: 0; }
.report__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.report__label {
  font-size: 0.95rem;
  color: var(--text);
}
.report__delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--lime);
  white-space: nowrap;
}
.report__track {
  position: relative;
  height: 6px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.report__track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--signal);
  transform: scaleX(var(--from, 0.4));
  transform-origin: left;
}
.report__track b {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--lime);
  left: var(--to, 60%);
}
.report__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---- 20. Service ledger (academies page) --------------------------- */

.ledger { border-top: 1px solid var(--line); }
.ledger__row {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left 0.35s var(--ease), background 0.35s var(--ease);
}
@media (min-width: 860px) {
  .ledger__row {
    grid-template-columns: 52px minmax(0, 26ch) minmax(0, 1fr);
    align-items: baseline;
  }
}
.ledger__row:hover { background: rgba(61, 67, 75, 0.6); padding-left: 0.8rem; }
.ledger__i {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--lime);
}
.ledger__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 110;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--white);
}
.ledger__d { color: var(--mute); font-size: 0.95rem; }

.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillars div {
  background: var(--char);
  padding: clamp(1.5rem, 3vw, 2.4rem) 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.pillars dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 114;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--lime);
}
.pillars dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--mute);
}

/* ---- 21. Testimonials carousel ------------------------------------ */

.quotes { position: relative; }
.quotes__view { overflow: hidden; border: 1px solid var(--line); background: var(--char); }
.quotes__track {
  display: flex;
  transition: transform 0.6s var(--ease-out);
}
.quotes__slide {
  flex: 0 0 100%;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  display: grid;
  gap: 1.75rem;
  align-content: space-between;
}
.quotes__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}
.quotes blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  font-size: clamp(1.3rem, 2.7vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  text-transform: none;
  max-width: 34ch;
}
.quotes figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
}
.quotes figcaption b { color: var(--text); font-weight: 500; }
.quotes figcaption i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  font-style: normal;
  font-size: 0.7rem;
  color: var(--lime);
}
.quotes__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.quotes__dots { display: flex; gap: 0.4rem; margin-right: auto; }
.quotes__dot {
  width: 34px;
  height: 2px;
  background: var(--line);
  transition: background 0.3s var(--ease);
}
.quotes__dot[aria-selected="true"] { background: var(--lime); }
.quotes__nav {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  color: var(--mute);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.quotes__nav:hover { color: var(--lime); border-color: #3a3d45; }
.quotes__nav:active { transform: translateY(1px); }

/* ---- 22. FAQ ------------------------------------------------------ */

.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--white);
  transition: color 0.25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--lime); }
.faq summary i {
  margin-left: auto;
  flex: none;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--lime);
  transition: transform 0.35s var(--ease-out);
}
.faq details[open] summary i { transform: rotate(45deg); }
.faq__a {
  padding: 0 0 clamp(1.25rem, 2.4vw, 1.9rem) 0;
  max-width: 68ch;
  color: var(--mute);
}
@media (min-width: 860px) {
  .faq summary { padding-left: 4.5rem; }
  .faq summary::before {
    content: attr(data-q);
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--dim);
  }
  .faq details { position: relative; }
  .faq__a { padding-left: 4.5rem; }
}

/* ---- 23. Booking form ------------------------------------------- */

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--char);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  appearance: none;
  border-radius: 0;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: var(--elev);
}
.field__err {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff7a6b;
  min-height: 1em;
}
.field.is-bad input,
.field.is-bad select { border-color: #ff7a6b; }
.form__pair { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form__pair { grid-template-columns: 1fr 1fr; } }
.form__done {
  border: 1px solid var(--lime);
  background: rgba(168, 255, 53, 0.06);
  padding: 1.5rem;
  display: none;
}
.form__done.is-on { display: block; }
.form__done h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--lime); }
.form__done p { color: var(--text); font-size: 0.95rem; }
/* The fallback for anyone whose confirmation email does not show up. */
.form__done-alt {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--mute) !important;
  font-size: 0.875rem !important;
  line-height: 1.6;
}
.form__done-alt a { color: var(--lime); }
.form__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Server-side failure (network, anti-spam check, rate limit). */
.form__err {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #ff7a6b;
  min-height: 1em;
  margin: 0;
}
.form__err:empty { display: none; }
/* Bot trap: off-screen rather than display:none, which some bots skip. */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-turnstile { min-height: 65px; }

.sidecard {
  border: 1px solid var(--line);
  background: rgba(61, 67, 75, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.sidecard h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.sidecard dl { display: grid; gap: 0; }
.sidecard dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.sidecard dt { font-size: 0.9rem; color: var(--mute); }
.sidecard dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-align: right;
}

/* ---- 24. Statement + closer ------------------------------------- */

.statement {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  border-block: 1px solid var(--line);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(168, 255, 53, 0.07), transparent 58%),
    var(--char);
}
.statement__q {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  text-transform: uppercase;
  color: var(--white);
  max-width: 26ch;
}
.statement__q b { color: var(--lime); font-weight: 800; }
.statement__side {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.statement__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 960px) {
  .statement__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
}
.creed { display: grid; gap: 0; border-top: 1px solid var(--line); }
.creed div {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
}
.creed div i { font-style: normal; color: var(--lime); }

.closer {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7.5rem);
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.closer__media { position: absolute; inset: 0; z-index: 0; }
.closer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(0.96) contrast(1);
}
.closer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(32, 36, 41, 0.9) 4%, rgba(32, 36, 41, 0.52) 56%, rgba(32, 36, 41, 0.22) 100%),
    linear-gradient(0deg, var(--ink), rgba(32, 36, 41, 0.04) 60%);
}
.closer__in { position: relative; z-index: 1; }
.closer h2 { max-width: 22ch; margin-bottom: 1.5rem; }
.closer__copy { max-width: 52ch; color: var(--text); margin-bottom: 2.25rem; }
.closer__creed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-bottom: 2.25rem;
}
.closer__creed span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

/* ---- 25. Footer ------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--ink);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.foot__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}
.foot__blurb {
  margin-top: 1.25rem;
  max-width: 34ch;
  font-size: 0.92rem;
  color: var(--mute);
}
.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  font-variation-settings: normal;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-bottom: 1.1rem;
}
.foot__col li + li { margin-top: 0.6rem; }
.foot__col a {
  font-size: 0.92rem;
  color: var(--mute);
  transition: color 0.25s var(--ease);
}
.foot__col a:hover { color: var(--lime); }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
}
.foot__base b { color: var(--mute); font-weight: 400; }

/* ---- 26. Reveals. Visible without JS, gated on reduced motion ---- */

.js [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-rise].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .trace__curve { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .quotes__track { transition: none; }
}

/* ---- 27. Per-asset grading ---------------------------------------------- */

/* Nothing to correct any more: the whole instrument photo set is shot in the
   same bright working gym, so no per-asset grading is needed. Kept as the
   place to put it if one asset ever lands out of family again. */