/* ==========================================================================
   COACH MARK BOEHM — PICKLEBALL COACHING · DES MOINES, IOWA
   IFP certified instructor · playing since 2021 · coaching since 2022 ·
   DMMPC board since 2023 · youth + adult coaching · growing the sport
   1600px content width
   Palette (friendly, community-oriented, professional):
            deep navy (trust / credibility) · warm white (breathing space) ·
            court green (pickleball identity) · community blue (programs /
            advocacy) · pickleball lime (small active accents) · soft sand ·
            charcoal
   The older token names are kept so every component still resolves:
   --teal* = court green (deepened for text), --court* = court green
   surfaces, --orange* / --gold = community blue, --sand = soft sand.
   ========================================================================== */

:root {
  --bg: #F7F5EF;          /* warm white — breathing space */
  --bg-2: #E3D8C8;        /* soft sand */
  --sand: #E3D8C8;
  --grey: #E3D8C8;
  --card: #FCFBF7;
  --ink: #183248;         /* deep navy — trust / credibility */
  --ink-deep: #10243A;
  --ink-mid: #242826;     /* charcoal */
  --text: #183248;
  --ink-2: rgba(24,50,72,.82);
  --ink-3: rgba(24,50,72,.68);
  --line: rgba(24,50,72,.14);
  --ball: #C9E64D;        /* pickleball lime — small active accents */
  --ball-deep: #A8C23A;
  --lime: #C9E64D;
  --teal: #4F8A6A;        /* court green — pickleball identity */
  --teal-ink: #3B6E53;    /* court green, deepened (AA on warm white) */
  --teal-lt: #A6D3B8;     /* court green, lightened for small text on navy (AA) */
  --teal-2: #CFE5D7;
  --court: #4F8A6A;       /* court green — court surfaces / interaction */
  --blue: #3F6E9C;        /* community blue, deepened (AA on warm white) */
  --court-deep: #3B6E53;
  --court-lt: #A6D3B8;
  --orange: #5A87B5;      /* community blue — programs / advocacy */
  --orange-ink: #3F6E9C;  /* community blue, deepened for text on light backgrounds (AA) */
  --orange-lt: #AFC8E2;   /* community blue, lightened for small text on navy (AA) */
  --gold: #5A87B5;
  --community: #5A87B5;
  --silver: #BEC4CA;
  --silver-lt: #E4E7EA;
  --silver-ink: #5E6670;
  --charcoal: #242826;
  --on-dark: #F7F5EF;
  --on-dark-2: rgba(247,245,239,.78);
  --line-dark: rgba(247,245,239,.15);
  --error: #B8392D;

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Fraunces", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;   /* small media / scoreboard labels */

  --max: 1600px;
  --gutter: clamp(18px, 4vw, 64px);
  --nav-h: 120px;
  --r-lg: 28px;
  --r-md: 20px;
  --ease: cubic-bezier(.2, .75, .15, 1);
  --shadow: 0 1px 2px rgba(16,30,44,.05), 0 12px 40px rgba(16,30,44,.09);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; } /* CSS smooth-scroll fights Lenis and cancels keyboard/focus scrolling */
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-sans); font-size: clamp(1.0625rem, 1rem + .22vw, 1.1875rem); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
::selection { background: var(--ball); color: var(--ink); }
:focus-visible { outline: 3px solid var(--court); outline-offset: 3px; border-radius: 4px; }
.tn :focus-visible, .yt :focus-visible, .jr :focus-visible, .bk__head :focus-visible, .vm :focus-visible, .hero :focus-visible, .bk__panel :focus-visible, .lv__board :focus-visible, .footer :focus-visible, .menu :focus-visible, .lb :focus-visible { outline-color: var(--lime); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--teal); }
.eyebrow--light::before { background: var(--lime); }
.eyebrow--light { color: var(--on-dark-2); }
.h2 { margin-top: 18px; font-weight: 700; font-size: clamp(2.4rem, 1.2rem + 4vw, 5.4rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.h2 em { font-size: 1.04em; letter-spacing: -.03em; color: var(--teal-ink); }
.h2--light { color: var(--on-dark); }
.h2--light em { color: var(--teal-lt); }
.mark { background-image: linear-gradient(rgba(201,230,77,.55), rgba(201,230,77,.55)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 30%; padding: 0 .06em; transition: background-size 1s var(--ease) .5s; }
.mark--dark { background-image: linear-gradient(var(--court), var(--court)); background-size: 100% 100%; color: #fff; padding: 0 .12em; border-radius: .12em; background-position: 0 0; }
.h2--light .mark--dark { color: #fff; }
.head { max-width: 960px; }

/* ---------- Buttons & links ---------- */
/* Every button carries a fill that sweeps in on hover: performance blue on navy/lime buttons, navy on outline ones, lime on blue ones */
.btn { position: relative; isolation: isolate; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 6px 6px 6px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; letter-spacing: -.005em; transition: color .35s, box-shadow .3s; will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fill, var(--teal-ink)); transform: translateX(-101%); transition: transform .6s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; transition: background-color .35s, color .35s; }
.btn__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__ic svg, .btn:focus-visible .btn__ic svg { animation: arrow .55s var(--ease); }
@keyframes arrow { 0% { transform: none; } 45% { transform: translateX(22px); } 46% { transform: translateX(-22px); } 100% { transform: none; } }
.btn--dark { background: var(--ink); color: var(--on-dark); --fill: var(--teal-ink); }
.btn--dark .btn__ic { background: var(--lime); color: var(--ink); }
.btn--dark:hover .btn__ic, .btn--dark:focus-visible .btn__ic { background: var(--ball); }
.btn--dark:hover { box-shadow: 0 12px 30px rgba(90,135,181,.32); }
.btn--lime { background: var(--lime); color: var(--ink); --fill: var(--teal-ink); }
.btn--lime .btn__ic { background: var(--ink); color: var(--lime); }
.btn--lime:hover, .btn--lime:focus-visible { color: #fff; box-shadow: 0 12px 30px rgba(90,135,181,.32); }
.btn--blue { background: var(--court-deep); color: #fff; --fill: var(--lime); }
.btn--blue .btn__ic { background: var(--ink); color: var(--lime); }
.btn--blue:hover, .btn--blue:focus-visible { color: var(--ink); box-shadow: 0 14px 36px rgba(201,230,77,.22); }
.btn--ghost { color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--line-dark); --fill: var(--teal-ink); }
.btn--ghost .btn__ic { background: rgba(247,245,239,.1); }
.btn--ghost:hover .btn__ic, .btn--ghost:focus-visible .btn__ic { background: var(--ball); color: var(--ink); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(24,50,72,.3); --fill: var(--ink); }
.btn--line .btn__ic { background: var(--ink); color: var(--lime); }
.btn--line:hover, .btn--line:focus-visible { color: var(--on-dark); }
.btn--line:hover .btn__ic, .btn--line:focus-visible .btn__ic { background: var(--lime); color: var(--ink); }
.btn--sm { min-height: 46px; padding: 4px 4px 4px 20px; font-size: .92rem; gap: 10px; }
.btn--sm .btn__ic { width: 38px; height: 38px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn:disabled { opacity: .6; cursor: progress; }
.textlink { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding-block: 6px; }
.textlink::after { content: "→"; transition: transform .35s var(--ease); }
.textlink::before { content: ""; position: absolute; left: 0; right: 1.4em; bottom: 2px; height: 1.5px; background: currentColor; transform-origin: right; transition: transform .45s var(--ease); }
.textlink:hover::after { transform: translateX(4px); }
.textlink:hover::before { transform: scaleX(0); }
.ulink { position: relative; display: inline-block; padding-block: 2px; }
.ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.ulink:hover::after, .ulink:focus-visible::after { transform: scaleX(1); }

/* ---------- Media slots ---------- */
.media { position: relative; overflow: hidden; background: linear-gradient(150deg, #E3D8C8 0%, #4F8A6A 55%, #183248 100%); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 1.2s var(--ease); }
.media.is-empty::after { content: attr(data-ph); position: absolute; left: 14px; bottom: 14px; z-index: 2; width: fit-content; max-width: calc(100% - 28px); padding: 7px 11px; border-radius: 10px; background: rgba(247,245,239,.85); color: var(--ink-2); font-size: .7rem; font-weight: 600; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; }

/* ---------- CSS pickleball ---------- */
.pball { position: absolute; width: 104px; height: 104px; border-radius: 50%; z-index: 4; background: radial-gradient(circle at 32% 26%, #FCFBF8 0 5%, #E4F294 20%, var(--ball) 46%, var(--ball) 74%, var(--ball-deep) 100%); box-shadow: inset -12px -16px 26px rgba(24,50,72,.32), inset 6px 8px 14px rgba(247,245,239,.35); }
.pball__holes { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(24,50,72,.5) 0 3.4px, transparent 4px) 0 0 / 24px 24px, radial-gradient(circle, rgba(24,50,72,.5) 0 3.4px, transparent 4px) 12px 12px / 24px 24px; -webkit-mask: radial-gradient(circle at 45% 42%, #000 40%, transparent 70%); mask: radial-gradient(circle at 45% 42%, #000 40%, transparent 70%); }
.motion .pball__holes { animation: roll 6s linear infinite; }
@keyframes roll { to { background-position: 96px 48px, 108px 60px; } }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px rgba(247,245,239,.7); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .2s, background-color .3s; }
.cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-label .cursor__dot { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--lime); box-shadow: none; }
.cursor.is-label .cursor__label { opacity: 1; transition-delay: .08s; }
.cursor.is-hover .cursor__dot { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(90,135,181,.32); }
.cursor.is-hidden .cursor__dot, .cursor.is-hidden .cursor__label { opacity: 0; }

/* ==========================================================================
   HEADER — ticker strip + floating pill bar
   ========================================================================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none; transition: transform .6s var(--ease); }
.nav.is-solid { transform: translateY(-34px); }                   /* ticker slides away, bar stays */
.nav.is-hidden { transform: translateY(calc(-100% - 12px)); }
.nav__ticker { height: 34px; display: flex; align-items: center; overflow: hidden; background: var(--ink-deep); border-bottom: 1px solid rgba(90,135,181,.3); color: var(--on-dark); font-size: .78rem; font-weight: 500; letter-spacing: .03em; pointer-events: auto; }
.nav__ticker-track { display: flex; align-items: center; gap: 22px; width: max-content; padding-right: 22px; white-space: nowrap; }
.nav__ticker-track i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--teal-lt); }
.motion .nav__ticker-track { animation: ticker 52s linear infinite; }
.nav__ticker:hover .nav__ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.nav__barwrap { padding: 10px var(--gutter) 0; }
.nav__bar {
  position: relative; pointer-events: auto; max-width: calc(var(--max) - var(--gutter) * 2); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 70px; padding: 0 9px 0 14px; border-radius: 999px;
  background: rgba(247,245,239,.9); border: 1px solid rgba(252,251,247,.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(24,50,72,.04), 0 12px 40px rgba(24,50,72,.09);
  transition: height .45s var(--ease), background-color .3s, box-shadow .3s;
}
.nav.is-solid .nav__bar { height: 62px; background: rgba(247,245,239,.94); box-shadow: 0 1px 0 rgba(24,50,72,.05), 0 16px 50px rgba(24,50,72,.12); }
.nav__progress { position: absolute; left: 34px; right: 34px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.nav__progress i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink), var(--court), var(--lime)); transform-origin: left; transform: scaleX(var(--prog, 0)); }

/* Logo — COACH MARK BOEHM / PICKLEBALL COACHING · IFP CERTIFIED. A lightweight personal wordmark.
   Intro (on load, and on hover/focus):
   1 the name reveals → 2 a court line draws underneath → 3 PICKLEBALL
   COACHING appears → 4 IFP CERTIFIED fades in subtly → 5 a small ball
   travels the line once in two low arcs → 6 it settles on its point while a
   ring locks on. No full-screen loader, no idle loop. */
.logo { --fp: 82%; display: flex; align-items: center; padding: 4px 14px 4px 12px; border-radius: 999px; }
.logo__text { display: grid; line-height: 1.02; white-space: nowrap; }
.logo__name { display: block; overflow: hidden; padding-bottom: .06em; }
.logo__name > span { display: flex; align-items: baseline; gap: 6px; font-weight: 900; font-stretch: 78%; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); transition: color .3s; }
.logo__name small { font-family: var(--f-mono); font-size: .5rem; font-weight: 600; letter-spacing: .12em; color: var(--teal-ink); transform: translateY(-.25em); }
.logo:hover .logo__name > span, .logo:focus-visible .logo__name > span { color: var(--blue); }
.logo__court { position: relative; display: block; margin: 3px 0 4px; }
.logo__line { display: block; width: 100%; height: 6px; overflow: visible; }
.logo__line path { fill: none; stroke: var(--court); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.logo__ball { position: absolute; left: var(--fp); top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); pointer-events: none; }
.logo__ring { position: absolute; left: var(--fp); top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; border: 1.5px solid var(--gold); pointer-events: none; }
.logo__tag { display: flex; align-items: center; gap: 6px; font-size: .54rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.logo__tag i { width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--court); }
.logo__cred { color: var(--silver-ink); letter-spacing: .12em; font-weight: 700; }

/* intro — class added by main.js; hidden until it starts so nothing flashes */
.motion .logo:not(.is-anim) .logo__name > span { transform: translateY(110%); }
.motion .logo:not(.is-anim) .logo__line { clip-path: inset(-2px 100% -2px 0); }
.motion .logo:not(.is-anim) :is(.logo__sub, .logo__tag i, .logo__cred, .logo__ball, .logo__ring) { opacity: 0; }
.motion .is-anim .logo__name > span { animation: lmRise .8s var(--ease) .1s both; }                   /* 1 */
.motion .is-anim .logo__line { animation: lmLine .8s var(--ease) .5s both; }                            /* 2 */
.motion .is-anim .logo__sub { animation: lmTag .7s var(--ease) .95s both; }                             /* 3 */
.motion .is-anim .logo__tag i { animation: lmFade .3s ease 1.45s both; }
.motion .is-anim .logo__cred { animation: lmCred 1s ease 1.5s both; }                                   /* 4 */
.motion .is-anim .logo__ball { animation: lmTrack 1.5s linear 1.9s both; }                              /* 5 */
.motion .is-anim .logo__ring { animation: lmRing .9s var(--ease) 3.25s both; }                          /* 6 */
@keyframes lmRise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes lmLine { from { clip-path: inset(-2px 100% -2px 0); } to { clip-path: inset(-2px 0 -2px 0); } }
@keyframes lmTag { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .16em; } }
@keyframes lmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lmCred { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes lmTrack {   /* left → right in two low arcs (a bounce at mid-court), then back to rest */
  0% { opacity: 0; left: 0%; transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .7, 1); }
  8% { opacity: 1; }
  22% { left: 22%; transform: translateY(-9px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  44% { left: 46%; transform: translateY(0); animation-timing-function: cubic-bezier(.1, .4, .5, 1); }
  62% { left: 70%; transform: translateY(-6px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  80% { left: 96%; transform: translateY(0); animation-timing-function: cubic-bezier(.3, .7, .3, 1); }
  100% { opacity: 1; left: var(--fp); transform: translateY(0); }
}
@keyframes lmRing { 0% { opacity: 0; transform: scale(2.6); } 60% { opacity: 1; transform: scale(.9); } 100% { opacity: 1; transform: none; } }


/* Links: an animated court line (with end ticks) slides to the hovered link */
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; }
.nav__links a { position: relative; z-index: 1; padding: 9px 16px; white-space: nowrap; border-radius: 999px; font-weight: 500; font-size: .95rem; transition: color .3s; }
.nav__links a:hover { color: var(--teal-ink); }
.nav__links a.is-active::after { content: ""; position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--teal); }
.nav__pill { position: absolute; z-index: 0; bottom: 6px; left: 0; width: 0; height: 2px; background: var(--teal); opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .25s; }
.nav__pill::before, .nav__pill::after { content: ""; position: absolute; top: -3px; width: 2px; height: 8px; background: var(--teal); }
.nav__pill::before { left: 0; }
.nav__pill::after { right: 0; }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: inline-block; transition: transform .5s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .5s var(--ease); }
a:hover > .roll > span, a:focus-visible > .roll > span, a:hover > .roll::after, a:focus-visible > .roll::after { transform: translateY(-100%); }

.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__menu { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 5px 0 18px; border-radius: 999px; background: var(--charcoal); color: var(--on-dark); font-weight: 600; font-size: .92rem; transition: background-color .3s; }
.nav__menu:hover { background: var(--ink); }
.nav__menu-ic { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(247,245,239,.12); transition: background-color .35s, color .35s, transform .5s var(--ease); }
.nav__menu-ic i { position: absolute; left: 10px; right: 10px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease), left .45s var(--ease); }
.nav__menu-ic i:first-child { top: 14px; }
.nav__menu-ic i:last-child { top: 20px; left: 14px; }
.nav__menu:hover .nav__menu-ic i:last-child { left: 10px; }
.nav__menu[aria-expanded="true"] .nav__menu-ic { background: var(--lime); color: var(--ink); transform: rotate(90deg); }
.nav__menu[aria-expanded="true"] .nav__menu-ic i { top: 17px; left: 10px; }
.nav__menu[aria-expanded="true"] .nav__menu-ic i:first-child { transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-ic i:last-child { transform: rotate(-45deg); }

/* Full-screen menu — grows out of the Menu button */
.menu { position: fixed; inset: 0; z-index: 55; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; background: var(--ink); color: var(--on-dark); visibility: hidden; clip-path: circle(0px at var(--mx, 92%) var(--my, 80px)); transition: clip-path .75s var(--ease), visibility 0s .75s; }
.menu.is-open { visibility: visible; clip-path: circle(160vmax at var(--mx, 92%) var(--my, 80px)); transition: clip-path .95s var(--ease); }
.menu::-webkit-scrollbar { display: none; }
.menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 50% at 80% 20%, rgba(90,135,181,.28), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(201,230,77,.12), transparent 70%); }
.menu__court { position: absolute; right: -12vw; top: 50%; width: min(1100px, 90vw); transform: translateY(-50%) rotate(-10deg); opacity: .09; pointer-events: none; }
.menu__court * { fill: none; stroke: var(--on-dark); stroke-width: 1.4; }
.menu__inner { position: relative; min-height: 100%; max-width: var(--max); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; padding-top: calc(var(--nav-h) + 16px); padding-bottom: 32px; }
.menu__k { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 12px; }
.menu__links li { overflow: hidden; border-bottom: 1px solid var(--line-dark); }
.menu__links a { position: relative; display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); padding: .1em 0; font-size: clamp(1.7rem, min(1rem + 2.8vw, 5.4vh), 4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; transform: translateY(100%); transition: transform .8s var(--ease), color .3s; }
.menu.is-open .menu__links a { transform: none; transition-delay: calc(.25s + var(--i, 0) * .05s), 0s; }
.menu__links a::after { content: "↗"; margin-left: auto; font-size: .45em; font-weight: 500; opacity: 0; transform: translate(-10px, 10px); transition: opacity .3s, transform .45s var(--ease); }
.menu__links a:hover, .menu__links a:focus-visible { color: var(--lime); }
.menu__links a:hover::after, .menu__links a:focus-visible::after { opacity: 1; transform: none; }
.menu__n { flex: none; width: 2.2em; font-size: .26em; font-weight: 700; letter-spacing: .04em; color: var(--lime); transform: translateY(-1.4em); }
.menu__card { justify-self: end; width: 100%; max-width: 420px; padding: 16px; border-radius: 28px; background: rgba(247,245,239,.06); border: 1px solid var(--line-dark); opacity: 0; transform: translateY(40px) rotate(2deg); transition: opacity .6s, transform .9s var(--ease); }
.menu.is-open .menu__card { opacity: 1; transform: rotate(-1deg); transition-delay: .45s; }
.menu__photo { aspect-ratio: 16 / 10; max-height: 30vh; width: 100%; border-radius: 18px; }
.menu__name { margin: 16px 6px 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.menu__role { margin: 2px 6px 0; font-size: .9rem; color: var(--on-dark-2); }
.menu__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.menu__facts li { padding: 12px; border-radius: 14px; background: rgba(247,245,239,.06); }
.menu__facts b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--lime); }
.menu__facts span { font-size: .8rem; line-height: 1.3; color: var(--on-dark-2); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 6px 4px; font-size: .92rem; font-weight: 500; color: var(--on-dark-2); }
.menu__foot i, .fpill i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

/* ---------- Section seams: one court line runs from section to section ---------- */
.seam { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto clamp(40px, 5vw, 64px); color: var(--ink); }
.seam__line { position: relative; width: 2px; height: clamp(56px, 7vw, 104px); background: currentColor; opacity: .3; transform-origin: top; transition: transform 1.2s var(--ease); }
.seam__line::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 10px; height: 2px; background: currentColor; }
.seam__tag { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); background: var(--card); transition: opacity .6s .5s, transform .8s var(--ease) .5s; }
.seam--light { color: var(--on-dark); }
.seam--light .seam__tag { color: var(--lime); background: rgba(247,245,239,.05); border-color: var(--line-dark); }
.motion .seam:not(.in) .seam__line { transform: scaleY(0); }
.motion .seam:not(.in) .seam__tag { opacity: 0; transform: translateY(10px); }


