/* ==========================================================================
   ALTA PADEL — web design system
   --------------------------------------------------------------------------
   Tokens from BRAND.md. source/brand.css is the reference for color, type
   relationships and component styling — nothing is imported from it, because
   it carries print-only hacks (zoom: 1.302, display:table columns, mm units).

   1  Tokens
   2  Reset & base
   3  Typography
   4  Layout primitives
   5  Chrome — header, nav, footer
   6  Components
   7  Utilities
   8  Print
   ========================================================================== */


/* ==========================================================================
   1  TOKENS
   ========================================================================== */

:root {

  /* ---- Color: the BRAND.md palette, verbatim ---------------------------- */
  --charcoal:        #384146;   /* primary: body text, dark panels, structure */
  --charcoal-deep:   #23292C;   /* header and footer bars, deepest surfaces   */
  --gold:            #C49C5F;   /* ACCENT ONLY - graphics: rules, borders, icons */
  /* Gold as TYPE. #C49C5F is 2.54:1 on white and 4.11:1 on charcoal, so it
     fails WCAG AA wherever it renders as small text. These two carry the same
     hue at compliant lightness; --gold itself is untouched and still paints
     every rule, border, underline, focus ring and the logo. */
  --gold-ink:        #8B692D;   /* gold type on white/tint  - 5.05:1 on white  */
  --gold-text:       #CDA76B;   /* gold type on charcoal    - 4.64:1           */
  /* Resolved per context below, so .kicker and .gold need no per-surface
     variants of their own - the custom property inherits into dark panels. */
  --gold-type:       var(--gold-ink);
  --gold-wash:       #FAF7F2;   /* background of highlight boxes              */
  --grey-panel:      #F1F3F4;   /* background of secondary boxes              */
  --hairline:        #E1E4E6;   /* table rules, borders                       */
  --body-grey:       #5A656B;   /* secondary text                             */
  --muted:           #667078;   /* captions, footnotes, labels - 5.06:1 white */
  --court-blue:      #DCE6EC;   /* diagram fills only — never a UI color      */

  /* ---- Color: extensions ------------------------------------------------
     Not in BRAND.md, but present in brand.css and needed by the components.
     Kept identical to print so the two systems agree.                      */
  --surface:         #FFFFFF;
  --row-alt:         #F7F8F9;   /* table.spec tr.alt tint                     */
  --hairline-soft:   #D6DADC;   /* .hair divider, .box border                 */
  --on-dark:         #E6E9EA;   /* body text on charcoal                      */
  --on-dark-soft:    #C0C7CB;   /* standfirst on charcoal                     */
  --on-dark-muted:   #A5ABB1;   /* mono chrome on charcoal - 4.50:1           */
  --dark-panel:      #2C3438;   /* inset panel within a dark section          */
  --dark-row:        #414B51;   /* alternating row within a dark table        */
  --dark-rule:       #5A646A;   /* divider on charcoal                        */

  /* ---- Type -------------------------------------------------------------
     BRAND.md: "a clean grotesque with a strong 800 weight — Inter, Söhne or
     similar. Match the *relationships*, not the exact faces."
     Inter if self-hosted or installed; otherwise the platform grotesque,
     which carries a genuine 800 on Windows and macOS.                      */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Display", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, "Liberation Mono", monospace;

  /* Size. Ratios to body are held from print: small 0.88, cap 0.80.
     Headings are fluid rather than fixed — a fixed 27pt h1 is a page-sized
     number, not a screen-sized one.                                        */
  --fs-hero:    clamp(2.375rem, 1.45rem + 4.4vw, 4.25rem);  /* 38 → 68 */
  --fs-h1:      clamp(1.875rem, 1.42rem + 2.2vw, 2.875rem); /* 30 → 46 */
  --fs-h2:      clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); /* 22 → 30 */
  --fs-h3:      0.9375rem;                                   /* 15, uppercase */
  --fs-h4:      1.0625rem;
  --fs-lede:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:    1.0625rem;                                   /* 17 */
  --fs-small:   0.9375rem;                                   /* 15 — 0.88 */
  --fs-cap:     0.8125rem;                                   /* 13 — 0.80 */
  --fs-kicker:  0.8125rem;
  --fs-mono:    0.8125rem;
  --fs-chrome:  0.6875rem;                                   /* 11 — bar ids */
  --fs-stat:    clamp(1.625rem, 1.3rem + 1.5vw, 2.125rem);
  --fs-stat-l:  0.6875rem;

  /* Line height — body 1.46 and small 1.42 are from BRAND.md */
  --lh-body:   1.46;
  --lh-small:  1.42;
  --lh-hero:   1.04;
  --lh-h1:     1.08;
  --lh-h2:     1.12;
  --lh-h3:     1.3;

  /* Tracking. Print values converted to em at their own point size:
     kicker 2.8pt/7.6pt = 0.37em, h3 0.9pt/9.8pt = 0.09em,
     cap 1.4pt/7.4pt = 0.19em, h2 -0.3pt/21pt = -0.014em.                   */
  --ls-hero:    -0.025em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  --ls-h3:       0.09em;
  --ls-kicker:   0.34em;
  --ls-cap:      0.19em;
  --ls-mono:     0.08em;
  --ls-chrome:   0.28em;
  --ls-stat-l:   0.22em;
  --ls-th:       0.16em;

  /* ---- Space ------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Layout ----------------------------------------------------------- */
  --wrap:         75rem;    /* 1200px — tables, figures, multi-column */
  /* Header only. The bar is chrome rather than reading matter, so it can run
     wider than the text column without hurting line length. Below ~1312px
     both containers are viewport-limited and identical, so this changes
     nothing on a laptop, tablet or phone; above it the logo and nav sit
     56px further out than the content column. */
  --wrap-wide:    82rem;    /* 1312px — header bar only               */
  --wrap-narrow:  44rem;    /* 704px  — single-column sections        */
  --measure:      68ch;     /* prose line length                      */
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --section-y:    clamp(2.5rem, 6vw, 4.5rem);

  /* ---- Line & border ----------------------------------------------------
     BRAND.md: gold rule ~26mm under section headings — 14% of the print
     measure. Held as a fixed length here so it reads the same under an h2
     at any viewport.                                                       */
  --rule-w:       4rem;
  --rule-w-lg:    5.5rem;
  --rule-h:       3px;
  --accent-w:     3px;      /* gold left border on callout boxes (3pt) */
  --bar-rule:     3px;      /* gold rule beneath the dark header bar   */
  --radius:       0;        /* nothing in this system is rounded */

  --border:       1px solid var(--hairline);
  --border-soft:  1px solid var(--hairline-soft);
}


