/* =========================================================================
   THE PERFORMANCE COMPANY — Mock-E "Synthesis"
   Single stylesheet. No framework. No preprocessor.

   The honest synthesis between Mock-A (refined editorial, but Claude-default
   in palette and type) and Mock-D (genuinely unique broadcast-paperwork, but
   too costume-y for a parent-facing dance school).

   What's kept from Mock-A:
     - Editorial confidence: generous gutters, restrained sizing, hairlines
     - Plate caption pattern: dark figcaption INSIDE bottom of photo
     - Masthead + nav + hamburger pattern
     - Footer + section padding rhythm
     - 12-col scaffolding

   What's kept from Mock-D:
     - The single committed oxblood accent (used quietly)
     - Formation-dots SVG section divider
     - Cue eyebrow PATTERN (but rendered as a quiet `01 — Label` line)
     - The "Today" schedule strip IDEA (rendered un-theatrically)
     - The two-halves-of-the-business honesty (fork section)
     - [data-club] rotation — but ONLY as a 2px top rule on gig/case cards

   What's dropped from both: Fraunces, Inter Tight, Big Shoulders, vermilion,
   hero stripes, plate corner brackets, CUE timecode jargon, magazine cosplay
   (Vol., est., PL., §), motion, italics-in-the-middle-of-headlines.

   Type stack: Newsreader (display) + Schibsted Grotesk (text) + JetBrains
   Mono (caption / numbers). All Google Fonts, all free.

   Section map:
     01  Tokens
     02  Reset / base
     03  Typography utilities
     04  Layout primitives
     05  Masthead / nav (with CSS-only hamburger)
     06  Eyebrow + cue (the section-head pattern)
     07  Formation-dots divider
     08  Plate (caption inside dark band)
     09  Today strip (call-sheet-quiet)
     10  Buttons
     11  Hero — homepage
     12  Fork (Studio | Crew)
     13  Gigs / lately strip — with club data-club top rule
     14  Clients band
     15  Enrol CTA
     16  Footer
     17  Entertainment (B2B) page
         17a B2B hero
         17b Capabilities
         17c Cases
         17d Process
         17e Booking
     18  School page
         18a School hero
         18b Streams
         18c Timetable
         18d Fees
         18e Teachers
         18f Enrol steps
         18g FAQ
     19  Forms
     20  Responsive overrides (1080 / 760 / 480 / 360)
     21  Print
   ========================================================================= */


/* 01 TOKENS =============================================================== */
:root {
  /* Type stacks. Newsreader is variable (ital,opsz,wght). */
  --serif:  "Newsreader", "Georgia", "Times New Roman", serif;
  --sans:   "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Paper / ink — warmer than Mock-A ivory, less yellow than Mock-D concrete */
  --paper:    #EDE9E0;
  --paper-2:  #DCD5C5;
  --ink:      #1A1816;
  --ink-mute: #5A554E;
  --rule:     #C9C0AF;

  /* The ONE accent. Quiet oxblood. */
  --accent:   #5C1A1A;
  --studio:   #1F4435;  /* forest green — school.html page-default ONLY */

  /* Club tokens — used ONLY as a 2px top rule on .gig / .case cards */
  --wildcats: #E03937;
  --eagles:   #003F87;
  --fever:    #00BB5C;
  --force:    #C8102E;
  --glory:    #523178;

  /* Fluid type scale */
  --fs-micro:  0.75rem;
  --fs-small:  0.86rem;
  --fs-body:   1.05rem;
  --fs-lede:   clamp(1.15rem, 0.95rem + 0.9vw, 1.45rem);
  --fs-h3:     clamp(1.4rem, 1rem + 1.4vw, 2rem);
  --fs-h2:     clamp(1.9rem, 1rem + 3vw, 3.2rem);
  --fs-h1:     clamp(2.6rem, 1rem + 6.5vw, 6.4rem);

  /* Spacing — 8-count modular */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.875rem;
  --s-4:  1.25rem;
  --s-5:  2rem;
  --s-6:  3rem;
  --s-7:  4.5rem;
  --s-8:  6.5rem;

  --gutter: clamp(1.1rem, 1.6vw, 1.9rem);
  --max:    1440px;
}


