/* ==========================================================================
   RacFit — Design System
   Brand blue #295DA8 (foundation) · Optic Yellow #D9F53C (accent)
   Deep #102748 · Recessed surface #1B4380 · Mid #1E4A89 · Ink #102748
   ========================================================================== */

:root{
  --brand-deep:#102748;
  --brand:#295DA8;
  --brand-surface:#1B4380;
  --brand-mid:#1E4A89;
  --ink:#102748;
  --optic:#D9F53C;
  --optic-2:#C2DE2A;
  --paper:#F4F4EF;
  --paper-2:#EAEAE2;
  --white:#ffffff;
  --line:rgba(255,255,255,.14);
  --line-dk:rgba(16,39,72,.14);
  --muted:#fff;
  --muted-dk:rgba(16,39,72,.72);
  --maxw:1340px;
  --pad:clamp(20px,5vw,60px);
  --r:4px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--brand);
  color:var(--white);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--optic);color:var(--brand-deep)}
[id]{scroll-margin-top:132px}

/* ---------- Type ---------- */
/* Anton's caps fill 0.858em - almost the whole em box - so line-height here is
   very nearly cap-to-cap. At .86 every display heading's lines touched exactly,
   and anything lower overlapped them. line-height:1 leaves an ink gap of 17% of
   cap height, measured off the Nike Pegasus reference, and now applies to every
   display size (d1/d2/d3) site-wide. */
.disp{
  font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  font-weight:400;text-transform:uppercase;
  line-height:1;letter-spacing:-.005em;
  overflow-wrap:break-word;
}
.d1{font-size:clamp(3.1rem,10.5vw,9rem)}
.d2{font-size:clamp(2.3rem,6.4vw,5rem)}
.d3{font-size:clamp(1.75rem,3.8vw,2.9rem)}
.d4{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.eyebrow{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:1.06rem;
  color:var(--optic);margin:0 0 18px;display:block;
}
.eyebrow.on-light{color:var(--brand-mid)}

/* Audience designations - "Adult Tennis", "Junior Programs", "For Businesses".
   These answer "is this section for me?", so unlike a plain section label they
   have to survive a scan: heavier, roughly double the size, flagged with a rule. */
.eyebrow.aud{
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-weight:700;letter-spacing:.1em;line-height:1.05;
  margin-bottom:16px;
}
.eyebrow.aud::before{
  content:"";display:block;width:64px;height:6px;border-radius:3px;
  background:var(--optic);margin-bottom:20px;
}
.eyebrow.aud.on-light::before{background:var(--optic-2)}
@media (max-width:480px){
  .eyebrow.aud::before{width:48px;height:5px;margin-bottom:14px}
}
.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.6;color:var(--muted);max-width:62ch}
.on-light .lede,.light .lede{color:var(--muted-dk)}
.hl{color:var(--optic)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-wide{max-width:1640px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}
.sec{padding:clamp(64px,9vw,132px) 0}
.sec-sm{padding:clamp(48px,6vw,84px) 0}
.light{background:var(--paper);color:var(--ink)}
.light .lede,.light p{color:var(--muted-dk)}
.light h2,.light h3,.light h1{color:var(--ink)}
.deep{background:var(--brand-deep)}
.mid{background:var(--brand-surface)}
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.sec-head{max-width:70ch;margin-bottom:clamp(34px,4.5vw,60px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.rule{height:3px;width:64px;background:var(--optic);margin:22px 0 0}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:1rem;line-height:1;
  padding:1.15em 2em;border-radius:var(--r);
  transition:.28s var(--ease);white-space:nowrap;
  border:2px solid transparent;
}
.btn-primary{background:var(--optic);color:var(--brand-deep)}
.btn-primary:hover{background:var(--white);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn-ghost:hover{border-color:var(--optic);color:var(--optic);transform:translateY(-2px)}
.btn-dark{background:var(--brand);color:var(--white)}
.btn-dark:hover{background:var(--brand-mid);transform:translateY(-2px)}
.btn-outline-dark{border-color:rgba(16,39,72,.3);color:var(--ink)}
.btn-outline-dark:hover{border-color:var(--brand);background:var(--brand);color:var(--white);transform:translateY(-2px)}
.btn-sm{padding:.85em 1.5em;font-size:.88rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.arrow-link{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.92rem;
  color:var(--optic);transition:.25s var(--ease);
}
.arrow-link span{transition:transform .28s var(--ease)}
.arrow-link:hover span{transform:translateX(6px)}
.light .arrow-link{color:var(--brand-mid)}
.light .arrow-link:hover{color:var(--brand)}

/* ---------- Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:900;
  background:rgba(16,39,72,0);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
  padding:24px 0;
}
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,39,72,.82),rgba(16,39,72,0));pointer-events:none;transition:opacity .35s}
.hdr.solid{background:var(--brand-deep);box-shadow:0 1px 0 var(--line);padding:18px 0}
.hdr.solid::after{opacity:0}
.hdr-in{max-width:1640px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:clamp(16px,3vw,48px)}
.brand{flex:0 0 auto;display:block;padding:6px 0}
.brand img{height:clamp(37.5px,4.25vw,50px);width:auto;transition:height .35s var(--ease)}
.hdr.solid .brand img{height:clamp(34px,3.75vw,42.5px)}
.nav{display:flex;align-items:center;gap:clamp(6px,1.4vw,22px);margin-left:auto}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:.45em;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;font-size:1rem;  /* .94rem + 1px */
  padding:14px 4px;color:var(--white);transition:color .2s;
}
.nav-link:hover,.nav-item:hover .nav-link,.nav-link[aria-current]{color:var(--optic)}
.nav-link .caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.nav-item:hover .caret{transform:rotate(225deg) translateY(-2px)}
.drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  min-width:250px;background:var(--brand-deep);border:1px solid var(--line);
  border-radius:6px;padding:10px;opacity:0;visibility:hidden;
  transition:.26s var(--ease);box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.nav-item:hover .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{
  display:block;padding:11px 16px;border-radius:4px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:1rem;  /* matches .nav-link */
  color:rgba(255,255,255,.88);transition:.18s;
}
.drop a:hover{background:var(--brand-surface);color:var(--optic);padding-left:22px}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:23px;height:2px;background:#fff;transition:.3s var(--ease)}
.mnav{
  position:fixed;inset:0;z-index:950;background:var(--brand-deep);
  padding:116px var(--pad) 40px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mnav.open{transform:translateY(0)}
.mnav h4{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:1.02rem;color:var(--optic);margin:26px 0 10px}
.mnav a{display:block;padding:9px 0;font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.4rem;letter-spacing:.01em;border-bottom:1px solid var(--line)}
.mnav a:active{color:var(--optic)}

/* Mobile menu groups. Only the five top-level items show until one is tapped, so
   the menu opens as a short list rather than 21 links deep. */
.mgroup > summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;cursor:pointer;list-style:none;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:1.55rem;letter-spacing:.01em;
  border-bottom:1px solid var(--line);
}
.mgroup > summary::-webkit-details-marker{display:none}
.mgroup > summary::after{
  content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--optic);border-bottom:2px solid var(--optic);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease);
}
.mgroup[open] > summary{color:var(--optic)}
.mgroup[open] > summary::after{transform:rotate(225deg) translateY(-3px)}
.mgroup > summary:focus-visible{outline:2px solid var(--optic);outline-offset:3px}
.mgroup a{font-size:1.12rem;padding:11px 0 11px 18px;color:rgba(255,255,255,.9)}
.mgroup a:last-child{border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.mgroup > summary::after{transition:none}}
.mnav .btns{margin-top:32px}
.mclose{position:fixed;top:18px;right:var(--pad);z-index:960;width:46px;height:46px;display:none;align-items:center;justify-content:center;font-size:2rem;line-height:1}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;overflow:hidden;padding-top:clamp(180px,calc(13vh + 64px),210px)}
.hero-sm{min-height:min(66vh,620px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hero-slides .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-slides .slide.on{opacity:1}
.hero-slides .slide img{transform:scale(1.03);transition:transform 8s linear}
.hero-slides .slide.on img{transform:scale(1.11)}
@media(prefers-reduced-motion:reduce){.hero-slides .slide img,.hero-slides .slide.on img{transform:none;transition:none}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,39,72,.55) 0%,rgba(16,39,72,.25) 38%,rgba(16,39,72,.86) 82%,rgba(16,39,72,.97) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;max-width:1640px;margin:0 auto;padding:0 var(--pad) clamp(56px,7vw,104px)}
.hero .d1{margin:0 0 20px;max-width:16ch;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.hero .lede{max-width:56ch;font-weight:500}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:1.08rem;color:rgba(255,255,255,.82)}
.hero-meta span{display:flex;align-items:center;gap:.6em}
.hero-meta span::before{content:"";width:6px;height:6px;background:var(--optic);border-radius:50%;flex:0 0 auto}

/* ---------- Marquee ---------- */
.marquee{background:var(--optic);color:var(--ink);overflow:hidden;padding:15px 0;border-top:1px solid rgba(0,0,0,.08)}
.marquee-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.4rem);letter-spacing:.02em;
  padding:0 26px;display:flex;align-items:center;gap:26px;white-space:nowrap;
}
.marquee-track span::after{content:"";width:9px;height:9px;background:var(--brand-deep);border-radius:50%;flex:0 0 auto}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Pillar tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--brand-deep)}
.tiles-2{grid-template-columns:repeat(2,1fr)}

