/* ============================================================================
   NVY — design system
   ----------------------------------------------------------------------------
   Direction: Apple + L.A.B. Golf. Graphite neutrals carry the page; colour is
   reserved for type accents, buttons, diagram marks and the active indicator.

   TWO INDEPENDENT AXES:
     data-theme  light | dark      a real feature — the header toggle
     data-accent slot-blue | indigo-steel | steel | blackout   retired 2026-09-24, palette-lab.html only
   Colour is defined ONCE in the token blocks below and never hard-coded
   elsewhere, so tools/contrast_check.py can measure every combination the page
   can actually render rather than an approximation of one of them.

   Palette reworked for Katie, 2026-09-11 — she liked the indigo, rejected the
   violet as too girly, and asked for a masculine scheme. Masculine here means
   metal and ink, not a second colour: the violet went and a gunmetal neutral took
   its place beside the accent, so the club's finishes had a colour of their own on
   the page.

   Then she asked to try her other brand's blue in place of the indigo, keeping the
   grey, to see how it looked. Katie, 2026-09-24: the whole site runs on that blue —
   buttons, marks and second voice alike — so the grey is gone and the second voice is
   the same blue deepened, not a separate hue:

     #00b8e6  blue        fills, diagram marks   the brand's declared cyan-azure, verbatim
     #046A8C  blue-deep   type accents + second voice   same hue, 5.11:1 on panel-2
     #67DDF7  blue-lift   the same two roles in dark    same hue, lifted off a dark ground

   The TCH Slot navy (#242ca2) and the other three earlier directions are retired: they
   live on palette-lab.html and no page ships them any more.

   DELIBERATE COLLISION: the shipped blue is the blue her other brand ships (192deg), so
   tools/hue_audit.py reports ~0deg separation where the indigo held 30deg. That is a
   choice Katie made on purpose, not something to "fix" in the audit. Still enforced: never orange (Texas A&M) —
   the audit checks that band on every run.
   Measured: every mode x accent pair by tools/contrast_check.py.
   ========================================================================== */

