/* =============================================================================
   Fitness Landing Template — styles
   Theme colors + display font are injected at runtime from content.js into the
   CSS variables below (see js/main.js). The values here are fallbacks.
   ========================================================================== */

:root {
  --bg:      #0b0b0c;
  --text:    #f4f4f0;
  --accent:  #d7ff3e;
  --font-display: 'Anton', sans-serif;

  /* derived / fixed */
  --surface: #141416;
  --surface-2: #1c1c1f;
  --muted:   #9a9a96;
  --line:    rgba(255, 255, 255, 0.10);
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 10vw, 9rem);
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html, body { overscroll-behavior-x: none; max-width: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- grain / atmosphere --------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shared --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; }
.display-xl { font-size: clamp(2.75rem, 8.5vw, 7rem); }
.display-lg { font-size: clamp(2.25rem, 6vw, 4.75rem); }
.display-md { font-size: clamp(1.75rem, 4vw, 3rem); }

.lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 52ch; }

section { padding-block: var(--section-y); }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  --b: var(--accent);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem; font-family: var(--font-body); font-weight: 800;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius); transition: transform .25s var(--ease), background .25s, color .25s;
  will-change: transform;
}
.btn--solid  { background: var(--accent); color: #0a0a0a; }
.btn--solid:hover  { transform: translateY(-3px); }
.btn--outline { border: 1.5px solid var(--line); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.btn--ghost { padding-inline: 0; color: var(--accent); }
.btn--ghost::after { content: "→"; transition: transform .25s var(--ease); }
.btn--ghost:hover::after { transform: translateX(6px); }

/* price pill button */
.price-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.85rem 1.5rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.price-btn:hover { border-color: var(--accent); transform: translateY(-3px); }
.price-btn .pb-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.price-btn .pb-price { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.price-btn .pb-cur { font-size: 0.7rem; color: var(--muted); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* =============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--pad-x);
  transition: padding .3s var(--ease), background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding-block: 0.85rem;
  background: rgba(11, 11, 12, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__logo { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; }
/* Logo art shrinks with the nav's own scroll shrink so the bar height stays stable. */
.nav__logo-img { display: block; height: 38px; width: auto; transition: height .3s var(--ease); }
.nav.scrolled .nav__logo-img { height: 32px; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--text); }
/* keep the JOIN NOW button's own dark text at rest AND on hover (it out-ranks the link-hover rule) */
.nav__links a.nav__cta, .nav__links a.nav__cta:hover { color: #0a0a0a; }
.nav__cta { padding: 0.7rem 1.3rem; font-size: 0.78rem; }

.nav__burger { display: none; flex-direction: column; gap: 5px; width: 30px; height: 22px; justify-content: center; }
.nav__burger span { height: 2px; width: 100%; background: var(--text); transition: transform .3s var(--ease), opacity .3s; }
.nav.open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding-top: clamp(7rem, 14vh, 11rem); padding-bottom: var(--section-y);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title { margin-bottom: 1.6rem; }
.hero__title .accent { color: var(--accent); }
.hero__sub { margin-bottom: 2.4rem; }
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 603 / 803; object-fit: cover; object-position: center top; border-radius: var(--radius);
  filter: grayscale(0.15) contrast(1.05);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(180deg, transparent 84%, rgba(11,11,12,0.4));
}
/* offset accent frame behind hero image */
.hero__media::before {
  content: ""; position: absolute; inset: -14px -14px auto auto; width: 65%; height: 70%;
  border: 2px solid var(--accent); border-radius: var(--radius); z-index: -1; opacity: 0.5;
}
/* The intro wipe animates clip-path on .hero__media, which also clips this frame
   (it sits 14px outside the box). Hold it at 0 while the wipe runs, then fade it
   in when JS adds .is-framed. Only applies when the scripted intro is active. */
.hero-anim .hero__media::before { opacity: 0; transition: opacity 0.7s ease; }
.hero-anim .hero__media.is-framed::before { opacity: 0.5; }
.hero__scroll { position: absolute; bottom: 2rem; left: var(--pad-x); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
.hero__scroll::before { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); }

/* =============================================================================
   FEATURE SPLITS
   ========================================================================== */
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.feature--left .feature__media { order: -1; }
.feature__media { position: relative; }
.feature__media img, .feature__media video { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); filter: grayscale(0.1) contrast(1.04); display: block; }
.feature__badge {
  position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem; background: var(--accent); color: #0a0a0a; border-radius: 999px;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.feature__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0a0a0a; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.feature__title { margin-bottom: 1.2rem; }
.feature__body { margin-bottom: 2rem; }

/* =============================================================================
   SERVICES / WHAT YOU GET
   ========================================================================== */
.services__head { max-width: 64ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.services__head .display-lg { margin: 0.8rem 0 0.6rem; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.svc {
  position: relative; padding: 2.25rem 1.85rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease), background .3s;
}
.svc::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.svc:hover { border-color: var(--accent); transform: translateY(-5px); }
.svc:hover::before { transform: scaleY(1); }
.svc__num { display: block; font-family: var(--font-display); font-size: 1.85rem; line-height: 1; color: var(--accent); margin-bottom: 1.1rem; }
.svc__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); text-transform: uppercase; line-height: 1; margin-bottom: 0.75rem; }
.svc__body { color: var(--muted); font-size: 0.98rem; }

/* =============================================================================
   VIDEO GRID
   ========================================================================== */
.vgrid__head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.vgrid__head .display-md { margin: 0.8rem 0 0.6rem; }
.vgrid__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.vthumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease), filter .4s; filter: grayscale(0.35) contrast(1.05); }
/* back-view photo in the grid: frame the glutes & legs, not the head */
.vthumb img[src*="IMG_00060"] { object-position: center 70%; }
.vthumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5)); opacity: 0; transition: opacity .4s; }
.vthumb__play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(4px);
  display: grid; place-items: center; transform: scale(0.8); opacity: 0; transition: transform .4s var(--ease), opacity .4s, background .3s;
}
.vthumb__play::before { content: ""; border-left: 13px solid var(--text); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.vthumb:hover img { transform: scale(1.08); filter: grayscale(0) contrast(1.05); }
.vthumb:hover::after { opacity: 1; }
.vthumb:hover .vthumb__play { transform: scale(1); opacity: 1; background: var(--accent); }
.vthumb:hover .vthumb__play::before { border-left-color: #0a0a0a; }

/* =============================================================================
   COACHING
   ========================================================================== */
.coaching { background: var(--surface); border-block: 1px solid var(--line); }
.coaching__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.coaching__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--radius); filter: grayscale(0.15) contrast(1.05); }
.coaching__title { margin-bottom: 1.2rem; }
.coaching__body { margin-bottom: 2rem; }

