@charset "UTF-8";

/* ═══ tokens.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · DESIGN TOKENS
   Source: sacred_studios_brand_system_audit.md + presentation.thesacredstudios.com
   System: A · Dark / Marketing
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BACKGROUNDS ────────────────────────────────────────────────────────── */
  --bg-deep:          #050814;   /* atmospheric · hero only */
  --bg:               #0A0B10;   /* page bg · DEFAULT */
  --bg-card:          #14151A;   /* card surfaces */
  --bg-card-hi:       rgba(237, 231, 218, 0.04); /* elevated card */
  --bg-elev:          #1A1D24;
  --bg-elev-2:        #22252E;

  /* ─── CRIMSON FAMILY ─────────────────────────────────────────────────────── */
  --crimson:          #C41230;   /* primary brand red */
  --crimson-deep:     #8B0A20;   /* hover state */
  --crimson-bright:   #E63950;   /* highlight */
  --crimson-coral:    #CD364F;   /* softer · em italic emphasis · glows */
  --crimson-glow:     rgba(196, 18, 48, 0.35);
  --crimson-soft:     rgba(196, 18, 48, 0.10);
  --crimson-faint:    rgba(196, 18, 48, 0.03);

  /* ─── LINEN FAMILY (text on dark) ────────────────────────────────────────── */
  --linen:            #EDE7DA;   /* body text on dark · DEFAULT */
  --linen-mute:       #D8D1C0;
  --linen-soft:       #B8B2A6;
  --linen-faint:      rgba(237, 231, 218, 0.04);

  /* ─── LINES / BORDERS ────────────────────────────────────────────────────── */
  --line:             rgba(237, 231, 218, 0.08);
  --line2:            rgba(237, 231, 218, 0.16);
  --line3:            rgba(237, 231, 218, 0.24);

  /* ─── ACCENT (restrained · special-use only) ─────────────────────────────── */
  --gold:             #C8A158;   /* savings / success only */
  --good:             #6BB179;   /* live status indicators */

  /* ─── FONTS ──────────────────────────────────────────────────────────────── */
  --font-display:     'UnifrakturCook', Cinzel, 'Times New Roman', serif;
  --font-serif:       'Fraunces', Georgia, 'Times New Roman', serif;   /* editorial display + emphasis */
  --font:             'Montserrat', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif;
  --font-cond:        'Barlow Condensed', 'Montserrat', sans-serif;
  --font-body-alt:    'Barlow', 'Montserrat', sans-serif;

  /* ─── TYPE SCALE (per brand audit) ───────────────────────────────────────── */
  --h1-hero:          clamp(56px, 9vw, 132px);   /* MST demo scale */
  --h2-section:       clamp(40px, 6vw, 80px);
  --h3-card:          clamp(22px, 2.4vw, 32px);
  --body-lg:          17px;
  --body:             16px;
  --body-sm:          14px;
  --eyebrow:          11px;
  --mono:             11px;

  /* ─── SPACING (8px base) ─────────────────────────────────────────────────── */
  --s-1:              4px;
  --s-2:              8px;
  --s-3:              16px;
  --s-4:              24px;
  --s-5:              32px;
  --s-6:              48px;
  --s-7:              64px;
  --s-8:              80px;       /* section mobile */
  --s-9:              120px;      /* section desktop */
  --s-10:             160px;      /* hero / dramatic */

  /* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */
  --r-sm:             8px;        /* buttons, small cards */
  --r:                10px;       /* default cards */
  --r-lg:             14px;       /* large cards, modal panels */
  --r-pill:           100px;      /* pills, badges */

  /* ─── SHADOW RECIPES (per audit) ─────────────────────────────────────────── */
  --shadow-glow:      rgba(205, 54, 79, 1) 0 0 10px 0;
  --shadow-card:
    rgba(196, 18, 48, 0.12) 0 0 0 1px,
    rgba(196, 18, 48, 0.12) 0 0 30px 0,
    rgba(237, 231, 218, 0.08) 0 1px 0 0 inset,
    rgba(0, 0, 0, 0.4) 0 20px 60px 0;
  --shadow-hero:
    rgba(237, 231, 218, 0.04) 0 0 0 1px,
    rgba(0, 0, 0, 0.8) 0 30px 80px 0,
    rgba(196, 18, 48, 0.1) 0 0 120px 0;

  /* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
  --content-w:        1480px;
  --content-w-wide:   1480px;     /* nav max-width */
  --nav-h:            78px;
  --scrollbar-w:      10px;

  /* ─── MOTION ─────────────────────────────────────────────────────────────── */
  --ease:             cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:           0.2s;
  --t:                0.3s;
  --t-slow:           1s;

  /* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
  --z-bg:             0;
  --z-stars:          1;
  --z-grain:          2;
  --z-content:        5;
  --z-nav:            80;
  --z-modal:          200;
  --z-fab:            90;
  --z-chat-fab:       2147483647; /* sage chat widget — top of stack */
}

/* ═══ reset.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · RESET
   Modern CSS reset + brand base setup
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;            /* kill the page-level h-scroll (decorative glows bleed past the edge); clip keeps sticky nav working */
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--linen);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 500;
  line-height: 1.6;
  font-size: var(--body);
  min-height: 100vh;
}

::selection {
  background: var(--crimson);
  color: var(--linen);
}

::-webkit-scrollbar {
  width: var(--scrollbar-w);
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--crimson);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--crimson-deep);
}

img, video, svg {
  max-width: 100%;
  display: block;
  height: auto;
}

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

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Focus visibility — accessibility */
:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion support */
@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;
  }
}

/* Print baseline (just in case) */
@media print {
  body { background: white; color: black; }
}

/* ═══ components.css ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · COMPONENTS
   Reusable building blocks: typography, buttons, eyebrows, dividers, reveals
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── EYEBROWS ───────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--linen-soft);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--crimson);
}
.eyebrow.center {
  justify-content: center;
}
.eyebrow.center::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--crimson);
}

/* ─── HAIRLINE DIVIDERS WITH EYEBROW TEXT ────────────────────────────────── */
.hairline {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--linen-soft);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: var(--s-7);
}
.hairline::before,
.hairline::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line2);
}
.hairline span + span::before {
  content: '·';
  margin: 0 14px;
  color: var(--linen-soft);
  opacity: 0.5;
}
.hairline.center { justify-content: center; }

/* ─── TYPOGRAPHY PRIMITIVES ──────────────────────────────────────────────── */
.h-display {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--linen);
  font-size: var(--h1-hero);
}
.h-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--crimson-coral);
}

.h-section {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 80, 'SOFT' 0, 'WONK' 0;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: var(--linen);
  font-size: var(--h2-section);
}
.h-section em {
  font-style: italic;
  font-weight: 500;
  color: var(--crimson-coral);
}

.h-card {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--linen);
  font-size: var(--h3-card);
}
.h-card em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--crimson-coral);
}

.lede {
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--linen-mute);
}
.lede strong { color: var(--linen); font-weight: 700; }

.body-copy {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--body);
  line-height: 1.7;
  color: var(--linen-mute);
}
.body-copy strong { color: var(--linen); font-weight: 700; }

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--mono);
  letter-spacing: 0.3px;
  color: var(--linen-soft);
}
.mono b { color: var(--crimson-coral); font-weight: 700; }

/* ─── DROP CAP (editorial flourish) ──────────────────────────────────────── */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 5em;
  line-height: 0.85;
  padding: 0.04em 0.14em 0 0;
  color: var(--crimson-coral);
}

/* ─── BUTTONS (per brand audit: 8px radius, Montserrat 700, sharp) ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--crimson);
  color: #fff;
}
.btn-primary:hover {
  background: var(--crimson-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.btn-primary::after {
  content: '→';
  transition: transform var(--t-fast);
}
.btn-primary:hover::after {
  transform: translateX(4px);
}

.btn-ghost {
  background: rgba(237, 231, 218, 0.04);
  border: 1px solid var(--line2);
  color: var(--linen-mute);
}
.btn-ghost:hover {
  border-color: var(--line3);
  color: var(--linen);
  background: rgba(237, 231, 218, 0.08);
}
.btn-ghost::after {
  content: '→';
  transition: transform var(--t-fast);
  opacity: 0.7;
}
.btn-ghost:hover::after {
  transform: translateX(3px);
  opacity: 1;
}

.btn-sm {
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: 2px;
}

/* ─── PHONE/CONTACT CTA (used in nav + footer + demos) ───────────────────── */
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--linen-mute);
  transition: color var(--t-fast);
}
.cta-phone:hover { color: var(--crimson-bright); }
.cta-phone .live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
}

/* ─── CARDS ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: var(--s-6);
  transition: all var(--t) var(--ease);
}
.card:hover {
  border-color: var(--crimson);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.card-featured {
  background: var(--bg-card);
  border: 2px solid var(--crimson);
  border-radius: var(--r);
  padding: var(--s-6);
  position: relative;
  box-shadow: var(--shadow-card);
}
.card-featured-badge {
  position: absolute;
  top: -12px;
  left: var(--s-5);
  background: var(--crimson);
  color: #fff;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

/* ─── PILLS / BADGES ─────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--linen-soft);
  padding: 9px 20px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: rgba(237, 231, 218, 0.03);
  backdrop-filter: blur(10px);
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson-coral);
  box-shadow: 0 0 8px var(--crimson-coral);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ─── REVEAL ANIMATIONS (scroll-triggered) ───────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.rv.vis {
  opacity: 1;
  transform: translateY(0);
}
/* First-viewport content: revealed instantly on load (no fade/stagger) — the
   1s+delay fade made pages read as slow even after the network finished. */
.rv.rv-now { transition: none !important; }
.rv-d1 { transition-delay: 0.12s; }
.rv-d2 { transition-delay: 0.24s; }
.rv-d3 { transition-delay: 0.36s; }
.rv-d4 { transition-delay: 0.48s; }
.rv-d5 { transition-delay: 0.60s; }
.rv-d6 { transition-delay: 0.72s; }

/* ═══════════════════════════════════════════════════════════════════════════
   SITEWIDE SCROLL-MOTION PRIMITIVES        (driven by assets/js/motion.js)

   Four reusable pieces. Everything animates transform / opacity only — the one
   exception is .draw-path's stroke-dashoffset, which is paint-bound by nature,
   so keep those strokes short and few. Nothing here runs off-screen: the
   scroll-in transitions fire once via IntersectionObserver, and the continuous
   loops at the bottom are paused with .mo-idle whenever they leave the viewport.

     .num-roll   count-up number   <span class="num-roll" data-to="1284" data-suffix="%">1,284%</span>
     .bar-fill   meter fill        <span class="bar-track"><span class="bar-fill" style="--to:72"></span></span>
     .draw-path  SVG stroke draw   <path class="draw-path" pathLength="1" d="…"/>
     .stagger    child sequence    <ul class="stagger">…</ul>

   Trigger: motion.js adds .mo-in to the nearest .mo ancestor (or the row /
   <svg> group) when it scrolls into view. Add class "mo" to make any element
   the trigger for everything inside it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --mo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mo-dur:  900ms;
  --mo-step: 70ms;
}

/* ─── 1 · COUNT-UP NUMBERS ───────────────────────────────────────────────── */
.num-roll,
.countup {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
/* .nr-ready is added by motion.js once it has built the ghost. Until then the
   element is plain text, so the real number is on screen even with JS off.
   BLOCKER FIX: white-space:nowrap made multi-word values ("1 wknd", "60 days",
   "5 signals") unbreakable, so stat bands that used to wrap overflowed and were
   sheared off by their own overflow:hidden ("$12K" rendering as "$12I"). The
   ghost still reserves the box, so digits rolling cannot reflow anything —
   nowrap was never what prevented the jitter. */
.num-roll.nr-ready,
.countup.nr-ready {
  position: relative;
  display: inline;
  white-space: normal;
}
/* Ghost holds the FINAL string and reserves the box — nothing around a rolling
   number ever reflows, and the reservation survives the webfont swap. */
.nr-g { visibility: hidden; }
.nr-v {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: inherit;
}

/* ─── 2 · BAR / METER FILL (scaleX — never width) ────────────────────────── */
.bar-track {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(237, 231, 218, 0.07);
  overflow: hidden;
}
/* --to is a plain number 0–100 (a percent with the unit left off).
   Resting state is FILLED; html.mo-js is what empties it so it can animate. */
.bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--crimson-coral) 100%);
  transform: scaleX(calc(var(--to, 100) / 100));
  transform-origin: left center;
  transition: transform var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--i, 0) * var(--mo-step));
}
.mo-js .bar-fill { transform: scaleX(0); }
.mo-js .mo-in .bar-fill,
.mo-js .bar-fill.mo-in { transform: scaleX(calc(var(--to, 100) / 100)); }

.bar-fill.bar-mute {
  background: linear-gradient(90deg, rgba(237, 231, 218, 0.20) 0%, rgba(237, 231, 218, 0.34) 100%);
}

.meter { display: grid; gap: 16px; }
.meter-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: baseline;
}
.meter-row .bar-track { grid-column: 1 / -1; }
.meter-k {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--linen-soft);
}
.meter-v {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--linen);
  font-variant-numeric: tabular-nums;
}

/* ─── 3 · SPARKLINE / PATH DRAW (needs pathLength="1") ───────────────────── */
.draw-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--mo-ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.mo-js .draw-path { stroke-dashoffset: 1; }
.mo-js .mo-in .draw-path,
.mo-js .draw-path.mo-in { stroke-dashoffset: 0; }

/* companion: an area/point that fades in behind a drawn line */
.draw-fade { transition: opacity 0.9s var(--mo-ease) 0.4s; }
.mo-js .draw-fade { opacity: 0; }
.mo-js .mo-in .draw-fade,
.mo-js .draw-fade.mo-in { opacity: 1; }

/* ─── 4 · STAGGER GROUP (pure CSS — nth-child delays, no JS) ─────────────── */
.stagger > * {
  transition: opacity 0.52s var(--mo-ease), transform 0.52s var(--mo-ease);
}
.mo-js .stagger > * {
  opacity: 0;
  transform: translateY(10px);
}
.mo-js .stagger.mo-in > * {
  opacity: 1;
  transform: none;
}
.stagger-fast { --mo-step: 38ms; }
.stagger-slow { --mo-step: 110ms; }
.mo-js .stagger.mo-in > *:nth-child(1)  { transition-delay: calc(var(--mo-step) * 0); }
.mo-js .stagger.mo-in > *:nth-child(2)  { transition-delay: calc(var(--mo-step) * 1); }
.mo-js .stagger.mo-in > *:nth-child(3)  { transition-delay: calc(var(--mo-step) * 2); }
.mo-js .stagger.mo-in > *:nth-child(4)  { transition-delay: calc(var(--mo-step) * 3); }
.mo-js .stagger.mo-in > *:nth-child(5)  { transition-delay: calc(var(--mo-step) * 4); }
.mo-js .stagger.mo-in > *:nth-child(6)  { transition-delay: calc(var(--mo-step) * 5); }
.mo-js .stagger.mo-in > *:nth-child(7)  { transition-delay: calc(var(--mo-step) * 6); }
.mo-js .stagger.mo-in > *:nth-child(8)  { transition-delay: calc(var(--mo-step) * 7); }
.mo-js .stagger.mo-in > *:nth-child(9)  { transition-delay: calc(var(--mo-step) * 8); }
.mo-js .stagger.mo-in > *:nth-child(10) { transition-delay: calc(var(--mo-step) * 9); }
.mo-js .stagger.mo-in > *:nth-child(11) { transition-delay: calc(var(--mo-step) * 10); }
.mo-js .stagger.mo-in > *:nth-child(12) { transition-delay: calc(var(--mo-step) * 11); }
.mo-js .stagger.mo-in > *:nth-child(13) { transition-delay: calc(var(--mo-step) * 12); }
.mo-js .stagger.mo-in > *:nth-child(14) { transition-delay: calc(var(--mo-step) * 13); }
.mo-js .stagger.mo-in > *:nth-child(15) { transition-delay: calc(var(--mo-step) * 14); }
.mo-js .stagger.mo-in > *:nth-child(16) { transition-delay: calc(var(--mo-step) * 15); }
/* anything past 16 lands together rather than dragging the sequence out */
.mo-js .stagger.mo-in > *:nth-child(n+17) { transition-delay: calc(var(--mo-step) * 16); }

