/* ============================================================
   [STUDIO NAME] — design-led, AI-powered
   Palette sampled from footage: near-black base, magenta/lilac glow
   ============================================================ */

:root {
  --bg-dark: #0c0a0f;
  --bg-darker: #070608;
  --bg-panel: #14101a;
  --text-on-dark: #f3eef7;
  --text-muted: #b9a9c6;
  --text-dim: #8a7a98;
  --accent: #d98bff;
  --accent-bright: #f4c6ff;
  --accent-deep: #8b4fb0;
  --glow: #e7b9ff;
  --line: rgba(217, 139, 255, 0.18);
  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #14101a; }

/* ---------------- Loader ---------------- */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-darker);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.6rem;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-brand {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  font-weight: 500;
}
.loader-track {
  width: min(280px, 60vw); height: 2px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
#loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  transition: width 0.2s ease;
}
#loader-percent {
  font-size: 0.78rem; letter-spacing: 0.3em;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}

/* ---------------- Header ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem clamp(1.4rem, 4vw, 3rem);
  /* mix-blend-mode:difference put the header on its own compositing layer and made it
     glitch/detach over the scroll-driven canvas. A subtle gradient + blur keeps it
     reliably pinned and legible over both the dark hero and the bright deer. */
  background: linear-gradient(180deg, rgba(7,6,8,0.82) 0%, rgba(7,6,8,0) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.site-header .logo {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  width:100px;
}
.site-header .logo img {
  width:100px;
  margin-left:70px;
}
.site-header nav { display: flex; gap: clamp(1rem, 2.5vw, 2.4rem); }
.site-header nav a {
  color: #fff; text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.85;
  transition: opacity 0.3s ease;
}
.site-header nav a:hover { opacity: 1; }

/* Hamburger toggle — CSS-only (hidden checkbox + label), shown below 560px */
.nav-toggle { display: none; }            /* the checkbox, always hidden */
.nav-burger { display: none; }            /* the label/button, hidden on desktop */
.nav-backdrop { display: none; }          /* scrim behind the open menu, hidden on desktop */

/* ---------------- Focus states (keyboard a11y) ---------------- */
a:focus-visible,
button:focus-visible,
.cta-button:focus-visible,
.site-header nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- Skip link ---------------- */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 9999;
  background: var(--accent-bright); color: #14101a;
  font-family: var(--font-display); font-weight: 600;
  padding: 0.8rem 1.4rem; text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: translateY(0); outline: none; }

/* ---------------- Reduce-motion toggle ---------------- */
.reduce-motion-toggle {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 500;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-dark);
  background: rgba(20,16,26,0.72); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.6rem 1rem; cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.reduce-motion-toggle:hover { border-color: var(--accent); }
.reduce-motion-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim); transition: background 0.25s ease;
}
.reduce-motion-toggle[aria-pressed="true"] .dot { background: var(--accent-bright); }