/* Social links (footer) - square outlined icon buttons */
.social{list-style:none;display:flex;gap:10px;margin:24px 0 0;padding:0}
.social a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:6px;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.social svg{width:20px;height:20px;fill:currentColor;display:block}
.social a:hover,.social a:focus-visible{background:var(--optic);border-color:var(--optic);color:var(--brand-deep)}
.tile{position:relative;overflow:hidden;min-height:clamp(400px,44vw,600px);display:flex;align-items:flex-end;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
/* Scrim only where the text sits: solid at the bottom, fully clear by 60% up,
   so the top of the photo is unfiltered. */
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(16,39,72,.96) 0%,rgba(16,39,72,.93) 34%,rgba(16,39,72,.74) 47%,rgba(16,39,72,.34) 56%,rgba(16,39,72,0) 62%);transition:.5s}
.tile:hover img{transform:scale(1.07)}
.tile:hover::after{background:linear-gradient(to top,rgba(16,39,72,.97) 0%,rgba(16,39,72,.95) 36%,rgba(16,39,72,.78) 49%,rgba(16,39,72,.38) 58%,rgba(16,39,72,0) 64%)}
.tile-in{padding:clamp(26px,3vw,44px);width:100%}
.tile h3{margin:0 0 12px;text-shadow:0 2px 18px rgba(16,39,72,.55)}
.tile p{text-shadow:0 1px 10px rgba(16,39,72,.5)}
.tile p{color:#fff;font-size:.98rem;margin-bottom:18px;max-width:40ch}
.tile-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.76rem;padding:6px 12px;border-radius:99px;
  border:1px solid rgba(255,255,255,.55);color:rgba(255,255,255,.90);
}
.chip-optic{background:var(--optic);border-color:var(--optic);color:var(--brand-deep)}
.light .chip{border-color:rgba(16,39,72,.22);color:var(--brand-surface)}

/* ---------- Split ---------- */
/* align-items:stretch so the .mid panel matches the photo's full height -
   centring it left the dark box shorter than the image with the section
   background showing above and below. The copy is still centred, now by
   the panel itself rather than by the grid. */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.split>*,.grid>*,.tiles>*,.price-grid>*,.vendor>*,.stats>*,.team-grid>*{min-width:0}
.split-media{position:relative;min-height:clamp(340px,44vw,660px);overflow:hidden;align-self:stretch}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-body{padding:clamp(40px,6vw,96px) clamp(20px,6vw,90px);
  display:flex;flex-direction:column;justify-content:center}
.split.rev .split-media{order:2}

/* ---------- Cards ---------- */
.card{
  background:var(--brand-surface);border:1px solid var(--line);border-radius:8px;
  padding:clamp(24px,2.6vw,34px);transition:.3s var(--ease);height:100%;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:rgba(217,245,60,.5)}
