@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 */
}

/* ═══ subpage.css ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · SUBPAGE KIT
   Shared, reusable layout blocks for every inner page (services, about, work,
   iris, assessment, process, legal, insights). Page-build agents compose these
   classes + tokens.css — they never edit shared CSS, so there are no conflicts.
   Dark System A only. Pairs with tokens.css / components.css / interactive.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── INNER-PAGE HERO (shorter than the homepage hero) ────────────────────── */
.subhero {
  position: relative;
  padding: 140px 24px 72px;
  overflow: hidden;
}
@media (min-width: 768px) { .subhero { padding: 180px 56px 96px; } }
@media (min-width: 1100px) { .subhero { padding: 200px 96px 110px; } }
.subhero-w { max-width: var(--content-w); margin: 0 auto; position: relative; z-index: 5; }
.subhero-w.center { text-align: center; }
.subhero-w.center .eyebrow { justify-content: center; }
.subhero h1 {
  font-family: var(--font-serif); font-optical-sizing: auto; font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 500; line-height: 1.02; letter-spacing: -0.018em;
  color: var(--linen); font-size: clamp(40px, 6.4vw, 92px); margin-bottom: var(--s-5); max-width: 18ch;
}
.subhero-w.center h1 { margin-left: auto; margin-right: auto; }
.subhero h1 em { font-style: italic; font-weight: 500; color: var(--crimson-coral); }
.subhero-sub {
  font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--crimson-bright); margin-bottom: var(--s-4);
}
.subhero .lede { max-width: 60ch; margin-bottom: var(--s-6); }
.subhero-w.center .lede { margin-left: auto; margin-right: auto; }
.subhero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.subhero-w.center .subhero-ctas { justify-content: center; }

/* ─── SECTION SHELL (lighter than the homepage full-height .scene) ────────── */
.sec { position: relative; padding: 72px 24px; }
@media (min-width: 768px) { .sec { padding: 96px 56px; } }
@media (min-width: 1100px) { .sec { padding: 110px 96px; } }
.sec-w { max-width: var(--content-w); margin: 0 auto; position: relative; z-index: 5; }
.sec-w.narrow { max-width: 820px; }
.sec.alt { background: var(--bg-card-hi); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { margin-bottom: var(--s-7); }
.sec-head.center { text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head h2 { margin-bottom: var(--s-4); max-width: 24ch; }
.sec-head.center h2 { margin-left: auto; margin-right: auto; }

/* ─── PAIN / "WHY OWNERS COME TO US" BULLETS ──────────────────────────────── */
.pain-list { display: grid; gap: 14px; list-style: none; padding-left: 0; margin: 0; }
.pain-list > li { list-style: none; }
@media (min-width: 800px) { .pain-list { grid-template-columns: repeat(3, 1fr); } }
.pain-list .pli {
  background: var(--bg-card); border: 1px solid var(--line2); border-left: 3px solid var(--crimson);
  border-radius: var(--r); padding: var(--s-5); font-family: var(--font); font-size: 15px;
  line-height: 1.6; color: var(--linen-mute);
}
.pain-list .pli b { display: block; color: var(--crimson-bright); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }

/* ─── DELIVERABLES ("what we'd actually build") 3-up ──────────────────────── */
.deliv-grid { display: grid; gap: 16px; counter-reset: deliv; }
@media (min-width: 800px) { .deliv-grid { grid-template-columns: repeat(3, 1fr); } }
.deliv {
  position: relative; background: var(--bg-card); border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: var(--s-6); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.deliv:hover { transform: translateY(-4px); border-color: var(--crimson); box-shadow: var(--shadow-card); }
.deliv-num { font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--crimson-bright); margin-bottom: 14px; }
.deliv h3 { font-family: var(--font); font-size: 19px; font-weight: 700; color: var(--linen); margin-bottom: 10px; letter-spacing: -0.01em; }
.deliv p { font-family: var(--font); font-size: 14px; line-height: 1.65; color: var(--linen-mute); }

/* ─── SPLIT (text + visual / example) ─────────────────────────────────────── */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .split.wide-l { grid-template-columns: 1.2fr 1fr; } }
.split-media { border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-card); }
.split-media img, .split-media video { display: block; width: 100%; height: auto; }

/* ─── NUMBERED STEPS (process / assessment / how) ─────────────────────────── */
.steps { display: grid; gap: 16px; }
.step-row {
  display: grid; gap: var(--s-4); align-items: start; background: var(--bg-card);
  border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--s-6);
}
@media (min-width: 760px) { .step-row { grid-template-columns: 120px 1fr; gap: var(--s-6); } }
.step-n { font-family: var(--font); font-size: clamp(40px, 6vw, 64px); font-weight: 800; line-height: 0.9; color: var(--crimson); letter-spacing: -0.04em; }
.step-dur { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--linen-soft); margin-top: 8px; }
.step-body h3 { font-family: var(--font); font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--linen); margin-bottom: 12px; letter-spacing: -0.01em; }
.step-body p { font-family: var(--font); font-size: 15px; line-height: 1.7; color: var(--linen-mute); margin-bottom: 14px; }
.step-take { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--linen); border-left: 2px solid var(--crimson); padding-left: 16px; }
.step-take b { color: var(--crimson-bright); font-weight: 700; }

