/* ==========================================================================
   Rally — padel / pickleball / tennis club one-pager
   A Templatorium template · https://templatorium.pages.dev

   THE IDEA: the page is drawn like the court itself. Chalk lines on court
   blue, one lime ball, book-a-court everywhere. The hero is a to-scale
   padel-court plan that draws itself once on load, and the court's
   service-line divisions become the page's 10-column grid.

   HOW TO RE-THEME (30-second version — full guide in docs/README.md):
   every color, font, and size lives in the :root block below. Change the
   values there and the whole page follows. Everything under the tokens is
   structure; you should rarely need to touch it.

   A promise this template makes that yours should keep: every text/ground
   pair ships computed to WCAG 2.2 AA (worst pair 6.19:1, most are 7+).
   If you swap colors, re-check them:
   https://webaim.org/resources/contrastchecker/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — the re-theme contract
   -------------------------------------------------------------------------- */
:root {
  /* Color story: chalk white / night navy / court-blue fields / one lime ball.
     THE RULE THAT MAKES IT WORK: lime is the ball — it appears on well under
     5% of the page (the Book button fill, the ball dot, one underlined word
     per dark headline, stat tick marks on blue). Lime NEVER appears as text
     or a line on light grounds: #C8F031 on chalk is 1.23:1 — a computed,
     documented FAIL. Keep the ball rare and it stays a ball. */
  --bg:        #F8F7F2;  /* page — chalk white */
  --surface:   #EFEDE4;  /* alt cards, FAQ rows */
  --ink:       #0E1B2E;  /* primary text — night navy (16.1:1 on chalk) */
  --muted:     #46536B;  /* secondary text (7.2:1 on chalk, 6.6:1 on surface) */
  --line:      #DDD9CC;  /* decorative hairlines on light grounds only */
  --court:     #1D4F91;  /* court blue — full-bleed fields; also secondary
                            "ink" on chalk (7.59:1) */
  --accent:    #C8F031;  /* THE lime ball (6.19:1 on court, 13.1:1 on ink) */
  --accent-ink:#0E1B2E;  /* text on lime fills (13.1:1) */

  /* Dark grounds. On court-blue and ink fields, "lines" are chalk — they
     ARE the court markings. Secondary text on ink gets its own token
     (chalk at reduced weight would need opacity; never do that). */
  --chalk:         #F8F7F2; /* text + markings on court/ink fields (7.59 / 16.1) */
  --muted-on-ink:  #96A5BE; /* secondary text on ink (6.93:1) */
  --inverse-bg:    #0E1B2E; /* footer / final CTA / events band */

  /* Type. All three faces are vendored in /fonts as single variable files —
     nothing ever loads from a font CDN. Free for commercial use:
     Chillax + General Sans (Fontshare ITF FFL), Spline Sans Mono (OFL). */
  --font-display: "Chillax", "Avenir Next", system-ui, sans-serif;
  --font-body:    "General Sans", system-ui, sans-serif;
  --font-label:   "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;

  /* Scale. The jump IS the design: up to 108px rounded-geometric display
     against 16px body, with mono scoreboard numerals as a third register. */
  --t-display: clamp(44px, 8vw, 108px);
  --t-h2:      clamp(32px, 4.6vw, 60px);
  --t-h3:      21px;
  --t-stat:    clamp(48px, 7vw, 96px);   /* scoreboard numerals */
  --t-body:    16px;
  --t-small:   14px;
  --t-label:   11px;                     /* mono eyebrow size */

  /* Space & structure. The 10-column grid is the padel court: the net falls
     between columns 5 and 6, the service-box edges at columns 3 and 8 are
     the two anchor axes content snaps to. */
  --sp-section: clamp(64px, 9vw, 104px);
  --gutter:     24px;
  --max:        1200px;

  /* Shape. Pills are sporty, cards are soft, DIAGRAMS ARE SQUARE — technical
     drawings never get rounded corners. */
  --radius-pill: 40px;
  --radius-card: 12px;

  /* Court markings weight (the 1.5px chalk line) */
  --mark: 1.5px;
}