/* ==========================================================================
   02 — QUICK CREDIBILITY (editorial · a split-flap ~2 and three large-type rows)
   When the ~2 comes into view each tile shuffles and lands (main.js).
   Static without JS.
   ========================================================================== */
@keyframes tagIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes labelIn { from { opacity: 0; transform: translateY(8px); } }
.xpb { position: relative; margin-inline: clamp(0px, 1.2vw, 18px); padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 9vw, 130px); overflow: hidden; border-radius: 48px; background: radial-gradient(45% 55% at 94% 6%, rgba(90,135,181,.34), transparent 70%), radial-gradient(40% 45% at 0% 100%, rgba(90,135,181,.22), transparent 70%), var(--ink); color: var(--on-dark); }
.xpb__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(40px, 6vw, 110px); align-items: end; }
.xpb__note { max-width: 28em; font-size: clamp(1.04rem, 1rem + .25vw, 1.18rem); color: var(--on-dark-2); }
.xpb__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: center; margin-top: clamp(44px, 5vw, 80px); }
.xpb__big { justify-self: start; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--r-lg); background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(247,245,239,.08); }
.sb__flaps { display: flex; gap: 6px; }
.sb__flaps span { position: relative; display: grid; place-items: center; width: clamp(64px, 7.4vw, 124px); aspect-ratio: 3 / 4.1; border-radius: 12px; background: linear-gradient(180deg, #23415C 0 50%, #1B354D 50% 100%); color: var(--on-dark); font-weight: 800; font-size: clamp(3.2rem, 1.6rem + 4.4vw, 7rem); line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px rgba(0,0,0,.3); }
.sb__flaps span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.sb__flaps span:last-child { color: var(--lime); }
.xpb__flaps span:last-child { color: var(--lime); }
.sb__flaps span.is-flip { animation: flap .14s ease-out; }
@keyframes flap { from { transform: perspective(300px) rotateX(-75deg); filter: brightness(.55); } }
.xpb__big-k { margin-top: 18px; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-lt); }

.xpb__rows { border-top: 1px solid var(--line-dark); }
.xpb__row { position: relative; display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: baseline; gap: 6px 18px; padding: clamp(14px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--line-dark); }
.xpb__row::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--teal-lt); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.xpb__row:hover::after { transform: scaleX(1); }
.xpb__i { font-family: var(--f-serif); font-style: italic; font-size: 1.25rem; color: var(--teal-lt); }
.xpb__t { font-weight: 900; font-stretch: 75%; font-size: clamp(2.3rem, .9rem + 4.2vw, 5.6rem); line-height: .9; letter-spacing: -.005em; text-transform: uppercase; transition: transform .6s var(--ease); }
.xpb__row:hover .xpb__t { transform: translateX(10px); }
.xpb__row:nth-child(3) .xpb__t { color: transparent; -webkit-text-stroke: 1.5px var(--on-dark); }
.xpb__row--now .xpb__t { color: var(--lime); }
.xpb__d { justify-self: end; text-align: right; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
.xpb__row--now .xpb__d { color: var(--on-dark); }
.xpb__row--now .xpb__d::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(201,230,77,.25); vertical-align: middle; }
.xpb__row--orange .xpb__t { color: var(--orange-lt); }
.xpb__row--orange .xpb__i { color: var(--orange-lt); }
.xpb__rows .xpb__row:nth-child(2) { transition-delay: .1s; }
.xpb__rows .xpb__row:nth-child(3) { transition-delay: .2s; }

/* ==========================================================================
   03 — ABOUT MARK (copy + a tilting coach card with his facts)
   ========================================================================== */
.meet { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(90px, 10vw, 150px); }
.meet__body, .meet__side { min-width: 0; }
.meet__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.meet__lead { margin-top: 28px; max-width: 30em; font-size: clamp(1.25rem, 1rem + .7vw, 1.7rem); line-height: 1.4; color: var(--ink); }
.meet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px clamp(24px, 3vw, 48px); margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-2); }
.meet__cols b { font-weight: 700; color: var(--ink); }
.meet__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.meet__ctas .textlink { color: var(--ink); }

.meet__side { position: relative; perspective: 1100px; }
.ccard { position: relative; max-width: 430px; margin-inline: auto; transform-style: preserve-3d; will-change: transform; }
.ccard__in { position: relative; overflow: hidden; padding: clamp(22px, 2.4vw, 32px); border-radius: 26px; background: radial-gradient(80% 50% at 90% 0%, rgba(90,135,181,.45), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(90,135,181,.24), transparent 70%), var(--ink); color: var(--on-dark); box-shadow: 0 40px 80px rgba(24,50,72,.32), inset 0 0 0 1px rgba(90,135,181,.42); transition: transform 1.4s var(--ease); }
.ccard__in::before { content: ""; position: absolute; inset: 10px; border-radius: 18px; border: 1px solid rgba(90,135,181,.22); pointer-events: none; }
.motion .meet__side:not(.in) .ccard__in { transform: rotateY(-18deg) rotateX(8deg); }
.ccard__court { position: absolute; right: -8%; top: 8%; width: 50%; height: 68%; opacity: .1; pointer-events: none; transform: rotate(8deg); }
.ccard__court * { fill: none; stroke: var(--on-dark); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ccard__top { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2); }
.ccard__seal { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--teal-lt); color: var(--ink); font-size: .7rem; font-weight: 900; letter-spacing: .04em; box-shadow: 0 0 0 5px rgba(90,135,181,.18); }
.ccard__photo { position: relative; margin-top: 16px; aspect-ratio: 5 / 4; border-radius: 16px; box-shadow: 0 0 0 1px rgba(90,135,181,.35); }
.ccard__photo img { object-position: 50% 30%; }
.ccard__name { position: relative; margin-top: 18px; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.ccard__role { position: relative; margin-top: 8px; font-size: .92rem; color: var(--on-dark-2); }
.ccard__stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 0; border-top: 1px solid var(--line-dark); }
.ccard__stats div { padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.ccard__stats div:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--line-dark); }
.ccard__stats div:nth-child(even) { padding-left: 14px; }
.ccard__stats div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 2px; }
.ccard__stats dt { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-lt); }
.ccard__stats dd { margin: 4px 0 0; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.ccard__shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: radial-gradient(45% 35% at var(--sx, 20%) var(--sy, 0%), rgba(247,245,239,.16), transparent 70%); }
.meet__ball { right: 2%; top: -30px; width: 72px; height: 72px; }
.motion .meet__ball { animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px); } }

/* Meet — supporting copy */
.meet__goal { margin-top: 22px; max-width: 34em; color: var(--ink-2); }
.meet__goal b { font-weight: 700; color: var(--ink); }
.meet__line { margin: 28px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--orange); max-width: 30em; }
.meet__line p { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--ink); }
.meet__line em { font-size: 1.06em; color: var(--teal-ink); }
.meet__line footer { margin-top: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.ccard__seal { background: var(--lime); color: var(--ink); box-shadow: 0 0 0 5px rgba(201,230,77,.18); font-size: .86rem; }
.ccard__photo img { object-position: 50% 22%; }

/* ==========================================================================
   08 — TESTIMONIALS / MEDIA
   A testimonial card (clearly marked placeholder until real quotes are
   supplied) · gallery categories · placeholder quote cards (no invented
   testimonials) · a film-strip of photos: scroll, swipe or drag sideways, VIEW
   cursor, click to expand.
   ========================================================================== */
.proof { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.proof__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.proof__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(36px, 4vw, 60px); align-items: stretch; }
.pm { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-lg); background: radial-gradient(70% 50% at 100% 0%, rgba(90,135,181,.24), transparent 70%), var(--ink); color: var(--on-dark); box-shadow: 0 40px 80px rgba(24,50,72,.2); }
.pm__k { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-lt); }
.pm__k i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.pm__list { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 0; border-top: 1px solid var(--line-dark); }
.pm__item { padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.pm__item:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line-dark); }
.pm__item:nth-child(even) { padding-left: 16px; }
.pm__item dt { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.pm__item dd { display: grid; margin: 6px 0 0; }
.pm__item b { font-weight: 900; font-stretch: 78%; font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.8rem); line-height: .95; }
.pm__item--key b { color: var(--lime); }
.pm__item small { margin-top: 4px; font-size: .84rem; color: var(--on-dark-2); }
.pm__note { margin-top: auto; padding-top: 18px; font-size: .86rem; line-height: 1.45; color: var(--on-dark-2); }
.pt { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--sand); }
.pt__k { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); }
.pt__k::before { content: ""; width: 18px; height: 2px; background: var(--teal); }
.pt__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pt__f {  padding: 9px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: clamp(.95rem, .9rem + .2vw, 1.1rem); font-weight: 700; color: var(--ink); transition: transform .4s var(--ease), background-color .3s, color .3s; }
.pt__f:hover { transform: translateY(-3px) rotate(-1deg); background: var(--ink); color: var(--on-dark); }
.pt__f.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.pt__f.is-on::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--lime); }
.pq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 22px; }
.pq { position: relative; padding: 18px 18px 16px; border-radius: 18px; border: 1.5px dashed rgba(24,50,72,.25); background: rgba(252,251,247,.55); }
.pq__mark { display: block; height: 24px; font-family: var(--f-serif); font-size: 3rem; line-height: .7; color: var(--teal); }
.pq p { font-weight: 700; color: var(--ink); }
.pq figcaption { margin-top: 4px; font-size: .86rem; color: var(--ink-3); }