/* --- faces: self-hosted, no third-party requests -------------------------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- tokens --------------------------------------------------------------- */
:root{
  /* surfaces — graphite ramp, light */
  --bg:#ffffff;
  --bg-2:#f7f8fa;
  --panel:#f4f5f7;
  --panel-2:#e9ebef;
  --line:#d9dde3;
  --line-strong:#c4cad2;

  /* type */
  --ink:#14171b;
  --ink-2:#3c424b;
  --muted:#5b626d;

  /* accents — one blue, two weights. #00b8e6 is the brand's cyan-azure verbatim;
     it deepens to #046A8C wherever it carries type or the second voice, because
     white on #00b8e6 is 2.33:1 and no amount of taste fixes that.
     Katie's call, 2026-09-24: every button and mark on every page is this blue. The
     gunmetal second voice and the TCH Slot navy are retired from the pages. */
  --accent:#00b8e6;
  --accent-2:#046A8C;
  --accent-txt:#046A8C;
  --accent-2-txt:#046A8C;
  --accent-ink:#04222C;

  /* graphite utilities (diagrams, borders, imagery placeholders) */
  --graphite-1:#98a0ab;
  --graphite-2:#c9ced6;
  --deep-tone:#2b3038;
  /* studio plate behind the exploded shot — inner pool, then outer ground */
  --studio-1:#f9fafb; --studio-2:#e8eaee;
  /* swatch colours for the draft lab (each option's own accent, not the active one) */
  --sw-slot-blue:#242ca2;
  --sw-cyan:#00b8e6;
  --sw-indigo:#2A25A8;
  --sw-steel:#5A646F;
  --sw-blackout:#14161A;

  /* footer runs dark on the light page — Apple does this too */
  --foot-bg:#14171b;
  --foot-ink:#f3f5f7;
  --foot-muted:#a8afb9;
  --foot-line:#2c3138;

  /* type scale + rhythm */
  --font-display:'Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h1:clamp(2.05rem,4.5vw,4.3rem);
  --h2:clamp(1.62rem,3.1vw,2.6rem);
  --h3:clamp(1.14rem,1.5vw,1.36rem);
  --lead:clamp(1.08rem,1.2vw,1.2rem);
  --r:3px;
  --wrap:1180px;
  --hair:1px;
--accent-2-ink:#ffffff;}

/* --- mode: dark ----------------------------------------------------------- */
/* Light is :root above, so a browser with no JavaScript still gets a complete,
   readable light page. Dark re-tints the same tokens; no rule below this point
   needs to know which mode is running. Fills stay dark enough for white type,
   so --accent-ink stays white and the *-txt tokens carry the lighter tints that
   type needs on a dark ground. */
[data-theme="dark"]{
  --bg:#0e1013;
  --bg-2:#121519;
  --panel:#171a1f;
  --panel-2:#1f2429;
  --line:#2a2f36;
  --line-strong:#3a414a;

  --ink:#f1f3f6;
  --ink-2:#c6ccd4;
  --muted:#98a1ac;

  /* the default accent, lifted so it reads on a dark ground */
  --accent:#00b8e6;
  --accent-2:#67DDF7;
  --accent-txt:#67DDF7;
  --accent-2-txt:#67DDF7;
  --accent-ink:#04222C;

  --graphite-1:#7b8794;
  --graphite-2:#3a424b;
  --deep-tone:#e6e9ee;
  --studio-1:#191d23; --studio-2:#08090c;

  --sw-slot-blue:#7b7eea;
  --sw-cyan:#00b8e6;
  --sw-indigo:#3A34C8;
  --sw-steel:#55616E;
  --sw-blackout:#E7EAEE;

  /* the footer is a shade under the page in dark, not over it */
  --foot-bg:#0a0c0f;
  --foot-ink:#f1f3f6;
  --foot-muted:#9aa3ae;
  --foot-line:#262b31;
--accent-2-ink:#04222C;}

/* --- accent variants (draft scaffolding) ---------------------------------- */
/* Every value is explicit — no colour-mix, no derived tint — because the
   contrast audit reads these blocks and a colour it cannot read is a colour
   nobody has checked. The combined mode x variant blocks have specificity
   (0,2,0) against (0,1,0), so they win wherever both attributes are present. */
[data-accent="cyan-steel"]{
  --accent:#00b8e6;--accent-2:#046A8C;--accent-txt:#046A8C;--accent-2-txt:#046A8C;--accent-ink:#04222C;
--accent-2-ink:#ffffff;}
[data-accent="indigo-steel"]{
  --accent:#2A25A8;--accent-2:#3B4650;--accent-txt:#221E8C;--accent-2-txt:#303A45;--accent-ink:#ffffff;
--accent-2-ink:#ffffff;}
/* Repaired 2026-09-11: these two rules had been written nested inside a copy of
   their own selector, which makes them descendant selectors that no element can
   ever satisfy — the lab's "steel" option silently rendered the default instead. */
[data-accent="steel"]{
  --accent:#3E454C;--accent-2:#5A646F;--accent-txt:#333A41;--accent-2-txt:#49535D;--accent-ink:#ffffff;
--accent-2-ink:#ffffff;}
[data-accent="blackout"]{
  --accent:#14181D;--accent-2:#2A25A8;--accent-txt:#14181D;--accent-2-txt:#221E8C;--accent-ink:#ffffff;
--accent-2-ink:#ffffff;}
[data-theme="dark"][data-accent="indigo-steel"]{
  --accent:#3A34C8;--accent-2:#5C6875;--accent-txt:#A9A4FF;--accent-2-txt:#B7C1CC;--accent-ink:#ffffff;
--accent-2-ink:#ffffff;}
[data-theme="dark"][data-accent="cyan-steel"]{
  --accent:#00b8e6;--accent-2:#67DDF7;--accent-txt:#67DDF7;--accent-2-txt:#67DDF7;--accent-ink:#04222C;
--accent-2-ink:#04222C;}

/* ---- slot-blue: the blue that is actually in the TCH Slot -----------------
   Not a taste call. Sampled off the delivered renders: the flat face of the
   "Blue TCH Slot" reads #242ca2 (mean of the slot's own pixels in
   tch-slot-with-weights.webp), and the lit face reads #7b7eea in the club
   photographs. Light mode carries the part's own colour; dark mode carries the
   lit one, because #242ca2 on a near-black ground is unreadable. */
[data-accent="slot-blue"]{
  --accent:#242ca2;--accent-2:#3E454C;--accent-txt:#1e2589;--accent-2-txt:#333A41;--accent-ink:#ffffff;
--accent-2-ink:#ffffff;}

[data-theme="dark"][data-accent="slot-blue"]{
  --accent:#7b7eea;--accent-2:#5B6672;--accent-txt:#8f92f0;--accent-2-txt:#B6BFC9;--accent-ink:#0e1013;
--accent-2-ink:#ffffff;}
[data-theme="dark"][data-accent="steel"]{
  --accent:#55606C;--accent-2:#3F4750;--accent-txt:#C2CBD5;--accent-2-txt:#A7B0BB;--accent-ink:#ffffff;
--accent-2-ink:#ffffff;}
[data-theme="dark"][data-accent="blackout"]{
  --accent:#E7EAEE;--accent-2:#AEB9C6;--accent-txt:#E2E7ED;--accent-2-txt:#C0C9D4;--accent-ink:#0B0D10;
--accent-2-ink:#0B0D10;}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:94%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
img,svg{max-width:100%;display:block}
a{color:var(--accent-txt);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
hr{border:0;border-top:var(--hair) solid var(--line);margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
/* Katie, 2026-09-25: "Let's fix that spacing to the tight version for everyone." The
   26-44px value the Technology and Fitting pages were tuned to is the house value now,
   written here and nowhere else — the two per-page copies in shell.css are gone, and
   this is the one number to change. (It reads as 31.7px at laptop width.) */
.band{padding:clamp(26px,3.1vw,44px) 0}
.band--panel{background:var(--bg-2);border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--bg);padding:10px 14px;border:var(--hair) solid var(--line);z-index:99}

/* --- type ---------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-display);
  font-stretch:70%;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}
.eyebrow--accent{color:var(--accent-txt)}
.display{
  font-family:var(--font-display);
  font-weight:560;
  font-size:var(--h1);
  line-height:1.0;
  letter-spacing:-.032em;
  margin:0 0 17px;
  max-width:21ch;
  text-wrap:balance;
}
h2.display{font-size:var(--h2);max-width:26ch}
h3{font-family:var(--font-display);font-weight:560;font-size:var(--h3);letter-spacing:-.018em;margin:0 0 10px;line-height:1.2}
.lead{
  font-size:var(--lead);
  font-weight:350;
  line-height:1.55;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 0 13px;
}
p{margin:0 0 16px;max-width:66ch}
.muted{color:var(--muted)}
.small{font-size:.875rem;line-height:1.55}
.measure{max-width:62ch}
.hairline{border-top:var(--hair) solid var(--line);padding-top:22px;margin-top:26px}

/* --- buttons: action phrases, engineered not bubbly ---------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-stretch:74%;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:15px 24px;
  border-radius:var(--r);
  border:var(--hair) solid transparent;
  cursor:pointer;
  transition:transform .18s ease,opacity .18s ease,background-color .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--solid{background:var(--accent);color:var(--accent-ink)}
.btn--alt{background:var(--accent-2);color:var(--accent-2-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0 0}

/* --- header -------------------------------------------------------------- */
.top{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:var(--hair) solid var(--line);
}
.top__in{display:flex;align-items:center;gap:28px;height:60px}
.top__logo{display:flex;align-items:center;gap:12px;color:var(--ink)}
.top__logo img{height:17px;width:auto}
.top__logo:hover{text-decoration:none}
.top__nav{display:flex;gap:26px;margin-left:auto}
.top__nav a{
  font-family:var(--font-display);font-stretch:74%;font-weight:500;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.top__nav a:hover{color:var(--accent-txt);text-decoration:none}
.top .btn{padding:11px 18px;font-size:.7rem}
@media (max-width:900px){.top__nav{display:none}}

/* --- hero ---------------------------------------------------------------- */
.hero{padding:clamp(34px,4.2vw,66px) 0 clamp(46px,5vw,82px)}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(22px,3vw,44px);align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}}
.hero .lead{font-size:var(--lead);max-width:46ch}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:9px 26px;margin:26px 0 0;padding-top:15px;
  border-top:var(--hair) solid var(--line);
}
.hero__meta div{font-family:var(--font-display);font-stretch:74%;font-weight:500;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero__meta strong{color:var(--ink);font-weight:600}

/* technical drawing panel (the TCH Slot, seen from above) */
.schematic{
  background:var(--panel);border:var(--hair) solid var(--line);border-radius:var(--r);
  padding:26px 22px 14px;
}
.schematic__cap{
  font-family:var(--font-display);font-stretch:70%;font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.schematic svg{width:100%;height:auto;color:var(--graphite-1)}
.schematic--flat{background:transparent;border:0;padding:0}

/* --- model cards --------------------------------------------------------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.grid3{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px)}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.card{
  background:var(--bg);border:var(--hair) solid var(--line);border-radius:var(--r);
  padding:0 0 22px;display:flex;flex-direction:column;
}
.card__body{padding:22px 22px 0}
.card__num{
  font-family:var(--font-display);font-stretch:66%;font-weight:700;
  font-size:2.05rem;line-height:1;letter-spacing:-.01em;color:var(--ink);
  display:block;margin:0 0 6px;
}
.card__cat{
  font-family:var(--font-display);font-stretch:74%;font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 14px;
}
.card p{font-size:.95rem;color:var(--ink-2);max-width:38ch}

/* --- numbered steps / fitting stages ------------------------------------- */
.steps{counter-reset:step;margin:38px 0 0;padding:0;list-style:none;
  border-top:var(--hair) solid var(--line)}
.steps li{
  counter-increment:step;display:grid;grid-template-columns:96px 1fr;gap:24px;
  padding:26px 0;border-bottom:var(--hair) solid var(--line);
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-stretch:68%;font-weight:700;
  font-size:1.5rem;line-height:1.15;color:var(--graphite-1);
  font-variant-numeric:tabular-nums;
}
.steps h3{margin-bottom:6px}
.steps p{margin:0;color:var(--ink-2);font-size:.97rem}
@media (max-width:640px){.steps li{grid-template-columns:1fr;gap:8px}}

.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:40px 0 0;
  border-top:var(--hair) solid var(--line)}
.stages article{padding:30px 26px 30px 0;border-bottom:var(--hair) solid var(--line)}
.stages article + article{padding-left:26px;border-left:var(--hair) solid var(--line)}
@media (max-width:900px){
  .stages{grid-template-columns:1fr}
  .stages article{padding:26px 0}
  .stages article + article{padding-left:0;border-left:0}
}
.stage__no{
  font-family:var(--font-display);font-stretch:66%;font-weight:700;font-size:2.2rem;
  line-height:1;color:var(--accent-txt);display:block;margin:0 0 14px;
  font-variant-numeric:tabular-nums;
}
.stages article:nth-child(2) .stage__no{color:var(--accent-2-txt)}
.stages article:nth-child(3) .stage__no{color:var(--ink)}
.stages h3{font-size:1.18rem}
.stages p{font-size:.94rem;color:var(--ink-2);margin:0}

/* --- read-out (the fitting loop, described) ------------------------------ */
.readout{
  background:var(--panel);border:var(--hair) solid var(--line);border-radius:var(--r);
  padding:24px;font-size:.92rem;color:var(--ink-2);
}
.readout__row{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;
  border-bottom:var(--hair) solid var(--line)}
.readout__row:last-child{border-bottom:0;padding-bottom:0}
.readout__row:first-child{padding-top:0}
.readout b{font-family:var(--font-display);font-stretch:74%;font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* --- lists --------------------------------------------------------------- */
.ticks{list-style:none;margin:26px 0 0;padding:0;border-top:var(--hair) solid var(--line)}
.ticks li{padding:18px 0 18px 30px;border-bottom:var(--hair) solid var(--line);position:relative;
  font-size:.98rem;color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:26px;width:9px;height:9px;
  border:var(--hair) solid var(--graphite-1);border-radius:50%;
}
.ticks li:first-child::before{background:var(--accent);border-color:var(--accent)}
.ticks b{color:var(--ink);font-weight:600}

/* --- specs --------------------------------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:40px 0 0;
  border-top:var(--hair) solid var(--line);border-left:var(--hair) solid var(--line)}
@media (max-width:900px){.specs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.specs{grid-template-columns:1fr}}
.specs div{
  border-right:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line);
  padding:20px 18px;min-height:104px;
}
.specs dt{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;
}
.specs dd{
  margin:0;font-size:1.02rem;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}

/* The model pages carry a short spec block, not the full ledger: a small
   heading and eight facts in the same four-up grid (Katie, 2026-09-24). */
.band--specs{padding:clamp(28px,4vw,46px) 0}
.specs__title{
  font-family:var(--font-display);font-stretch:78%;font-weight:600;
  font-size:1.05rem;letter-spacing:.01em;color:var(--ink);margin:0;
}
.specs--tight{margin:16px 0 0}
.specs--tight div{padding:12px 14px;min-height:0}
.specs--tight dt{margin:0 0 6px;font-size:.6rem}
.specs--tight dd{font-size:.95rem}

/* --- figure / image slots ------------------------------------------------ */
.fig{margin:0}
.fig__frame{
  background:var(--panel);border:var(--hair) solid var(--line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;color:var(--graphite-1);
}
.fig__frame--card{border:0;border-bottom:var(--hair) solid var(--line);border-radius:0;aspect-ratio:4/3}
.fig--tall .fig__frame{aspect-ratio:4/5}
.fig--wide .fig__frame{aspect-ratio:21/9}
.fig__frame span{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.7;max-width:28ch;
}
.fig figcaption{font-size:.8rem;color:var(--muted);margin-top:12px;max-width:52ch}
.play{
  width:54px;height:54px;border:var(--hair) solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;margin:0 auto 14px;color:var(--graphite-1);
}

/* --- faq ----------------------------------------------------------------- */
.faq{margin:38px 0 0;border-top:var(--hair) solid var(--line)}
.faq details{border-bottom:var(--hair) solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:560;font-size:1.06rem;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:18px;font-size:1.3rem;color:var(--graphite-1);
  font-family:var(--font-display);font-weight:400;
}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 24px;color:var(--ink-2);font-size:.97rem;max-width:64ch}

/* --- contact ------------------------------------------------------------- */
.contact{background:var(--panel);border:var(--hair) solid var(--line);border-radius:var(--r);
  padding:clamp(26px,4vw,52px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 0;max-width:640px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.form label{
  display:block;font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.form input,.form select{
  width:100%;padding:14px 14px;border:var(--hair) solid var(--line-strong);border-radius:var(--r);
  background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:.98rem;
}
.form input::placeholder{color:var(--graphite-1)}
.form .full{grid-column:1/-1}
.form .btn{margin-top:6px;justify-self:start}

/* --- footer -------------------------------------------------------------- */
.foot{background:var(--foot-bg);color:var(--foot-ink);padding:clamp(48px,6vw,84px) 0 34px}
.foot a{color:var(--foot-ink)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot img{height:19px;width:auto}
.foot h4{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--foot-muted);margin:0 0 14px;
}
.foot ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.foot li{margin:0 0 10px}
.foot__legal{
  margin-top:52px;padding-top:24px;border-top:var(--hair) solid var(--foot-line);
  font-size:.8rem;color:var(--foot-muted);display:flex;flex-wrap:wrap;gap:8px 24px;
}
.foot__legal p{margin:0;max-width:none}

/* --- draft scaffolding (removed at approval) ----------------------------- */
.ribbon{
  background:var(--panel-2);color:var(--muted);border-bottom:var(--hair) solid var(--line);
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;padding:9px 0;
}
.ribbon .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.ribbon b{color:var(--accent-txt);font-weight:600}
.ribbon .btn{padding:7px 12px;font-size:.62rem;margin-left:auto;border-color:var(--line-strong);color:var(--ink)}
.lab{
  position:fixed;left:18px;bottom:18px;z-index:60;background:var(--bg);
  border:var(--hair) solid var(--line-strong);border-radius:var(--r);padding:12px;
  box-shadow:0 10px 30px rgba(20,23,27,.14);display:none;
}
.lab[data-open="true"]{display:block}
.lab h5{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;
}
.lab button{
  display:block;width:100%;text-align:left;margin:0 0 6px;cursor:pointer;
  background:var(--bg);border:var(--hair) solid var(--line);border-radius:var(--r);
  padding:9px 11px;font-family:var(--font-body);font-size:.82rem;color:var(--ink);
}
.lab button[aria-pressed="true"]{border-color:var(--ink);font-weight:600}
.lab__sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}

/* placeholders are visible on purpose — a hole is never dressed up as a fact.
   Quiet graphite rather than accent colour: with ~40 open slots on a draft, an accent
   dashes everywhere would read as damage instead of as "not filled in yet". */
.ph{
  color:var(--muted);border-bottom:1px dashed var(--graphite-1);
  font-variant-numeric:tabular-nums;
}
.specs .ph{font-weight:500}

/* --- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv[data-in="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .btn:hover{transform:none}
}

.ribbon__v{opacity:.62;font-variant-numeric:tabular-nums}

/* --- mode toggle (header) ------------------------------------------------- */
/* Hidden in the markup and revealed by script: a browser without JavaScript
   never shows a control that could not work. The explicit [hidden] rule is
   needed because .btn sets display:inline-flex, which beats the UA sheet. */
.mode[hidden]{display:none}
.mode{display:inline-flex;align-items:center;gap:9px;padding:11px 15px}
.mode svg{flex:none;width:15px;height:15px}
.mode__label{font-size:.66rem;letter-spacing:.14em}

/* the wordmark is black on light, white on dark — two assets, one shown */
.top__logo-dark{display:none}
[data-theme="dark"] .top__logo-light{display:none}
[data-theme="dark"] .top__logo-dark{display:block}

/* --- launch countdown ----------------------------------------------------- */
.count{margin:34px 0 0;padding:26px 0 0;border-top:var(--hair) solid var(--line)}
.count__date{
  font-family:var(--font-display);font-stretch:74%;font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;
}
.count__row{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.count__row[hidden]{display:none}
.count__cell{
  flex:1 1 104px;min-width:104px;background:var(--bg);border:var(--hair) solid var(--line);
  border-radius:var(--r);padding:16px 12px;text-align:center;
}
.count__cell b{
  display:block;font-family:var(--font-display);font-stretch:66%;font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);
}
.count__cell span{
  display:block;margin-top:9px;font-family:var(--font-display);font-stretch:74%;font-weight:600;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
/* the countdown only ever shows one of these two states */
.count__done{margin:18px 0 0;color:var(--accent-txt);font-weight:500}
.count__done[hidden]{display:none}

/* --- anatomy band (the exploded hero image) ------------------------------- */
/* the shot is a near-square cutout of a very dark object (median luma 57/255), so it
   needs a deliberate ground in BOTH modes: on a lifted dark plate the club body reads at
   1.4:1 and disappears, so dark mode sinks the plate UNDER the page instead of raising
   it, and lifts the image rather than the backdrop. */
.anatomy__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,3.4vw,54px);align-items:center;margin-top:30px}
/* Fig. 02 — the top-view drawing moved down into the exploded band */
.anatomy__grid .schematic{max-width:560px;margin:0 auto}
/* Fig. 01 — the real exploded shot is the hero figure now, capped to the copy column */
.fig--exploded{max-width:500px;margin:0 auto}
.fig--exploded .fig__frame{aspect-ratio:1/1;padding:22px;
  background:linear-gradient(180deg,var(--studio-1),var(--studio-2))}
.fig--exploded .fig__frame img{max-width:100%;max-height:100%;width:auto;height:auto}
.anatomy__grid .anatomy__legend{flex-direction:column;gap:0;margin:0;padding:0;border-top:0}
.anatomy__grid .anatomy__legend div{padding:13px 0;border-top:var(--hair) solid var(--line);font-size:.68rem}
.anatomy__grid .anatomy__legend div:last-child{border-bottom:var(--hair) solid var(--line)}
[data-theme="dark"] .fig--exploded .fig__frame{
  background:radial-gradient(80% 70% at 50% 42%,var(--studio-1),var(--studio-2) 74%);border-color:var(--line-strong)}
[data-theme="dark"] .fig--exploded .fig__frame img{filter:brightness(1.24) contrast(1.02)}
@media (max-width:900px){
  .anatomy__grid{grid-template-columns:1fr}
  .anatomy__grid .anatomy__legend{margin-top:4px}
  .anatomy__grid .anatomy__legend div:last-child{border-bottom:0}
}
.anatomy__legend{
  display:flex;flex-wrap:wrap;gap:12px 30px;margin:20px 0 0;padding:18px 0 0;
  border-top:var(--hair) solid var(--line);
}
.anatomy__legend div{
  font-family:var(--font-display);font-stretch:74%;font-weight:500;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.anatomy__legend b{color:var(--ink);font-weight:600;margin-right:8px}

.form__note{grid-column:1/-1;margin:6px 0 0}
.lab__note{margin:10px 0 0;max-width:30ch;font-size:.7rem;line-height:1.45;color:var(--muted)}
[data-theme="dark"] .lab{box-shadow:0 10px 30px rgba(0,0,0,.6)}

@media (max-width:640px){
  .mode__label{display:none}
  .mode{padding:11px 12px}
}

/* ==========================================================================
   Review pass — the turf ground, and figures that stop fighting their frames
   --------------------------------------------------------------------------
   1. A photograph inside a figure keeps its own aspect ratio. width/height plus
      max-width:100% was squashing figure images; only the exploded frame
      carried the {width:auto;height:auto} fix, so the hero and the kit shot
      were being stretched into their frame's aspect ratio.
   2. The hero, the TCH Slot photo and Fig. 03 lose their frame entirely —
      no border, no plate, no padding. The picture sits on the page.
   3. The page wanted a golf ground under it, so a bare photograph still has
      something to stand on: a soft pool of mown turf that fades out at the
      edges. No border and no hard edge is the whole difference between ground
      and a box, which is why this is a gradient and not a panel.
   ========================================================================== */
:root{--turf-1:#eaf1e5;--turf-2:#cedfc4;--turf-line:rgba(42,88,52,.05)}
[data-theme="dark"]{--turf-1:#131a12;--turf-2:#0b100a;--turf-line:rgba(158,206,158,.05)}

.fig__frame img{max-width:100%;max-height:100%;width:auto;height:auto}

.fig--bare .fig__frame{
  background:none;border:0;border-radius:0;padding:0;aspect-ratio:auto;
}

.fig--ground .fig__frame{
  border:0;border-radius:0;padding:0;aspect-ratio:auto;background:none;
  background-image:
    repeating-linear-gradient(90deg,var(--turf-line) 0 3.4%,transparent 3.4% 6.8%),
    radial-gradient(118% 92% at 50% 102%,var(--turf-2) 0%,var(--turf-1) 54%,transparent 82%);
}

/* Fig. 04: full screen width. The band has no side padding, so a figure that is
   a direct child of the band spans the viewport. Narrow screens scroll the
   diagram instead of shrinking its labels into nothing. */
.fig--bleed{margin:0;overflow-x:auto}
.fig--bleed svg{width:100%;height:auto;min-width:820px;display:block}