/* ───────────────────────────────────────────────
   Prima Futbol Training
   Cream · Ink · Lime
   ─────────────────────────────────────────────── */

:root {
  --ink:     #0A0A0A;
  --ink-2:   #161616;
  --ink-3:   #232323;
  --lime:    #DFFF00;
  --lime-d:  #C9E600;          /* pressed state */
  --lime-w:  rgba(223,255,0,.14);
  --cream:   #FFFEFB;
  --sand:    #F6F5F1;
  --white:   #FFFFFF;
  --line:    #E7E5E0;
  --line-2:  #D8D5CE;
  --line-ink: rgba(255,255,255,.12);
  --text:    #0A0A0A;
  /* The reference sets muted copy at #9ca3af, which is 2.4:1 on cream — fine on
     a black card, illegible on the page. Light grounds get a darker grey. */
  --muted:   #63676E;
  --on-ink:  #FFFFFF;
  --on-ink-2: #9CA3AF;

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --sec-y: clamp(64px, 8.5vw, 132px);

  --r-sm:   14px;
  --r:      20px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(10,10,10,.04), 0 8px 28px rgba(10,10,10,.05);
  --shadow-pop:  0 18px 50px rgba(10,10,10,.14);
}

/* ─── reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, ul, ol, blockquote, dd, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.on-ink :focus-visible { outline-color: var(--lime); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 18px; background: var(--ink); color: var(--lime);
  font-size: 14px; font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; top: 0; }

/* ─── layout ─── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec-y); }
.sec-sand { background: var(--sand); }
.sec-ink { background: var(--ink); color: var(--on-ink); }
.measure { max-width: 62ch; }

/* ─── type ─── */
/* The reference's whole voice is one thing: Inter at 900 with the line-height
   pulled under 1 and the tracking pulled negative, so headlines set as a solid
   block rather than a row of words. Everything else is quiet by comparison. */
.display {
  font-weight: 900;
  line-height: .9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.85rem, 6.6vw, 4.5rem); }
.h2 { font-size: clamp(2.05rem, 4.3vw, 3rem); }
.h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.375rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -0.02em;
}
.h4 { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }

.eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.on-ink .eyebrow, .sec-ink .eyebrow, .ftr .eyebrow { color: var(--on-ink-2); }

.lede { font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.6; color: var(--muted); }
.sec-ink .lede, .on-ink .lede, .ftr .lede { color: var(--on-ink-2); }
.small { font-size: 14px; color: var(--muted); }
.fine  { font-size: 12.5px; color: var(--muted); }
.sec-ink .small, .sec-ink .fine, .on-ink .small, .on-ink .fine,
.ftr .small, .ftr .fine { color: var(--on-ink-2); }

/* A lime underline behind a phrase — the reference's one flourish in body copy. */
.mark {
  background: linear-gradient(transparent 62%, var(--lime) 62%);
  padding-inline: 1px;
  color: var(--text);
  font-weight: 700;
}

/* A `ch` measure on a wrapper resolves against the WRAPPER's font size, not the
   display type inside it — which squeezed a 48px headline into a 250px column.
   This sets the measure on the heading itself, in its own em. */
.measure-display { max-width: 17em; }