/* ─── CHANNEL / FEATURE CARDS (Iris "what she watches", generic 2x2) ──────── */
.channel-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .channel-grid { grid-template-columns: repeat(2, 1fr); } }
.channel { background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--s-6); }
.channel-ico { font-size: 22px; margin-bottom: 14px; }
.channel h3 { font-family: var(--font); font-size: 18px; font-weight: 700; color: var(--linen); margin-bottom: 8px; }
.channel p { font-family: var(--font); font-size: 14px; line-height: 1.65; color: var(--linen-mute); }

/* ─── TERMINAL / DASHBOARD MOCK (Iris intel, analytics proof) ─────────────── */
.terminal { background: #0b0e16; border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #11151f; border-bottom: 1px solid var(--line); }
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line3); display: inline-block; }
.terminal-bar span { margin-left: 12px; font-size: 11px; color: var(--linen-soft); }
.terminal-body { padding: var(--s-5); font-size: 12.5px; line-height: 1.9; color: var(--linen-mute); }
.terminal-body .ln b { color: var(--crimson-coral); }
.terminal-body .ln .ok { color: var(--good); }
.terminal-body .ln .dim { color: var(--linen-soft); }
.terminal-body .cur::after { content: '▋'; color: var(--crimson-bright); animation: pulse 1.2s steps(2) infinite; }

/* ─── TEAM GRID (About — CSS-built avatars) ───────────────────────────────── */
.team-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.agent-card { background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.agent-card:hover { border-color: var(--crimson); transform: translateY(-3px); }
.agent-av {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 800; font-size: 20px; color: var(--linen); margin-bottom: 16px;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--bg-elev-2) 100%); border: 1px solid var(--line2);
}
.agent-card h3 { font-family: var(--font); font-size: 18px; font-weight: 700; color: var(--linen); }
.agent-role { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crimson-bright); margin: 4px 0 12px; }
.agent-card p { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--linen-mute); }

/* ─── TIMELINE STRIP ──────────────────────────────────────────────────────── */
.timeline-strip { display: grid; gap: 16px; }
@media (min-width: 800px) { .timeline-strip { grid-template-columns: repeat(4, 1fr); } }
.tl-item { border-top: 2px solid var(--crimson); padding-top: 16px; }
.tl-year { font-family: var(--font); font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--linen); letter-spacing: -0.02em; }
.tl-item p { font-family: var(--font); font-size: 13px; line-height: 1.55; color: var(--linen-mute); margin-top: 8px; }

/* ─── CROSS-LINK FOOTER (next service in the stack) ───────────────────────── */
.cross-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
}
.cross-link:hover { border-color: var(--crimson); }
.cross-link .cl-label { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--linen-soft); }
.cross-link .cl-name { font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(20px, 3vw, 30px); font-weight: 500; color: var(--linen); }
.cross-link .cl-name em { font-style: italic; color: var(--crimson-coral); }

/* ─── REUSABLE FINAL CTA BAND ─────────────────────────────────────────────── */
.cta-band { position: relative; padding: 96px 24px; text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .cta-band { padding: 130px 56px; } }
.cta-band-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 600px; max-width: 120vw; background: radial-gradient(ellipse, var(--crimson-soft) 0%, transparent 65%); filter: blur(40px); pointer-events: none; }
.cta-band-w { max-width: 760px; margin: 0 auto; position: relative; z-index: 5; }
.cta-band h2 { font-family: var(--font-serif); font-optical-sizing: auto; font-variation-settings: 'opsz' 96; font-weight: 500; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.014em; color: var(--linen); margin-bottom: var(--s-5); }
.cta-band h2 em { font-style: italic; font-weight: 500; color: var(--crimson-coral); }
.cta-band .lede { margin: 0 auto var(--s-6); max-width: 56ch; }
.cta-band-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ─── LONG-FORM PROSE (legal, insights article) ───────────────────────────── */
.prose { max-width: 68ch; margin: 0 auto; font-family: var(--font); color: var(--linen-mute); }
.prose h2 { font-family: var(--font); font-size: 26px; font-weight: 700; color: var(--linen); margin: 40px 0 14px; letter-spacing: -0.01em; }
.prose h3 { font-family: var(--font); font-size: 19px; font-weight: 700; color: var(--linen); margin: 28px 0 10px; }
.prose p { font-size: 17px; line-height: 1.75; margin-bottom: 18px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { font-size: 17px; line-height: 1.7; margin-bottom: 8px; }
.prose a { color: var(--crimson-bright); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--linen); font-weight: 700; }
.prose-meta { font-family: var(--font); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--linen-soft); margin-bottom: 32px; }