/* 02 RESET / BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

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

a { color: inherit; text-decoration: none; }
a:not(.btn):not(.nav__link):hover { text-decoration: underline; text-underline-offset: 0.18em; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.1em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

/* Focus — visible, sharp, no rounded outline */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* Hard rule: zero rounded corners anywhere. */
*, *::before, *::after { border-radius: 0; }

/* Tabular numerals on anything load-bearing — phones, times, fees, dates */
.num, .tt td.time, .tt td.fee, .today__row dt,
.footer__col li, address, .gig__date, .case__year,
.client__num, .field input[type="tel"] {
  font-variant-numeric: tabular-nums;
}


/* 03 TYPOGRAPHY UTILITIES ================================================ */
.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans); }
.mono  { font-family: var(--mono); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  font-variation-settings: "opsz" 32;
}
h1 {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  font-variation-settings: "opsz" 32;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.1;
}
h4 {
  font-size: 0.78rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Quiet italic display. The hero h1 wraps its content in <em>. */
h1 em, h2 em {
  font-style: italic;
  color: inherit;
  font-variation-settings: "opsz" 72;
}

.lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.4;
  max-width: 36ch;
  color: var(--ink);
}

.kicker {
  font-family: var(--sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-mute);
  max-width: 38ch;
}

.caption {
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 36ch;
}
.caption strong { color: var(--ink); font-weight: 600; }

/* Pull-quote — Schibsted regular, single cue chevron, NOT all caps. */
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-variation-settings: "opsz" 32;
}
.pull cite {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  font-style: normal;
  color: var(--ink-mute);
}


/* 04 LAYOUT PRIMITIVES =================================================== */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5) var(--gutter);
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  z-index: 100;
}
.skip:focus { left: var(--gutter); top: var(--s-2); }


/* 05 MASTHEAD ============================================================ */
.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-4) var(--s-3);
}
.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 0.9rem + 1.1vw, 1.85rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 32;
}
.masthead__meta {
  display: none;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  justify-self: start;
  margin: 0;
}
.nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__link {
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  padding-block: var(--s-2);
  position: relative;
  color: var(--ink);
}
.nav__link[aria-current="page"]::after,
.nav__link:hover::after,
.nav__link:focus-visible::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
}
.nav__link--accent {
  color: var(--accent);
  font-weight: 600;
}
.nav__link--accent:hover::after,
.nav__link--accent:focus-visible::after { background: var(--accent); }

/* Hamburger: hide checkbox + button (desktop default) */
.nav-toggle { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.nav-toggle__btn { display: none; }


/* 06 EYEBROW + CUE ======================================================= */
/* The quiet `01 — Studio Side` pattern, with a 1px ink-mute rule below. */
.cue {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 400;
  margin: 0;
}
.cue__num { color: var(--ink); font-weight: 500; }
.cue__label { color: var(--ink-mute); }

.section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.section-head .cue { align-self: start; }
.section-head__rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.section-head h2 {
  margin: 0;
  max-width: 22ch;
}
.section-head__kicker {
  font-family: var(--sans);
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--ink-mute);
  max-width: 38ch;
  margin: 0;
}


/* 07 FORMATION-DOTS DIVIDER ============================================== */
.formation-dots {
  color: var(--ink-mute);
  width: 200px;
  margin: var(--s-7) auto;
  display: block;
  opacity: 0.65;
}


/* 08 PLATE =============================================================== */
.plate {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.plate > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.93) contrast(1.02);
}
.plate figcaption {
  position: relative;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  padding: 0.65rem 1rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.35;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  z-index: 1;
}
.plate figcaption strong { font-weight: 600; }
.plate figcaption .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  opacity: 0.78;
  white-space: nowrap;
}
.plate--wide     { aspect-ratio: 16 / 9; }
.plate--square   { aspect-ratio: 1 / 1; }
.plate--portrait { aspect-ratio: 3 / 4; }


/* 09 TODAY STRIP (call-sheet, quietly) =================================== */
.today {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-3);
  margin-top: var(--s-5);
  max-width: 36rem;
}
.today__h {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
  margin: 0 0 var(--s-2);
  font-variation-settings: normal;
}
.today__list {
  margin: 0;
  display: grid;
  gap: 0.3rem;
}
.today__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.today__row dt {
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.today__row dd {
  color: var(--ink-mute);
  margin: 0;
}


/* 10 BUTTONS ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 0.95rem 1.35rem;
  min-height: 44px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}


/* 11 HERO — HOMEPAGE ===================================================== */
.hero {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-7) var(--s-8);
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--gutter);
  align-items: start;
}
.hero__left {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--s-5);
  align-content: start;
}
.hero__left .cue { margin-bottom: var(--s-2); }
.hero__left .btn-row { margin-top: var(--s-3); }