/* ==========================================================================
   2  RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears whatever is currently pinned to the top. site.js keeps both
     custom properties current; the fallbacks cover the no-JS case. */
  scroll-padding-top: calc(var(--header-h, 5rem) + var(--jumpnav-h, 0px) + 1rem);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 1rem;                       /* 16 on small screens */
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 40em) {
  body { font-size: var(--fs-body); }    /* 17 from 640px up */
}

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li     { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  height: 1px;
  background: var(--hairline-soft);
  margin: var(--sp-6) 0;
}

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--charcoal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--gold);
}
a:hover { text-decoration-color: var(--charcoal); }

/* ---- Focus -------------------------------------------------------------
   Gold on white is 2.4:1 — too weak to be the only focus indicator, so the
   ring is charcoal on light surfaces and gold on dark ones.               */

:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.note--dark :focus-visible {
  outline-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   3  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  font-weight: 800;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
}

/* Sentence-case h2, for the many headings written as sentences
   ("The slab is the court.", "One direction, one fall") */
/* An h2 that renders as an h3. Several pages open with a callout in its own
   <section> -- an engineering notice, a scope caveat -- whose heading is
   genuinely that section's heading and belongs at h2. Marking it h3 left a
   h1 -> h3 skip in the outline. This restores the h3 type scale so the fix
   is structural only and nothing moves on screen. */
h2.h2--label {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
h2.h2--sentence,
.h2--sentence { text-transform: none; letter-spacing: -0.01em; }

/* h2 at h1 scale, for a closing statement that carries a page */
.h2--lg { font-size: var(--fs-h1); line-height: var(--lh-h1); }

/* Subsection heading — between the h2 and the small uppercase h3 label.
   Used for the lettered foundation options and similar. */
.h-sub {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}
.h-sub--sm { font-size: 1.125rem; }

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  text-transform: none;
}

p { margin: 0 0 var(--sp-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* ---- Text roles --------------------------------------------------------- */

.lede {
  font-size: var(--fs-lede);
  line-height: 1.42;
  color: var(--charcoal);
}

.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--body-grey);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
}

.gold { color: var(--gold-type); }

/* Kicker — 700, uppercase, wide tracking, brand gold (#C49C5F).
   Numbered variant: "01  GROUNDWORKS", number in charcoal per brand.css. */
.kicker {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-kicker);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold-type);
}
.kicker__n {
  color: var(--charcoal);
  font-weight: 800;
  margin-right: 0.5em;
}
.on-dark .kicker__n,
.note--dark .kicker__n { color: var(--surface); }

/* Gold rule under a section heading */
.rule {
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--gold);
  margin: 0 0 var(--sp-5);
  border: 0;
}
.rule--lg { width: var(--rule-w-lg); }

/* Hairline divider, the .hair of the print system */
.hair {
  height: 1px;
  background: var(--hairline-soft);
  border: 0;
  margin: var(--sp-6) 0;
}

/* Caption — uppercase, muted, tracked */
.cap, figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-cap);
  line-height: 1.4;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   4  LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide   { max-width: var(--wrap-wide);   }

/* Constrain running prose to a readable measure even inside a wide wrap */
.measure   { max-width: var(--measure); }
.measure-w { max-width: 80ch; }