/* --------------------------------------------------------------------------
   2. FONT FACES — vendored variable woff2, one file per family
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Chillax";
  src: url("../fonts/chillax-variable.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-variable.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/spline-sans-mono-variable.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap; /* the file's true fvar range */
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Anchor targets land clear of the sticky nav (64px bar + 2px court rule,
   plus breathing room) instead of sliding underneath it */
[id] { scroll-margin-top: 72px; }
/* clip, not hidden: keeps the sticky nav working while the ticker track
   (which is wider than the page by design) never causes a scrollbar */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Focus is ground-aware — a single ring color cannot pass on every field
   this page uses, so each ground declares its own (both computed ≥6:1,
   double the 3:1 non-text minimum):
   · light grounds (chalk / surface):        court blue  (7.59:1 on chalk)
   · dark grounds (court / ink / footer):    lime        (6.19:1 / 13.1:1)
   EVERY dark ground must be in the lime list — the footer is an ink ground
   even though it isn't a .field-ink section. */
:focus-visible {
  outline: 3px solid var(--court);
  outline-offset: 2px;
  border-radius: 2px;
}
.field-court :focus-visible,
.field-ink   :focus-visible,
.footer      :focus-visible {
  outline-color: var(--accent);
}

.container {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The court grid — 10 columns, net between 5|6, service lines at 3 and 8 */
.court-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--gutter);
}

section { padding-block: var(--sp-section); }

/* Full-bleed flat fields — no gradients, no glass, anywhere */
.field-court { background: var(--court); color: var(--chalk); }
.field-ink   { background: var(--inverse-bg); color: var(--chalk); }
.field-surface { background: var(--surface); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* the skip link surfaces when keyboard users reach it */
a.visually-hidden:focus-visible {
  width: auto; height: auto; clip-path: none;
  z-index: 20;
  top: 8px; left: 8px;
  background: var(--bg);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);           /* on light grounds */
}
.field-court .eyebrow,
.field-ink .eyebrow { color: var(--chalk); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }

/* The one lime-underlined word — DARK GROUNDS ONLY (lime is invisible on
   chalk, 1.23:1). One word per display headline, never more. */
.u {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 6px;
  text-underline-offset: 0.12em;
}

p { max-width: 66ch; }
.lede { font-size: 18px; font-weight: 500; }
.nb   { white-space: nowrap; } /* keeps units like "open 07–23" on one line */
.mut  { color: var(--muted); }
.field-court .mut, .field-ink .mut { color: var(--muted-on-ink); }
.field-court .mut { color: var(--chalk); } /* on court blue, chalk carries all text */

/* Mono micro-label (booking platform note, photo-slot labels, specs) */
.mono-note {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Scoreboard numerals — the demoted Scoreboard candidate, kept as a detail */
.stat-num {
  font-family: var(--font-label);
  font-size: var(--t-stat);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   5. BUTTONS — pills (radius 40px, sporty)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
}

/* Primary — THE lime ball as a button. Ink text: 13.1:1. The thin ink
   keyline keeps the pill crisp on chalk grounds (lime-vs-chalk luminance
   is close even though the hue pops). */
.btn-book {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1.5px solid var(--ink);
}
.btn-book:hover { background: #D4F55C; }

/* Secondary — court-blue outline on light grounds… */
.btn-ghost {
  background: transparent;
  color: var(--court);
  border: 1.5px solid var(--court);
}
.btn-ghost:hover { background: var(--surface); }
/* …chalk outline on court / ink fields */
.field-court .btn-ghost, .field-ink .btn-ghost {
  color: var(--chalk);
  border-color: var(--chalk);
}
.field-court .btn-ghost:hover, .field-ink .btn-ghost:hover {
  background: rgba(248, 247, 242, 0.12); /* decorative fill only, text stays chalk */
}

/* Every Book button carries its honesty label underneath */
.book-cluster { display: inline-flex; flex-direction: column; gap: 8px; }
.book-cluster .mono-note { opacity: 1; }
.field-court .book-cluster .mono-note { color: var(--chalk); }

/* --------------------------------------------------------------------------
   6. NAV — solid chalk at all times, 2px court rule. No glass, no
      translucency, nothing to re-check mid-scroll.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 2px solid var(--court);
}
.nav-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The brand's ball dot — lime lives on the ink dot, never raw on chalk */
.brand .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ink);
}
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  display: inline-block;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
}
.nav-links a:hover { background: var(--surface); }
.nav .btn-book { padding: 12px 22px; font-size: 15px; }
.nav-toggle {
  display: none;
  font: 600 15px/1 var(--font-body);
  background: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   7. HERO — THE COURT PLAN (the signature; drawn once, then it's the grid)
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 88px); }
/* aspect-ratio 2:1 with auto height = the court renders to scale (10m × 20m)
   whenever the content allows; taller content stretches it gracefully */