.hero__display {
  font-size: var(--fs-h1);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 72;
  max-width: 14ch;
}
.hero__display em {
  font-style: italic;
  color: inherit;
}

.hero__lede {
  font-family: var(--sans);
  font-size: var(--fs-lede);
  line-height: 1.42;
  color: var(--ink-mute);
  max-width: 36ch;
  margin: 0;
}

.hero__plate {
  grid-column: 8 / span 5;
  margin: 0;
}


/* 12 FORK — STUDIO vs CREW =============================================== */
.fork {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.fork__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: stretch;
}
.fork__card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.fork__card:first-child {
  padding-right: var(--s-6);
  border-right: 1px solid var(--rule);
}
.fork__card:last-child {
  padding-left: var(--s-2);
}
.fork__card h3 {
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1.02;
  margin: 0;
  max-width: 16ch;
}
.fork__card .plate { margin-bottom: var(--s-2); }
.fork__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.fork__card li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--fs-small);
}
.fork__card li:first-child { border-top: 1px solid var(--rule); }
.fork__card li span:first-child { color: var(--ink); }
.fork__card li span:last-child {
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.fork__cta { margin-top: var(--s-3); justify-self: start; }


/* 13 GIGS STRIP — "LATELY" =============================================== */
.gigs {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.gigs__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.gig {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--ink);  /* default; club tokens override */
  align-content: start;
}
.gig[data-club="wildcats"] { border-top-color: var(--wildcats); }
.gig[data-club="eagles"]   { border-top-color: var(--eagles); }
.gig[data-club="fever"]    { border-top-color: var(--fever); }
.gig[data-club="force"]    { border-top-color: var(--force); }
.gig[data-club="glory"]    { border-top-color: var(--glory); }

.gig .plate { aspect-ratio: 3 / 4; }
.gig__date {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.gig h3 {
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0;
  font-variation-settings: "opsz" 24;
}
.gig p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: 1.45;
}


/* 14 CLIENTS BAND ======================================================== */
.clients {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-7);
}
.clients .cue { color: var(--paper); opacity: 0.7; }
.clients .cue__num { color: var(--paper); }
.clients .cue__label { color: var(--paper); opacity: 0.85; }
.clients .section-head__rule { background: rgba(237,233,224,0.18); }
.clients h2 { color: var(--paper); }

.clients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(237,233,224,0.18);
}
.client {
  border-right: 1px solid rgba(237,233,224,0.18);
  padding: var(--s-5) var(--s-4);
  display: grid;
  gap: var(--s-2);
  min-height: 170px;
  align-content: space-between;
}
.client:last-child { border-right: 0; }
.client__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--paper);
  opacity: 0.7;
  letter-spacing: 0.08em;
}
.client__name {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.1rem, 0.6rem + 1vw, 1.45rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 32;
}
.client__league {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.6;
}


/* 15 ENROL CTA =========================================================== */
.enrol {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.enrol__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--gutter);
  align-items: end;
}
.enrol__display {
  grid-column: 1 / span 7;
  font-size: clamp(2.2rem, 0.5rem + 5vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 60;
}
.enrol__display em { font-style: italic; }
.enrol__side {
  grid-column: 9 / span 4;
  display: grid;
  gap: var(--s-4);
}
.enrol__side .caption { max-width: 36ch; }


/* 16 FOOTER ============================================================== */
.footer {
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--s-7) var(--s-5);
  border-top: 1px solid var(--ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5) var(--gutter);
}
.footer__mark {
  grid-column: 1 / span 4;
}
.footer__mark .wordmark {
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem);
}
.footer__mark p {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  max-width: 32ch;
  margin-top: var(--s-3);
  line-height: 1.5;
}
.footer__col {
  grid-column: span 2;
}
.footer__col h4 {
  margin-bottom: var(--s-3);
  color: var(--ink);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__col li {
  padding-block: 0.18rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-mute);
}
.footer__col a { color: var(--ink-mute); }
.footer__col a:hover { color: var(--ink); }