.section {
  padding-block: var(--section-y);
}
.section + .section {
  border-top: var(--border);
}
.section--tint { background: var(--grey-panel); }
.section--dark {
  background: var(--charcoal);
  color: var(--on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h4 { color: var(--surface); }
.section--dark h3 { color: var(--gold-type); }
.section--dark .small { color: var(--on-dark-soft); }
/* :not(.btn) matters — a bare `.section--dark a` is specificity 0-1-1 and
   overrides `.btn--light`'s 0-1-0, painting a white label on a white button. */
.section--dark a:not(.btn) { color: var(--surface); }

/* Gold type resolves by surface. Dark panels get the lighter --gold-text;
   everything else inherits --gold-ink from :root. The footer bar keeps raw
   --gold: it sits on --charcoal-deep where the original already measures
   5.80:1, and changing it would shift a color that already passes. */
.hero, .section--dark, .note--dark, .card--dark, .doc {
  --gold-type: var(--gold-text);
}
.site-header, .site-footer { --gold-type: var(--gold); }

/* Two-column split. Print uses table.cols with a 7mm gutter; on the web it
   is a grid that collapses to one column below 56em. */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 56em) {
  .split            { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .split--46-54     { grid-template-columns: 46fr 54fr; }
  .split--54-46     { grid-template-columns: 54fr 46fr; }
  .split--60-40     { grid-template-columns: 60fr 40fr; }
  .split--40-60     { grid-template-columns: 40fr 60fr; }

  /* Three equal columns, stacking at the same 56em as every other split.
     The gap drops from --sp-7 to --sp-5 because this row is nested inside
     the 54% column of the band above it: three columns in roughly 600px
     with 48px gutters leaves each label about 170px, which breaks
     "TECHNICAL & DRAWING REVIEW" into four lines. At 24px they get ~185px
     and it settles into two. The columns stay equal either way. */
  .split--thirds    { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

/* The labels in that row are uppercase with 0.28em tracking, so a long one
   is wide and there is no sensible mid-word break. Let them wrap onto a
   second line rather than shrinking the type, which would break step with
   every other label on the site. balance keeps the two lines even. */
.split--thirds > div > h3 { text-wrap: balance; }

/* Contact rows: label / email or link / small line, side by side (the
   "Technical & drawing review · Sales & projects · Ready to start" blocks,
   and their two-column versions). When one label wraps to two lines and the
   others do not, each column used to stack from the top, so the links and
   the small lines under them landed at different heights.
   Each column now spans three rows of the parent grid and adopts those rows
   with subgrid, so row 1 is as tall as the tallest label across the block.
   Labels sit on the bottom of that row, which puts every label on the same
   baseline, every link on one line and every small line on one line.
   Side-by-side widths only: below 56em the columns stack as before, with no
   extra space. Browsers without :has() or subgrid keep the old layout.
   Scope: plain, class-less column divs with at most three children. The
   contact page's .card boxes (label, email, text, button, in a 2 x 2 grid)
   are a different component and must keep their own layout.
   row-gap: 0 sits on the column itself: a subgrid inherits the parent's
   24px row gap unless it sets its own, and that gap would add space above
   and below every email. (It cannot go on the parent: :has() may not be
   nested, and a selector that nests it is dropped by the browser.) */
@media (min-width: 56em) {
  .split > div:not([class]):has(> h3 + .contact-email):not(:has(> :nth-child(4))) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  .split > div:not([class]):has(> h3 + .contact-email):not(:has(> :nth-child(4))) > h3 { align-self: end; }
}

/* Three across, two on tablet, one on phone */
.cols-3 {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40em)  { .cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em)  { .cols-3 { grid-template-columns: repeat(3, 1fr); } }

.cols-4 {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40em)  { .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em)  { .cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* Five across: the court range row (four permanent models + the Event Court).
   One column on phones, two on small tablets, three then five as room allows. */
.cols-5 {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40em)  { .cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em)  { .cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72em)  { .cols-5 { grid-template-columns: repeat(5, 1fr); } }

/* Equal-height rows.
   BRAND.md: "Boxes in rows always share a height — never ragged."
   Grid stretches by default; this makes it explicit and survives a refactor. */
.cols-3 > *, .cols-4 > *, .split > * { align-self: stretch; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }


/* ==========================================================================
   5  CHROME — header, nav, footer
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--charcoal);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--sp-4); }

/* ---- Header: dark bar, thin gold rule beneath (BRAND.md) --------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--charcoal-deep);
  border-bottom: var(--bar-rule) solid var(--gold);
  color: var(--surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 3.75rem;
  /* Doubled from --sp-2. With the lockup 15% smaller as well, it sits at
     about 63% of the bar height instead of 80% — the nav links float in
     the row, and the logo now does too instead of touching both edges. */
  padding-block: var(--sp-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--surface);
}
/* Horizontal lockup: mark + ALTA PADEL + gold rule + PADEL ELEVATED, all of
   it inside the artwork. BRAND.md — the tagline is part of the lockup and is
   never rebuilt in live type — so there is no text wordmark alongside it.
   Sized up from the stacked mark it replaces: at 6.42:1 the tagline needs
   the height to stay legible. */
/* Target height 48–54px, down about 15% from the 56–64px it was: at the old
   size the lockup filled the bar edge to edge while the nav links sat in
   clear space, and the two sides did not read as belonging to the same row.
   The lockup is 6.42:1, so 48px is 308px wide and 54px is 347px — still too
   wide for a phone alongside the menu button (a 360px viewport leaves ~320px
   inside the gutters), so below 544px the height keeps scaling with the
   viewport and the fixed sizes apply from there up. */
.brand img { height: clamp(1.5rem, 7.5vw, 3rem); width: auto; }
@media (min-width: 34em) { .brand img { height: 3rem;     } }  /* 48px */
@media (min-width: 40em) { .brand img { height: 3.375rem; } }  /* 54px */
/* 72em is where the eight-item nav comes onto one line and the row gets
   crowded: 54px of lockup is 347px wide and leaves too little. Back to 48px
   through that band, up to 54px again at 78em where the width returns. */
@media (min-width: 72em) { .brand img { height: 3rem;     } }  /* 48px */
@media (min-width: 78em) { .brand img { height: 3.375rem; } }  /* 54px */

/* Nav: visible row from 62em, disclosure panel below it.
   Without JS the panel stays open, so the links are always reachable. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 1px solid var(--dark-rule);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  letter-spacing: var(--ls-chrome);
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold); }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; }

.nav__link {
  display: inline-block;
  padding-block: var(--sp-1);
  color: var(--on-dark);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;          /* no label breaks mid-word on one line */
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover        { color: var(--surface); border-bottom-color: var(--gold); }
/* [aria-current] not [aria-current="page"] — child pages mark their section
   with aria-current="true", and it should highlight the same way. */
.nav__link[aria-current] {
  color: var(--surface);
  border-bottom-color: var(--gold);
}

@media (max-width: 71.99em) {
  .site-header__inner { flex-wrap: wrap; padding-block: var(--sp-3); }
  .nav {
    flex-basis: 100%;
    order: 3;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--dark-rule);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; gap: var(--sp-3); }
}

/* One line, eight items, no wrapping. The breakpoint is 72em rather than
   62em because the lockup (359px at 56px tall) plus eight labels needs
   about 1100px before it fits; below that the menu button is honest. */
@media (min-width: 72em) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }   /* beats the JS hidden attribute */
  .nav__list {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--sp-4);
  }
}

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal-deep);
  color: var(--on-dark);
  border-top: var(--bar-rule) solid var(--gold);
  padding-block: var(--sp-8) var(--sp-6);
}
.site-footer h3 {
  color: var(--gold-type);
  font-size: var(--fs-chrome);
  letter-spacing: var(--ls-chrome);
  margin-bottom: var(--sp-3);
}
.site-footer a:not(.btn) { color: var(--on-dark); text-decoration-color: var(--dark-rule); }
.site-footer a:not(.btn):hover { color: var(--surface); text-decoration-color: var(--gold); }
.site-footer ul { list-style: none; padding: 0; }
/* Email address set as a contact line, on dark */
.contact-email,
.site-footer__contact {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--surface);
}