.card h3{margin:0 0 12px;font-size:1.15rem;font-weight:700;letter-spacing:.01em}
.card p{color:var(--muted);font-size:.97rem;flex:1}
.card .arrow-link{margin-top:18px}
.light .card{background:var(--white);border-color:var(--line-dk);box-shadow:0 1px 3px rgba(16,39,72,.05)}
.light .card p{color:var(--muted-dk)}
.light .card:hover{border-color:var(--brand-mid);box-shadow:0 18px 44px rgba(16,39,72,.1)}
.card-media{border-radius:8px;overflow:hidden;background:var(--brand-surface);height:100%;display:flex;flex-direction:column}
.card-media .ph{aspect-ratio:4/3;overflow:hidden}
.card-media .ph.square{aspect-ratio:1}
.card-media .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card-media:hover .ph img{transform:scale(1.06)}
.card-media .bd{padding:clamp(22px,2.4vw,30px);flex:1;display:flex;flex-direction:column}
.light .card-media{background:var(--white);border:1px solid var(--line-dk)}
/* logo-in-card variant */
.card-media .ph.logo{background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,40px)}
.card-media .ph.logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.card-media:hover .ph.logo img{transform:none}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.stat{background:var(--brand);padding:clamp(28px,3.4vw,48px) clamp(20px,2.4vw,32px)}
.light .stats{background:var(--line-dk)}
.light .stat{background:var(--paper)}
.stat b{display:block;font-family:"Anton",sans-serif;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--optic);margin-bottom:8px}
.light .stat b{color:var(--brand)}
.stat span{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:1.06rem;color:var(--muted)}
.light .stat span{color:var(--muted-dk)}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,26px)}
.plan{
  background:var(--white);color:var(--ink);border-radius:10px;
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;
  border:1px solid var(--line-dk);position:relative;overflow:hidden;
}
.plan.feature{background:var(--brand);color:#fff;border-color:var(--brand)}
.plan.feature .plan-price b{color:var(--optic)}
.plan.feature li{color:#fff;border-color:var(--line)}
.plan.feature p,.plan.feature .plan-init,.plan.feature .plan-price i{color:#fff}
.plan.feature .plan-init s{color:rgba(255,255,255,.78)}
.plan.feature strong{color:#fff}
.plan-flag{
  position:absolute;top:0;right:0;background:var(--optic);color:var(--brand-deep);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;padding:7px 16px;border-radius:0 10px 0 10px;
}
.plan-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:1.1rem;color:var(--brand-mid);margin-bottom:14px}
.plan.feature .plan-name{color:var(--optic)}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em;margin-bottom:6px}
.plan-price b{font-family:"Anton",sans-serif;font-size:clamp(2.4rem,4.2vw,3.5rem);line-height:1}
.plan-price i{font-style:normal;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.9rem;color:var(--muted-dk)}
.plan-init{font-size:.88rem;line-height:1.75;color:var(--muted-dk);margin-bottom:22px}
.plan-init s{color:rgba(16,39,72,.66)}
.plan ul{margin:0 0 26px;flex:1}
.plan li{
  position:relative;padding:10px 0 10px 26px;font-size:.94rem;
  border-bottom:1px solid var(--line-dk);color:var(--muted-dk);
}
.plan li::before{
  content:"";position:absolute;left:0;top:18px;width:11px;height:6px;
  border-left:2px solid var(--optic-2);border-bottom:2px solid var(--optic-2);
  transform:rotate(-45deg);
}
.plan.feature li::before{border-color:var(--optic)}
.plan li:last-of-type{border-bottom:0}

/* ---------- Vendor (food truck) ---------- */
.vendor{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,60px);align-items:center}
.vendor.rev .vendor-logo{order:2}
.vendor-logo{
  background:var(--white);border-radius:14px;padding:clamp(30px,4vw,54px);
  display:flex;align-items:center;justify-content:center;min-height:280px;
  box-shadow:0 24px 60px rgba(16,39,72,.28);
}
.vendor-logo img{max-height:200px;max-width:100%;width:auto;height:auto;object-fit:contain}
.vendor-body h3{margin-bottom:16px}
.vendor-shot{border-radius:12px;overflow:hidden;margin-top:26px;aspect-ratio:16/9}
.vendor-shot img{width:100%;height:100%;object-fit:cover}
/* product shot + on-site truck shot, side by side */
.vendor-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.vendor-gallery figure{margin:0}
.vendor-gallery .shot{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--brand-surface)}
.vendor-gallery .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* Food-truck hero: a wide, short frame crops a lot out of these photos. A taller
   frame plus almost no Ken Burns magnification shows ~25% more of each shot,
   without letterboxing. */
.hero-open{min-height:min(94vh,900px)}
.hero-open .slide img{transform:scale(1)}
.hero-open .slide.on img{transform:scale(1.035)}

/* This portrait shot puts the subject high in the frame; a centred cover crop
   cuts the top of his head off in wide containers, so anchor it higher. */
img[src$="yachties-kitchen-open-buda-tx.jpg"]{object-position:50% 30%}
/* Junior tennis hero: the default centre crop puts her face behind the headline
   once the hero stacks, so shift the crop window right and down below 700px. */
@media (max-width:700px){
  img[src$="junior-tennis-red-ball-buda-tx.jpg"]{object-position:32% 22%}
}
/* The homepage fitness tile is a narrow vertical crop; centring it cuts the
   instructor off the left edge, so pull the crop window left. */
img[src$="group-fitness-class-buda-tx.jpg"]{object-position:12% 50%}
/* Cantina hero: the default centre crop cuts the bottle wall and lighting off
   the top, which is the best part of the room. */
.hero img[src$="courtside-cantina-bar-buda-tx.jpg"]{object-position:50% 30%}

