/* ============================================================
   ActiveVirtue 2026 — Celestial Paladin Design System
   Black · Gold · White | Epic & Ethereal
   ============================================================ */

/* ---- Type scale ---- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);

  /* ---- Spacing ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.875rem;
  --radius-xl: 1.25rem; --radius-full: 9999px;

  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Content widths ---- */
  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1280px;

  /* ---- Fonts ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-eyebrow: 'Satoshi', 'Inter', sans-serif;
}

/* ============================================================
   COLOR — Celestial dark (default & only theme: this brand is dark)
   We expose light tokens too for system compatibility, but the
   brand identity is the black void with divine gold light.
   ============================================================ */
:root,
[data-theme='dark'] {
  --color-bg:            #07070a;
  --color-bg-deep:       #030305;
  --color-surface:       #0d0d12;
  --color-surface-2:     #131319;
  --color-surface-offset:#17171f;
  --color-divider:       #1d1d27;
  --color-border:        #26262f;
  --color-border-gold:   rgba(212, 168, 83, 0.28);

  --color-text:          #f4f1e9;   /* warm white */
  --color-text-muted:    #a9a59a;
  --color-text-faint:    #6b685f;
  --color-text-inverse:  #07070a;

  /* Divine gold accent */
  --color-gold:          #d4a853;
  --color-gold-bright:   #f0cd7e;
  --color-gold-deep:     #b08433;
  --color-gold-glow:     rgba(212, 168, 83, 0.45);
  --color-gold-faint:    rgba(212, 168, 83, 0.10);

  --color-primary:        var(--color-gold);
  --color-primary-hover:  var(--color-gold-bright);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 48px rgba(212, 168, 83, 0.22);
}

/* Optional light mode for accessibility toggle */
[data-theme='light'] {
  --color-bg:            #f6f3ec;
  --color-bg-deep:       #efeae0;
  --color-surface:       #ffffff;
  --color-surface-2:     #faf7f0;
  --color-surface-offset:#f1ece2;
  --color-divider:       #e4ddd0;
  --color-border:        #d8cfbe;
  --color-border-gold:   rgba(160, 120, 40, 0.35);
  --color-text:          #1a1813;
  --color-text-muted:    #5c574c;
  --color-text-faint:    #9b9486;
  --color-text-inverse:  #ffffff;
  --color-gold:          #a87f2e;
  --color-gold-bright:   #c79a3e;
  --color-gold-deep:     #8a6722;
  --color-gold-glow:     rgba(168, 127, 46, 0.35);
  --color-gold-faint:    rgba(168, 127, 46, 0.08);
  --shadow-gold: 0 0 32px rgba(168, 127, 46, 0.18);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  position: relative;
}

/* ============================================================
   PAGE LIGHT WASH — divine gold light that pours from the top
   and breathes/sways down through the whole page as you scroll.
   Fixed so it stays cast over every section; sits behind content.
   ============================================================ */