/* Phone number — set a step larger than the email lines beside it, since
   it is the one contact method someone acts on immediately. */
.contact-phone {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--charcoal);
}
.hero .contact-phone,
.doc .contact-phone,
.section--dark .contact-phone { color: var(--surface); }

/* A hero has no .section--dark rule to lean on, so links inside one would
   fall back to charcoal-on-charcoal. */
.hero a:not(.btn) { color: var(--surface); }
.site-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--dark-rule);
  color: #7A848A;
  font-family: var(--font-mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.1em;
  line-height: 1.9;
}
.site-footer__mark { height: 3.25rem; width: auto; margin-bottom: var(--sp-5); }



/* ==========================================================================
   6  COMPONENTS
   ========================================================================== */

/* ---- Page hero — the web equivalent of a document cover ---------------- */

.hero {
  background: var(--charcoal);
  color: var(--on-dark);
  padding-block: clamp(3rem, 8vw, 6rem);
}
/* Breadcrumb, directly under the header at the top of the dark hero.
   Colors are deliberate: --on-dark-muted is only 3.2:1 on charcoal and
   --dark-rule is 1.7:1, so neither is usable for text this size. The
   trail runs at --on-dark-soft (5.96:1) with a white, underlined link. */
.crumbs {
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--dark-rule);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.crumbs li { margin: 0; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); color: inherit; }
.crumbs a {
  color: var(--surface);
  font-weight: 700;
  text-decoration-color: var(--gold);
}
.crumbs a:hover { text-decoration-color: var(--surface); }

/* ---- Hero carrying a background image ---------------------------------
   The artwork leaves its left third clear — sampled at ~#353E43, which puts
   white text at about 11:1 there. That holds only while the crop behaves,
   and `cover` crops hard as the viewport narrows, so every breakpoint lays a
   charcoal scrim over the image as insurance: at 0.82 alpha over the
   brightest pixel in the picture (the white slab edge) white text still
   clears 5:1, which is AA for body copy, not just for the headline.
   background-color is the same charcoal, so a failed image load changes
   nothing about legibility. */
.hero--image {
  display: flex;
  align-items: center;
  min-height: 26rem;
  background-color: var(--charcoal);
  background-repeat: no-repeat;
  background-size: cover;
  /* Narrow: the 1200px file, near-flat scrim, biased toward the clear edge */
  background-image:
    linear-gradient(rgba(35, 41, 44, 0.82), rgba(35, 41, 44, 0.82)),
    url("../img/hero-court-1200.jpg");
  background-position: 22% center;
}

@media (min-width: 48em) {
  .hero--image {
    min-height: 30rem;
    /* Wide: full-size file, scrim rakes off to the right so the court shows */
    background-image:
      linear-gradient(100deg,
        rgba(35, 41, 44, 0.94) 0%,
        rgba(35, 41, 44, 0.88) 34%,
        rgba(35, 41, 44, 0.45) 58%,
        rgba(35, 41, 44, 0.12) 80%),
      url("../img/hero-court.jpg");
    background-position: right center;
  }
}
@media (min-width: 62em) { .hero--image { min-height: 34rem; } }

/* Holds the headline inside the artwork's clear left third */
.hero__content { width: 100%; }
@media (min-width: 62em) { .hero__content { max-width: 56%; } }

/* The headline drops a step when it shares the hero with the image: at the
   full 68px it breaks into five lines inside a 56% column. */
@media (min-width: 62em) {
  .hero--image .hero__title { font-size: clamp(2.5rem, 3.4vw, 3.25rem); }
}