.gal { margin-top: clamp(48px, 6vw, 88px); }
.gal__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gal__k { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; font-stretch: 78%; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); line-height: 1; text-transform: uppercase; color: var(--ink); }
.gal__k::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.gal__ctrl { display: flex; align-items: center; gap: 8px; }
.gal__bar { position: relative; width: clamp(80px, 12vw, 180px); height: 2px; margin-right: 10px; overflow: hidden; background: var(--line); }
.gal__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--gp, .1)); transition: transform .25s; }
.gal__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(24,50,72,.25); color: var(--ink); transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }
.gal__btn svg, .lb__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gal__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.gal__btn:disabled { opacity: .35; cursor: default; }
.gal__track { display: flex; gap: clamp(10px, 1.2vw, 18px); margin: 22px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.gal__track.is-drag .gal__item { pointer-events: none; }
.gal__it { flex: none; width: clamp(230px, 22vw, 340px); scroll-snap-align: start; }
.gal__it--w { width: clamp(300px, 36vw, 560px); }
.gal__it--t { width: clamp(200px, 17vw, 270px); }
.gal__item { display: block; width: 100%; text-align: left; border-radius: 20px; }
.gal__item .media { height: clamp(260px, 30vw, 440px); border-radius: 20px; }
.gal__item img { -webkit-user-drag: none; }
.gal__item:hover img, .gal__item:focus-visible img { transform: scale(1.05); }
.gal__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; font-weight: 700; color: var(--ink); }
.gal__cap small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); white-space: nowrap; }
.gal__cap small.is-stock { color: var(--ink-3); }
.motion .gal__it { opacity: 0; transform: translateX(60px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
.motion .gal.in .gal__it { opacity: 1; transform: none; }
.motion .gal.in .gal__it:nth-child(2) { transition-delay: .07s; }
.motion .gal.in .gal__it:nth-child(3) { transition-delay: .14s; }
.motion .gal.in .gal__it:nth-child(4) { transition-delay: .21s; }
.motion .gal.in .gal__it:nth-child(n+5) { transition-delay: .28s; }

/* lightbox */
.lb { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--on-dark); overflow: visible; }
.lb::backdrop { background: rgba(16,36,58,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb[open] { animation: lbIn .45s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } }
.lb__in { position: relative; padding: 56px 0 0; }
.lb__fig { display: grid; justify-items: center; gap: 14px; }
.lb__img { width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 170px); border-radius: 18px; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.lb__cap { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--on-dark-2); }
.lb__btn, .lb__close { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(247,245,239,.1); color: var(--on-dark); transition: background-color .3s, color .3s; }
.lb__btn:hover, .lb__close:hover { background: var(--lime); color: var(--ink); }
.lb__btn { top: calc(50% + 28px); transform: translateY(-50%); }
.lb__btn--prev { left: -66px; }
.lb__btn--next { right: -66px; }
.lb__close { top: 0; right: 0; font-size: 1.6rem; line-height: 1; }

/* ==========================================================================
   04 — COACHING (Technique + Consistency → Shot Development → Strategy + Game Play)
   One court that evolves with the program: youth, adults, couples / groups,
   clinics + camps. The accent moves green → lime → blue → sand, the photo
   and copy change, and the button carries the program into the coaching
   path form. Desktop: pinned, scroll steps through the programs (the tabs
   jump). Smaller screens: tap or swipe. Readable without JS / motion.
   ========================================================================== */
.lv { --acc: var(--teal); --acc-ink: var(--teal-ink); --acc-lt: var(--teal-lt); --acc-rgb: 79,138,106; --lvp: 0; position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.lv[data-lv="1"] { --acc: var(--court); --acc-ink: var(--blue); --acc-lt: #A6D3B8; --acc-rgb: 168,194,58; --lvp: .5; }
.lv[data-lv="2"] { --acc: var(--orange); --acc-ink: var(--orange-ink); --acc-lt: var(--orange-lt); --acc-rgb: 90,135,181; --lvp: 1; }
.lv__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.lv__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.lv__stage { margin-top: clamp(32px, 3.6vw, 54px); }

/* the rail — three stops on one line that fills as you progress */
.lv__rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lv__line { position: absolute; left: 23px; right: calc((100% - 30px) / 4 - 23px); top: 22px; height: 2px; background: var(--line); }
.lv__line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal), var(--court), var(--orange)); transform-origin: left; transform: scaleX(var(--lvp)); transition: transform 1s var(--ease); }
.lv__tab { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; justify-items: start; padding: 0 10px 6px 0; text-align: left; }
.lv__tab-n { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(24,50,72,.18); font-size: .74rem; font-weight: 800; color: var(--ink-2); transition: background-color .45s, border-color .45s, color .45s, box-shadow .45s; }
.lv__tab-k { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); transition: color .45s; }
.lv__tab b { font-weight: 900; font-stretch: 80%; font-size: clamp(1.05rem, .8rem + .75vw, 1.6rem); line-height: 1.05; text-transform: uppercase; color: var(--ink-3); transition: color .45s; }
.lv__tab:hover b { color: var(--ink); }
.lv__tab.is-done .lv__tab-n { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.lv__tab.is-on .lv__tab-n { background: var(--acc-ink); border-color: var(--acc-ink); color: #fff; box-shadow: 0 0 0 6px rgba(var(--acc-rgb), .18); }
.lv__tab.is-on .lv__tab-k { color: var(--acc-ink); }
.lv__tab.is-on b { color: var(--ink); }

.lv__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(18px, 2vw, 28px); align-items: stretch; }

/* the court board — a top-down court, 44 × 20 ft to scale, your side on the left */
.lv__board { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2.2vw, 34px); border-radius: var(--r-lg); background: radial-gradient(60% 60% at 100% 0%, rgba(var(--acc-rgb), .32), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(90,135,181,.18), transparent 70%), var(--ink); color: var(--on-dark); box-shadow: 0 40px 90px rgba(24,50,72,.22); }
.tc__court { position: relative; aspect-ratio: 880 / 400; border-radius: 4px; background: linear-gradient(90deg, #467D60, #4F8A6A 50%, #467D60); box-shadow: 0 0 0 10px rgba(247,245,239,.04), 0 26px 50px rgba(0,0,0,.28); }
.tc__lines, .tc__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tc__lines rect, .tc__lines path { fill: none; stroke: rgba(247,245,239,.92); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.tc__lines .tc__kz { fill: rgba(16,36,58,.2); stroke: none; transition: fill .7s; }
.tc__lines .tc__net { stroke: var(--on-dark); stroke-width: 3.5; stroke-dasharray: 5 3; transition: none; }
.tc__lines .lv__z { stroke: none; opacity: 0; transition: opacity .8s var(--ease); }
.lv__z--trans { fill: rgba(90,135,181,.5); }
.lv__z--target { fill: rgba(90,135,181,.55); }
.lv[data-lv="0"] .tc__kz { fill: rgba(201,230,77,.24); }
.lv[data-lv="1"] .lv__z--trans { opacity: 1; }
.lv[data-lv="2"] .lv__z--trans { opacity: .35; }
.lv[data-lv="2"] .lv__z--target { opacity: 1; }
.motion .lv__board:not(.in) .tc__lines rect:not(.tc__kz):not(.lv__z), .motion .lv__board:not(.in) .tc__lines path:not(.tc__net) { stroke-dashoffset: 1; }
.tc__seg { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .3s; }
.tc__seg--them { stroke: rgba(247,245,239,.75); stroke-width: 2; stroke-dasharray: 2 7; }
.tc__seg--prev { stroke: rgba(201,230,77,.5); stroke-width: 2; stroke-dasharray: 2 7; }
.tc__seg--you { stroke: var(--lime); stroke-width: 3.5; }
.tc__land { fill: none; stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity .3s; }
.tc__pl { position: absolute; z-index: 2; left: var(--x, 50%); top: var(--y, 50%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; transition: left .9s var(--ease), top .9s var(--ease), opacity .5s; }
.tc__pl--you { background: var(--on-dark); box-shadow: 0 0 0 3px var(--ink), 0 6px 14px rgba(0,0,0,.3); }
.tc__pl--opp { background: var(--ink); box-shadow: 0 0 0 2px rgba(247,245,239,.75), 0 6px 14px rgba(0,0,0,.25); }
.tc__pl b { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--on-dark); color: var(--ink); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.tc__pl .lv__coach { background: var(--orange); color: var(--ink); }

.lv:is([data-lv="0"], [data-lv="1"]) .tc__pl:is([data-p="1"], [data-p="3"]), .lv[data-lv="3"] .tc__pl[data-p="3"] { opacity: 0; }
.tc__dp { position: absolute; z-index: 3; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; transition: left .9s var(--ease), top .9s var(--ease); }
.tc__dp i { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--lime); background: rgba(201,230,77,.1); }
.motion .tc__dp i { animation: dpPulse 2.4s var(--ease) infinite; }
.tc__dp-t { position: absolute; left: 24px; bottom: 16px; padding: 5px 10px; border-radius: 8px; background: var(--lime); color: var(--ink); font-size: .72rem; font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.tc__dp.is-below .tc__dp-t { bottom: auto; top: 16px; }
.tc__dp.is-swap .tc__dp-t { animation: labelIn .6s var(--ease) .5s both; }
.tc__ball { left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 4; pointer-events: none; box-shadow: inset -4px -5px 8px rgba(24,50,72,.32), 0 6px 14px rgba(0,0,0,.3); }
.tc__ball .pball__holes { display: none; }
.tc__zl { position: absolute; z-index: 1; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,245,239,.55); pointer-events: none; }
.tc__zl--a { left: 0; bottom: -26px; }
.tc__zl--b { left: 50%; bottom: -26px; transform: translateX(-50%); }
.tc__zl--c { right: 0; bottom: -26px; }
.lv__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 52px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.lv__cap-k { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acc-lt); transition: color .6s; }
.lv__cap-t { font-weight: 800; font-stretch: 85%; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); letter-spacing: .01em; text-transform: uppercase; }
.lv__cap.is-swap .lv__cap-t { animation: tagIn .5s var(--ease) both; }

/* the level card — photo, copy, focus list, and a CTA that stays put */
.lv__card { position: relative; display: flex; flex-direction: column; padding: clamp(12px, 1.4vw, 18px); border-radius: var(--r-lg); background: var(--card); box-shadow: 0 30px 70px rgba(24,50,72,.12), inset 0 4px 0 var(--acc); transition: box-shadow .6s; }
.lv__photo { aspect-ratio: 2 / 1; border-radius: 18px; }
.lv__photo img { opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.lv__photo img.is-on { opacity: 1; transform: none; }
.lv__photo img[data-i="0"] { object-position: 50% 40%; }
.lv__photo img[data-i="1"] { object-position: 50% 45%; }
.lv__photo img[data-i="2"] { object-position: 40% 40%; }
.lv__credit { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(247,245,239,.88); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lv__panes { flex: 1; padding: clamp(16px, 1.8vw, 24px) clamp(6px, .8vw, 12px) 0; }
.lv__k { display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-ink); }
.lv__k span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1.5px solid var(--acc); font-size: .68rem; letter-spacing: 0; }
.lv__t { margin-top: 12px; font-size: clamp(1.55rem, 1rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.lv__p { margin-top: 10px; max-width: 30em; color: var(--ink-2); }
.lv__focus { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lv__focus li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(var(--acc-rgb), .1); border: 1px solid rgba(var(--acc-rgb), .35); font-size: .86rem; font-weight: 600; color: var(--ink); }
.lv__focus li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.lv__pane + .lv__pane { margin-top: 26px; }
.lv.is-js .lv__pane + .lv__pane { margin-top: 0; }
.motion .lv__pane:not([hidden]) > * { animation: tagIn .55s var(--ease) both; }
.motion .lv__pane:not([hidden]) > :nth-child(2) { animation-delay: .05s; }
.motion .lv__pane:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
.motion .lv__pane:not([hidden]) > :nth-child(4) { animation-delay: .15s; }
.lv__book { margin-top: 20px; }
.lv__swipe { display: none; margin-top: 10px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--ink-3); }

/* ==========================================================================
   02 — QUICK CREDIBILITY, light variant: warm white, charcoal type; the
   split-flap ~2 stays on a navy tile.
   ========================================================================== */
.xpb--light { margin-inline: 0; border-radius: 0; padding-top: clamp(30px, 4vw, 60px); background: radial-gradient(40% 50% at 96% 0%, rgba(90,135,181,.14), transparent 70%), var(--bg); color: var(--text); }
.xpb--light .xpb__note { color: var(--ink-2); }
.xpb--light .xpb__big { background: var(--ink); box-shadow: 0 30px 60px rgba(24,50,72,.2); }
.xpb--light .xpb__big-k { color: var(--teal-lt); }
.xpb--light .xpb__rows, .xpb--light .xpb__row { border-color: var(--line); }
.xpb--light .xpb__row::after { background: var(--court); }
.xpb--light .xpb__i { color: var(--teal-ink); }
.xpb--light .xpb__d { color: var(--ink-3); }
.xpb--light .xpb__row:first-child .xpb__t { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.xpb--light .xpb__row--now .xpb__t, .xpb--light .xpb__row--now .xpb__d { color: var(--ink); }
.xpb--light .xpb__row--focus .xpb__t { color: var(--orange-ink); -webkit-text-stroke: 0; }
.xpb--light .xpb__row--focus .xpb__i { color: var(--orange-ink); }
.xpb__t--range { font-size: clamp(2rem, .8rem + 3.2vw, 4.6rem); }
.xpb__t--range > span[aria-hidden] { color: var(--court); font-stretch: 100%; }

/* ==========================================================================
   03 — MEET: the philosophy line, the coach card's seal, and the photo slot
   (the card carries a photo slot for Mark)
   ========================================================================== */
.meet__line { margin: 30px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--orange); max-width: 30em; }
.meet__line p { font-weight: 900; font-stretch: 75%; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.meet__line em { font-family: var(--f-sans); font-style: normal; font-size: 1em; color: var(--orange); }
.meet__line .meet__line-k { margin-top: 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--orange-ink); }
.ccard__seal { background: transparent; box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 5px rgba(90,135,181,.14); }
.ccard__seal i { width: 18px; height: 18px; border-radius: 50%; background: var(--lime); }
.ccard__photo.is-empty { background: radial-gradient(70% 70% at 60% 40%, rgba(90,135,181,.45), transparent 70%), var(--ink-mid); }
.ccard__ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ccard__ph path, .ccard__ph circle { fill: none; stroke-linecap: round; }
.ccard__ph-court { stroke: rgba(247,245,239,.4); stroke-width: 3; }
.ccard__ph-arc { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 3 10; opacity: .7; }
.ccard__ph-eye { stroke: var(--lime); stroke-width: 2; opacity: .6; }
.ccard__ph-ring { stroke: var(--orange); stroke-width: 2.5; }
.ccard__ph .ccard__ph-ball { fill: var(--lime); stroke: none; }
.ccard__photo.is-empty::after { top: 14px; bottom: auto; }

/* ==========================================================================
   08 — TESTIMONIALS / MEDIA: the testimonial card (clearly marked
   placeholders until real quotes are supplied) + the media strip
   ========================================================================== */
.proof { padding-bottom: clamp(40px, 5vw, 70px); }
.pm { position: relative; overflow: hidden; }
.pm__medal { position: absolute; right: clamp(16px, 2vw, 30px); top: clamp(16px, 2vw, 30px); width: clamp(64px, 6.4vw, 96px); height: auto; }
.pm__medal path, .pm__medal circle { fill: none; }
.pm__ribbon { stroke: var(--court-lt); stroke-width: 8; stroke-linecap: round; }
.pm__medal circle { stroke: var(--orange); stroke-width: 3; }
.pm__medal .pm__inner { stroke: rgba(247,245,239,.3); stroke-width: 2; }
.pm__medal .pm__ball { fill: var(--lime); stroke: none; }
.pm__big { max-width: 12em; margin-top: 18px; padding-right: 80px; font-weight: 900; font-stretch: 78%; font-size: clamp(2rem, 1.2rem + 2vw, 3.3rem); line-height: .98; text-transform: uppercase; }
.pm__note { max-width: 32em; }
.galsec { position: relative; padding: 0 0 clamp(80px, 9vw, 130px); }
.galsec .gal { margin-top: 0; }
.gal__item--ph { cursor: default; }
.gal__item--ph .media { background: linear-gradient(150deg, var(--grey), #C9CED3); outline: 1.5px dashed rgba(24,50,72,.28); outline-offset: -1.5px; }
.gal__item--ph .gal__cap small { color: var(--ink-3); }

/* menu card — the wordmark idea instead of a photo */
.menu__mark { padding: 18px 18px 16px; border-radius: 18px; background: rgba(0,0,0,.22); }
.menu__mark svg { display: block; width: 100%; height: auto; }
.menu__mark path, .menu__mark circle { fill: none; stroke-linecap: round; }
.menu__mark-line { stroke: var(--court-lt); stroke-width: 3; }
.menu__mark-arc { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 3 9; }
.menu__mark-ring { stroke: var(--orange); stroke-width: 2.5; }
.menu__mark .menu__mark-ball { fill: var(--lime); stroke: none; }
.menu__mark p { margin-top: 6px; font-weight: 900; font-stretch: 75%; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }

/* fields + chips */
.req { color: var(--error); font-weight: 600; }
.field { display: flex; flex-direction: column; padding-top: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field label { margin-bottom: 8px; font-size: 1rem; font-weight: 600; }
.opt { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgba(24,50,72,.18); background-color: rgba(227,216,200,.35); color: var(--ink); font: inherit; font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field textarea:hover { border-color: rgba(24,50,72,.35); }
.field input:focus, .field textarea:focus { background-color: var(--card); border-color: var(--court); box-shadow: 0 0 0 4px rgba(90,135,181,.22); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__err { font-size: .86rem; color: var(--error); }
.field__err:not(:empty) { margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.chip-opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(24,50,72,.2); font-size: .98rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease); }
.chip-opt:hover span { border-color: var(--court); transform: translateY(-2px); }
.chip-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.chip-opt input:checked + span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.chip-opt input:focus-visible + span { outline: 3px solid var(--court); outline-offset: 2px; }
.chip-opt.is-flash span { animation: chipFlash 1.4s var(--ease); }
@keyframes chipFlash { 0% { box-shadow: 0 0 0 0 rgba(90,135,181,.8); } 100% { box-shadow: 0 0 0 14px rgba(90,135,181,0); } }
.bform__status { margin-top: 14px; font-weight: 500; }
.bform__status.is-error { color: var(--error); }

/* ==========================================================================
   10 — FINAL CTA + FOOTER
   ========================================================================== */
.footer { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding: clamp(40px, 6vw, 90px) 0 26px; }
.footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 40% at 85% 10%, rgba(90,135,181,.14), transparent 70%); }

/* Closing statement + CTA */
.fcta { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; padding-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line-dark); }
.fcta__court { position: absolute; z-index: -1; left: 0; right: 0; top: clamp(40px, 6vw, 80px); bottom: -24px; width: 100%; height: calc(100% - clamp(40px, 6vw, 80px) + 24px); opacity: .12; pointer-events: none; }
.fcta__court path { fill: none; stroke: var(--teal-lt); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s var(--ease) .2s; }
.motion .fcta:not(.in) .fcta__court path { stroke-dashoffset: 1; }
.fcta__title { font-weight: 900; font-stretch: 80%; font-size: clamp(2.6rem, 1rem + 5vw, 7rem); line-height: .94; letter-spacing: -.02em; text-transform: uppercase; }
.fcta__title em { color: var(--teal-lt); font-size: .92em; font-stretch: 100%; letter-spacing: -.03em; text-transform: none; }
.fcta__p { color: var(--on-dark-2); max-width: 26em; margin-bottom: 22px; }
.fcta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.fcta__creds { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 22px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-lt); }
.fcta__creds span + span::before { content: "·"; margin: 0 12px; color: var(--on-dark-2); }

/* Footer — stacked wordmark (MARK / outlined BOEHM) with a court line
   and one ball pass when it scrolls into view, plus three columns */
.foot { position: relative; margin-top: clamp(56px, 7vw, 100px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-dark); }
.foot__top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 56px); align-items: start; }
.fbrand { display: inline-grid; justify-items: start; gap: 10px; color: var(--on-dark); }
.fbrand__name { display: grid; font-weight: 900; font-stretch: 78%; font-size: clamp(1.9rem, .9rem + 1.8vw, 3.1rem); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.fbrand__name > span { display: block; overflow: hidden; padding-bottom: .04em; }
.fbrand__name > span > span { display: block; transition: transform 1s var(--ease), color .5s; }
.fbrand__name > span:last-child > span { color: transparent; -webkit-text-stroke: 1.5px var(--teal-lt); transition-delay: .12s, 0s; }
.fbrand:hover .fbrand__name > span:last-child > span { color: var(--teal-lt); }
.motion .fbrand:not(.in) .fbrand__name > span > span { transform: translateY(105%); }
.fbrand__court { position: relative; display: block; width: 100%; margin-top: 6px; }
.fbrand__court svg { display: block; width: 100%; height: 10px; overflow: visible; }
.fbrand__court svg { clip-path: inset(-4px 0 -4px 0); transition: clip-path 1.2s var(--ease) .5s; }
.fbrand__court path { fill: none; stroke: var(--teal-lt); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.motion .fbrand:not(.in) .fbrand__court svg { clip-path: inset(-4px 100% -4px 0); }
.fbrand__ball { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--lime); opacity: 0; pointer-events: none; }
.motion .fbrand.in .fbrand__ball { animation: fbBall 1.1s cubic-bezier(.4, .1, .4, 1) 1.5s both; }
@keyframes fbBall { 0% { opacity: 0; left: 0; transform: none; } 10% { opacity: 1; } 35% { transform: translateY(-16px); } 60% { transform: none; } 80% { transform: translateY(-7px); } 92% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 12px); transform: none; } }
.fbrand__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.fbrand__tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-lt); }
.fbrand__tag b { color: var(--teal-lt); }
.fcol { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.fcol__h { margin-bottom: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-lt); }
.flink { position: relative; display: inline-flex; align-items: center; gap: 0; min-height: 40px; padding: 3px 0; font-size: 1.05rem; font-weight: 500; color: var(--on-dark); }
.flink::before { content: ""; width: 0; height: 2px; margin-right: 0; background: var(--lime); transition: width .35s var(--ease), margin-right .35s var(--ease); }
.flink:hover::before, .flink:focus-visible::before { width: 14px; margin-right: 10px; }
.flink:hover { color: var(--lime); }
.ffacts { display: grid; gap: 8px; }
.ffacts li { display: flex; gap: 10px; font-size: .98rem; line-height: 1.35; color: var(--on-dark); }
.ffacts li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: var(--lime); }
.fsocial { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 290px; margin-bottom: 4px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(247,245,239,.06); border: 1px solid transparent; transition: border-color .3s, background-color .3s, transform .4s var(--ease); }
a.fsocial:hover { border-color: rgba(201,230,77,.55); background: rgba(201,230,77,.07); transform: translateX(4px); }
.fsocial svg { width: 34px; height: 34px; flex: none; padding: 7px; border-radius: 10px; background: var(--on-dark); fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fsocial > span:first-of-type { display: grid; font-weight: 600; line-height: 1.2; }
.fsocial small { font-size: .84rem; font-weight: 400; color: var(--on-dark-2); }
.fsocial b { margin-left: auto; font-weight: 500; color: var(--lime); transition: transform .35s var(--ease); }
.fsocial:hover b { transform: translate(2px, -2px); }
.fsocial--soon { opacity: .75; }
.fsocial--soon svg { background: rgba(247,245,239,.5); }

/* Legal row */
.flegal { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .92rem; color: var(--on-dark-2); }
.flegal > span { margin-right: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ftop { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 16px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark); font-weight: 600; font-size: .88rem; transition: border-color .3s, background-color .3s; }
.ftop:hover { border-color: var(--lime); background: rgba(201,230,77,.07); }
.ftop__ball { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); overflow: hidden; }
.ftop__ball::before { content: "↑"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-weight: 700; transition: transform .45s var(--ease); }
.ftop:hover .ftop__ball::before { animation: upArrow .6s var(--ease); }
@keyframes upArrow { 45% { transform: translateY(-120%); } 46% { transform: translateY(120%); } 100% { transform: none; } }