/* ---------------- Hero ---------------- */
.hero-standalone {
  position: relative; z-index: 150;
  height: 110vh; width: 100%;
  background: radial-gradient(120% 90% at 70% 30%, #1b1322 0%, var(--bg-darker) 70%);
  display: flex; flex-direction: column; justify-content: center;
  /* top padding clears the fixed header; bottom padding reserves room for the
     absolutely-positioned scroll indicator so centered copy can't overlap it */
  padding: clamp(6rem, 12vh, 9rem) clamp(1.4rem, 6vw, 7rem) clamp(5rem, 9vh, 7rem);
  overflow: hidden;
}
.hero-standalone::after {
  content: ""; position: absolute; right: -10%; top: 20%;
  width: 55vmax; height: 55vmax;
  background: radial-gradient(circle, rgba(231,185,255,0.16) 0%, transparent 60%);
  pointer-events: none;
}
.hero-standalone .section-label { margin-bottom: 1.6rem; }
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5vw, 12rem);
  line-height: 1.1; font-weight: 600;
  letter-spacing: -0.02em; max-width: 24ch;
}
.hero-heading .word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* the reveal mask only needs to clip vertically; pad the sides so glyph overshoot
     (Space Grotesk's S/O, italics) isn't shaved by the horizontal edge of overflow:hidden */
  padding: 0 0.08em; margin: 0 -0.08em;
}
.hero-heading .word span { display: inline-block; }
.hero-heading em {
  font-style: italic; font-weight: 400;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-clip:text paints only the glyph advance box, which excludes the italic
     S's right overshoot — pad the box out (and compensate) so the S isn't clipped */
  display: inline-block; padding-right: 0.12em; margin-right: -0.12em;
}
.hero-tagline {
  margin-top: 2.2rem; max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.55; color: var(--text-muted);
}
.scroll-indicator {
  position: absolute; bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 1rem;
  font-size: 0.72rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-dim);
  text-align: center; white-space: nowrap;
}
.scroll-indicator .arrow {
  width: 1px; height: 38px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }

/* ---------------- Shared bits ---------------- */
.section-label {
  display: inline-block;
  font-size: 0.74rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  font-weight: 500;
}

/* ---------------- Canvas ---------------- */
.canvas-wrap {
  position: fixed; inset: 0; z-index: 1;
  clip-path: circle(0% at 50% 50%);
}
#canvas { width: 100%; height: 100%; display: block; }

#dark-overlay {
  position: fixed; inset: 0; z-index: 2;
  background: var(--bg-darker); opacity: 0;
  pointer-events: none;
}

/* Desktop text scrim — protects side-aligned copy over the bright canvas (WCAG 4.5:1) */
.canvas-scrim {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,6,8,0.62) 0%, rgba(7,6,8,0.10) 34%, rgba(7,6,8,0) 46%),
    linear-gradient(270deg, rgba(7,6,8,0.62) 0%, rgba(7,6,8,0.10) 34%, rgba(7,6,8,0) 46%);
}

/* ---------------- Marquee ---------------- */
.marquee-wrap {
  position: fixed; top: 50%; left: 0; width: 100%;
  transform: translateY(-50%);
  z-index: 3; pointer-events: none;
  opacity: 0; mix-blend-mode: overlay;
}
.marquee-text {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 13vw; font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.07);
  -webkit-text-stroke: 1px rgba(231,185,255,0.4);
}

/* ---------------- Scroll container & sections ---------------- */
#scroll-container { position: relative; z-index: 4; height: 1500vh; }
/* Phones get a taller scroll track so the work-sample animation has room.

   The image morph is driven by SCROLL POSITION, not by a timer — scrollLevel is
   computed from where you are inside a section's band — so it cannot be slowed
   with a duration. It advances exactly as fast as the thumb does. The only way
   to stretch it is to give each section more scroll distance to cross.

   At 1100vh a mobile band was ~385px — about one flick, so the image formed and
   dissolved almost instantly. 2200vh puts it near 940px, so the same animation
   plays out over roughly 2.4x the thumb travel. Desktop moved 1100 -> 1500vh for
   the same reason. Everything else is fraction-based and rescales on its own. */
@media (max-width: 768px) {
  #scroll-container { height: 2200vh; }
}

.scroll-section {
  position: absolute; left: 0; width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
.scroll-section .section-inner { pointer-events: auto; }

.align-left  { padding-left: 5vw;  padding-right: 55vw; }
.align-right { padding-left: 55vw; padding-right: 5vw; text-align: right; }
.align-left .section-inner,
.align-right .section-inner { max-width: 40vw; }
.align-right .section-inner { margin-left: auto; }

.section-label + .section-heading { margin-top: 1.2rem; }
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4.6rem);
  line-height: 1.0; font-weight: 600;
  letter-spacing: -0.02em;
}
.section-heading em {
  font-style: italic; font-weight: 400; color: var(--accent);
}
.section-body {
  margin-top: 1.4rem;
  /*font-size: clamp(1rem, 1.3vw, 1.15rem);*/
  font-size:12px;
  line-height: 1.6; color: #fff;
}
.section-note {
  margin-top: 1.4rem; font-size: 0.82rem;
  letter-spacing: 0.05em; color: var(--text-dim);
}