/* rotating photo tile */
.rotator{position:relative;isolation:isolate}
.rotator .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out}
.rotator .slide.on{opacity:1}
.rotator .slide img{width:100%;height:100%;object-fit:cover}
.rotator-dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:3;
  display:flex;justify-content:center;gap:7px;
}
.rotator-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:.25s var(--ease);
}
.rotator-dots button[aria-current="true"]{background:var(--optic);width:22px;border-radius:99px}
.rotator-dots button:hover{background:#fff}
.rotator-count{
  position:absolute;top:12px;right:12px;z-index:3;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:var(--brand-deep);background:var(--optic);
  padding:5px 11px;border-radius:99px;
}
@media(prefers-reduced-motion:reduce){.rotator .slide{transition:none}}
.vendor-gallery figure:hover .shot img{transform:scale(1.05)}
.vendor-gallery figcaption{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.92rem;color:var(--muted);margin-top:10px;
}
@media(max-width:520px){.vendor-gallery{grid-template-columns:1fr}}

/* ---------- Downloadable document feature ---------- */
.doc{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,64px);align-items:center}
.doc-shot{
  position:relative;display:block;border-radius:10px;overflow:hidden;background:#fff;
  border:1px solid var(--line-dk);box-shadow:0 24px 60px rgba(16,39,72,.22);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.doc-shot img{width:100%;height:auto;display:block}
.doc-shot:hover{transform:translateY(-5px);box-shadow:0 36px 84px rgba(16,39,72,.32)}
.doc-shot::after{
  content:"View full size";position:absolute;left:50%;bottom:18px;
  transform:translateX(-50%) translateY(10px);opacity:0;transition:.3s var(--ease);
  background:var(--optic);color:var(--brand-deep);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.86rem;padding:10px 20px;border-radius:99px;white-space:nowrap;
}
.doc-shot:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.doc-levels{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
@media(max-width:860px){
  .doc{grid-template-columns:1fr}
  .doc-shot{max-width:520px;margin:0 auto}
}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line-dk)}
.acc-item{border-bottom:1px solid var(--line-dk)}
.acc-btn{
  width:100%;text-align:left;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:22px 0;font-weight:600;font-size:1.03rem;
}
.acc-btn i{flex:0 0 auto;width:16px;height:16px;position:relative;opacity:.65}
.acc-btn i::before,.acc-btn i::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
.acc-btn i::before{left:0;top:7px;width:16px;height:2px}
.acc-btn i::after{left:7px;top:0;width:2px;height:16px}
.acc-item.open .acc-btn i::after{transform:rotate(90deg);opacity:0}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc-panel div{padding:0 0 24px;color:var(--muted-dk);max-width:80ch}
.acc-panel a{text-decoration:underline}

/* ---------- CTA band ---------- */
.cta-band{background:var(--optic);color:var(--ink);text-align:center;padding:clamp(56px,7vw,104px) 0}
.cta-band h2{margin:0 auto 18px;max-width:20ch}
.cta-band p{max-width:56ch;margin:0 auto;color:rgba(16,39,72,.78);font-size:1.08rem}
.cta-band .btns{justify-content:center}
.cta-quote{background:var(--brand-deep);text-align:center}
.cta-quote blockquote{margin:0 auto;max-width:78ch;font-size:clamp(1.15rem,2.1vw,1.62rem);line-height:1.5;font-weight:500}
.cta-quote cite{display:block;margin-top:24px;font-style:normal;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:1.08rem;color:var(--optic)}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.split + .gal{margin-top:2px}   /* match the 2px gutters between the tiles */
.gal a,.gal div{position:relative;aspect-ratio:1;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal>*:hover img{transform:scale(1.08)}

/* ---------- Footer ---------- */
.ftr{background:var(--brand-deep);padding:clamp(56px,6vw,88px) 0 0;border-top:1px solid var(--line)}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,3vw,48px);padding-bottom:52px}
.ftr-brand img{height:40px;width:auto;margin-bottom:22px}
.ftr-brand p{color:rgba(255,255,255,.82);font-size:.95rem;max-width:34ch}
.ftr h5{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:1.02rem;color:var(--optic);margin:0 0 18px}
.ftr li{margin-bottom:10px}
.ftr li a{color:rgba(255,255,255,.82);font-size:.95rem;transition:.2s}
.ftr li a:hover{color:var(--optic)}
.ftr-bar{border-top:1px solid var(--line);padding:24px 0;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
.ftr-bar p,.ftr-bar a{font-size:.85rem;color:rgba(255,255,255,.62);margin:0}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.ftr-legal a{white-space:nowrap}
.ftr-legal a + a::before{content:"\00b7";padding:0 10px;color:rgba(255,255,255,.34)}
.ftr-bar a:hover{color:var(--optic)}

/* ---------- App promo (footer) ---------- */
.app-cta{border-bottom:1px solid var(--line);padding-bottom:clamp(34px,4vw,52px);margin-bottom:clamp(34px,4vw,52px)}
.app-cta-in{display:grid;grid-template-columns:1.25fr auto;align-items:center;gap:clamp(24px,4vw,64px)}
.app-cta h3{margin:0 0 12px}
.app-cta p{color:var(--muted);max-width:52ch;font-size:1rem;margin:0}
.store-btns{display:flex;flex-wrap:wrap;gap:12px}
.store-btn{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.34);border-radius:8px;
  padding:11px 20px 11px 17px;transition:.25s var(--ease);white-space:nowrap;
}
.store-btn:hover{border-color:var(--optic);background:rgba(217,245,60,.08);transform:translateY(-2px)}
.store-btn svg{width:26px;height:26px;flex:0 0 auto;fill:currentColor}
.store-btn span{display:flex;flex-direction:column;line-height:1.15;font-weight:600;font-size:1.06rem}
.store-btn small{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.76rem;color:rgba(255,255,255,.6);
}
.store-btn:hover small{color:var(--optic)}
@media(max-width:900px){
  .app-cta-in{grid-template-columns:1fr}
}
@media(max-width:480px){
  .store-btns{flex-direction:column;align-items:stretch}
  .store-btn{justify-content:center}
}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}