.sec-head { max-width: 46ch; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head .lede { margin-top: 16px; }
.sec-head-wide { max-width: none; display: grid; gap: clamp(18px, 3vw, 56px); grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: end; margin-bottom: clamp(30px, 4vw, 52px); }
@media (max-width: 860px) { .sec-head-wide { grid-template-columns: 1fr; align-items: start; } }

/* Copy that sits on a photograph is set darker than the page default. The
   limit on how strong these pictures can be was never the headline — it was
   the mid-grey lede, so that grey moves closer to the ink and the photograph
   gets the room it was missing. */
.hero .lede, .sec-photo .lede,
.hero .fact-sub, .sec-photo .fact-sub,
.sec-photo .gr-facts li, .sec-photo .gr-then { color: #2F333A; }

/* ─── buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 14px 26px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  border: 2px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap; max-width: 100%;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--ink-3); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-d); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--lime); }

.on-ink .btn-primary, .sec-ink .btn-primary, .card-ink .btn-primary { background: var(--white); color: var(--ink); }
.on-ink .btn-primary:hover, .sec-ink .btn-primary:hover, .card-ink .btn-primary:hover { background: var(--lime); }
.on-ink .btn-ghost, .sec-ink .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.35); }
.on-ink .btn-ghost:hover, .sec-ink .btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 14px; }
/* A class-based display beats the hidden attribute on its own — this puts it back. */
.btn[hidden] { display: none; }
.btn-full { width: 100%; }

.textlink { border-bottom: 2px solid var(--line-2); padding-bottom: 1px; font-weight: 600; transition: border-color .18s ease; }
.textlink:hover { border-color: var(--ink); }
.on-ink .textlink, .sec-ink .textlink, .ftr .textlink { border-color: rgba(255,255,255,.3); }
.on-ink .textlink:hover, .sec-ink .textlink:hover, .ftr .textlink:hover { border-color: var(--lime); }

/* ─── chips & badges ─── */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 8px 16px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; max-width: 100%;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
}
/* Long informational chips are sentences, not labels — they wrap. */
.chip-wrap { white-space: normal; border-radius: var(--r-lg); text-align: left; }
.chip-lime { background: var(--lime); border-color: var(--lime); }
.chip-ink  { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip svg { width: 14px; height: 14px; }

/* Chips that go somewhere. The page reads as a set of buttons, so the small
   labels that were only ever decoration — the rating, the finder tag, the
   studio tag, the four programme tags — now behave like the buttons they
   already looked like. */
.chip-btn {
  position: relative;
  cursor: pointer; font-family: inherit;
  -webkit-appearance: none; appearance: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.chip-btn svg { flex: 0 0 auto; opacity: .8; }
/* On the black chips a grey arrow disappears; lime says 'this goes somewhere'. */
.chip-ink.chip-btn svg { color: var(--lime); opacity: 1; }
.chip-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,10,10,.16); }
.chip-btn:active { transform: translateY(0); }
/* A chip is 32–38px tall, which is a fine label and a poor thumb target. The
   hit area is grown past the pill without growing the pill — the opening has
   to keep fitting one phone screen. */
.chip-btn::before { content: ''; position: absolute; inset: -7px -3px; border-radius: inherit; }
.chip-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
/* A chip on the ink face needs a light ring instead — lime on black reads as
   part of the chip rather than as focus. */
.chip-ink.chip-btn:focus-visible { outline-color: var(--lime); }

/* ─── announcement marquee ─── */
/* Every line in here is a fact off the Google profile or the opening hours —
   nothing counts down and nothing pretends to be live. */
.ann {
  background: var(--ink); color: var(--white);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding-block: 9px;
  overflow: hidden; position: relative; z-index: 70;
}
.ann-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ann-track:hover, .ann-track:focus-within { animation-play-state: paused; }
.ann-track > span { display: flex; flex: none; }
.ann-track b { font-weight: 800; padding-inline: 22px; display: inline-flex; align-items: center; gap: 8px; }
.ann-track b::after { content: "·"; color: var(--lime); margin-left: 22px; }
.ann-star { color: var(--lime); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ann-track { animation: none; }
  .ann { text-align: center; }
  .ann-track { width: 100%; justify-content: center; flex-wrap: wrap; }
  .ann-track > span:nth-child(2) { display: none; }
}

/* A second marquee, lime and running the opposite way, used as a divider
   between two heavy sections. */
.ann-lime { background: var(--lime); color: var(--ink); z-index: 1; }
.ann-lime .ann-track { animation-duration: 52s; animation-direction: reverse; }
.ann-lime .ann-track b::after { color: var(--ink); opacity: .45; }

/* ─── header ─── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.hdr.stuck { box-shadow: 0 1px 0 var(--line), 0 8px 26px rgba(10,10,10,.05); }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; min-height: 44px; }
/* The crest is a gold gradient, which all but vanishes on cream — light grounds
   get the one-colour silhouette, the dark footer keeps the original. */
.brand-logo { width: auto; height: 34px; flex: none; }
.brand-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; align-content: center; }
.brand-name { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.brand-loc { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.nav { display: flex; gap: 30px; }
.nav a { font-size: 14.5px; font-weight: 600; transition: color .18s ease; }
.nav a:hover { color: var(--muted); }

.hdr-tools { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.burger {
  display: none; width: 46px; height: 46px; margin-right: -8px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; width: 22px; margin: 5px auto; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.mobnav {
  position: fixed; inset: 0 0 auto 0; z-index: 55;
  display: grid; gap: 4px;
  padding: calc(env(safe-area-inset-top) + 84px) var(--gutter) 30px;
  background: var(--cream);
  transform: translateY(-102%);
  transition: transform .34s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 20px 44px rgba(10,10,10,.1);
}
.mobnav.open { transform: none; }
.mobnav a:not(.btn) {
  padding: 15px 0; font-size: 22px; font-weight: 800; letter-spacing: -0.025em;
  border-bottom: 1px solid var(--line);
}
.mobnav .btn { margin-top: 20px; }

/* ─── hero ─── */
.hero {
  padding-block: clamp(30px, 4.5vw, 72px) clamp(34px, 4.5vw, 76px);
  position: relative; isolation: isolate; overflow: hidden;
}
/* A section can carry one of the club's own photographs as its ground. The
   picture is washed back until it reads as texture, and every scrim below is
   set so the copy over it still clears AA. */
.sec-photo { position: relative; isolation: isolate; overflow: hidden; }
.sec-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sec-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  opacity: .82; filter: grayscale(.5) contrast(.88) brightness(1.08);
}
.sec-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      var(--sand) 0%,
      rgba(246,245,241,.42) 22%,
      rgba(246,245,241,.50) 70%,
      var(--sand) 100%);
}
@media (max-width: 939px) {
  .sec-bg img { opacity: .74; }
  .sec-bg::after {
    background: linear-gradient(to bottom,
      var(--sand) 0%, rgba(246,245,241,.48) 20%, rgba(246,245,241,.52) 80%, var(--sand) 100%);
  }
}
/* ─── programmes on a phone ─── */
/* The section now carries a proper head, which is what makes it read as a
   section — but at full size that head plus four cards ran a hundred pixels
   past the screen. The head gives the pixels back, not the cards. */
@media (max-width: 620px) {
  #programs { padding-block: 46px 40px; }
  #programs .sec-head-wide { margin-bottom: 20px; gap: 10px; }
  #programs .h2 { font-size: 1.85rem; }
  #programs .lede { font-size: 14.5px; line-height: 1.5; }
}

/* ─── grassroots: the hour, split in half ─── */
/* Three cards of prose used to carry this section and buried the one thing that
   separates it from every other grassroots programme. The half that is coaching
   is now the loudest object on the screen. */
.gr-punch { color: var(--ink); font-weight: 800; }
.gr-hour {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(10px, 1.6vw, 18px); align-items: stretch;
}
.gr-half {
  border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 28px);
  display: flex; flex-direction: column;
}
.gr-half--train { background: var(--lime); color: var(--ink); }
.gr-half--play  { background: var(--ink);  color: var(--on-ink); }
.gr-min {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72;
}
.gr-half b {
  display: block; margin-block: 6px 10px;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900;
  letter-spacing: -0.04em; line-height: .95;
}
.gr-half p { font-size: 14px; line-height: 1.5; }
.gr-half--train p { color: #2C3300; }
.gr-half--play p  { color: var(--on-ink-2); }
.gr-then {
  align-self: center;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

.gr-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: clamp(18px, 2.4vw, 26px);
}
.gr-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gr-facts li {
  font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.gr-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }

@media (max-width: 620px) {
  #grassroots {
    min-height: calc(100svh - 68px);
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 30px;
  }
  #grassroots .sec-head-wide { margin-bottom: 14px; gap: 10px; }
  #grassroots .sec-head-wide .lede { font-size: 14.5px; line-height: 1.5; }
  #grassroots .h2 { font-size: 1.95rem; }
  /* Stacked, with the joining word centred between the two halves. */
  .gr-hour { grid-template-columns: 1fr; gap: 6px; }
  .gr-half { padding: 12px 15px; }
  .gr-half b { font-size: 1.55rem; margin-block: 3px 6px; }
  .gr-half p { font-size: 13px; line-height: 1.45; }
  .gr-then { justify-self: center; padding-block: 1px; }
  .gr-foot { gap: 11px; margin-top: 13px; }
  .gr-facts { gap: 4px 14px; }
  .gr-facts li { font-size: 10.5px; }
  .gr-facts li::before { width: 6px; height: 6px; }
  .gr-foot .btn { width: 100%; min-height: 50px; }
}

.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 32% 44%;
  opacity: .66;
  /* Pulled toward the paper: less colour, less contrast, lifted a touch, so it
     never competes with the type sitting on it. */
  filter: grayscale(.5) contrast(.88) brightness(1.08);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(255,254,251,.10) 0%,
      rgba(255,254,251,.42) 38%,
      rgba(255,254,251,.80) 66%,
      var(--cream) 92%),
    linear-gradient(to bottom,
      var(--cream) 0%,
      rgba(255,254,251,0) 20%,
      rgba(255,254,251,0) 72%,
      var(--cream) 100%);
}
@media (max-width: 939px) {
  /* One column on a phone, so every piece of copy sits over the picture — the
     wash goes uniform and heavier instead of being weighted to one side. */
  .hero-bg img { opacity: .60; object-position: 46% 40%; }
  .hero-bg::after {
    background: linear-gradient(to bottom,
      var(--cream) 0%,
      rgba(255,254,251,.58) 24%,
      rgba(255,254,251,.60) 76%,
      var(--cream) 100%);
  }
}
.hero-inner > * { min-width: 0; }
.hero-lead .h1 { margin-block: 20px 0; }
/* With no photograph, the headline and the supporting column share the width
   and settle on a common baseline at the bottom. */
@media (min-width: 940px) {
  .hero-inner {
    display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,1fr);
    gap: clamp(30px, 4vw, 64px); align-items: end;
  }
  .hero-side { padding-bottom: 4px; }
}
@media (max-width: 939px) {
  .hero-side .lede { margin-top: 22px; }
}