/* ---------------- Stats ---------------- */
/* Positioned like content sections: zero-height, centered via translateY(-50%) on .scroll-section */
.section-stats {
  padding: 0 6vw; text-align: center;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); width: 100%; max-width: 1100px;
  margin: 0 auto;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 600; line-height: 1;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--accent); margin-top: -0.3rem;
}
.stat-label {
  font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
  max-width: 16ch;
}

/* ---------------- Outcomes ----------------
   Centered editorial list: a 6-Power-Words heading over a two-column stack of
   hairline-ruled rows (like the FAQ, but gridded). Each row leads with a bold
   benefit, then the supporting line. */
.section-outcomes { text-align: center; padding: 0 6vw; }
.section-outcomes .section-inner { align-items: center; max-width: 1100px; margin: 0 auto; }
.outcomes-grid {
  margin: 2.2rem auto 0; width: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  text-align: left;
}
.outcome {
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.outcome-lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); color: var(--text-on-dark);
  display: flex; align-items: baseline; gap: 0.7rem;
}
.outcome-lead::before {
  content: "→"; color: var(--accent); flex: none; font-weight: 400;
}
.outcome-lead em { font-style: normal; color: var(--accent-bright); }
.outcome p {
  margin: 0.5rem 0 0 1.6rem; max-width: 46ch;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.6; color: var(--text-muted);
}

/* ---------------- CTA ---------------- */
/* Positioned like content sections: zero-height, centered via translateY(-50%) on .scroll-section */
.section-cta { text-align: center; padding: 0 6vw;
  display: flex; flex-direction: column; align-items: center; }
.section-cta .section-heading { max-width: 18ch; }
.cta-row { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.cta-button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.92rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 2.4rem; border-radius: 100px;
  background: var(--accent-bright); color: #14101a;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top:5px;
}
.cta-buttonNospace {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.92rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 2.4rem; border-radius: 100px;
  background: var(--accent-bright); color: #14101a;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top:10px;
}

/* CTA inside content sections: breathing room below the body, and the button aligned to
   the SAME edge as its section's text — left edge in left sections, right edge in right
   sections — so it always sits tied to the copy instead of swinging to the far side. */
.section-content .section-inner { display: flex; flex-direction: column; }
.align-left  .section-inner { align-items: flex-start; }
.align-right .section-inner { align-items: flex-end; }
.section-content .section-inner .cta-button { margin-top: 1.8rem; }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(231,185,255,0.35); }
.cta-button.ghost {
  background: transparent; color: var(--text-on-dark);
  border: 1px solid var(--line);
}
.cta-button.ghost:hover { box-shadow: none; border-color: var(--accent); }

/* ---------------- Proof (testimonial) ----------------
   Inherits the asymmetric edge-pinned layout from .section-content + .align-right
   (like sections 002 / 004). The quote reads as a large editorial statement, with
   an oversized opening mark and the deer glowing through the open left side. */