/* Stat strip as its own band, below an image hero rather than over it */
.stats-band { background: var(--charcoal-deep); padding-block: var(--sp-6); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--surface);
  margin: 0 0 var(--sp-5);
}
.hero__standfirst {
  max-width: 34ch;
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--on-dark-soft);
}
.hero__meta {
  display: grid;
  gap: var(--sp-5);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--dark-rule);
  font-size: var(--fs-small);
}
@media (min-width: 40em) {
  .hero__meta { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.hero__meta dt {
  color: #A3ACB0;   /* 4.51:1 on charcoal */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-cap);
  margin-bottom: var(--sp-1);
}
.hero__meta dd {
  margin: 0;
  color: var(--surface);
  font-weight: 700;
}

/* ---- In-page contents — the web form of a contents page ---------------- */

.jumpnav {
  padding-block: var(--sp-6);
  border-bottom: var(--border);
  background: var(--surface);
}
.jumpnav__list {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: jump;
}
@media (min-width: 40em) { .jumpnav__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .jumpnav__list { grid-template-columns: repeat(3, 1fr); } }
.jumpnav__list li { margin: 0; }
.jumpnav__link {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: var(--border);
}
.jumpnav__link:hover { border-bottom-color: var(--gold); }
.jumpnav__n {
  flex: none;
  color: var(--gold-type);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---- Sticky section bar ------------------------------------------------
   From 48em the contents block sticks under the header and collapses to a
   single scrollable row. Below that it stays in normal flow: the header
   already takes ~90px of a phone screen, and a second sticky strip would
   cost another ~15% of the viewport for navigation nobody asked for. Phones
   get the back-to-top button instead, which costs no persistent space.

   `top` and the scroll offset both read --header-h, which site.js measures
   and keeps current on resize — the header is 75–91px depending on
   breakpoint, so a hardcoded value would be wrong at most widths. */
@media (min-width: 48em) {
  .jumpnav {
    position: sticky;
    top: var(--header-h, 5rem);
    z-index: 40;
    transition: padding 140ms ease, box-shadow 140ms ease;
  }
  .jumpnav.is-stuck {
    padding-block: var(--sp-2);
    box-shadow: 0 8px 20px -14px rgba(35, 41, 44, 0.5);
  }
  .jumpnav.is-stuck .jumpnav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .jumpnav.is-stuck .jumpnav__link {
    white-space: nowrap;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 2px solid transparent;
    color: var(--body-grey);
  }
  .jumpnav.is-stuck .jumpnav__link:first-child { padding-left: 0; }
}

/* Current section. Color and border only — no weight change, because a
   bolder label is a wider label, and in the scrolling row that would shunt
   the other items sideways as you read. */
.jumpnav__link.is-current {
  border-bottom-color: var(--gold);
  color: var(--charcoal);
}
.jumpnav.is-stuck .jumpnav__link.is-current { color: var(--charcoal); }

/* ---- Legal pages -------------------------------------------------------
   Long-form prose on a plain page. .legal-updated carries the date line;
   .placeholder marks copy that has not landed yet, so an unfinished page
   is obvious in the browser and not only in the source. Delete the class
   as each section is written -- when none remain, the page is done. */
/* A reading page: no hero, no kickers, no cards. The h1 sits in the flow of
   the prose and the measure is held at --measure (68ch, about 70 characters)
   rather than the 80ch the marketing pages use for their wider layouts. */
.legal { max-width: var(--measure); }
.legal > h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.legal > h2 { margin-top: var(--sp-7); }
.legal > h2:first-of-type { margin-top: var(--sp-6); }
.legal > p + p { margin-top: 0; }
.legal ul, .legal ol { padding-left: 1.25em; }
.legal li { margin-bottom: var(--sp-2); }

/* Sits directly under the h1. Muted, small, with a rule beneath it that
   closes the page title off from the body. */
.legal-updated {
  margin: 0 0 var(--sp-7);
  padding-bottom: var(--sp-4);
  border-bottom: var(--border);
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--muted);
}

/* Minimal table for the provider list. table.spec is the site's table style
   but it is built for dense specification data -- dark header bar, row
   tints, a 30rem min-width and a scroll wrapper. On a prose page that reads
   as a datasheet dropped into an essay, so this is the same type and
   spacing with a single rule under the header row and nothing else. */
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.legal th {
  text-align: left;
  padding: var(--sp-2) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--charcoal);
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
  color: var(--charcoal);
}
.legal td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.legal td:last-child, .legal th:last-child { padding-right: 0; }
.placeholder {
  color: var(--muted);
  font-style: italic;
}

/* ---- Footer bottom line ------------------------------------------------
   Copyright left, legal links right, separated from the columns by a rule.
   Deliberately quiet: --on-dark-muted at the small size, in the site's own
   link treatment rather than the gold uppercase of the column headings, so
   it reads as chrome and does not compete with the navigation above it. */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--dark-rule);
  font-size: var(--fs-cap);
  color: var(--on-dark-muted);
}
.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__bottom a { color: var(--on-dark-muted); }
.site-footer__bottom a:hover { color: var(--surface); }

/* Privacy note under a submit button. Same muted small text everywhere it
   appears; on the charcoal .doc panel it needs the on-dark value. */
.form-privacy {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  font-size: var(--fs-cap);
  line-height: var(--lh-small);
  color: var(--muted);
}
.doc .form-privacy,
.section--dark .form-privacy { color: var(--on-dark-muted); }
/* ---- Closing call to action -------------------------------------------
   For pages with no pre-footer contact band. A full-width gold hairline,
   generous air either side, then the same label / link / descriptor block
   the contact row uses everywhere else.

   1px, not the 3px of --rule-h: the brand's gold rule is a short 4rem mark
   under a heading, and that weight run edge to edge reads as a second
   footer bar rather than a divider.

   Both colors are set explicitly. This block sits on a LIGHT surface,
   where h3 would inherit charcoal and .contact-email is var(--surface) --
   white on white, the same failure mode as the blank download button and
   the invisible link on the .doc panel. Neither inherits usefully here. */
.cta-close {
  border-top: 1px solid var(--gold);
  padding-block: var(--sp-8);
}
.cta-close h3 { color: var(--gold-type); }
.cta-close .contact-email { color: var(--charcoal); }

/* ---- Third-party embed ------------------------------------------------
   A framed form on a white card, so a form we do not control still sits
   inside the site's own frame rather than floating on the tint.

   The height is fixed because the iframe is cross-origin: the page cannot
   measure the form's content, and the embed provider's resizer script is
   not loaded. A generous min-height avoids an internal scrollbar in the
   common case; the frame scrolls itself if the form runs longer. Taller
   on narrow screens, where every field wraps onto its own line. */