.hero-inner { position: relative; aspect-ratio: 2 / 1; }

/* The to-scale court (10m × 20m) sits behind the content on desktop.
   Its markings are 1.5px chalk lines — the same weight as every court
   marking on the page. */
.court-plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* NOTE: no vector-effect here on purpose — Chromium mis-renders
   stroke-dasharray + pathLength when non-scaling-stroke is set (the drawn
   court shows gaps). Stroke widths are in viewBox units instead, sized so
   they land at ≈1.5px on screen. */
.court-plan line, .court-plan rect, .court-plan path {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 0.55; /* viewBox 400×200 stretched to ~1170px ⇒ ≈1.5px */
}
.court-portrait { display: none; } /* mobile only, see §14 */
.court-portrait line, .court-portrait rect {
  stroke-width: 1.1;  /* viewBox 200×400 at ~300px wide ⇒ ≈1.5px */
}

/* The draw: every marking carries pathLength="1", so one keyframe serves
   all of them. VISIBLE-BY-DEFAULT RULE: the resting state is the fully
   drawn court — the animation *plays over it* once on load. No-JS, print,
   reduced-motion, and full-page screenshots all get the complete plan. */
@media (prefers-reduced-motion: no-preference) {
  .court-plan .draw {
    stroke-dasharray: 1;
    animation: court-draw 260ms ease-out both;
  }
  /* Construction order: walls → service lines → center line → net.
     Delays spread the stages so walls → service → net reads sequential;
     total 500ms — inside the on-load budget, and even a headless
     full-page capture lands after the plan is complete. */
  .court-plan .draw-1 { animation-delay: 0ms; }
  .court-plan .draw-2 { animation-delay: 100ms; }
  .court-plan .draw-3 { animation-delay: 170ms; }
  .court-plan .draw-4 { animation-delay: 240ms; } /* the net lands last */
}
@keyframes court-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* The one lime ball — sits ON the net line, level with the Book-a-Court
   pill it points at. It is anchored to .hero-cta, NOT to the hero box:
   the CTA row spans grid columns 1–5, so its right edge always ends half
   a gutter (12px) short of the net line, at every viewport width. The
   trajectory (.hero-cta::after) runs from just past the Book cluster to
   the ball. Decorative; aria-hidden in the HTML. Desktop only — the
   portrait plan carries its own keylined ball (see §14). */
@media (min-width: 721px) {
  .ball {
    position: absolute;
    right: -21px;      /* hero-cta edge + 12px half-gutter = the net line,
                          minus half the ball (9px) to center it on it */
    top: 16px;         /* centered on the 51px Book pill row */
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--inverse-bg);
  }
  .hero-cta::after {
    /* the dashed flight path: Book pill → ball. left clears the widest
       line of the Book cluster (the mono booking note, ~230px). */
    content: "";
    position: absolute;
    left: 260px;
    right: -2px;       /* runs up to the ball's edge on the net line */
    top: 25px;         /* the Book pill row's vertical center */
    border-top: var(--mark) dashed var(--chalk);
  }
}