body {
  /* Cursor-channeled light offsets (set live by JS; safe defaults here) */
  --light-x: 0vw;
  --light-y: 0vh;
  --beam-skew: 0deg;
  --light-boost: 1;
}
body::before {
  content: '';
  position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    /* primary shaft from top-center */
    radial-gradient(140% 95% at 50% -10%,
      rgba(212,168,83,0.20) 0%,
      rgba(212,168,83,0.09) 28%,
      rgba(212,168,83,0.03) 52%,
      transparent 72%),
    /* warm secondary pool lower down so light reaches mid-page */
    radial-gradient(90% 70% at 50% 38%,
      rgba(240,205,126,0.06) 0%,
      transparent 60%);
  mix-blend-mode: screen;
  opacity: calc(0.9 * var(--light-boost));
  transform-origin: 50% 0%;
  transform: translate3d(var(--light-x), var(--light-y), 0);
  transition: opacity 0.5s ease;
  animation: page-light 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* A slow-rotating volumetric beam adds living movement to the light */
body::after {
  content: '';
  position: fixed; z-index: 0; pointer-events: none;
  top: -40vmax; left: 50%;
  width: 120vmax; height: 120vmax; margin-left: -60vmax;
  background:
    conic-gradient(from 200deg at 50% 0%,
      transparent 0deg,
      rgba(212,168,83,0.00) 24deg,
      rgba(212,168,83,0.13) 48deg,
      rgba(240,205,126,0.05) 72deg,
      transparent 120deg,
      rgba(212,168,83,0.09) 200deg,
      transparent 260deg,
      transparent 360deg);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
  mix-blend-mode: screen;
  opacity: calc(0.5 * var(--light-boost));
  transform-origin: 50% 0%;
  transform: translateX(var(--light-x)) rotate(var(--beam-skew));
  transition: opacity 0.5s ease;
  animation: page-beam 48s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes page-light {
  0%   { transform: translate3d(var(--light-x), var(--light-y), 0) scaleY(1);      opacity: 0.78; }
  50%  { transform: translate3d(var(--light-x), calc(var(--light-y) + 2.5%), 0) scaleY(1.06); opacity: 1; }
  100% { transform: translate3d(var(--light-x), calc(var(--light-y) - 1.5%), 0) scaleY(0.98); opacity: 0.85; }
}
@keyframes page-beam {
  0%   { transform: translateX(var(--light-x)) rotate(calc(var(--beam-skew) - 9deg))  scale(1);    }
  50%  { transform: translateX(var(--light-x)) rotate(calc(var(--beam-skew) + 4deg))  scale(1.05); }
  100% { transform: translateX(var(--light-x)) rotate(calc(var(--beam-skew) + 10deg)) scale(1.02); }
}

/* ---- Paladin aura: radiant holy light that follows the cursor ---- */
.paladin-aura {
  position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 460px; height: 460px;
  margin: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(244,228,170,0.18) 0%,
      rgba(212,168,83,0.12) 24%,
      rgba(212,168,83,0.05) 46%,
      transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(2px);
}
.paladin-aura::after {
  /* a tighter, brighter core */
  content: ''; position: absolute; inset: 33%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,214,0.22), transparent 70%);
}
.paladin-aura--pulse { animation: paladin-pulse 0.52s ease-out; }
@keyframes paladin-pulse {
  0%   { filter: blur(2px)  brightness(1);   }
  35%  { filter: blur(0.5px) brightness(1.9); }
  100% { filter: blur(2px)  brightness(1);   }
}

/* ---- Holy fire ember canvas (rises from the bottom) ---- */
.ember-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Keep all real content above the light wash + embers */
.header, main, footer, .strip { position: relative; z-index: 1; }

img,picture,video,svg { display: block; max-width: 100%; height: auto; }
ul[role='list'] { list-style: none; }
input,button,textarea,select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1,h2,h3,h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p,li { text-wrap: pretty; }

::selection { background: var(--color-gold-glow); color: var(--color-text); }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

a { color: inherit; text-decoration: none; transition: color var(--transition-interactive); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.container--default { max-width: var(--content-default); }
.container--narrow { max-width: var(--content-narrow); }

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); position: relative; }

.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.eyebrow--center::after {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}
.eyebrow--center { justify-content: center; }

.section-title {
  font-size: var(--text-2xl);
  margin-top: var(--space-5);
  max-width: 18ch;
}
.section-lead {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 56ch;
  margin-top: var(--space-5);
  line-height: 1.6;
}

.gold-text { color: var(--color-gold); }
.italic-accent { font-style: italic; color: var(--color-gold); font-weight: 500; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-eyebrow);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: all var(--transition-interactive);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.btn svg { width: 18px; height: 18px; }

