/* Edison's Smart Fitness — "DAYLIGHT"
   Their room is bright: storefront windows, cream walls, a lime stripe, warm
   ductwork, wood-look floor. Their members are mostly older adults. So the page
   is cream and daylight and photo-forward — not a dark iron gym.
   Palette sampled from their logo plate + the room itself.
   Every text/ground pairing measured >= 5.52:1 (gate 4.5). */

:root{
  /* grounds */
  --cream:#F7F4E9;      /* page, from the logo plate */
  --warm:#FBF9F2;       /* lighter band */
  --tint:#EDEFD8;       /* soft olive band */
  --ink:#17150F;        /* footer ground + primary text */

  /* text — all verified on all three grounds */
  --tx:#17150F;
  --body:#443F33;
  --mute:#635C4E;
  --amber-tx:#6E5C00;
  --olive:#55611A;
  --orange:#9C4413;

  /* brand blocks (not text) */
  --amber:#F0D000;      /* their filament yellow */
  --amber-hi:#FFE43A;
  --lime:#A8BE2E;

  --line:rgba(23,21,15,.14);
  --line-soft:rgba(23,21,15,.08);

  /* world-scroll.css loads after this file and sets `html { background:
     var(--world-ground, #0d0c0b) }` plus `body { background: transparent }`.
     We keep that stylesheet for its Lenis CSS, so the ground token has to be
     pointed at cream or the whole page paints on the module's dark default. */
  --world-ground:#F7F4E9;

  --dsp:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --txt:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gut:clamp(20px, 5vw, 64px);
  --maxw:1240px;
  --s1:8px;  --s2:16px; --s3:24px; --s4:40px;
  --s5:64px; --s6:96px; --s7:132px;
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--cream)}
body{
  margin:0; background:var(--cream); color:var(--body);
  font-family:var(--txt);
  /* Older readers are the core demographic here, so the base size and leading
     are set for comfortable reading, not for a design screenshot. */
  font-size:19px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--dsp); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--tx)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{color:var(--tx); font-weight:600}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--ink);padding:14px 20px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

/* ---------- reveal (transform-only above the fold: keeps LCP = FCP) -------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:none}
.hero .reveal{opacity:1; transform:translateY(16px); transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.hero .reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.hero .reveal{opacity:1; transform:none; transition:none}
}

/* ---------- brand mark ---------- */
.bulb{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 50% 42%, var(--amber) 0 32%, #D9BC00 33% 47%, transparent 48%);
  box-shadow:0 0 0 2px rgba(240,208,0,.28);
}
.bulb::after{content:""; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:9px; height:7px; background:#D9BC00; border-radius:0 0 2px 2px}
.brand-tx{display:flex; flex-direction:column; line-height:1}
.brand-tx b{font-family:var(--dsp); font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--tx)}
.brand-tx i{font-style:normal; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--olive); font-weight:700; margin-top:4px}

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(247,244,233,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:box-shadow .3s, border-color .3s}
.nav.stuck{border-bottom-color:var(--line-soft); box-shadow:0 2px 20px rgba(23,21,15,.06)}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:13px var(--gut); display:flex; align-items:center; gap:var(--s4)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto}
.nav-links{display:flex; gap:24px; margin-left:auto}
.nav-links a{text-decoration:none; font-size:16px; font-weight:500; color:var(--body); transition:color .2s}
.nav-links a:hover{color:var(--orange)}
.nav-cta{display:flex; align-items:center; gap:18px; flex:0 0 auto}
.tel{text-decoration:none; font-weight:700; font-size:17px; color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap}
.tel:hover{color:var(--orange)}
.burger{display:none; background:none; border:0; padding:10px; cursor:pointer; flex-direction:column; gap:5px}
.burger span{display:block; width:26px; height:2.5px; background:var(--tx); border-radius:2px; transition:transform .3s, opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- buttons — big targets, this audience taps with real fingers ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--dsp); font-weight:700; font-size:17px;
  padding:15px 26px; min-height:52px; border-radius:var(--r); text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease}