/* Two labels, one shown at a time — used by the hero buttons and by the
   comparison chart's cells, so a phone gets short text without the desktop
   losing the full wording. */
.lbl-narrow { display: none; }
@media (max-width: 700px) {
  .lbl-wide { display: none; }
  .lbl-narrow { display: inline; }
}
.hero .h1 { margin-block: 20px 22px; }
.hero .lede { max-width: 44ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-rule { height: 1px; background: var(--line); margin-block: clamp(28px, 3.4vw, 40px); }

/* The four things that are true of every session, as a row of facts rather
   than four bordered boxes — the boxes ate the fold on a phone. */
/* Two-by-two by default, four across only once the hero column is genuinely
   wide enough — auto-fit left a single orphan on the second row at in-between
   widths, which reads worse than an even pair of rows. */
/* Two-by-two everywhere. Four across only ever gave each item ~121px, and once
   the icons grew to fill their circles the labels no longer fit; the hero's
   right-hand column is narrow enough that a pair of rows suits it better. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.facts li { display: flex; align-items: center; gap: 10px; }
/* `.facts span` used to catch this wrapper too, and being one notch more
   specific it overrode display:grid — which parked every icon at 0,0 in the
   corner of its circle at half size. The label now has its own class. */
.fact-ic {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--lime);
}
.fact-ic svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--ink); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.fact-txt { display: block; min-width: 0; }
.facts b { display: block; font-size: 13.5px; white-space: nowrap; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.fact-sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.25; white-space: nowrap; }

/* hero visual */
.hero-vis { position: relative; }
.hero-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); background: var(--ink);
  aspect-ratio: 4 / 4.6;
}
.hero-card img {
  width: 100%; height: 100%; object-fit: cover;
  /* the frame crops top and bottom on a phone; bias upward so the coach and
     the players stay in shot rather than the grass */
  object-position: 50% 24%;
}
.hero-tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--white); color: var(--ink);
}

/* The three facts moved into the Studio section, where the copy explains them.
   Here they read as a row of small panels rather than an overlay. */
.stats-row {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px; margin-block: 28px;
}
.stats-row .stat { background: var(--white); box-shadow: none; border: 1.5px solid var(--line); }
/* The dark panel keeps its ink face — a white background here made white text
   invisible. */
.stats-row .stat-dark { background: var(--ink-2); border-color: var(--ink-2); }
/* Three panels across a half-width column are ~220px each, which towered the
   display sizes into three-line stacks. They set smaller here. */
.stats-row .stat { padding: 14px 15px; }
.stats-row .stat b { font-size: 1.02rem; letter-spacing: -0.02em; margin-top: 4px; }
.stats-row .stat p, .stats-row .stat .stat-p { font-size: 12px; }
/* Three across even on a phone — stacked, these three short facts made the
   section far longer than it needed to be. The explanatory line drops out at
   that width; the label and the number carry it. */
@media (max-width: 620px) {
  .stats-row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-block: 20px; }
  .stats-row .stat { padding: 11px 9px; }
  .stats-row .stat .eyebrow { font-size: 9px; letter-spacing: .08em; }
  .stats-row .stat b { font-size: 13px; margin-top: 3px; }
  .stats-row .stat p, .stats-row .stat .stat-p { display: none; }
}

.stat {
  background: var(--white); border-radius: var(--r);
  padding: 15px 18px;
  box-shadow: var(--shadow-pop);
}
.stat .eyebrow { font-size: 10px; letter-spacing: .14em; }
.stat b { display: block; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin-top: 3px; }
.stat p { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 5px; }
/* The three studio panels are the answers to the three questions parents ask
   first, so a tap on one opens the enquiry form rather than doing nothing. */
.stat-btn {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  border: 1.5px solid var(--line);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stat .eyebrow, .stat-p { display: block; }
.stat-p { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 5px; }
.stat-dark .stat-p { color: var(--on-ink-2); }
.stat-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--ink); }
.stat-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.stat-dark { background: var(--ink-2); color: var(--white); }
.stat-dark .eyebrow { color: var(--on-ink-2); }
.stat-dark p { color: var(--on-ink-2); }

/* ─── phone fold ─── */
/* The opening has to end at the facts row inside one iPhone screen, so on a
   phone the chip drops its location, the CTAs share a row with shorter labels,
   and the vertical rhythm tightens. `.wide-only` carries the words that only
   appear when there is room for them. */
.wide-only { display: inline; }
@media (max-width: 620px) {
  .wide-only { display: none; }
  /* The opening owns the whole first screen: it sizes to the viewport minus the
     bars above it, and the type and buttons grow to fill it rather than leaving
     the next section peeking in at the bottom. */
  .hero {
    min-height: calc(100svh - 110px - 68px);
    display: flex; align-items: center;
    padding-block: 20px 26px;
  }
  .hero-lead .h1 { margin-block: 16px 0; font-size: clamp(2.5rem, 12.2vw, 3.4rem); }
  .hero-side .lede { font-size: 17px; margin-top: 18px; }
  .hero-actions { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 26px; }
  .hero-actions .btn { flex: 1 1 0; width: auto; min-height: 56px; padding: 14px 12px; font-size: 15px; }
  .hero-actions .btn svg { display: none; }
  .hero-rule { margin-block: 24px; }
  .facts { gap: 18px 14px; }
  .facts b { font-size: 14.5px; }
  .fact-sub { font-size: 13.5px; }
  .fact-ic { width: 40px; height: 40px; }
  .fact-ic svg { width: 24px; height: 24px; }
}

/* Small, short phones (an iPhone SE is 553px of usable height) cannot hold the
   generous version, so the opening scales down rather than pushing the facts
   row below the fold. */
@media (max-width: 620px) and (max-height: 700px) {
  .hero-lead .h1 { font-size: clamp(2.05rem, 9.4vw, 2.6rem); margin-block: 10px 0; }
  .hero-lead .chip { min-height: 32px; padding: 5px 12px; font-size: 11px; }
  .hero-side .lede { font-size: 14.6px; line-height: 1.5; margin-top: 12px; }
  .hero-actions { margin-top: 15px; gap: 8px; }
  .hero-actions .btn { min-height: 46px; font-size: 13px; padding: 10px 8px; }
  .hero-rule { margin-block: 13px; }
  .facts { gap: 8px 12px; }
  .facts b { font-size: 12.4px; }
  .fact-sub { font-size: 11.6px; }
  .fact-ic { width: 29px; height: 29px; }
  .fact-ic svg { width: 18px; height: 18px; }
  .hero { padding-block: 10px 12px; }
}