/* ---------- Misc ---------- */
.note{
  border-left:3px solid var(--optic);padding:16px 0 16px 22px;
  background:rgba(217,245,60,.06);font-size:.95rem;
}
.light .note{background:rgba(16,39,72,.04)}
.band{background:var(--brand-surface);padding:clamp(34px,4.5vw,56px) 0}
.band-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,48px);justify-content:space-between}
.band-in p{margin:0;max-width:70ch;font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.55}
.band-in .btn{flex:0 0 auto}
.band strong{color:var(--optic)}
/* baseline, not centre: the dd often holds an .arrow-link, which is an
   inline-flex and sits ~10px low inside its own line box, so centring the
   boxes still left the text visibly out of line. Baseline also does the
   right thing for the two-line address dd - it aligns to its first line. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:.98rem;align-items:baseline}
.kv dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:1.04rem;color:var(--optic)}
.light .kv dt{color:var(--brand-mid)}
.kv dd{margin:0}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.person{background:var(--white);border:1px solid var(--line-dk);border-radius:8px;padding:26px;color:var(--ink)}
.person b{display:block;font-size:1.05rem;margin-bottom:4px}
.person span{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:1.02rem;color:var(--brand-mid)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.stack{display:grid;gap:18px}
.stack strong{display:block}
.stack p{margin:6px 0 0;color:var(--muted);font-size:.96rem}

/* ---------- Forms ---------- */
.form{display:grid;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1/-1}
.field label{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:1rem;color:var(--brand-mid);
}
.field .req{color:#B03A2E;margin-left:.25em}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1px solid rgba(16,39,72,.22);border-radius:6px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brand-mid) 50%),linear-gradient(135deg,var(--brand-mid) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:46px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-mid);box-shadow:0 0 0 3px rgba(30,74,137,.14);
}
.field input:invalid:not(:placeholder-shown){border-color:#C0392B}
.field small{font-size:.88rem;color:var(--muted-dk)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-note{font-size:.9rem;color:var(--muted-dk)}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .nav-link{font-size:.85rem;letter-spacing:.1em}
  .nav{gap:10px}
}
@media(max-width:1080px){
  /* Nav collapses to the burger. Hide BOTH header buttons - Join and Book a
     Court both live in the mobile menu - and push the burger to the far right
     (.nav carried the margin-left:auto that used to do that). */
  .nav,.hdr-cta .btn{display:none}
  .hdr-cta{margin-left:auto}
  .burger{display:flex}
  .tiles,.tiles-2{grid-template-columns:1fr}
  .tile{min-height:clamp(360px,58vw,480px)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  body{font-size:16px}
  .split{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .split-media{min-height:56vw}
  .g3,.g2{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .vendor{grid-template-columns:1fr}
  .vendor.rev .vendor-logo{order:0}
  .vendor-logo{min-height:200px}
  .vendor-logo img{max-height:150px}
  .hero{min-height:min(88vh,760px)}
}
@media(max-width:420px){
  /* long single words in display headings need to fit the column at small widths */
  .d1{font-size:2.25rem}
  .d2{font-size:1.95rem}
  .d3{font-size:1.55rem}
  .d4{font-size:1.25rem}
}
@media(max-width:560px){
  .g4,.team-grid,.ftr-top{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btns .btn{width:100%;justify-content:center}
  .hdr-cta .btn{padding:.9em 1.2em;font-size:.85rem}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:12px}
}

/* ---------- Junior tennis levels ----------
   Parents scan for two things: the age range and when it meets. Both sit above
   the description. Cards are built on .card-media so the photo runs full-bleed
   at the top, and a card with no photo yet still renders correctly. */
.level .bd{gap:0}
.level-age{
  align-self:flex-start;background:var(--optic);color:var(--brand-deep);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.92rem;padding:5px 12px;border-radius:4px;margin-bottom:14px;
}
.level h3{margin:0 0 10px;font-size:1.5rem;font-weight:700;letter-spacing:.01em}
.level-when{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.06rem;line-height:1.35;
  color:var(--brand-mid);margin:0 0 16px;flex:none !important;
}
.level-move{
  flex:none !important;margin:16px 0 0;font-size:.92rem;
  border-top:1px solid var(--line-dk);padding-top:14px;
}
.level-move strong{color:var(--ink)}
.level .bd .arrow-link{margin-top:18px}

/* High Performance runs full width under the grid: everything that identifies the
   programme on one side, a feature photo bleeding to the panel edge on the other. */
.level-hp{
  margin-top:clamp(18px,2.4vw,26px);
  background:var(--brand-deep);color:#fff;border-radius:8px;
  padding:0;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;
}
.level-hp-body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.level-hp-media{position:relative;min-height:100%}
.level-hp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.level-hp p{color:#fff;font-size:1.06rem;line-height:1.62}
.level-hp .level-when{color:var(--optic);margin:0}
.level-hp .level-move{border-top-color:rgba(255,255,255,.2);font-size:.95rem}
.level-hp .level-move strong{color:#fff}
/* This block is dark but sits inside .sec light, whose .light h3 / .light
   .arrow-link rules would otherwise paint dark ink on it. */
.level-hp h3{color:#fff}
.level-hp .arrow-link{color:var(--optic)}
.level-hp .arrow-link:hover{color:#fff}
/* The name is the loudest thing in the panel; the pill was competing with it.
   The pill now sits with the meeting times, one grouped block of detail, set
   clear of the heading. */
/* Sized against its own column, not the viewport: at 1200px the viewport-based
   clamp still resolved to 49.6px in a 338px column and broke the name across two
   lines. Anton sets "HIGH PERFORMANCE" at 7.21x the font size, so 13.2cqw keeps
   it on one line at every width this column takes. */
.level-hp-body{container-type:inline-size}
.hp-title{
  margin:0 0 20px;font-size:clamp(1.9rem,13.2cqw,3.4rem);
  line-height:1;letter-spacing:-.005em;
}
.hp-meta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-bottom:24px}
/* The mark sits to the right of the opening paragraph, on the same line of the
   panel. A flex row rather than a float: .level-hp-body is itself a flex column,
   and floats are ignored on flex items. */
.hp-lead{display:flex;align-items:flex-start;gap:clamp(18px,2vw,28px)}
.hp-lead p{flex:1 1 auto;margin:0}
.hp-lead .hp-mark{flex:0 0 auto;width:clamp(84px,9vw,132px);margin:2px 0 0}
@media(max-width:520px){
  .hp-lead{flex-direction:column-reverse;align-items:flex-start}
  .hp-lead .hp-mark{margin-bottom:14px}
}
.hp-meta .level-age{margin-bottom:0}
/* The mail link is an action, not the tail of the paragraph above it. */
.level-hp .arrow-link{margin-top:34px}
@media(max-width:860px){
  .level-hp{grid-template-columns:1fr}
  .level-hp-media{min-height:0;aspect-ratio:4/3;order:-1}
}

/* Compact variant of the document block - a reference strip, not a hero */
.doc-sm{
  grid-template-columns:150px 1fr;gap:clamp(22px,3vw,40px);
  margin-top:clamp(40px,5vw,70px);padding-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--line-dk);align-items:start;
}
.doc-sm .doc-shot{border-radius:6px}
.doc-sm .doc-shot::after{display:none}
.doc-sm h3{margin:8px 0 10px;font-size:1.3rem;font-weight:700}
.doc-sm p{color:var(--muted-dk);font-size:.97rem;max-width:70ch;margin:0}
.doc-sm .btns{margin-top:18px}
.doc-note{margin-top:18px !important;font-size:.92rem}
@media(max-width:640px){
  .doc-sm{grid-template-columns:1fr}
  .doc-sm .doc-shot{max-width:190px}
}

/* ---------- Pro shop: price tables + brand wall ---------- */
.price-line{
  font-family:"Anton",Impact,sans-serif;font-size:2rem;line-height:1;
  margin:0 0 14px;flex:none !important;color:var(--optic);
}
.light .price-line{color:var(--brand)}

/* A wide table has to be able to scroll inside its own box, never push the page */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px}
.ptable{width:100%;border-collapse:collapse;min-width:620px;text-align:left}
.ptable caption{text-align:left}
.ptable th,.ptable td{padding:14px 18px;border-bottom:1px solid var(--line)}
.ptable thead th{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.92rem;color:var(--optic);
  border-bottom:2px solid rgba(217,245,60,.5);white-space:nowrap;
}
.ptable tbody th{font-weight:600;color:#fff}
.ptable tbody td{color:#fff}
.ptable td.num,.ptable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover th,.ptable tbody tr:hover td{background:rgba(255,255,255,.05)}
.light .ptable th,.light .ptable td{border-bottom-color:var(--line-dk)}
.light .ptable thead th{color:var(--brand-mid);border-bottom-color:rgba(30,74,137,.4)}
.light .ptable tbody th{color:var(--ink)}
.light .ptable tbody td{color:var(--muted-dk)}
.tnote{font-size:.92rem;color:var(--muted);margin:0 0 26px}
.light .tnote{color:var(--muted-dk)}

/* Brand wall. Logos arrive as white-background files at wildly different aspect
   ratios, so each sits in an identical white tile and is optically centred. */
.brand-cat{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:1.06rem;color:var(--brand-mid);
  margin:clamp(30px,3.5vw,46px) 0 16px;
}
.brandwall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand-tile{
  background:#fff;border:1px solid var(--line-dk);border-radius:8px;
  height:104px;display:flex;align-items:center;justify-content:center;
  padding:18px 20px;transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.brand-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,39,72,.1)}
.brand-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.brand-tile-own{border-color:var(--optic-2);background:var(--brand)}
@media(max-width:1080px){.brandwall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){
  .brandwall{grid-template-columns:repeat(2,1fr);gap:10px}
  .brand-tile{height:86px;padding:14px}
}

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

/* Status tag on the camp cards - "Registration Coming Soon" etc. Outlined
   rather than solid, so it reads as a status and never as a price chip. */
.camp-tag{
  align-self:flex-start;display:inline-block;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;line-height:1;
  color:var(--optic);border:1px solid rgba(217,245,60,.55);
  padding:6px 11px;border-radius:4px;margin-bottom:14px;
}
.light .camp-tag{color:var(--brand-mid);border-color:rgba(30,74,137,.4)}

/* ---------- Sliding gallery ----------
   Same trick as .marquee: the JS duplicates the track, so translating it -50%
   lands exactly on the copy and the loop is seamless. Fixed-width slides (not
   fractions of the viewport) keep that maths true at any screen size. */
.gal-slide{overflow:hidden;background:var(--brand-deep);padding:2px 0}
.gal-track{display:flex;width:max-content;gap:2px;animation:galslide 60s linear infinite}
.gal-slide:hover .gal-track{animation-play-state:paused}
.gal-track > *{
  position:relative;flex:0 0 auto;
  width:clamp(240px,26vw,420px);aspect-ratio:4/3;overflow:hidden;
}
.gal-track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.gal-track > *:hover img{transform:scale(1.06)}
/* Two portrait frames in a 4:3 strip: centred, cover would crop the player's head
   off the top, so bias the window upward. */
.gal-track img[src$="high-performance-strength-training-buda-tx.jpg"]{object-position:50% 12%}
@keyframes galslide{to{transform:translateX(calc(-50% - 1px))}}
@media(prefers-reduced-motion:reduce){
  .gal-track{animation:none}
  .gal-slide{overflow-x:auto}
}

/* ---------- Pathway rings (junior tennis) ----------
   Concentric levels: Red at the centre, then Orange, Green, and High
   Performance as the outermost ring. Rings draw themselves in on scroll and
   breathe gently afterwards. Purely decorative - the real content is the
   level cards below, and this is aria-hidden. */
.rings{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1}
.ring{
  position:absolute;inset:0;margin:auto;border-radius:50%;
  display:flex;align-items:flex-start;justify-content:center;
  border:2px solid;opacity:0;transform:scale(.82);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.rv.in .ring,.rings.in .ring{opacity:1;transform:scale(1)}
.ring span{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;line-height:1;white-space:nowrap;
  padding:5px 10px;border-radius:4px;transform:translateY(-50%);
}
/* outermost first so the centre sits on top */
.ring-hp    {width:100%;height:100%;border-color:var(--optic);animation:ringPulse 7s ease-in-out infinite}
.ring-green {width:74%;height:74%;border-color:#3FBF6A;animation:ringPulse 7s ease-in-out .5s infinite}
.ring-orange{width:50%;height:50%;border-color:#F08A24;animation:ringPulse 7s ease-in-out 1s infinite}
.ring-red   {width:26%;height:26%;border-color:#E0483C;background:rgba(224,72,60,.14);animation:ringPulse 7s ease-in-out 1.5s infinite}
.ring-hp span    {background:var(--optic);color:var(--brand-deep)}
.ring-green span {background:#3FBF6A;color:#08240F}
.ring-orange span{background:#F08A24;color:#3A1D00}
.ring-red span   {background:#BC2F25;color:#fff}  /* darker than the ring so white text clears AA */
.ring-hp    {transition-delay:0s}
.ring-green {transition-delay:.12s}
.ring-orange{transition-delay:.24s}
.ring-red   {transition-delay:.36s}
@keyframes ringPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.018)}
}
.rings-note{
  text-align:center;margin:18px 0 0;font-size:.9rem;color:var(--muted);
}
@media(max-width:560px){
  .rings{max-width:300px}
  .ring span{font-size:.7rem;letter-spacing:.1em;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){
  .ring{animation:none !important;opacity:1;transform:none}
}

/* HP Team mark inside the High Performance block */
.hp-mark{width:clamp(120px,13vw,168px);height:auto;margin:0 0 18px;border-radius:50%}

/* A tile that holds its own links instead of being one: the photo no longer zooms
   on hover, because nothing happens if you click the tile itself. */
.tile-static:hover img{transform:none}

/* Two CTAs inside one card (e.g. Private Lessons: app vs contact) */
.card-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px}
.card-links .arrow-link{margin-top:0}

/* ---------- Line breaking ----------
   128 orphans (a wrapped block ending in one short word) were measured across
   the site at 390/768/1440. Rather than hand-editing approved copy - which
   would only hold at the widths it was tuned for - let the browser solve it:
   `balance` evens out short blocks like headings, `pretty` specifically
   avoids leaving a single word on the last line of body copy. Browsers
   without support simply wrap as before. */
h1,h2,h3,h4,.disp,.sec-head > .lede{text-wrap:balance}
p,.lede,.card p,.tile p,figcaption,dd{text-wrap:pretty}
/* List items are short enough that `balance` evens the two lines better than
   `pretty`, which is tuned for long paragraphs. */
li,.plan li,.form-note,.tnote{text-wrap:balance}

/* "Limited time" flag above the initiation line on plan cards */
.offer-flag{
  display:inline-block;background:var(--optic);color:var(--brand-deep);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;line-height:1;
  padding:5px 9px;border-radius:3px;margin:0 0 8px;
}
/* The flag belongs to the initiation line, not floating above it: same row,
   and when the card is too narrow it wraps directly against that line. */
.plan-init .offer-flag{display:inline-block;vertical-align:baseline;margin:0 9px 0 0}


/* ---------- Long-form prose (policy pages) ----------
   A single readable column. Everything is scoped so the legal pages need no
   inline styling and inherit the same ink, rules and link treatment as the
   rest of the site. Lives on .sec.light, so all colours are the light-bg set. */
.prose{max-width:74ch;color:var(--ink)}
.prose > :first-child{margin-top:0}
.prose h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.1;font-size:clamp(1.35rem,2.2vw,1.75rem);
  margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--line-dk);
}
.prose h2:first-of-type{padding-top:0;border-top:0;margin-top:0}
.prose h3{
  font-size:1.06rem;font-weight:700;line-height:1.3;margin:28px 0 8px;color:var(--ink);
}
.prose p{margin:0 0 16px;color:var(--muted-dk);text-wrap:pretty}
.prose ul{margin:0 0 18px;padding-left:1.15em}
.prose li{margin:0 0 8px;color:var(--muted-dk);text-wrap:pretty}
.prose li::marker{color:var(--brand-mid)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--brand-mid);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--brand-deep)}
.prose .prose-date{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.86rem;color:var(--brand-mid);margin-bottom:26px;
}
/* summary call-out at the top of a policy */
.prose .callout{
  background:var(--brand-deep);color:#fff;border-radius:8px;
  padding:clamp(20px,2.4vw,28px);margin:0 0 34px;
}
.prose .callout h3,.prose .callout strong{color:#fff}
.prose .callout p,.prose .callout li{color:#fff}
.prose .callout > :last-child{margin-bottom:0}
.prose .callout a{color:var(--optic)}
.prose .callout a:hover{color:#fff}

/* ---------- Opt out of automatic line-break balancing ----------
   The site-wide text-wrap rules stay in place everywhere else (they took the
   orphan count from 128 to 6). This escape hatch restores the browser's plain
   greedy wrapping for a specific block whose original line breaks were the
   ones we wanted - currently the Courtside Cantina section on the homepage. */
.no-balance h1,.no-balance h2,.no-balance h3,.no-balance h4,
.no-balance .disp,.no-balance .lede,.no-balance p,
.no-balance li,.no-balance figcaption,.no-balance dd{text-wrap:wrap}

/* Tennis hero: the default centre crop cuts the players off at the waist.
   Scoped to .hero-bg so the same photo in the homepage gallery strip is
   untouched. */
.hero-bg img[src$="group-tennis-clinic-buda-tx.jpg"]{object-position:50% 72%}

/* ---------- Staff / coach cards ----------
   Photo + name + title, with the full bio behind a native <details> so it
   works with no JS and stays keyboard accessible. Sits on .sec.light and on
   .sec.deep - the card paints its own white ground and ink either way. */
/* align-items:start so an opened bio grows only its own card instead of
   stretching every sibling in the row to match. */
.staff{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);align-items:start}
.staff-5{grid-template-columns:repeat(5,1fr)}
.staff-card{
  margin:0;background:var(--white);border:1px solid var(--line-dk);border-radius:8px;
  overflow:hidden;color:var(--ink);display:flex;flex-direction:column;
}
.staff-card img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;
  display:block;background:#E6ECF8;
}
.staff-card figcaption{padding:clamp(16px,1.6vw,22px);display:flex;flex-direction:column;flex:1}
.staff-card b{display:block;font-size:1.05rem;line-height:1.25;margin-bottom:4px;text-wrap:balance}
.staff-card span{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;line-height:1.25;color:var(--brand-mid);text-wrap:balance;
  min-height:2.5em;
}

/* the bio expander */
.staff-bio{margin-top:auto;padding-top:14px}
.staff-bio > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-dk);width:100%;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;color:var(--brand-mid);
}
.staff-bio > summary::-webkit-details-marker{display:none}
.staff-bio > summary::marker{content:""}
.staff-bio > summary::after{content:"\2192";transition:transform .3s var(--ease)}
.staff-bio[open] > summary::after{transform:rotate(90deg)}
.staff-bio > summary:hover{color:var(--brand-deep)}
.staff-bio > summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.staff-bio p{font-size:.9rem;line-height:1.6;color:var(--muted-dk);margin:14px 0 0;text-wrap:pretty}

@media(max-width:1080px){.staff,.staff-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.staff,.staff-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.staff,.staff-5{grid-template-columns:1fr}}


/* Hero clearance: every hero H1 now sits directly under the fixed header logo,
   because the audience-label eyebrows were removed from all of them. The
   header logo's bottom edge lands at 80px on desktop and 68px on mobile, so
   180px of top padding is the floor that keeps at least 100px of air between
   the mark and the headline at every width. This replaced the old
   116/13vh/152px rule and the homepage-only +40px override, which 180px
   already exceeds. Measured, not estimated - see README. */

/* ---------- Horizontal media card ----------
   Photo beside the copy instead of above it. Used for the homepage food-truck
   row, where three stacked square photos made the section taller than it
   deserved - the photo is still real and legible, the section is about half
   the height. */
.card-media.row{display:grid;grid-template-columns:40% 1fr;align-items:stretch;min-height:186px}
.card-media.row .ph{aspect-ratio:auto;height:100%;min-height:100%}
.card-media.row .bd{padding:clamp(18px,1.8vw,26px);justify-content:center}
.card-media.row h3{font-size:1.12rem;margin:0 0 8px;line-height:1.25}
.card-media.row p{font-size:.94rem;margin:0;flex:none}
.card-media.row .arrow-link{margin-top:14px}
@media(max-width:520px){
  .card-media.row{grid-template-columns:38% 1fr;min-height:150px}
}

/* ---------- Bio modal ----------
   Only reachable once the script has confirmed <dialog> support, at which point
   .has-bio-modal is set and the inline expander is collapsed for good. Without
   JS the class never lands and .staff-bio behaves as a plain <details>. */
.has-bio-modal .staff-bio > div{display:none}
.has-bio-modal .staff-bio > summary::after{content:"\2192"}
.has-bio-modal .staff-bio[open] > summary::after{transform:none}

.bio-modal{
  border:0;padding:0;background:var(--white);color:var(--ink);border-radius:10px;
  width:min(720px,calc(100vw - 32px));max-height:min(86vh,860px);
  overflow:hidden;box-shadow:0 30px 80px rgba(16,39,72,.35);
}
.bio-modal::backdrop{background:rgba(16,39,72,.72)}
.bio-modal-close-form{position:absolute;top:0;right:0;margin:0}
.bio-modal-close{
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  font-size:1.9rem;line-height:1;color:var(--muted-dk);border-radius:0 10px 0 0;
}
.bio-modal-close:hover{color:var(--ink);background:var(--paper)}
.bio-modal-close:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.bio-modal-in{max-height:min(86vh,860px);overflow-y:auto;padding:clamp(24px,3vw,38px)}
.bio-modal-head{
  display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;
  padding-right:36px;padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--line-dk);
}
.bio-modal-head img{
  width:104px;height:130px;object-fit:cover;border-radius:6px;display:block;background:#E6ECF8;
}
.bio-modal-head h2{
  font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.15;margin:0 0 6px;text-wrap:balance;
}
.bio-modal-role{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.86rem;color:var(--brand-mid);margin:0;
}
.bio-modal-body p{margin:0 0 15px;color:var(--muted-dk);line-height:1.68;text-wrap:pretty}
.bio-modal-body p:last-child{margin-bottom:0}
@media(max-width:520px){
  .bio-modal-head{grid-template-columns:76px 1fr;gap:16px}
  .bio-modal-head img{width:76px;height:95px}
}
@media(prefers-reduced-motion:no-preference){
  .bio-modal[open]{animation:bioIn .22s var(--ease)}
  @keyframes bioIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}

/* ---------- High Performance photo mosaic ----------
   Sits directly under the .level-hp copy panel. Every word stays on the solid
   navy panel above - nothing is set over a photograph - so the copy can't get
   lost in the imagery while the photos still carry the section. Eight tiles fill
   4x2 exactly (2x4 on tablet, 1 column on phones); the 2px gutters match the .gal / .tiles idiom used elsewhere. */
.hp-gal{
  display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
  margin-top:2px;border-radius:8px;overflow:hidden;
}
/* Square, not 4:3 - half of these frames are portrait or square, and a landscape
   tile cropped the players off at the head and feet. Three to a row makes each
   tile about a third wider than the old four-up grid. */
.hp-gal > div{position:relative;grid-column:span 2;aspect-ratio:1/1;overflow:hidden;background:var(--brand-deep)}
/* A final row of two: half-width each, and 3/2 lands them at the same height as the
   square rows above, so the grid closes flush instead of trailing off. */
.hp-gal > div:nth-child(3n+2):nth-last-child(2),
.hp-gal > div:nth-child(3n+2):nth-last-child(2) + div{grid-column:span 3;aspect-ratio:3/2}
/* The team line-up leads across the full width. Its crop is biased upward so the
   faces survive the wide frame rather than being centred out of it. */
.hp-gal > .hp-gal-lead{grid-column:1 / -1;aspect-ratio:2.6/1}
.hp-gal > .hp-gal-lead img{object-position:50% 22%}
.hp-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.hp-gal > div:hover img{transform:scale(1.05)}
@media(max-width:700px){
  .hp-gal{grid-template-columns:repeat(2,1fr)}
  .hp-gal > div{grid-column:span 1}
  .hp-gal > .hp-gal-lead{aspect-ratio:2/1}
  .hp-gal > div:nth-child(3n+2):nth-last-child(2),
  .hp-gal > div:nth-child(3n+2):nth-last-child(2) + div{grid-column:span 1;aspect-ratio:1/1}
}
@media(max-width:460px){
  .hp-gal{grid-template-columns:1fr}
  .hp-gal > .hp-gal-lead{aspect-ratio:4/3}
}

/* Courtside Cantina logo, standing in for the eyebrow on the homepage panel.
   It is a white logo, so it only works on the dark .mid panel - keep it there. */
.cc-logo{display:block;width:clamp(190px,17vw,260px);height:auto;margin:0 0 22px}

/* Enquiry-form endpoint UI - status line, honeypot, Turnstile widget.
   Added with the /api/contact Worker (see README.md). The status chip
   carries its own background so it reads on blue and paper sections alike. */
.hp-field{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{display:none;margin:0 0 14px;padding:10px 14px;border-radius:8px;font-weight:600;background:rgba(255,255,255,.94);color:var(--ink)}
.form-status.is-visible{display:block}
.form-status.is-error{background:#FBEAE8;color:#8C1D18}
.form-status.is-success{background:#E6F4EA;color:#1B5E20}
.field-turnstile{margin:6px 0 2px}
.field-turnstile .cf-turnstile{min-height:65px}