.btn-lg{font-size:19px; padding:18px 34px; min-height:60px}
.btn-p{background:var(--amber); color:var(--ink); box-shadow:0 2px 0 #C9AD00}
.btn-p:hover{background:var(--amber-hi); transform:translateY(-2px); box-shadow:0 4px 0 #C9AD00}
.btn-g{border-color:var(--tx); color:var(--tx); background:transparent}
.btn-g:hover{background:var(--tx); color:var(--cream); transform:translateY(-2px)}
.full{width:100%}

/* ---------- sections + bands ---------- */
section{position:relative; padding:var(--s7) 0}
.band-warm{background:var(--warm)}
.band-tint{background:var(--tint)}
.eyebrow{font-family:var(--dsp); font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin:0 0 var(--s3)}
.sec-h{font-size:clamp(34px, 5vw, 62px); margin:0 0 var(--s3); max-width:17ch}
.sec-sub{font-size:clamp(18px, 1.6vw, 21px); color:var(--body); max-width:60ch; margin:0 0 var(--s5)}
.fine{font-size:16px; color:var(--mute); max-width:70ch; margin-top:var(--s3)}
.lbl{font-family:var(--dsp); font-size:12.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--olive)}

/* ---------- hero ---------- */
.hero{padding:150px 0 var(--s5)}
.hero-in{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); width:100%}
.hero h1{font-size:clamp(44px, 8.6vw, 116px); font-weight:900; letter-spacing:-.035em; line-height:.96; margin:0 0 var(--s4)}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero h1 em{font-style:normal; color:var(--orange)}
/* the amber bar under "off." — the brand's one block colour doing the accent work */
.hero h1 em::after{content:""; display:block; height:10px; background:var(--amber); border-radius:2px;
  margin-top:6px; transform-origin:left; animation:barIn .8s .35s cubic-bezier(.22,.61,.36,1) both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hero h1 em::after{animation:none}}
.lede{font-size:clamp(19px, 1.9vw, 23px); color:var(--body); max-width:52ch; margin:0 0 var(--s4)}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:var(--s3)}
.hero-note{font-size:17px; color:var(--mute)}
.hero-shot{margin:var(--s6) auto 0; max-width:calc(var(--maxw) + 120px); padding:0 var(--gut)}
.hero-shot img{width:100%; border-radius:var(--r); box-shadow:0 18px 50px rgba(23,21,15,.14)}

/* ---------- fact bar ---------- */
.factbar{padding:var(--s5) 0; background:var(--ink)}
.facts{list-style:none; margin:0 auto; padding:0 var(--gut); max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.facts li{display:flex; flex-direction:column; gap:8px; border-left:3px solid var(--amber); padding-left:20px}
.facts b{font-family:var(--dsp); font-size:clamp(20px,2.1vw,26px); font-weight:800; line-height:1.1; color:var(--cream)}
.facts span{font-size:16px; color:#C7C1B2; line-height:1.55}

/* ---------- proof ---------- */
.proof-grid{display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:var(--s4); align-items:stretch}
.award,.rating{display:flex; flex-direction:column; gap:10px; padding:var(--s3) var(--s3) var(--s3) 22px;
  border-left:5px solid var(--amber); background:var(--warm); border-radius:0 var(--r) var(--r) 0;
  box-shadow:0 2px 14px rgba(23,21,15,.05)}
.award b,.rating b{font-family:var(--dsp); font-size:clamp(30px,3.4vw,42px); font-weight:900; line-height:1; letter-spacing:-.03em; color:var(--tx)}
.rating b span{font-size:.46em; color:var(--mute); font-weight:600}
.award .sub,.rating .sub{font-size:16px; color:var(--body); line-height:1.5}
.stars{color:#E0A800; font-size:21px; letter-spacing:2px}
.quote{margin:0; padding:var(--s3) 0 var(--s3) var(--s4); border-left:1px solid var(--line)}
.quote p{font-family:var(--dsp); font-weight:600; font-size:clamp(20px,2.1vw,27px); line-height:1.4; letter-spacing:-.012em; color:var(--tx); margin:0 0 var(--s2)}
.quote cite{font-style:normal; font-size:15px; color:var(--mute)}

/* ---------- doors ---------- */
.door-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.door{padding:var(--s4) var(--s3); background:var(--warm); border:1px solid var(--line-soft);
  border-radius:var(--r); display:flex; flex-direction:column; gap:var(--s2);
  box-shadow:0 2px 14px rgba(23,21,15,.05); transition:transform .3s, box-shadow .3s, border-color .3s}
.door:hover{transform:translateY(-5px); box-shadow:0 12px 34px rgba(23,21,15,.11); border-color:rgba(240,208,0,.6)}
.door .num{font-family:var(--dsp); font-size:14px; font-weight:800; letter-spacing:.18em; color:var(--orange)}
.door h3{font-size:clamp(23px,2.4vw,30px)}
.door p{font-size:17px; color:var(--body); margin:0; flex:1}
.lnk{font-family:var(--dsp); font-weight:700; font-size:17px; color:var(--amber-tx); text-decoration:none;
  border-bottom:2px solid var(--amber); padding-bottom:2px; align-self:flex-start; transition:color .2s}
.lnk:hover{color:var(--orange); border-bottom-color:var(--orange)}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3)}
.gal figure{margin:0; overflow:hidden; border-radius:var(--r); background:var(--tint);
  box-shadow:0 4px 20px rgba(23,21,15,.09)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.gal figure:hover img{transform:scale(1.04)}
.g1{grid-column:span 4; aspect-ratio:4/3}
.g2{grid-column:span 2; aspect-ratio:3/4}
.g3{grid-column:span 2; aspect-ratio:1/1}
.g4{grid-column:span 4; aspect-ratio:16/9}

/* ---------- tables ---------- */
.tbl-h{font-size:clamp(22px,2.3vw,29px); margin:var(--s5) 0 var(--s3); display:flex; flex-wrap:wrap; align-items:baseline; gap:14px}
.tbl-h:first-of-type{margin-top:0}
.tbl-h span{font-family:var(--txt); font-size:16px; font-weight:400; color:var(--mute); letter-spacing:0}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--warm);
  box-shadow:0 2px 14px rgba(23,21,15,.05)}