.proof-quote {
  margin: 1.6rem 0 0; position: relative; max-width: 40vw;
}
.section-proof .section-inner { max-width: 42vw; }
.proof-quote::before {
  content: "\201C";
  position: absolute; top: -2.6rem; right: -0.4rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(5rem, 9vw, 8rem); line-height: 1;
  color: var(--accent); opacity: 0.22; pointer-events: none;
}
.proof-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.5rem);
  line-height: 1.28; font-weight: 500; letter-spacing: -0.015em;
  color: var(--text-on-dark);
  text-wrap: balance;
}
.proof-quote p em {
  font-style: normal; font-weight: 600; color: var(--accent-bright);
}
.proof-attr {
  margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.2rem;
  align-items: flex-end; /* right section → attribution hugs the right edge */
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}
.proof-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: var(--text-on-dark);
}
.proof-role {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------------- FAQ / objections ----------------
   Inherits .section-content + .align-left (like sections 001 / 003): heading pinned
   left, deer glowing through the open right side. The answers are a tight stack of
   hairline-ruled rows rather than boxed cards — quieter, more editorial. */
.section-faq .section-inner { max-width: 44vw; }
.faq-list { margin: 2rem 0 0; display: flex; flex-direction: column; }
.faq-item {
  padding: 1.1rem 0; border-top: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item dt {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); color: var(--text-on-dark);
  display: flex; align-items: baseline; gap: 0.7rem;
}
.faq-item dt::before {
  content: "—"; color: var(--accent); flex: none;
  font-weight: 400;
}
.faq-item dd {
  margin: 0.55rem 0 0 1.4rem; max-width: 52ch;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.62; color: var(--text-muted);
}

@media (max-width: 900px) {
  .proof-quote, .section-proof .section-inner, .section-faq .section-inner { max-width: 100%; }
  .proof-attr { align-items: flex-start; }
  .proof-quote::before { right: auto; left: -0.2rem; top: -2.8rem; }
}

/* ============================================================
   SUBPAGE styles (lighter single-scroll detail pages)
   ============================================================ */
.subpage { position: relative; }
.sub-hero {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  /* top padding clears the fixed header so the first heading line isn't tucked under the nav */
  padding: clamp(6rem, 12vh, 9rem) clamp(1.4rem, 8vw, 9rem) 0;
  background: radial-gradient(110% 80% at 80% 20%, #1c1226 0%, var(--bg-darker) 70%);
  position: relative; overflow: hidden;
}
.sub-hero::after {
  content: ""; position: absolute; left: -10%; bottom: -20%;
  width: 50vmax; height: 50vmax;
  background: radial-gradient(circle, rgba(217,139,255,0.14) 0%, transparent 60%);
}
.sub-index { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-dim); letter-spacing: 0.2em; margin-bottom: 1.4rem; }
.sub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 8.5rem); line-height: 0.95;
  font-weight: 600; letter-spacing: -0.02em; max-width: 16ch;
}
.sub-hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.sub-hero p { margin-top: 2rem; max-width: 50ch; color: var(--text-muted); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.6; }