.hero-grid { position: relative; row-gap: 32px; }
/* CHALK-LINE KNOCKOUT: the court plan's lines are the same chalk as the
   hero text, so every text block the lines pass behind gets a solid
   court-blue backing — the drafting-label treatment. box-decoration-break
   makes the backing hug each wrapped line instead of boxing the block. */
.knockout {
  background: var(--court);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 12px;
}
.lede .knockout { padding-block: 0.3em; } /* covers the 1.6 leading gaps too */
/* the eyebrow sits ON the top wall line like a drafting label */
.hero-eyebrow {
  grid-column: 1 / 6;
  justify-self: start;
  background: var(--court);
  padding-right: 12px;
}
.hero h1 { grid-column: 1 / 7; }        /* headline owns the left service box */
.hero .lede { grid-column: 1 / 5; max-width: 34ch; }
/* CTA: Book cluster on the first row with the ball's flight path beside
   it; the ghost pill sits on its own row below so the trajectory never
   crosses it. position: relative anchors the ball + trajectory. */
.hero-cta {
  grid-column: 1 / 6;
  position: relative;
  display: grid;
  justify-items: start;
  gap: 16px;
}
/* knock the plan's lines out behind the booking note and the ghost pill */
.hero-cta .mono-note { background: var(--court); padding-right: 12px; }
.hero .btn-ghost { background: var(--court); }
.hero .btn-ghost:hover {
  background:
    linear-gradient(rgba(248, 247, 242, 0.12), rgba(248, 247, 242, 0.12))
    var(--court); /* the hover wash, kept opaque over the plan lines */
}

/* Quick stats snap to the three court zones: left box / net / right box */
.hero-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* mirrors the court grid */
  gap: var(--gutter);
  margin-top: clamp(16px, 3vw, 40px);
}
.hero-stats > div { min-width: 0; }
.hero-stats > div:nth-child(1) { grid-column: 1 / 4; }
.hero-stats > div:nth-child(2) { grid-column: 4 / 8; }
.hero-stats > div:nth-child(3) { grid-column: 8 / 11; }
.hero-stats dt {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  order: 2;
  margin-top: 10px;
}
.hero-stats dd { order: 1; }
.hero-stats > div { display: flex; flex-direction: column; align-items: flex-start; }
/* stat labels + numerals get the chalk-line knockout too — the plan's
   vertical lines cross this row */