.btn--gold {
  background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
  color: #1a1206;
  box-shadow: var(--shadow-gold);
  overflow: hidden;
  isolation: isolate;
}
/* Holy light sweep that crosses the button on hover */
.btn--gold::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 55%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255,248,224,0.0) 20%,
    rgba(255,250,232,0.85) 50%,
    rgba(255,248,224,0.0) 80%,
    transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 64px rgba(212, 168, 83, 0.55), 0 0 18px rgba(255,244,214,0.45);
  filter: brightness(1.08);
}
.btn--gold:hover::before {
  opacity: 1;
  animation: holy-sweep 0.9s ease-out;
}
.btn--gold:active { transform: translateY(0); }
@keyframes holy-sweep {
  0%   { left: -60%; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

.btn--ghost {
  background: rgba(255,255,255,0.02);
  color: var(--color-text);
  border-color: var(--color-border-gold);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
  background: var(--color-gold-faint);
  transform: translateY(-2px);
}
.btn--lg { padding: var(--space-5) var(--space-10); font-size: var(--text-base); }
.btn--sm { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); letter-spacing: 0.08em; }
.btn--block { width: 100%; }
.nav__actions .btn--sm { white-space: nowrap; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--transition-interactive), border-color var(--transition-interactive), padding var(--transition-interactive);
  border-bottom: 1px solid transparent;
}
.header--scrolled {
  background: rgba(7,7,10,0.78);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: var(--color-divider);
}
[data-theme='light'] .header--scrolled { background: rgba(246,243,236,0.85); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-5);
  max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6);
}
.nav__brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.nav__brand svg { width: 34px; height: 34px; color: var(--color-gold); }
.nav__brand-logo { width: 40px; height: 40px; object-fit: contain; display: block; }
.nav__brand-text { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; }
.nav__brand-text b { color: var(--color-gold); font-weight: 600; }

.nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; }
.nav__links a {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  letter-spacing: 0.02em; position: relative;
}
.nav__links a:hover { color: var(--color-gold-bright); }
.nav__links-cta { display: none; }
.nav__links-cta a:hover { color: #1a1206; }
.nav__actions { display: flex; align-items: center; gap: var(--space-4); }

/* Ambient sound toggle — matches theme toggle, glows gold when active */
.sound-toggle {
  color: var(--color-text-muted); padding: var(--space-2);
  display: grid; place-items: center; border-radius: var(--radius-full);
  position: relative; transition: color .25s ease;
}
.sound-toggle:hover { color: var(--color-gold); }
.sound-toggle__on { display: none; }
.sound-toggle__off { display: block; }
.sound-toggle.is-on { color: var(--color-gold-bright); }
.sound-toggle.is-on .sound-toggle__on { display: block; }
.sound-toggle.is-on .sound-toggle__off { display: none; }
.sound-toggle.is-on::after {
  content: ""; position: absolute; inset: -2px; border-radius: var(--radius-full);
  box-shadow: 0 0 14px 2px rgba(240, 205, 126, 0.55);
  animation: sound-pulse 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes sound-pulse {
  0%, 100% { opacity: .45; transform: scale(0.92); }
  50%      { opacity: .9;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle.is-on::after { animation: none; }
}

.nav__burger { display: none; color: var(--color-text); padding: var(--space-2); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--color-bg-deep);
}
.hero__bg {
  position: absolute; inset: -6%; z-index: 0;
  background-size: cover; background-position: center 30%;
  opacity: 0.55;
  transform-origin: 52% 42%;
  animation: hero-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* Swirling celestial aura — rotating gold mist behind the content */
.hero__swirl {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; left: 50%;
  width: 150vmax; height: 150vmax;
  margin-left: -75vmax; margin-top: -75vmax;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(212,168,83,0.00) 40deg,
      rgba(212,168,83,0.16) 90deg,
      rgba(240,205,126,0.05) 140deg,
      transparent 200deg,
      rgba(212,168,83,0.12) 280deg,
      transparent 330deg,
      transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,0.55) 42%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,0.55) 42%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: hero-swirl 40s linear infinite;
  will-change: transform;
}
.hero__swirl--2 {
  width: 110vmax; height: 110vmax; margin-left: -55vmax; margin-top: -55vmax;
  background:
    conic-gradient(from 180deg at 50% 50%,
      transparent 0deg,
      rgba(244,241,233,0.05) 60deg,
      rgba(212,168,83,0.12) 120deg,
      transparent 220deg,
      rgba(240,205,126,0.08) 300deg,
      transparent 360deg);
  opacity: 0.6;
  animation: hero-swirl-rev 56s linear infinite;
}

/* Subtle film grain so the motion reads as living, not flat */
.hero__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
  background-size: 220px 220px;
  animation: hero-grain 6s steps(6) infinite;
}