/* ─── CONTINUOUS LIFE (subtle, and paused the moment it scrolls away) ────── */
/* motion.js adds .mo-idle to every looping element that is off-screen. If the
   observer is unavailable the class is never applied and the loops just run. */
.mo-idle,
.mo-idle::before,
.mo-idle::after { animation-play-state: paused !important; }

/* the crimson rule under every section eyebrow breathes — 26×1px, opacity +
   transform only, so it costs the compositor essentially nothing */
@keyframes mo-ember {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%      { opacity: 1;   transform: scaleX(1.2); }
}
.eyebrow::before {
  transform-origin: left center;
  animation: mo-ember 5.4s ease-in-out infinite;
}
.eyebrow.center::after {
  transform-origin: right center;
  animation: mo-ember 5.4s ease-in-out infinite;
  animation-delay: -2.7s;
}

/* status dot: solid core + one expanding ring (transform/opacity only) */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: mo-ping 2.8s var(--mo-ease) infinite;
}
@keyframes mo-ping {
  0%        { transform: scale(1);   opacity: 0.5; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ─── REDUCED MOTION — everything above lands on its end state instantly ─── */
@media (prefers-reduced-motion: reduce) {
  .bar-fill,
  .mo-js .bar-fill {
    transition: none !important;
    transform: scaleX(calc(var(--to, 100) / 100)) !important;
  }
  .draw-path,
  .mo-js .draw-path {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
  .draw-fade,
  .mo-js .draw-fade { transition: none !important; opacity: 1 !important; }
  .stagger > *,
  .mo-js .stagger > * {
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .eyebrow::before,
  .eyebrow.center::after,
  .pulse-dot::after,
  .mo-loop,
  .mo-loop::before,
  .mo-loop::after { animation: none !important; }
}

/* ─── SCENE LAYOUT (used by every page) ──────────────────────────────────── */
.scene {
  position: relative;
  padding: var(--s-9) 24px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .scene { padding: 140px 56px; }
}
@media (min-width: 1100px) {
  .scene { padding: 160px 96px; }
}
.scene-w {
  max-width: var(--content-w);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 5;
}

/* ─── SCENE GLOW ORBS (atmospheric depth) ────────────────────────────────── */
.scene-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
  opacity: 0.28;
  z-index: 1;
}
.glow-tl {
  top: -200px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--crimson) 0%, transparent 70%);
}
.glow-br {
  bottom: -300px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--crimson) 0%, transparent 70%);
}
.glow-c {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--crimson-soft) 0%, transparent 60%);
}

/* ─── DECORATIVE EYE DIVIDER (small Sacred eye between scenes) ───────────── */
.eye-divider {
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0;
  position: relative;
  z-index: 5;
}
.eye-divider svg {
  width: 36px;
  height: 36px;
  opacity: 0.45;
}

/* ─── HIDE UTILITY ───────────────────────────────────────────────────────── */
.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;
}

/* ════════════════════════════════════════════════════════════════════════
   BOLD AUTHORITY SWEEP — all display headlines site-wide are Montserrat 800
   ALL-CAPS with non-italic coral emphasis (locked on the homepage 2026-07-02,
   extended site-wide 2026-07-06). Fraunces remains for body-level accents only.
   ════════════════════════════════════════════════════════════════════════ */
.h-display, .h-section, .subhero h1, .cta-band h2, .cross-link .cl-name {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.98;
}
.h-display em, .h-section em, .subhero h1 em, .cta-band h2 em, .cross-link .cl-name em, .h-card em {
  font-family: var(--font) !important;
  font-style: normal !important;
  font-weight: inherit;
  color: var(--crimson-coral);
}
/* caps set wider and read bigger — trim display sizes so nothing clips */
.subhero h1 { font-size: clamp(34px, 5.4vw, 78px); max-width: 22ch; }
.h-display  { font-size: clamp(34px, 5.2vw, 74px); }
.h-section  { font-size: clamp(28px, 4vw, 50px); }
.cta-band h2 { font-size: clamp(30px, 4.6vw, 56px); }
.cross-link .cl-name { font-size: clamp(19px, 2.6vw, 27px); }

/* ═══ interactive.css ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · INTERACTIVE.CSS
   Styles for the new moving parts: bento grid, live-demo embeds, before/after
   slider, ROI calculator, count-up numerals, marquee, device frame, lead-strip.
   Pairs with assets/js/interactive.js. Uses tokens.css variables throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* smooth anchor scrolling — auto-disabled for reduced-motion users */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* tabular numerals so count-ups don't jitter width */
.countup { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ─── BENTO GRID ──────────────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
/* featured tiles span full width on mobile (span rules below only apply ≥900px) */
.bento-tile.col-4, .bento-tile.col-6 { grid-column: 1 / -1; }
.bento-tile {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bento-tile:hover {
  transform: translateY(-4px);
  border-color: var(--crimson);
  box-shadow: var(--shadow-card);
}
/* span helpers (desktop) */
@media (min-width: 900px) {
  .bento-tile { grid-column: span 2; }
  .bento-tile.col-3 { grid-column: span 3; }
  .bento-tile.col-4 { grid-column: span 4; }
  .bento-tile.col-6 { grid-column: span 6; }
  .bento-tile.row-2 { grid-row: span 2; }
}
.bento-tile img,
.bento-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  z-index: 0;
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease);
}
.bento-tile:hover img,
.bento-tile:hover video { opacity: 0.5; transform: scale(1.04); }
.bento-tile > * { position: relative; z-index: 1; }
.bento-tile::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(5,8,20,0.85) 100%);
}
.bento-eyebrow {
  font-family: var(--font);
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--crimson-bright); margin-bottom: 8px;
}
.bento-stat {
  font-family: var(--font);
  font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--linen);
}
.bento-label { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--linen-mute); margin-top: 6px; line-height: 1.5; }
.bento-label strong { color: var(--linen); }

/* ─── COUNT-UP STAT BAND ──────────────────────────────────────────────────── */
.work-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line2); border-radius: var(--r-lg);
  overflow: hidden; margin-top: var(--s-5);
}
@media (min-width: 780px) { .work-stats { grid-template-columns: repeat(4, 1fr); } }
.work-stat { background: var(--bg-card); padding: var(--s-6) var(--s-4); text-align: center; }
.work-stat-num {
  font-family: var(--font); font-size: clamp(34px, 5vw, 56px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--linen); line-height: 1; font-variant-numeric: tabular-nums;
}
.work-stat-label { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--linen-soft); margin-top: 10px; line-height: 1.4; }

/* ─── LIVE DEMO EMBED (facade → iframe) ───────────────────────────────────── */
.demo-embed {
  position: relative;
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 10;
}
/* Mobile: the fixed 16:10 box (~198px tall at 375) has overflow:hidden and clips
   the facade's "Launch the builder" button — swap to a min-height box so the
   title + CTA always fit. */
@media (max-width: 600px) {
  .demo-embed { aspect-ratio: auto; min-height: 440px; }
}
.demo-facade {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4); text-align: center; padding: var(--s-6);
  background:
    radial-gradient(ellipse at 50% 30%, var(--crimson-soft) 0%, transparent 60%),
    var(--bg-card);
  transition: opacity var(--t) var(--ease);
}
.demo-live .demo-facade { opacity: 0; pointer-events: none; }
.demo-facade-tag {
  font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--crimson-bright);
  display: inline-flex; align-items: center; gap: 10px;
}
.demo-facade-title { font-family: var(--font); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--linen); letter-spacing: -0.01em; }
.demo-facade-sub { font-family: var(--font); font-size: 14px; color: var(--linen-soft); max-width: 42ch; line-height: 1.6; }
.demo-launch {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 14px 26px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: var(--crimson); color: #fff; transition: all var(--t-fast) var(--ease);
}
.demo-launch::after { content: '↗'; transition: transform var(--t-fast); }
.demo-launch:hover { background: var(--crimson-deep); box-shadow: 0 0 24px var(--crimson-glow); transform: translateY(-1px); }
.demo-launch:hover::after { transform: translate(2px, -2px); }
.demo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: var(--bg); }
.demo-embeds-intro { margin-top: var(--s-7); margin-bottom: var(--s-5); }
.demo-embeds { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .demo-embeds { grid-template-columns: 1fr 1fr; } }

/* ─── BEFORE / AFTER SLIDER ────────────────────────────────────────────────── */
.ba {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden;
  cursor: ew-resize; user-select: none; touch-action: pan-y; background: var(--bg-card);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { z-index: 2; clip-path: inset(0 0 0 50%); }
.ba-label {
  position: absolute; bottom: 14px; z-index: 3;
  font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--linen); background: rgba(5,8,20,0.7); padding: 6px 12px; border-radius: var(--r-pill); backdrop-filter: blur(8px);
}
.ba-label.before { left: 14px; }
.ba-label.after { right: 14px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
  width: 2px; background: var(--crimson-bright); transform: translateX(-1px);
  box-shadow: 0 0 16px var(--crimson-glow);
}
.ba-handle::after {
  content: '⟺'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--crimson); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: var(--shadow-glow); cursor: ew-resize;
}
.ba-handle:focus-visible { outline: 2px solid var(--linen); outline-offset: 4px; }
.ba-dragging { cursor: ew-resize; }

/* ─── ROI CALCULATOR ───────────────────────────────────────────────────────── */
.roi {
  background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg);
  padding: var(--s-6); display: grid; gap: var(--s-5);
}
@media (min-width: 880px) { .roi { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--s-7); } }
.roi-controls { display: flex; flex-direction: column; gap: var(--s-5); }
.roi-field label {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--linen-soft);
}
.roi-field label b { font-size: 17px; font-weight: 800; color: var(--crimson-coral); letter-spacing: 0; text-transform: none; }
.roi input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: var(--line3); outline: none; cursor: pointer;
}
.roi input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--crimson); border: 3px solid var(--bg-card); box-shadow: 0 0 12px var(--crimson-glow); cursor: grab;
}
.roi input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--crimson);
  border: 3px solid var(--bg-card); box-shadow: 0 0 12px var(--crimson-glow); cursor: grab;
}
.roi-output {
  text-align: center; padding: var(--s-6) var(--s-5);
  border: 1px solid var(--crimson); border-radius: var(--r); background: var(--crimson-faint);
}
.roi-output-num {
  font-family: var(--font); font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--linen); font-variant-numeric: tabular-nums;
}
.roi-output-label { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson-bright); margin-top: 10px; }
.roi-output-note { font-family: var(--font); font-size: 13px; color: var(--linen-soft); line-height: 1.6; margin-top: 14px; }

/* ─── MARQUEE (tasteful, pauses on hover, reduced-motion safe) ─────────────── */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; gap: var(--s-7); white-space: nowrap; animation: marquee 40s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-item { font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--linen-soft); display: inline-flex; align-items: center; gap: var(--s-7); }
.marquee-band { padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.marquee-band-label { text-align: center; font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--linen-soft); margin-bottom: var(--s-4); }

/* ─── DEVICE / BROWSER FRAME ───────────────────────────────────────────────── */
.browser-frame { border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow-card); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-elev-2); border-bottom: 1px solid var(--line); }
.browser-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line3); }
.browser-url { margin-left: 12px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--linen-soft); }
.browser-body { display: block; }
.browser-body img, .browser-body video { display: block; width: 100%; height: auto; }

/* ─── LEAD STRIP (delayed passive email capture) ──────────────────────────── */
.lead-strip {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%);
  z-index: var(--z-fab); width: min(640px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(20,21,26,0.96); backdrop-filter: blur(16px);
  border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 16px 18px;
  box-shadow: var(--shadow-card); transition: transform 0.5s var(--ease-spring), opacity 0.4s var(--ease); opacity: 0;
}
.lead-strip.show { transform: translate(-50%, 0); opacity: 1; }
.lead-strip-text { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--linen-mute); flex: 1; min-width: 180px; line-height: 1.5; }
.lead-strip-text b { color: var(--linen); }
.lead-strip form { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.lead-strip input {
  flex: 1; background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-sm);
  padding: 11px 14px; color: var(--linen); font-family: var(--font); font-size: 14px;
}
.lead-strip input:focus { outline: none; border-color: var(--crimson); }
.lead-strip-close { background: none; border: none; color: var(--linen-soft); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
.lead-strip-close:hover { color: var(--linen); }

/* ─── MULTI-STEP FORM (theme-agnostic — inherits the form's own colors) ───── */
.ssf-step[hidden] { display: none; }
.ssf-progress { font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 18px; }
.ssf-step-label { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson); margin-bottom: 16px; opacity: 0.9; }
.ssf-steps-nav { display: flex; gap: 10px; align-items: stretch; margin-top: 6px; }
.ssf-steps-nav .ssf-submit, .ssf-steps-nav .ssf-next { flex: 1; }
.ssf-back {
  background: var(--bg-elev); border: 1px solid var(--line2); color: var(--linen-mute); opacity: 1;
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 14px 22px; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.ssf-back:hover { border-color: var(--crimson); color: var(--linen); }
/* .ssf-submit sets its own display, which overrides the [hidden] attribute —
   force hidden nav buttons (next/submit/back) to actually hide between steps */
.ssf-steps-nav [hidden] { display: none !important; }

/* ─── SECTION PERF: skip offscreen render cost on long pages ───────────────── */
.cv-auto { content-visibility: auto; contain-intrinsic-size: 1px 800px; }

/* ════════════════════════════════════════════════════════════════════════
   SACRED STACK CARDS — fanned · skewed · grayscale→crimson on hover
   Reusable for any 3-item "stack of info" (packaging, pillars, tiers).
   ════════════════════════════════════════════════════════════════════════ */
.ss-pack-cap { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--linen-soft); max-width: 56ch; margin-bottom: 4px; }
.ss-pack-cap em { font-style: italic; color: var(--crimson-coral); font-weight: 500; }

