/* =====================================================================
   WISE OWL FIT — DESIGN SYSTEM
   Reuse this <style> block (or move it to wof.css) on every page.
   Sections:  1 Tokens  2 Base  3 Layout  4 Components  5 Page sections
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand */
  --teal:#007986;        /* links, headings accent, primary surfaces */
  --teal-ink:#005C66;    /* teal for text on white, hover */
  --teal-deep:#0A2E36;   /* dark teal — footer, Rock Steady band, body headings */
  --teal-tint:#E4F1F2;   /* pale teal wash */
  --orange:#C4762A;      /* CTA / accent */
  --orange-ink:#A85D1A;  /* orange hover + orange used as text on white (4.9:1) */
  --cream:#F5F0E8;       /* warm alternate section background */
  --white:#FFFFFF;
  --logo-green:#1F4A3F;  /* the green in the logo wordmark (deeper/greener than brand teal) */

  /* Semantic */
  --bg:var(--white);
  --bg-alt:var(--cream);
  --text:#1B2A2E;        /* near-black with a teal cast, 14:1 on white */
  --text-muted:#4A5B60;  /* 7:1 on white */
  --line:#D6DFE1;
  --focus:#0A2E36;

  /* Type — Arial per brand; 55+ audience => large base, loose leading */
  --font:Arial, "Helvetica Neue", Helvetica, sans-serif;
  --fs-0:1.0625rem;   /* 17px — fine print only */
  --fs-1:1.1875rem;   /* 19px — body */
  --fs-2:1.375rem;    /* 22px — lead paragraphs, buttons */
  --fs-3:1.75rem;     /* 28px — h3 */
  --fs-4:2.25rem;     /* 36px — h2 */
  --fs-5:clamp(2.75rem, 2rem + 3.5vw, 4.5rem); /* h1 */
  --lh-body:1.6;
  --lh-tight:1.1;

  /* Space (8px rhythm) */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem; --s-7:6rem;

  /* Shape */
  --r-sm:6px; --r-md:12px; --r-pill:999px;
  --measure:38rem;     /* ~70 characters at 19px */
  --container:72rem;
}
/* The brand look is intentionally bright regardless of OS theme;
   these blocks keep the page light for viewers with dark mode on. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:var(--white); --text:#1B2A2E; } }
:root[data-theme="dark"]{ --bg:var(--white); --text:#1B2A2E; }

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-1);line-height:var(--lh-body)}
h1,h2,h3{margin:0 0 var(--s-3);color:var(--teal-deep);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--fs-5);letter-spacing:-.02em}
h2{font-size:var(--fs-4)}
h3{font-size:var(--fs-3);line-height:1.2}
p{margin:0 0 var(--s-3);max-width:var(--measure)}
p.lead{font-size:var(--fs-2);line-height:1.5}
p.fine{font-size:var(--fs-0);color:var(--text-muted)}
a{color:var(--teal-ink);text-underline-offset:.2em;text-decoration-thickness:2px}
a:hover{color:var(--teal-deep)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}
img,svg{max-width:100%;display:block}
ul{padding-left:1.25rem}
li{margin-bottom:var(--s-1)}
strong{color:var(--teal-deep)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s-2);top:-4rem;background:var(--teal-deep);color:#fff;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);z-index:100}
.skip:focus{top:var(--s-2)}

/* ---------- 3. LAYOUT ---------- */
.container{width:min(100% - 2.5rem, var(--container));margin-inline:auto}
.section{padding-block:var(--s-7)}
.section--alt{background:var(--bg-alt)}
.section--deep{background:var(--teal-deep);color:#F0F4F5}
.section--deep h2,.section--deep h3,.section--deep strong{color:#fff}
.section--deep a{color:#fff}
.grid{display:grid;gap:var(--s-4)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.split{display:grid;gap:var(--s-5);align-items:center}
@media (min-width:56em){ .split{grid-template-columns:1.1fr .9fr} .split--flip>*:first-child{order:2} }
.section-head{max-width:var(--measure);margin-bottom:var(--s-5)}
@media (max-width:40em){ .section{padding-block:var(--s-6)} }

/* ---------- 4. COMPONENTS ---------- */
/* Buttons: 56px tall minimum, large bold label, obvious fill. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.5rem;padding:.9rem 1.75rem;border-radius:var(--r-pill);font:700 var(--fs-2)/1.15 var(--font);text-align:center;text-decoration:none;border:3px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-ink);color:#fff}
.btn--secondary{background:transparent;color:var(--teal-deep);border-color:var(--teal)}
.btn--secondary:hover{background:var(--teal-tint);color:var(--teal-deep)}
.btn--onDeep{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn--onDeep:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}

/* Placeholder image: swap the <div class="ph"> for an <img>. Keep aspect-ratio via the modifier. */
.ph{position:relative;background:var(--teal-tint);border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center;color:var(--teal-ink);font-size:var(--fs-0);text-align:center;padding:var(--s-3)}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,121,134,.07) 22px 24px)}
.ph span{position:relative;max-width:16rem}
.ph--wide{aspect-ratio:16/10}
.ph--tall{aspect-ratio:4/5}

/* Program panel: two distinct programs, each gets its own surface */
.program{border-radius:var(--r-md);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.program p{max-width:none}
.program .btn{align-self:flex-start;margin-top:auto}
.program--hoot{background:var(--teal-tint)}
.program--rsb{background:var(--cream)}
.program__mark{width:3.5rem;height:3.5rem;margin-bottom:var(--s-1)}

/* Track columns: the "find your track" self-assessment */
.tracks{display:grid;gap:0;border:2px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
@media (min-width:56em){ .tracks{grid-template-columns:repeat(3,1fr)} .track+.track{border-left:2px solid var(--line);border-top:0} }
.track{padding:var(--s-4)}
.track+.track{border-top:2px solid var(--line)}
.track__num{display:block;font-size:var(--fs-0);font-weight:700;color:var(--teal-ink);margin-bottom:.35rem}
.track h3{margin-bottom:var(--s-2)}
.track p{max-width:none;margin-bottom:0}
.track--3{background:var(--cream)}

/* Check list (values) */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.checks li{display:grid;grid-template-columns:2rem 1fr;gap:var(--s-2);align-items:start;font-size:var(--fs-2);line-height:1.4}
.checks svg{width:2rem;height:2rem;flex:none;color:var(--orange)}

/* FAQ: native details, big tap targets */
.faq{max-width:46rem;border-top:2px solid var(--line)}
.faq details{border-bottom:2px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;font-size:var(--fs-2);font-weight:700;color:var(--teal-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--teal-tint);color:var(--teal-ink);display:grid;place-items:center;font-size:1.6rem;font-weight:400;line-height:1;transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 var(--s-3)}
.faq details>div p:last-child{margin-bottom:0}

/* Notice: quiet, factual */
.notice{border-left:6px solid var(--orange);background:rgba(255,255,255,.08);padding:var(--s-2) var(--s-3);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:var(--measure)}
.notice p{margin:0}

/* Contact block */
.contact-list{list-style:none;padding:0;margin:0 0 var(--s-3);font-size:var(--fs-2)}
.contact-list li{margin-bottom:var(--s-2)}
.contact-list a{white-space:nowrap}

/* Logo lockup. <img> is the real logo; the wordmark span is the fallback if the file is missing. */
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.logo img{height:4.5rem;width:auto;flex-shrink:0}
.logo__word{font-weight:700;font-size:1.35rem;letter-spacing:.06em;color:var(--logo-green);line-height:1}
.logo__word b{display:block;color:var(--orange);font-size:.8em;letter-spacing:.3em;margin-top:.15rem}
.footer .logo__word{color:#fff}
/* Headband stripe from the mascot: used once, under the header */
.stripe{height:6px;background:linear-gradient(90deg,var(--logo-green) 0 38%,var(--orange) 38% 62%,var(--logo-green) 62%)}
/* "FIT" rule motif from the logo: short flanked rule under section headings */
.section-head h2::after{content:"";display:block;width:4.5rem;height:4px;background:var(--orange);margin-top:var(--s-3);clip-path:polygon(0 50%,6% 0,94% 0,100% 50%,94% 100%,6% 100%)}
.section--deep .section-head h2::after{background:var(--orange)}

/* ---------- 5. HEADER / NAV ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:5.5rem;padding-block:.4rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--teal-deep);font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.brand svg{width:2.75rem;height:2.75rem}
.nav__links{display:flex;gap:var(--s-2);align-items:center;list-style:none;margin:0;padding:0}
.nav__links a:not(.btn){display:inline-block;padding:.6rem .8rem;line-height:1.15;text-align:center;text-decoration:none;font-weight:700;color:var(--teal-deep);border-radius:var(--r-sm)}
.nav__links a:not(.btn):hover{background:var(--teal-tint)}
.nav__links a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--orange)}
.nav__toggle{display:none;background:none;border:3px solid var(--teal);border-radius:var(--r-sm);padding:.5rem .9rem;font:700 var(--fs-1) var(--font);color:var(--teal-deep);cursor:pointer}
@media (max-width:75em){
  .nav__toggle{display:inline-block;flex-shrink:0}
  .logo img{height:3.25rem}
  .nav{gap:var(--s-2)}
  .nav__links{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:2px solid var(--line);flex-direction:column;align-items:stretch;padding:var(--s-2) var(--s-3) var(--s-3);gap:.25rem;max-height:calc(100vh - 5.5rem);max-height:calc(100dvh - 5.5rem);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav__links[data-open="true"]{display:flex}
  .nav__links a:not(.btn){padding:.9rem .8rem;font-size:var(--fs-2)}
  .nav__links .btn{margin-top:var(--s-2)}
}

/* ---------- 6. HERO ---------- */
.hero{padding-block:var(--s-6) var(--s-7);position:relative;overflow:hidden}
.hero__grid{display:grid;gap:var(--s-5);align-items:center}
@media (min-width:56em){ .hero__grid{grid-template-columns:1.15fr .85fr} }
.hero h1{margin-bottom:var(--s-3)}
.hero h1 .line{display:block}
.hero h1 .line--2{color:var(--teal)}
.hero p.lead{margin-bottom:var(--s-4)}
.hero__meta{margin-top:var(--s-4);font-size:var(--fs-0);color:var(--text-muted)}
.hero__art{position:relative}
.hero__logo{width:min(100%,26rem);margin-inline:auto}

/* ---------- 7. FOOTER ---------- */
.footer{background:var(--teal-deep);color:#D8E3E6;padding-block:var(--s-6) var(--s-4);font-size:var(--fs-0)}
.footer a{color:#fff}
.footer__grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));margin-bottom:var(--s-5)}
.footer h3{font-size:var(--fs-1);color:#fff;margin-bottom:var(--s-2)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.6rem}
.footer .brand{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.2);padding-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:space-between}
.social{display:flex;gap:var(--s-2)}
.social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:2px solid rgba(255,255,255,.5);border-radius:50%;text-decoration:none;font-weight:700}

/* ===== VARIANT: BOLD + EDITORIAL HYBRID — dark teal field and uppercase titles from Bold; larger, looser type and rule-based structure from Editorial ===== */
:root{
  --bg:#0A2E36; --bg-alt:#0F3A44; --text:#EAF2F3; --text-muted:#B9CDD1; --line:#2A5F6A;
  --teal-tint:#123F49; --cream:#123F49; --teal-ink:#7FD3DC; --focus:#FFFFFF;
  --fs-1:1.25rem; --fs-2:1.5rem; --fs-4:2.75rem; --fs-5:clamp(3rem, 2rem + 4.75vw, 6rem);
  --lh-body:1.65; --lh-tight:1.12; --s-7:4.5rem; --measure:36rem; --r-md:6px; --r-sm:4px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0A2E36; --text:#EAF2F3; } }
:root[data-theme="dark"]{ --bg:#0A2E36; --text:#EAF2F3; }
body{background:var(--bg);color:var(--text)}
h1,h2,h3,strong,.faq summary,.track__num{color:#fff}
h1,h2{text-transform:uppercase;letter-spacing:-.02em;font-weight:900;line-height:1.08}
h1{line-height:1.05}
h3{line-height:1.25}
.hero h1 .line--2{color:var(--orange)}
.hero h1 .line{margin-bottom:.12em}
a{color:var(--teal-ink)} a:hover{color:#fff}
.header{background:rgba(10,46,54,.94);border-bottom-color:var(--line)}
.nav__links a:not(.btn){color:#fff} .nav__links a:not(.btn):hover{background:var(--teal-tint)}
.nav__toggle{color:#fff;border-color:var(--teal-ink)}
.logo__word{color:#fff}
.stripe{background:linear-gradient(90deg,var(--teal) 0 38%,var(--orange) 38% 62%,var(--teal) 62%)}
.hero{padding-block:var(--s-7);background:radial-gradient(60rem 30rem at 85% 10%,rgba(0,121,134,.45),transparent 60%)}
.hero p.lead{font-size:1.75rem;line-height:1.45}
.hero__meta{border-top:2px solid var(--teal-ink);padding-top:var(--s-2);color:#D8E8EA;line-height:1.5}
.btn{border-radius:var(--r-sm)}
.btn--secondary{color:#fff;border-color:var(--teal-ink)} .btn--secondary:hover{background:var(--teal-tint);color:#fff}
/* Programs: editorial rules instead of filled panels */
.program{padding:var(--s-3) 0 0;background:transparent!important;border-top:4px solid var(--teal-ink)}
.program--rsb{border-top-color:var(--orange)}
.program__mark{display:none}
.program h3{font-size:2.25rem;text-transform:uppercase}
.program p{max-width:var(--measure)}
/* Rock Steady band: the one light section — cream field, dark teal text, orange kept to the rule and CTA (≈13:1 text contrast) */
.section--deep{background:#F5F0E8;color:#1B2A2E;border-top:8px solid var(--orange)}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep strong{color:#0A2E36}
.section--deep p{color:#1B2A2E}
.section--deep a{color:#005C66}
.section--deep .notice{border-left-color:var(--orange);background:rgba(196,118,42,.12)}
.section--deep .btn--primary{background:var(--orange);color:#fff} .section--deep .btn--primary:hover{background:var(--orange-ink)}
.section--deep .btn--onDeep{color:#0A2E36;border-color:#0A2E36} .section--deep .btn--onDeep:hover{background:rgba(10,46,54,.08);color:#0A2E36}
.section--deep .ph{background:#E7DFCF;color:#5A4E3C} .section--deep .ph::before{background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(31,42,44,.06) 22px 24px)}
/* RSB affiliate logo */
.rsb-logo{display:grid;place-items:center;padding:var(--s-3)}
.rsb-logo img{width:min(100%,26rem);background:#fff;padding:var(--s-4);border-radius:var(--r-md)}
/* Tracks: rule-divided columns */
.tracks{border:0;background:transparent;gap:var(--s-4)}
.track,.track+.track{border:0!important;border-top:4px solid var(--teal-ink)!important;padding:var(--s-3) 0 0}
.track--3{background:transparent;border-top-color:var(--orange)!important}
.track__num{font-size:var(--fs-1);color:var(--orange)}
.track h3{font-size:2.25rem;text-transform:uppercase}
.track p{line-height:1.6}
.checks li{font-size:var(--fs-2);line-height:1.45}
.checks svg{color:var(--orange)}
.faq{max-width:52rem;border-top-color:var(--teal-ink)}
.faq summary{font-size:1.625rem;line-height:1.3}
.faq summary::after{background:transparent;border:2px solid var(--orange);color:var(--orange)}
.ph{background:#123F49;color:#B9CDD1} .ph::before{background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.05) 22px 24px)}
.section-head h2::after{background:var(--orange);clip-path:none;width:3.5rem;height:4px}
.footer{background:#061D22}
/* first section sits flush under the header stripe (no doubled top rule) */
#main > section:first-child{border-top:0}

/* Hero booking card (sits opposite the heading in the intro) */
.book-card{background:#fff;border-radius:var(--r-md);padding:var(--s-5);border-top:6px solid var(--orange);box-shadow:0 6px 24px rgba(10,46,54,.12);align-self:center}
.book-card h3{margin-bottom:var(--s-2)}
.book-card .btn{width:100%;margin-top:var(--s-2)}
.book-card .fine{margin-top:var(--s-3);margin-bottom:0}

/* ===================================================================
   LIGHT THEME — site direction (warm cream field, teal as accent).
   Appended last so it wins over the dark hybrid variant above.
   Vocabulary:  .section = light (cream, default) · .section--alt = white
                .section--dark = dark teal accent band (white text)
   =================================================================== */
:root{
  --bg:#F5F0E8; --bg-alt:#FFFFFF; --text:#1B2A2E; --text-muted:#4A5B60;
  --line:#D6DFE1; --teal-tint:#E4F1F2; --teal-ink:#005C66; --focus:#0A2E36;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#F5F0E8; --text:#1B2A2E; } }
:root[data-theme="dark"]{ --bg:#F5F0E8; --text:#1B2A2E; }
h1,h2,h3,strong,.faq summary{color:var(--teal-deep)}
.track__num{color:var(--orange-ink)}
a{color:var(--teal-ink)} a:hover{color:var(--teal-deep)}
.hero{background:radial-gradient(60rem 30rem at 85% 10%,rgba(0,121,134,.12),transparent 60%)}
.hero__meta{color:var(--text-muted);border-top-color:var(--line)}
.btn--secondary{color:var(--teal-deep);border-color:var(--teal)}
.btn--secondary:hover{background:var(--teal-tint);color:var(--teal-deep)}
.checks svg{color:var(--orange-ink)}
.faq summary::after{border-color:var(--orange-ink);color:var(--orange-ink)}
.ph{background:var(--teal-tint);color:#4A6B70}
.ph::before{background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,121,134,.08) 22px 24px)}
.header{background:var(--teal-deep)}          /* dark header stays as brand anchor */
.section--alt{background:var(--bg-alt)}         /* white */
.section--dark{background:var(--teal-deep);color:#EAF2F3;border-top:0}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark strong,.section--dark a{color:#fff}
.section--dark p,.section--dark .lead{color:#EAF2F3}
.section--dark .btn--secondary{color:#fff;border-color:#7FD3DC}
.section--dark .btn--secondary:hover{background:rgba(127,211,220,.15);color:#fff}
.section--dark .track,.section--dark .track+.track{border-top-color:#7FD3DC!important}
.section--dark .track--3{border-top-color:var(--orange)!important}
.section--dark .track__num{color:var(--orange)}
.section--dark .ph{background:#123F49;color:#B9CDD1}
.section--dark .notice{background:rgba(255,255,255,.08)}

/* find-your-track tweaks */
.hero-lede{font-size:clamp(2.25rem,4.8vw,3.5rem);line-height:1.08}
.how-steps{margin:var(--s-2) 0 0;padding-left:1.25em}
.how-steps li{margin-bottom:var(--s-2);padding-left:.25em}
.track{display:flex;flex-direction:column;height:100%}
.track .btn{margin-top:auto;align-self:flex-start}

/* lead-capture form (the "not ready / times don't work" net) */
.lead-form{display:grid;gap:var(--s-3);max-width:34rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:700;color:var(--teal-deep)}
.field .opt{font-weight:400;color:var(--text-muted)}
.field input,.field textarea{width:100%;padding:.7rem .8rem;border:2px solid #C9D4D6;border-radius:var(--r-sm);font:inherit;background:#fff;color:var(--text)}
.field input:focus,.field textarea:focus{outline:3px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.lead-form .fine{margin:0}
.section--dark .field label{color:#fff}
.section--dark .field input,.section--dark .field textarea{background:#0E353F;border-color:#2C5560;color:#EAF2F3}

.tracks--2{grid-template-columns:1fr}
@media(min-width:48em){.tracks--2{grid-template-columns:repeat(2,1fr)}}

/* GymDesk form embed placeholder */
.form-ph{max-width:34rem;min-height:18rem;display:grid;place-items:center;text-align:center;padding:var(--s-5);background:var(--teal-tint);border:2px dashed #B9CDD1;border-radius:var(--r-md);color:var(--text-muted)}
.section--dark .form-ph{background:rgba(255,255,255,.06);border-color:#2C5560;color:#B9CDD1}

/* ---- Social proof + reassurance (conversion) ---- */
.quotes{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:48em){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:#fff;border-radius:var(--r-md);padding:var(--s-4);border-top:4px solid var(--orange);box-shadow:0 4px 18px rgba(10,46,54,.08);margin:0}
.quote blockquote{margin:0 0 var(--s-3);font-size:1.15rem;line-height:1.5;color:var(--teal-deep)}
.quote figcaption{display:flex;align-items:center;gap:var(--s-2);color:var(--text-muted)}
.quote__photo{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--teal-tint);display:grid;place-items:center;flex:0 0 auto;overflow:hidden;font-size:.62rem;line-height:1.1;color:var(--text-muted);text-align:center}
.quote__photo img{width:100%;height:100%;object-fit:cover}
.quote figcaption strong{color:var(--teal-deep)}

.reassure{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;list-style:none;margin:var(--s-3) 0 0;padding:0;color:var(--text-muted);font-weight:600}
.reassure li{display:flex;align-items:center;gap:.4rem}
.reassure li::before{content:"\2713";color:var(--orange-ink);font-weight:800}
.section--dark .reassure{color:#CFE0E2}.section--dark .reassure li::before{color:#F0A868}

.nudge{font-weight:700;color:var(--orange-ink)}
.section--dark .nudge{color:#F0A868}
.aside-photo{border-radius:var(--r-md);overflow:hidden;background:var(--teal-tint);min-height:20rem;display:grid;place-items:center;text-align:center;color:var(--text-muted);padding:var(--s-4)}
.aside-photo img{width:100%;height:100%;object-fit:cover}

.quotes--2{grid-template-columns:1fr}
@media(min-width:48em){.quotes--2{grid-template-columns:repeat(2,1fr)}}

/* contact + team */
.contact-list{list-style:none;margin:var(--s-3) 0;padding:0;display:grid;gap:var(--s-3)}
.contact-list li{line-height:1.5}
.team{display:grid;gap:var(--s-5)}
.member{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
@media(min-width:44em){.member{grid-template-columns:16rem 1fr;gap:var(--s-4);align-items:start}}
.member__role{font-weight:700;color:var(--orange-ink);margin-top:0}

/* embedded map */
.map-embed{border-radius:var(--r-md);overflow:hidden;border:2px solid #C9D4D6}
.map-embed iframe{width:100%;height:24rem;border:0;display:block}

/* fix: .checks was designed around an SVG icon child; our items are plain text.
   Drop the icon grid and use a ::before checkmark so text flows full-width. */
.checks li{display:block;grid-template-columns:none;position:relative;padding-left:1.9rem}
.checks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--orange-ink);font-weight:800;font-size:1.1em}
.section--dark .checks li::before{color:#F0A868}


/* Facebook-ad landing page — minimal header (logo + phone, no nav) */
.header--lp .lp-phone{color:#fff;font-weight:800;font-size:1.15rem;text-decoration:none;white-space:nowrap}
.header--lp .lp-phone:hover{color:#F0A868}
.header--lp .logo{cursor:default}
.lp-or{font-weight:800;color:var(--orange-ink);margin:var(--s-4) 0 var(--s-1)}

/* real team photos */
.member__img{width:100%;border-radius:var(--r-md);aspect-ratio:4/5;object-fit:cover;object-position:center 28%;display:block}

/* content photos (real member shots) */
.photo{width:100%;max-height:30rem;object-fit:cover;border-radius:var(--r-md);display:block}

/* photo gallery (e.g. Track pages "in action") */
.gallery{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:44em){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery .photo{aspect-ratio:3/4;object-fit:cover;max-height:none}

/* wide (landscape) gallery tiles */
.gallery--wide .photo{aspect-ratio:3/2}

/* ===== Membership / pricing ===== */
.pricing{display:grid;gap:var(--s-4);grid-template-columns:1fr;max-width:66rem;margin-inline:auto}
@media(min-width:48em){.pricing{grid-template-columns:repeat(3,1fr);align-items:start}}
.price-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);text-align:center;display:flex;flex-direction:column;gap:.85rem}
.price-card--feature{border:3px solid var(--teal);position:relative;box-shadow:0 12px 30px rgba(10,46,54,.12)}
.price-card__badge{position:absolute;top:-1rem;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-weight:700;font-size:var(--fs-0);padding:.3rem 1rem;border-radius:var(--r-pill);white-space:nowrap}
.price-card h3{margin:0;font-size:var(--fs-3)}
.price-card h3 span{font-weight:400;color:var(--text-muted);font-size:var(--fs-2)}
.price{display:flex;align-items:baseline;justify-content:center;gap:.3rem;margin:.25rem 0}
.price__amt{font-size:3.25rem;font-weight:800;color:var(--teal-deep);line-height:1}
.price__per{color:var(--text-muted);font-size:var(--fs-1)}
.price__note{color:var(--text-muted);margin:0}
@media(min-width:48em){.price__note{min-height:4.8em}}
.price-card .btn{margin-top:auto;width:100%}
.offer{background:var(--orange);color:#fff;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);text-align:center;max-width:66rem;margin:var(--s-4) auto 0;font-size:var(--fs-2);font-weight:700}
.offer span{font-weight:400;font-size:var(--fs-1);display:block;margin-top:.25rem;opacity:.95}
.included{max-width:40rem;margin-inline:auto;list-style:none;padding:0;display:grid;gap:.65rem;font-size:var(--fs-1)}
.included li{padding-left:2rem;position:relative}
.included li::before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:800}
/* RSB "when we meet" cards */
.hours-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr;max-width:46rem;margin-inline:auto}
@media(min-width:36em){.hours-grid{grid-template-columns:1fr 1fr}}
.hours-card{background:var(--teal-tint);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);text-align:center}
.hours-card h3{margin:0 0 .4rem;color:var(--teal-ink);font-size:var(--fs-3)}
.hours-card p{margin:.2rem 0}

/* fix: header is the dark-teal variant, so nav text needs to stay white
   against it by default; only the hover pill and the mobile dropdown
   (both light backgrounds) need dark text */
.nav__links a:not(.btn){color:#fff}
.nav__links a:not(.btn):hover{background:var(--teal-tint);color:var(--teal-deep)}
.nav__toggle{color:#fff}
@media(max-width:75em){
  .nav__links a:not(.btn){color:var(--teal-deep)}
  .nav__links a:not(.btn):hover{background:var(--teal-tint);color:var(--teal-deep)}
}

/* featured testimonial (larger photo, for pair/story quotes) */
.quote--feature{max-width:60rem;margin:0 auto var(--s-4);display:grid;grid-template-columns:1fr;gap:var(--s-4);align-items:center}
@media(min-width:44em){.quote--feature{grid-template-columns:15rem 1fr}}
.quote--feature .quote__img{width:100%;aspect-ratio:1/1;border-radius:var(--r-md);object-fit:cover}
@media(min-width:44em){.quote--feature .quote__img{width:15rem;height:15rem}}
.quote--feature blockquote{font-size:1.2rem;margin-bottom:var(--s-2)}

/* keep heads in frame when a portrait photo has to crop */
.photo{object-position:center top}
/* 2-up gallery (centered) */
.gallery--2{grid-template-columns:1fr}
@media(min-width:44em){.gallery--2{grid-template-columns:1fr 1fr;max-width:44rem;margin-inline:auto}}

/* align the name/photo row across testimonial cards of differing quote length */
.quote:not(.quote--feature){display:flex;flex-direction:column}
.quote:not(.quote--feature) figcaption{margin-top:auto}

/* prevent orphaned words on headings, sub-heads, leads, and quotes */
h1,h2,h3,.section-head p{text-wrap:balance}
.lead,.quote blockquote{text-wrap:pretty}

/* homepage track cards: booking button pinned to bottom */
.track .btn{align-self:flex-start;margin-top:var(--s-4)}
@media(min-width:56em){.track .btn{margin-top:auto}}
.track p{margin-bottom:var(--s-3)}

/* tap-to-call in the main nav (always visible, incl. mobile next to the menu button) */
.nav__call{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;color:#fff;font-weight:800;font-size:1.05rem;text-decoration:none;white-space:nowrap;flex-shrink:0}
.nav__call:hover{color:var(--orange)}
@media(max-width:75em){.nav__call{font-size:.9rem;margin-right:.25rem}}
@media(max-width:22em){.nav__call{display:none}}