@keyframes hero-drift {
  0%   { transform: scale(1.06) rotate(0deg)    translate(0, 0); }
  50%  { transform: scale(1.12) rotate(0.8deg)  translate(-1.2%, -0.8%); }
  100% { transform: scale(1.08) rotate(-0.6deg) translate(1%, 0.6%); }
}
@keyframes hero-swirl {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1);    }
}
@keyframes hero-swirl-rev {
  from { transform: rotate(360deg) scale(1.04); }
  to   { transform: rotate(0deg)   scale(1);    }
}
@keyframes hero-grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-2%, -3%); }
  100% { transform: translate(2%, 2%); }
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212,168,83,0.10), transparent 55%),
    linear-gradient(180deg, rgba(3,3,5,0.55) 0%, rgba(3,3,5,0.2) 35%, rgba(3,3,5,0.85) 88%, var(--color-bg) 100%);
}
[data-theme='light'] .hero { background: #0a0a0d; }
[data-theme='light'] .hero__veil { background: linear-gradient(180deg, rgba(3,3,5,0.45), rgba(3,3,5,0.55) 60%, var(--color-bg) 100%); }

.hero__content {
  position: relative; z-index: 2;
  max-width: var(--content-wide); margin-inline: auto; width: 100%;
  padding-inline: var(--space-6);
  padding-top: var(--space-24);
  padding-bottom: var(--space-20);
  text-align: center;
}
.hero__eyebrow { justify-content: center; margin-bottom: var(--space-6); }
.hero__title {
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 0.98;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}
.hero__title em {
  font-style: italic;
  background: linear-gradient(120deg, var(--color-gold-bright), var(--color-gold) 60%, var(--color-gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-gold-bright);
  margin-top: var(--space-6);
  letter-spacing: 0.02em;
}
.hero__sub {
  font-size: var(--text-lg);
  color: rgba(244,241,233,0.82);
  max-width: 50ch; margin: var(--space-6) auto 0;
  line-height: 1.6;
}
.hero__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-10); }
.hero__scroll {
  position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--color-text-faint); display: grid; place-items: center; gap: var(--space-2);
  font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase;
}
.hero__scroll svg { width: 20px; height: 20px; animation: float-down 2.4s ease-in-out infinite; }
@keyframes float-down { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ============================================================
   MARQUEE / TRUST STRIP
   ============================================================ */
.strip {
  border-block: 1px solid var(--color-divider);
  background: var(--color-bg-deep);
  padding-block: var(--space-6);
  overflow: hidden;
}
.strip__track {
  display: flex; align-items: center; gap: var(--space-12);
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__item {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-lg); color: var(--color-text-muted);
}
.strip__item::after { content: '✦'; color: var(--color-gold); font-style: normal; font-size: 0.7em; margin-left: var(--space-8); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   STATS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.stat { text-align: center; padding: var(--space-6) var(--space-4); position: relative; }
.stat:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-border-gold), transparent);
}
.stat__num {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600;
  color: var(--color-gold-bright); line-height: 1;
}
.stat__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); letter-spacing: 0.04em; }

/* ============================================================
   FACILITIES
   ============================================================ */