address {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-mute);
}

.footer__base {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer__base a { color: var(--ink-mute); }


/* ========================================================================
   17 ENTERTAINMENT (B2B) PAGE
   ======================================================================== */

/* 17a B2B HERO */
.b2b-hero {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-7) var(--s-8);
}
.b2b-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--gutter);
  align-items: start;
}
.b2b-hero__left {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--s-5);
  align-content: start;
}
.b2b-hero__display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 72;
  max-width: 16ch;
}
.b2b-hero__display em { font-style: italic; }
.b2b-hero__plate {
  grid-column: 8 / span 5;
  margin: 0;
}

/* 17b CAPABILITIES */
.capabilities {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.cap {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) var(--s-4);
  display: grid;
  gap: var(--s-3);
  min-height: 220px;
  align-content: start;
}
.cap:nth-child(3n) { border-right: 0; }
.cap__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.cap h3 {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.1;
  font-variation-settings: "opsz" 24;
}
.cap p {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}

/* 17c CASES */
.case-list {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.case {
  display: grid;
  grid-template-columns: 8rem 4fr 3fr auto;
  gap: var(--gutter);
  padding-block: var(--s-5);
  border-top: 2px solid var(--ink);   /* default; data-club overrides */
  align-items: baseline;
}
.case[data-club="wildcats"] { border-top-color: var(--wildcats); }
.case[data-club="eagles"]   { border-top-color: var(--eagles); }
.case[data-club="fever"]    { border-top-color: var(--fever); }
.case[data-club="force"]    { border-top-color: var(--force); }
.case[data-club="glory"]    { border-top-color: var(--glory); }
.case:last-of-type { border-bottom: 1px solid var(--rule); }

.case__year {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.case__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 0.8rem + 1.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 32;
}
.case__name small {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-top: 0.5em;
}
.case__desc {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}
.case__cta {
  justify-self: end;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.case__cta:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* 17d PROCESS */
.process {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.process__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.process__step {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
  min-height: 200px;
  align-content: start;
}
.process__step:last-child { border-right: 0; }
.process__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 0.9;
  color: var(--accent);
  font-variation-settings: "opsz" 60;
}
.process__step h3 {
  margin: 0;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 24;
}
.process__step p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: 1.5;
}

/* 17e BOOKING */
.booking {
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.booking__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--gutter);
  align-items: start;
}
.booking__intro { grid-column: 1 / span 4; }
.booking__intro h2 { font-size: clamp(1.9rem, 0.6rem + 3vw, 3rem); }
.booking__form {
  grid-column: 6 / span 7;
  display: grid;
  gap: var(--s-4);
}


/* ========================================================================
   18 SCHOOL (B2C) PAGE — page-default accent is forest green
   ======================================================================== */
.page-school { --accent: var(--studio); }
.page-school .nav__link--accent { color: var(--accent); }

/* 18a SCHOOL HERO — mirrors home hero structure */
.school-hero {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-7) var(--s-8);
}
.school-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--gutter);
  align-items: start;
}
.school-hero__left {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--s-5);
  align-content: start;
}
.school-hero__display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 72;
  max-width: 16ch;
}
.school-hero__display em { font-style: italic; }
.school-hero__plate {
  grid-column: 8 / span 5;
  margin: 0;
}

/* 18b STREAMS */
.streams {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.stream-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter) var(--gutter);
}
.stream {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink);
  align-content: start;
}
.stream__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.stream h3 {
  margin: 0;
  font-size: clamp(1.3rem, 0.6rem + 1.4vw, 1.85rem);
  line-height: 1;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 32;
}
.stream__age {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink);
  letter-spacing: 0.06em;
}
.stream p {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}
.stream .plate {
  margin-top: var(--s-2);
  aspect-ratio: 4 / 5;
}