.fcta { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.fcta__main { min-width: 0; }
.fcta__p { margin-top: 26px; }

/* ==========================================================================
   Motion initial states
   ========================================================================== */
.motion .line__in { transform: translateY(105%); }
.motion .fade:not(.in) { opacity: 0; transform: translateY(26px); }
.motion .fade { transition: opacity .9s var(--ease), transform 1s var(--ease); }
.motion .reveal-img { clip-path: inset(100% 0 0 0 round var(--r-lg)); transition: clip-path 1.3s var(--ease); }
.motion .reveal-img img { transform: scale(1.18); transition: transform 1.6s var(--ease); }
.motion .reveal-img.in { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.motion .reveal-img.in img { transform: none; }
.motion .mark:not(.in):not(.mark--dark) { background-size: 0% 30%; }
.motion .mark--dark:not(.in) { background-size: 0% 100%; }
.motion .mark--dark { transition: background-size 1s var(--ease) .4s; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w__in { display: inline-block; }
.split em .w { padding-right: .08em; margin-right: -.08em; } /* room for italic overhang */
.motion .split:not(.in) .w__in { transform: translateY(115%); }
.motion .split .w__in { transition: transform 1s var(--ease); transition-delay: calc(var(--wi, 0) * .04s); }
/* Final CTA — a focus point: three rings lock onto the ball as it scrolls in */
.ffocus { position: relative; justify-self: center; display: grid; place-items: center; width: min(100%, 340px); aspect-ratio: 1; }
.ffocus__ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(247,245,239,.18); transition: transform 1.4s var(--ease), opacity 1s; }
.ffocus__ring--3 { inset: 0; }
.ffocus__ring--2 { inset: 17%; border-color: rgba(90,135,181,.65); transition-delay: .15s; }
.ffocus__ring--1 { inset: 31%; border: 2px solid var(--orange); transition-delay: .3s; }
.motion .fcta:not(.in) .ffocus__ring { opacity: 0; transform: scale(1.5); }
.ffocus__ticks { position: absolute; inset: 0; width: 100%; height: 100%; }
.ffocus__ticks path { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ffocus .ffocus__ball { position: relative; width: 24%; height: auto; aspect-ratio: 1; }
.ffocus__k { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--on-dark-2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1320px) {
  .nav__links a { padding-inline: 11px; }
  .nav__menu-t { display: none; }
  .nav__menu { padding: 0 5px; }
}
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .lv__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .proof__grid { grid-template-columns: 1fr; }

}
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .menu__inner { grid-template-columns: 1fr; align-items: start; }
  .menu__card { justify-self: start; }


  .xpb__head, .xpb__grid { grid-template-columns: 1fr; }
  .meet__grid { grid-template-columns: 1fr; }
  .meet__side { max-width: 460px; width: 100%; margin-inline: auto; }

  .lv__head, .lv__grid { grid-template-columns: 1fr; }
  .lv__swipe { display: block; }



  .proof__head { grid-template-columns: 1fr; }
  .lb__btn { top: auto; bottom: -66px; transform: none; }
  .lb__btn--prev { left: calc(50% - 60px); }
  .lb__btn--next { right: calc(50% - 60px); }
  .lb__img { max-height: calc(100svh - 230px); }

  /* booking — one column: the panel, then the request sheet */
  .bk__grid { grid-template-columns: 1fr; }
  .bk__panel { position: relative; top: auto; }

  .fcta { grid-template-columns: 1fr; }
  .ffocus { justify-self: start; width: min(60%, 280px); margin-bottom: 26px; }
  .flink { padding: 9px 0; }
  .fcol { gap: 0; }
  .flegal .ulink { padding-block: 12px; }
  .foot__top { grid-template-columns: 1fr 1fr 1fr; }
  .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  :root { --nav-h: 104px; }
  .nav__barwrap { padding-top: 8px; }
  .nav__bar { height: 60px; padding-right: 7px; }
  .nav.is-solid .nav__bar { height: 58px; }
  .nav__menu { padding: 0 4px; }
  .nav__menu-t { display: none; }
  .menu__facts { grid-template-columns: 1fr 1fr 1fr; }
  .logo { padding: 4px 8px; }
  .logo__name > span { font-size: 1rem; }
  .logo__tag { gap: 5px; font-size: .5rem; letter-spacing: .1em; }
  .nav .btn--sm > span:first-child { display: none; }
  .nav .btn--sm { padding: 4px; }


  .xpb { border-radius: 32px; margin-inline: 0; }
  .xpb__row { grid-template-columns: 2.2em minmax(0, 1fr); }
  .xpb__d { grid-column: 2; justify-self: start; text-align: left; }
  .xpb__t { font-size: 13vw; }
  .xpb__t--range { font-size: 9.4vw; }
  .sb__flaps span { width: 70px; font-size: 3.6rem; border-radius: 10px; }
  .xpb__flaps span { width: 64px; }

  .meet__ball { right: auto; left: -6px; top: -26px; width: 56px; height: 56px; }
  .meet__cols { grid-template-columns: 1fr; }
  .meet__ctas .btn { width: 100%; justify-content: space-between; }

  /* levels — three compact tabs, then the court, then the card */
  .lv__rail { gap: 6px; }
  .lv__line { left: 20px; right: calc((100% - 18px) / 4 - 20px); top: 19px; }
  .lv__tab { grid-template-columns: 1fr; row-gap: 4px; padding-right: 4px; }
  .lv__tab-n { grid-row: auto; width: 40px; height: 40px; margin-bottom: 4px; }
  .lv__tab-k { font-size: .58rem; letter-spacing: .1em; }
  .lv__tab b { font-size: .9rem; }
  .lv__board { padding: 16px 12px; }
  .tc__court { box-shadow: 0 0 0 5px rgba(247,245,239,.04), 0 16px 30px rgba(0,0,0,.25); }
  .tc__pl { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .tc__pl b { bottom: calc(100% + 4px); padding: 1px 5px; font-size: .58rem; }
  .tc__dp i { left: -16px; top: -16px; width: 32px; height: 32px; }
  .tc__dp-t { left: 14px; bottom: 12px; padding: 3px 7px; font-size: .62rem; }
  .tc__ball { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .tc__zl { font-size: .58rem; letter-spacing: .08em; }
  .lv__cap { margin-top: 40px; padding-top: 12px; }
  .lv__photo { aspect-ratio: 16 / 9; }
  .lv__book { white-space: nowrap; }



  /* results + gallery */
  .pm__big { padding-right: 70px; }
  .pq-row { grid-template-columns: 1fr; }
  .gal__bar { display: none; }
  .gal__btn { width: 44px; height: 44px; }
  .gal__it, .gal__it--w { width: 78vw; }
  .gal__it--t { width: 62vw; }
  .gal__item .media { height: min(100vw, 400px); }

  /* booking */
  .bk__panel, .rq { border-radius: 26px; }
  .rq__sec { padding-left: 46px; }
  .rq__mk { width: 32px; height: 32px; top: -3px; }
  .rq__sec::before { left: 15px; top: 36px; }
  .chip-opt span { padding: 0 14px; }
  .field-row { grid-template-columns: 1fr; }

  .fcta__btns .btn { width: 100%; justify-content: space-between; }
  .fcta__creds { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fcta__creds span + span::before { display: none; }
  .foot__top { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .foot__top > .fcol:last-child { grid-column: 1 / -1; }
  .ffacts li { font-size: .92rem; }
  .btn { white-space: normal; line-height: 1.25; }
  .nav .btn--sm { white-space: nowrap; }
  .flegal > span { width: 100%; }
}
/* phones / small tablets in landscape: copy beside the viewfinder */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  :root { --nav-h: 96px; }
  .nav__ticker { display: none; }
  .nav.is-solid { transform: none; }
  .hero { padding-top: calc(var(--nav-h) + 8px); }
  .menu__inner { padding-top: calc(var(--nav-h) + 4px); }
}
@media (max-width: 380px) {
  .nav .logo { min-height: 44px; }
  .nav__barwrap { padding-inline: 10px; }
  .nav__bar { gap: 8px; padding-left: 8px; }
  .nav .logo { padding-inline: 6px 0; }
  .nav .logo__name > span { font-size: .92rem; }
  .nav .logo__tag { font-size: .48rem; letter-spacing: .08em; }
  .nav__right { gap: 6px; }
  .lv__tab-k { display: none; }
}
@media (max-width: 340px) {
  .nav .logo__tag { display: none; }
  .nav .logo__court { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* ==========================================================================
   COACH MARK — section additions
   02 credibility rows · 03 the coach card photo slot · 04 program accents ·
   07 Coaching journey · 08 Why train with Mark · 10 the final CTA mark
   ========================================================================== */

/* 02 — the SILVER row reads as metal; the "~" tile is narrow */
.xpb__row--silver .xpb__t { background: linear-gradient(180deg, #A7AEB5 0%, #5E6670 55%, #8D959D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xpb__row--silver .xpb__i { color: var(--silver-ink); }
.xpb__row--silver .xpb__d::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--silver); box-shadow: 0 0 0 3px rgba(190,196,202,.35); vertical-align: middle; }

/* 03 — the coach card photo slot */
.ccard__clip video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ccard__clip::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(16,36,58,.7)); }
.ccard__play { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgba(16,36,58,.66); color: var(--on-dark); font-weight: 700; font-size: .84rem; box-shadow: inset 0 0 0 1px rgba(247,245,239,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s, color .3s, transform .4s var(--ease); }
.ccard__play-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--ink); transition: background-color .3s, color .3s; }
.ccard__play svg { width: 13px; height: 13px; fill: currentColor; }
.ccard__play:hover, .ccard__play:focus-visible { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
.ccard__play:hover .ccard__play-ic, .ccard__play:focus-visible .ccard__play-ic { background: var(--ink); color: var(--lime); }
.ccard__seal { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 5px rgba(90,135,181,.14); }

/* 04 — accents move performance blue → lime → desert gold */
.lv { --acc: var(--court); --acc-ink: var(--blue); --acc-lt: var(--court-lt); --acc-rgb: 79,138,106; }
.lv[data-lv="0"] { --acc: #A8C23A; --acc-ink: #556B10; --acc-lt: var(--lime); --acc-rgb: 168,194,58; --lvp: 0; }
.lv[data-lv="1"] { --acc: var(--court); --acc-ink: var(--teal-ink); --acc-lt: var(--teal-lt); --acc-rgb: 79,138,106; --lvp: .3333; }
.lv[data-lv="2"] { --acc: var(--community); --acc-ink: var(--blue); --acc-lt: var(--orange-lt); --acc-rgb: 90,135,181; --lvp: .6667; }
.lv[data-lv="3"] { --acc: var(--ink); --acc-ink: var(--ink); --acc-lt: var(--sand); --acc-rgb: 24,50,72; --lvp: 1; }
.lv[data-lv="3"] .tc__kz { fill: rgba(201,230,77,.2); }
.lv[data-lv="3"] .lv__z--target { opacity: .55; }
.lv__line i { background: linear-gradient(90deg, #A8C23A, var(--court), var(--community), var(--ink)); }
.lv[data-lv="0"] .tc__kz { fill: rgba(201,230,77,.28); }
.lv__photo img { object-position: 50% 35%; }
.lv__photo { background: radial-gradient(70% 90% at 80% 10%, rgba(var(--acc-rgb), .45), transparent 70%), linear-gradient(150deg, #24435E, var(--ink)); transition: background .6s; }
.lv__ph { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--on-dark); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(247,245,239,.07) calc(25% - 1px) 25%); opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.lv__ph.is-on { opacity: 1; transform: none; }
.lv__ph svg { width: clamp(54px, 6vw, 80px); height: auto; aspect-ratio: 1; padding: 14px; border-radius: 50%; background: rgba(247,245,239,.08); box-shadow: 0 0 0 1px rgba(247,245,239,.18); fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lv__ph small { font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }

/* ==========================================================================
   07 — COACHING JOURNEY (navy panel · copy + year list left; right, a
   journey card: split-flap year, a court-line timeline with four stops)
   ========================================================================== */
.tn { position: relative; margin-inline: clamp(0px, 1.2vw, 18px); padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 9vw, 130px); overflow: hidden; border-radius: 48px; background: radial-gradient(40% 50% at 82% 30%, rgba(190,196,202,.16), transparent 70%), radial-gradient(40% 45% at 0% 100%, rgba(90,135,181,.14), transparent 70%), var(--ink); color: var(--on-dark); }
.tn__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.tn .h2 em { color: var(--silver); }
.tn__lede { margin-top: 24px; max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--on-dark-2); }
.tn__list { margin-top: 28px; border-top: 1px solid var(--line-dark); }
.tn__list li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-weight: 700; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); }
.tn__li-k { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.tn__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.tn__link { color: var(--on-dark); }

.tn__card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 3vw, 44px); border-radius: 32px; background: linear-gradient(160deg, #1F3D57 0%, #193449 55%, #132A3E 100%); box-shadow: 0 50px 100px rgba(0,0,0,.4), inset 0 0 0 1px rgba(190,196,202,.24); }
.tn__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(228,231,234,.1) 46%, transparent 60%); transform: translateX(-70%); transition: transform 2.2s var(--ease) .5s; }
.tn__card.in::before { transform: translateX(70%); }
.tn__geo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .13; pointer-events: none; }
.tn__geo path { fill: none; stroke: var(--silver-lt); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.motion .tn__card:not(.in) .tn__geo path { stroke-dashoffset: 1; }
.tn__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tn__k { font-weight: 900; font-stretch: 75%; font-size: clamp(1.7rem, 1rem + 1.6vw, 2.6rem); line-height: 1; letter-spacing: .2em; color: var(--silver-lt); }
.tn__tag { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(190,196,202,.3); font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.tn__num { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(22px, 2.4vw, 34px); }
.tn__flaps span { width: clamp(54px, 5.2vw, 92px); font-size: clamp(2.8rem, 1.5rem + 3.4vw, 5.8rem); background: linear-gradient(180deg, #23415C 0 50%, #1B354D 50% 100%); color: #EEF1F3; }
.tn__flaps span { color: #F1F3F5; }
.tn__flaps span:last-child { color: var(--lime); text-shadow: 0 0 30px rgba(201,230,77,.25); }
.tn__place { display: grid; gap: 4px; padding-bottom: 6px; }
.tn__place span { font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.tn__place b { font-weight: 900; font-stretch: 75%; font-size: clamp(1.8rem, 1rem + 2vw, 3rem); line-height: 1; text-transform: uppercase; color: var(--silver-lt); }
.tn__word { margin-top: clamp(8px, 1vw, 14px); font-weight: 900; font-stretch: 72%; font-size: clamp(3.6rem, 1.6rem + 6vw, 8.6rem); line-height: .86; letter-spacing: .02em; text-transform: uppercase; background: linear-gradient(180deg, #F7F5EF 0%, #C9E64D 45%, #A6D3B8 70%, #4F8A6A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .tn__card:not(.in) .tn__word { opacity: 0; transform: translateY(24px); }
.tn__word { transition: opacity 1s var(--ease) .5s, transform 1.2s var(--ease) .5s; }
.tn__podium { display: block; width: 100%; max-width: 470px; height: auto; margin-top: clamp(18px, 2vw, 30px); overflow: visible; }
.tn__b { fill: rgba(247,245,239,.05); stroke: rgba(247,245,239,.22); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1s var(--ease); }
.tn__b--2 { fill: var(--silver); stroke: #E9ECEF; }
.tn__b--1 { transition-delay: .25s; }
.tn__b--2 { transition-delay: .4s; }
.tn__b--3 { transition-delay: .32s; }
.motion .tn__card:not(.in) .tn__b { transform: scaleY(0); }
.tn__bn { font: 800 30px var(--f-sans); fill: rgba(247,245,239,.32); transition: opacity .6s .9s; }
.tn__bn--2 { fill: var(--ink); }
.motion .tn__card:not(.in) .tn__bn { opacity: 0; }
.tn__base { fill: none; stroke: var(--silver); stroke-width: 2; stroke-linecap: round; }
.tn__arc { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .8s; }
.motion .tn__card:not(.in) .tn__arc { stroke-dashoffset: 1; }
.tn__medal { transform-box: fill-box; transform-origin: 50% 0; transition: opacity .5s 1.2s, transform 1.5s cubic-bezier(.3, 1.5, .5, 1) 1.2s; }
.motion .tn__card:not(.in) .tn__medal { opacity: 0; transform: translateY(-34px) rotate(-14deg); }
.tn__ribbon { fill: none; stroke: var(--court); stroke-width: 7; stroke-linecap: round; }
.tn__medal circle { fill: var(--silver); stroke: #EEF1F3; stroke-width: 2; }
.tn__medal .tn__medal-in { fill: none; stroke: rgba(24,50,72,.32); stroke-width: 1.5; }
.tn__medal text { font: 800 20px var(--f-sans); fill: var(--ink); }
.tn__foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.tn__foot i { width: 8px; height: 8px; border-radius: 50%; background: var(--silver); box-shadow: 0 0 0 3px rgba(190,196,202,.22); }

/* ==========================================================================
   08 — WHY TRAIN WITH MARK (a photo frame + one focus line ·
   six grounded reasons on an editorial grid)
   ========================================================================== */
.why { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.why__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.why__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.why__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 80px); margin-top: clamp(36px, 4vw, 60px); align-items: start; }
.why__clip { width: 100%; max-width: 360px; }
.why__poster { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; box-shadow: 0 40px 80px rgba(24,50,72,.25); }
.why__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.why__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,36,58,.25), transparent 30%, transparent 70%, rgba(16,36,58,.45)); }
.why__poster:hover img, .why__poster:focus-visible img { transform: scale(1.04); }
.why__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 10px rgba(201,230,77,.25); transition: transform .5s var(--ease); }
.why__play svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.why__poster:hover .why__play { transform: scale(1.08); }
.motion .why__play { animation: playPulse 2.6s var(--ease) infinite; }
@keyframes playPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,230,77,.45); } 60% { box-shadow: 0 0 0 18px rgba(201,230,77,0); } }
.why__dur { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(16,36,58,.72); color: var(--on-dark); font-family: var(--f-mono); font-size: .68rem; font-weight: 600; }
.why__quote { margin: 20px 0 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); }
.why__quote p:first-child { font-weight: 900; font-stretch: 75%; font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.9rem); line-height: 1; text-transform: uppercase; color: var(--ink); }
.why__quote .why__quote-k { margin-top: 10px; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; color: var(--orange-ink); }
.why__quote cite { font-style: normal; }
.why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.why__it { position: relative; padding: clamp(18px, 2vw, 30px) clamp(12px, 1.6vw, 24px) clamp(20px, 2.2vw, 32px) 0; border-bottom: 1px solid var(--line); }
.why__it:nth-child(even) { padding-left: clamp(18px, 2vw, 34px); border-left: 1px solid var(--line); }
.why__it::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--court); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.why__it:hover::after { transform: scaleX(1); }
.why__n { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; color: var(--teal-ink); }
.why__it h3 { margin-top: 8px; font-weight: 900; font-stretch: 78%; font-size: clamp(1.5rem, 1rem + 1.3vw, 2.3rem); line-height: .98; text-transform: uppercase; transition: transform .6s var(--ease); }
.why__it:hover h3 { transform: translateX(6px); }
.why__it p { margin-top: 10px; max-width: 26em; color: var(--ink-2); }
.why__it--silver h3 { background: linear-gradient(180deg, #8D959D 0%, #4E5660 60%, #7A828B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why__it--silver .why__n { color: var(--silver-ink); }

.motion .yt__wall.in li:nth-child(6) { transition-delay: .3s; }

/* 08 — the media strip's featured video tile */
.gal__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 8px rgba(201,230,77,.25); transition: transform .5s var(--ease); }
.gal__play svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.gal__item--vid:hover .gal__play, .gal__item--vid:focus-visible .gal__play { transform: scale(1.1); }
.pm__ribbon { stroke: var(--court-lt); }

.bk .rq { box-shadow: 0 40px 90px rgba(0,0,0,.35); }

/* 10 — the final CTA focus point holds Mark (photo slot / monogram) */
.ffocus__ring--1 { inset: 27%; }
.ffocus__face { position: relative; width: 42%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 4px var(--ink), 0 20px 40px rgba(0,0,0,.35); transition: transform 1.2s var(--ease) .2s, opacity 1s .2s; }
.ffocus__face img { width: 100%; height: 100%; object-fit: cover; }
.ffocus__face { display: grid; place-items: center; background: radial-gradient(70% 70% at 30% 25%, #2D5672, var(--ink)); }
.ffocus__face b { font-weight: 900; font-stretch: 78%; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); letter-spacing: .02em; color: var(--on-dark); }
.motion .fcta:not(.in) .ffocus__face { opacity: 0; transform: scale(.8); }
.ffocus .ffocus__ball { position: absolute; right: 22%; top: 20%; width: 13%; height: auto; aspect-ratio: 1; }

/* ==========================================================================
   SHARED — icon sprite + placeholder art for photo slots
   Every empty slot is a court-green card with a line icon and a clear
   "Photo coming · …" label (from data-ph). Add an <img> and remove
   "is-empty" to swap in a real photo.
   ========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.media.is-empty { background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), rgba(247,245,239,.08) calc(33.333% - 1px) 33.333%), radial-gradient(80% 70% at 78% 12%, rgba(201,230,77,.2), transparent 60%), linear-gradient(155deg, #4F8A6A 0%, #2F5E62 48%, #183248 100%); }
.media.is-empty::after { background: rgba(247,245,239,.92); color: var(--ink); }
.ph-art { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.ph-art svg { width: clamp(56px, 22%, 92px); height: auto; aspect-ratio: 1; padding: clamp(12px, 3%, 20px); border-radius: 50%; background: rgba(16,36,58,.28); box-shadow: 0 0 0 1px rgba(247,245,239,.2), 0 0 0 12px rgba(247,245,239,.04); fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-art--mono b { display: grid; place-items: center; width: clamp(84px, 30%, 128px); aspect-ratio: 1; border-radius: 50%; background: rgba(16,36,58,.35); box-shadow: 0 0 0 1px rgba(247,245,239,.22), 0 0 0 14px rgba(247,245,239,.04); font-weight: 900; font-stretch: 78%; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); letter-spacing: .02em; color: var(--on-dark); }
.gal__item--ph .media { background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), rgba(247,245,239,.08) calc(33.333% - 1px) 33.333%), linear-gradient(155deg, #4F8A6A 0%, #2F5E62 48%, #183248 100%); outline: 1.5px dashed rgba(247,245,239,.32); outline-offset: -10px; }
.pt__f { cursor: pointer; }
.pt__f:focus-visible { outline: 3px solid var(--court); outline-offset: 2px; }

/* ==========================================================================
   01 — HERO (new)
   Warm-white court stage: copy left, a large photo frame right with
   youth / adults / Des Moines tags, one ball path, and a credential strip.
   On load: 1 name → 2 headline → 3 court lines + frame → 4 the ball crosses
   once and lands (tags pop on) → 5 strip → 6 CTAs.
   ========================================================================== */
.mh { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(28px, 3.4vw, 60px)) 0 clamp(44px, 4.4vw, 72px); background: radial-gradient(42% 58% at 80% 40%, rgba(79,138,106,.2), transparent 70%), radial-gradient(30% 40% at 0% 100%, rgba(90,135,181,.16), transparent 70%), radial-gradient(24% 30% at 46% 6%, rgba(201,230,77,.16), transparent 70%), var(--bg); }
.mh :focus-visible { outline-color: var(--court); }
.mh__court { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mh__court path { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .09; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }
.mh__court .mh__court-k { stroke: var(--teal); opacity: .3; transition-delay: .4s; }
.motion .mh:not(.is-court) .mh__court path { stroke-dashoffset: 1; }

.mh__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.mh__copy { position: relative; z-index: 2; min-width: 0; }
.mh__name { display: inline-flex; overflow: hidden; padding: 2px 0 4px; }
.mh__name-in { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-stretch: 80%; font-size: clamp(1rem, .9rem + .35vw, 1.25rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); transition: transform 1s var(--ease); }
.mh__name-in::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.mh__name-k { color: var(--teal-ink); }
.motion .mh:not(.is-name) .mh__name-in { transform: translateY(115%); }
.mh__role { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mh__role i { width: 24px; height: 1.5px; background: var(--teal); }
.mh__title { margin-top: clamp(16px, 1.8vw, 26px); font-weight: 800; font-stretch: 92%; font-size: clamp(2.5rem, .9rem + 4.6vw, 6.3rem); line-height: .98; letter-spacing: -.048em; color: var(--ink); }
.mh__title em { color: var(--teal-ink); font-size: 1.03em; letter-spacing: -.03em; padding-right: .04em; }
.mh__hl { position: relative; display: inline-block; z-index: 0; }
.mh__hl::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: .1em; bottom: .06em; height: .3em; border-radius: .1em; background: var(--lime); transform-origin: left; transition: transform 1s var(--ease) .9s; }
.motion .mh:not(.is-court) .mh__hl::before { transform: scaleX(0); }
.mh__dot { position: relative; display: inline-block; width: .17em; height: .17em; margin-left: .06em; border-radius: 50%; background: var(--teal); vertical-align: baseline; }
.mh__lede { margin-top: clamp(20px, 2vw, 30px); max-width: 34em; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.56; color: var(--ink-2); }
.mh__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.4vw, 34px); }
.mh__path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.mh__path-k { margin-right: 4px; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mh__path a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(24,50,72,.18); font-weight: 600; font-size: .92rem; transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--ease); }
.mh__path a::after { content: "→"; font-size: .85em; opacity: .55; transition: transform .35s var(--ease); }
.mh__path a:hover, .mh__path a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--on-dark); transform: translateY(-2px); }
.mh__path a:hover::after { transform: translateX(3px); opacity: 1; }
.motion .mh__ctas, .motion .mh__path { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.motion .mh.is-cta .mh__ctas, .motion .mh.is-cta .mh__path { opacity: 1; transform: none; }
.motion .mh.is-cta .mh__path { transition-delay: .12s; }

.mh__visual { position: relative; z-index: 1; justify-self: end; width: min(100%, 520px); }
.mh__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 32px; box-shadow: 0 50px 100px rgba(24,50,72,.28), 0 0 0 1px rgba(24,50,72,.08); clip-path: inset(0 round 32px); transition: clip-path 1.4s var(--ease); }
.motion .mh:not(.is-court) .mh__frame { clip-path: inset(100% 0 0 0 round 32px); }
.mh__frame img { object-position: 50% 30%; }
.mh__art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.mh__art path, .mh__art circle { fill: none; vector-effect: non-scaling-stroke; }
.mh__art-court { stroke: rgba(247,245,239,.34); stroke-width: 2; }
.mh__art-net { stroke: var(--on-dark); stroke-width: 3; stroke-dasharray: 5 4; opacity: .7; }
.mh__art-arc { stroke: var(--lime); stroke-width: 2; stroke-dasharray: 3 9; opacity: .6; }
.mh__art .mh__art-ball { fill: var(--lime); }
.media:not(.is-empty) .mh__art { display: none; }
.mh__corners { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.mh__corners path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .8s; }
.motion .mh:not(.is-court) .mh__corners path { stroke-dashoffset: 1; }
.mh__flight { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mh__flight path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .3; vector-effect: non-scaling-stroke; transition: opacity 1.2s ease .3s; }
.motion .mh:not(.is-fly) .mh__flight path { stroke-dashoffset: 1; }
.mh.is-landed .mh__flight path { opacity: .16; }
.mh__ball { left: 76%; top: 22%; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-shadow: inset -5px -7px 11px rgba(24,50,72,.3), 0 10px 22px rgba(16,36,58,.3); pointer-events: none; }
.mh__ball .pball__holes { background-size: 10px 10px; }
.motion .mh:not(.is-fly) .mh__ball { opacity: 0; }
.mh__land { position: absolute; z-index: 4; left: 76%; top: 22%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid var(--lime); box-shadow: 0 0 0 8px rgba(201,230,77,.18); pointer-events: none; transition: transform .9s var(--ease), opacity .5s; }
.motion .mh:not(.is-landed) .mh__land { opacity: 0; transform: scale(2.4); }
.mh__tag, .mh__pin { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 18px; background: var(--card); color: var(--ink); font-weight: 800; font-size: .95rem; line-height: 1.1; box-shadow: 0 22px 44px rgba(24,50,72,.2), 0 0 0 1px rgba(24,50,72,.06); transition: opacity .7s var(--ease), transform .9s var(--ease), box-shadow .3s; }
.mh__tag svg, .mh__pin svg { width: 40px; height: 40px; flex: none; padding: 8px; border-radius: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh__tag small, .mh__pin small { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mh__tag--youth { left: -16%; top: 52%; transform: rotate(-4deg); }
.mh__tag--youth svg { background: var(--lime); color: var(--ink); }
.mh__tag--adult { right: -8%; bottom: 9%; transform: rotate(3deg); }
.mh__tag--adult svg { background: var(--ink); color: var(--lime); }
.mh__pin { left: -6%; top: 9%; padding-right: 14px; background: var(--ink); color: var(--on-dark); transform: rotate(-2deg); }
.mh__pin svg { background: var(--community); color: #fff; }
.mh__pin small { color: var(--on-dark-2); }
.mh__tag:hover, .mh__pin:hover { transform: rotate(0) translateY(-3px); }
.motion .mh:not(.is-tags) :is(.mh__tag, .mh__pin) { opacity: 0; transform: translateY(18px) scale(.9); }
.motion .mh.is-tags .mh__tag--adult { transition-delay: .12s; }
.motion .mh.is-tags .mh__pin { transition-delay: .24s; }

/* the credential strip — four proofs on one court line that draws in */
.mh__strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 4.4vw, 72px); border-top: 1px solid var(--line); }
.mh__strip::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--ink), var(--teal), var(--lime)); transform-origin: left; transition: transform 1.4s var(--ease); }
.mh__strip li { display: flex; align-items: center; gap: 14px; padding: clamp(16px, 1.8vw, 24px) clamp(10px, 1.4vw, 22px) 0 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.mh__strip li + li { padding-left: clamp(12px, 1.6vw, 26px); border-left: 1px solid var(--line); }
.mh__strip svg { width: 44px; height: 44px; flex: none; padding: 9px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh__strip li:first-child svg { background: var(--ink); stroke: var(--lime); box-shadow: none; }
.mh__strip span { display: grid; gap: 2px; font-weight: 900; font-stretch: 80%; font-size: clamp(1.05rem, .8rem + .7vw, 1.6rem); line-height: 1.05; text-transform: uppercase; }
.mh__strip small { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; font-stretch: 100%; letter-spacing: .12em; color: var(--ink-3); }
.motion .mh:not(.is-strip) .mh__strip::before { transform: scaleX(0); }
.motion .mh:not(.is-strip) .mh__strip li { opacity: 0; transform: translateY(14px); }
.motion .mh.is-strip .mh__strip li:nth-child(2) { transition-delay: .1s; }
.motion .mh.is-strip .mh__strip li:nth-child(3) { transition-delay: .2s; }
.motion .mh.is-strip .mh__strip li:nth-child(4) { transition-delay: .3s; }

/* 02 — credibility: the navy panel sits right under the light hero */
.xpb { margin-top: clamp(0px, 1.2vw, 18px); }
.xpb__row--blue .xpb__t { -webkit-text-stroke-color: var(--orange-lt); }
.xpb__row--blue .xpb__i { color: var(--orange-lt); }

/* ==========================================================================
   05 — YOUTH PICKLEBALL (new)
   A · the pathway on a court-green panel: the line extends with scroll and
       the milestones light up (vertical on phones).
   B · the program selector: six touchpoints → photo slot, copy, program tag
       and the pathway stages it supports. The CTA stays put.
   ========================================================================== */
.yx { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.yx__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.yx__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }

.yp { --yp: 1; position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(36px, 4vw, 60px); padding: clamp(24px, 3vw, 46px) clamp(18px, 3vw, 46px) clamp(30px, 3.4vw, 52px); border-radius: 36px; background: radial-gradient(50% 70% at 100% 0%, rgba(201,230,77,.2), transparent 70%), linear-gradient(170deg, #568F70, #437A5D 70%, #3B6E53); color: var(--on-dark); box-shadow: 0 40px 90px rgba(24,50,72,.2); }
.yp__court { position: absolute; z-index: -1; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); pointer-events: none; }
.yp__court path { fill: none; stroke: rgba(247,245,239,.22); stroke-width: 2; vector-effect: non-scaling-stroke; }
.yp__k { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.yp__k i { flex: 1; max-width: 120px; height: 1.5px; background: rgba(201,230,77,.5); }
.yp__body { position: relative; margin-top: clamp(22px, 2.4vw, 34px); }
.yp__track { position: absolute; left: 10%; right: 10%; top: 28px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(247,245,239,.22); }
.yp__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--lime); transform-origin: left; transform: scaleX(var(--yp)); transition: transform .35s linear; }
.yp__ball { position: absolute; left: calc(var(--yp) * 100%); top: 50%; z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(201,230,77,.3), 0 6px 14px rgba(16,36,58,.3); transition: left .35s linear; }
.yp__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.yp__st { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.yp__node { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: #3B6E53; box-shadow: 0 0 0 2px rgba(247,245,239,.35); transition: background-color .5s, box-shadow .5s, transform .6s var(--ease); }
.yp__node svg { width: 26px; height: 26px; fill: none; stroke: var(--on-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.yp__v { font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.yp__st b { font-weight: 900; font-stretch: 80%; font-size: clamp(1.15rem, .9rem + .7vw, 1.65rem); line-height: 1; text-transform: uppercase; }
.yp__st small { max-width: 15em; font-size: .9rem; line-height: 1.4; color: var(--on-dark-2); }
.yp__st > :not(.yp__node) { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.yp__st.is-on .yp__node { background: var(--lime); box-shadow: 0 0 0 2px var(--lime), 0 10px 24px rgba(16,36,58,.25); transform: scale(1.04); }
.yp__st.is-on .yp__node svg { stroke: var(--ink); }
.motion .yp__st:not(.is-on) > :not(.yp__node) { opacity: .4; transform: translateY(8px); }
.yp__st.is-hl .yp__node { box-shadow: 0 0 0 2px var(--lime), 0 0 0 9px rgba(247,245,239,.28); }
.yp__st.is-hl b { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.yx__prog { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.yx__side { min-width: 0; }
.yx__k { margin-bottom: 14px; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.yx__tabs { display: grid; gap: 8px; }
.yx__tab { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--ease); }
.yx__tab svg { width: 44px; height: 44px; flex: none; padding: 9px; border-radius: 12px; background: rgba(227,216,200,.55); fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background-color .35s, stroke .35s; }
.yx__tab span { display: grid; gap: 1px; font-weight: 800; font-size: clamp(1rem, .95rem + .2vw, 1.12rem); line-height: 1.15; }
.yx__tab small { font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }
.yx__tab:hover { box-shadow: inset 0 0 0 1.5px var(--teal); transform: translateX(4px); }
.yx__tab.is-on { background: var(--ink); color: var(--on-dark); box-shadow: 0 18px 40px rgba(24,50,72,.22); transform: translateX(8px); }
.yx__tab.is-on svg { background: var(--lime); stroke: var(--ink); }
.yx__tab.is-on small { color: var(--lime); }

.yx__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media copy" "media cta"; grid-template-rows: 1fr auto; gap: 0 clamp(18px, 2.4vw, 36px); padding: clamp(12px, 1.4vw, 18px); border-radius: 32px; background: var(--card); box-shadow: 0 30px 70px rgba(24,50,72,.12), inset 0 4px 0 var(--lime); }
.yx__media { grid-area: media; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--ink); }
.yx__fig { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .5s, clip-path 1s var(--ease); }
.yx__fig.is-on { opacity: 1; clip-path: inset(0); }
.yx__fig img { object-position: 50% 30%; }
.yx__tag { position: absolute; z-index: 3; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(16,36,58,.78); color: var(--on-dark); font-size: .8rem; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.yx__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(201,230,77,.3); }
.yx__tag-n { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.yx__tag.is-swap { animation: tagIn .5s var(--ease) both; }
.yx__copy { grid-area: copy; display: flex; flex-direction: column; padding: clamp(10px, 1.6vw, 24px) clamp(4px, .8vw, 10px) 0 0; }
.yx__pk { display: flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.yx__pk::before { content: ""; width: 18px; height: 2px; background: var(--teal); }
.yx__t { margin-top: 14px; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.7rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.yx__p { margin-top: 14px; max-width: 30em; color: var(--ink-2); }
.yx__pane + .yx__pane { margin-top: 26px; }
.yx.is-js .yx__pane + .yx__pane { margin-top: 0; }
.motion .yx__pane:not([hidden]) > * { animation: tagIn .55s var(--ease) both; }
.motion .yx__pane:not([hidden]) > :nth-child(2) { animation-delay: .05s; }
.motion .yx__pane:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
.yx__builds { display: grid; gap: 4px; margin-top: auto; padding-top: 22px; }
.yx:not(.is-js) .yx__builds { display: none; }
.yx__builds-k { font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.yx__builds-v { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.yx__builds-v::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--teal-ink); }
.yx__cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 22px 0 6px; }

/* ==========================================================================
   06 — COMMUNITY IMPACT (new)
   Soft-sand stage. Desktop: a winding line through six nodes + a navy
   detail panel. Phones / no JS: a vertical line of nodes, details inline.
   ========================================================================== */
.cm { position: relative; padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 9vw, 130px); background: radial-gradient(40% 50% at 100% 0%, rgba(90,135,181,.16), transparent 70%), linear-gradient(180deg, var(--bg) 0, #EFE8DC 18%, #EAE1D2 100%); }
.cm .seam__tag { background: #F3EDE3; }
.cm__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.cm__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.cm__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); margin-top: clamp(36px, 4vw, 64px); align-items: center; }
.cm__map { position: relative; min-width: 0; }
.cm__svg { display: none; }
.cm__nodes { --cp: 1; position: relative; display: grid; gap: 14px; }
.cm__nodes::before, .cm__nodes::after { content: ""; position: absolute; left: 28px; top: 28px; bottom: 28px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: rgba(24,50,72,.14); }
.cm__nodes::after { background: linear-gradient(180deg, var(--teal), var(--community)); transform-origin: top; transform: scaleY(var(--cp)); transition: transform .35s linear; }
.cm__node { position: relative; z-index: 1; }
.cm__btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border-radius: 999px; }
.cm__dot { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px rgba(24,50,72,.16), 0 8px 18px rgba(24,50,72,.08); transition: background-color .5s, box-shadow .5s, transform .6s var(--ease); }
.cm__dot svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.cm__lbl { display: grid; gap: 2px; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.cm__n { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; color: var(--teal-ink); }
.cm__lbl b { font-weight: 900; font-stretch: 80%; font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); line-height: 1; text-transform: uppercase; white-space: nowrap; transition: color .3s; }
.cm__node.is-on .cm__dot { background: var(--ink); box-shadow: 0 0 0 4px rgba(79,138,106,.25), 0 12px 24px rgba(24,50,72,.2); }
.cm__node.is-on .cm__dot svg { stroke: var(--lime); }
.motion .cm__node:not(.is-on) .cm__lbl { opacity: .42; }
.cm__node:is(.is-sel, .is-open) .cm__dot { background: var(--lime); box-shadow: 0 0 0 6px rgba(90,135,181,.3), 0 12px 24px rgba(24,50,72,.2); transform: scale(1.08); }
.cm__node:is(.is-sel, .is-open) .cm__dot svg { stroke: var(--ink); }
.cm__btn:hover .cm__dot { transform: scale(1.08); }
.cm__btn:hover .cm__lbl b { color: var(--teal-ink); }
.cm__detail { margin: 12px 0 6px 70px; padding: 14px; border-radius: 24px; background: var(--ink); color: var(--on-dark); box-shadow: 0 24px 50px rgba(24,50,72,.2); }
.cm.is-js .cm__node:not(.is-open) .cm__detail { display: none; }
.cm.is-js .cm__node.is-open .cm__detail { animation: tagIn .5s var(--ease) both; }
.cm__fig { aspect-ratio: 16 / 10; border-radius: 16px; }
.cm__fact { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(201,230,77,.12); box-shadow: inset 0 0 0 1px rgba(201,230,77,.4); font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.cm__fact::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.cm__t { margin-top: 12px; font-size: clamp(1.35rem, 1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.cm__p { margin-top: 10px; color: var(--on-dark-2); }
.cm__panel { display: none; }
.cm__card { animation: cardIn .7s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
.cm__card > .cm__fig { animation: figIn .9s var(--ease) both; }
@keyframes figIn { from { clip-path: inset(0 0 100% 0 round 18px); } to { clip-path: inset(0 round 18px); } }

@media (min-width: 1024px) {
  .cm.is-js .cm__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cm.is-js .cm__map { width: 100%; max-width: 640px; aspect-ratio: 600 / 640; justify-self: center; }
  .cm.is-js .cm__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .cm__svg path { fill: none; stroke-linecap: round; }
  .cm__base { stroke: rgba(24,50,72,.2); stroke-width: 2; stroke-dasharray: 2 9; }
  .cm__run { stroke: var(--teal); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear; }
  .cm.is-js .cm__nodes { position: absolute; inset: 0; display: block; }
  .cm.is-js .cm__nodes::before, .cm.is-js .cm__nodes::after { display: none; }
  .cm.is-js .cm__node { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
  .cm.is-js .cm__btn { position: absolute; left: -28px; top: -28px; width: auto; padding-right: 10px; }
  .cm.is-js .cm__node--l .cm__btn { left: auto; right: -28px; flex-direction: row-reverse; text-align: right; padding: 0 0 0 10px; }
  .cm.is-js .cm__detail { display: none; }
  .cm.is-js .cm__panel { position: relative; display: block; min-height: 520px; padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px) clamp(24px, 2.4vw, 34px); border-radius: 32px; background: radial-gradient(70% 50% at 100% 0%, rgba(90,135,181,.35), transparent 70%), var(--ink); color: var(--on-dark); box-shadow: 0 40px 90px rgba(24,50,72,.25); }
  .cm__panel::before { content: attr(data-n); position: absolute; z-index: 3; right: 26px; top: 26px; padding: 5px 10px; border-radius: 999px; background: rgba(16,36,58,.75); font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; color: var(--lime); }
  .cm__panel .cm__fig { aspect-ratio: 16 / 11; border-radius: 18px; }
  .cm__panel .cm__fact, .cm__panel .cm__t, .cm__panel .cm__p { margin-left: 8px; margin-right: 8px; }
  .cm__panel .cm__t { font-size: clamp(1.6rem, 1rem + 1.2vw, 2.4rem); }
}

/* ==========================================================================
   07 — COACHING JOURNEY: the four-stop timeline + palette touches
   ========================================================================== */
.tn { background: radial-gradient(40% 50% at 82% 30%, rgba(79,138,106,.28), transparent 70%), radial-gradient(40% 45% at 0% 100%, rgba(90,135,181,.2), transparent 70%), var(--ink); }
.tn .h2 em { color: var(--teal-lt); }
.tn__li-k { color: var(--lime); }
.tn__card { box-shadow: 0 50px 100px rgba(0,0,0,.35), inset 0 0 0 1px rgba(166,211,184,.22); }
.tn__k { color: var(--lime); }
.tn__place b { color: var(--teal-lt); }
.tn__foot i { background: var(--lime); box-shadow: 0 0 0 3px rgba(201,230,77,.22); }
.tn__geo path { stroke: var(--teal-lt); }
.tn__tl { display: block; width: 100%; max-width: 480px; height: auto; margin-top: clamp(18px, 2vw, 30px); overflow: visible; }
.tn__tl .tn__base { stroke: var(--teal-lt); }
.tn__stop { transform-box: fill-box; transform-origin: 50% 70%; transition: opacity .6s var(--ease), transform .9s cubic-bezier(.3, 1.5, .5, 1); }
.tn__stop:nth-of-type(2) { transition-delay: .2s; }
.tn__stop:nth-of-type(3) { transition-delay: .4s; }
.tn__stop:nth-of-type(4) { transition-delay: .6s; }
.motion .tn__card:not(.in) .tn__stop { opacity: 0; transform: translateY(14px) scale(.7); }
.tn__stop circle { fill: var(--ink); stroke: var(--teal-lt); stroke-width: 2.5; }
.tn__stop text { font: 800 16px var(--f-sans); fill: var(--on-dark); }
.tn__stop .tn__sl { font: 600 9.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--on-dark-2); }
.tn__stop--now circle { fill: var(--lime); stroke: rgba(201,230,77,.4); stroke-width: 8; }
.tn__stop--now text:not(.tn__sl) { fill: var(--lime); }

/* 08 — why: palette touches */
.why__poster { box-shadow: 0 40px 80px rgba(24,50,72,.22); }
.why__poster::after { display: none; }
.why__quote { border-left-color: var(--teal); }
.why__quote .why__quote-k { color: var(--teal-ink); }
.why__it--blue h3 { color: var(--blue); }
.why__it--blue .why__n { color: var(--blue); }

/* ==========================================================================
   10 — BOOKING / PLAYER PATH (new)
   Navy stage. Left: the court journey (Player → Coaching type → Session
   request → Connect with Mark) fills in with the answers while one ball
   travels the line. Right: the guided form — one step per panel, a step
   bar, back / next, per-step validation and an in-place success state.
   ========================================================================== */
.bp { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 110px) 0 clamp(80px, 9vw, 130px); background: radial-gradient(40% 40% at 92% 8%, rgba(79,138,106,.3), transparent 70%), radial-gradient(40% 40% at 0% 92%, rgba(90,135,181,.2), transparent 70%), var(--ink); color: var(--on-dark); }
.bp :focus-visible { outline-color: var(--lime); }
.bp .bq :focus-visible { outline-color: var(--court); }
.bp__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bp__lines path { fill: none; stroke: rgba(247,245,239,.06); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.bp .wrap { position: relative; }
.bp__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(40px, 6vw, 110px); align-items: end; }
.bp .h2 { font-size: clamp(2.4rem, 1.1rem + 4vw, 5.6rem); }
.bp .h2 em { color: var(--lime); }
.bp__lede { max-width: 28em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--on-dark-2); }
.bp__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(14px, 2vw, 32px); margin-top: clamp(32px, 4vw, 56px); align-items: start; }

.bj { --jp: 0; position: sticky; top: calc(var(--nav-h) - 20px); padding: clamp(22px, 2.6vw, 36px); border-radius: 28px; background: rgba(247,245,239,.05); box-shadow: inset 0 0 0 1px var(--line-dark); }
.bj__k { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.bj__list { position: relative; display: grid; margin-top: 24px; }
.bj__list::before, .bj__list::after { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 2px; margin-left: -1px; background: var(--line-dark); }
.bj__list::after { background: linear-gradient(180deg, var(--teal-lt), var(--lime)); transform-origin: top; transform: scaleY(var(--jp)); transition: transform .8s var(--ease); }
.bj__st { position: relative; z-index: 1; display: grid; gap: 3px; padding: 0 0 28px 54px; min-height: 36px; }
.bj__st:last-child { padding-bottom: 0; }
.bj__node { position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); border: 2px solid rgba(247,245,239,.25); transition: background-color .45s, border-color .45s, box-shadow .45s; }
.bj__node i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .5s var(--ease); }
.bj__st b { font-weight: 800; font-stretch: 85%; font-size: 1.15rem; letter-spacing: .01em; line-height: 1.15; text-transform: uppercase; }
.bj__v { font-size: .92rem; line-height: 1.4; color: var(--on-dark-2); transition: color .4s; }
.bj__st.has-v .bj__v { color: var(--lime); font-weight: 600; }
.bj__st.is-on .bj__node { border-color: var(--lime); box-shadow: 0 0 0 6px rgba(201,230,77,.16); }
.bj__st.is-done .bj__node { background: var(--lime); border-color: var(--lime); }
.bj__st.is-done .bj__node i { transform: none; }
.bj .bj__ball { left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; z-index: 3; pointer-events: none; box-shadow: inset -3px -4px 7px rgba(24,50,72,.3), 0 0 0 4px rgba(201,230,77,.22), 0 6px 14px rgba(0,0,0,.3); transition: transform .8s var(--ease); }
.bj__ball .pball__holes { display: none; }
.bj__note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .9rem; color: var(--on-dark-2); }

.bq { position: relative; padding: clamp(22px, 3.2vw, 48px); border-radius: 32px; background: var(--card); color: var(--ink); box-shadow: 0 40px 90px rgba(0,0,0,.35); }
.bq__top { display: grid; gap: 14px; }
.bq__count { font-weight: 700; font-size: .98rem; color: var(--ink-2); }
.bq__count b { color: var(--ink); }
.bq:not(.is-js) .bq__top { display: none; }
.bq__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bq__bar li { height: 6px; border-radius: 6px; background: rgba(24,50,72,.1); transition: background-color .5s; }
.bq__bar li.is-done { background: var(--teal); }
.bq__bar li.is-on { background: linear-gradient(90deg, var(--teal), var(--lime)); }
.bq__steps { margin-top: clamp(20px, 2.4vw, 32px); }
.bq__step + .bq__step { margin-top: 36px; }
.bq.is-js .bq__step + .bq__step { margin-top: 0; }
.bq__step.is-enter { animation: stepIn .55s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 30px)); } }
.bq__legend { float: left; display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; font-weight: 900; font-stretch: 82%; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.bq__legend + * { clear: both; }
.bq__mk { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ink); color: var(--lime); font-family: var(--f-mono); font-size: .74rem; font-weight: 600; font-stretch: 100%; }
.opts { display: grid; gap: 10px; padding-top: 22px; }
.opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opts--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field__k { font-size: 1rem; font-weight: 600; }
.field__k + .chips { margin-top: 10px; }
.opt-card { position: relative; display: block; }
.opt-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt-card > span { position: relative; display: grid; align-content: start; justify-items: start; gap: 6px; height: 100%; min-height: 108px; padding: 16px; border-radius: 20px; border: 1.5px solid rgba(24,50,72,.16); background: rgba(227,216,200,.28); transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease), box-shadow .3s; }
.opt-card svg { width: 36px; height: 36px; margin-bottom: 6px; fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.opt-card b { padding-right: 22px; font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.opt-card small { font-size: .86rem; line-height: 1.35; color: var(--ink-3); transition: color .3s; }
.opt-card > span::after { content: ""; position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(24,50,72,.22); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.opt-card:hover > span { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(24,50,72,.1); }
.opt-card input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.opt-card input:checked + span svg { stroke: var(--lime); }
.opt-card input:checked + span small { color: var(--on-dark-2); }
.opt-card input:checked + span::after { background: var(--lime); border-color: var(--lime); box-shadow: inset 0 0 0 4px var(--ink); }
.opt-card input:focus-visible + span { outline: 3px solid var(--court); outline-offset: 2px; }
.opt-card.is-flash > span { animation: chipFlash 1.4s var(--ease); }
.bq__err { margin-top: 10px; font-size: .92rem; font-weight: 600; color: var(--error); }
.bq__err:empty { margin: 0; }
.bq__hint { margin-top: 12px; font-size: .92rem; color: var(--ink-3); }
.bq__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: clamp(26px, 3vw, 38px); padding-top: 20px; border-top: 1px solid var(--line); }
.bq__back { margin-right: auto; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(24,50,72,.2); font-weight: 600; transition: background-color .3s, color .3s, border-color .3s; }
.bq__back:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.bq__submit { min-height: 60px; }
.bq__done { padding: clamp(10px, 2vw, 30px) 0; text-align: center; outline: none; }
.bq__done.is-enter { animation: cardIn .7s var(--ease) both; }
.bq__done .bq__done-ball { position: relative; display: block; width: 70px; height: 70px; margin: 0 auto; box-shadow: inset -9px -12px 18px rgba(24,50,72,.3), 0 0 0 10px var(--card), 0 0 0 12px var(--teal); }
.motion .bq__done .bq__done-ball { animation: bob 3.4s ease-in-out infinite; }
.bq__done-k { margin-top: 26px; font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.bq__done-t { margin-top: 8px; font-weight: 900; font-stretch: 80%; font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; text-transform: uppercase; }
.bq__done-p { max-width: 32em; margin: 14px auto 0; color: var(--ink-2); }
.bq__done-p[data-note]::after { content: attr(data-note); display: block; margin-top: 8px; font-size: .86rem; color: var(--ink-3); }
.bq__sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; max-width: 560px; margin: 22px auto 0; text-align: left; }
.bq__sum div { padding: 10px 14px; border-radius: 14px; background: rgba(227,216,200,.35); }
.bq__sum dt { font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bq__sum dd { margin: 2px 0 0; font-weight: 700; }
.bq__again { margin-top: 20px; color: var(--ink); }

/* ---------- Coach Mark — responsive ---------- */
@media (max-width: 1360px) {
  .nav__links a { padding-inline: 10px; font-size: .9rem; }
}
@media (max-width: 1260px) {
  .nav__links { display: none; }
}
@media (max-width: 1180px) {
  .mh__tag--youth { left: -6%; }
  .mh__tag--adult { right: -2%; }
  .mh__pin { left: 2%; }
  .opts--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yx__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "copy" "cta"; grid-template-rows: auto; }
  .yx__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 1023px) {
  .mh__grid { grid-template-columns: minmax(0, 1fr); }
  .mh__visual { justify-self: center; width: min(100%, 560px); margin-top: 8px; }
  .mh__frame { aspect-ratio: 1; }
  .mh__tag--youth { left: 12px; top: auto; bottom: 18%; }
  .mh__tag--adult { right: 12px; bottom: -18px; }
  .mh__pin { left: 12px; top: 14px; }
  .mh__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh__strip li:nth-child(3) { padding-left: 0; border-left: 0; }
  .mh__strip li:nth-child(n+3) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

  .yx__head, .cm__head, .bp__head, .tn__grid, .why__head { grid-template-columns: minmax(0, 1fr); }

  /* youth pathway — vertical */
  .yp__track { left: 28px; right: auto; top: 28px; bottom: 40px; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
  .yp__fill { transform-origin: top; transform: scaleY(var(--yp)); }
  .yp__ball { left: 50%; top: calc(var(--yp) * 100%); transition: top .35s linear; }
  .yp__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .yp__st { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; justify-items: start; text-align: left; }
  .yp__node { grid-row: 1 / 4; margin: 0; }
  .yp__st > :not(.yp__node) { grid-column: 2; }

  /* youth selector — a swipeable row of program labels */
  .yx__prog { grid-template-columns: minmax(0, 1fr); }
  .yx__tabs { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .yx__tabs::-webkit-scrollbar { display: none; }
  .yx__tab { flex: none; scroll-snap-align: start; }
  .yx__tab.is-on, .yx__tab:hover { transform: none; }

  .tn__card { max-width: 620px; }
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__clip { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: end; max-width: 620px; }
  .why__quote { margin: 0; }

  /* booking — the journey becomes a compact strip above the form */
  .bp__grid { grid-template-columns: minmax(0, 1fr); }
  .bj { position: relative; top: auto; padding: 18px 18px 16px; }
  .bj__list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
  .bj__list::before, .bj__list::after { left: 18px; right: calc(25% - 18px); top: 18px; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .bj__list::after { transform-origin: left; transform: scaleX(var(--jp)); }
  .bj__st { padding: 46px 8px 0 0; }
  .bj__node { top: 0; }
  .bj__st b { font-size: .82rem; }
  .bj__v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; }
  .bj__note { display: none; }
}
@media (max-width: 700px) {
  .mh { padding-top: calc(var(--nav-h) + 14px); }
  .mh__title { font-size: clamp(2.2rem, 10.4vw, 3.4rem); }
  .mh__ctas { flex-direction: column; }
  .mh__ctas .btn { width: 100%; justify-content: space-between; }
  .mh__frame { aspect-ratio: 4 / 4.2; border-radius: 24px; clip-path: inset(0 round 24px); }
  .motion .mh:not(.is-court) .mh__frame { clip-path: inset(100% 0 0 0 round 24px); }
  .mh__tag, .mh__pin { font-size: .84rem; padding: 5px 12px 5px 5px; border-radius: 14px; }
  .mh__tag svg, .mh__pin svg { width: 32px; height: 32px; padding: 6px; border-radius: 10px; }
  .mh__strip span { font-size: 1rem; }
  .mh__strip svg { width: 38px; height: 38px; padding: 8px; }
  .mh__strip li { gap: 10px; }

  .xpb__flaps span { font-size: 3.4rem; }

  .yp { border-radius: 26px; }
  .yp__st small { font-size: .86rem; }
  .yx__stage { border-radius: 24px; }
  .yx__cta .btn { width: 100%; justify-content: space-between; }

  .cm__lbl b { white-space: normal; }
  .cm__detail { margin-left: 0; }

  .tn { border-radius: 32px; margin-inline: 0; }
  .tn__list li { grid-template-columns: 1fr; gap: 2px; }
  .tn__flaps span { width: 58px; font-size: 3rem; }
  .tn__word { font-size: 17vw; }
  .why__clip { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; }
  .why__quote { padding-left: 14px; }
  .why__quote p:first-child { font-size: 1.6rem; }
  .why__list { grid-template-columns: minmax(0, 1fr); }
  .why__it:nth-child(even) { padding-left: 0; border-left: 0; }

  .bq { border-radius: 24px; }
  .opts--4, .opts--5, .opts--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-card > span { min-height: 96px; padding: 14px; }
  .opt-card svg { width: 30px; height: 30px; }
  .bq__nav .btn { flex: 1; justify-content: space-between; }
  .bq__back { min-height: 58px; }
  .bj__st b { font-size: .7rem; letter-spacing: 0; }
  .bj__v { display: none; }
  .ffocus__face { width: 46%; }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  .mh__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .mh__frame { aspect-ratio: 1; max-height: 78svh; }
  .mh__title { font-size: clamp(2rem, 5.4vw, 3.2rem); }
  .mh__ctas { flex-direction: row; }
  .mh__ctas .btn { width: auto; }
}
@media (max-width: 480px) {
  /* phones: the wordmark keeps COACH MARK BOEHM + PICKLEBALL COACHING; IFP CERTIFIED returns on wider screens */
  .nav .logo__tag i, .nav .logo__cred { display: none; }
  .nav .logo { --fp: 70%; }
}

/* fine-tuning */
.pm__chat { width: clamp(56px, 5vw, 76px); height: auto; aspect-ratio: 1; padding: 12px; border-radius: 50%; background: rgba(201,230,77,.1); box-shadow: inset 0 0 0 1px rgba(201,230,77,.35); fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
  .cm.is-js .cm__lbl { padding: 6px 12px 7px; border-radius: 14px; background: rgba(236,228,215,.94); box-shadow: 0 0 0 1px rgba(24,50,72,.06); }
}
@media (max-width: 380px) {
  .nav .logo__name small { display: none; }
}

/* ==========================================================================
   PHOTOS — Mark's own photos + labelled stock
   Real photos are cropped onto Mark; every stock image carries a visible
   "Stock photo" badge so it's never read as Mark or his players.
   ========================================================================== */
.credit { position: absolute; z-index: 3; right: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(16,36,58,.74); color: var(--on-dark); font-family: var(--f-mono); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.yx__fig .credit { top: auto; bottom: 14px; right: 14px; }

/* hero — Mark (left) and his player (centre) stay in frame */
.mh__frame img { object-position: 4% 50%; }
.mh__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(16,36,58,.1), transparent 30%, transparent 70%, rgba(16,36,58,.45)); }
.mh__cap { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(247,245,239,.92); color: var(--ink); font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mh__cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.mh__tag--youth { left: auto; right: -10%; top: 40%; transform: rotate(3deg); }

/* about card + programs + why + final CTA crops */
.ccard__photo img { object-position: 20% 30%; }
.lv__photo img[data-i="0"] { object-position: 28% 40%; }
.lv__photo img[data-i="1"] { object-position: 50% 40%; }
.lv__photo img[data-i="2"] { object-position: 50% 40%; }
.lv__photo img[data-i="3"] { object-position: 50% 42%; }
.lv__credit { display: inline-flex; align-items: center; gap: 8px; }
.lv__credit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.why__poster img { object-position: 4% 40%; }
.ffocus__face img { object-position: 21% 22%; transform: scale(1.9); transform-origin: 24% 18%; }

/* ==========================================================================
   09 — GALLERY (new · photo-led bento grid)
   Filters with live counts re-deal the grid; tiles reveal in a stagger;
   a "Coach Mark" tag marks his own photos; the lightbox has a counter,
   arrows, keys and swipe. Testimonials stay a marked placeholder.
   ========================================================================== */
.gx { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.gx__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.gx__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.gx__lede b { color: var(--ink); }
.gx__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: clamp(30px, 3.4vw, 48px); }
.gx__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gx__f { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: .95rem; transition: background-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease); }
.gx__f:hover { box-shadow: inset 0 0 0 1.5px var(--teal); transform: translateY(-2px); }
.gx__f.is-on { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.gx__n { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: rgba(24,50,72,.08); font-family: var(--f-mono); font-size: .68rem; font-weight: 600; }
.gx__f.is-on .gx__n { background: var(--lime); color: var(--ink); }
.gx__f:focus-visible { outline: 3px solid var(--court); outline-offset: 2px; }
.gx__count { font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.gx__count b { color: var(--ink); }

.gx__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 15.5vw, 260px); grid-auto-flow: dense; gap: clamp(10px, 1vw, 16px); margin-top: 22px; }
.gx__it { position: relative; min-width: 0; }
.gx__it--xl { grid-column: span 2; grid-row: span 2; }
.gx__it--wide { grid-column: span 2; }
.gx__it--tall { grid-row: span 2; }
.gx__btn { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 22px; background: var(--ink); text-align: left; isolation: isolate; }
.gx__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gx__btn::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(16,36,58,.82)); opacity: .9; transition: opacity .4s; }
.gx__btn:hover img, .gx__btn:focus-visible img { transform: scale(1.06); }
.gx__btn:hover::after { opacity: 1; }
.gx__btn:focus-visible { outline: 3px solid var(--court); outline-offset: 3px; }
.gx__cap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 3px; color: var(--on-dark); transition: transform .5s var(--ease); }
.gx__cap b { font-weight: 800; font-size: clamp(.98rem, .9rem + .3vw, 1.2rem); line-height: 1.15; }
.gx__it--xl .gx__cap b { font-size: clamp(1.3rem, 1rem + 1vw, 2rem); letter-spacing: -.02em; }
.gx__cap small { font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.gx__btn:hover .gx__cap { transform: translateY(-4px); }
.gx__real { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.gx__real::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.motion .gx__it { transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.motion .gx__grid:not(.in) .gx__it { opacity: 0; transform: translateY(34px) scale(.97); }
.motion .gx__grid.is-deal .gx__it:not([hidden]) { animation: dealIn .7s var(--ease) var(--d, 0s) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }

.gx__tq { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: clamp(26px, 3vw, 40px); padding: clamp(18px, 2.2vw, 28px); border-radius: 26px; background: var(--sand); }
.gx__tq > div { flex: 1 1 320px; min-width: 0; }
.gx__tq-ic { width: 56px; height: 56px; flex: none; padding: 12px; border-radius: 50%; background: var(--ink); fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gx__tq-k { font-family: var(--f-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.gx__tq-t { margin-top: 4px; font-weight: 900; font-stretch: 80%; font-size: clamp(1.25rem, 1rem + .8vw, 1.8rem); line-height: 1.05; text-transform: uppercase; }
.gx__tq-p { margin-top: 6px; font-size: .95rem; color: var(--ink-2); }

.lb__n { position: absolute; left: 0; top: 12px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--lime); }
.lb__img.is-swap { animation: lbSwap .5s var(--ease); }
@keyframes lbSwap { from { opacity: 0; transform: scale(.98); } }

@media (max-width: 1180px) {
  .mh__tag--youth { right: -2%; }
}
@media (max-width: 1023px) {
  .mh__tag--youth { left: auto; right: 12px; top: 38%; bottom: auto; }
  .gx__head { grid-template-columns: minmax(0, 1fr); }
  .gx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 24vw, 220px); }
}
@media (max-width: 700px) {
  .mh__cap { left: 12px; bottom: 12px; font-size: .56rem; }
  .gx__filters { flex-wrap: nowrap; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; }
  .gx__filters::-webkit-scrollbar { display: none; }
  .gx__f { flex: none; }
  .gx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
  .gx__btn { border-radius: 16px; }
  .gx__cap { left: 12px; right: 12px; bottom: 10px; }
  .gx__cap b { font-size: .9rem; }
  .gx__it--xl .gx__cap b { font-size: 1.15rem; }
  .gx__real { font-size: .52rem; padding: 4px 9px 4px 7px; }
  .credit { font-size: .5rem; right: 8px; top: 8px; }
  .gx__tq-btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   05 WELLNESS & EXERCISE — exercise is part of every pickleball session.
   Copy + a three-step session flow, beside a mosaic of Mark's own
   group-session photos (one tall, two stacked).
   ========================================================================== */
.wl { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.wl__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.wl__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.wl__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); margin-top: clamp(36px, 4vw, 60px); align-items: start; }

.wl__badge { display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border-radius: 999px; background: var(--ink); color: var(--on-dark); }
.wl__badge svg { width: 42px; height: 42px; flex: none; padding: 9px; border-radius: 50%; background: var(--lime); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wl__badge span { display: grid; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.wl__badge small { font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }

.wl__steps { margin-top: clamp(22px, 2.4vw, 34px); border-top: 1px solid var(--line); }
.wl__st { position: relative; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 14px; padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--line); }
.wl__st::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--court); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.wl__st:hover::after { transform: scaleX(1); }
.wl__n { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--teal-ink); }
.wl__st h3 { font-weight: 900; font-stretch: 78%; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); line-height: 1; text-transform: uppercase; transition: transform .6s var(--ease); }
.wl__st:hover h3 { transform: translateX(6px); }
.wl__st p { margin-top: 8px; max-width: 30em; color: var(--ink-2); }
.wl__note { margin-top: 22px; padding: 2px 0 2px 16px; border-left: 2px solid var(--blue); font-size: .98rem; color: var(--ink-2); }
.wl__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }

.wl__media { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 8fr); gap: clamp(10px, 1vw, 16px); }
.wl__fig { margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: var(--shadow); }
.wl__fig--a { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.wl__fig:hover img { transform: scale(1.04); }
.wl__cap { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--lime); color: var(--ink); font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.wl__cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* Why pickleball is good for you — eight benefit cards, Mark's own line, a short disclaimer */
.wb { margin-top: clamp(56px, 7vw, 110px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.wb__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.wb__k { font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.wb__t { font-weight: 900; font-stretch: 78%; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); line-height: 1; text-transform: uppercase; }
.wb__t em { font-family: var(--f-serif); font-weight: 400; font-stretch: normal; text-transform: none; color: var(--teal-ink); }
.wb__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); margin-top: clamp(22px, 2.4vw, 34px); }
.wb__it { padding: clamp(18px, 1.8vw, 26px); border-radius: 22px; border: 1.5px solid var(--line); background: var(--card); transition: transform .5s var(--ease), border-color .5s var(--ease); }
.wb__it:hover { transform: translateY(-4px); border-color: var(--teal); }
.wb__it svg { width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: rgba(79,138,106,.14); fill: none; stroke: var(--teal-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb__it h3 { margin-top: 16px; font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.wb__it p { margin-top: 6px; font-size: .95rem; color: var(--ink-2); }
.wb__it--lime { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.wb__it--lime svg { background: var(--lime); stroke: var(--ink); }
.wb__it--lime p { color: var(--on-dark-2); }
.wb__quote { margin: clamp(26px, 3vw, 44px) 0 0; padding-left: clamp(16px, 2vw, 28px); border-left: 3px solid var(--lime); }
.wb__quote p { max-width: 34em; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); line-height: 1.35; }
.wb__quote figcaption { margin-top: 10px; font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.wb__fine { margin-top: 18px; font-size: .85rem; color: var(--ink-3); }

@media (max-width: 1023px) {
  .wl__head, .wl__grid { grid-template-columns: minmax(0, 1fr); }
  .wl__media { order: -1; }
  .wb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .wb__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .wl__badge { padding-right: 16px; }
  .wl__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl__fig { border-radius: 16px; }
  .wl__fig--a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .wl__cap { left: 10px; bottom: 10px; font-size: .52rem; padding: 5px 9px 5px 7px; }
  .wl__ctas .btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   11 RATES + CAMPS & CLINICS — two hourly rates set by the court (facility
   booked by Mark vs. a free court the player has), then a board of upcoming
   camps / clinics with a spots-left bar, or an empty state until dates exist.
   ========================================================================== */
.rt { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 9vw, 130px); }
.rt__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 110px); align-items: end; }
.rt__lede { max-width: 30em; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }

.rt__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(36px, 4vw, 60px); }
.rt__card { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--card); }
.rt__card--dark { border-color: var(--ink); background: var(--ink); color: var(--on-dark); box-shadow: 0 30px 60px rgba(24,50,72,.22); }
.rt__k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.rt__card--dark .rt__k { color: var(--lime); }
.rt__k svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: rgba(79,138,106,.14); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt__card--dark .rt__k svg { background: rgba(201,230,77,.14); }
.rt__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: clamp(18px, 2vw, 28px); }
.rt__price b { font-weight: 900; font-stretch: 75%; font-size: clamp(3.4rem, 2rem + 4vw, 6rem); line-height: .9; letter-spacing: -.02em; }
.rt__price span { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); color: var(--ink-2); }
.rt__card--dark .rt__price span { color: var(--on-dark-2); }
.rt__p { margin-top: 14px; max-width: 30em; color: var(--ink-2); }
.rt__card--dark .rt__p { color: var(--on-dark-2); }
.rt__inc { display: grid; gap: 8px; margin: 20px 0 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.rt__card--dark .rt__inc { border-color: var(--line-dark); }
.rt__inc li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .98rem; }
.rt__inc li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(79,138,106,.16); }
.rt__card--dark .rt__inc li::before { background: var(--lime); box-shadow: 0 0 0 4px rgba(201,230,77,.16); }
.rt__card .btn--block { margin-top: auto; }
.rt__fine { margin-top: 16px; font-size: .95rem; color: var(--ink-3); }

.rt__camps { margin-top: clamp(40px, 5vw, 72px); padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--sand); }
.rt__camps-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.rt__ck { font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.rt__ct { margin-top: 4px; font-weight: 900; font-stretch: 78%; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); line-height: 1; text-transform: uppercase; }
.rt__cp { max-width: 28em; font-size: .95rem; color: var(--ink-2); }
.rt__how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.rt__how li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid var(--line); }
.rt__how span { font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; color: var(--teal-ink); }
.rt__how b { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.rt__how small { font-size: .9rem; color: var(--ink-2); }
.rt__list { display: grid; gap: 10px; margin-top: 22px; }

.rt__ev { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 220px) auto; align-items: center; gap: 14px clamp(16px, 2vw, 32px); padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--card); }
.rt__date { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 16px; background: var(--ink); color: var(--on-dark); line-height: 1; }
.rt__date b { font-weight: 900; font-stretch: 78%; font-size: 1.8rem; }
.rt__date span { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.rt__name { font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.rt__meta { margin-top: 4px; font-size: .9rem; color: var(--ink-3); }
.rt__spots p { font-size: .9rem; color: var(--ink-2); }
.rt__spots b { font-weight: 800; color: var(--ink); }
.rt__bar { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(24,50,72,.1); overflow: hidden; }
.rt__bar i { display: block; height: 100%; width: calc(var(--taken, 0) / var(--max, 1) * 100%); border-radius: inherit; background: var(--court); }
.rt__go { font-weight: 700; font-size: .95rem; color: var(--teal-ink); white-space: nowrap; }
.rt__go::after { content: " →"; }

.rt__empty { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: clamp(16px, 2vw, 24px); border-radius: 20px; border: 1.5px dashed rgba(24,50,72,.22); background: var(--card); }
.rt__empty > svg { width: 52px; height: 52px; flex: none; padding: 11px; border-radius: 50%; background: var(--ink); fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rt__empty > div { flex: 1 1 280px; min-width: 0; }
.rt__empty-t { font-weight: 800; font-size: 1.1rem; }
.rt__empty-p { margin-top: 4px; font-size: .95rem; color: var(--ink-2); }

@media (max-width: 1023px) {
  .rt__head { grid-template-columns: minmax(0, 1fr); }
  .rt__ev { grid-template-columns: auto minmax(0, 1fr); }
  .rt__spots, .rt__go { grid-column: 2; }
}
@media (max-width: 700px) {
  .rt__grid, .rt__how { grid-template-columns: minmax(0, 1fr); }
  .rt__empty .btn { width: 100%; justify-content: space-between; }
  .rt__date { width: 58px; height: 58px; }
}