/* ─── trust strip ─── */
.trust-right { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.faces { display: flex; }
.faces img, .faces span {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  border: 2px solid var(--ink); object-fit: cover;
  margin-left: -10px; background: var(--sand);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.faces > :first-child { margin-left: 0; }

/* ─── 30-second finder ─── */
.finder {
  display: grid; gap: clamp(26px, 3.4vw, 54px);
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  align-items: start;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.4vw, 52px);
  position: relative; overflow: hidden;
}
/* A soft lime bloom in the corner, the one flourish this block gets. */
.finder::before {
  content: ""; position: absolute; top: -30%; right: -12%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: var(--lime); opacity: .16; filter: blur(80px);
  pointer-events: none;
}
.finder > * { position: relative; }
.finder .lede { color: var(--on-ink-2); }
@media (max-width: 900px) { .finder { grid-template-columns: 1fr; } }

/* Three segments, filling as the questions are answered. */
.finder-bar { display: flex; gap: 7px; margin-top: clamp(20px, 2.4vw, 30px); }
.finder-bar span {
  height: 5px; width: 26px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.2);
  transition: width .35s cubic-bezier(.22,.61,.28,1), background-color .35s ease;
}
.finder-bar span.is-on { width: 40px; background: var(--lime); }

.finder-panel {
  background: var(--white); color: var(--text);
  border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 30px);
  min-height: 314px; display: flex; flex-direction: column;
}
@media (max-width: 620px) {
  .finder-panel { min-height: 0; }
  .finder-opts button { min-height: 52px; padding: 12px 13px; font-size: 14px; }
  .finder-title { font-size: 1.2rem; margin-block: 6px 16px; }
}
.finder-q { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.finder-title { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; margin-block: 8px 20px; }
/* The answers are short, so they stay two-up right down to a folded phone —
   one column made the panel taller than the screen. */
.finder-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 330px) { .finder-opts { grid-template-columns: 1fr; } }
.finder-opts button {
  min-height: 58px; padding: 14px 16px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em; text-align: left;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.finder-opts button:hover { border-color: var(--ink); background: var(--sand); }
.finder-opts button:active { transform: translateY(1px); }

.finder-back {
  align-self: flex-start; margin-top: auto; padding: 10px 0 0;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.finder-back:hover { color: var(--ink); }

/* The recommendation */
.finder-res { display: flex; flex-direction: column; height: 100%; }
.finder-res .chip { align-self: flex-start; }
.finder-res h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; letter-spacing: -0.035em; margin-block: 14px 8px; }
.finder-why { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.finder-res .ticks { margin-block: 16px 20px; }
.finder-res .ticks li { font-size: 14px; }
.finder-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.finder-actions .btn { flex: 1 1 auto; }

/* ─── touches ─── */
/* One argument, two columns, one scale. The old version ran two full-width
   rows with a slider under each — honest, but it was the tallest thing on the
   page for a section whose whole job is to be a break between two halves. */
/* Head on the left, the chart beside it — stacked, this section ran to a
   screen and a half on a laptop for what is meant to be a breath between the
   two halves of the page. */
.touch-grid {
  display: grid; gap: clamp(26px, 4vw, 60px);
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  align-items: center;
}
@media (max-width: 900px) { .touch-grid { grid-template-columns: 1fr; } }
.touch-head { max-width: 40ch; }
.touch-head > * { min-width: 0; }
.touch-head .h2 { margin-block: 16px 12px; }
.touch-head .lede { color: var(--on-ink-2); }
/* The one number the visitor is given before they guess — stated as a fact on
   its own, not as a bolded word inside a paragraph. */
.touch-given {
  border-left: 4px solid var(--lime); padding: 2px 0 2px 14px;
  margin-block: clamp(14px, 2vw, 20px) clamp(10px, 1.4vw, 14px);
}
.touch-given .eyebrow { color: var(--on-ink-2); }
.touch-given b {
  display: block; margin-top: 3px;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--lime);
}

.touch-chart {
  background: var(--ink-2); border: 1px solid var(--line-ink);
  border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 30px);
}
.touch-cap {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-ink-2); margin-bottom: 12px;
}
.touch-cap b { color: var(--on-ink); font-weight: 800; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The guess: one slider, its number beside it rather than under it. */
.touch-guessbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; margin-bottom: clamp(18px, 2.2vw, 26px);
  background: rgba(255,255,255,.05); border-radius: var(--r-sm);
}
.touch-guessbar .touch-slider { flex: 1; min-width: 0; }
#touch-game.revealed .touch-guessbar { display: none; }

.touch-slider { display: block; }
.touch-slider input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: none; cursor: grab; margin: 0; display: block;
}
.touch-slider input:active { cursor: grabbing; }
.touch-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.touch-slider input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.touch-slider input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -11px;
  border-radius: 50%; background: var(--lime); border: 3px solid var(--ink-2); cursor: grab;
}
.touch-slider input::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); border: 3px solid var(--ink-2); cursor: grab;
}
.touch-slider input:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 4px; }

.touch-out {
  flex: none; min-width: 4.5ch; text-align: right;
  font-size: 17px; font-weight: 900; letter-spacing: -0.02em; color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* The slider's own range, stated plainly under it. The question is rigged;
   the range it gives you is not hidden. */
.touch-scale {
  display: flex; justify-content: space-between;
  margin: -8px 2px clamp(16px, 2vw, 22px);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-ink-2);
}
#touch-game.revealed .touch-scale { display: none; }

/* Side by side, both drawn against 0–2,000, so the gap is a shape. */
.touch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 26px); }
.touch-col { display: grid; justify-items: center; text-align: center; }
/* Capped, or these read as two grey panels rather than two columns. */
.touch-bar {
  position: relative; width: 100%; max-width: 146px; height: clamp(150px, 16vw, 200px);
  background: rgba(255,255,255,.035); border-radius: 10px; overflow: hidden;
  /* the full column is the scale — 0 to 2,500 — which is what makes the club
     sliver at the bottom mean something */
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
}
/* Each range is a band on the column, floated between its two values. */
.touch-fill {
  position: absolute; left: 0; right: 0;
  bottom: 0; top: calc(100% - var(--hi));
  border-radius: 6px 6px 0 0;
}
.touch-fill--club  { background: #4A4E57; }
.touch-fill--prima { background: var(--lime); }
#touch-game:not(.revealed) .touch-fill--prima { opacity: 0; visibility: hidden; }
#touch-game.revealed .touch-fill--prima { animation: touch-grow .85s cubic-bezier(.22,.61,.28,1) both; }
@keyframes touch-grow { from { transform: scaleY(.02); transform-origin: bottom; } to { transform: none; } }

/* Where they thought the ceiling was. */
.touch-mark {
  position: absolute; left: 0; right: 0; bottom: var(--at, 24%);
  height: 0; border-top: 2px dashed var(--white);
  transition: bottom .12s linear;
}
.touch-mark i {
  position: absolute; left: 5px; bottom: 4px;
  padding: 1px 4px; border-radius: 3px; background: var(--ink-2);
  font-size: 9px; font-style: normal; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--white);
}
#touch-game.revealed .touch-mark { border-color: rgba(255,255,255,.45); }
#touch-game.revealed .touch-mark i { color: rgba(255,255,255,.6); }

