/* ==========================================================================
   VANTA Athletic Club — main stylesheet
   Dark, high-contrast fitness theme.
   Order: tokens → reset → typography → layout → components → sections →
          page blocks → utilities → responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:            #0B0C0E;
  --ink-2:          #121417;
  --ink-3:          #191C20;
  --ink-4:          #22262B;

  --paper:          #F4F5F6;
  --paper-2:        #FFFFFF;
  --paper-3:        #E9EBED;

  --text:           #F2F4F6;
  --text-dim:       #9AA1A9;
  --text-dark:      #14161A;
  --text-dark-dim:  #5C646D;

  --brand:          #D7FF3E;
  --brand-deep:     #B4DB1A;
  --brand-ink:      #14180A;
  --flame:          #FF5A1F;

  --line:           rgba(255,255,255,.10);
  --line-strong:    rgba(255,255,255,.20);
  --line-dark:      rgba(11,12,14,.12);

  --font-display:   'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap:           1240px;
  --wrap-narrow:    880px;
  /* Fluid gutter and body size — no step changes between the breakpoints below. */
  --gutter:         clamp(16px, 3.2vw, 32px);
  --fs-body:        clamp(15px, 0.42vw + 13.6px, 16.5px);

  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           16px;
  --r-pill:         999px;

  --shadow-sm:      0 2px 10px rgba(0,0,0,.20);
  --shadow-md:      0 18px 40px -20px rgba(0,0,0,.55);
  --shadow-lg:      0 40px 90px -40px rgba(0,0,0,.75);

  --ease:           cubic-bezier(.22,.61,.36,1);
  --dur:            .45s;

  --header-h:       84px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;      /* long URLs / emails can't force a scrollbar */
  -webkit-tap-highlight-color:rgba(215,255,62,.2);
}
body.is-locked{ overflow:hidden; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--brand); color:var(--brand-ink);
  padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.9rem, 7.2vw, 5.6rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); }
h3{ font-size:clamp(1.4rem, 2.4vw, 2rem); }
h4{ font-size:1.18rem; }
h5{ font-size:1rem; letter-spacing:.08em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:#fff; }

.lead{ font-size:1.075rem; color:var(--text-dim); line-height:1.75; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body);
  font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand); margin:0 0 18px;
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:var(--brand); display:block;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--flame{ color:var(--flame); }
.eyebrow--flame::before{ background:var(--flame); }

.hl{ color:var(--brand); }
.hl-flame{ color:var(--flame); }
.outline-text{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.42);
}

.section-head{ max-width:720px; margin:0 0 54px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
/* Heading on the left, a "see all" link on the right — stacks below the fold width
   so the un-shrinkable link can never push the page wider than the viewport. */
.section-head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap; max-width:none;
}
.section-head--row > div{ max-width:620px; min-width:0; }
.section-head--row h2{ margin-bottom:0; }
.section-head h2{ margin-bottom:16px; }
.section-head p{ color:var(--text-dim); }