.facility {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-16);
  align-items: center;
}
.facility + .facility { margin-top: clamp(var(--space-16), 8vw, var(--space-32)); }
.facility--reverse .facility__media { order: 2; }
.facility__media {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-border-gold);
  box-shadow: var(--shadow-lg);
}
.facility__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.facility__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3,3,5,0.6));
  pointer-events: none;
}
.facility__badge {
  position: absolute; top: var(--space-5); left: var(--space-5); z-index: 2;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: rgba(7,7,10,0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-gold); color: var(--color-gold-bright);
}
.facility__name { font-size: var(--text-2xl); margin-top: var(--space-5); }
.facility__tagline { color: var(--color-gold); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); margin-top: var(--space-2); }
.facility__desc { color: var(--color-text-muted); margin-top: var(--space-5); line-height: 1.7; }
.facility__list { list-style: none; margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.facility__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text); font-size: var(--text-sm); }
.facility__list svg { width: 18px; height: 18px; color: var(--color-gold); flex-shrink: 0; margin-top: 3px; }
.facility__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-8); }
.facility__price b { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gold-bright); font-weight: 600; }
.facility__price span { color: var(--color-text-muted); font-size: var(--text-sm); }
.facility__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* "Under construction" badge variant */
.facility__badge--soon { color: var(--color-text); border-color: var(--color-border); background: rgba(7,7,10,0.78); }
.facility__badge--soon::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: middle;
  border-radius: 50%; background: var(--color-gold-bright); box-shadow: 0 0 8px var(--color-gold-glow);
  animation: soon-pulse 2s ease-in-out infinite;
}
@keyframes soon-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Dual price tags (open gym + classes at VirtueHall) */
.facility__price--dual { gap: var(--space-8); flex-wrap: wrap; }
.facility__price--dual .price-tag { display: inline-flex; align-items: baseline; gap: var(--space-2); }

/* Inline facility email capture (VirtueField waitlist) */
.facility__form { margin-top: var(--space-8); }
.facility__form .field--full label { display: block; margin-bottom: var(--space-2); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }

/* ============================================================
   PATH QUIZ
   ============================================================ */
.quiz {
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.quiz::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 80%;
  background: radial-gradient(circle, var(--color-gold-faint), transparent 70%);
  pointer-events: none;
}
.quiz__inner { position: relative; z-index: 1; }
.quiz__step { display: none; }
.quiz__step.is-active { display: block; animation: quiz-in 0.4s var(--ease-out); }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.quiz__q { font-size: var(--text-xl); text-align: center; }
.quiz__hint { text-align: center; color: var(--color-text-muted); margin-top: var(--space-3); font-size: var(--text-sm); }

.quiz__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.quiz__option {
  text-align: left; padding: var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2); color: var(--color-text);
  transition: all var(--transition-interactive); cursor: pointer;
}
.quiz__option:hover { border-color: var(--color-gold); transform: translateY(-3px); box-shadow: var(--shadow-gold); background: var(--color-surface-offset); }
.quiz__option-icon { width: 40px; height: 40px; color: var(--color-gold); margin-bottom: var(--space-4); }
.quiz__option-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.quiz__option-desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }

.quiz__progress { display: flex; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-8); }
.quiz__dot { width: 32px; height: 3px; border-radius: var(--radius-full); background: var(--color-border); transition: background var(--transition-interactive); }
.quiz__dot.is-on { background: var(--color-gold); }

/* Quiz result / capture form */
.quiz__result-rec {
  text-align: center; padding: var(--space-6); margin-bottom: var(--space-8);
  border: 1px solid var(--color-border-gold); border-radius: var(--radius-lg);
  background: var(--color-gold-faint);
}
.quiz__result-rec .eyebrow { justify-content: center; }
.quiz__result-name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-gold-bright); margin-top: var(--space-3); }
.quiz__result-desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }

/* Two-path choice after the quiz: commit now, or schedule a tour */
.quiz__choice {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 480px; margin-inline: auto;
}
.quiz__choice[hidden] { display: none; }
.quiz__choice .form-note { margin-top: var(--space-2); }
.quiz__tour-form[hidden] { display: none; }
.quiz__tour-head { text-align: center; margin-bottom: var(--space-2); }
.quiz__tour-head .eyebrow { justify-content: center; }
.quiz__tour-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }

/* Start-over / reset — understated, centered beneath the result */
.quiz__restart {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin: var(--space-6) auto 0; padding: var(--space-2) var(--space-3); width: fit-content;
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.02em; background: none; border: none; cursor: pointer;
  transition: color .2s ease;
}
.quiz__restart svg { width: 15px; height: 15px; transition: transform .4s ease; }
.quiz__restart:hover { color: var(--color-gold-bright); }
.quiz__restart:hover svg { transform: rotate(-180deg); }
.quiz__restart:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-full); }

/* ============================================================
   FORMS (Klaviyo-ready)
   ============================================================ */