.tbl{width:100%; border-collapse:collapse; min-width:640px}
.tbl th,.tbl td{text-align:left; padding:17px 22px; border-bottom:1px solid var(--line-soft)}
.tbl thead th{font-family:var(--dsp); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--olive); background:var(--tint)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody th{font-family:var(--txt); font-weight:600; font-size:18px; color:var(--tx)}
.tbl tbody th i{display:block; font-style:normal; font-size:15px; color:var(--mute); font-weight:400; margin-top:3px}
.tbl td{font-family:var(--dsp); font-weight:700; font-size:21px; color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl td span{font-family:var(--txt); font-size:14px; font-weight:400; color:var(--mute)}
.tbl td.na{color:var(--mute); font-weight:400}
.tbl tbody tr:hover{background:rgba(240,208,0,.06)}
.tbl tr.hi{background:rgba(240,208,0,.16)}
.tbl tr.hi:hover{background:rgba(240,208,0,.22)}
.tbl tr.hi td:nth-child(3){color:var(--amber-tx)}

.passes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.pass{border:2px solid var(--amber); background:var(--warm); border-radius:var(--r);
  padding:var(--s4) var(--s3); text-align:center; display:flex; flex-direction:column; gap:6px}
.pass b{font-family:var(--dsp); font-size:clamp(34px,4vw,50px); font-weight:900; color:var(--tx); line-height:1; letter-spacing:-.03em}
.pass span{font-size:17px; color:var(--body)}

/* ---------- join ---------- */
.join-wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start}
.join-list{list-style:none; padding:0; margin:var(--s3) 0 0; display:flex; flex-direction:column; gap:13px}
.join-list li{position:relative; padding-left:32px; font-size:17.5px; color:var(--body)}
.join-list li::before{content:""; position:absolute; left:0; top:.6em; width:16px; height:4px; background:var(--amber); border-radius:2px}
.join-form{background:var(--warm); border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s4);
  box-shadow:0 6px 26px rgba(23,21,15,.07)}
.fld{display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s3)}
.fld2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.fld label{font-family:var(--dsp); font-size:14px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--body)}
.fld input,.fld select{font-family:var(--txt); font-size:18px; color:var(--tx); background:#fff;
  border:2px solid var(--line); border-radius:var(--r); padding:14px 15px; width:100%; min-height:54px; transition:border-color .2s}
.fld input:focus,.fld select:focus{border-color:var(--orange); outline:none}
.fld select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--body) 50%),linear-gradient(135deg,var(--body) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(1em + 6px), calc(100% - 16px) calc(1em + 6px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:46px}
.formnote{margin:var(--s2) 0 0; font-size:16px; color:var(--olive); min-height:1.2em}

/* ---------- insurance ---------- */
.ins-grid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.ins-grid li{font-family:var(--dsp); font-weight:800; font-size:clamp(18px,1.9vw,22px); color:var(--tx);
  padding:var(--s3); border:1px solid var(--line-soft); background:var(--warm); border-radius:var(--r);
  display:flex; flex-direction:column; gap:6px; box-shadow:0 2px 12px rgba(23,21,15,.05)}
.ins-grid span{font-family:var(--txt); font-size:15px; font-weight:400; color:var(--mute); letter-spacing:0}

/* ---------- training ---------- */
.pt-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-bottom:var(--s6)}
.pt{padding:var(--s4) var(--s3); border:1px solid var(--line-soft); background:var(--warm);
  border-radius:var(--r); display:flex; flex-direction:column; gap:8px; box-shadow:0 2px 14px rgba(23,21,15,.05)}