.embed {
  background: var(--surface);
  border: var(--border-soft);
  padding: var(--sp-2);
}
.embed__frame {
  display: block;
  width: 100%;
  min-height: 54rem;
  border: 0;
}
@media (max-width: 48em) {
  .embed__frame { min-height: 68rem; }
}

/* ---- Back to top ------------------------------------------------------
   Injected by site.js, so it never appears as a dead control without JS.
   Charcoal fill with a gold rule around it, which reads on both the light
   sections and the dark ones it floats over.

   The bottom offset clears the Netlify badge, which is fixed in the
   bottom-right corner and was sitting on top of this button. The badge is
   a constant pixel height whatever the viewport, so the clearance is a
   fixed 5rem rather than a clamp that would shrink back into it on a
   phone. env(safe-area-inset-bottom) adds the iPhone home-indicator strip
   on top, where there is one. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--charcoal);
  color: var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--charcoal-deep); }
.to-top svg { display: block; }

/* A landscape phone is about 380px tall, where a 3rem button held 5rem off
   the bottom eats a third of the screen. The button shrinks rather than
   dropping — dropping would put it back under the badge, which is the
   thing this offset exists to avoid. 2.5rem is still above the 44px
   minimum touch target. */
@media (max-height: 30rem) {
  .to-top { width: 2.5rem; height: 2.5rem; }
  .to-top svg { width: 16px; height: 16px; }
}

/* ---- Callout boxes ----------------------------------------------------- */

.note {
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--border-soft);
}
.note > :last-child { margin-bottom: 0; }

/* box-gold — gold-wash fill, 3px gold left border */
.note--gold {
  background: var(--gold-wash);
  border: 0;
  border-left: var(--accent-w) solid var(--gold);
}
/* box-grey — grey panel fill, 3px gold left border */
.note--grey {
  background: var(--grey-panel);
  border: 0;
  border-left: var(--accent-w) solid var(--gold);
}
.note--grey h3 { color: var(--gold-type); }

/* box-dark — charcoal fill, white text, gold h3 */
.note--dark {
  background: var(--charcoal);
  border: 0;
  color: var(--on-dark);
}
.note--dark h2,
.note--dark h4 { color: var(--surface); }
.note--dark h3 { color: var(--gold-type); }
.note--dark .small { color: var(--on-dark-soft); }
.note--dark a:not(.btn) { color: var(--surface); }
/* .doc is a charcoal panel that usually sits inside .section--dark and was
   covered by the rule above by inheritance. On document-sent.html it sits in
   a light section instead, where a bare link would be charcoal on charcoal —
   invisible, the same way .btn--light once painted white on white. Naming
   .doc explicitly makes the panel carry its own link color wherever it is
   placed. :not(.btn) matters for the same reason it does above. */
.doc a:not(.btn) { color: var(--surface); }
.note--dark .hair { background: var(--dark-rule); }

/* Plain hairline box — the .box of the print system */
.note--plain { border: var(--border-soft); }

/* ---- Spec tables ------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline-offset: 0; }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  min-width: 30rem;         /* below this the scroll wrapper takes over */
}
table.spec--kv { min-width: 0; }   /* two-column key/value tables can narrow */

table.spec caption {
  text-align: left;
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--sp-3);
}

table.spec th {
  text-align: left;
  vertical-align: bottom;
  padding: var(--sp-3) var(--sp-4);
  background: var(--charcoal);
  color: var(--surface);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
}

table.spec td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

table.spec td.k  { font-weight: 700; }
table.spec td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.spec tr.alt td { background: var(--row-alt); }

/* Row headers. Most spec tables are key/value, where the key is a real row
   header — but it should read as the bold td.k key column of the print
   system, not as the dark column header. */
table.spec th[scope="row"] {
  padding: var(--sp-3) var(--sp-4);
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
table.spec tr.alt th[scope="row"] { background: var(--row-alt); }

/* Row-group label cell — the td.grp of the print system */
table.spec td.grp {
  background: var(--grey-panel);
  color: var(--muted);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
  border-bottom: 1px solid var(--surface);
  white-space: nowrap;
}

/* ---- Stat strip -------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--dark-rule);
  padding: 1px;
}
.stat {
  background: var(--charcoal);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}
.stat__n {
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1;
  color: var(--gold-type);
}
.stat__l {
  margin-top: var(--sp-2);
  font-size: var(--fs-stat-l);
  letter-spacing: var(--ls-stat-l);
  text-transform: uppercase;
  color: #A8B0B5;
}

/* ---- Figures ----------------------------------------------------------- */

figure { margin: 0; }
figure img { margin-inline: auto; }

.figure--framed img {
  border: var(--border);
  padding: var(--sp-5);
  background: var(--surface);
}
/* min() keeps the 100% cap from the base img rule: a bare rem value here
   overrode it, so on a phone the image ran past the screen edge. */
.figure--narrow img { max-width: min(32rem, 100%); }
.figure--mid img    { max-width: min(44rem, 100%); }

/* ---- Cards (equal height by grid) -------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: var(--border-soft);
  background: var(--surface);
}
.card > :last-child { margin-bottom: 0; }
.card--tint { background: var(--grey-panel); border: 0; border-left: var(--accent-w) solid var(--gold); }
.card--gold { background: var(--gold-wash); border: 0; border-left: var(--accent-w) solid var(--gold); }
.card--dark { background: var(--charcoal); border: 0; color: var(--on-dark); }
.card--dark h3 { color: var(--gold-type); }
.card--dark .small { color: var(--on-dark-soft); }
.card__n {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--gold-type);
  line-height: 1;
  margin-bottom: var(--sp-3);
}

/* Card led by a full-bleed image. .card__cta takes margin-top:auto so the
   links line up across a row whatever the body text does — the web form of
   "boxes in rows always share a height". */
.card--media { padding: 0; }
.card--media .card__media { margin: 0; border-bottom: var(--border); }
.card--media .card__media img { width: 100%; }
.card--media .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5);
}
.card--media .card__body > :last-child { margin-bottom: 0; }
.card__cta { margin-top: auto; padding-top: var(--sp-5); }