/* =============================================================================
   FAQ
   ========================================================================== */
.faq__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.faq__list { max-width: 880px; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.01em;
  transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__icon { flex: none; position: relative; width: 22px; height: 22px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); inset: 0; margin: auto; transition: transform .3s var(--ease); }
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after  { width: 2px; height: 100%; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__answer { overflow: hidden; color: var(--muted); padding-bottom: 1.5rem; max-width: 70ch; }

/* =============================================================================
   RESULTS CAROUSEL (Swiper)
   ========================================================================== */
.results { background: var(--surface); border-block: 1px solid var(--line); overflow: hidden; }
.results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.results__head .sub { color: var(--accent); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; }
.results .swiper { overflow: visible; }
.results__slide { aspect-ratio: 9 / 11; border-radius: var(--radius); overflow: hidden; }
.results__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(0.2) contrast(1.05); transition: filter .4s; }
.swiper-slide-active .results__slide img { filter: grayscale(0) contrast(1.05); }
.results__nav { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.results__arrow { width: 52px; height: 52px; border: 1.5px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color .25s, background .25s, color .25s; }
.results__arrow:hover { border-color: var(--accent); background: var(--accent); color: #0a0a0a; }
.results__arrow svg { width: 18px; height: 18px; }
.results__count { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.05em; }
.results__count .sep { color: var(--muted); margin-inline: 0.3rem; }
.results__count .total { color: var(--muted); }

/* =============================================================================
   FINAL CTA
   ========================================================================== */
.final { text-align: center; }
.final__inner { max-width: 760px; margin-inline: auto; }
.final__title { margin-bottom: 1rem; }
.final__title .accent { color: var(--accent); }
.final__sub { color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; font-size: 0.9rem; margin-bottom: 2.4rem; }
.final .btn-row { justify-content: center; }

/* =============================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 2.5rem; align-items: start; }
.footer__logo { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.8rem; }
.footer__logo-img { display: block; width: 200px; max-width: 100%; height: auto; }
.footer__tag { color: var(--muted); max-width: 32ch; font-size: 0.95rem; }
.footer__col h4 { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.footer__col a { display: block; padding: 0.3rem 0; color: var(--text); opacity: 0.85; transition: color .2s, opacity .2s; }
.footer__col a:hover { color: var(--accent); opacity: 1; }
.footer__socials { display: flex; gap: 0.75rem; }
.footer__socials a { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color .25s, background .25s, color .25s; }
.footer__socials a:hover { border-color: var(--accent); background: var(--accent); color: #0a0a0a; }
.footer__socials svg { width: 18px; height: 18px; }
.footer__credit { grid-column: 1 / -1; padding-top: 2.5rem; margin-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }

/* =============================================================================
   MOTION POLISH — smooth scroll, marquee, hover micro-interactions
   ========================================================================== */
/* Lenis smooth scroll */
html.lenis-on, html.lenis-on body { height: auto; }
html.lenis-on { scroll-behavior: auto !important; }
html.lenis-on.lenis-stopped { overflow: hidden; }

/* credential marquee band */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding-block: 1.05rem; }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item { font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: 0.05em; text-transform: uppercase; padding-inline: 1.4rem; white-space: nowrap; }
.marquee__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* slow Ken Burns drift for the mobile hero photo */
@keyframes hero-kenburns { from { transform: scale(1.03); } to { transform: scale(1.14); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* clip-reveal targets need a stable paint box */
.feature__media, .coaching__media, .vthumb, .hero__media { will-change: clip-path, transform; }
/* clip parallax-scaled media so it can't spill past the viewport (mobile side-drag fix) */
.feature__media, .coaching__media { overflow: hidden; }

/* button hover: invert to light + accent glow */
.btn--solid:hover { background: var(--text); color: #0a0a0a; box-shadow: 0 12px 40px -10px color-mix(in srgb, var(--accent) 55%, transparent); }

/* nav link underline sweep */
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =============================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 920px) {
  .feature__grid, .coaching__grid { grid-template-columns: 1fr; }
  .feature--left .feature__media { order: -1; }
  .vgrid__items { grid-template-columns: repeat(2, 1fr); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* Mobile hero: full-bleed photo with the copy overlaid (bold, editorial) */
  .hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 0; }
  .hero__grid { display: block; width: 100%; padding-bottom: 2.6rem; }
  .hero__copy { position: relative; z-index: 2; }
  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__media::before { display: none; }                 /* hide offset accent frame */
  .hero__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; border-radius: 0;
    /* Pin the zoom origin to the top edge. With an origin partway down the frame,
       scaling pushes the photo's top edge above the viewport and shears off the
       top of her head (this hero has almost no headroom). Anchored at top, the
       zoom travels downward instead, cropping the feet — which sit behind the
       overlaid copy and gradient. */
    transform-origin: center top; animation: hero-kenburns 18s ease-in-out infinite alternate; will-change: transform; }
  .hero__media::after { inset: 0; border-radius: 0;
    background: linear-gradient(180deg, rgba(11,11,12,0.6) 0%, rgba(11,11,12,0.05) 24%, rgba(11,11,12,0.5) 50%, rgba(11,11,12,0.97) 100%); }
  .hero__sub { max-width: 38ch; margin-bottom: 1.5rem; }
  .hero__scroll { display: none; }
}

@media (max-width: 768px) {
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem;
    background: var(--surface); padding: 2rem var(--pad-x);
    transform: translateX(100%); transition: transform .4s var(--ease); border-left: 1px solid var(--line);
  }
  .nav.open .nav__links { transform: translateX(0); }
  .nav__links a { font-size: 1rem; }
  .nav__burger { display: flex; z-index: 110; }
  .nav__logo-img, .nav.scrolled .nav__logo-img { height: 30px; }
}

@media (max-width: 540px) {
  .vgrid__items { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .price-btn { flex: 1; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}