.pt b{font-family:var(--dsp); font-size:clamp(30px,3.2vw,42px); font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--tx)}
.pt b i{font-style:normal; font-size:.36em; color:var(--mute); font-weight:600; letter-spacing:0}
.pt .alt{font-size:16px; color:var(--mute)}
.pt p{font-size:17px; color:var(--body); margin-top:6px}
.trainers{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.tr{border-top:4px solid var(--amber); padding-top:var(--s3)}
.tr h3{font-size:clamp(22px,2.2vw,28px); margin-bottom:10px}
.tr .cred{font-size:15.5px; color:var(--olive); line-height:1.55; margin-bottom:12px; font-weight:500}
.tr p{font-size:17px; color:var(--body)}
.tr em{color:var(--tx); font-style:italic}

/* ---------- classes ---------- */
.cls-main{border-left:5px solid var(--amber); padding:var(--s3); background:var(--warm);
  border-radius:0 var(--r) var(--r) 0; margin-bottom:var(--s4); box-shadow:0 2px 14px rgba(23,21,15,.05)}
.cls-main h3{font-size:clamp(25px,2.7vw,34px); margin-bottom:12px}
.cls-main p{font-size:17.5px; color:var(--body); max-width:70ch}

/* ---------- equipment ---------- */
.eq-list{list-style:none; counter-reset:eq; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s5)}
.eq-list li{counter-increment:eq; border-top:2px solid var(--line-soft); padding-top:var(--s3); position:relative; padding-left:56px}
.eq-list li::before{content:counter(eq,decimal-leading-zero); position:absolute; left:0; top:var(--s3);
  font-family:var(--dsp); font-size:15px; font-weight:900; color:var(--orange)}
.eq-list b{font-family:var(--dsp); font-size:clamp(19px,2vw,24px); font-weight:800; color:var(--tx); display:block; margin-bottom:7px}
.eq-list p{font-size:17px; color:var(--body); margin:0}

/* ---------- story ---------- */
.story-wrap{display:grid; grid-template-columns:.9fr 1fr; gap:var(--s6); align-items:start}
.story-img img{border-radius:var(--r); width:100%; box-shadow:0 14px 40px rgba(23,21,15,.13)}
.story-tx p{font-size:18px; color:var(--body)}
.story-tx .small{font-size:16.5px; color:var(--mute)}
.mission{margin:var(--s4) 0; padding:var(--s3); border-left:5px solid var(--lime); background:var(--tint); border-radius:0 var(--r) var(--r) 0}
.mission p{font-family:var(--dsp); font-weight:600; font-size:clamp(18px,1.9vw,22px); line-height:1.45; color:var(--tx); letter-spacing:-.01em}