.sacred-stack { display: grid; grid-template-areas: 'stack'; place-items: center; width: 100%; padding: 64px 0 104px; min-height: 340px; }
.sacred-stack-card {
  grid-area: stack; position: relative; width: 22rem; max-width: 88vw; min-height: 9.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: 20px 22px; text-decoration: none;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: rgba(20, 21, 26, 0.72); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  transform: skewY(-7deg);
  transition: transform .6s var(--ease), border-color .35s var(--ease), filter .6s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.sacred-stack-card::after { content: ''; position: absolute; inset: -1px -1px -1px auto; width: 62%; border-radius: 0 var(--r) var(--r) 0; background: linear-gradient(to left, var(--bg) 6%, transparent); pointer-events: none; transition: opacity .5s var(--ease); }
.sacred-stack-card.s1 { transform: skewY(-7deg) translate(0, 0);           filter: grayscale(1) brightness(.8); z-index: 1; }
.sacred-stack-card.s2 { transform: skewY(-7deg) translate(3.4rem, 2.4rem); filter: grayscale(1) brightness(.9); z-index: 2; }
.sacred-stack-card.s3 { transform: skewY(-7deg) translate(6.8rem, 4.8rem); filter: grayscale(0);                z-index: 3; }
.sacred-stack-card:hover { filter: grayscale(0); border-color: var(--crimson); background: var(--bg-card); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px var(--crimson-soft); z-index: 20; }
.sacred-stack-card.s1:hover { transform: skewY(-7deg) translate(0, -2.6rem); }
.sacred-stack-card.s2:hover { transform: skewY(-7deg) translate(3.4rem, -.2rem); }
.sacred-stack-card.s3:hover { transform: skewY(-7deg) translate(6.8rem, 2.2rem); }
.sacred-stack-card:hover::after { opacity: 0; }

.ssc-top { display: flex; align-items: center; gap: 12px; }
.ssc-head { display: flex; flex-direction: column; gap: 2px; }
.ssc-badge { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--crimson); color: #fff; box-shadow: 0 6px 18px var(--crimson-glow); }
.ssc-badge svg { width: 18px; height: 18px; display: block; }
.ssc-kicker { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson-coral); }
.ssc-title { font-family: var(--font); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--linen); line-height: 1.1; }
.ssc-desc { font-family: var(--font); font-size: 13px; line-height: 1.55; color: var(--linen-mute); }
.ssc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ssc-meta { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .6px; color: var(--linen-soft); }
.ssc-go { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--crimson-coral); opacity: 0; transition: opacity .35s var(--ease); white-space: nowrap; }
.sacred-stack-card:hover .ssc-go { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .sacred-stack-card, .sacred-stack-card::after, .ssc-go { transition: none; } }
@media (max-width: 680px) {
  .sacred-stack { min-height: 430px; padding-bottom: 88px; }
  .sacred-stack-card { width: 18.5rem; min-height: 10.5rem; }
  .sacred-stack-card.s2 { transform: skewY(-7deg) translate(2rem, 2.6rem); }
  .sacred-stack-card.s3 { transform: skewY(-7deg) translate(4rem, 5.2rem); }
  .sacred-stack-card.s1:hover { transform: skewY(-7deg) translate(0, -2.2rem); }
  .sacred-stack-card.s2:hover { transform: skewY(-7deg) translate(2rem, .2rem); }
  .sacred-stack-card.s3:hover { transform: skewY(-7deg) translate(4rem, 2.6rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTO-TYPING SAGE DEMO — self-playing chat that types out on scroll-in
   ════════════════════════════════════════════════════════════════════════ */
.sage-demo { max-width: 540px; margin: var(--s-6) 0 0; }
.sage-demo-frame { background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sage-demo-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.sage-demo-ava { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--crimson), var(--crimson-deep)); color: #fff; font-family: var(--font); font-weight: 800; font-size: 16px; box-shadow: 0 4px 14px var(--crimson-glow); }
.sage-demo-name { font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--linen); line-height: 1.2; }
.sage-demo-status { font-family: var(--font); font-size: 11.5px; color: var(--linen-soft); display: flex; align-items: center; gap: 6px; }
.sd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.sage-demo-tag { margin-left: auto; font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crimson-coral); border: 1px solid var(--crimson-soft); padding: 4px 9px; border-radius: var(--r-pill); }
.sage-demo-log { padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 348px; max-height: 430px; overflow-y: auto; scroll-behavior: smooth; }
.sd-msg { max-width: 82%; padding: 11px 15px; border-radius: 14px; font-family: var(--font); font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sd-msg.in { opacity: 1; transform: none; }
.sd-user { align-self: flex-end; background: var(--crimson); color: #fff; border-bottom-right-radius: 4px; }
.sd-sage { align-self: flex-start; background: var(--bg-elev-2); color: var(--linen); border-bottom-left-radius: 4px; }
.sd-typing { display: inline-flex; gap: 4px; align-items: center; padding: 14px 16px; }
.sd-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--linen-soft); animation: sdBlink 1.2s infinite; }
.sd-typing span:nth-child(2){ animation-delay: .2s; }
.sd-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes sdBlink { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }
.sd-cta { align-self: flex-start; margin-top: 2px; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: #fff; background: var(--crimson); padding: 9px 16px; border-radius: var(--r-sm); text-decoration: none; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sd-cta.in { opacity: 1; transform: none; }
.sd-cta:hover { background: var(--crimson-deep); }
.sage-demo-cap { font-family: var(--font); font-size: 13px; color: var(--linen-soft); margin-top: 14px; }
.sage-demo-cap em { font-style: italic; color: var(--crimson-coral); }
@media (max-width: 600px){ .sage-demo-log { min-height: 388px; } .sd-msg { max-width: 88%; } }

/* ── BEFORE/AFTER — text-panel variant (reuses .ba slider JS) ──────────────── */
.ba.ba-text { aspect-ratio: auto; min-height: 380px; }
@media (max-width: 640px){ .ba.ba-text { min-height: 510px; } }
.ba-pane { position: absolute; inset: 0; padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
@media (max-width: 640px){ .ba-pane { padding: 26px 22px; gap: 10px; } }
.ba-pane-before { background: linear-gradient(135deg, #150a0d, #0c0a0e); }
.ba-pane-after { background: linear-gradient(135deg, var(--bg-card), var(--bg-elev)); }
.ba-pane h3 { font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.ba-pane-before h3 { color: var(--linen-soft); }
.ba-pane-after h3 { color: var(--crimson-coral); }
.ba-row { display: flex; align-items: flex-start; gap: 11px; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--linen-mute); max-width: 30rem; }
@media (max-width: 640px){ .ba-row { font-size: 12.5px; } }
.ba-ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ba-pane-before .ba-ic { color: var(--linen-soft); opacity: .55; }
.ba-pane-after .ba-ic { color: var(--good); }

/* ── FLOW — draw-on-scroll pipeline diagram ───────────────────────────────── */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-top: var(--s-5); }
.flow-node { flex: 1 1 0; min-width: 148px; background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r); padding: 22px 18px; display: flex; flex-direction: column; gap: 7px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.flow.drawn .flow-node { opacity: 1; transform: none; }
.flow-node-hot { border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson-soft), 0 20px 50px rgba(0,0,0,.35); }
.flow-node-you { background: linear-gradient(135deg, var(--bg-elev), var(--bg-card)); border-color: var(--line3); }
.flow-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--crimson); color: #fff; box-shadow: 0 6px 16px var(--crimson-glow); }
.flow-ic svg { width: 17px; height: 17px; display: block; }
.flow-node-you .flow-ic { background: var(--crimson-deep); }
.flow-t { font-family: var(--font); font-weight: 700; font-size: 14.5px; color: var(--linen); line-height: 1.2; margin-top: 4px; }
.flow-s { font-family: var(--font); font-size: 12px; color: var(--linen-soft); line-height: 1.45; }
.flow-link { flex: 0 0 26px; align-self: center; height: 2px; background: linear-gradient(to right, var(--crimson), var(--crimson-coral)); position: relative; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.flow.drawn .flow-link { transform: scaleX(1); }
.flow-link::after { content: '\25B8'; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); color: var(--crimson-coral); font-size: 11px; }
.flow.drawn .flow-node:nth-child(1){ transition-delay:.05s }
.flow.drawn .flow-link:nth-child(2){ transition-delay:.25s }
.flow.drawn .flow-node:nth-child(3){ transition-delay:.35s }
.flow.drawn .flow-link:nth-child(4){ transition-delay:.55s }
.flow.drawn .flow-node:nth-child(5){ transition-delay:.65s }
.flow.drawn .flow-link:nth-child(6){ transition-delay:.85s }
.flow.drawn .flow-node:nth-child(7){ transition-delay:.95s }
.flow.drawn .flow-link:nth-child(8){ transition-delay:1.15s }
.flow.drawn .flow-node:nth-child(9){ transition-delay:1.25s }
@media (max-width: 760px){
  .flow { flex-direction: column; align-items: stretch; }
  .flow-node { width: 100%; }
  .flow-link { flex-basis: 22px; width: 2px; height: 22px; align-self: flex-start; margin-left: 25px; transform: scaleY(0); transform-origin: top; }
  .flow.drawn .flow-link { transform: scaleY(1); }
  .flow-link::after { content: '\25BE'; right: auto; left: 50%; top: auto; bottom: -5px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){ .flow-node, .flow-link { transition: none; opacity: 1; transform: none; } }

/* before/after text — anchor each side's content to its own half (so the wipe reveals readable text), stack on mobile */
.ba.ba-text { min-height: 420px; }
.ba-pane-before { align-items: flex-start; }
.ba-pane-after { align-items: flex-end; }
.ba-pane h3, .ba-pane .ba-row { max-width: 45%; }
.ba-pane-after h3 { text-align: right; }
.ba-pane-after .ba-row { flex-direction: row-reverse; text-align: right; }
@media (max-width: 700px){
  .ba.ba-text { aspect-ratio: auto; min-height: 0; cursor: default; touch-action: auto; display: flex; flex-direction: column; }
  .ba.ba-text .ba-pane { position: relative; inset: auto; clip-path: none !important; align-items: stretch !important; }
  .ba.ba-text .ba-pane h3, .ba.ba-text .ba-pane .ba-row { max-width: 100%; }
  .ba.ba-text .ba-pane-after { text-align: left; }
  .ba.ba-text .ba-pane-after h3 { text-align: left; }
  .ba.ba-text .ba-pane-after .ba-row { flex-direction: row; text-align: left; }
  .ba.ba-text .ba-handle, .ba.ba-text .ba-label { display: none; }
}

/* flow — drive reveal off the proven .rv/.vis observer (site.js), not custom JS */
.flow.rv { opacity: 1 !important; transform: none !important; }
.flow.vis .flow-node { opacity: 1; transform: none; }
.flow.vis .flow-link { transform: scaleX(1); }
.flow.vis .flow-node:nth-child(1){ transition-delay:.05s }
.flow.vis .flow-link:nth-child(2){ transition-delay:.25s }
.flow.vis .flow-node:nth-child(3){ transition-delay:.35s }
.flow.vis .flow-link:nth-child(4){ transition-delay:.55s }
.flow.vis .flow-node:nth-child(5){ transition-delay:.65s }
.flow.vis .flow-link:nth-child(6){ transition-delay:.85s }
.flow.vis .flow-node:nth-child(7){ transition-delay:.95s }
.flow.vis .flow-link:nth-child(8){ transition-delay:1.15s }
.flow.vis .flow-node:nth-child(9){ transition-delay:1.25s }
@media (max-width:760px){ .flow.vis .flow-link { transform: scaleY(1); } }

/* ═══ motion-fx.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   Motion layer start states (Wave 1 — hero entrances).
   EVERY hidden start state is scoped to html.fx-js, which only motion-fx.js
   adds AFTER confirming window.Motion loaded. Script blocked/404 → nothing
   here applies → all copy sits in its final visible state. Never break this.
   Spec: MOTION_PLAYBOOK.md §2 "The html.fx-js pattern is mandatory".
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero nodes wait for their entrance (opacity only — transforms come from
   explicit from-keyframes in JS, so there is no offset flash). */
html.fx-js [data-fx="hero-lede"],
html.fx-js [data-fx="hero-ctas"],
html.fx-js [data-fx="hero-meta"],
html.fx-js [data-fx="sh"] { opacity: 0; }

/* The h1 hides as a container until the word-split runs, then each word rises
   out of an overflow mask. 0.14em pad keeps descenders (g, y, p) unclipped. */
html.fx-js [data-fx="hero-h1"] { opacity: 0; }
.fxw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.fxwi { display: inline-block; transform: translateY(112%); will-change: transform; }
html.fx-hero-done .fxwi { will-change: auto; }

/* ── Wave 2 ──────────────────────────────────────────────────────────────── */

/* Range chips wait for the centre-out cascade (JS clears inline styles after,
   returning control to the .lit/.dim stylesheet states). */
html.fx-js .range-chips:not(.fx-in) .range-chip { opacity: 0; }

/* Process step connectors: crimson thread between step cards. Hidden (undrawn)
   only under fx-js; blocked script → thread simply sits visible. */
.step-link { display: flex; justify-content: center; margin: -2px 0; }
.step-link svg { display: block; height: 44px; width: 24px; overflow: visible; }
.step-link path { stroke: var(--crimson); stroke-width: 2; stroke-linecap: round; fill: none; opacity: 0.65; }
html.fx-js .step-link path { stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (min-width: 760px) {
  /* align the thread with the step-number column, not the card centre */
  .step-link { justify-content: flex-start; padding-left: 58px; }
}

/* ── Wave 3 ──────────────────────────────────────────────────────────────── */

/* Grid children wait for their cascade (JS clears inline styles after). */
html.fx-js [data-fx-grid]:not(.fx-in) > * { opacity: 0; }

/* Nav retract — class flip from JS, CSS carries the motion (compositor). */
#topNav { will-change: auto; }
#topNav.nav-hid { transform: translateY(-110%); }

/* Reading progress hairline (long-form pages, injected by motion-fx.js). */
.fx-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 200;
  background: var(--crimson); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Terminal scanline (injected). */
.terminal-body { position: relative; }
.fx-scan {
  position: absolute; left: 0; right: 0; top: 8px; height: 6px;
  background: linear-gradient(180deg, rgba(196,18,48,0.10), transparent);
  pointer-events: none;
}

/* FAQ toggle picks up the spring linear() easing when Motion injected it. */
html.fx-js .faq-toggle { transition: transform var(--fx-snap, 0.18s var(--ease)), background 0.18s, border-color 0.18s, color 0.18s; }

/* ── Wave 4a · Cross-document View Transitions ──────────────────────────────
   Pure browser primitive (Chrome 126+ / Safari 18.2+; Firefox = instant swap,
   today's behavior). Old page holds, new page wipes down over it in 350ms.
   The nav and starfield get their own snapshot pairs so chrome reads stable
   while content moves. Works with JS blocked — this is CSS, not Motion. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: none; }              /* hold old frame */
::view-transition-new(root) {
  animation: fx-vt-wipe 0.35s cubic-bezier(0, 0.55, 0.45, 1); /* circOut */
}
@keyframes fx-vt-wipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

#topNav { view-transition-name: site-nav; }
#stars-canvas { view-transition-name: stars; }
::view-transition-group(site-nav) { z-index: 300; }
::view-transition-old(stars), ::view-transition-new(stars) { animation-duration: 0.35s; }

/* Reduced motion: everything visible, immediately, no exceptions. */
@media (prefers-reduced-motion: reduce) {
  html.fx-js [data-fx] { opacity: 1 !important; transform: none !important; }
  html.fx-js .fxwi { transform: none !important; }
  html.fx-js .range-chips:not(.fx-in) .range-chip { opacity: 1 !important; }
  html.fx-js .step-link path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  html.fx-js [data-fx-grid]:not(.fx-in) > * { opacity: 1 !important; }
  #topNav.nav-hid { transform: none; }
  .fx-scan { display: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }   /* instant swap */
}

/* ═══ chrome.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · SHARED CHROME
   Top sticky nav · Footer · Atmospheric layers (starfield, grain)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ATMOSPHERIC LAYERS ─────────────────────────────────────────────────── */
#stars-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-stars);
  opacity: 0.85;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── TOP NAV (sticky · 78px · matches presentation.thesacredstudios.com) ── */
#topNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(10, 11, 16, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: all var(--t) var(--ease);
}
#topNav.scrolled {
  background: rgba(5, 8, 20, 0.96);
  border-bottom-color: var(--line2);
}

.nav-w {
  max-width: var(--content-w-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: 24px;
}
@media (min-width: 768px) {
  .nav-w { padding: 0 40px; }
}

.nav-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.nav-mark-text {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--linen);
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.nav-mark-tag {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--linen-soft);
  padding-left: 14px;
  border-left: 1px solid var(--line2);
  display: none;
  white-space: nowrap;
}
@media (min-width: 1180px) {
  .nav-mark-tag { display: inline-block; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
}
.nav-link {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--linen-soft);
  transition: color var(--t-fast);
  position: relative;
  padding-bottom: 4px;
}
.nav-link:hover { color: var(--crimson-bright); }
.nav-link.active { color: #fff; font-weight: 800; font-size: 12px; }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--crimson-bright);
}

.nav-cta {
  display: none;
  align-items: center;
  gap: 16px;
}
@media (min-width: 1024px) {
  .nav-cta { display: flex; }
}
.nav-phone {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--linen-mute);
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--crimson-bright); }
.nav-btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #fff;
  background: var(--crimson);
  padding: 11px 22px;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-btn:hover {
  background: var(--crimson-deep);
  box-shadow: 0 0 24px var(--crimson-glow);
}

.nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--linen);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.nav-burger:hover { background: rgba(237, 231, 218, 0.06); }
@media (min-width: 1024px) {
  .nav-burger { display: none; }
}

/* MOBILE MENU */
.nav-mobile {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line2);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  z-index: 79;
}
.nav-mobile.open { max-height: 600px; }
.nav-mobile-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile a {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--linen-mute);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast);
}
.nav-mobile a:hover { color: var(--linen); }
.nav-mobile a.cta {
  background: var(--crimson);
  color: #fff;
  text-align: center;
  border-radius: var(--r-sm);
  border: none;
  margin-top: 12px;
  padding: 16px;
}
.nav-mobile a.cta:hover {
  background: var(--crimson-deep);
  color: #fff;
}

/* nav spacer — prevent content jumping under fixed nav */
.nav-spacer {
  height: var(--nav-h);
}

/* ─── FOOTER (4-column · dark deep · brand-marked) ───────────────────────── */
footer {
  padding: 72px 24px 32px;
  border-top: 1px solid var(--line2);
  position: relative;
  z-index: 5;
  background: var(--bg-deep);
}
@media (min-width: 768px) {
  footer { padding: 72px 56px 32px; }
}
@media (min-width: 1100px) {
  footer { padding: 80px 96px 32px; }
}

.footer-w {
  max-width: var(--content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 780px) {
  .footer-w {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
  }
}

.footer-mark {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--linen);
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}
.footer-tag {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--crimson-bright);
  margin-bottom: 16px;
}
.footer-desc {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--linen-mute);
  line-height: 1.7;
  font-weight: 500;
  max-width: 280px;
  margin-bottom: 18px;
}
.footer-locs {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--linen-soft);
  margin-bottom: 18px;
}

.footer-soc {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.footer-soc a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--linen-mute);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  transition: all var(--t-fast);
}
.footer-soc a:hover {
  border-color: var(--crimson);
  color: var(--crimson-bright);
  background: var(--crimson-soft);
}

.footer-col h4 {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--linen-soft);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-family: var(--font);
  font-size: 13px;
  color: var(--linen-mute);
  margin-bottom: 10px;
  font-weight: 500;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--linen); }

.footer-bot {
  max-width: var(--content-w);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--linen-soft);
}
.footer-bot a { color: var(--crimson-bright); font-weight: 700; }

/* ── NAV BRAND LOGO (replaces the text wordmark) ──────────────────────────── */
.nav-mark-logo { height: 36px; width: auto; display: block; }
@media (min-width: 768px) { .nav-mark-logo { height: 42px; } }

/* ── TUBELIGHT NAV — glowing pill that slides to the hovered/active tab ────── */
.nav-links { position: relative; }
.nav-tube {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 30px; left: 0; width: 0; border-radius: var(--r-pill);
  background: rgba(196, 18, 48, 0.09);
  pointer-events: none; opacity: 0; z-index: 0;
  transition: left .42s var(--ease-spring), width .42s var(--ease-spring), opacity .3s var(--ease);
}
.nav-tube.on { opacity: 1; }
.nav-tube::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 42%; height: 3px; border-radius: 0 0 8px 8px;
  background: var(--crimson-bright); box-shadow: 0 0 14px 2px var(--crimson-glow);
}
.nav-tube::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64%; height: 22px;
  background: radial-gradient(ellipse at top, var(--crimson-glow) 0%, transparent 72%);
  filter: blur(3px); pointer-events: none;
}
.nav-link { z-index: 1; }
.nav-link.active::after { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-tube { transition: opacity .2s; } }

/* ── TUBELIGHT — punchier (brighter bar + bigger halo) ────────────────────── */
.nav-tube { background: rgba(196, 18, 48, 0.14); }
.nav-tube::before { width: 52%; height: 4px; box-shadow: 0 0 22px 5px var(--crimson-glow), 0 0 7px 1px var(--crimson-bright); }
.nav-tube::after { width: 80%; height: 34px; filter: blur(2px); background: radial-gradient(ellipse at top, rgba(230,57,80,0.6) 0%, var(--crimson-glow) 38%, transparent 76%); }

/* ── GLOW + PARTICLE BOOK-A-CALL — the main CTA ───────────────────────────── */
.nav-btn { position: relative; z-index: 0; overflow: hidden; font-weight: 800; font-size: 11.5px; padding: 12px 24px; color: #fff; background: var(--crimson); border: 1px solid var(--crimson-deep); box-shadow: 0 2px 14px rgba(196, 18, 48, 0.32), 0 0 26px rgba(196, 18, 48, 0.18); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), border-color var(--t-fast); }
.nav-btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: -120%; width: 55%; z-index: 1; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.30) 50%, transparent 80%); transform: skewX(-18deg); animation: navShine 9s ease-in-out infinite; pointer-events: none; }
@keyframes navShine { 0% { left: -120%; } 24%, 100% { left: 170%; } }
.nav-btn:hover { transform: translateY(-1px); border-color: var(--crimson-bright); box-shadow: 0 0 0 1px var(--crimson-deep), 0 4px 20px rgba(196, 18, 48, 0.45), 0 0 34px var(--crimson-soft); }
.nav-particle { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--crimson-bright); box-shadow: 0 0 7px var(--crimson-glow); pointer-events: none; z-index: 5; animation: navParticle .8s ease-out forwards; }
@keyframes navParticle { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(.2); } }
@media (prefers-reduced-motion: reduce) { .nav-btn::before { animation: none; } .nav-particle { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HARDENING · responsive QA sweep (≤600px)
   Loaded last on every page, so these win the cascade site-wide.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Long CTA labels must never clip. html/body use overflow-x:clip, so an
     over-wide nowrap button is silently cut off instead of scrolled. */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  /* Stack hero CTAs full-width so long labels read cleanly instead of bleeding. */
  .subhero-ctas { flex-direction: column; align-items: stretch; }
  .subhero-ctas .btn { width: 100%; justify-content: center; }
  /* Hairline dividers: drop the flanking rules (they collapse to ~0 at 375)
     and center + wrap the meta label so it reads as a clean caption. */
  .hairline { justify-content: center; text-align: center; flex-wrap: wrap; row-gap: 4px; }
  .hairline::before, .hairline::after { display: none; }
  /* Eyebrows wrap instead of shoving their crimson rule off-screen. */
  .eyebrow { flex-wrap: wrap; }
  .eyebrow.center::before, .eyebrow.center::after { display: none; }
  /* Footer links: ~38px comfortable tap targets (were ~21px). */
  .footer-col a { padding: 9px 0; margin-bottom: 2px; }
  /* Cards: lighter padding on phones (48px left only ~231px of a 327px card). */
  .card { padding: var(--s-5); }
  /* ROI figure never spills past its bordered card. */
  .roi-output-num { font-size: clamp(30px, 7vw, 72px); }
  /* ASCII terminals scroll inside their box instead of clipping the rules. */
  .terminal-body { overflow-x: auto; font-size: 11px; }
  /* Multi-step form nav wraps instead of squeezing the submit button. */
  .ssf-steps-nav { flex-wrap: wrap; }
  /* Phones: snappier reveals — 1s fades + long staggers read as a slow site. */
  .rv { transition-duration: 0.45s; transform: translateY(22px); }
  .rv-d1 { transition-delay: 0.05s; }
  .rv-d2 { transition-delay: 0.10s; }
  .rv-d3 { transition-delay: 0.15s; }
  .rv-d4 { transition-delay: 0.20s; }
  .rv-d5 { transition-delay: 0.25s; }
  .rv-d6 { transition-delay: 0.30s; }
}

/* Footer service areas — local-SEO signal + NAP consistency with Google Business Profile. */
.footer-areas { font-family: var(--font); font-size: 12.5px; line-height: 1.6; color: var(--linen-mute); margin: 0 0 12px; }
.footer-areas strong { color: var(--linen); font-weight: 600; }

/* ═══ pages/home.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · HOMEPAGE
   Section 01 Hero · 02 Pain · 03 Sacred Stack · 04 Demos · 05 Meta Proof
   06 Manifesto · 07 How · 08 Sacred Standard · 09 FAQ · 10 Final CTA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 01 HERO ──────────────────────────────────────────────────────────────── */
.hero {
  padding: 140px 24px 96px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media (min-width: 768px) {
  .hero { padding: 160px 56px 120px; }
}
@media (min-width: 1100px) {
  .hero { padding: 200px 96px 140px; }
}

.hero-w {
  max-width: var(--content-w);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 5;
}

.hero-wordmark {
  display: block;
  height: 52px;
  width: auto;
  margin-bottom: 40px;
  filter: drop-shadow(0 0 22px rgba(196, 18, 48, 0.20));
  opacity: 0.92;
}
/* hero atmosphere — crimson as a whisper, not a floodlight */
.hero .scene-glow { opacity: 0.13; filter: blur(160px); }
@media (min-width: 768px) {
  .hero-wordmark { height: 64px; }
}
@media (min-width: 1100px) {
  .hero-wordmark { height: 72px; }
}

.hero-eyebrow {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--linen-soft);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}
.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--crimson);
}
.hero-eyebrow b {
  color: var(--crimson-bright);
  font-weight: 600;
}

.hero-headline {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 500;
  font-size: clamp(44px, 6.6vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--linen);
  max-width: 16ch;
  margin-bottom: 34px;
}
.hero-headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--crimson-coral);
}

.hero-lede {
  font-family: var(--font);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.72;
  color: var(--linen-mute);
  max-width: 52ch;
  margin-bottom: 36px;
}
.hero-lede strong { color: var(--linen); font-weight: 600; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: var(--s-7);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--linen-soft);
  letter-spacing: 0.04em;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: 620px;
}
.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-meta-item + .hero-meta-item::before {
  content: '·';
  margin-right: 18px;
  color: var(--linen-soft);
  opacity: 0.45;
}
.hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
  animation: pulse 2.4s infinite;
}
.hero-meta b { color: var(--linen-mute); font-weight: 600; }
.hero-meta-sep { display: none; }

/* ─── 02 PAIN PATTERN GRID ─────────────────────────────────────────────────── */
.pain-intro {
  max-width: 65ch;
  margin: 0 0 var(--s-7);
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .pain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .pain-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pain-card {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all var(--t) var(--ease);
  position: relative;
}
.pain-card:hover {
  border-color: var(--crimson);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.pain-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--crimson-coral);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pain-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line2);
}

.pain-quote {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--linen);
}
.pain-quote em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
}

.pain-detail {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--linen-mute);
  font-weight: 500;
}

.pain-build {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: auto;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.65;
  color: var(--linen-mute);
}
.pain-build-label {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--crimson-coral);
  margin-bottom: 6px;
}

.pain-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--linen);
  padding-top: 12px;
  transition: color var(--t-fast);
}
.pain-cta::after {
  content: '→';
  transition: transform var(--t-fast);
}
.pain-cta:hover {
  color: var(--crimson-bright);
}
.pain-cta:hover::after {
  transform: translateX(4px);
}

/* WIDE WIDE WIDE — Plus everything else */
.pain-wide {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--crimson);
  border-radius: var(--r);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}
.pain-wide::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--crimson-soft) 0%, transparent 70%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .pain-wide {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 48px 40px;
  }
}
.pain-wide-star {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--crimson-coral);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pain-wide-quote {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--linen);
  margin-bottom: 12px;
}
.pain-wide-quote em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
}
.pain-wide-body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--linen-mute);
  font-weight: 500;
}
.pain-wide-body strong { color: var(--linen); font-weight: 700; }
.pain-wide-cta {
  position: relative;
  z-index: 2;
}

/* ─── 03 SACRED STACK / IRIS ───────────────────────────────────────────────── */
.stack-intro {
  max-width: 65ch;
  margin: 0 auto var(--s-6);
  text-align: center;
}
.stack-frame {
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0 var(--s-2);
}
.stack-footnote {
  text-align: center;
  max-width: 58ch;
  margin: var(--s-5) auto 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--linen-mute);
  line-height: 1.65;
}
.stack-footnote a {
  color: var(--crimson-bright);
  font-weight: 700;
  border-bottom: 1px solid var(--crimson);
  transition: all var(--t-fast);
}
.stack-footnote a:hover {
  color: var(--linen);
  border-color: var(--linen);
}

/* ─── 04 LIVE DEMOS ────────────────────────────────────────────────────────── */
.demo-intro {
  max-width: 65ch;
  margin: 0 0 var(--s-7);
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 880px) {
  .demo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.demo-card {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all var(--t) var(--ease);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.demo-card:hover {
  border-color: var(--crimson);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.demo-card:hover .demo-arrow {
  transform: translateX(4px);
  color: var(--crimson-bright);
}

.demo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--linen-soft);
}
.demo-head b { color: var(--crimson-coral); font-weight: 700; }

.demo-pre {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--linen-soft);
  text-transform: uppercase;
}

.demo-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--linen);
}
.demo-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
}

.demo-sub {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--linen-mute);
  font-weight: 500;
}
.demo-sub strong { color: var(--linen); font-weight: 700; }

.demo-foot {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.demo-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--linen-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.demo-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
  animation: pulse 2s infinite;
}
.demo-arrow {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--linen);
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── 05 META PROOF ────────────────────────────────────────────────────────── */
.proof-intro {
  max-width: 65ch;
  margin: 0 0 var(--s-7);
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.proof-card {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all var(--t) var(--ease);
  position: relative;
}
.proof-card:hover {
  border-color: var(--crimson);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.proof-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.proof-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--linen-soft);
}
.proof-num b { color: var(--crimson-coral); font-weight: 700; }
.proof-stat {
  font-family: var(--font);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  color: var(--crimson-coral);
  line-height: 1;
}

.proof-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--linen);
}
.proof-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
}

.proof-sub {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--linen-soft);
  text-transform: uppercase;
}

.proof-body {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--linen-mute);
  font-weight: 500;
}

.proof-close {
  margin-top: var(--s-7);
  text-align: center;
  font-family: var(--font);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  color: var(--linen);
  font-weight: 500;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.proof-close em {
  font-style: italic;
  color: var(--crimson-coral);
  font-weight: 700;
}

/* ─── 06 MANIFESTO ─────────────────────────────────────────────────────────── */
.manifesto {
  position: relative;
  text-align: center;
  padding: var(--s-9) 0;
  overflow: hidden;
}
.manifesto-marks {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(180px, 28vw, 360px);
  line-height: 0.8;
  color: var(--crimson-coral);
  opacity: 0.07;
  pointer-events: none;
  font-weight: 700;
  user-select: none;
}

.manifesto-body {
  position: relative;
  max-width: 56ch;
  margin: 0 auto;
  font-family: var(--font);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--linen-mute);
  letter-spacing: -0.005em;
}
.manifesto-body strong {
  color: var(--linen);
  font-weight: 700;
}