.hero-stats dt,
.hero-stats .stat-num { background: var(--court); padding-right: 12px; }
/* the lime stat tick — one of lime's four permitted jobs */
.hero-stats > div::before {
  content: "";
  width: 28px;
  height: 4px;
  background: var(--accent);
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   8. COURTS & FACILITIES — diagram tiles (square: technical drawings)
   -------------------------------------------------------------------------- */
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head p { margin-top: 16px; }

/* THE SITE PLAN — one composite drawing of the whole club: four panoramic
   courts in the indoor hall, two classic outdoor, mono labels, a marked
   entrance. One diagram with real information, not six identical stamps.
   Every court is drawn once (<g id="plan-court"> in the hidden defs SVG)
   and placed six times with <use>. Square panel: diagrams never round. */
.site-plan {
  background: var(--court);
  color: var(--chalk);
  padding: clamp(20px, 4vw, 40px);
  /* radius 0 — diagram panels stay square */
}
/* the defs SVG only carries #plan-court; keep it rendered-but-invisible
   (display:none on a <use> source breaks in some engines) */
.plan-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-plan .plan {
  width: 100%;
  max-width: 760px;   /* caps the scale so the mono labels stay label-sized */
  height: auto;
  margin-inline: auto;
}
.site-plan line, .site-plan rect {
  fill: none;
  stroke: var(--chalk);
  stroke-width: var(--mark);
  vector-effect: non-scaling-stroke;
}
.site-plan .wall { stroke-width: 3px; }         /* the hall reads as building */
.site-plan .door {                               /* entrance = gap in the wall */
  stroke: var(--court);
  stroke-width: 6px;
}
.site-plan text {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 9px;      /* viewBox units — lands near --t-label on screen */
  letter-spacing: 0.14em;
  fill: var(--chalk);
}
.plan-portrait { display: none; }                /* mobile only, see §15 */
.plan-portrait text { font-size: 11px; }         /* narrower viewBox, same optical size */
.site-plan > .mono-note {
  color: var(--chalk);
  margin-top: 20px;
  text-align: center;
  max-width: none;   /* the base p cap would push this off-center */
}

/* Labeled photo slot — art-directed, never auto-faked. The empty state is
   a full court line-diagram with a mono spec label. Replace the whole
   <div class="slot">…</div> with your <img> (see docs/README.md §4). */
.slot {
  background: var(--court);
  color: var(--chalk);
  display: grid;
  place-items: center;
  position: relative;
  /* radius 0 on court fields per the shape rules */
}
.slot-3x2 { aspect-ratio: 3 / 2; margin-top: var(--gutter); }
.slot-1x1 { aspect-ratio: 1 / 1; }
.slot svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.slot line, .slot rect {
  fill: none;
  stroke: var(--chalk);
  stroke-width: var(--mark);
  vector-effect: non-scaling-stroke;
}
.slot .mono-note {
  position: relative;
  background: var(--court);
  padding: 6px 12px;
  border: var(--mark) solid var(--chalk);
}

/* --------------------------------------------------------------------------
   9. NEW TO PADEL — the on-ramp (deliberately airy; the asymmetry section)
   -------------------------------------------------------------------------- */
/* The headline hangs ACROSS the net line into the right box (cols 4–8);
   the numbered steps stay inside the LEFT service box (cols 1–3). */
.onramp .eyebrow { grid-column: 1 / 4; grid-row: 1; padding-top: 14px; }
.onramp h2 { grid-column: 4 / 9; grid-row: 1; }
.onramp-steps {
  grid-column: 1 / 4;
  grid-row: 2;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
  margin-top: clamp(24px, 4vw, 48px);
}
.onramp-steps li { counter-increment: step; }
.onramp-steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--court);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.onramp-steps h3 { margin-bottom: 8px; }
.onramp-aside {
  grid-column: 5 / 9;
  grid-row: 2;
  align-self: end;
  margin-top: clamp(24px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   10. COACHING — court-blue field
   -------------------------------------------------------------------------- */
.coaching-grid { row-gap: 40px; }
.coaching-head { grid-column: 1 / 7; }
.coaching-slot { grid-column: 8 / 11; grid-row: 1 / 3; align-self: start; }
.levels {
  grid-column: 1 / 7;
  list-style: none;
  border-top: var(--mark) solid var(--chalk);
}
.levels li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  padding-block: 20px;
  border-bottom: var(--mark) solid var(--chalk);
}
.levels h3 { grid-column: 1; }
.levels .when {
  grid-column: 2; grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-label);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.levels p { grid-column: 1; }
.coach-line { grid-column: 1 / 7; }

/* --------------------------------------------------------------------------
   11. PRICING — three tiers, the middle one shouts
   -------------------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}
.tier {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tier .price {
  font-family: var(--font-label);
  font-size: 40px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tier .price small {
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.08em;
}
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tier ul li { padding-left: 22px; position: relative; font-size: var(--t-small); }
.tier ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 4px;
  background: var(--court);   /* blue ticks on chalk cards */
}

/* The Unlimited tier — a flat slogan card, not a third clone */
.tier-unlimited {
  background: var(--court);
  color: var(--chalk);
  border: none;
}
.tier-unlimited .slogan {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
}
.tier-unlimited ul li::before { background: var(--accent); } /* lime ticks — dark ground */
.tier-unlimited .mono-note { color: var(--chalk); }

/* Trial-offer slot (Picklr pattern: trial-first). Solid court rule —
   dashed borders are this template's placeholder vocabulary (map slot),
   and a real offer isn't a placeholder. */
.trial {
  margin-top: var(--gutter);
  border: 1.5px solid var(--court);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
}
.trial .mono-note { color: var(--court); }