/* Five-across rows: narrow cards, so the card button fills the card width with
   tighter side padding. Every "in detail" label then wraps the same way and the
   buttons share a size. */
.cols-5 .card__cta .btn {
  display: flex;
  width: 100%;
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}


/* ---- Lettered options (A / B / C / D) ---------------------------------- */

.option {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  border: var(--border);
}
.option__letter {
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--surface);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
}
.option__body { padding: var(--sp-4) var(--sp-5); }
.option__body > :last-child { margin-bottom: 0; }
.option__label {
  display: block;
  font-size: var(--fs-cap);
  font-weight: 800;
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
  color: var(--gold-type);
  margin-bottom: var(--sp-1);
}

/* ---- Numbered steps ---------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; }
.steps > li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.steps > li:last-child { margin-bottom: 0; }
.step__n {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--gold-type);
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--sp-1);
  text-transform: none;
  letter-spacing: 0;
}

/* Step numbers as gold squares, for the shorter 1-2-3 sequences */
.steps--boxed .step__n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--gold);
  color: var(--surface);
  font-size: 1.0625rem;
}

/* ---- Checklist --------------------------------------------------------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--body-grey);
}
.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid var(--gold);
}

/* ---- Buttons ----------------------------------------------------------
   BRAND.md: gold is "never a button background". Fills are charcoal on
   light, white on dark; gold appears only as the leading rule.           */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--charcoal);
  color: var(--surface);
  border: 2px solid var(--charcoal);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--charcoal-deep); border-color: var(--charcoal-deep); }
.btn::before {
  content: "";
  width: 1.125rem;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.btn--light {
  background: var(--surface);
  color: var(--charcoal);
  border-color: var(--surface);
}
.btn--light:hover { background: var(--gold-wash); border-color: var(--gold-wash); }

.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn--ghost:hover { background: var(--charcoal); color: var(--surface); }

/* ---- Document download — closes every page ----------------------------- */

.doc {
  background: var(--charcoal);
  color: var(--on-dark);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.doc__title {
  color: var(--surface);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
.doc__body { color: var(--on-dark-soft); }
.doc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.doc__again {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.doc__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--on-dark-muted);
  text-transform: uppercase;
}

/* ---- Document request form (gated .doc variant) ------------------------
   Lives inside a .doc block, so labels sit on charcoal and controls are
   white. See the markup comment in groundworks.html for how to reuse it. */

.docform { margin-top: var(--sp-5); }

.field { margin-bottom: var(--sp-4); }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
  color: var(--muted);
}
.doc .field__label,
.note--dark .field__label { color: var(--on-dark-soft); }

.field__label abbr {
  color: var(--gold-type);
  text-decoration: none;
  margin-left: 0.15em;
}

.field__control {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--charcoal);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
/* Native select chrome is kept: it is the most reliable and most accessible
   control across platforms, and it is the one place the flat aesthetic gives
   way to what the OS draws. */
select.field__control { height: calc(1.3em + (2 * var(--sp-3)) + 2px); }

textarea.field__control {
  min-height: 7rem;
  resize: vertical;
  line-height: var(--lh-small);
}

.field__control:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 0;
  border-color: var(--gold);
}

/* ---- Checkbox group -----------------------------------------------------
   A native <select multiple> needs ctrl-click to deselect and gives a small
   scrolling box on a phone, so the multi-pick is checkboxes. The cap is
   enforced by disabling the unchecked ones, with a live-region counter so
   the reason is announced rather than just visible. */
.choices { border: 0; margin: 0; padding: 0; }
.choices > legend {
  display: block;
  margin-bottom: var(--sp-2);
  padding: 0;
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
  color: var(--muted);
}
.doc .choices > legend,
.note--dark .choices > legend { color: var(--on-dark-soft); }
.choices > legend abbr { color: var(--gold-type); text-decoration: none; margin-left: 0.15em; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  cursor: pointer;
}
.choice input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15em 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.choice input:disabled { cursor: not-allowed; }
.choice__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--charcoal);
}
.doc .choice__text { color: var(--on-dark); }
.choice__ref {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
}
.doc .choice__ref { color: var(--on-dark-muted); }
.choice input:disabled ~ .choice__text { opacity: 0.5; }

.choices__count {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-cap);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--muted);
}
.doc .choices__count { color: var(--on-dark-muted); }
.choices__count.is-max { color: var(--gold-type); }

.choices__error {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--accent-w) solid var(--gold);
  background: rgba(196, 156, 95, 0.12);
  font-size: var(--fs-small);
  color: var(--surface);
}
.choices__error[hidden] { display: none !important; }

/* ---- Radio group --------------------------------------------------------
   "This is for" reuses the checkbox group's chrome so the two look like one
   family. Only the layout differs: three short labels sit on one line where
   there is room and stack on a phone, rather than wrapping mid-label.

   The row is a <div> inside the fieldset rather than the fieldset itself
   being the flex container — a <legend> in a flex parent is laid out
   inconsistently across browsers, and it is the one element that has to be
   read correctly for the group to be labeled at all. */
.choices--radio { margin-bottom: var(--sp-4); }
.choices__row { display: flex; flex-direction: column; }
@media (min-width: 30em) {
  .choices__row { flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-5); }
}