.touch-num {
  font-size: clamp(1.05rem, 1.7vw, 1.45rem); font-weight: 900;
  letter-spacing: -0.03em; color: var(--on-ink); margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.touch-num--prima { color: var(--lime); }
#touch-game:not(.revealed) .touch-num--prima { visibility: hidden; }
.touch-cap-sm { font-size: 12.5px; color: var(--on-ink-2); line-height: 1.35; margin-top: 2px; }

.touch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.2vw, 26px); }
/* What comes after the reveal. Another go on the slider is not a next step. */
.touch-next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2vw, 22px); }
.touch-next[hidden] { display: none; }
.touch-next .btn { flex: 1 1 auto; }
.touch-verdict { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--on-ink); max-width: 62ch; }
.touch-verdict:empty { margin: 0; }
.touch-verdict b { color: var(--lime); }
.touch-note { margin-top: 18px; max-width: 46ch; }
@media (prefers-reduced-motion: reduce) {
  .touch-mark { transition: none; }
  #touch-game.revealed .touch-fill--prima { animation: none; }
}

/* The shake: what "The whole point" points at. */
.is-shake { animation: shake .52s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-shake { animation: none; box-shadow: 0 0 0 3px var(--lime); }
}

/* ─── touches on a phone ─── */
@media (max-width: 620px) {
  #touches {
    min-height: calc(100svh - 68px);
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 24px;
  }
  .touch-head { margin-bottom: 15px; }
  .touch-head .h2 { font-size: 1.68rem; margin-block: 10px 7px; }
  .touch-head .lede { font-size: 14px; line-height: 1.5; }
  .touch-head { margin-bottom: 13px; }
  .touch-chart { padding: 13px 13px; }
  .touch-cap { font-size: 10.5px; margin-bottom: 8px; }
  .touch-scale { margin-bottom: 12px; font-size: 10px; }
  .touch-guessbar { padding: 9px 12px; gap: 12px; margin-bottom: 10px; }
  .touch-out { font-size: 15px; }
  .touch-pair { gap: 10px; }
  .touch-bar { height: 96px; max-width: 116px; }
  .touch-num { font-size: 1rem; margin-top: 9px; }
  .touch-cap-sm { font-size: 11.5px; }
  .touch-actions { margin-top: 14px; gap: 8px; }
  .touch-actions .btn { flex: 1 1 0; min-height: 48px; font-size: 14px; padding: 11px 10px; }
  .touch-verdict { margin-top: 12px; font-size: 13.5px; line-height: 1.5; }
  .touch-note { font-size: 10.5px; margin-top: 8px; line-height: 1.4; }
}

@media (max-width: 620px) and (max-height: 700px) {
  #grassroots { padding-block: 16px; }
  #grassroots .h2 { font-size: 1.6rem; }
  #grassroots .sec-head-wide { margin-bottom: 11px; }
  #grassroots .sec-head-wide .lede { font-size: 13px; line-height: 1.45; }
  .gr-half { padding: 10px 13px; }
  .gr-half b { font-size: 1.3rem; margin-block: 2px 5px; }
  .gr-half p { font-size: 12.2px; line-height: 1.4; }
  .gr-min { font-size: 10px; }
  .gr-foot { margin-top: 11px; gap: 9px; }
  .gr-facts li { font-size: 10px; }
  .gr-foot .btn { min-height: 46px; }
}

@media (max-width: 620px) and (min-height: 800px) {
  #grassroots { padding-block: 30px; }
  #grassroots .h2 { font-size: 2.05rem; }
  #grassroots .sec-head-wide { margin-bottom: 20px; gap: 12px; }
  #grassroots .sec-head-wide .lede { font-size: 15px; line-height: 1.52; }
  .gr-hour { gap: 10px; }
  .gr-half { padding: 15px 16px; }
  .gr-half b { font-size: 1.68rem; margin-block: 4px 7px; }
  .gr-half p { font-size: 13.4px; line-height: 1.48; }
  .gr-foot { margin-top: 19px; gap: 12px; }
  .gr-facts li { font-size: 11px; }
  .gr-foot .btn { min-height: 52px; }
}

@media (max-width: 620px) and (min-height: 890px) {
  #grassroots { padding-block: 36px; }
  #grassroots .h2 { font-size: 2.2rem; }
  #grassroots .sec-head-wide { margin-bottom: 26px; gap: 13px; }
  #grassroots .sec-head-wide .lede { font-size: 15.5px; line-height: 1.55; }
  .gr-hour { gap: 13px; }
  .gr-half { padding: 18px 17px; }
  .gr-half b { font-size: 1.8rem; margin-block: 5px 8px; }
  .gr-half p { font-size: 13.8px; line-height: 1.5; }
  .gr-min { font-size: 11px; }
  .gr-foot { margin-top: 24px; gap: 14px; }
  .gr-facts li { font-size: 11.5px; }
  .gr-foot .btn { min-height: 56px; }
}

@media (max-width: 380px) and (min-height: 701px) {
  #touches .h2 { font-size: 1.5rem; }
  #touches .lede { font-size: 13px; }
  .touch-given { margin-block: 11px 9px; padding-left: 12px; }
  .touch-given b { font-size: 1.15rem; }
  .touch-cap { margin-bottom: 6px; }
  .touch-bar { height: 82px; }
  .touch-num { margin-top: 7px; }
}

@media (max-width: 380px) and (min-height: 701px) {
  #grassroots .h2 { font-size: 1.78rem; }
  #grassroots .sec-head-wide .lede { font-size: 14px; }
  .gr-half b { font-size: 1.42rem; }
  .gr-half p { font-size: 12.4px; }
}

/* An iPhone SE has 553px of usable height once the header and the sticky dock
   are out, so the short-screen version of this section trims again rather than
   letting the button fall behind the dock. */
@media (max-width: 620px) and (max-height: 700px) {
  #touches { padding-block: 14px; }
  .touch-head { margin-bottom: 12px; }
  .touch-head .h2 { font-size: 1.45rem; margin-block: 8px 5px; }
  .touch-head .lede { font-size: 13.5px; }
  .touch-note { font-size: 10px; margin-top: 6px; }
  .touch-chart { padding: 11px 12px; }
  .touch-cap { font-size: 12px; margin-bottom: 9px; }
  .touch-guessbar { padding: 7px 11px; margin-bottom: 10px; }
  .touch-scale { margin-bottom: 10px; }
  .touch-bar { height: 84px; }
  .touch-num { font-size: .92rem; margin-top: 7px; }
  .touch-cap-sm { font-size: 10.5px; }
  .touch-actions { margin-top: 11px; }
  .touch-actions .btn { min-height: 44px; }
}

/* ─── cards ─── */
.card {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex; flex-direction: column;
}
.card-ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.card-sand { background: var(--sand); }
.card-lime { background: var(--lime); border-color: var(--lime); }
/* The one card we want the eye to land on first. */
.card-pick { border-color: var(--lime); border-width: 2.5px; box-shadow: 0 0 0 6px var(--lime-w); position: relative; }
.card-flag {
  position: absolute; top: -13px; right: 20px;
  background: var(--lime); color: var(--ink);
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--r-pill);
}

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-meta { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-ink .card-meta { color: var(--on-ink-2); }
.card .h3 { margin-bottom: 5px; }
.card-sub { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.card-ink .card-sub { color: var(--on-ink-2); }

/* tick lists */
.ticks { display: grid; gap: 11px; margin-block: 20px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 14.5px; line-height: 1.45; }
.ticks svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.card-ink .ticks svg, .sec-ink .ticks svg { stroke: var(--lime); }
.ticks-lime li { grid-template-columns: 26px 1fr; align-items: start; }
.ticks-lime .tick-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--lime); }
.ticks-lime .tick-ic svg { width: 15px; height: 15px; stroke: var(--ink); }
.ticks-lime b { display: block; font-weight: 800; letter-spacing: -0.012em; }
.ticks-lime span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.sec-ink .ticks-lime span { color: var(--on-ink-2); }
.card .btn { margin-top: auto; }
.card-note { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }
.card-ink .card-note { color: var(--on-ink-2); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 22px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.4vw, 20px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 2vw, 26px); }