/* ─── INSIGHTS / BLOG CARD GRID ───────────────────────────────────────────── */
.post-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.post-card:hover { border-color: var(--crimson); transform: translateY(-3px); }
.post-card-body { padding: var(--s-5); }
.post-tag { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson-bright); margin-bottom: 10px; }
.post-card h3 { font-family: var(--font); font-size: 18px; font-weight: 700; color: var(--linen); line-height: 1.3; margin-bottom: 10px; }
.post-card p { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--linen-mute); }

/* ─── 404 ─────────────────────────────────────────────────────────────────── */
.fourohfour { position: relative; overflow: hidden; min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 24px; }
.fourohfour .big { font-family: var(--font); font-size: clamp(90px, 22vw, 240px); font-weight: 800; line-height: 0.8; color: var(--linen); letter-spacing: -0.05em; }
.fourohfour .big em { font-style: italic; color: var(--crimson-coral); }

/* ─── SUBHERO MEDIA — cinematic backdrop for hero-less pages ─────────────────
   Same recipe as the homepage .hero-media: full-bleed fresco image + a left/
   bottom scrim so copy stays legible and the image melts into #0A0B10. */
.subhero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050814; }
.subhero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 45%; opacity: 0.55;
}
.subhero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,11,16,0.96) 0%, rgba(10,11,16,0.84) 32%, rgba(10,11,16,0.45) 58%, rgba(10,11,16,0.10) 100%),
    linear-gradient(0deg, #0A0B10 0%, rgba(10,11,16,0.5) 16%, rgba(10,11,16,0) 44%),
    linear-gradient(180deg, rgba(10,11,16,0.6) 0%, rgba(10,11,16,0) 22%);
}
.subhero-w { position: relative; z-index: 5; }
@media (max-width: 999px) {
  .subhero-media img { object-position: 66% 45%; opacity: 0.42; }
  .subhero-scrim {
    background:
      linear-gradient(0deg, #0A0B10 4%, rgba(10,11,16,0.72) 34%, rgba(10,11,16,0.4) 62%, rgba(10,11,16,0.6) 100%),
      linear-gradient(180deg, rgba(10,11,16,0.72) 0%, rgba(10,11,16,0.2) 30%);
  }
}

/* ─── FOUNDER PORTRAIT CARD (About §07) ──────────────────────────────────────
   The frame ships now with a fresco-texture placeholder + monogram; the real
   headshot drops in as <img class="fp-photo"> later — frame and plate stay. */
.founder-card { max-width: 340px; margin: 0 auto; }
.fp-frame {
  position: relative; aspect-ratio: 4 / 5; margin: 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(196, 18, 48, 0.28); background: #0c0d14;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(196, 18, 48, 0.14);
}
.fp-frame::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/img/hero-creation-1080.webp') 62% 30% / cover no-repeat;
  opacity: 0.35; filter: saturate(0.75);
}
.fp-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 16, 0.12), rgba(10, 11, 16, 0.9) 80%);
}
.fp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fp-mono {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  font-family: var(--font); font-weight: 800; font-size: 64px; letter-spacing: 0.04em;
  color: var(--linen); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.65);
}
.fp-plate { text-align: center; margin-top: 16px; }
.fp-name { font: 800 18px/1.2 var(--font); letter-spacing: 0.02em; text-transform: uppercase; color: var(--linen); }
.fp-role { font: 600 11px/1.6 var(--font); letter-spacing: 2px; text-transform: uppercase; color: var(--crimson-bright); margin-top: 4px; }

/* ─── SPLIT GRID FR-STARVATION FIX ────────────────────────────────────────────
   Grid items default to min-width:auto (= min-content), so a wide child (e.g. a
   4-up .work-stats grid or a 3-up .pain-list) steals space and starves the other
   track — collapsing the .terminal proof visual to ~140px at 1280 and pain cards
   to ~110px. min-width:0 lets the 1.2fr / 1fr ratios actually resolve. */
.split > * { min-width: 0; }


/* ── SOLO SPLIT ────────────────────────────────────────────────────────────
   A .split whose media child was removed (its image was promoted to the page
   hero, so showing it again mid-page was a duplicate). Without this the grid
   keeps its 1fr 1fr / 1.2fr 1fr tracks and the prose sits squeezed in the left
   half with dead space beside it. Collapse to ONE column, capped at a readable
   measure rather than the full container width.
   Declared last and with .wide-l included so it beats both column rules —
   .split.solo and .split.wide-l are the same specificity, so order decides. */
.split.solo,
.split.wide-l.solo { grid-template-columns: minmax(0, 74ch); }

/* ═══ 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; }