/* 18c TIMETABLE */
.timetable {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.tt-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--ink);
}
.tt {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--fs-small);
}
.tt th, .tt td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tt thead th {
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 400;
  background: var(--paper);
  text-transform: uppercase;
}
.tt td.time {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.tt td.class {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 24;
}
.tt td.tag {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.tt td.fee {
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--ink);
}
.tt__foot {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  padding-top: var(--s-3);
  letter-spacing: 0.04em;
}

/* 18d FEES */
.fees {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.fees-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  margin-top: var(--s-3);
  font-family: var(--sans);
}
.fees-table th, .fees-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.fees-table th {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  font-weight: 400;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.fees-table td:first-child {
  font-size: var(--fs-small);
}
.fees-table td:last-child {
  font-family: var(--mono);
  text-align: right;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.fees__note {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin-top: var(--s-4);
}

/* 18e TEACHERS */
.teachers {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.teacher-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.teacher {
  display: grid;
  gap: var(--s-3);
}
.teacher .plate { aspect-ratio: 4 / 5; }
.teacher h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.1;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 24;
}
.teacher .role {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.teacher p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: 1.5;
}

/* 18f ENROL STEPS */
.enrol-steps {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.step {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--rule);
  display: grid;
  gap: var(--s-3);
  min-height: 200px;
  align-content: start;
}
.step:last-child { border-right: 0; }
.step__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 1rem + 3vw, 3.6rem);
  line-height: 0.9;
  color: var(--accent);
  font-variation-settings: "opsz" 60;
}
.step h3 {
  margin: 0;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 24;
  font-style: italic;
  font-weight: 500;
}
.step p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: 1.5;
}

/* 18g FAQ */
.faq {
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.faq__list { border-top: 1px solid var(--ink); }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 4ch 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 0.6rem + 0.8vw, 1.45rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-variation-settings: "opsz" 32;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.faq summary .toggle {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  width: 1.2em;
  text-align: right;
  color: var(--ink-mute);
}
.faq summary .toggle::before { content: "+"; }
.faq details[open] summary .toggle::before { content: "−"; }
.faq__answer {
  padding-top: var(--s-3);
  padding-left: calc(4ch + var(--s-4));
  max-width: 65ch;
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: 1.55;
}


/* 19 FORMS =============================================================== */
.field {
  display: grid;
  gap: var(--s-2);
}
.field label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: var(--s-3) 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-mute);
}
.field textarea {
  min-height: 6em;
  resize: vertical;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.field__help {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin: 0;
}


/* ========================================================================
   20 RESPONSIVE OVERRIDES
   ======================================================================== */

@media (min-width: 760px) {
  .masthead__meta { display: block; }
}

@media (max-width: 1080px) {
  .hero__left { grid-column: 1 / span 12; }
  .hero__plate { grid-column: 1 / span 12; max-width: 32rem; }
  .b2b-hero__left { grid-column: 1 / span 12; }
  .b2b-hero__plate { grid-column: 1 / span 12; max-width: 32rem; }
  .school-hero__left { grid-column: 1 / span 12; }
  .school-hero__plate { grid-column: 1 / span 12; max-width: 32rem; }
  .gigs__list { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid { grid-template-columns: repeat(2, 1fr); }
  .stream-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap:nth-child(3n) { border-right: 1px solid var(--rule); }
  .cap:nth-child(2n) { border-right: 0; }
  .booking__intro { grid-column: 1 / span 12; }
  .booking__form { grid-column: 1 / span 12; }
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .process__step:nth-child(2) { border-right: 0; }
  .process__step:nth-child(1),
  .process__step:nth-child(2),
  .process__step:nth-child(3) { border-bottom: 1px solid var(--rule); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(1),
  .step:nth-child(2) { border-bottom: 1px solid var(--rule); }
}

@media (max-width: 760px) {
  :root { --gutter: 1.1rem; }

  /* --- Masthead reflow --- */
  .masthead__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-3);
  }
  .masthead__meta { display: none; }
  .wordmark {
    font-size: clamp(1.05rem, 4vw + 0.2rem, 1.3rem);
    letter-spacing: -0.005em;
    line-height: 1.05;
  }

  /* Hamburger active */
  .nav-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--ink);
    cursor: pointer;
    margin-left: auto;
  }
  .nav-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
  }
  .nav-toggle__bars span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--ink);
  }
  .nav-toggle__close {
    display: none;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink);
  }
  .nav-toggle:checked ~ .nav-toggle__btn {
    background: var(--paper-2);
    border-color: var(--ink);
  }
  .nav-toggle:checked ~ .nav-toggle__btn .nav-toggle__bars { display: none; }
  .nav-toggle:checked ~ .nav-toggle__btn .nav-toggle__close { display: inline; }

  .nav {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    grid-column: 1 / -1;
    justify-self: stretch;
    border-top: 1px solid var(--rule);
    margin-top: var(--s-3);
    padding-top: var(--s-2);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav__link {
    display: block;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
    min-height: 44px;
  }
  .nav__link:last-child { border-bottom: 0; }

  /* --- Hero stacks --- */
  .hero__grid,
  .b2b-hero__grid,
  .school-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .hero__left,
  .hero__plate,
  .b2b-hero__left,
  .b2b-hero__plate,
  .school-hero__left,
  .school-hero__plate {
    grid-column: 1 / -1;
    max-width: none;
  }

  /* --- Fork stacks --- */
  .fork__pair { grid-template-columns: 1fr; gap: var(--s-6); }
  .fork__card:first-child {
    padding-right: 0;
    border-right: 0;
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--rule);
  }
  .fork__card:last-child { padding-left: 0; }

  /* --- Gigs stack --- */
  .gigs__list { grid-template-columns: 1fr; }

  /* --- Clients band stacks --- */
  .clients__grid { grid-template-columns: 1fr; }
  .client { border-right: 0; border-bottom: 1px solid rgba(237,233,224,0.18); min-height: 0; padding: var(--s-4) var(--s-2); }
  .client:last-child { border-bottom: 0; }

  /* --- Enrol --- */
  .enrol__display { grid-column: 1 / -1; }
  .enrol__side { grid-column: 1 / -1; }

  /* --- Footer --- */
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__mark { grid-column: 1 / -1; }
  .footer__col { grid-column: span 1; }
  .footer__base { font-size: 0.66rem; flex-direction: column; align-items: flex-start; gap: var(--s-2); }

  /* --- B2B/School page tweaks --- */
  .cap-grid { grid-template-columns: 1fr; }
  .cap { border-right: 0; }
  .case {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .case__cta { justify-self: start; }
  .process__list { grid-template-columns: 1fr; }
  .process__step { border-right: 0; border-bottom: 1px solid var(--rule); }
  .process__step:last-child { border-bottom: 0; }
  .stream-grid { grid-template-columns: 1fr; }
  .teacher-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--rule); }
  .step:last-child { border-bottom: 0; }
  .field-row { grid-template-columns: 1fr; }

  /* --- Plate caption tightens --- */
  .plate figcaption {
    font-size: 0.78rem;
    padding: 0.5rem 0.7rem;
    gap: 0.5rem;
  }
  .plate figcaption .num { font-size: 0.7rem; white-space: nowrap; }

  /* --- Section padding compression --- */
  .hero, .b2b-hero, .school-hero,
  .fork, .gigs, .clients, .enrol,
  .capabilities, .case-list, .process, .booking,
  .streams, .timetable, .fees, .teachers, .enrol-steps, .faq { padding-block: var(--s-6); }
  .footer { padding-block: var(--s-5); }

  /* --- iOS form zoom lock --- */
  .field input, .field textarea, .field select { font-size: 16px; }

  /* --- Timetable horizontal scroll --- */
  .tt { font-size: 0.78rem; min-width: 600px; }
}

