/* =============================================================================
   SculptHER by Riana Lenae — 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: 44px; width: auto; transition: height .3s var(--ease); }
.nav.scrolled .nav__logo-img { height: 36px; }
.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: 100vh; min-height: 100dvh; 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; }
/* Wordmark only (no RL mark) so the monogram is not read twice in one screen:
   the nav lockup already carries it. At 3.77:1 this reads wider than the square
   lockup while costing 88px of hero height instead of 191px, which keeps the
   $200 / $899 buttons above the fold. */
.hero__lockup { display: block; width: clamp(240px, 24vw, 330px); height: auto; margin-bottom: 1.25rem; }
.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
   ========================================================================== */
/* About me: photo beside the story, matching the coaching section's proportions.
   Body copy uses --text rather than --muted: this is the page's main narrative
   and the muted grey reads as secondary. */
.about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about__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); }
.about__title { margin: 0.9rem 0 1.5rem; }
.about__body { color: var(--text); line-height: 1.85; margin-bottom: 1.2rem; }
.about__body:last-child { margin-bottom: 0; }

.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); }
/* Per-photo framing. The grid crops a square out of tall portrait shots, so a
   few need their focal point moved off the default top edge. */
/* back-view photo in the grid: frame the glutes & legs, not the head */
.vthumb img[src*="IMG_00060"] { object-position: center 70%; }
/* 9:16 frame with a doorway above her head: drop the crop so the square starts
   near the subject rather than the ceiling */
.vthumb img[src*="IMG_0667"] { object-position: center 15%; }
.results__slide img[src*="IMG_0667"] { object-position: center 14%; }
.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:hover img { transform: scale(1.08); filter: grayscale(0) contrast(1.05); }
.vthumb:hover::after { opacity: 1; }

/* =============================================================================
   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
   ========================================================================== */
/* =============================================================================
   LEGAL PAGES (privacy.html, terms.html) — static, no JS
   ========================================================================== */
.legal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem var(--pad-x); border-bottom: 1px solid var(--line); }
.legal-bar img { display: block; height: 40px; width: auto; }
.legal-bar a.legal-back { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.legal-bar a.legal-back:hover { color: var(--text); }
.legal { max-width: 720px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-x) clamp(3rem, 8vw, 6rem); }
.legal h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin-bottom: 0.75rem; }
.legal .updated { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.05rem; letter-spacing: 0.02em; margin: 2.4rem 0 0.7rem; }
.legal p, .legal li { color: var(--muted); line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1rem 1.15rem; }
.legal li { margin-bottom: 0.45rem; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal .callout { padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); }
.legal .callout p:last-child { margin-bottom: 0; }
.legal .callout h2 { margin-top: 0; }
.legal-foot { border-top: 1px solid var(--line); padding: 2rem var(--pad-x); text-align: center; color: var(--muted); font-size: 0.85rem; }

/* =============================================================================
   CONTACT FORM
   ========================================================================== */
.contact__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.contact__title { margin-bottom: 1rem; }
.contact__sub { margin-inline: auto; margin-bottom: 2.6rem; }
.contact__form { display: grid; gap: 1.4rem; text-align: left; }
.field { display: grid; gap: 0.5rem; }
/* Direct children only: the radio options are also <label>s inside .field--goals,
   and they need sentence case at readable size, not the small-caps field style. */
.field > label, .field legend { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.field input {
  width: 100%; padding: 0.95rem 1.1rem; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}
.field input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.04); }
.field--goals { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--goals legend { padding: 0; margin-bottom: 0.85rem; }
.goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.6rem; }
/* The native radio is hidden rather than removed so it still carries the label
   association, keyboard arrow-key navigation and required validation. */
.goal {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}
.goal:hover { border-color: rgba(255, 255, 255, 0.22); }
.goal input { position: absolute; opacity: 0; width: 0; height: 0; }
.goal__mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: border-color .2s; }
.goal__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .18s var(--ease); }
.goal input:checked ~ .goal__mark { border-color: var(--accent); }
.goal input:checked ~ .goal__mark::after { transform: scale(1); }
.goal input:focus-visible ~ .goal__mark { box-shadow: 0 0 0 3px rgba(255, 46, 116, 0.35); }
.goal:has(input:checked) { border-color: var(--accent); background: rgba(255, 46, 116, 0.06); }
.goal__text { font-size: 0.95rem; color: var(--text); line-height: 1.35; }
.final__cta { margin-top: 2rem; }
.contact__submit { justify-self: center; }
.contact__note, .contact__status { margin: 0; font-size: 0.85rem; color: var(--muted); text-align: center; }
.contact__status:empty { display: none; }
.contact__status.is-ok { color: var(--text); }
.contact__status.is-error { color: var(--accent); }

.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, .about__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, .about__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) */
  /* dvh, not svh. svh is the height with the browser toolbars SHOWING; on iOS
     the toolbars collapse after load and the visible area grows (measured on an
     iPhone: visualViewport 684 -> 874), leaving an svh hero 190px short of the
     screen and letting the next section peek in under it. dvh tracks the
     current state. The plain vh line is a fallback for browsers without dvh. */
  .hero { min-height: 100vh; min-height: 100dvh; 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: 34px; }
  .hero__lockup { width: clamp(200px, 62vw, 260px); margin-bottom: 1.4rem; }
}

@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; }
}