.rich h2{ margin-top:1.6em; }
.rich h3{ margin-top:1.5em; }
.rich ul{ margin:0 0 1.2em; }
.rich ul li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--text-dim); }
.rich ul li::before{
  content:''; position:absolute; left:4px; top:.72em;
  width:8px; height:8px; background:var(--brand); transform:rotate(45deg);
}
.rich ol{ counter-reset:s; margin:0 0 1.2em; }
.rich ol li{ position:relative; padding-left:38px; margin-bottom:12px; color:var(--text-dim); counter-increment:s; }
.rich ol li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:0;
  font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--brand);
}
.rich blockquote{
  margin:1.8em 0; padding:26px 30px;
  border-left:3px solid var(--brand); background:var(--ink-2);
  font-family:var(--font-display); font-size:1.4rem; line-height:1.32;
  text-transform:uppercase; color:#fff;
}
.rich a:not(.btn){ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 4. Layout ---------- */
.container{
  width:100%; max-width:var(--wrap); margin:0 auto;
  /* env() keeps content clear of the notch in landscape on iOS. */
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}
.container--narrow{ max-width:var(--wrap-narrow); }
.container--wide{ max-width:1480px; }

.section{ padding:clamp(70px,9vw,130px) 0; position:relative; }
.section--tight{ padding:clamp(52px,6vw,84px) 0; }
.section--flush-top{ padding-top:0; }
.section--light{ background:var(--paper); color:var(--text-dark); }
.section--light h1,.section--light h2,.section--light h3,.section--light h4{ color:var(--text-dark); }
.section--light p,.section--light .lead{ color:var(--text-dark-dim); }
.section--light .eyebrow{ color:#5B6B10; }
.section--light .eyebrow::before{ background:#5B6B10; }
.section--panel{ background:var(--ink-2); }
.section--edge{ border-top:1px solid var(--line); }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid--tight{ gap:18px; }
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(34px,5vw,70px); align-items:center; }
.split--rev .split__media{ order:2; }

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--brand); --btn-fg:var(--brand-ink); --btn-bd:var(--brand);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-family:var(--font-display);
  font-size:1.02rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ar{ transition:transform var(--dur) var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }

.btn--primary:hover{ --btn-bg:#fff; --btn-bd:#fff; }
.btn--flame{ --btn-bg:var(--flame); --btn-fg:#fff; --btn-bd:var(--flame); }
.btn--flame:hover{ --btn-bg:#fff; --btn-fg:var(--text-dark); --btn-bd:#fff; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ --btn-bg:var(--brand); --btn-fg:var(--brand-ink); --btn-bd:var(--brand); }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn--dark:hover{ --btn-bg:var(--brand); --btn-fg:var(--brand-ink); --btn-bd:var(--brand); }
.btn--outline-dark{ --btn-bg:transparent; --btn-fg:var(--text-dark); --btn-bd:rgba(11,12,14,.24); }
.btn--outline-dark:hover{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn--sm{ padding:12px 20px; font-size:.9rem; }
.btn--lg{ padding:20px 40px; font-size:1.1rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:.98rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand);
}
.link-arrow .ar{ transition:transform var(--dur) var(--ease); }
.link-arrow:hover .ar{ transform:translateX(5px); }
.section--light .link-arrow{ color:#4E5C0C; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--line-strong); color:var(--text);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

/* ---------- 6. Header ---------- */
.header{
  position:sticky; top:0; z-index:90;
  background:rgba(11,12,14,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.header--over{
  position:fixed; left:0; right:0; top:0;
  background:transparent; border-bottom-color:transparent;
}
.header.is-stuck{
  background:rgba(11,12,14,.96);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.9);
}
.header.is-hidden{ transform:translateY(-100%); }
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  height:var(--header-h);
}
.header__actions{ display:flex; align-items:center; gap:12px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:38px; height:38px; flex:0 0 auto;
  background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.35rem; font-weight:700;
  transform:skewX(-9deg);
}
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.brand__tag{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-dim);
  margin-top:4px;
}

.nav__list{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative; display:block; padding:10px 14px;
  font-family:var(--font-display); font-size:1.02rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text);
  transition:color var(--dur) var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover{ color:var(--brand); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--brand); }

/* Three-bar hamburger. Bars are absolutely positioned so the outer two can
   converge on the centre line and cross into an X while the middle fades. */
.burger{
  display:none; position:relative;
  width:42px; height:42px; border:1px solid var(--line-strong);
  color:var(--text);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.burger:hover{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.burger span{
  position:absolute; left:50%; width:20px; height:2px;
  background:currentColor; border-radius:1px;
  transform:translateX(-50%);
  transition:top .3s var(--ease), transform .3s var(--ease), opacity .18s var(--ease);
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:20px; transform:translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:translateX(-50%) scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3){ top:20px; transform:translateX(-50%) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:120; visibility:hidden; }
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu__scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.7);
  opacity:0; transition:opacity .35s var(--ease);
}
.mobile-menu.is-open .mobile-menu__scrim{ opacity:1; }
.mobile-menu__panel{
  position:absolute; top:0; right:0; height:100%; width:min(400px,88vw);
  background:var(--ink-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px;
  transform:translateX(102%); transition:transform .4s var(--ease);
  overflow-y:auto;
}
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mobile-menu__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mobile-menu__list{ flex:1 1 auto; }
.mobile-menu__link{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.mobile-menu__link span{ font-size:.7rem; color:var(--brand); letter-spacing:.2em; }
.mobile-menu__link:hover{ color:var(--brand); }
.mobile-menu__foot{ padding-top:24px; }
.mobile-menu__meta{
  display:flex; flex-direction:column; gap:6px; margin-top:20px;
  font-size:.88rem; color:var(--text-dim);
}
.mobile-menu__meta a:hover{ color:var(--brand); }

/* Search overlay */
.search{
  position:fixed; inset:0; z-index:130;
  background:rgba(11,12,14,.97);
  display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.search.is-open{ opacity:1; visibility:visible; }
.search__inner{ width:min(720px,100%); }
.search__form{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--brand); padding-bottom:14px; }
.search__input{
  flex:1 1 auto; background:none; border:0;
  font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.6rem);
  text-transform:uppercase; letter-spacing:.04em; color:#fff;
}
.search__input::placeholder{ color:rgba(255,255,255,.28); }
.search__hint{ margin-top:16px; font-size:.82rem; color:var(--text-dim); letter-spacing:.06em; }
.search__results{ margin-top:26px; max-height:46vh; overflow-y:auto; }
.search__result{
  display:block; padding:14px 0; border-bottom:1px solid var(--line);
}
.search__result strong{
  display:block; font-family:var(--font-display); font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.05em; color:#fff;
}
.search__result span{ font-size:.86rem; color:var(--text-dim); }
.search__result:hover strong{ color:var(--brand); }
.search__close{ position:absolute; top:24px; right:24px; }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:min(100vh,900px);          /* fallback for browsers without svh */
  min-height:min(100svh,900px);
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 70px) 0 60px;
  overflow:hidden;
}
/* Short landscape phones: a full-viewport hero leaves no room to read. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:calc(var(--header-h) + 44px) 0 44px; }
}
.hero--center{ align-items:center; text-align:center; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,.86) 0%, rgba(11,12,14,.58) 42%, rgba(11,12,14,.95) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__content{ max-width:840px; }
.hero h1{ margin-bottom:22px; }
.hero h1 .line{ display:block; }
.hero__lead{ max-width:540px; font-size:1.1rem; color:rgba(242,244,246,.82); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:clamp(44px,6vw,74px); padding-top:32px; border-top:1px solid var(--line-strong);
}
.hero__scroll{
  position:absolute; right:var(--gutter); bottom:60px; z-index:3;
  display:flex; align-items:center; gap:12px;
  writing-mode:vertical-rl;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-dim);
}
.hero__scroll::after{
  content:''; width:1px; height:56px; background:linear-gradient(var(--brand),transparent);
}

.hero--inner{
  min-height:auto; padding:calc(var(--header-h) + 90px) 0 clamp(64px,8vw,110px);
  align-items:center; text-align:left;
}
.hero--inner .hero__bg::after{
  background:linear-gradient(180deg, rgba(11,12,14,.90) 0%, rgba(11,12,14,.72) 55%, rgba(11,12,14,.94) 100%);
}
.hero--inner h1{ font-size:clamp(2.5rem,5.6vw,4.4rem); margin-bottom:16px; }
.hero--inner .hero__lead{ max-width:640px; }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:20px;
}
.crumbs a:hover{ color:var(--brand); }
.crumbs li:not(:last-child)::after{ content:'/'; margin-left:10px; color:var(--line-strong); }
.crumbs li{ display:flex; align-items:center; }
.crumbs [aria-current]{ color:var(--brand); }

/* ---------- 8. Stat / counter ---------- */
.stat__num{
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--font-display); font-size:clamp(2.2rem,3.6vw,3.1rem); font-weight:700;
  line-height:1; color:#fff;
}
.stat__num .suffix{ color:var(--brand); }
.stat__label{
  margin-top:10px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim);
}
.section--light .stat__num{ color:var(--text-dark); }
.section--light .stat__num .suffix{ color:#7A9310; }
.section--light .stat__label{ color:var(--text-dark-dim); }

/* ---------- 9. Marquee ---------- */
.marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--brand); color:var(--brand-ink);
  padding:16px 0;
}
.marquee__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:44px; padding-right:44px; }
.marquee__item{
  display:flex; align-items:center; gap:44px;
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.marquee__item::after{ content:''; width:9px; height:9px; background:var(--brand-ink); transform:rotate(45deg); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee--dark{ background:var(--ink-2); color:#fff; }
.marquee--dark .marquee__item::after{ background:var(--brand); }

/* ---------- 10. Cards ---------- */
.card{
  position:relative; background:var(--ink-2); border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
/* Uniform crop so cards in a row keep equal heights whatever the source ratio. */
.card > img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.card__body{ padding:28px; }
.section--light .card{ background:var(--paper-2); border-color:var(--line-dark); }

/* Feature card */
.feature{ padding:34px 30px; background:var(--ink-2); border:1px solid var(--line); position:relative; overflow:hidden; }
.feature::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.feature:hover::before{ transform:scaleX(1); }
.feature__icon{
  width:56px; height:56px; display:grid; place-items:center;
  background:rgba(215,255,62,.10); color:var(--brand); margin-bottom:22px;
  transform:skewX(-9deg);
}
.feature__icon svg{ transform:skewX(9deg); }
.feature h3{ font-size:1.32rem; margin-bottom:12px; }
.feature p{ color:var(--text-dim); font-size:.96rem; margin:0; }
.feature__num{
  position:absolute; right:18px; top:10px;
  font-family:var(--font-display); font-size:3.4rem; font-weight:700;
  color:rgba(255,255,255,.045); line-height:1;
}
.section--light .feature{ background:var(--paper-2); border-color:var(--line-dark); }
.section--light .feature__icon{ background:rgba(11,12,14,.05); color:#5B6B10; }
.section--light .feature p{ color:var(--text-dark-dim); }
.section--light .feature__num{ color:rgba(11,12,14,.05); }

/* Class card */
.class-card{
  position:relative; display:block; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line);
}
.class-card__media{ position:relative; aspect-ratio:4/3.1; overflow:hidden; }
.class-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.class-card:hover .class-card__media img{ transform:scale(1.07); }
.class-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,0) 35%,rgba(11,12,14,.86) 100%);
}
.class-card__tag{
  position:absolute; left:16px; top:16px; z-index:2;
  background:var(--brand); color:var(--brand-ink);
  padding:6px 13px; font-family:var(--font-display); font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  transform:skewX(-9deg);
}
.class-card__tag span{ display:block; transform:skewX(9deg); }
.class-card__level{
  position:absolute; right:16px; top:16px; z-index:2;
  background:rgba(11,12,14,.7); border:1px solid var(--line-strong);
  padding:5px 12px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.class-card__body{ padding:24px 24px 26px; }
.class-card h3{ font-size:1.4rem; margin-bottom:10px; transition:color var(--dur) var(--ease); }
.class-card:hover h3{ color:var(--brand); }
.class-card p{ color:var(--text-dim); font-size:.94rem; margin-bottom:18px; }
.class-card__meta{
  display:flex; flex-wrap:wrap; gap:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
}
.class-card__meta b{ color:var(--brand); font-weight:600; }

/* Wide featured variant — image beside the copy, stacking below tablet. */
.class-card--feature{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
.class-card--feature .class-card__media{ aspect-ratio:auto; min-height:320px; }
.class-card--feature .class-card__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(24px,4vw,48px);
}
.class-card--feature h3{ font-size:clamp(1.5rem,2.6vw,2.2rem); }

/* Trainer card */
.trainer{ position:relative; display:block; overflow:hidden; background:var(--ink-2); }
.trainer__media{ position:relative; aspect-ratio:3/3.8; overflow:hidden; }
.trainer__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:transform .7s var(--ease), filter .5s var(--ease); }
.trainer:hover .trainer__media img{ transform:scale(1.05); filter:grayscale(0); }
.trainer__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,0) 45%,rgba(11,12,14,.92) 100%);
}
.trainer__info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; }
.trainer__info h3{ font-size:1.35rem; margin-bottom:4px; }
.trainer__role{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); }
/* Revealed on hover for pointer devices; always visible on touch, where there
   is no hover state to trigger it. */