.stack { display: grid; gap: clamp(12px, 1.4vw, 18px); align-content: start; }
.stack .btn { justify-self: start; }
@media (max-width: 620px) { .stack .btn { justify-self: stretch; } }

/* ─── programme cards ─── */
/* With the bullet lists gone these cards carry very little, so the type grows
   and the button becomes the main event rather than a footnote under a list. */
.prog { justify-content: flex-start; }
.prog .h3 { font-size: clamp(1.45rem, 1.9vw, 1.8rem); font-weight: 900; letter-spacing: -0.035em; margin-bottom: 6px; }
.prog-spec {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.card-ink .prog-spec { color: var(--on-ink-2); }
.prog-note { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 14px; }
.card-ink .prog-note { color: var(--on-ink-2); }
/* Buttons align along the base of all four cards regardless of how much copy
   sits above them — with the lists gone, three of the four are near-empty. */
.prog .btn { margin-top: auto; min-height: 56px; font-size: 15px; }
.prog-spec, .prog-note { margin-bottom: 22px; }
.prog-note { margin-top: 12px; }
.card-meta { white-space: nowrap; }

/* ─── split feature (studio / grassroots / ball mastery) ─── */
.split, .split-rev {
  display: grid; gap: clamp(28px, 4vw, 60px);
  grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  align-items: center;
}
.split-rev { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
.split-rev > :first-child { order: 2; }
@media (max-width: 900px) {
  .split, .split-rev { grid-template-columns: 1fr; }
  .split-rev > :first-child { order: 0; }
}
.frame { overflow: hidden; border-radius: var(--r-xl); background: var(--sand); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-4x5 { aspect-ratio: 4 / 5; }
.frame-1x1 { aspect-ratio: 1 / 1; }
.frame-16x10 { aspect-ratio: 16 / 10; }
.frame-21x9 { aspect-ratio: 21 / 9; }
.frame-21x9 img { object-position: 50% 34%; }
@media (max-width: 620px) { .frame-21x9 { aspect-ratio: 4 / 3; } }

/* ─── studio ─── */
.studio-head { margin-bottom: clamp(26px, 3.4vw, 44px); }
.studio-head .h2 { max-width: 16em; }
/* Now that the heading is above both columns, the copy should start level with
   the top of the photograph rather than float in the middle of it. */
#studio .split { align-items: start; }
@media (max-width: 900px) {
  /* Once the columns stack, the walkthrough leads — it is the thing worth
     touching, and it sat almost a full screen below the heading otherwise. */
  #tour { order: -1; margin-bottom: clamp(24px, 4vw, 34px); }
}

/* ─── studio walkthrough ─── */
.tour-stage {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); background: var(--ink);
  aspect-ratio: 4 / 5;
}
.tour-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.02); z-index: 0;
  transition: opacity .85s cubic-bezier(.4,0,.2,1), transform .85s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.tour-img.is-on { opacity: 1; transform: none; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tour-img { transition: none; will-change: auto; } }

.tour-spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tour-spot {
  position: absolute; bottom: 16px; z-index: 4; pointer-events: auto;
  display: inline-flex; align-items: center;
  height: 46px; padding-inline: 14px;
  background: var(--white); color: var(--ink);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: background-color .2s ease, color .2s ease;
}
.tour-spot--fwd  { right: 16px; }
.tour-spot--back { left: 16px; flex-direction: row; }
.tour-spot svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tour-spot span {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 13px; font-weight: 800; letter-spacing: -0.01em;
  transition: max-width .3s ease, opacity .3s ease, padding .3s ease;
}
.tour-spot--fwd span { order: -1; }
.tour-spot:hover, .tour-spot:focus-visible { background: var(--lime); }
.tour-spot:hover span, .tour-spot:focus-visible span { max-width: 170px; opacity: 1; }
.tour-spot--fwd:hover span,  .tour-spot--fwd:focus-visible span  { padding-right: 10px; }
.tour-spot--back:hover span, .tour-spot--back:focus-visible span { padding-left: 10px; }
@media (hover: none) {
  .tour-spot span { max-width: 170px; opacity: 1; }
  .tour-spot--fwd span  { padding-right: 10px; }
  .tour-spot--back span { padding-left: 10px; }
}
.tour-tag { position: absolute; top: 16px; left: 16px; z-index: 4; }
.tour-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
/* The dot stays 9px, but the button around it is a real 44px target — the
   pseudo-element draws the dot so the hit area can be bigger than the mark. */
.tour-dots { display: flex; flex-wrap: wrap; margin-left: -6px; }
.tour-dot {
  width: 24px; height: 44px; padding: 0; flex: none;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.tour-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--line-2);
  transition: background-color .2s ease, transform .2s ease;
}
.tour-dot.is-on::before { background: var(--ink); transform: scale(1.3); }
.tour-dot:hover::before { background: var(--muted); }
.tour-count { font-size: 13px; color: var(--muted); margin-left: auto; }

/* ─── comparison table ─── */
.cmp { border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--line); background: var(--white); }
.cmp table { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 16px clamp(14px, 1.6vw, 24px); text-align: left; font-size: 14.5px; }
.cmp thead th { background: var(--ink); color: var(--white); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cmp thead th:last-child { background: var(--lime); color: var(--ink); }
.cmp tbody th { font-weight: 800; letter-spacing: -0.01em; width: 26%; background: var(--sand); }
.cmp tbody td:first-of-type { color: var(--muted); }
.cmp tbody td:last-child { background: color-mix(in srgb, var(--lime) 22%, var(--white)); font-weight: 700; }
.cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 1px solid var(--line); }