@media (max-width: 480px) {
  .today__row { grid-template-columns: 1fr; gap: 0.1rem; padding-block: 0.3rem; }
  .today__row dt { font-size: 0.72rem; color: var(--ink); }
  .today__row dd { font-size: 0.78rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .teacher-grid { grid-template-columns: 1fr; }
  .hero__display,
  .b2b-hero__display,
  .school-hero__display { font-size: clamp(2rem, 6vw + 1.2rem, 3rem); line-height: 1.02; }
  .enrol__display { font-size: clamp(1.9rem, 6vw + 0.8rem, 2.6rem); line-height: 1.05; }
  .lede, .hero__lede { font-size: 1rem; }
  .formation-dots { width: 140px; margin: var(--s-5) auto; }
}

@media (max-width: 360px) {
  :root { --gutter: 0.85rem; }
  .wordmark { font-size: 1rem; }
  .hero__display,
  .b2b-hero__display,
  .school-hero__display { font-size: 1.85rem; }
  .nav-toggle__btn { width: 40px; height: 40px; }
}


/* 21 PRINT =============================================================== */
@media print {
  body { background: white; color: black; }
  .masthead, .nav, .footer__base, .btn { display: none; }
  .plate { break-inside: avoid; }
  a { color: black; text-decoration: underline; }
}