.lead-form { display: grid; gap: var(--space-4); max-width: 480px; margin-inline: auto; }
.lead-form--row { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field select {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.field input::placeholder { color: var(--color-text-faint); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-faint);
}
.form-note { font-size: var(--text-xs); color: var(--color-text-faint); text-align: center; }
.form-success {
  display: none; text-align: center; padding: var(--space-8);
  border: 1px solid var(--color-border-gold); border-radius: var(--radius-lg);
  background: var(--color-gold-faint);
}
.form-success.is-visible { display: block; animation: quiz-in 0.4s var(--ease-out); }
.form-success svg { width: 48px; height: 48px; color: var(--color-gold); margin: 0 auto var(--space-4); }
.form-success h3 { font-size: var(--text-xl); }
.form-success p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ============================================================
   PRICING / OFFERS
   ============================================================ */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.offer {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  background: var(--color-surface); padding: var(--space-8);
  display: flex; flex-direction: column;
  transition: all var(--transition-interactive); position: relative;
}
.offer:hover { transform: translateY(-4px); border-color: var(--color-border-gold); box-shadow: var(--shadow-md); }
.offer--featured {
  border-color: var(--color-gold);
  background: linear-gradient(180deg, var(--color-surface-offset), var(--color-surface));
  box-shadow: var(--shadow-gold);
}
.offer__flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep)); color: #1a1206;
  white-space: nowrap;
}
.offer__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.offer__tag { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); min-height: 2.6em; }
.offer__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-6); }
.offer__price b { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-text); font-weight: 600; line-height: 1; }
.offer--featured .offer__price b { color: var(--color-gold-bright); }
.offer__price span { color: var(--color-text-muted); font-size: var(--text-sm); }
.offer__list { list-style: none; margin: var(--space-6) 0; display: grid; gap: var(--space-3); flex: 1; }
.offer__list li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.offer__list svg { width: 16px; height: 16px; color: var(--color-gold); flex-shrink: 0; margin-top: 4px; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-gold);
  padding: clamp(var(--space-12), 8vw, var(--space-32)) var(--space-8);
  text-align: center;
  background: var(--color-bg-deep);
}
.cta-banner__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.4; }
.cta-banner__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,3,5,0.7), rgba(3,3,5,0.85)); }
.cta-banner__inner { position: relative; z-index: 2; max-width: 60ch; margin-inline: auto; }
.cta-banner__title { font-size: var(--text-2xl); color: #fff; }
.cta-banner__sub { color: rgba(244,241,233,0.78); margin-top: var(--space-5); font-size: var(--text-lg); }
.cta-banner__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-10); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--color-divider); background: var(--color-bg-deep); padding-block: var(--space-20) var(--space-10); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-12); }
.footer__brand svg { width: 40px; height: 40px; color: var(--color-gold); }
.footer__brand-logo { width: 96px; height: 96px; object-fit: contain; display: block; margin-bottom: var(--space-4); }
.footer__brand-name { font-family: var(--font-display); font-size: var(--text-xl); margin-top: var(--space-4); }
.footer__brand-name b { color: var(--color-gold); }
.footer__motto { color: var(--color-text-muted); font-style: italic; font-family: var(--font-display); margin-top: var(--space-3); }
.footer__col h4 { font-family: var(--font-eyebrow); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; }
.footer__col ul { list-style: none; margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.footer__col a { color: var(--color-text-muted); font-size: var(--text-sm); }
.footer__col a:hover { color: var(--color-gold-bright); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-divider);
  color: var(--color-text-faint); font-size: var(--text-xs);
}
.footer__social { display: flex; gap: var(--space-4); }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); }
.footer__social a:hover { border-color: var(--color-gold); color: var(--color-gold); }
.footer__social svg { width: 18px; height: 18px; }

/* ============================================================
   SCROLL REVEAL (no CLS — opacity/clip only)
   ============================================================ */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

/* divider ornament */
.divider-mark { display: flex; align-items: center; justify-content: center; gap: var(--space-4); color: var(--color-gold); }
.divider-mark::before, .divider-mark::after { content: ''; height: 1px; width: 80px; background: linear-gradient(90deg, transparent, var(--color-border-gold)); }
.divider-mark::after { background: linear-gradient(90deg, var(--color-border-gold), transparent); }