.manifesto-quote {
  position: relative;
  max-width: 26ch;
  margin: var(--s-7) auto 0;
  font-family: var(--font);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--linen);
  letter-spacing: -0.02em;
}
.manifesto-quote em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
  display: block;
}
.manifesto-attr {
  margin-top: var(--s-5);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--linen-soft);
}

/* ─── 07 HOW-IT-WORKS (3 STEPS) ───────────────────────────────────────────── */
.how-intro {
  max-width: 65ch;
  margin: 0 0 var(--s-7);
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}
@media (min-width: 880px) {
  .how-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Connecting line between steps */
  .how-grid::before {
    content: '';
    position: absolute;
    top: 90px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--crimson-soft) 20%, var(--crimson-soft) 80%, transparent 100%);
    z-index: 0;
  }
}

.how-card {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.how-num {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--crimson-coral);
  display: flex;
  align-items: center;
  gap: 12px;
}
.how-num-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  color: var(--crimson-bright);
  box-shadow: 0 0 0 4px var(--bg-card), 0 0 16px var(--crimson-soft);
  flex-shrink: 0;
}

.how-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--linen);
}

.how-meta {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--linen-soft);
  text-transform: uppercase;
}

.how-body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--linen-mute);
  font-weight: 500;
}

.how-callout {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: auto;
  font-family: var(--font);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--crimson-coral);
  font-weight: 600;
}

.how-close {
  margin-top: var(--s-7);
  text-align: center;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--linen-mute);
}
.how-close strong { color: var(--linen); font-weight: 700; }
.how-close a {
  color: var(--crimson-bright);
  font-weight: 700;
  border-bottom: 1px solid var(--crimson);
  transition: all var(--t-fast);
  margin-left: 6px;
}
.how-close a:hover { color: var(--linen); border-color: var(--linen); }

/* ─── 08 SACRED STANDARD ───────────────────────────────────────────────────── */
.std-intro {
  max-width: 65ch;
  margin: 0 0 var(--s-7);
}

.std-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .std-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .std-grid { grid-template-columns: repeat(4, 1fr); }
}

.std-cell {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all var(--t) var(--ease);
}
.std-cell:hover {
  border-color: var(--crimson);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.std-num {
  font-family: var(--font);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--crimson-coral);
  font-feature-settings: 'tnum';
}

.std-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--linen);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.std-body {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--linen-mute);
  font-weight: 500;
}

/* ─── 09 FAQ ───────────────────────────────────────────────────────────────── */
.faq-intro {
  max-width: 65ch;
  margin: 0 0 var(--s-7);
}

.faq-list {
  border-top: 1px solid var(--line2);
  max-width: 920px;
}

.faq-item {
  border-bottom: 1px solid var(--line2);
  padding: 22px 0;
  cursor: pointer;
  outline: none;
  transition: padding var(--t) var(--ease);
}
.faq-item:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--linen);
  transition: color var(--t-fast);
}
.faq-item:hover .faq-q { color: var(--crimson-bright); }
.faq-q em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
}

.faq-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 16px;
  color: var(--linen-soft);
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.faq-item.open .faq-toggle {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding-top 0.3s var(--ease);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--linen-mute);
  max-width: 70ch;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-top: 16px;
}

/* ─── 10 FINAL CTA + FORM ──────────────────────────────────────────────────── */
.final-intro {
  max-width: 65ch;
  margin: 0 auto var(--s-7);
  text-align: center;
}
.final-intro .lede {
  margin: 0 auto;
}

.final-wrap {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.final-wrap::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  background: radial-gradient(circle at center, var(--crimson-soft) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(80px);
  z-index: -1;
}

.final-card-head {
  text-align: center;
  margin-bottom: var(--s-6);
}
.final-card-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--linen);
  margin-bottom: var(--s-3);
}
.final-card-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--crimson-coral);
}
.final-card-sub {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--linen-mute);
  max-width: 56ch;
  margin: 0 auto;
}

.final-foot {
  margin-top: var(--s-5);
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--linen-soft);
}

/* ─── DECORATIVE STAR FLOURISH (used in eyebrows) ──────────────────────────── */
.star {
  color: var(--crimson-coral);
  font-weight: 700;
  display: inline-block;
}

/* ── Editorial elevation: pull-quotes → Fraunces serif ── */
.pain-quote, .pain-wide-quote, .manifesto-quote, .proof-close {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pain-quote em, .pain-wide-quote em, .manifesto-quote em, .proof-close em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Homepage service showcase (replaced the iris widget) */
.stack-cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .stack-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .stack-cards { grid-template-columns: repeat(3,1fr); } }
.stack-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--s-6); text-decoration: none; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.stack-card:hover { border-color: var(--crimson); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.stack-card-num { font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--crimson-coral); margin-bottom: 12px; }
.stack-card .h-card { margin-bottom: 10px; }
.stack-card-desc { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--linen-mute); margin-bottom: var(--s-5); }
.stack-card-go { margin-top: auto; font-family: var(--font); font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--linen-soft); transition: color var(--t) var(--ease); }
.stack-card:hover .stack-card-go { color: var(--crimson-coral); }

/* hero wordmark as text — tagline-free, UnifrakturCook (replaces sacred-wordmark.png) */
.hero-wordmark-text { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1; color: var(--linen); margin-bottom: 40px; letter-spacing: .5px; text-shadow: 0 0 24px rgba(196, 18, 48, 0.22); }
@media (min-width: 1100px) { .hero-wordmark-text { margin-bottom: 48px; } }

/* ── STAT STRIP — animated count-up proof bar ─────────────────────────────── */
.stat-strip-sec { padding: var(--s-6) 24px 0; }
@media (min-width:768px){ .stat-strip-sec { padding: var(--s-7) 56px 0; } }
@media (min-width:1100px){ .stat-strip-sec { padding: var(--s-7) 96px 0; } }
.stat-strip { max-width: var(--content-w); margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width:760px){ .stat-strip { grid-template-columns: repeat(4,1fr); } }
.stat-item { background: var(--bg-card); padding: 30px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; transition: background var(--t) var(--ease); }
.stat-item:hover { background: var(--bg-elev); }
.stat-num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 50px); line-height: 1; color: var(--crimson-coral); font-variant-numeric: tabular-nums; }
.stat-lbl { font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: 1px; color: var(--linen-soft); text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════════════════════
   HERO REDESIGN — split layout · Montserrat-caps headline · service gallery
   ════════════════════════════════════════════════════════════════════════════ */
.hero-split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .hero-split { grid-template-columns: 1.05fr 0.92fr; gap: 56px; } }
.hero-copy { min-width: 0; }

/* Montserrat bold, all-caps headline (overrides the Fraunces serif default) */
.hero-headline { font-family: var(--font); font-weight: 800; font-variation-settings: normal; font-optical-sizing: auto; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.05; font-size: clamp(33px, 4.7vw, 62px); color: var(--linen); max-width: 15ch; margin-bottom: 28px; }
.hero-headline em { font-style: normal; font-weight: 800; color: var(--crimson-coral); }

/* SERVICE GALLERY — branded auto-scroll marquee, whole thing links to /services */
.hero-gallery { position: relative; display: block; height: 460px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line2); background: linear-gradient(160deg, rgba(20,21,26,0.55), rgba(5,8,20,0.35)); text-decoration: none; cursor: pointer; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent); }
.hero-gallery-track { display: flex; flex-direction: column; gap: 14px; padding: 14px; animation: hgScrollY 26s linear infinite; will-change: transform; }
@keyframes hgScrollY { to { transform: translateY(-50%); } }
.hero-gallery:hover .hero-gallery-track { animation-play-state: paused; }
.hg-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--bg-card); border: 1px solid var(--crimson-soft); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 18px rgba(196,18,48,0.13); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.hero-gallery:hover .hg-card { border-color: var(--crimson); box-shadow: 0 10px 34px rgba(0,0,0,0.45), 0 0 26px rgba(196,18,48,0.28); }
.hg-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--crimson), var(--crimson-deep)); color: #fff; box-shadow: 0 4px 14px var(--crimson-glow); }
.hg-ic svg { width: 20px; height: 20px; display: block; }
.hg-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hg-name { font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--linen); letter-spacing: -0.01em; }
.hg-sub { font-family: var(--font); font-size: 12.5px; color: var(--linen-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-overlay-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; padding: 16px; font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--crimson-coral); background: linear-gradient(to top, var(--bg) 35%, transparent); pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease); }
.hero-gallery:hover .hg-overlay-cta { opacity: 1; }

@media (max-width: 999px) {
  .hero-gallery { height: 124px; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
  .hero-gallery-track { flex-direction: row; animation-name: hgScrollX; }
  .hg-card { width: 270px; flex: none; }
  .hg-overlay-cta { display: none; }
}
@keyframes hgScrollX { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-gallery-track { animation: none; } }

/* ── HERO HEADLINE — heavier (900 black) + bigger, authoritative ──────────── */
.hero-headline { font-weight: 900; font-size: clamp(34px, 5vw, 72px); line-height: 0.96; letter-spacing: -0.02em; max-width: none; }
.hero-headline em { font-weight: 900; }

/* ── HERO GALLERY v2 — floating poster carousel ───────────────────────────── */
.hero-gallery { height: 484px; perspective: 1100px; -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); }
.hero-gallery-track { flex-direction: row; gap: 22px; padding: 34px 18px; align-items: center; transform-style: preserve-3d; animation: hgScrollX2 32s linear infinite; }
@keyframes hgScrollX2 { to { transform: translateX(-50%); } }
.hero-gallery:hover .hero-gallery-track { animation-play-state: paused; }
.hg-card { flex-direction: column; align-items: stretch; gap: 0; width: 206px; height: 330px; flex: none; padding: 0; overflow: hidden; border: 1px solid var(--crimson); background: var(--bg-card); border-radius: var(--r-lg); box-shadow: 0 26px 52px rgba(0,0,0,0.55), 0 0 28px rgba(196,18,48,0.22); transform: rotateY(-11deg); transition: transform .45s var(--ease), border-color var(--t), box-shadow var(--t); }
.hg-card:hover { animation: hgFloatHover 2.6s ease-in-out infinite; z-index: 3; }
@keyframes hgFloatHover { 0%,100% { transform: rotateY(0deg) scale(1.06) translateY(0); } 50% { transform: rotateY(0deg) scale(1.06) translateY(-12px); } }
.hero-gallery:hover .hg-card { border-color: var(--crimson-bright); box-shadow: 0 26px 56px rgba(0,0,0,0.6), 0 0 38px rgba(196,18,48,0.35); }
.hg-visual { position: relative; height: 62%; display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 0%, rgba(196,18,48,0.34), rgba(20,21,26,0.15) 62%), linear-gradient(160deg, var(--crimson-deep), #0c0a0e); border-bottom: 1px solid var(--crimson-soft); }
.hg-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(230,57,80,0.28), transparent 58%); }
.hg-ic { width: 66px; height: 66px; border-radius: 16px; background: linear-gradient(135deg, var(--crimson-bright), var(--crimson-deep)); box-shadow: 0 10px 26px var(--crimson-glow); position: relative; z-index: 1; }
.hg-ic svg { width: 30px; height: 30px; }
.hg-meta { padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; justify-content: center; }
.hg-name { font-size: 16px; line-height: 1.2; }
.hg-sub { font-size: 12.5px; white-space: normal; }
@media (max-width: 999px) { .hero-gallery { height: 360px; perspective: 800px; } .hg-card { width: 188px; height: 300px; } }
@media (prefers-reduced-motion: reduce) { .hg-card, .hg-card:hover { animation: none; transform: rotateY(-8deg); } }

@media (min-width: 1000px) { .hero-gallery { margin-top: -28px; } }

/* ── HERO GALLERY v3 — 3D circular (cylinder) carousel, infinite loop ──────── */
.hero-gallery { height: 440px; perspective: 1300px; overflow: visible; display: grid; place-items: center; border: 0; background: none; -webkit-mask-image: none; mask-image: none; }
.hero-gallery-track { width: 180px; height: 268px; padding: 0; gap: 0; position: relative; display: block; transform-style: preserve-3d; animation: hgSpin 40s linear infinite; }
@keyframes hgSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.hero-gallery:hover .hero-gallery-track { animation-play-state: paused; }
.hg-card { position: absolute; top: 0; left: 0; width: 180px; height: 268px; flex: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: var(--cardT, none); animation: none; transition: filter .3s var(--ease); }
.hg-card:hover { transform: var(--cardT, none) translateZ(46px) scale(1.05); filter: brightness(1.12); z-index: 9; }
@media (min-width: 1000px) { .hero-gallery { margin-top: 0; } }
@media (max-width: 999px) { .hero-gallery { height: 380px; perspective: 1000px; } .hg-card { width: 158px; height: 236px; } }
@media (prefers-reduced-motion: reduce) { .hero-gallery-track { animation: none; } }

/* ── CTA POP-UP MODAL — discovery form ────────────────────────────────────── */
.cta-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.cta-modal.open { display: flex; }
.cta-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,20,0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ctaFade .25s ease; }
.cta-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 50px rgba(196,18,48,0.18); padding: 24px; animation: ctaPop .3s var(--ease-spring); }
.cta-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--bg-elev); border: 1px solid var(--line2); color: var(--linen); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: all var(--t-fast); }
.cta-modal-close:hover { border-color: var(--crimson); color: var(--crimson-bright); }
.cta-modal-body .ssf-wrap { margin: 0; }
@keyframes ctaFade { from { opacity: 0; } }
@keyframes ctaPop { from { opacity: 0; transform: scale(.96) translateY(12px); } }
body.modal-open { overflow: hidden; }

/* ── HERO GALLERY v4 — JS ring: larger cards · depth-fade abyss · hover focus ── */
.hero-gallery { height: 560px; padding: 0 0 50px; box-sizing: border-box; perspective: 1400px; overflow: visible; position: relative; display: grid; place-items: center; border: 0; background: none; -webkit-mask-image: none; mask-image: none; }
.hero-gallery, .hero-gallery:focus, .hero-gallery:focus-visible { outline: none; }
.hero-gallery-track { width: 220px; height: 320px; position: relative; transform-style: preserve-3d; animation: none; margin: 0 auto; }
.hg-card { position: absolute; top: 0; left: 0; width: 220px; height: 320px; flex: none; backface-visibility: visible; -webkit-backface-visibility: visible; transition: none; animation: none; }
.hg-overlay-cta { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; opacity: 1; display: block; pointer-events: none; margin: 0; background: none; padding: 0; color: var(--crimson-coral); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-align: center; }
@media (min-width: 1000px) { .hero-gallery { margin-top: 0; } }
@media (max-width: 999px) { .hero-gallery { height: 500px; padding-bottom: 44px; perspective: 1000px; } .hero-gallery-track { width: 192px; height: 280px; } .hg-card { width: 192px; height: 280px; } }

/* form modal — clear the close X + give the form top room */
.cta-modal-body { padding-top: 30px; }
.cta-modal-close { z-index: 6; }

/* (v5 coverflow removed — reverted to the v4 3D cylinder above. Crisp + hover fix pending.) */

/* ════════════════════════════════════════════════════════════════════════
   HERO CIRCULAR GALLERY v6 — TRUE 3D CYLINDER · 2x SUPERSAMPLED · setInterval
   .hero-gallery > .hg-stage(scale .5 + perspective, 2x) > .hero-gallery-track
   (rotateY, preserve-3d) > .hg-card …   .hg-overlay-cta is a sibling of .hg-stage.
   The whole 3D scene is authored at 2x and .hg-stage flattens it via scale(0.5)
   so the backing texture stays 2x-dense → sharp text at dpr=1 even when enlarged.
   ════════════════════════════════════════════════════════════════════════ */