/* The conditional company/club name field. It is visible in the markup and
   hidden by script, never the reverse: with JS off the field stays on the
   page and the form still works. */
.field[hidden] { display: none !important; }

/* ---- Download list on the confirmation page ---------------------------- */
.doc__list { list-style: none; margin: 0; padding: 0; }
.doc__list li { margin: 0 0 var(--sp-4); }
.doc__list li:last-child { margin-bottom: 0; }
.doc__list .doc__again {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.doc__ref { margin: var(--sp-2) 0 0; }

.docform__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-cap);
  line-height: 1.45;
  color: var(--on-dark-muted);
}

/* Honeypot. Off-screen rather than display:none — bots skip hidden fields,
   and aria-hidden + tabindex="-1" keep it away from assistive tech. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Cross-reference to a companion document --------------------------- */

.xref {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--body-grey);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--gold);
}
.xref > :last-child { margin-bottom: 0; }


/* ==========================================================================
   7  UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.text-center { text-align: center; }
.nowrap      { white-space: nowrap; }


/* ==========================================================================
   8  PRINT
   Section 08 of the Groundworks guide and the Court Care checklist are both
   written to be printed and pinned up. Make that work from the browser too.
   ========================================================================== */

/* ---- Rackets (/rackets) ------------------------------------------------
   The racket collection page. Built on the site's own hero, kicker, rule,
   note and spec-table patterns; these rules only add what the page needs
   on top. Gold stays an accent: the badge outline, the series top rule
   and the thin profile bars. No fills, no buttons in gold. */

/* "Coming soon" badge — gold outline, gold type, no fill */
.rk-badge {
  display: inline-block;
  margin: 0 0 var(--sp-5);
  padding: 0.3em 0.85em;
  border: 1px solid var(--gold);
  color: var(--gold-type);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
}

/* Line-up band: white, directly under the charcoal hero. The rackets are
   charcoal, so they sit on white where their edges read. 2 per row on
   phones, 3 on tablets, all 5 on desktop. */
.rk-lineup-band {
  padding-block: var(--sp-7);
  background: var(--surface);
  border-bottom: var(--border);
}
.rk-lineup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  align-items: end;
}
@media (min-width: 40em) { .rk-lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62em) { .rk-lineup { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rk-lineup__item {
  display: block;
  text-align: center;
  text-decoration: none;
}
.rk-lineup__item img {
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: clamp(13rem, 30vw, 24rem);
  object-fit: contain;
}
.rk-lineup__item { color: var(--charcoal); }
.rk-lineup__name {
  display: block;
  margin-top: var(--sp-4);
  font-weight: 800;
  letter-spacing: var(--ls-th);
  text-transform: uppercase;
}
.rk-lineup__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-cap);
  color: var(--muted);
}
.rk-lineup__item:hover .rk-lineup__name { color: var(--gold-type); }

/* Three series — equal-height cards from the .cols-3 grid */
.rk-series {
  padding: var(--sp-5);
  background: var(--grey-panel);
  border-top: var(--accent-w) solid var(--gold);
}
.rk-series h3 { margin-bottom: var(--sp-2); }

/* One section per model: image panel + copy. Stacks on phones and
   tablets; side by side from 56em, alternating left and right. */
.rk-model {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 56em) {
  .rk-model { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8, 3.5rem); }
  .rk-model--alt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rk-model--alt > .rk-fig { order: 2; }
  .rk-fig { position: sticky; top: calc(var(--header-h, 5rem) + var(--sp-5)); }
}
.rk-fig {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--grey-panel);
}
.rk-fig__img {
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: clamp(20rem, 52vw, 35rem);
  object-fit: contain;
}
.rk-fig--wide img { width: 100%; height: auto; }

/* View toggle — the site's ghost button language, not gold */
.rk-views {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.rk-views button {
  font: inherit;
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  min-height: 2.75rem;          /* 44px touch target */
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  color: var(--charcoal);
  cursor: pointer;
}
.rk-views button:hover { border-color: var(--charcoal); }
.rk-views button[aria-pressed="true"] {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--surface);
}

.rk-tag {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-lede);
  color: var(--body-grey);
}

/* Performance profile — label, thin gold bar, value out of 10 */
.rk-prof {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 2rem;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  font-size: var(--fs-small);
}
.rk-prof__bar { display: block; height: 6px; background: var(--hairline); }
.rk-prof__bar > span { display: block; height: 100%; background: var(--gold); }
.rk-prof__value {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rk-spec th[scope="row"] { width: 38%; }

/* Comparison table — five equal model columns, text wraps in its cell,
   the table scrolls sideways (inside .table-scroll) below 47.5rem. */
table.rk-compare {
  table-layout: fixed;
  min-width: 47.5rem;
}
.rk-compare col.rk-compare__label { width: 15%; }
.rk-compare th,
.rk-compare td { overflow-wrap: anywhere; }
.rk-compare thead a { color: var(--surface); }
@media print {
  .site-header, .site-footer, .jumpnav, .skip-link, .doc__actions { display: none; }

  body { font-size: 10pt; line-height: 1.4; color: #000; background: #fff; }

  .hero, .section--dark, .note--dark, .card--dark, .doc {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999;
  }
  .hero__title, .doc__title, .section--dark h2 { color: #000 !important; }

  .section { padding-block: 0.5cm; border-top: 0; }
  .split, .cols-3, .cols-4 { display: block; }
  .split > * + *, .cols-3 > * + *, .cols-4 > * + * { margin-top: 0.4cm; }

  table.spec { min-width: 0; font-size: 9pt; page-break-inside: auto; }
  table.spec th { background: #000 !important; color: #fff !important; }
  tr, .note, .card, figure { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}