/* ---------- visit ---------- */
.visit-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s6); align-items:start}
.addr{font-style:normal; font-size:19px; line-height:1.85; color:var(--body); margin-bottom:var(--s4)}
.addr strong{color:var(--tx); font-family:var(--dsp); font-weight:800; font-size:21px}
.addr a{color:var(--orange); text-decoration:none; border-bottom:2px solid rgba(156,68,19,.35); font-weight:600}
.addr a:hover{border-bottom-color:var(--orange)}
.hours{background:var(--ink); border-radius:var(--r); padding:var(--s4); color:#C7C1B2}
.hours h3{font-size:22px; margin-bottom:10px; color:var(--cream)}
.hours h3.mt{margin-top:var(--s4)}
.hrs-note{font-size:16px; color:#A8A292; margin:0 0 4px}
.hrs{margin:14px 0 0}
.hrs div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(247,244,233,.14)}
.hrs div:last-child{border-bottom:0}
.hrs dt{font-size:17px; color:#C7C1B2}
.hrs dd{margin:0; font-family:var(--dsp); font-weight:700; font-size:17px; color:var(--amber); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- footer ---------- */
.ft{position:relative; padding:var(--s6) 0 var(--s3); background:var(--ink); color:#C7C1B2}
.ft-in{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:var(--s4)}
.ft-brand{display:flex; flex-direction:column; gap:12px}
.ft-brand .brand-tx b{color:var(--cream)}
.ft-brand .brand-tx i{color:var(--lime)}
.ft-brand .tag{font-family:var(--dsp); font-style:italic; font-weight:700; font-size:19px; color:var(--amber); margin:8px 0 0}
.ft-nav{display:flex; flex-direction:column; gap:11px}
.ft-nav a{font-size:17px; color:#C7C1B2; text-decoration:none}
.ft-nav a:hover{color:var(--amber)}
.ft-con{display:flex; flex-direction:column; gap:9px; font-size:17px; color:#C7C1B2}
.ft-con a{color:var(--cream); text-decoration:none}
.ft-con a:hover{color:var(--amber)}
.ft-con p{margin:6px 0 0; color:#A8A292}
.soc{display:flex; gap:18px; margin-top:10px}
.soc a{font-family:var(--dsp); font-weight:700; font-size:15px; color:var(--amber); border-bottom:2px solid rgba(240,208,0,.35)}
.demo-note{max-width:var(--maxw); margin:var(--s5) auto 0; padding:var(--s3) var(--gut) 0;
  border-top:1px solid rgba(247,244,233,.14); font-size:14.5px; color:#A8A292; line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .quote{grid-column:span 2; border-left:0; border-top:1px solid var(--line); padding:var(--s3) 0 0}
  .door-grid{grid-template-columns:1fr}
  .eq-list{grid-template-columns:1fr; gap:var(--s3)}
  .story-wrap,.visit-wrap,.join-wrap{grid-template-columns:1fr; gap:var(--s4)}
  .facts{grid-template-columns:1fr 1fr; gap:var(--s3)}
  .ins-grid{grid-template-columns:1fr 1fr}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; background:var(--cream);
    flex-direction:column; gap:0; padding:var(--s2) var(--gut) var(--s3); border-bottom:1px solid var(--line-soft);
    box-shadow:0 10px 24px rgba(23,21,15,.1)}
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 0; font-size:19px; border-bottom:1px solid var(--line-soft)}
  .burger{display:flex; margin-left:auto; order:3}
  .nav-cta .btn{display:none}
  .nav-cta{margin-left:auto; order:2}
  .nav-in{gap:var(--s2)}
  .gal{grid-template-columns:1fr 1fr}
  .g1,.g4{grid-column:span 2}
  .g2,.g3{grid-column:span 1; aspect-ratio:1/1}
  .pt-grid,.trainers,.fld2{grid-template-columns:1fr}
  .passes{grid-template-columns:1fr}

  /* Keep every price visible: at 390px the 640px table overflowed and hid the
     monthly figure. Each row becomes a card, every column named. */
  .tbl-wrap{overflow-x:visible; border:0; background:none; box-shadow:none}
  .tbl{min-width:0; display:block}
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tbl tbody,.tbl tr{display:block}
  .tbl tr{border:1px solid var(--line-soft); background:var(--warm); border-radius:var(--r);
    padding:var(--s2) var(--s3) var(--s1); margin-bottom:14px; box-shadow:0 2px 12px rgba(23,21,15,.05)}
  .tbl tr.hi{border-color:var(--amber); border-width:2px; background:rgba(240,208,0,.14)}
  .tbl tbody tr:hover,.tbl tr.hi:hover{background:var(--warm)}
  .tbl tr.hi:hover{background:rgba(240,208,0,.14)}
  .tbl tbody th{display:block; border:0; padding:0 0 11px; font-size:20px;
    border-bottom:1px solid var(--line-soft); margin-bottom:10px}
  .tbl td{display:block; position:relative; border:0; padding:8px 0 8px 46%;
    text-align:right; white-space:normal; min-height:1.9em}
  .tbl td::before{content:attr(data-label); position:absolute; left:0; top:8px; width:44%;
    text-align:left; font-family:var(--txt); font-size:15px; font-weight:400; color:var(--mute); letter-spacing:0}
  .tbl tr:last-child{margin-bottom:0}
}
@media (max-width:600px){
  :root{--s7:80px; --s6:60px; --s5:44px}
  body{font-size:18px}
  .hero{padding:120px 0 var(--s4)}
  .hero-shot{margin-top:var(--s5)}
  .facts{grid-template-columns:1fr}
  .ins-grid{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr; gap:var(--s4)}
  .proof-grid{grid-template-columns:1fr}
  .quote{grid-column:span 1}
  .hero-cta .btn{width:100%}
  .join-form{padding:var(--s3)}
}