/* ============================================================
   VOLT — case study landing page
   Design tokens pulled from the product mockups: near-black
   canvas, neon-lime accent, bold tight-tracked display type.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --bg:            #07080a;
  --bg-soft:       #0b0d09;
  --surface:       #12140d;
  --line:          rgba(255,255,255,.09);
  --line-soft:     rgba(255,255,255,.05);

  --text:          #f4f6ef;
  --text-dim:      #9aa398;
  --text-faint:    #7c8478; /* ~5.2:1 on --bg — passes WCAG AA at the small sizes this token is used at */

  --lime:          #d7ff3d;
  --lime-soft:     #eaffab;
  --lime-glow:     rgba(215,255,61,.28);
  --red:           #ff6a5c;

  --radius-xl:     32px;
  --radius-lg:     24px;
  --radius-full:   999px;

  --ease-out:      cubic-bezier(.16,.84,.32,1);

  --container:     1220px;

  --font-display:  'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-heading:  'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
}

html{
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: auto;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

main{ position: relative; }

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

ul, dl, figure{ margin: 0; padding: 0; list-style: none; }

h1,h2,h3,h4{ margin: 0; font-family: var(--font-heading); font-weight: 400; letter-spacing: 0; }
p{ margin: 0; }

::selection{ background: var(--lime); color: #0a0c08; }

.container{
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

.skip-link{
  position: absolute; left: 12px; top: -60px;
  background: var(--lime); color: #0a0c08; padding: 10px 16px;
  border-radius: var(--radius-full); font-weight: 700; z-index: 10000;
  transition: top .25s var(--ease-out);
}
.skip-link:focus{ top: 12px; }

:focus-visible{ outline: 2px solid var(--lime); outline-offset: 3px; }

/* ============ eyebrow / small labels ============ */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 18px;
}
.eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 10px 2px var(--lime-glow);
}

/* ============ buttons ============ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 15px 28px; border-radius: var(--radius-full);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease-out), background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn--lime{ background: var(--lime); color: #0a0c08; }
.btn--lime:hover{ background: var(--lime-soft); }
.btn--ghost{ background: transparent; border-color: var(--line); color: var(--text); }
.btn--ghost:hover{ border-color: var(--lime); color: var(--lime); }
.btn--text{ padding: 15px 4px; background: none; color: var(--text); gap: 10px; }
.btn--text svg{ transition: transform .3s var(--ease-out); }
.btn--text:hover svg{ transform: translateX(4px); }
.btn--sm{ padding: 10px 20px; font-size: 13.5px; }
.btn--lg{ padding: 18px 34px; font-size: 16px; }

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor{
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--lime);
  pointer-events: none; mix-blend-mode: difference;
  transform: translate3d(-100px,-100px,0);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .25s;
  display: none;
}
.cursor__label{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #0a0c08;
  opacity: 0; transition: opacity .2s;
}
.cursor.is-fine{ display: block; }
.cursor.is-hover{ width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor.is-hover .cursor__label{ opacity: 1; }

/* Only hide the native cursor once the replacement dot is confirmed
   running (main.js adds .cursor-ready) — if the CDN chain or main.js
   fails to load, the OS cursor stays put instead of vanishing. */
@media (pointer: fine){
  .cursor-ready body{ cursor: none; }
  .cursor-ready a, .cursor-ready button{ cursor: none; }
}

/* ============================================================
   Preloader
   ============================================================ */
.preloader{
  /* Hidden by default: only shown once the "js" class (set by an inline
     script in <head>, before body paints) confirms scripting is on — a
     true no-JS visitor never gets a black overlay with nothing to
     remove it. */
  display: none;
  position: fixed; inset: 0; z-index: 10001;
  background: var(--bg);
  align-items: center; justify-content: center;
  pointer-events: none;
}
.js .preloader{ display: flex; }
.preloader.is-done{ display: none; }
.preloader__bolt path{
  stroke-dasharray: 140; stroke-dashoffset: 140;
}

/* ============================================================
   Progressive enhancement fallback
   reveal-up / split-word / reveal-line stay visible without JS,
   JS adds the "js" class + "is-ready" to arm the hidden states.
   ============================================================ */
.reveal-up, .split-word, .reveal-line{ opacity: 1; transform: none; }

.js .reveal-up{ opacity: 0; transform: translateY(28px); }
.js.is-ready .reveal-up.in{ opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

.js .split-word{ opacity: 0; transform: translateY(60%) rotate(4deg); display: inline-block; }
.js.is-ready .split-word.in{ opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

.js .reveal-line{ display: inline-block; opacity: 0; transform: translateY(100%); }
.js.is-ready .reveal-line.in{ opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.hero__title .line{ display: block; overflow: hidden; }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 22px 0;
  transition: padding .35s var(--ease-out), background .35s, backdrop-filter .35s, transform .4s var(--ease-out), border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding: 14px 0;
  background: rgba(7,8,10,.72);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav.is-hidden{ transform: translateY(-100%); }

.nav__inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.nav__logo{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: .02em;
}

.nav__links{ display: flex; gap: 34px; }
.nav__links a{
  font-size: 14px; font-weight: 600; color: var(--text-dim);
  position: relative; padding: 4px 0;
  transition: color .25s;
}
.nav__links a::after{
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--lime); transition: right .3s var(--ease-out);
}
.nav__links a:hover{ color: var(--text); }
.nav__links a:hover::after{ right: 0; }

.nav__actions{ display: flex; align-items: center; gap: 14px; }
.nav__actions .btn--ghost{ display: none; }

.nav__toggle{
  display: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer;
}
.nav__toggle span{ width: 15px; height: 1.5px; background: var(--text); transition: transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 480;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
}
.mobile-menu.is-open{ opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.mobile-menu nav{ display: flex; flex-direction: column; align-items: center; gap: 28px; }
.mobile-menu a{ font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--text); }
/* .btn--lime (single class) is less specific than ".mobile-menu a" above,
   so without this the link color rule would win and wash out the
   button's intended dark-on-lime text. */
.mobile-menu a.btn--lime{ color: #0a0c08; }
.mobile-menu a.btn{ font-size: 17px; margin-top: 12px; }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 150px 0 90px;
  overflow: hidden;
}

/* A real, clearly-visible training photo IS the hero — not a dim
   backdrop behind an app screenshot. The scrim is a directional
   gradient (dark where the headline sits, lighter elsewhere) rather
   than a flat overlay, so the room stays readable as a real gym.
   The source is a high-resolution 2000x1600 photo and object-fit only
   ever scales it down at normal viewport widths, so it stays sharp. */
.hero__photo{ position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050604; }
.hero__photo img{
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 20%;
  filter: grayscale(8%) brightness(.82) contrast(1.06) saturate(1.05);
}
.hero__photo::after{
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 180px 50px rgba(5,6,4,.75);
  background:
    linear-gradient(100deg, rgba(5,6,4,.9) 0%, rgba(5,6,4,.6) 30%, rgba(5,6,4,.22) 56%, rgba(5,6,4,.48) 100%),
    linear-gradient(to top, rgba(5,6,4,.7), transparent 42%);
}

.hero__glow{
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(50% 45% at 78% 78%, var(--lime-glow), transparent 68%),
    radial-gradient(35% 35% at 10% 20%, rgba(215,255,61,.08), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.hero__inner{ position: relative; z-index: 1; }

.hero__copy{ max-width: 620px; }

.hero__title{
  text-transform: uppercase;
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: .96;
  margin: 0 0 26px;
  text-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.reveal-line--lime{ color: var(--lime); }

.hero__sub{
  max-width: 480px; font-size: 17px; color: var(--text-dim); margin-bottom: 34px;
  text-shadow: 0 4px 16px rgba(0,0,0,.6);
}

.hero__cta{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

.hero__meta{ font-size: 13px; color: var(--text-faint); letter-spacing: .01em; }

/* Small floating "also in the app" card — a supporting detail, not
   the hero's main event. */
.hero__visual{
  position: absolute; z-index: 2; right: clamp(60px, 6vw, 120px); bottom: 64px;
  width: min(320px, 26vw);
  will-change: transform;
}
/* Narrower desktop widths put the subject's head closer to this
   corner — scale the card down a touch and tuck it lower so it never
   crowds the photo; wide screens keep the full-size version above. */
@media (min-width: 1081px) and (max-width: 1600px){
  .hero__visual{ width: min(230px, 19vw); right: clamp(30px, 4vw, 70px); bottom: 40px; }
}
.hero__img{
  width: 100%; height: auto;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(215,255,61,.12));
}
.hero__visual-label{
  margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-dim);
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.hero__visual-label span{
  display: block; color: var(--lime); font-weight: 700; font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 5px;
}

.hero__scrollcue{
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 1;
}
.hero__scrollcue span{
  font-size: 10.5px; letter-spacing: .22em; color: var(--text-faint); writing-mode: vertical-rl;
}
.hero__scrollcue i{
  width: 1px; height: 46px; background: linear-gradient(var(--lime), transparent);
  display: block; position: relative; overflow: hidden;
}
.js .hero__scrollcue i::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: linear-gradient(var(--text-faint), transparent);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden; padding: 20px 0;
  position: relative; z-index: 1;
}
.marquee__track{ display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__group{ display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.marquee span{
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .02em; color: var(--text-dim); text-transform: uppercase;
}
.marquee b{ color: var(--lime); font-weight: 400; font-size: 13px; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* ============================================================
   Intro / story
   ============================================================ */
.intro{ padding: 180px 0 140px; }

.intro__heading{
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.14;
  max-width: 15ch;
  margin-bottom: 72px;
}
.split-word--lime{ color: var(--lime); }

.intro__row{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px;
}
.intro__copy{ font-size: 19px; line-height: 1.65; color: var(--text-dim); max-width: 46ch; }
.intro__copy em{ color: var(--text); font-style: normal; }

/* Photo sits flush with the paragraph's top edge; the facts list's own
   top border separates it from the photo, not from the paragraph —
   keeps both columns starting at the same baseline. */
.intro__side{ display: flex; flex-direction: column; gap: 32px; }
.intro__photo{
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5;
  max-width: 300px; margin-left: auto; background: var(--surface);
}
.intro__photo img{
  width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%;
  filter: grayscale(45%) brightness(.85) contrast(1.1) saturate(.9);
}

.meta-grid{ display: grid; gap: 22px; border-top: 1px solid var(--line); padding-top: 26px; }
.meta-grid > div{ display: flex; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.meta-grid dt{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.meta-grid dd{ margin: 0; font-weight: 600; font-size: 15px; text-align: right; }

/* ============================================================
   Connector line — a hand-drawn-style path that links the About
   photo to its facts, then bridges down into the Studios heading.
   Endpoints are measured from real DOM elements at runtime (see
   initConnectors in main.js) rather than hardcoded, so it stays
   accurate across content reflow; desktop-only, GSAP-drawn on scroll.
   ============================================================ */
.connector-dot{
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 14px 3px var(--lime-glow);
  margin: -48px 0 0 6px;
}
#connectorDotB{ margin: 18px 0 0 auto; }

.connector-svg{
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; overflow: visible;
}
.connector-svg__path{
  fill: none; stroke: var(--text); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: .8;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
}

@media (max-width: 1080px){
  .connector-dot, .connector-svg{ display: none; }
}

/* ============================================================
   Studios — real facility photography
   ============================================================ */
.studios{ padding: 40px 0 140px; }
.studios__head{ max-width: 620px; margin-bottom: 56px; }
.studios__heading{ font-size: clamp(30px, 5vw, 58px); line-height: 1.08; margin-bottom: 20px; }
.studios__text{ color: var(--text-dim); font-size: 17px; line-height: 1.6; }

.studios__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.studio-photo{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; background: var(--surface);
}
.studio-photo img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(35%) brightness(.72) contrast(1.12) saturate(1.05);
  transition: filter .5s var(--ease-out), transform .6s var(--ease-out);
}
.studio-photo:hover img{ filter: grayscale(10%) brightness(.85) contrast(1.1) saturate(1.1); transform: scale(1.05); }
.studio-photo::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5,6,4,.88), transparent 58%);
}
.studio-photo__label{ position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.studio-photo__label span{
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 4px; font-weight: 700;
}
.studio-photo__label strong{ font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text); }

/* ============================================================
   Features (sticky narrative)
   ============================================================ */
.features{ padding: 40px 0; }

.feature{
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  padding: 60px 0;
  max-width: var(--container); margin-inline: auto;
  width: min(100% - 48px, var(--container));
}
.feature--reverse{ direction: rtl; }
.feature--reverse .feature__copy,
.feature--reverse .feature__sticky{ direction: ltr; }

.feature__sticky{ position: sticky; top: 110px; align-self: start; height: fit-content; }

.feature__figure{
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 20%, rgba(215,255,61,.08), transparent 65%);
}
.feature__figure img{ width: 100%; height: auto; }

/* Some feature panels reuse a multi-phone mockup but each spotlights a
   single screen — object-fit:cover + object-position isolates the
   relevant phone within a fixed portrait frame instead of showing the
   whole composite twice. */
.feature__figure--crop{ aspect-ratio: .74; }
.feature__figure--crop img{ width: 100%; height: 100%; object-fit: cover; }
.feature__figure--crop-left img{ object-position: 20% 38%; }
.feature__figure--crop-right img{ object-position: 80% 38%; }

.feature__copy{ align-self: center; padding: 40px 0; }
.feature__title{ font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin-bottom: 22px; }
.feature__text{ color: var(--text-dim); font-size: 16.5px; line-height: 1.7; max-width: 44ch; margin-bottom: 26px; }

.feature__list{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.feature__list li{
  position: relative; padding-left: 22px; font-size: 14.5px; font-weight: 600; color: var(--text);
}
.feature__list li::before{
  content:''; position: absolute; left: 0; top: 8px; width: 8px; height: 2px; background: var(--lime);
}

.feature__stat{
  border-top: 1px solid var(--line); padding-top: 22px;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.feature__stat .count-up{
  font-family: var(--font-display); font-size: 42px; font-weight: 900; color: var(--lime);
}
.feature__stat p{ color: var(--text-faint); font-size: 13.5px; max-width: 22ch; }

/* ---- mini widgets: small, accurate recreations of real app data,
   giving each feature panel its own texture instead of repeating the
   same image + bullet-list pattern six times. ---- */

/* Classes — mini schedule */
.mini-schedule{
  margin: 8px 0 32px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}
.mini-schedule__row{
  display: flex; align-items: center; gap: 16px; padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.mini-schedule__row:last-child{ border-bottom: none; }
.mini-schedule__time{
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
  color: var(--text-dim); width: 58px; flex-shrink: 0; line-height: 1.3;
}
.mini-schedule__info{ flex: 1; min-width: 0; }
.mini-schedule__info strong{ display: block; font-size: 14.5px; font-weight: 700; }
.mini-schedule__info span{ font-size: 12.5px; color: var(--text-faint); }
.mini-schedule__spots{ font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.mini-schedule__spots--low{ color: var(--red); }

/* Check-in — mini capacity meter */
.mini-capacity{
  margin: 8px 0 32px; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface);
}
.mini-capacity__head{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.mini-capacity__bar{ display: flex; gap: 4px; margin-bottom: 12px; }
.mini-capacity__bar span{ flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.mini-capacity__bar span.is-filled{ background: var(--lime); }
.mini-capacity__label{ font-size: 13.5px; color: var(--text-dim); }

/* Progress — mini personal records */
.mini-pr{ margin: 8px 0 32px; }
.mini-pr__row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mini-pr__name{ display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.mini-pr__name svg{ flex-shrink: 0; color: var(--lime); }
.mini-pr__value{ display: flex; align-items: center; gap: 10px; }
.mini-pr__value b{ font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.mini-pr__delta{
  background: rgba(215,255,61,.15); color: var(--lime); font-size: 11.5px;
  font-weight: 800; padding: 3px 9px; border-radius: var(--radius-full);
}

/* Profile — mini consistency grid */
.mini-grid{ margin: 8px 0 32px; }
.mini-grid__head{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 12px;
}
.mini-grid__cells{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.mini-grid__cells span{ aspect-ratio: 1; border-radius: 4px; }
.mini-grid__cells .l0{ background: rgba(255,255,255,.07); }
.mini-grid__cells .l1{ background: rgba(215,255,61,.25); }
.mini-grid__cells .l2{ background: rgba(215,255,61,.55); }
.mini-grid__cells .l3{ background: var(--lime); }

/* Mid-feature photo break — a real training moment between the app
   panels, keeping the physical gym present even in the deep-dive. */
.training-moment{
  position: relative; margin: 100px auto; overflow: hidden;
  border-radius: var(--radius-xl); aspect-ratio: 16/7;
  width: min(100% - 48px, 1400px);
}
.training-moment img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  filter: grayscale(15%) brightness(.6) contrast(1.1);
}
.training-moment::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5,6,4,.9), rgba(5,6,4,.2) 62%);
}
.training-moment__quote{
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center;
  padding: 0 8%; max-width: 640px;
}
.training-moment__quote p{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 2.6vw, 32px); line-height: 1.28; color: var(--text);
}

/* ============================================================
   Showcase — horizontal gallery
   ============================================================ */
.showcase{ padding-top: 140px; }
.section-head{ margin-bottom: 60px; }
.section-head__heading{ font-size: clamp(30px, 5vw, 58px); line-height: 1.08; }

/* Baseline: a natural horizontal-scroll strip. This is what you get
   with no JS, a failed CDN load, reduced motion, or small screens —
   the gallery is always reachable even if the pinned enhancement
   below never applies. */
.showcase__pin{ position: relative; }
.showcase__track{
  display: flex; align-items: center; gap: 5vw;
  padding: 0 6vw 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

/* Enhancement: main.js adds .is-pinned only once ScrollTrigger has
   actually taken over the scroll-linked animation. */
@media (min-width: 761px){
  .showcase__pin.is-pinned{ height: 100vh; overflow: hidden; }
  .showcase__pin.is-pinned .showcase__track{
    height: 100%; padding-bottom: 0; overflow: visible; scroll-snap-type: none;
  }
}

.slide{
  position: relative;
  flex: 0 0 auto;
  width: min(58vw, 640px);
  height: 78vh;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end;
  scroll-snap-align: center;
}
.slide--wide{ width: min(78vw, 960px); }
.slide img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 12%;
  padding: 30px;
}
.slide--wide img{ object-fit: contain; padding: 20px; object-position: center 50%; }
.slide figcaption{
  position: relative; z-index: 1; width: 100%;
  padding: 22px 26px 26px;
  background: linear-gradient(to top, rgba(7,8,10,.92), transparent);
  font-size: 14.5px; color: var(--text-dim); font-weight: 500;
  display: flex; gap: 14px; align-items: baseline;
}
.slide figcaption span{ font-family: var(--font-display); color: var(--lime); font-weight: 800; font-size: 13px; }

/* ============================================================
   Atmosphere / typography wow moment
   ============================================================ */
.atmosphere{
  position: relative;
  height: 170vh;
}
.atmosphere__bg{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.atmosphere__bg::after{
  /* Darkest at center (where the headline sits) so bold type stays
     legible over the phone screenshot instead of competing with it —
     a light vignette at the edges keeps a little of the image visible. */
  content:''; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 48%, rgba(5,6,4,.82), rgba(5,6,4,.94) 100%);
}
.atmosphere__bg img{
  height: 130%; width: auto; max-width: none; opacity: .5; filter: saturate(1.1);
}
.atmosphere__content{
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  z-index: 1;
}
.atmosphere__title{
  font-size: clamp(40px, 8vw, 108px); line-height: .98;
  display: flex; flex-direction: column; gap: 4px;
  text-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.atmosphere__title .lime{ color: var(--lime); }
.atmosphere__text{
  margin-top: 26px; max-width: 46ch; color: var(--text-dim); font-size: 17px; line-height: 1.6;
  text-shadow: 0 4px 20px rgba(0,0,0,.7);
}

/* ============================================================
   Membership / atmosphere shift
   ============================================================ */
.membership{
  position: relative; padding: 160px 0; overflow: hidden;
}
.membership__glow{
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(55% 60% at 78% 50%, var(--lime-glow), transparent 70%);
  opacity: 0; transition: opacity 1.1s var(--ease-out);
}
.membership.in-atmosphere .membership__glow{ opacity: 1; }

.membership__inner{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr .95fr; gap: 60px; align-items: center;
}

.membership__title{ font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; margin-bottom: 36px; }

.membership__included{ display: flex; flex-direction: column; margin-bottom: 40px; }
.membership__included li{
  display: flex; justify-content: space-between; padding: 16px 0;
  border-bottom: 1px solid var(--line); font-size: 15.5px;
}
.membership__included li span{ font-weight: 600; }
.membership__included li em{ font-style: normal; color: var(--text-faint); }

.membership__card-wrap{ perspective: 1200px; display: flex; justify-content: center; }
.membership__card{
  width: min(100%, 420px); aspect-ratio: 1.58/1;
  background: linear-gradient(150deg, var(--lime-soft), var(--lime) 60%);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  color: #0a0c08;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 40px 90px -20px rgba(215,255,61,.35);
  transform: rotateX(6deg) rotateY(-10deg);
  transition: transform .4s var(--ease-out);
  will-change: transform;
}
.membership__card-top{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
}
.membership__card-logo{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 15px; font-weight: 900; letter-spacing: .03em; }
.membership__card-name{ font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 10px 0 0; }
.membership__card-id{ font-size: 13px; font-weight: 600; opacity: .7; margin-top: 4px; }
.membership__card-bottom{ display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; opacity: .8; }

/* ============================================================
   Stats band
   ============================================================ */
.stats{ padding: 60px 0 150px; }
.stats__row{
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stat{
  padding: 40px 24px; text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right: none; }
.stat .count-up{
  display: block; font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px);
  font-weight: 900; color: var(--text); margin-bottom: 10px;
}
.stat p{ color: var(--text-faint); font-size: 13.5px; letter-spacing: .02em; }

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta{
  position: relative; padding: 170px 0 150px; text-align: center; overflow: hidden;
}
.final-cta__glow{
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background: radial-gradient(55% 60% at 50% 30%, var(--lime-glow), transparent 70%);
}
.final-cta__inner{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.final-cta__title{ font-size: clamp(38px, 7vw, 84px); line-height: 1.02; margin-bottom: 42px; }
.final-cta__actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.final-cta__fine{ color: var(--text-faint); font-size: 13.5px; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ border-top: 1px solid var(--line); padding: 80px 0 30px; }
.footer__inner{
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 60px;
}
.footer__brand p{ margin-top: 14px; color: var(--text-faint); font-size: 14px; max-width: 22ch; }
.footer__col h4{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; font-family: var(--font-body); font-weight: 700; }
.footer__col a{ display: block; color: var(--text-dim); font-size: 14.5px; padding: 7px 0; transition: color .2s; }
.footer__col a:hover{ color: var(--lime); }

.footer__bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-faint);
}
.footer__top{
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; color: var(--text-faint); font-size: 13px; cursor: pointer;
  font-family: var(--font-body);
}
.footer__top:hover{ color: var(--lime); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px){
  .hero{ padding-top: 130px; }

  .intro__row{ grid-template-columns: 1fr; gap: 40px; }
  .intro__side{ max-width: 480px; }
  .intro__photo{ margin-left: 0; max-width: 220px; }

  .studios__grid{ grid-template-columns: repeat(2, 1fr); }

  .feature, .feature--reverse{ direction: ltr; grid-template-columns: 1fr; gap: 30px; }
  .feature__sticky{ position: relative; top: 0; max-width: 420px; margin-inline: auto; }
  .feature__copy{ padding: 0; }

  .footer__inner{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

@media (max-width: 760px){
  .nav__links{ display: none; }
  .nav__actions .btn--lime{ display: none; }
  .nav__toggle{ display: flex; }

  .hero{ padding-top: 120px; padding-bottom: 60px; }
  .hero__cta{ flex-direction: column; align-items: stretch; }
  .hero__cta .btn{ width: 100%; text-align: center; }
  .hero__cta .btn--text{ justify-content: center; }
  .hero__photo img{ object-position: 48% 30%; }
  .hero__photo::after{
    background:
      linear-gradient(to bottom, rgba(5,6,4,.35) 0%, rgba(5,6,4,.55) 38%, rgba(5,6,4,.94) 62%, rgba(5,6,4,.97) 100%);
  }
  .hero__visual{ position: static; width: 190px; margin: 40px auto 0; }

  .intro{ padding: 110px 0 90px; }
  .intro__heading{ margin-bottom: 46px; max-width: none; }

  .training-moment{ aspect-ratio: 4/5; margin: 70px auto; }
  .training-moment__quote{ padding: 0 26px; max-width: none; }

  .studios{ padding: 20px 0 90px; }
  .studios__grid{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72vw;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 0 24px;
  }
  .studio-photo{ scroll-snap-align: center; aspect-ratio: 4/5; }

  .showcase{ padding-top: 90px; }
  .showcase__track{ padding: 0 24px 20px; }
  .slide{ width: 82vw; height: 60vh; }
  .slide--wide{ width: 88vw; }

  .atmosphere{ height: auto; }
  .atmosphere__bg{ position: relative; height: 70vh; }
  .atmosphere__content{ position: relative; height: auto; padding: 70px 0; }

  .membership{ padding: 110px 0; }
  .membership__inner{ grid-template-columns: 1fr; gap: 50px; }
  .membership__card{ transform: none; }

  .stats__row{ grid-template-columns: 1fr 1fr; }
  .stat{ border-right: none; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n){ border-right: none; }

  .final-cta{ padding: 120px 0 100px; }

  .footer__inner{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal-up, .js .split-word, .js .reveal-line{ opacity: 1 !important; transform: none !important; }
  .marquee__track{ animation: none; }
}