.hero-gallery{ position:relative; display:grid; place-items:center; height:600px; padding:0 0 72px; box-sizing:border-box; overflow:visible; border:0; background:none; text-decoration:none; cursor:grab; -webkit-mask-image:none; mask-image:none; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.hero-gallery:active{ cursor:grabbing; }
.hero-gallery, .hero-gallery:focus, .hero-gallery:focus-visible{ outline:none; }
.hg-stage{ position:absolute; top:42%; left:50%; width:440px; height:640px; transform:translate(-50%,-50%) scale(0.5); transform-origin:50% 50%; perspective:2800px; -webkit-perspective:2800px; perspective-origin:50% 46%; will-change:transform; }
.hero-gallery-track{ position:relative; width:440px; height:640px; margin:0 auto; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; animation:none; will-change:transform; }
.hg-card{ position:absolute; top:0; left:0; width:440px; height:640px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; border:2px solid rgba(196,18,48,0.18); background:linear-gradient(180deg,#12131b 0%,#0c0d14 100%); box-shadow:0 48px 104px rgba(0,0,0,0.55), 0 0 56px rgba(196,18,48,0.18); backface-visibility:visible; -webkit-backface-visibility:visible; transform-origin:50% 50%; transform:translateZ(-9999px); transition:none; will-change:transform,opacity; }
.hg-card.is-active{ border-color:rgba(205,54,79,0.55); box-shadow:0 56px 120px rgba(196,18,48,0.30), 0 24px 70px rgba(0,0,0,0.62); }
.hg-visual{ position:relative; height:62%; display:grid; place-items:center; overflow:hidden; background:radial-gradient(120% 100% at 50% 0%, rgba(196,18,48,0.32), rgba(20,21,26,0.12) 60%), linear-gradient(160deg, rgba(196,18,48,0.20), #0c0a0e); border-bottom:2px solid rgba(196,18,48,0.16); border-radius:16px 16px 0 0; }
.hg-visual::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 42%, rgba(205,54,79,0.24), transparent 58%); }
.hg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:none; border:0; background:#0c0a0e; pointer-events:none; }
.hg-card.has-video .hg-video{ display:block; }
.hg-card.has-video .hg-ic{ display:none; }
.hg-ic{ position:relative; z-index:2; display:inline-grid; place-items:center; width:132px; height:132px; border-radius:28px; color:#fff; background:linear-gradient(135deg, #C41230 0%, #8a0d22 100%); box-shadow:0 20px 52px rgba(196,18,48,0.42), inset 0 2px 0 rgba(255,255,255,0.16); }
.hg-ic svg{ width:60px; height:60px; display:block; }
.hg-meta{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:32px 36px; }
.hg-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:32px; line-height:1.18; letter-spacing:-0.01em; color:#F3EFE7; }
.hg-sub{ font-family:'Montserrat',sans-serif; font-weight:500; font-size:25px; line-height:1.34; color:#9a9db0; }
.hg-overlay-cta{ position:absolute; left:0; right:0; bottom:16px; z-index:5; display:block; margin:0; padding:0; background:none; pointer-events:none; text-align:center; font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#CD364F; opacity:0.95; transition:opacity .3s ease, transform .3s ease; }
.hero-gallery:hover .hg-overlay-cta{ opacity:1; transform:translateY(-2px); }
@media (max-width:999px){ .hero-gallery{ height:500px; padding-bottom:56px; } .hg-stage{ transform:translate(-50%,-50%) scale(0.42); perspective:2200px; -webkit-perspective:2200px; } }
@media (max-width:560px){ .hero-gallery{ height:460px; } .hg-stage{ transform:translate(-50%,-50%) scale(0.38); } }
/* ── ≥1000px = JS MODE "flow" (coverflow). Below 1000px the JS runs MODE "ring" (the original
   3D cylinder) and inherits the base rules above — do not leak desktop values into the base.
   transform-style:flat gives every card its own flattened layer, so cards passing each other
   stack purely by z-index (JS sets it monotonically by |distance-from-centre|) and can never
   interpenetrate the way sibling planes do under preserve-3d. Perspective moves onto the
   track because the track is the 3D containing block once it is flat. ── */
@media (min-width:1000px){
  .hg-stage{ top:47%; transform:translate(-50%,-50%) scale(0.55); }
  .hero-gallery-track{ transform-style:flat; -webkit-transform-style:flat; perspective:3200px; -webkit-perspective:3200px; perspective-origin:50% 46%; -webkit-perspective-origin:50% 46%; }
}
@media (prefers-reduced-motion:reduce){ .hero-gallery-track{ animation:none; } .hg-card{ will-change:auto; } }

/* ════════════════════════════════════════════════════════════════════════
   HERO MEDIA — "Creation" cinemagraph backdrop (video on desktop, poster
   fallback everywhere) + SECTION 2 wrapper for the carousel moved out of hero.
   ════════════════════════════════════════════════════════════════════════ */
.hero { overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050814; }
.hero-media picture,
.hero-media img,
.hero-media-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 63% 50%;
}
.hero-media-video { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-media-video.is-playing { opacity: 1; }
.hero-media-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,11,16,0.94) 0%, rgba(10,11,16,0.78) 24%, rgba(10,11,16,0.34) 48%, rgba(10,11,16,0) 66%),
    linear-gradient(0deg, #0A0B10 0%, rgba(10,11,16,0.55) 15%, rgba(10,11,16,0) 40%),
    linear-gradient(180deg, rgba(10,11,16,0.60) 0%, rgba(10,11,16,0) 24%);
}
.hero .hero-w { position: relative; z-index: 5; }
.hero .hero-copy { max-width: 600px; }
@media (max-width: 999px) {
  .hero-media picture, .hero-media img, .hero-media-video { object-position: 66% 50%; }
  .hero-media-scrim {
    background:
      linear-gradient(0deg, #0A0B10 4%, rgba(10,11,16,0.66) 30%, rgba(10,11,16,0.30) 55%, rgba(10,11,16,0.55) 100%),
      linear-gradient(180deg, rgba(10,11,16,0.72) 0%, rgba(10,11,16,0.15) 32%);
  }
  .hero .hero-copy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-media-video { display: none; } }

/* SECTION 2 — Sacred Stack carousel (standalone, moved out of the hero) */
.stack-carousel { position: relative; padding: 14px 24px 52px; overflow-x: clip; }
@media (min-width: 768px) { .stack-carousel { padding: 22px 56px 66px; } }
/* Head sits above the ring with a clear gap + z-index safety, so a hovered/
   front-rotated card never collides with the headline. */
.stack-carousel-head { max-width: var(--content-w); margin: 0 auto 50px; text-align: center; position: relative; z-index: 5; }
/* Desktop coverflow is scaled up (.hg-stage scale .55) and pops on hover — it needs the
   extra headroom. Mobile keeps the original 50px so the ring doesn't float off. */
@media (min-width: 1000px) { .stack-carousel-head { margin-bottom: 88px; } }
.stack-carousel-head .sysdash-eyebrow { display: inline-flex; justify-content: center; }
.stack-carousel-head .sysdash-h { margin: 8px auto 0; }
/* Trim the ring container — the 3D ring only needs ~320px, so 600 was mostly air.
   Desktop gets 600px so the scaled-up cards + hover-pop are never clipped. */
.stack-carousel .hero-gallery { position: relative; z-index: 1; height: 470px; }
@media (max-width: 999px) { .stack-carousel .hero-gallery { height: 420px; } }
@media (min-width: 1000px) { .stack-carousel .hero-gallery { height: 600px; } }
.stack-carousel-cta { text-align: center; margin-top: 10px; position: relative; z-index: 5; }
/* Reads like the section sub (see .sysdash-sub), in warm white — not a bold red mini-title. */
.stack-cta-link { display: inline-block; font-family: var(--font); font-size: clamp(15px,1.2vw,16px); font-weight: 500; line-height: 1.72; letter-spacing: normal; text-transform: none; color: var(--linen); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s; }
.stack-cta-link:hover, .stack-cta-link:focus-visible { color: var(--crimson-coral); }

/* ░░ THE MACHINE — what Sacred builds (radial living-network section) ░░ */
.machine { padding: clamp(84px,11vw,168px) 24px; position: relative; }
.machine-w { max-width: var(--content-w); margin: 0 auto; }
.machine-head { max-width: 760px; margin: 0 auto; text-align: center; }
.machine-eyebrow { display: inline-block; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--crimson-coral); margin-bottom: 22px; }
.machine-h { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: clamp(34px,4.8vw,64px); line-height: 1.04; letter-spacing: -.018em; color: var(--linen); margin: 0 0 22px; }
.machine-h em { font-style: italic; font-weight: 500; color: var(--crimson-coral); }
.machine-sub { font-family: var(--font); font-size: clamp(15px,1.3vw,18px); font-weight: 400; line-height: 1.7; color: var(--linen-mute); max-width: 58ch; margin: 0 auto; }
.machine-viz { max-width: 720px; margin: clamp(24px,4.5vw,60px) auto 0; }
.machine-net { width: 100%; height: auto; display: block; overflow: visible; }
.m-lbl { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--linen-soft); letter-spacing: .01em; }
.m-dot { fill: #FF5E78; filter: drop-shadow(0 0 6px rgba(196,18,48,.85)); animation: mDot 3.4s ease-in-out infinite; }
.m-halo { animation: mHalo 4.2s ease-in-out infinite; }
.m-core { filter: drop-shadow(0 0 26px rgba(196,18,48,.5)); }
.m-core-t { font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: .16em; fill: #fff; }
@keyframes mDot { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes mHalo { 0%,100% { opacity: .4; } 50% { opacity: .7; } }
@media (max-width: 700px) { .machine-viz { max-width: 440px; } .m-lbl { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .m-dot, .m-halo { animation: none; } }

/* ░░ SECTION 2 — Not an agency. A system. (live system dashboard) ░░ */
.sysdash-sec { padding: clamp(20px,3vw,40px) 24px clamp(88px,11vw,168px); }
.sysdash-w { max-width: var(--content-w); margin: 0 auto; }
.sysdash-head { text-align: center; max-width: 920px; margin: 0 auto clamp(40px,5.5vw,72px); }
.sysdash-h { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: clamp(42px,6.4vw,92px); line-height: 1.0; letter-spacing: -.02em; color: var(--linen); margin: 0 0 24px; }
.sysdash-h em { font-style: italic; font-weight: 500; color: var(--crimson-coral); }
.sysdash-sub { font-family: var(--font); font-size: clamp(15px,1.3vw,18px); font-weight: 400; line-height: 1.72; color: var(--linen-mute); max-width: 62ch; margin: 0 auto; }
.sysdash { max-width: 1060px; margin: 0 auto; background: linear-gradient(180deg,#12131b 0%,#0c0d14 100%); border: 1px solid var(--line2); border-radius: 18px; padding: clamp(16px,2vw,24px); box-shadow: 0 44px 110px rgba(0,0,0,.55), 0 0 64px rgba(196,18,48,.08); }
.sd-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 2px 6px; }
.sd-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson-coral); }
.sd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF4E6B; box-shadow: 0 0 8px #FF4E6B; animation: sdPulse 1.8s ease-in-out infinite; }
.sd-bar-t { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--linen-soft); }
.sd-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.sd-card { background: rgba(255,255,255,.025); border: 1px solid var(--line2); border-radius: 12px; padding: 18px 20px; position: relative; outline: none; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.sd-card:hover, .sd-card:focus-visible { border-color: var(--crimson); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,.42), 0 0 24px rgba(196,18,48,.20); }
.sd-chart { grid-column: span 4; display: flex; flex-direction: column; }
.sd-gauge { grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.sd-stat { grid-column: span 2; display: flex; flex-direction: column; }
.sd-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sd-card-lbl { font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--linen-soft); text-transform: uppercase; }
.sd-card-val { font-family: var(--font); font-weight: 800; font-size: clamp(22px,2.3vw,28px); color: var(--linen); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sd-line-svg { width: 100%; height: 168px; display: block; overflow: visible; flex: 1; }
.sd-dot { filter: drop-shadow(0 0 7px #FF4E6B); }
.sd-dot-pulse { animation: sdDot .55s ease; }
.sd-gauge-ring { position: relative; width: 124px; height: 124px; display: grid; place-items: center; }
.sd-gauge-svg { width: 124px; height: 124px; }
.sd-gauge-arc { transition: stroke-dashoffset 1.4s cubic-bezier(.34,.7,.27,1); filter: drop-shadow(0 0 6px rgba(196,18,48,.55)); }
.sd-gauge-n { position: absolute; font-family: var(--font); font-weight: 800; font-size: 23px; color: var(--linen); font-variant-numeric: tabular-nums; }
.sd-gauge-n i { font-style: normal; font-size: 13px; color: var(--linen-mute); margin-left: 1px; }
.sd-stat .sd-card-val { font-size: clamp(28px,3.1vw,40px); margin-bottom: 5px; }
.sd-foot { margin-top: 12px; font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--linen-mute); opacity: .68; transition: opacity .3s, color .3s; }
.sd-chart .sd-foot { margin-top: 8px; }
.sd-card:hover .sd-foot, .sd-card:focus-visible .sd-foot { opacity: 1; color: var(--crimson-coral); }
@keyframes sdPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
@keyframes sdDot { 0% { r: 4.5; } 45% { r: 8.5; } 100% { r: 4.5; } }
@media (max-width: 760px) { .sd-chart, .sd-gauge, .sd-stat { grid-column: span 6; } .sysdash-h { font-size: clamp(38px,11vw,58px); } }
@media (prefers-reduced-motion: reduce) { .sd-live-dot { animation: none; } }

/* ── NEW HOMEPAGE FLOW — retire the old formulaic middle sections while the new flow
   is built section by section. Clean order: hero → machine → system → faq → final.
   (Hidden, not deleted — re-enable individually as each is rebuilt.) ── */
.stat-strip-sec,
#pain, #roi, #contrast, #flow, #demos, #manifesto, #how, #standard { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   BOLD AUTHORITY — Montserrat 800 ALL-CAPS section headlines (homepage only)
   Hero stays Fraunces (locked). Scoped to home.css so other pages are untouched.
   ════════════════════════════════════════════════════════════════════════ */
.machine-h, .sysdash-h, .h-section {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.96;
}
.machine-h em, .sysdash-h em, .h-section em {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  color: var(--crimson-coral);
}
/* size trims so heavy caps read as authority, not shouting */
.sysdash-h { font-size: clamp(38px, 5.6vw, 78px); letter-spacing: -0.018em; }
.machine-h { font-size: clamp(30px, 4.4vw, 56px); }
.h-section { font-size: clamp(30px, 4.2vw, 54px); }

/* ── tighten SECTION 2 directly under SECTION 1 ── */
.machine { padding-bottom: clamp(24px, 3.5vw, 52px); }
.sysdash-sec { padding-top: clamp(6px, 1.4vw, 20px); }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 2 v2 — LIVE SYSTEM DASHBOARD (real Sacred system modules, bento)
   ════════════════════════════════════════════════════════════════════════ */
.sysdash-eyebrow { display:inline-flex; align-items:center; gap:8px; font:700 11px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; color:var(--crimson-coral); margin-bottom:18px; }
.sysdash-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#FF4E6B; box-shadow:0 0 8px #FF4E6B; animation:sd2pulse 1.8s ease-in-out infinite; }

.sd2-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; max-width:1140px; margin:clamp(28px,4vw,52px) auto 0; }
.sd2-frontdesk { grid-column:span 6; }
.sd2-social    { grid-column:span 6; }
.sd2-local     { grid-column:span 4; }
.sd2-math      { grid-column:span 4; }
.sd2-reception { grid-column:span 4; }
.sd2-outbound  { grid-column:span 12; }

.sd2-mod { background:#14151A; border:1px solid rgba(237,231,218,.10); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:14px; position:relative; outline:none; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.sd2-mod:hover, .sd2-mod:focus-visible { border-color:rgba(196,18,48,.55); transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.42); }

.sd2-h { display:flex; align-items:center; gap:10px; }
.sd2-ey { font:700 11px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--linen-soft); }
.sd2-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font:700 9.5px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--crimson-coral); }
.sd2-dot { width:6px; height:6px; border-radius:50%; background:#FF4E6B; box-shadow:0 0 7px #FF4E6B; animation:sd2pulse 1.8s ease-in-out infinite; }
.sd2-tag { font:700 9px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--linen-soft); border:1px solid rgba(237,231,218,.16); border-radius:5px; padding:3px 7px; }
@keyframes sd2pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }

.sd2-kpi { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sd2-num { font:800 clamp(26px,3vw,38px)/1 var(--font); color:var(--linen); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sd2-num.lg { font-size:clamp(34px,4vw,50px); }
.sd2-kpi.sm .sd2-num, .sd2-num.sm { font-size:clamp(19px,2vw,25px); }
.sd2-num.up { color:#3FB979; }
.sd2-num-of { font-size:.46em; color:var(--linen-mute); font-weight:700; letter-spacing:0; }
.sd2-klbl { font:600 11px/1.2 var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--linen-soft); }
.sd2-ksub { font:500 11px/1.35 var(--font); color:var(--linen-mute); }

/* Front Desk */
.sd2-fd-body { display:grid; grid-template-columns:1.32fr 1fr; gap:18px; }
.sd2-fd-kpis { display:grid; grid-template-columns:1fr 1fr; gap:15px 14px; align-content:start; }
.sd2-kpi-hero { grid-column:1 / -1; }
.sd2-kpi-hero .sd2-num { font-size:clamp(38px,4.4vw,58px); }
.sd2-feed { background:rgba(5,8,20,.45); border:1px solid rgba(237,231,218,.07); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:9px; }
.sd2-feed-h { font:700 10px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--linen-soft); }
.sd2-feed-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sd2-feed-row { display:flex; align-items:center; gap:7px; font:600 11px/1.2 var(--font); color:var(--linen-mute); padding:7px 9px; background:rgba(237,231,218,.03); border-radius:6px; border-left:2px solid var(--crimson); animation:sd2rowin .45s ease; }
.sd2-feed-src { color:var(--linen); font-weight:700; white-space:nowrap; }
.sd2-feed-ind { opacity:.8; white-space:nowrap; }
.sd2-feed-pill { font:600 9.5px/1 var(--font); color:var(--linen-soft); white-space:nowrap; }
.sd2-feed-score { margin-left:auto; font:800 11px/1 var(--font); color:var(--crimson-coral); }
@keyframes sd2rowin { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* Social bars */
.sd2-soc-top { display:flex; gap:26px; }
.sd2-bars { display:flex; align-items:flex-end; gap:14px; }
.sd2-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; }
.sd2-bar-track { width:100%; height:120px; position:relative; }
.sd2-bar-fill { position:absolute; left:0; bottom:0; width:100%; height:0; background:linear-gradient(180deg,#CD364F,#C41230); border-radius:6px 6px 0 0; transition:height 1s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 16px rgba(196,18,48,.32); }
.sd2-in .sd2-bar-fill { height:var(--h); }
.sd2-bar:nth-child(2) .sd2-bar-fill { opacity:.84 }
.sd2-bar:nth-child(3) .sd2-bar-fill { opacity:.68 }
.sd2-bar:nth-child(4) .sd2-bar-fill { opacity:.54 }
.sd2-bar-v { font:800 13px/1 var(--font); color:var(--linen); font-variant-numeric:tabular-nums; }
.sd2-bar-lbl { font:600 10px/1 var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--linen-soft); }
.sd2-soc-bot { display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
.sd2-chip { font:600 11.5px/1.1 var(--font); color:var(--linen-mute); background:rgba(237,231,218,.04); border:1px solid rgba(237,231,218,.08); border-radius:6px; padding:7px 10px; }
.sd2-chip b { color:var(--linen); font-weight:800; }
.sd2-chip.sd2-up b { color:#3FB979; }

/* Local Visibility gauge */
.sd2-gauge-wrap { position:relative; width:130px; height:130px; margin:2px auto; display:grid; place-items:center; }
.sd2-gauge { width:130px; height:130px; }
.sd2-gauge-arc { stroke-dasharray:314.16; stroke-dashoffset:314.16; transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1); filter:drop-shadow(0 0 6px rgba(196,18,48,.5)); }
.sd2-in .sd2-gauge-arc { stroke-dashoffset:3; }
.sd2-gauge-c { position:absolute; display:flex; flex-direction:column; align-items:center; gap:1px; }
.sd2-stars { font-size:11px; letter-spacing:1.5px; color:#E8B23A; }
.sd2-gauge-n { font:800 30px/1 var(--font); color:var(--linen); }
.sd2-gauge-l { font:600 8.5px/1.2 var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--linen-soft); }
.sd2-local-stats { display:flex; gap:10px; }
.sd2-local-stats .sd2-kpi { align-items:center; text-align:center; flex:1; }
.sd2-local-stats .sd2-klbl { text-align:center; }

/* The Math */
.sd2-math-hero { display:flex; flex-direction:column; gap:3px; }
.sd2-math-big { font:900 clamp(34px,4.2vw,50px)/1 var(--font); color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(255,42,71,.5); }
.sd2-radar { width:150px; height:auto; margin:0 auto; display:block; overflow:visible; }
.sd2-radar-grid { fill:none; stroke:rgba(237,231,218,.10); stroke-width:1; }
.sd2-radar-grid2 { stroke:rgba(237,231,218,.055); }
.sd2-radar-poly { fill:rgba(196,18,48,.18); stroke:#C41230; stroke-width:1.5; transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform 1s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 0 8px rgba(196,18,48,.4)); }
.sd2-in .sd2-radar-poly { transform:scale(1); }
.sd2-math-row { display:flex; gap:8px; flex-wrap:wrap; }
.sd2-strike { font:600 12px/1 var(--font); color:var(--linen-mute); margin-top:auto; }
.sd2-strike s { color:var(--linen-soft); opacity:.6; }
.sd2-strike b { color:var(--linen); font-weight:800; }

/* AI Reception */
.sd2-rec-hero { display:flex; flex-direction:column; gap:3px; }
.sd2-spark { width:100%; height:46px; display:block; overflow:visible; }
.sd2-spark-l { filter:drop-shadow(0 0 5px rgba(205,54,79,.5)); }
.sd2-rec-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }

/* Outbound flow strip */
.sd2-flow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sd2-node { font:700 11px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--linen-soft); background:rgba(237,231,218,.04); border:1px solid rgba(237,231,218,.10); border-radius:7px; padding:9px 13px; transition:color .35s, background .35s, border-color .35s, box-shadow .35s; }
.sd2-node.active { color:#fff; background:rgba(196,18,48,.92); border-color:var(--crimson); box-shadow:0 0 16px rgba(196,18,48,.5); }
.sd2-arrow { color:var(--linen-soft); opacity:.4; font-size:13px; }
.sd2-out-stats { display:flex; gap:22px; flex-wrap:wrap; }
.sd2-out-stats .sd2-kpi { flex:1; min-width:118px; }

/* responsive */
@media (max-width:980px){
  .sd2-frontdesk, .sd2-social { grid-column:span 12; }
}
@media (max-width:680px){
  .sd2-mod { grid-column:span 12 !important; }
  .sd2-fd-body { grid-template-columns:1fr; }
  .sd2-soc-top { gap:18px; }
  .sd2-out-stats { gap:14px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .sd2-dot, .sysdash-eyebrow-dot { animation:none; }
  .sd2-bar-fill, .sd2-gauge-arc, .sd2-radar-poly, .sd2-spark-l { transition:none !important; }
  .sd2-feed-row { animation:none; }
}

/* ── MOBILE CAROUSEL PERF — cards render scaled-down on phones, so drop the 100px+ shadow
   blur (the heaviest per-frame GPU cost). Desktop look is untouched. ── */
@media (max-width:999px){
  .hg-card { box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 22px rgba(196,18,48,0.14); }
  .hg-card.is-active { box-shadow:0 22px 52px rgba(196,18,48,0.24), 0 12px 34px rgba(0,0,0,0.55); }
}

/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE FINAL PASS — hero explore link · tightened S1→S2 gap · Jarvis
   cockpit additions (status bar, growth report, top post, paid engine)
   ════════════════════════════════════════════════════════════════════════ */
/* hero: explore line lives ON the hairline under the CTAs */
.hero-explore { display:inline-flex; align-items:center; gap:8px; font:800 11px/1 var(--font); letter-spacing:1.8px; text-transform:uppercase; color:var(--crimson-coral); transition:color .2s; }
.hero-explore:hover { color:var(--crimson-bright); }
/* tighten hero → section 2 */
.hero { padding-bottom:32px; min-height:88vh; }
.sysdash-sec { padding-top:0; }
.sysdash-head { margin-bottom:clamp(28px,3.6vw,48px); }

/* ── cockpit status bar ── */
.sd2-status { grid-column:span 12; display:flex; align-items:center; gap:20px; padding:11px 18px; background:#101118; border:1px solid rgba(237,231,218,.09); border-radius:10px; position:relative; overflow:hidden; }
.sd2-os { font:800 12px/1 var(--font); letter-spacing:.24em; text-transform:uppercase; color:var(--linen); }
.sd2-status-item { display:inline-flex; align-items:center; gap:7px; font:600 10.5px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--linen-soft); white-space:nowrap; }
.sd2-dot.ok { background:#3FB979; box-shadow:0 0 7px #3FB979; }
.sd2-status-clock { margin-left:auto; font:700 12px/1 var(--font); letter-spacing:.14em; color:var(--linen-mute); font-variant-numeric:tabular-nums; }
.sd2-scan { position:absolute; top:0; bottom:0; left:-15%; width:90px; background:linear-gradient(90deg,transparent,rgba(196,18,48,.10),transparent); animation:sd2scan 5.5s linear infinite; pointer-events:none; }
@keyframes sd2scan { from { left:-15%; } to { left:110%; } }

/* ── new module spans ── */
.sd2-report  { grid-column:span 5; }
.sd2-toppost { grid-column:span 4; }
.sd2-ads     { grid-column:span 3; }

/* ── horizontal attribution bars (report + ads) ── */
.sd2-hbars { display:flex; flex-direction:column; gap:9px; }
.sd2-hbar { display:grid; grid-template-columns:52px 1fr 44px; align-items:center; gap:10px; }
.sd2-hbar-l { font:600 10.5px/1 var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--linen-soft); }
.sd2-hbar-t { height:8px; background:rgba(237,231,218,.06); border-radius:4px; position:relative; overflow:hidden; }
.sd2-hbar-f { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:4px; background:linear-gradient(90deg,#C41230,#CD364F); box-shadow:0 0 10px rgba(196,18,48,.35); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.sd2-hbar-f.dim { opacity:.45; }
.sd2-in .sd2-hbar-f { width:var(--w); }
.sd2-hbar-v { font:800 11.5px/1 var(--font); color:var(--linen); text-align:right; font-variant-numeric:tabular-nums; }
.sd2-up-t { color:#3FB979; font-weight:800; }
.sd2-report-foot { margin-top:auto; opacity:.75; }

/* ── top post ── */
.sd2-post-visual { position:relative; height:96px; border-radius:8px; display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%, rgba(196,18,48,.36), rgba(20,21,26,.2) 62%), linear-gradient(160deg,#1a0d12,#0c0a0e); border:1px solid rgba(237,231,218,.07); }
.sd2-post-play { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:rgba(196,18,48,.92); color:#fff; font-size:13px; padding-left:3px; box-shadow:0 0 18px rgba(196,18,48,.5); }
.sd2-post-chip { position:absolute; top:8px; left:8px; font:700 9.5px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--linen); background:rgba(5,8,20,.72); border:1px solid rgba(237,231,218,.12); border-radius:5px; padding:4px 7px; }
.sd2-post-chip-r { left:auto; right:8px; }
.sd2-post-cap { font:500 12.5px/1.5 var(--font); font-style:italic; color:var(--linen-mute); margin:0; }
.sd2-post-stats { display:flex; gap:18px; }

/* responsive for the new row */
@media (max-width:980px){
  .sd2-report { grid-column:span 12; }
  .sd2-toppost, .sd2-ads { grid-column:span 6; }
  .sd2-status { gap:12px; flex-wrap:wrap; }
  .sd2-status-clock { margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .sd2-scan { animation:none; }
  .sd2-hbar-f { transition:none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION 2 v3 — analytics snapshot (dashboard chrome + monthly pulse chart)
   ════════════════════════════════════════════════════════════════════════ */
/* chrome: quiet product tab bar — the "this is a real dashboard" frame */
.sd2-chrome { grid-column:span 12; display:flex; align-items:center; gap:18px; padding:10px 16px; background:#101118; border:1px solid rgba(237,231,218,.09); border-radius:10px; }
.sd2-chrome-t { font:800 12.5px/1 var(--font); letter-spacing:.06em; color:var(--linen); }
.sd2-tabs { display:flex; gap:4px; background:rgba(237,231,218,.04); border-radius:8px; padding:3px; overflow-x:auto; scrollbar-width:none; }
.sd2-tabs::-webkit-scrollbar { display:none; }
.sd2-tab { appearance:none; border:0; background:none; cursor:pointer; font:700 11px/1 var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--linen-soft); padding:7px 13px; border-radius:6px; white-space:nowrap; transition:color .2s, background .2s; }
.sd2-tab:hover { color:var(--linen); }
.sd2-tab.is-on { background:rgba(196,18,48,.85); color:#fff; box-shadow:0 2px 10px rgba(196,18,48,.35); }
.sd2-chrome-date { margin-left:auto; font:600 11px/1 var(--font); letter-spacing:.08em; color:var(--linen-mute); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* tab filter dim */
.sd2-mod { transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), opacity .4s var(--ease), filter .4s var(--ease); }
.sd2-mod.sd2-dim { opacity:.18; filter:saturate(.3); transform:scale(.985); pointer-events:none; }

/* monthly pulse — the big chart */
.sd2-pulse { grid-column:span 12; }
.sd2-pulse-kpis { display:flex; gap:clamp(20px,4vw,56px); flex-wrap:wrap; margin-bottom:6px; }
.sd2-pulse-svg { width:100%; height:clamp(120px,16vw,190px); display:block; overflow:visible; }
.sd2-pulse-line { filter:drop-shadow(0 0 6px rgba(226,59,85,.45)); }
.sd2-pulse-gridlines line { stroke:rgba(237,231,218,.055); stroke-width:1; }
.sd2-pulse-x { display:flex; justify-content:space-between; margin-top:8px; font:600 10px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--linen-soft); opacity:.7; }
@media (max-width:680px){
  .sd2-chrome { flex-wrap:wrap; gap:10px; }
  .sd2-chrome-date { margin-left:0; }
  .sd2-pulse-kpis { gap:16px 28px; }
}
@media (prefers-reduced-motion:reduce){ .sd2-pulse-line, .sd2-pulse-area { transition:none !important; } }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 2 v4 — CONTAINER-SCROLL PORTAL WINDOW (tilts flat as you scroll)
   ════════════════════════════════════════════════════════════════════════ */
.pscroll { max-width: 1100px; margin: 0 auto; }
.pscroll-stage { perspective: 1300px; perspective-origin: 50% 20%; }
.pscroll-frame {
  margin: 0;
  transform: rotateX(var(--prx, 22deg)) scale(var(--psc, .96));
  transform-origin: 50% 0%;
  will-change: transform;
  border-radius: 16px;
  border: 1px solid rgba(237,231,218,.12);
  background: #101118;
  box-shadow: 0 60px 130px rgba(0,0,0,.6), 0 0 70px rgba(196,18,48,.10);
  overflow: hidden;
}
.pscroll-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: #171821; border-bottom: 1px solid rgba(237,231,218,.08); }
.pscroll-dots { display: inline-flex; gap: 6px; }
.pscroll-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(237,231,218,.14); }
.pscroll-url { font: 600 12px/1 var(--font); letter-spacing: .04em; color: var(--linen-mute); background: rgba(237,231,218,.05); border: 1px solid rgba(237,231,218,.07); border-radius: 7px; padding: 7px 14px; }
.pscroll-open { margin-left: auto; font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--crimson-coral); white-space: nowrap; transition: color .2s; }
.pscroll-open:hover { color: var(--crimson-bright); }
.pscroll-view { position: relative; background:
  radial-gradient(120% 80% at 50% -10%, rgba(196,18,48,.10), transparent 58%), #0c0d13; }

/* caption + CTA under the frame (was the old overlay cover) */
.pscroll-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 28px; text-align: center; margin: clamp(22px,3vw,34px) auto 0; max-width: 760px; }
.pscroll-note-t { font: 500 clamp(15px,1.4vw,18px)/1.55 var(--font); color: var(--linen-mute); margin: 0; }

/* ────────────────────────────────────────────────────────────────────────
   PORTAL ILLUSTRATION (.pdash) — native HTML/CSS/SVG, no embed, no live data.
   All motion is CSS-only and gated on the shared reveal class (.pscroll.vis),
   so nothing animates until the section is scrolled into view. Every timed
   effect is finite — no infinite loops ticking off-screen.
   ──────────────────────────────────────────────────────────────────────── */
.pdash { display: grid; grid-template-columns: 176px minmax(0,1fr); font-family: var(--font);
  min-height: clamp(380px, 46vw, 540px); }

/* left rail */
.pdash-rail { display: flex; flex-direction: column; gap: 18px; padding: 18px 14px;
  background: #101118; border-right: 1px solid rgba(237,231,218,.07); min-width: 0; }
.pdash-brand { display: flex; align-items: center; gap: 8px; font: 800 13px/1 var(--font);
  letter-spacing: .16em; text-transform: uppercase; color: var(--linen); padding: 2px 6px 0; }
.pdash-brand-m { width: 9px; height: 9px; border-radius: 2px; background: var(--crimson);
  box-shadow: 0 0 10px rgba(196,18,48,.55); flex: none; }
.pdash-nav { display: flex; flex-direction: column; gap: 2px; }
.pdash-nav-i { display: flex; align-items: center; gap: 9px; min-width: 0;
  font: 600 12px/1 var(--font); color: var(--linen-soft); padding: 9px 10px; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash-nav-i svg { width: 14px; height: 14px; flex: none; opacity: .72; }
.pdash-nav-i.is-on { color: var(--linen); background: rgba(196,18,48,.14);
  box-shadow: inset 2px 0 0 var(--crimson); }
.pdash-nav-i.is-on svg { opacity: 1; color: var(--crimson-coral); }
.pdash-rail-foot { margin-top: auto; padding: 0 6px; }
.pdash-live { display: inline-flex; align-items: center; gap: 7px; font: 700 9.5px/1 var(--font);
  letter-spacing: .12em; text-transform: uppercase; color: var(--linen-soft); }
.pdash-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson-bright);
  box-shadow: 0 0 8px rgba(230,57,80,.8); flex: none; }

/* main column */
.pdash-main { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; min-width: 0; }
.pdash-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid rgba(237,231,218,.07); }
.pdash-top-l { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.pdash-top-ey { font: 700 9px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--crimson-coral); }
.pdash-top-h { font: 800 15px/1 var(--font); letter-spacing: -.01em; color: var(--linen); }
.pdash-pill { font: 600 9.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--linen-soft); background: rgba(237,231,218,.04); border: 1px solid rgba(237,231,218,.09);
  border-radius: 8px; padding: 6px 9px; white-space: nowrap; }
.pdash-pill-a { color: var(--crimson-coral); border-color: rgba(196,18,48,.35); background: rgba(196,18,48,.08); }

/* card grid */
.pdash-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 10px; flex: 1; }
.pdash-card { background: #14151A; border: 1px solid rgba(237,231,218,.09); border-radius: 10px;
  padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pdash-kpi   { grid-column: span 4; }
.pdash-chart { grid-column: span 8; }
.pdash-rank  { grid-column: span 4; }
.pdash-feed  { grid-column: span 12; }
.pdash-card-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pdash-card-t { font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--linen-soft); }
.pdash-card-s { margin-left: auto; font: 600 9.5px/1 var(--font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--linen-soft); opacity: .6; white-space: nowrap; }

/* stat tiles */
.pdash-klbl { font: 600 10.5px/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--linen-soft); }
.pdash-num { font: 800 clamp(24px,2.5vw,34px)/1 var(--font); letter-spacing: -.02em; color: var(--linen);
  font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(7px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pdash-kmeta { font: 500 10.5px/1.3 var(--font); color: var(--linen-soft); opacity: .8; margin-top: auto; }

/* chart */
.pdash-plot { display: flex; flex-direction: column; gap: 7px; flex: 1; justify-content: center; }
.pdash-svg { display: block; width: 100%; height: auto; }
.pdash-gl line { stroke: rgba(237,231,218,.055); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pdash-area { opacity: 0; transition: opacity .9s var(--ease) .35s; }
.pdash-line { stroke: var(--crimson-coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(196,18,48,.45));
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.25,.7,.25,1) .15s; }
.pdash-tip { fill: var(--crimson-bright); opacity: 0; transition: opacity .4s var(--ease) 1.5s; }
.pdash-x { display: flex; justify-content: space-between; font: 600 9.5px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: var(--linen-soft); opacity: .65; }

/* ranked list */
.pdash-rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; justify-content: center; flex: 1; }
.pdash-r { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pdash-r-l { font: 600 10.5px/1.2 var(--font); color: var(--linen-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash-bar { display: block; height: 5px; border-radius: 3px; background: rgba(237,231,218,.06); overflow: hidden; }
.pdash-bar i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--crimson-coral));
  transition: width 1s cubic-bezier(.2,.7,.2,1); }
.pdash-r:nth-child(2) .pdash-bar i { transition-delay: .08s; }
.pdash-r:nth-child(3) .pdash-bar i { transition-delay: .16s; }
.pdash-r:nth-child(4) .pdash-bar i { transition-delay: .24s; }
.pdash-r:nth-child(5) .pdash-bar i { transition-delay: .32s; }

/* activity feed */
.pdash-flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pdash-f { display: flex; align-items: center; gap: 9px; min-width: 0;
  font: 600 11px/1.2 var(--font); color: var(--linen-mute);
  background: rgba(237,231,218,.03); border-left: 2px solid rgba(196,18,48,.55);
  border-radius: 0 8px 8px 0; padding: 8px 10px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pdash-f-d { width: 5px; height: 5px; border-radius: 50%; background: var(--crimson-coral); flex: none; }
.pdash-f-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdash-f-m { margin-left: auto; font: 600 9.5px/1 var(--font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--linen-soft); opacity: .7; white-space: nowrap; }

/* ── reveal-gated motion (one-shot; the shared IO adds .vis on scroll-in) ── */
.pscroll.vis .pdash-num { opacity: 1; transform: none; }
.pscroll.vis .pdash-kpi:nth-child(2) .pdash-num { transition-delay: .1s; }
.pscroll.vis .pdash-kpi:nth-child(3) .pdash-num { transition-delay: .2s; }
.pscroll.vis .pdash-area { opacity: 1; }
.pscroll.vis .pdash-line { stroke-dashoffset: 0; }
.pscroll.vis .pdash-tip { opacity: 1; }
.pscroll.vis .pdash-bar i { width: var(--w); }
.pscroll.vis .pdash-f { opacity: 1; transform: none; }
.pscroll.vis .pdash-f:nth-child(1) { transition-delay: .55s; }
.pscroll.vis .pdash-f:nth-child(2) { transition-delay: .75s; }
.pscroll.vis .pdash-f:nth-child(3) { transition-delay: .95s; }
.pscroll.vis .pdash-f:nth-child(4) { transition-delay: 1.15s; }
/* finite pulse — 10 iterations, then it rests. Never loops forever off-screen. */
.pscroll.vis .pdash-dot { animation: pdashPulse 2.4s var(--ease) .4s 10 both; }
.pscroll.vis .pdash-f:nth-child(1) .pdash-f-d { animation: pdashPulse 2.4s var(--ease) 1s 8 both; }
@keyframes pdashPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

/* BLOCKER FIX — the 3D tilt projects the frame WIDER than its box (rotateX about the
   top edge), and projected width scales with element height. The native .pdash is ~2x
   taller than the old fixed-height embed, so below ~1100px the frame threw its left/right
   borders off-screen (html{overflow-x:clip} hid the scrollbar, so an overflow check still
   passed while content was genuinely lost). Flatten the tilt where the viewport is tight —
   the dashboard reads better square-on at small sizes anyway. */
@media (max-width: 1100px) {
  .pscroll-frame { --prx: 0deg !important; }
  .pscroll-stage { perspective: none; }
}
@media (max-width: 1000px) {
  .pdash { grid-template-columns: 148px minmax(0,1fr); }
  .pdash-kpi { grid-column: span 4; }
  .pdash-chart { grid-column: span 12; }
  .pdash-rank { grid-column: span 12; }
}
@media (max-width: 700px) {
  .pscroll-stage { perspective: 900px; }
  .pscroll-frame { --prx: 16deg; }
  .pscroll-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pdash { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .pdash-rail { flex-direction: row; align-items: center; gap: 10px; overflow: hidden;
    border-right: 0; border-bottom: 1px solid rgba(237,231,218,.07); padding: 11px 14px; }
  .pdash-nav { display: none; }
  .pdash-rail-foot { margin: 0 0 0 auto; padding: 0; }
  .pdash-main { padding: 13px 14px 16px; gap: 10px; }
  .pdash-top-h { font-size: 14px; }
  .pdash-kpi { grid-column: span 6; }
  .pdash-kpi:nth-child(3) { display: none; }
  .pdash-f:nth-child(4) { display: none; }
  .pdash-num { font-size: clamp(21px,6vw,28px); }
}
@media (max-width: 420px) {
  /* Keep the "sample data" disclaimer on the narrowest phones — the chrome URL label
     ellipsises away there, so this becomes the only in-frame signal that the figures
     are illustrative. Shortened rather than hidden. */
  .pdash-pill { display: none; }
  .pdash-pill-a { display: inline-block; font-size: 8.5px; padding: 3px 6px; }
  .pdash-card { padding: 11px 12px; }
  .pdash-grid { gap: 8px; }
  .pdash-klbl { font-size: 9.5px; letter-spacing: .04em; }
  .pdash-kmeta { display: none; }
  .pdash-f { font-size: 10.5px; padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pscroll-frame { transform: none !important; }
  .pdash, .pdash * { transition: none !important; animation: none !important; }
  .pdash-num, .pdash-area, .pdash-tip, .pdash-f { opacity: 1 !important; transform: none !important; }
  .pdash-line { stroke-dashoffset: 0 !important; }
  .pdash-bar i { width: var(--w) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION 3 — THE RANGE (front desk → enterprise size selector)
   ════════════════════════════════════════════════════════════════════════ */
.range-sec { padding: clamp(72px,9vw,140px) 24px; }
.range-w { max-width: var(--content-w); margin: 0 auto; }
.range-head { text-align: center; max-width: 880px; margin: 0 auto clamp(30px,4vw,48px); }
.range-eyebrow { font: 700 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--crimson-coral); margin-bottom: 18px; }
.range-h { font-family: var(--font) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -.015em; line-height: .98; font-size: clamp(34px,5vw,68px); color: var(--linen); margin: 0 0 20px; }
.range-h em { font-style: normal; font-weight: 800; color: var(--crimson-coral); }
.range-sub { font: 400 clamp(15px,1.3vw,18px)/1.7 var(--font); color: var(--linen-mute); max-width: 56ch; margin: 0 auto; }

.range-picker { display: flex; justify-content: center; gap: 5px; background: rgba(237,231,218,.045); border: 1px solid rgba(237,231,218,.09); border-radius: 10px; padding: 5px; width: max-content; max-width: 100%; margin: 0 auto clamp(28px,3.5vw,44px); overflow-x: auto; scrollbar-width: none; }
.range-picker::-webkit-scrollbar { display: none; }
/* Phones: the 4 size tabs overflow 375 and the last one clips silently. Let the
   picker fill the width and the tabs share it so all four fit on-screen. */
@media (max-width: 600px) {
  .range-picker { width: 100%; gap: 3px; }
  /* specificity (0,2,0) so it beats the base .range-tab defined just below */
  .range-picker .range-tab { flex: 1 1 0; padding: 10px 5px; letter-spacing: .01em; font-size: 10px; }
}
.range-tab { appearance: none; border: 0; background: none; cursor: pointer; font: 700 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--linen-soft); padding: 12px 22px; border-radius: 8px; white-space: nowrap; transition: color .2s, background .25s, box-shadow .25s; }
.range-tab:hover { color: var(--linen); }
.range-tab.is-on { background: rgba(196,18,48,.9); color: #fff; box-shadow: 0 4px 16px rgba(196,18,48,.4); }

.range-body { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(24px,3.5vw,56px); max-width: 1060px; margin: 0 auto; align-items: start; }
.range-copy { position: relative; }
.range-story { display: none; }
.range-story.is-on { display: block; animation: rangeIn .45s var(--ease) both; }
@keyframes rangeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.range-t { font: 800 clamp(22px,2.4vw,32px)/1.12 var(--font); text-transform: uppercase; letter-spacing: -.01em; color: var(--linen); margin: 6px 0 14px; }
.range-t b { color: var(--crimson-coral); font-weight: 800; }
.range-p { font: 400 15.5px/1.75 var(--font); color: var(--linen-mute); max-width: 46ch; margin: 0 0 24px; }
.range-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.range-cta-note { font: 600 12.5px/1.4 var(--font); color: var(--linen-soft); font-style: italic; }

.range-stack { background: #14151A; border: 1px solid rgba(237,231,218,.10); border-radius: 12px; padding: 20px 22px; }
.range-stack-l { font: 700 10.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--linen-soft); margin-bottom: 16px; }
.range-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.range-chip { font: 600 12px/1 var(--font); letter-spacing: .03em; color: var(--linen-soft); background: rgba(237,231,218,.03); border: 1px solid rgba(237,231,218,.08); border-radius: 7px; padding: 9px 13px; opacity: .32; transform: scale(.97); transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s, background .35s, color .35s, box-shadow .35s; }
.range-chip.lit { opacity: 1; transform: none; color: var(--linen); border-color: rgba(196,18,48,.55); background: rgba(196,18,48,.10); box-shadow: 0 0 14px rgba(196,18,48,.14); }
.range-count { margin-top: 16px; font: 500 12px/1.5 var(--font); color: var(--linen-mute); }
.range-count b { color: var(--crimson-coral); font-weight: 800; font-size: 14px; }

@media (max-width: 880px) {
  .range-body { grid-template-columns: 1fr; }
  .range-picker { width: 100%; justify-content: flex-start; }
  .range-tab { padding: 11px 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .range-story.is-on { animation: none; } .range-chip { transition: none; } }