/* Per-hour court pricing — mono ledger table */
.rate-table { margin-top: clamp(40px, 6vw, 64px); }
.rate-table table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rate-table caption {
  text-align: left;
  margin-bottom: 16px;
}
.rate-table th, .rate-table td {
  text-align: left;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
}
.rate-table thead th {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.rate-table td:last-child, .rate-table th:last-child {
  text-align: right;
  font-family: var(--font-label);
}
.after-pricing { margin-top: clamp(40px, 6vw, 56px); }

/* --------------------------------------------------------------------------
   12. EVENTS TICKER — ink field; the club's pulse. Pauses on hover/focus;
       becomes a static two-row list under reduced-motion.
   -------------------------------------------------------------------------- */
.events { padding-block: clamp(48px, 6vw, 72px); }
.ticker-viewport { overflow: hidden; margin-top: 28px; }
.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
}
.ticker-list {
  list-style: none;
  display: flex;
  white-space: nowrap;
}
.ticker-list li {
  font-family: var(--font-label);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-right: 20px;
}
/* the separator dot between entries — chalk, not lime (lime is the ball) */
.ticker-list li::after { content: "·"; padding-left: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 36s linear infinite; }
  .ticker-viewport:hover .ticker-track,
  .ticker-viewport:focus-within .ticker-track { animation-play-state: paused; }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* track holds two identical lists */
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { width: auto; }
  .ticker-list { flex-wrap: wrap; white-space: normal; row-gap: 8px; }
  .ticker-list[aria-hidden="true"] { display: none; } /* drop the loop copy */
}

/* --------------------------------------------------------------------------
   13. AMENITIES (2-1-3), TESTIMONIAL SLOTS, FAQ, LOCATION
   -------------------------------------------------------------------------- */
/* Amenities — mono labels do the work; no icon set. 2-1-3, not a six-pack. */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}
.amenity {
  border-top: var(--mark) solid var(--court);
  padding-top: 14px;
}
.amenity:nth-child(1), .amenity:nth-child(2) { grid-column: span 3; }
.amenity:nth-child(3) { grid-column: 1 / -1; }  /* the full-width row */
.amenity:nth-child(4), .amenity:nth-child(5), .amenity:nth-child(6) { grid-column: span 2; }
.amenity .mono-note { color: var(--court); display: block; margin-bottom: 6px; }
.amenity p { font-size: var(--t-small); color: var(--muted); }

/* Testimonials — two staggered type-only quotes. These ship as SLOTS:
   paste real member quotes or delete the section. Never fake them. */
.quotes { row-gap: clamp(32px, 5vw, 56px); }
.quote { margin: 0; }
.quote:nth-of-type(1) { grid-column: 1 / 7; }
.quote:nth-of-type(2) { grid-column: 4 / 10; }
.quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  max-width: none;
}
.quote footer { margin-top: 14px; }

/* FAQ — native <details> on surface rows; works with zero JS */
.faq details {
  background: var(--bg);
  border-radius: var(--radius-card);
  border: 1.5px solid var(--line);
}
.faq details + details { margin-top: 12px; }
.faq summary {
  font-weight: 600;
  padding: 18px 22px;
  cursor: pointer;
  list-style-position: inside;
}
.faq summary:hover { color: var(--court); }
.faq details div { padding: 0 22px 18px; }