.sub-section {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(5rem, 12vh, 11rem) clamp(1.4rem, 6vw, 3rem);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.sub-section .s-label { font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
.sub-section h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.sub-section p { color: var(--text-muted); font-size: 1.08rem; line-height: 1.65; margin-top: 0.6rem; }
.sub-section ul { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.sub-section li { color: var(--text-muted); padding-left: 1.4rem; position: relative; line-height: 1.55; max-width: 54ch; }
.sub-section li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.sub-section li strong { color: var(--text-on-dark); font-weight: 600; }
.sub-divider { height: 1px; background: var(--line); max-width: 1100px; margin: 0 auto; }

.sub-cta {
  text-align: center; padding: clamp(6rem,16vh,12rem) 2rem;
  background: radial-gradient(80% 120% at 50% 0%, #1c1226 0%, var(--bg-dark) 70%);
}
.sub-cta h2 { font-family: var(--font-display); font-size: clamp(2.2rem,6vw,5rem); font-weight: 600; line-height: 1; max-width: 16ch; margin: 0 auto; letter-spacing: -0.02em; }
.sub-cta .cta-row { margin-top: 2.4rem; }
.sub-footer {
  border-top: 1px solid var(--line);
  padding: 2.4rem clamp(1.4rem,6vw,3rem);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.05em;
}
.sub-footer a { color: var(--text-muted); text-decoration: none; }
.sub-footer a:hover { color: var(--accent); }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }

.small {font-size:12px !important; word-spacing:1.5;}
/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
  .align-left, .align-right { padding: 0 6vw; text-align: left; }
  .align-right { text-align: left; }
  .align-left .section-inner, .align-right .section-inner { max-width: 100%; margin: 0; }
  /* The card IS the scrim on mobile — .canvas-scrim is off below, so with a
     transparent background the copy sat straight on the lit canvas and washed
     out. A dark translucent fill plus the blur keeps the deer visible behind
     the card while the text stays legible over it. */
  .scroll-section .section-inner {
    background: rgba(10, 8, 13, 0.72);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 1.5rem 1.4rem 1.7rem;
    border-radius: 18px;
    border: 1px solid rgba(231, 185, 255, 0.14);
    box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.9);
    /* The reveal slides children in from ±80px. On desktop they fly across open
       space, but inside a card that overflow paints outside the rounded edge and
       reads as broken text. Clip it to the card. */
    overflow: hidden;
  }

  /* Readable body copy. The desktop rule hardcodes 12px, which is below the
     minimum comfortable reading size on a phone and was rendering at 0.47
     opacity over the canvas. */
  .section-body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
  }
  .section-heading { font-size: clamp(1.75rem, 7.4vw, 2.35rem); line-height: 1.08; }
  .section-label { font-size: 0.62rem; letter-spacing: 0.22em; }
  .section-content .section-inner .cta-buttonNospace,
  .section-content .section-inner .cta-button { align-self: flex-start; margin-top: 1.5rem; }
  /* Sections are centred on their scroll position via translateY(-50%). Nudging
     the content sections down leaves the upper third clear for the work sample,
     which mobile raises above the card instead of placing it alongside. */
  .scroll-section.section-content { transform: translateY(-32%); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .outcomes-grid { grid-template-columns: 1fr; gap: 0; }
  .site-header { position: absolute; }
  .site-header nav { gap: 0.9rem; }
  .site-header nav a { font-size: 0.66rem; }
  .sub-section { grid-template-columns: 1fr; }
  .marquee-text { font-size: 22vw; }
  .canvas-scrim { display: none; } /* mobile uses per-section card scrims instead */
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .scroll-indicator .arrow { animation: none; }
  /* JS also disables Lenis + ScrollTrigger and reveals everything statically (see app.js) */
}
/* When reduced motion is active (media query or user toggle), JS adds .rm to <html> */
.rm .canvas-wrap { clip-path: none !important; }
.rm .marquee-wrap { display: none; }
.rm .scroll-indicator { display: none; }
.rm .scroll-section { opacity: 1 !important; }

/* Reduced-motion: sections become a readable vertical document, not scrubbed overlays */
.rm #dark-overlay { opacity: 0.78 !important; } /* steady scrim so stacked text stays legible over canvas */
.rm .scroll-section.rm-static {
  position: relative; top: auto; transform: none;
  min-height: auto; height: auto;
  padding: clamp(3rem, 8vh, 6rem) clamp(1.4rem, 6vw, 4rem);
  max-width: 760px; margin: 0 auto;
}
.rm .scroll-section.rm-static .section-inner { max-width: 100%; margin: 0; }
.rm .section-stats.rm-static { max-width: 1100px; }
.rm .section-cta.rm-static, .rm .section-stats.rm-static { display: block; text-align: left; }
.rm .section-cta.rm-static .cta-row { justify-content: flex-start; }

/* ================= Contact form ================= */
.lead-form { width: 100%; max-width: 560px; display: grid; gap: 1.1rem; }
.lead-form .field { display: grid; gap: 0.45rem; }
.lead-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lead-form label {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text-on-dark);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 0.85rem 1rem; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.lead-form textarea { min-height: 130px; resize: vertical; }
.lead-form select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
/* The OS-rendered dropdown list defaults to a white background, which hid the
   light option text. Force a dark panel + light text so options are readable. */
.lead-form select option {
  background-color: var(--bg-panel);
  color: var(--text-on-dark);
}
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--text-dim); }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none; border-color: var(--accent);
  background: rgba(217,139,255,0.06);
  box-shadow: 0 0 0 3px rgba(217,139,255,0.12);
}
.lead-form .field.invalid input,
.lead-form .field.invalid select,
.lead-form .field.invalid textarea { border-color: #ff6b8a; }
.lead-form .err { font-size: 0.74rem; color: #ff8aa0; min-height: 0; }
/* honeypot — hidden from humans */
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .form-actions { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
/* Submit button and the ghost link sit in the same row — match their box metrics so
   they're the same height and their labels align on one line. */
.lead-form .form-actions .cta-button {
  display: inline-flex; align-items: center;
  font-size: 0.95rem; padding: 0.9rem 1.8rem; line-height: 1;
}
.lead-form button[type="submit"] {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.02em; cursor: pointer;
  color: var(--bg-darker); background: var(--accent);
  border: none; border-radius: 100px; padding: 0.9rem 1.8rem;
  transition: transform 0.2s, background 0.25s, box-shadow 0.25s;
}
.lead-form .form-actions .form-status { display: flex; align-items: center; margin: 0; }
.lead-form button[type="submit"]:hover { transform: translateY(-2px); background: var(--accent-bright); box-shadow: 0 10px 30px -10px var(--accent); }
.lead-form button[type="submit"]:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.form-status { font-size: 0.9rem; line-height: 1.5; }
.form-status.success { color: #7ee0b0; }
.form-status.error { color: #ff8aa0; }

/* ---- Yes/No question rows ---- */
.lead-form .qgroup { display: grid; gap: 0.55rem; margin-top: 0.4rem; }
.lead-form .qgroup > .qgroup-label {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem;
}
.lead-form .qrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.4rem 0.7rem 0.1rem;
  border-bottom: 1px solid rgba(217,139,255,0.10);
}
.lead-form .qrow:last-of-type { border-bottom: none; }
.lead-form .qrow .qtext {
  font-family: var(--font-body); font-size: 1rem; letter-spacing: 0;
  text-transform: none; color: var(--text-on-dark); margin: 0;
}
.lead-form .qrow.invalid .qtext { color: #ff8aa0; }
.lead-form .choices { display: flex; gap: 0.4rem; flex-shrink: 0; }
/* Visually hidden radio — keeps native keyboard/AT semantics, label is the control. */
.lead-form .choices input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; pointer-events: none;
}
.lead-form .choices label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; padding: 0.5rem 1rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.02em;
  text-transform: none; color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 100px;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.lead-form .choices label:hover { border-color: var(--accent); color: var(--text-on-dark); }
.lead-form .choices input:focus-visible + label {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.lead-form .choices input:checked + label {
  color: var(--bg-darker); background: var(--accent);
  border-color: var(--accent); font-weight: 500;
}
.lead-form .choices input[value="no"]:checked + label {
  color: var(--text-on-dark); background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
}
@media (max-width: 560px) {
  .lead-form .row-2 { grid-template-columns: 1fr; }
  .lead-form .qrow { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .lead-form .choices { width: 100%; }
  .lead-form .choices label { flex: 1; }

  /* The old 15vw left margin shoved the button off-centre inside its card.
     Let it sit with the copy it belongs to. */
  .cta-button {
    margin-right: 0;
    margin-left: 0;
  }

  .site-header .logo img {margin-left:0px;}

  /* ============================================================
     Hamburger menu — "glow-glass" refinement
     A circular glass capsule trigger + a floating, glowing
     menu card with staggered, index-numbered links.
     ============================================================ */

  /* --- Trigger: glass capsule with accent ring --- */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 46px; height: 46px;
    cursor: pointer; z-index: 260; position: relative;
    padding: 0; border-radius: 50%;
    background: rgba(20,16,26,0.55);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  }
  .nav-burger:hover { border-color: var(--accent); box-shadow: 0 0 24px -6px rgba(217,139,255,0.5); }
  .nav-burger span {
    display: block; height: 1.5px; width: 20px;
    background: var(--text-on-dark); border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.65,0,0.35,1),
                opacity 0.25s ease, background 0.35s ease, width 0.4s ease;
  }

  /* --- Scrim behind the open menu --- */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 240;
    background: radial-gradient(120% 80% at 85% 0%, rgba(20,12,30,0.55), rgba(5,4,8,0.78));
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.45s ease;
  }

  /* --- Menu: a floating glass card, not a full-width slab --- */
  .site-header nav {
    position: absolute; top: calc(100% + 0.5rem); right: clamp(1rem, 4vw, 2rem);
    z-index: 250;
    flex-direction: column; align-items: stretch;
    gap: 0; width: min(78vw, 320px);
    padding: 0.6rem 0.6rem 0.8rem;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(28,20,38,0.92) 0%, rgba(12,10,15,0.94) 100%);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.7),
      0 0 60px -20px rgba(217,139,255,0.35),
      inset 0 1px 0 rgba(255,255,255,0.06);
    /* collapsed by default — scale/fade from the burger's corner */
    transform-origin: top right;
    transform: translateY(-8px) scale(0.96);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34,1.3,0.64,1);
  }
  /* gradient hairline along the top edge */
  .site-header nav::before {
    content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    opacity: 0.7;
  }

  .site-header nav a {
    counter-increment: navitem;
    position: relative;
    display: flex; align-items: baseline; gap: 0.7rem;
    font-family: var(--font-display);
    font-size: 0.82rem; letter-spacing: 0.14em;
    opacity: 0; transform: translateX(10px);
    padding: 0.95rem 1rem; width: 100%;
    border-radius: 12px;
    text-align: left;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }
  /* editorial index number prefix: 01 / 02 / 03 … */
  .site-header nav a::before {
    content: "0" counter(navitem);
    font-size: 0.62rem; letter-spacing: 0.1em;
    color: var(--accent); opacity: 0.65;
    font-variant-numeric: tabular-nums;
  }
  /* left glow marker that grows on hover/active */
  .site-header nav a::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 2px; height: 0; transform: translateY(-50%);
    background: linear-gradient(var(--accent-bright), var(--accent));
    border-radius: 2px; transition: height 0.3s ease;
  }
  .site-header nav a:hover,
  .site-header nav a[aria-current="page"] {
    background: rgba(217,139,255,0.08);
    color: var(--accent-bright);
  }
  .site-header nav a:hover::after,
  .site-header nav a[aria-current="page"]::after { height: 55%; }

  /* ---------- OPEN STATE (checkbox checked) ---------- */
  .nav-toggle:checked ~ nav { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .nav-toggle:checked ~ .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* staggered link reveal */
  .nav-toggle:checked ~ nav a { opacity: 1; transform: translateX(0); }
  .nav-toggle:checked ~ nav a:nth-child(1) { transition-delay: 0.08s; }
  .nav-toggle:checked ~ nav a:nth-child(2) { transition-delay: 0.14s; }
  .nav-toggle:checked ~ nav a:nth-child(3) { transition-delay: 0.20s; }
  .nav-toggle:checked ~ nav a:nth-child(4) { transition-delay: 0.26s; }

  /* burger → X, with the accent glow lit */
  .nav-toggle:checked ~ .nav-burger { border-color: var(--accent); box-shadow: 0 0 28px -6px rgba(217,139,255,0.6); }
  .nav-toggle:checked ~ .nav-burger span { background: var(--accent-bright); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; width: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* reset the link counter per header (keeps 01/02/03 numbering correct) */
.site-header nav { counter-reset: navitem; }