/* ============================================================
   GOOGLE REVIEWS / SOCIAL PROOF
   ============================================================ */
.reviews__head { text-align: center; margin-bottom: var(--space-12); }
.reviews__rating {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6); padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-gold); border-radius: var(--radius-full);
  background: var(--color-gold-faint); text-decoration: none;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.reviews__rating:hover { border-color: var(--color-gold); background: rgba(212,168,83,0.16); }
.reviews__stars { display: inline-flex; gap: 2px; color: var(--color-gold); }
.reviews__stars svg { width: 18px; height: 18px; }
.reviews__rating-text { color: var(--color-text); font-size: var(--text-sm); letter-spacing: 0.01em; }
.reviews__rating-text b { color: var(--color-gold-bright); font-weight: 600; }
.reviews__google { width: 18px; height: 18px; flex-shrink: 0; }

.reviews__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.review {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); margin: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); position: relative;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.review:hover {
  border-color: var(--color-border-gold); transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-gold);
}
.review__stars { color: var(--color-gold); font-size: var(--text-base); letter-spacing: 2px; line-height: 1; }
.review__text {
  margin: 0; color: var(--color-text); font-size: var(--text-base);
  line-height: 1.6; font-style: italic; flex: 1;
}
.review__author { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.review__avatar {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--radius-full); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--color-gold-bright); background: var(--color-gold-faint); border: 1px solid var(--color-border-gold);
}
.review__meta { display: flex; flex-direction: column; line-height: 1.35; }
.review__meta b { color: var(--color-text); font-weight: 600; font-size: var(--text-sm); }
.review__meta span { color: var(--color-text-faint); font-size: var(--text-xs); }
.reviews__cta { text-align: center; margin-top: var(--space-12); }

/* ============================================================
   VISIT / LOCATION
   ============================================================ */
.visit__grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-10);
  align-items: stretch;
}
.visit__info { display: flex; flex-direction: column; gap: var(--space-8); }
.visit__block {
  padding: var(--space-8) var(--space-9); border-radius: var(--radius-lg);
  background: var(--color-gold-faint); border: 1px solid var(--color-border-gold);
}
.visit__label {
  margin: 0 0 var(--space-5); font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 600; color: var(--color-gold-bright);
}
.visit__addr {
  margin: 0 0 var(--space-8); font-size: var(--text-lg);
  color: var(--color-text); line-height: 1.7;
}
.visit__link { color: var(--color-text); text-decoration: none; transition: color .2s ease; }
.visit__link:hover { color: var(--color-gold-bright); }
.visit__block p { margin: 0 0 var(--space-4); }
.visit__block p:last-child { margin-bottom: 0; }
.visit__map {
  border-radius: var(--radius-lg); overflow: hidden; min-height: 420px;
  border: 1px solid var(--color-border-gold); background: #11110f;
}
.visit__map iframe { display: block; width: 100%; height: 100%; min-height: 420px; filter: grayscale(0.2) contrast(1.05); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .nav__burger { display: grid; place-items: center; }
  .nav__actions .nav__join { display: none; }
  .nav__actions .nav__daypass { display: inline-flex; }
  .nav__brand-text { font-size: 1.2rem; }
  .nav__links--open .nav__links-cta { display: block; margin-top: var(--space-2); }
  .nav__links--open .nav__links-cta:not(.nav__links-cta--ghost) a { color: #1a1206; }
  .nav__links--open .nav__links-cta--ghost a { color: var(--color-gold-bright); }
  .nav__links--open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(7,7,10,0.96); backdrop-filter: blur(16px);
    padding: var(--space-8); gap: var(--space-6); border-bottom: 1px solid var(--color-divider);
  }
  .facility, .facility--reverse { grid-template-columns: 1fr; gap: var(--space-8); }
  .facility--reverse .facility__media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .stat:nth-child(2)::after { display: none; }
  .offers { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .reviews__grid { grid-template-columns: 1fr; }
  .lead-form--row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .visit__grid { grid-template-columns: 1fr; }
  .visit__map { min-height: 320px; }
}