/* Location & hours */
.where { row-gap: 40px; }
.where-address { grid-column: 1 / 4; }
.where-address address { font-style: normal; }
.where-hours { grid-column: 4 / 8; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td {
  font-family: var(--font-label);
  font-size: var(--t-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-align: left;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.hours-table td:last-child { text-align: right; }
.where-map { grid-column: 8 / 11; }
/* Map slot — a labeled placeholder, never a fake embed */
.map-slot {
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--court);
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
}
.map-slot .mono-note { color: var(--court); }

/* --------------------------------------------------------------------------
   14. FINAL CTA + FOOTER — ink fields
   -------------------------------------------------------------------------- */
.final-cta { text-align: left; }
.final-cta h2 { font-size: var(--t-display); max-width: 12ch; }
.final-cta .cta-row {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
}
.final-cta .text-link {
  font-weight: 500;
  text-underline-offset: 4px;
}

.footer {
  background: var(--inverse-bg);
  color: var(--chalk);
  padding-block: clamp(40px, 6vw, 64px);
  border-top: var(--mark) solid var(--chalk);
  position: relative;
  overflow: hidden;
}
.footer-grid { row-gap: 32px; position: relative; }
.footer-brand { grid-column: 1 / 5; }
.footer-hours { grid-column: 5 / 8; }
.footer-links { grid-column: 8 / 11; list-style: none; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer .mono-note { color: var(--muted-on-ink); display: block; margin-bottom: 10px; }
.footer .fine { font-size: var(--t-small); color: var(--muted-on-ink); margin-top: 24px; }
.footer-hours p {
  font-family: var(--font-label);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
/* Court-fragment watermark — decorative chalk lines at 12% opacity */
.footer-watermark {
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: 46%;
  opacity: 0.12;
  pointer-events: none;
}
.footer-watermark line, .footer-watermark rect {
  fill: none;
  stroke: var(--chalk);
  stroke-width: var(--mark);
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE — one codebase; the court turns portrait on phones
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .quote:nth-of-type(1) { grid-column: 1 / 9; }
  .quote:nth-of-type(2) { grid-column: 3 / 11; }
  .coaching-head, .levels, .coach-line { grid-column: 1 / 11; }
  .coaching-slot { grid-column: 1 / 7; grid-row: auto; }
  .where-address { grid-column: 1 / 6; }
  .where-hours { grid-column: 6 / 11; }
  .where-map { grid-column: 1 / 6; }
}

/* Nav → chalk drawer at 880px, well before the six links + Book pill
   start wrapping to two lines (they break around 800px). The lime Book
   pill STAYS in the bar at every width — it's the point. */
@media (max-width: 880px) {
  .nav-toggle { display: inline-block; margin-left: auto; }
  html:not(.js) .nav-toggle { display: none; } /* no JS → no dead button */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 2px solid var(--court);
    flex-direction: column;
    padding: 12px var(--gutter) 20px;
    margin: 0;
  }
  .nav-links.open { display: flex; }
  .nav .btn-book { margin-left: 0; }
  .nav-bar { gap: 12px; }
}

@media (max-width: 720px) {
  /* Hero: the court rotates to portrait; content stacks; stats follow */
  .court-landscape { display: none; }
  .court-portrait {
    display: block;
    position: static;
    width: min(62vw, 300px);
    height: auto;
    margin: 8px auto;
  }
  /* (the .ball and its trajectory are scoped to min-width: 721px in §7 —
     the portrait plan carries its own keylined ball) */
  .hero-grid, .court-grid { display: block; }
  .hero h1, .hero .lede, .hero-cta, .hero-eyebrow { margin-bottom: 20px; }
  .hero-stats { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }

  /* Portrait court draws shorter still — same sequential spread */
  @media (prefers-reduced-motion: no-preference) {
    .court-plan .draw { animation-duration: 220ms; }
    .court-plan .draw-2 { animation-delay: 90ms; }
    .court-plan .draw-3 { animation-delay: 150ms; }
    .court-plan .draw-4 { animation-delay: 210ms; }
  }

  section { padding-block: 56px; }
  /* Site plan rotates portrait, like the hero court */
  .plan-landscape { display: none; }
  .plan-portrait { display: block; max-width: 400px; }
  .onramp h2, .onramp-steps, .onramp-aside { margin-top: 0; }
  .onramp-aside { margin-top: 28px; }

  /* Tiers stack — Unlimited first */
  .tiers { grid-template-columns: 1fr; }
  .tier-unlimited { order: -1; }

  .amenities-grid { grid-template-columns: 1fr 1fr; }
  .amenity:nth-child(n) { grid-column: span 2; }
  .amenity:nth-child(4), .amenity:nth-child(5) { grid-column: span 1; }

  .quote p { font-size: 22px; }
  .footer-grid > * { margin-bottom: 8px; }
}