/* ─── reviews ─── */
.rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 13px; cursor: default;
  padding: 11px 17px; background: var(--white); color: var(--ink);
  border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.gmark { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.gmark span:nth-child(1) { color: #4285F4; }
.gmark span:nth-child(2) { color: #EA4335; }
.gmark span:nth-child(3) { color: #FBBC05; }
.gmark span:nth-child(4) { color: #4285F4; }
.gmark span:nth-child(5) { color: #34A853; }
.gmark span:nth-child(6) { color: #EA4335; }
.gbadge-body { display: grid; }
.gbadge-top { display: flex; align-items: center; gap: 8px; }
.gbadge-top b { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
/* The badge is a white card, so its caption keeps the light-ground grey even
   when the badge sits inside a dark section. */
.gbadge .small, .sec-ink .gbadge .small, .on-ink .gbadge .small { font-size: 12.5px; color: var(--muted); }
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: #FBBC05; }
.stars-sm svg { width: 13px; height: 13px; }

.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(83vw, 384px);
  gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); padding-block: 20px 26px;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.rail-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail-nav button:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sec-ink .rail-nav button { border-color: rgba(255,255,255,.25); color: var(--white); }
.sec-ink .rail-nav button:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

.review {
  background: var(--white); color: var(--text);
  border-radius: var(--r-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 13px;
  height: 100%;
  /* A slow, staggered drift with a shadow under it — enough that the rail reads
     as loose cards rather than a table of quotes. The rail's own scroll is
     untouched; this only moves them a few pixels. */
  animation: float 7s ease-in-out infinite;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.review:nth-child(3n+2) { animation-delay: -2.3s; animation-duration: 7.8s; }
.review:nth-child(3n+3) { animation-delay: -4.6s; animation-duration: 6.4s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.review:hover {
  animation-play-state: paused;
  transform: translateY(-12px);
  box-shadow: 0 24px 52px rgba(0,0,0,.42);
}
@media (prefers-reduced-motion: reduce) {
  .review { animation: none; }
  .review:hover { transform: none; }
}
.rev-head { display: flex; align-items: center; gap: 11px; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--ink); color: var(--lime);
  font-size: 14px; font-weight: 800;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.rev-who { display: grid; min-width: 0; }
.rev-who b { font-size: 14.5px; font-weight: 800; letter-spacing: -0.015em; }
.rev-who span { font-size: 12px; color: var(--muted); }
.rev-line { display: flex; align-items: center; gap: 9px; }
.rev-when { font-size: 12px; color: var(--muted); }
.rev-text {
  font-size: 14.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.rev-text p + p { margin-top: 8px; }
.review.open .rev-text { -webkit-line-clamp: unset; }
.rev-more {
  align-self: flex-start; margin-top: -2px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 800; color: var(--ink);
  border-bottom: 2px solid var(--lime);
}

/* ─── activity toast ─── */
/* The reference cycles fake booking notifications here. These are real reviews
   off the Google profile instead — same motion, nothing invented. */
.toast {
  position: fixed; left: 16px; bottom: 16px; z-index: 80;
  width: min(372px, calc(100vw - 32px));
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-pop);
  transform: translateY(140%); opacity: 0;
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
.toast.show { transform: none; opacity: 1; }
.toast-av { position: relative; flex: none; }
.toast-av .avatar { width: 38px; height: 38px; }
.toast-dot {
  position: absolute; right: -1px; top: -1px;
  width: 11px; height: 11px; border-radius: var(--r-pill);
  background: #22C55E; border: 2px solid var(--white);
}
.toast-body { min-width: 0; flex: 1; }
.toast-body b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -0.015em; }
.toast-body p {
  font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.toast-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-meta .stars svg { width: 11px; height: 11px; }
.toast-x {
  flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  background: var(--sand); border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--muted);
}
.toast-x:hover { background: var(--ink); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .3s ease; transform: none; } }
@media (max-width: 620px) {
  /* On a phone the toast is an overlay on the content, so it gets smaller and
     drops the date rather than truncating it mid-word. */
  .toast { bottom: 78px; width: min(310px, calc(100vw - 24px)); padding: 12px 13px; gap: 10px; }
  .toast-when { display: none; }
}

/* ─── coaches ─── */
.coach-card { position: relative; overflow: hidden; }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.coach-photo {
  width: clamp(96px, 10vw, 124px); height: clamp(96px, 10vw, 124px);
  border-radius: var(--r-pill); object-fit: cover;
  flex: none; border: 3px solid var(--lime);
}
.card-ink .coach-photo { border-color: var(--lime); }
/* The face is the most clickable-looking thing on the card, so it is now the
   button it always looked like. The hint only appears on hover — on a phone the
   role chip above already says it in words. */
.coach-photo-btn {
  position: relative; flex: none; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: var(--r-pill); line-height: 0;
  transition: transform .18s ease;
}
.coach-photo-btn .coach-photo { transition: border-color .18s ease, filter .18s ease; }
.coach-photo-btn:hover { transform: translateY(-3px); }
.coach-photo-btn:hover .coach-photo { border-color: var(--white); filter: brightness(.72); }
.card-ink .coach-photo-btn:hover .coach-photo { border-color: var(--lime); }
.coach-photo-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.coach-photo-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: var(--r-pill); padding: 4px;
  background: rgba(10,10,10,.65);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.2; text-align: center; color: var(--white);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.coach-photo-btn:hover .coach-photo-hint,
.coach-photo-btn:focus-visible .coach-photo-hint { opacity: 1; }
@media (hover: none) { .coach-photo-hint { display: none; } }
.coach-card .h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 900; letter-spacing: -0.035em; }
.coach-role { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-top: 3px; }
.card-ink .coach-role { color: var(--on-ink-2); }
.coach-bio { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-block: 18px; }
.card-ink .coach-bio { color: var(--on-ink-2); }
.coach-spec {
  font-size: 13px; font-weight: 700; line-height: 1.45;
  padding: 12px 15px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--lime) 30%, var(--white));
}
.card-ink .coach-spec { background: rgba(223,255,0,.16); color: var(--lime); }
.coach-quote {
  font-size: 14.5px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.45;
  padding: 16px 18px; border-radius: var(--r-sm); margin-top: 12px;
  background: var(--sand);
}
.card-ink .coach-quote { background: rgba(255,255,255,.07); }

/* ─── steps ─── */
.step-n {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  background: var(--lime); color: var(--ink); border-radius: var(--r-pill);
  font-size: 15px; font-weight: 900;
}

/* ─── booking ─── */
.book-panel { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(18px, 2.2vw, 28px); }
.cal-mount { min-height: 560px; border-radius: var(--r); overflow: hidden; }
.book-note {
  display: none; gap: 14px; align-items: flex-start;
  padding: 18px 20px; margin-bottom: 20px;
  background: var(--lime); border-radius: var(--r);
}
.book-note.show { display: flex; }
.book-note svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.book-note b { display: block; font-weight: 900; letter-spacing: -0.02em; font-size: 1.05rem; }
.book-note p { font-size: 14px; margin-top: 4px; }

/* ─── forms ─── */
.field {
  width: 100%; min-height: 52px; padding: 14px 17px;
  background: var(--white); color: var(--text);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder { color: var(--muted); }
.field-area { min-height: 92px; resize: vertical; line-height: 1.5; padding-top: 13px; }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--lime-w); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-msg { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.form-msg.ok { color: #15803D; }
.form-msg.err { color: #B91C1C; }

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 220px; width: auto; }

/* ─── enquiry dialog ─── */
.enq {
  width: min(460px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--cream); color: var(--text);
  box-shadow: 0 30px 90px rgba(10,10,10,.3);
}
.enq::backdrop { background: rgba(10,10,10,.55); backdrop-filter: blur(3px); }
.enq-form { display: grid; gap: 12px; padding: clamp(24px, 3vw, 32px); position: relative; }
.enq-x {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--sand); border: 0; border-radius: var(--r-pill);
  font-size: 21px; line-height: 1; cursor: pointer; color: var(--muted);
}
.enq-x:hover { background: var(--ink); color: var(--white); }
.enq-consent { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.enq-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }

/* ─── ball mastery ─── */
.price { display: flex; align-items: baseline; gap: 9px; margin-block: 18px 22px; }
.price b { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.price span { font-size: 13.5px; color: var(--muted); }
.sec-ink .price span { color: var(--on-ink-2); }

/* ─── footer ─── */
.ftr { background: var(--ink); color: var(--on-ink); padding-block: clamp(52px, 6vw, 84px) 34px; }
.ftr-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr); }
.ftr h2 { font-size: 21px; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; }
.ftr .h4 { margin-bottom: 14px; }
.ftr dl { display: grid; gap: 9px; font-size: 14.5px; }
.ftr dd { color: var(--on-ink-2); }
.ftr a:hover { color: var(--lime); }
.socials { display: flex; gap: 9px; margin-top: 20px; }
.socials a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--r-pill);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.socials a:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.ftr-base {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  margin-top: clamp(38px, 4.5vw, 62px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; color: var(--on-ink-2);
}

/* ─── footer logo ─── */
.ftr-logo { width: auto; height: 52px; margin-bottom: 18px; }

@media (max-width: 620px) {
  .brand-logo { height: 30px; }
  /* The wordmark's location line is the first thing to go when space is tight —
     the logo and name already say who this is. */
  .brand-loc { display: none; }
  .brand-name { font-size: 15px; }
  /* Logo + wordmark + CTA + burger will not fit across a phone, and the sticky
     dock at the bottom already carries "Book now" — so the header's button is
     the one that goes. */
  .hdr-tools .btn { display: none; }
}

/* ─── sticky mobile CTA ─── */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 65;
  display: none; align-items: center; gap: 12px;
  padding: 11px var(--gutter);
  padding-bottom: max(11px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.dock p { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.dock .btn { margin-left: auto; }

/* ─── scroll choreography ─── */
/* A section doesn't arrive as one block: its label, heading, copy and cards
   come in sequence, each with a travel and easing suited to what it is. The
   container (.rv) only marks the trigger — main.js tags the parts as .rvi and
   sets --d, so nothing here has to be hand-numbered in the markup. */
.rv { opacity: 1; transform: none; }

.rvi {
  opacity: 0;
  transform: translate3d(0, var(--ty, 26px), 0) scale(var(--sc, 1));
  transition:
    opacity   .66s cubic-bezier(.22,.61,.28,1) var(--d, 0ms),
    transform .78s cubic-bezier(.22,.61,.28,1) var(--d, 0ms);
  will-change: opacity, transform;
}
.rvi.in { opacity: 1; transform: none; will-change: auto; }

/* Labels and chips are small, so they move a short distance and lead. */
.rvi-label { --ty: 12px; }
/* Headings carry the section — they travel furthest and settle last. */
.rvi-head  { --ty: 40px; }
.rvi-copy  { --ty: 22px; }
/* Cards lift and settle rather than slide. */
.rvi-card  { --ty: 32px; --sc: .975; }
/* A photograph eases out of a slight over-scale, which reads as it coming to
   rest rather than sliding in from somewhere. */
.rvi-img   { --ty: 22px; --sc: 1.045; }
.rvi-img { transition-duration: .8s, 1.05s; }

/* Table rows cascade top to bottom once the table is in view. */
.cmp tbody tr { opacity: 0; transform: translate3d(0, 10px, 0); }
.cmp.in tbody tr {
  opacity: 1; transform: none;
  transition: opacity .45s ease var(--d, 0ms), transform .5s cubic-bezier(.22,.61,.28,1) var(--d, 0ms);
}

/* The hero runs the same sequence on load instead of on scroll — it is already
   in view, so waiting for an observer would just leave the page blank. */
.hero .rvi { --d: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .rvi, .rvi.in { opacity: 1; transform: none; transition: none; }
  .cmp tbody tr { opacity: 1; transform: none; transition: none; }
}

/* ═══ responsive ═══ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-vis { max-width: 560px; }
  .nav { display: none; }
  .burger { display: block; }
  .hdr-tools .icon-btn { display: none; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}

/* The chart stays a chart on a phone. It fits by shortening the cell text
   (.lbl-narrow) and tightening the metrics, not by scrolling sideways and not
   by restacking into six tall blocks — the whole point is reading the two
   columns against each other in one look. */
@media (max-width: 700px) {
  .cmp { overflow: visible; }
  .cmp table { min-width: 0; table-layout: fixed; }
  .cmp th, .cmp td { padding: 10px 9px; font-size: 13px; }
  .cmp thead th { font-size: 9.5px; letter-spacing: .06em; padding-block: 9px; }
  .cmp tbody th { width: 27%; font-size: 12px; letter-spacing: -0.01em; }
  .cmp tbody td { width: 36.5%; }
  .cmp tbody td:last-child { font-weight: 800; }
}
@media (max-width: 380px) {
  .cmp th, .cmp td { padding: 9px 7px; font-size: 12.2px; }
}

@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .hero-card { aspect-ratio: 4 / 3.6; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
  /* Four programme cards read as a 2x2 block rather than a long column. */
  /* Grid items default to min-width:auto, so a nowrap button label was holding
     the columns wider than the screen and pushing the second one off-screen. */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-4 > * { min-width: 0; }
  .grid-4 .btn { white-space: normal; }
  .grid-4 .card { padding: 17px 15px; }
  .grid-4 .card .h3 { font-size: 1.2rem; }
  .grid-4 .card-top { margin-bottom: 13px; flex-wrap: wrap; gap: 6px; }
  .grid-4 .card-meta { font-size: 10px; }
  .grid-4 .chip { min-height: 29px; padding: 5px 10px; font-size: 10px; }
  .prog-spec { font-size: 11px; letter-spacing: .05em; }
  .prog-note { font-size: 13px; margin-top: 11px; }
  .prog .btn { min-height: 48px; font-size: 13px; padding: 12px 8px; }
  .prog-spec, .prog-note { margin-bottom: 14px; }
  .ftr-grid { grid-template-columns: 1fr; }
  .dock { display: flex; }
  body { padding-bottom: 68px; }
  .form-row { grid-template-columns: 1fr; }
  .ann { font-size: 11.5px; letter-spacing: .08em; }
  .rail { grid-auto-columns: 84vw; }
}

/* ─── spotlight ─── */
/* Where a button on this page sends you within it. Two slow pulses of the lime
   ring, then nothing — enough to say "this is the thing you asked for" without
   leaving a permanent decoration behind. Motion-sensitive visitors get a plain
   ring that fades. */
.is-spot { animation: spot 1.05s ease-out 2; border-radius: var(--r-lg); }
@keyframes spot {
  0%   { box-shadow: 0 0 0 0 rgba(223,255,0,0); }
  22%  { box-shadow: 0 0 0 7px rgba(223,255,0,.85); }
  100% { box-shadow: 0 0 0 16px rgba(223,255,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-spot { animation: none; box-shadow: 0 0 0 4px rgba(223,255,0,.9); transition: box-shadow .6s ease 1.4s; }
}