.trainer__social{ display:flex; gap:8px; margin-top:16px; }
@media (hover:hover) and (pointer:fine){
  .trainer__social{
    opacity:0; transform:translateY(10px);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .trainer:hover .trainer__social{ opacity:1; transform:translateY(0); }
}
.trainer__social a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-strong); color:#fff;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.trainer__social a:hover{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

/* Post card */
.post{ display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); overflow:hidden; height:100%; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.post:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.post__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.post:hover .post__media img{ transform:scale(1.06); }
.post__cat{
  position:absolute; left:14px; bottom:14px;
  background:var(--ink); color:var(--brand); padding:5px 12px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
}
.post__body{ padding:24px; display:flex; flex-direction:column; flex:1 1 auto; }
.post__date{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
.post h3{ font-size:1.25rem; margin-bottom:12px; }
.post:hover h3{ color:var(--brand); }
.post p{ font-size:.93rem; color:var(--text-dim); margin-bottom:18px; }
.post .link-arrow{ margin-top:auto; }
.section--light .post{ background:var(--paper-2); border-color:var(--line-dark); }
.section--light .post p,.section--light .post__date{ color:var(--text-dark-dim); }
.section--light .post__cat{ background:var(--ink); color:var(--brand); }

/* ---------- 11. Schedule ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.tab{
  padding:13px 22px; border:1px solid var(--line);
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
  transition:all var(--dur) var(--ease);
}
.tab:hover{ color:#fff; border-color:var(--line-strong); }
.tab[aria-selected="true"]{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.section--light .tab{ border-color:var(--line-dark); color:var(--text-dark-dim); }
.section--light .tab:hover{ color:var(--text-dark); }
.section--light .tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

.tab-panel[hidden]{ display:none; }

.sched{ border:1px solid var(--line); }
.sched__row{
  display:grid; grid-template-columns:150px 1.6fr 1fr 1fr auto;
  gap:20px; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.sched__row:last-child{ border-bottom:0; }
.sched__row:hover{ background:var(--ink-3); }
.sched__row--head{
  background:var(--ink-3);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim);
}
.sched__time{ font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--brand); letter-spacing:.05em; }
.sched__name{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; text-transform:uppercase; }
.sched__coach,.sched__room{ font-size:.9rem; color:var(--text-dim); }
.sched__spots{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
.sched__spots.is-full{ color:var(--flame); }
.sched__spots.is-open{ color:var(--brand); }
.section--light .sched{ border-color:var(--line-dark); background:var(--paper-2); }
.section--light .sched__row{ border-bottom-color:var(--line-dark); }
.section--light .sched__row:hover{ background:var(--paper-3); }
.section--light .sched__row--head{ background:var(--paper-3); color:var(--text-dark-dim); }
.section--light .sched__time{ color:#5B6B10; }
.section--light .sched__coach,.section--light .sched__room{ color:var(--text-dark-dim); }

/* Plan comparison — same shell as the timetable, four columns instead of five. */
.sched--compare .sched__row{ grid-template-columns:2fr 1fr 1fr 1fr; }
.sched--compare .sched__feat{ color:var(--text); font-weight:500; }
.sched--compare .is-muted{ color:var(--text-dim); }

/* ---------- 12. Pricing ---------- */
.plan{
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:38px 32px; background:var(--ink-2); border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan:hover{ border-color:var(--line-strong); transform:translateY(-5px); }
.plan--featured{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.plan--featured h3,.plan--featured .plan__price{ color:var(--brand-ink); }
.plan__flag{
  position:absolute; right:-1px; top:24px;
  background:var(--ink); color:var(--brand);
  padding:6px 14px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.plan h3{ font-size:1.5rem; margin-bottom:6px; }
.plan__note{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.plan--featured .plan__note{ color:rgba(20,24,10,.7); }
.plan__price{
  display:flex; align-items:baseline; gap:6px; margin:24px 0 4px;
  font-family:var(--font-display); font-size:clamp(2.5rem,4.4vw,3.2rem);
  font-weight:700; line-height:1; color:#fff;
}
.plan__price .cur{ font-size:.48em; }
.plan__per{ font-size:.84rem; color:var(--text-dim); margin-bottom:26px; }
.plan--featured .plan__per{ color:rgba(20,24,10,.7); }
.plan__list{ margin-bottom:30px; flex:1 1 auto; }
.plan__list li{
  position:relative; padding-left:28px; margin-bottom:12px; font-size:.94rem; color:var(--text-dim);
}
.plan__list li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:11px; height:6px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.plan__list li.is-off{ opacity:.45; }
.plan__list li.is-off::before{
  border:0; width:10px; height:2px; background:currentColor; transform:none; top:.85em;
}
.plan--featured .plan__list li{ color:rgba(20,24,10,.86); }
.plan--featured .plan__list li::before{ border-color:var(--brand-ink); }
.plan--featured .btn{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.plan--featured .btn:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }

/* Plan cards stay dark surfaces even inside a light section, so the light-section
   heading/paragraph overrides above must be undone for them. */
.section--light .plan{ background:var(--ink-2); border-color:var(--line); }
.section--light .plan h3,
.section--light .plan h4{ color:#fff; }
.section--light .plan p,
.section--light .plan__note,
.section--light .plan__per,
.section--light .plan__list li{ color:var(--text-dim); }
.section--light .plan--featured{ background:var(--brand); border-color:var(--brand); }
.section--light .plan--featured h3{ color:var(--brand-ink); }
.section--light .plan--featured .plan__note,
.section--light .plan--featured .plan__per{ color:rgba(20,24,10,.7); }
.section--light .plan--featured .plan__list li{ color:rgba(20,24,10,.86); }

.billing-toggle{
  display:inline-flex; align-items:center; gap:14px; padding:8px;
  border:1px solid var(--line); margin-bottom:40px;
}
.billing-toggle button{
  padding:10px 20px; font-family:var(--font-display); font-size:.95rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
  transition:all var(--dur) var(--ease);
}
.billing-toggle button[aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink); }
.billing-toggle .save{ font-size:.7rem; letter-spacing:.14em; color:var(--flame); padding-right:12px; }

/* ---------- 13. Testimonials ---------- */
.quotes{ position:relative; }
.quotes__viewport{ overflow:hidden; }
.quotes__track{ display:flex; transition:transform .55s var(--ease); }
.quote{ flex:0 0 100%; padding:0 4px; }
.quote__text{
  font-family:var(--font-display); font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.24;
  text-transform:uppercase; color:#fff; margin-bottom:30px;
}
.quote__who{ display:flex; align-items:center; gap:16px; }
.quote__who img{ width:60px; height:60px; object-fit:cover; border-radius:50%; }
.quote__name{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.quote__role{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.quotes__nav{ display:flex; gap:10px; margin-top:36px; }
.quotes__dots{ display:flex; gap:8px; margin-top:26px; }
.quotes__dots button{ width:28px; height:3px; background:var(--line-strong); transition:background var(--dur) var(--ease); }
.quotes__dots button[aria-current="true"]{ background:var(--brand); }
.stars{ display:flex; gap:4px; color:var(--brand); margin-bottom:22px; }
.section--light .quote__text{ color:var(--text-dark); }
.section--light .quote__role{ color:var(--text-dark-dim); }
.section--light .quotes__dots button{ background:rgba(11,12,14,.18); }
.section--light .quotes__dots button[aria-current="true"]{ background:var(--ink); }
.section--light .stars{ color:#7A9310; }

/* ---------- 14. Accordion ---------- */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; text-align:left;
  font-family:var(--font-display); font-size:1.22rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text);
  transition:color var(--dur) var(--ease);
}
.acc__btn:hover{ color:var(--brand); }
.acc__sign{ position:relative; flex:0 0 auto; width:18px; height:18px; }
.acc__sign::before,.acc__sign::after{
  content:''; position:absolute; left:0; top:8px; width:18px; height:2px; background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.acc__sign::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"]{ color:var(--brand); }
.acc__btn[aria-expanded="true"] .acc__sign::after{ transform:rotate(0); }
.acc__panel{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.acc__panel-inner{ padding:0 0 26px; color:var(--text-dim); max-width:780px; }
.section--light .acc__item{ border-bottom-color:var(--line-dark); }
.section--light .acc__btn{ color:var(--text-dark); }
.section--light .acc__btn:hover,.section--light .acc__btn[aria-expanded="true"]{ color:#5B6B10; }
.section--light .acc__panel-inner{ color:var(--text-dark-dim); }

/* ---------- 15. Gallery ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery__item{ position:relative; overflow:hidden; display:block; aspect-ratio:4/3; }
.gallery__item--tall{ aspect-ratio:4/5.6; grid-row:span 2; }
.gallery__item--wide{ grid-column:span 2; aspect-ratio:8/3.1; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery__item:hover img{ transform:scale(1.06); }
.gallery__item::after{
  content:''; position:absolute; inset:0; background:rgba(11,12,14,.55);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.gallery__item:hover::after{ opacity:1; }
.gallery__cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:20px;
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
/* Captions sit permanently on touch (no hover to reveal them); they fade in on
   pointer devices instead. */
@media (hover:hover) and (pointer:fine){
  .gallery__cap{
    opacity:0; transform:translateY(12px); text-shadow:none;
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .gallery__item:hover .gallery__cap{ opacity:1; transform:translateY(0); }
}
@media (hover:none){
  .gallery__item::after{ opacity:1; background:linear-gradient(180deg,rgba(11,12,14,0) 45%,rgba(11,12,14,.8) 100%); }
}
.gallery__item.is-hidden{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:140; background:rgba(6,7,8,.95);
  display:grid; place-items:center; padding:40px 24px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-height:82vh; width:auto; }
.lightbox__cap{ margin-top:16px; text-align:center; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.lightbox__close{ position:absolute; top:22px; right:22px; }
.lightbox__prev,.lightbox__next{ position:absolute; top:50%; transform:translateY(-50%); }
.lightbox__prev{ left:22px; }
.lightbox__next{ right:22px; }

/* ---------- 16. Forms ---------- */
.field{ margin-bottom:20px; }
.field label{
  display:block; margin-bottom:9px;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim);
}
.field .req{ color:var(--flame); }
.input,.select,.textarea{
  width:100%; padding:15px 16px;
  background:var(--ink-2); border:1px solid var(--line); color:var(--text);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:rgba(255,255,255,.28); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--brand); background:var(--ink-3); }
.textarea{ min-height:150px; resize:vertical; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA1A9' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.field__error{ display:none; margin-top:7px; font-size:.8rem; color:var(--flame); }
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{ border-color:var(--flame); }
.field.has-error .field__error{ display:block; }
.check{ display:flex; align-items:flex-start; gap:12px; font-size:.9rem; color:var(--text-dim); }
.check input{ margin-top:5px; accent-color:var(--brand); width:16px; height:16px; }
.form-note{ margin-top:16px; font-size:.82rem; color:var(--text-dim); }
.form-status{
  display:none; margin-top:20px; padding:16px 18px;
  border:1px solid var(--brand); background:rgba(215,255,62,.08);
  font-size:.92rem; color:var(--brand);
}
.form-status.is-visible{ display:block; }
.section--light .input,.section--light .select,.section--light .textarea{
  background:var(--paper-2); border-color:var(--line-dark); color:var(--text-dark);
}
.section--light .input::placeholder,.section--light .textarea::placeholder{ color:rgba(11,12,14,.35); }
.section--light .field label{ color:var(--text-dark-dim); }

/* Choice tiles (join form) */
.choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice__box{
  display:block; padding:20px; border:1px solid var(--line); background:var(--ink-2);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice__box b{
  display:block; font-family:var(--font-display); font-size:1.2rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:#fff; margin-bottom:4px;
}
.choice__box span{ font-size:.84rem; color:var(--text-dim); }
.choice input:checked + .choice__box{ border-color:var(--brand); background:rgba(215,255,62,.07); }
.choice input:focus-visible + .choice__box{ outline:2px solid var(--brand); outline-offset:2px; }

/* BMI calculator */
.bmi{ background:var(--ink-2); border:1px solid var(--line); padding:clamp(28px,4vw,44px); }
.bmi__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.bmi__out{
  margin-top:26px; padding:24px; border:1px solid var(--line-strong); text-align:center;
}
.bmi__value{ font-family:var(--font-display); font-size:3.4rem; font-weight:700; line-height:1; color:var(--brand); }
.bmi__cat{ margin-top:8px; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }
.bmi__scale{ display:flex; gap:3px; margin-top:20px; }
.bmi__scale span{ flex:1 1 auto; height:6px; background:var(--line-strong); }
.bmi__scale span.is-on{ background:var(--brand); }

/* ---------- 17. CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; padding:clamp(70px,9vw,120px) 0; }
.cta-band__bg{ position:absolute; inset:0; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{ content:''; position:absolute; inset:0; background:rgba(11,12,14,.78); }
.cta-band__inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto; }
.cta-band h2{ margin-bottom:18px; }
.cta-band .btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; }

/* ---------- 18. Media blocks ---------- */
.media-frame{ position:relative; }
.media-frame img{ width:100%; }
.media-frame__badge{
  position:absolute; right:-18px; bottom:-18px;
  background:var(--brand); color:var(--brand-ink);
  padding:24px 26px; max-width:230px;
}
.media-frame__badge b{
  display:block; font-family:var(--font-display); font-size:2.6rem; font-weight:700; line-height:1;
}
.media-frame__badge span{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }
.media-stack{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
/* Both halves share a portrait crop so the offset reads as intentional. */
.media-stack img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.media-stack img:first-child{ margin-top:48px; }

.play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%;
  background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.play-btn::after{
  content:''; position:absolute; inset:-12px; border-radius:50%;
  border:1px solid rgba(215,255,62,.5); animation:pulse 2.4s infinite;
}
.play-btn:hover{ transform:translate(-50%,-50%) scale(1.08); }
@keyframes pulse{ 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }

/* Progress bars */
.bar{ margin-bottom:22px; }
.bar__top{ display:flex; justify-content:space-between; margin-bottom:9px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
.bar__track{ height:5px; background:var(--line); }
/* Must be block — it is a <span>, and inline boxes ignore width/height. */
.bar__fill{ display:block; height:100%; background:var(--brand); width:0; transition:width 1.2s var(--ease); }

/* ---------- 19. Footer ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding-top:clamp(60px,7vw,90px); }
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px;
  padding-bottom:56px;
}
.footer h5{
  font-size:.8rem; letter-spacing:.22em; color:var(--brand); margin-bottom:22px;
}
.footer p,.footer li,.footer address{ color:var(--text-dim); font-size:.94rem; font-style:normal; }
.footer__links li{ margin-bottom:11px; }
.footer__links a{ transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.footer__links a:hover{ color:var(--brand); padding-left:6px; }
.footer__hours{ display:flex; justify-content:space-between; gap:16px; margin-bottom:10px; font-size:.9rem; }
.footer__hours b{ color:#fff; font-weight:500; }
.footer__social{ display:flex; gap:10px; margin-top:22px; }
.footer__news{ display:flex; margin-top:18px; }
.footer__news input{
  flex:1 1 auto; padding:14px 16px; background:var(--ink); border:1px solid var(--line); color:#fff;
}
.footer__news input:focus{ outline:none; border-color:var(--brand); }
.footer__news button{
  padding:0 20px; background:var(--brand); color:var(--brand-ink);
  font-family:var(--font-display); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.footer__news button:hover{ background:#fff; }
.footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 0; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--text-dim);
}
.footer__bar ul{ display:flex; flex-wrap:wrap; gap:20px; }
.footer__bar a:hover{ color:var(--brand); }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:46px; height:46px; background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- 20. Misc blocks ---------- */
.info-tile{
  padding:30px; border:1px solid var(--line); background:var(--ink-2); height:100%;
}
.info-tile h4{ font-size:1.15rem; margin-bottom:10px; }
.info-tile p,.info-tile address{ color:var(--text-dim); font-size:.95rem; font-style:normal; }
.info-tile a:hover{ color:var(--brand); }
.info-tile__icon{ color:var(--brand); margin-bottom:18px; }

.map-frame{ border:1px solid var(--line); filter:grayscale(1) invert(.92) contrast(.9); }
.map-frame iframe{ display:block; width:100%; height:clamp(280px,42vw,440px); border:0; }

.note-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 30px; background:var(--brand); color:var(--brand-ink);
}
.note-strip p{ margin:0; font-family:var(--font-display); font-size:1.3rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

.pill{
  display:inline-block; padding:6px 14px; border:1px solid var(--line-strong);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
}
.pill--brand{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

.meta-row{ display:flex; flex-wrap:wrap; gap:26px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.meta-row b{ color:var(--brand); font-weight:600; }

.spec-list li{
  display:flex; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line); font-size:.95rem;
}
.spec-list li span:first-child{ color:var(--text-dim); }
.spec-list li span:last-child{ color:#fff; font-weight:500; }

.author-box{ display:flex; gap:22px; align-items:flex-start; padding:30px; background:var(--ink-2); border:1px solid var(--line); }
.author-box img{ width:88px; height:88px; object-fit:cover; flex:0 0 auto; }
.author-box h4{ margin-bottom:6px; }
.author-box p{ color:var(--text-dim); font-size:.94rem; margin:0; }

.share{ display:flex; align-items:center; gap:12px; }
.share span{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }

.pager{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--line); }
.pager a{ max-width:46%; }
.pager span{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.pager b{ font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; }
.pager a:hover b{ color:var(--brand); }

.brand-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.brand-strip div{
  background:var(--ink); padding:30px 16px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.32);
  transition:color var(--dur) var(--ease);
}
.brand-strip div:hover{ color:var(--brand); }

.error-code{
  font-family:var(--font-display); font-size:clamp(6rem,22vw,16rem); font-weight:700;
  line-height:.86; color:transparent; -webkit-text-stroke:2px var(--brand);
}

/* ---------- 21. Reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.40s; }

/* ---------- 22. Utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; } .mt-64{ margin-top:64px; }
.mb-0{ margin-bottom:0; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; } .mb-40{ margin-bottom:40px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.flow > * + *{ margin-top:20px; }

/* ---------- 23. Responsive ----------
   Ladder: 1440 / 1200 / 1080 (nav → burger) / 900 / 700 / 560 / 400.
   Everything above is written mobile-safe first; these only reflow. */

/* --- Large desktops: let the shell breathe rather than stranding it mid-screen --- */
@media (min-width:1440px){
  :root{ --wrap:1340px; --header-h:92px; }
  .container--wide{ max-width:1600px; }
}

/* --- Laptop: nav is the tightest thing on the page, so shrink it first --- */
@media (max-width:1200px){
  .nav__link{ padding:10px 10px; font-size:.97rem; letter-spacing:.07em; }
  .nav__link::after{ left:10px; right:10px; }
  .brand__tag{ letter-spacing:.24em; }
  .footer__grid{ grid-template-columns:1.3fr 1fr 1fr; }
  .footer__grid > div:last-child{ grid-column:1 / -1; }
  .sched__row{ grid-template-columns:110px 1.5fr 1fr auto; }
  .sched__room{ display:none; }
  .sched--compare .sched__row{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
}

/* --- Small laptop / large tablet: nine nav items no longer fit --- */
@media (max-width:1080px){
  :root{ --header-h:76px; }
  .nav{ display:none; }
  .burger{ display:grid; place-items:center; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .class-card--feature{ grid-template-columns:1fr; }
  .class-card--feature .class-card__media{ min-height:0; aspect-ratio:16/9; }
}

/* --- Tablet --- */
@media (max-width:900px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .hero__scroll{ display:none; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery__item--wide{ grid-column:span 2; }
  .choices{ grid-template-columns:repeat(2,1fr); }
  .brand-strip{ grid-template-columns:repeat(3,1fr); }
  .media-frame__badge{ right:0; bottom:-10px; }
  .marquee__item{ font-size:1.3rem; }
  .marquee__group{ gap:34px; padding-right:34px; }
  .marquee__item{ gap:34px; }
}

/* --- Large phone --- */
@media (max-width:700px){
  .section-head--row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .gallery__item--wide,.gallery__item--tall{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; }

  /* Timetable rows become stacked cards; the header row has nothing left to label. */
  .sched__row{ grid-template-columns:1fr; gap:5px; padding:18px; }
  .sched__row--head{ display:none; }
  .sched__room{ display:block; }
  .sched__spots{ margin-top:6px; }

  /* Comparison rows keep their meaning via the plan name on each value. */
  .sched--compare .sched__row{ grid-template-columns:1fr; gap:8px; }
  .sched--compare .sched__feat{
    font-family:var(--font-display); font-size:1.15rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .sched--compare [data-plan]{ display:flex; justify-content:space-between; gap:16px; font-size:.92rem; }
  .sched--compare [data-plan]::before{
    content:attr(data-plan);
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--text-dim); font-weight:400;
  }

  .bmi__grid{ grid-template-columns:1fr; }
  .media-stack{ grid-template-columns:1fr; }
  .media-stack img{ aspect-ratio:16/10; }
  .media-stack img:first-child{ margin-top:0; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer__grid > div:first-child,
  .footer__grid > div:last-child{ grid-column:1 / -1; }
  .author-box{ flex-direction:column; }
  .pager a{ max-width:100%; }
  .quote__text{ font-size:1.35rem; }
  .quote__who{ flex-direction:column; text-align:center; gap:12px; }
  .btn{ padding:14px 24px; font-size:.95rem; }
  .note-strip{ flex-direction:column; align-items:flex-start; padding:24px; }
  .note-strip .btn{ width:100%; }
  .lightbox{ padding:64px 12px; }
  .lightbox__prev{ left:10px; }
  .lightbox__next{ right:10px; }
  .acc__btn{ font-size:1.08rem; padding:20px 0; }
  .plan{ padding:32px 24px; }
  .feature{ padding:28px 22px; }
  .info-tile{ padding:24px; }
}

/* --- Small phone --- */
@media (max-width:560px){
  .header__actions .btn{ display:none; }   /* burger carries the CTA from here down */
  .choices{ grid-template-columns:1fr; }
  .brand-strip{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__actions .btn,
  .cta-band .btns .btn{ width:100%; }      /* full-width tap targets */
  .hero__actions,.cta-band .btns{ flex-direction:column; align-items:stretch; }
  .filters,.tabs{ gap:6px; }
  .tab{ padding:11px 16px; font-size:.92rem; }
  .meta-row{ gap:14px; }
  .spec-list li{ flex-direction:column; gap:4px; }
  .share{ flex-wrap:wrap; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }
  .to-top{ right:14px; bottom:14px; }
}

/* --- Very small phone (360px and under) --- */
@media (max-width:440px){
  /* "Save 2 months" drops under the toggle rather than squeezing beside it. */
  .billing-toggle{ display:flex; flex-wrap:wrap; justify-content:center; }
  .billing-toggle .save{ flex:1 0 100%; order:-1; text-align:center; padding:0 0 8px; }
}
@media (max-width:400px){
  :root{ --header-h:66px; }
  .brand__name{ font-size:1.3rem; }
  .brand__mark{ width:32px; height:32px; font-size:1.15rem; }
  .hero__stats{ grid-template-columns:1fr; gap:20px; padding-top:24px; }
  .mobile-menu__link{ font-size:1.3rem; padding:12px 0; }
  .footer__news{ flex-direction:column; gap:8px; }
  .footer__news button{ padding:14px 20px; }
  .marquee__item{ font-size:1.1rem; }
  .gallery__item--wide,.gallery__item--tall,.gallery__item{ aspect-ratio:3/2; }
}

/* ---------- 24. Print ---------- */
@media print{
  .header,.mobile-menu,.search,.to-top,.footer,.cta-band,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding:20px 0; }
}