@charset "UTF-8";

/* ═══ tokens.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · DESIGN TOKENS
   Source of truth: Brand Kit v1.1 (the Brand Bible) via the sacred-design skill
   (assets/tokens.css). Do not add colors, fonts or shadows here without a brand ruling.
   System: A · Dark / Marketing
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── COLOR · kit names (Brand Kit v1.1) ─────────────────────────────────── */
  --void:             #0A0B10;   /* default ground; the ink on Linen */
  --obsidian:         #14151A;   /* card surfaces on Void */
  --graphite:         #22252E;   /* raised surfaces, inputs, dividers */
  --gilt:             #C8A158;   /* earned, booked, complete. Never decoration */
  --live:             #6BB179;   /* a real, live status. Nothing else */
  --hairline:         rgba(237, 231, 218, 0.14);
  --hairline-strong:  rgba(237, 231, 218, 0.24);

  /* ─── BACKGROUNDS (site names, aliased to the kit while uses migrate) ───── */
  --bg:               var(--void);       /* page bg · DEFAULT */
  --bg-card:          var(--obsidian);   /* card surfaces */
  --bg-elev-2:        var(--graphite);
  --bg-elev:          var(--graphite);   /* retired #1A1D24 (off-kit) */
  --bg-deep:          var(--void);       /* retired #050814 navy (off-kit) */
  --bg-card-hi:       rgba(237, 231, 218, 0.04); /* elevated card */

  /* ─── CRIMSON FAMILY ─────────────────────────────────────────────────────── */
  --crimson:          #C41230;   /* Sacred Crimson: the one accent. Fills, marks, display type */
  --crimson-deep:     #8B0A20;   /* red on Linen; pressed/hover fill. Never a foreground on dark */
  --crimson-bright:   #E63950;   /* screen only: small red text on Void (4.74:1); one emphasized headline word */
  --crimson-coral:    var(--crimson-bright);   /* retired #CD364F: alias only, uses migrate to --crimson-bright */
  --crimson-soft:     rgba(196, 18, 48, 0.10);
  --crimson-faint:    rgba(196, 18, 48, 0.03);

  /* ─── LINEN FAMILY (text on dark) ────────────────────────────────────────── */
  --linen:            #EDE7DA;   /* text and logo on dark · DEFAULT */
  --linen-mute:       #D8D1C0;   /* body and deck on dark */
  --linen-soft:       #B8B2A6;   /* captions, labels; small labels on Obsidian/Graphite cards */
  --linen-faint:      rgba(237, 231, 218, 0.04);

  /* ─── LINES / BORDERS ────────────────────────────────────────────────────── */
  --line:             rgba(237, 231, 218, 0.08);
  --line2:            var(--hairline);          /* was 0.16; the kit hairline is 0.14 */
  --line3:            var(--hairline-strong);

  /* ─── ACCENT (restrained · special-use only) ─────────────────────────────── */
  --gold:             var(--gilt);
  --good:             var(--live);

  /* ─── TYPE · Montserrat only. Gorgias Black lives inside the logo artwork ── */
  --font:             'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, monospace;   /* ONLY inside terminal and log mockups (ruling 2026-10-15) */
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-xbold: 800; --fw-black: 900;
  /* size · line-height · letter-spacing travel together: tracking tightens as type grows, leading tightens too */
  --display-size:     clamp(3.5rem, 8vw, 8.25rem);   --display-lh: 0.94; --display-ls: -0.02em;   /* Black 900, CAPS */
  --h1-size:          clamp(3rem, 5.5vw, 5rem);      --h1-lh: 1.04;      --h1-ls: -0.012em;       /* ExtraBold 800, CAPS */
  --h2-size:          clamp(1.75rem, 3vw, 2.5rem);   --h2-lh: 1.18;      --h2-ls: -0.008em;       /* ExtraBold 800, CAPS */
  --h2-open-size:     clamp(2.25rem, 4.2vw, 3.5rem);                                           /* a section's opening heading: up to 56 px (ruling 2026-10-15). Set once, here */
  --h3-size:          clamp(1.25rem, 1.6vw, 1.5rem); --h3-lh: 1.28;      --h3-ls: 0;              /* Bold 700, sentence case */
  --deck-size:        clamp(1.25rem, 1.6vw, 1.5rem); --deck-lh: 1.4;     --deck-ls: 0;            /* Medium 500: the plain line under a headline */
  --lead-size:        clamp(1.25rem, 1.6vw, 1.5rem); --lead-lh: 1.5;
  --body-size:        1.0625rem;                     --body-lh: 1.62;    --body-ls: 0;            /* Medium 500 on dark, Regular 400 on Linen */
  --body-sm:          1rem;                          --body-sm-lh: 1.6;                           /* card and list copy: the kit's body floor */
  --caption-size:     0.8125rem;                     --caption-lh: 1.45; --caption-ls: 0.015em;   /* running and legal text floor: 13 px */
  --eyebrow-size:     0.75rem;                       --eyebrow-ls: 0.3em;                         /* SemiBold 600, CAPS, crimson dash. Caps-label floor: 12 px */
  --button-size:      0.8125rem;                     --button-ls: 0.1em;                          /* Bold 700, CAPS: buttons, nav, tabs */
  --numeral-ls:       -0.03em;                                                                     /* Black 900 numerals, line-height 1 */
  --measure:          62ch;                                                                        /* max line length for body copy */
  /* legacy names, kept as aliases while page files migrate */
  --body:             var(--body-size);
  --eyebrow:          var(--eyebrow-size);

  /* ─── SPACING (8px base). Use these; do not invent in-between values ───── */
  --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: slight roundness. Never pills ──────────────────────── */
  --r-sm:             8px;        /* buttons, small cards */
  --r:                10px;       /* default cards */
  --r-lg:             10px;       /* large cards */
  --r-panel:          14px;       /* panels, media frames, modal */
  --r-button:         var(--r-sm);
  --r-card:           var(--r);

  /* ─── DEPTH: flat. No glow on buttons, cards, inputs, badges or the logo ── */
  --shadow-none:      none;
  --shadow-glow:      none;   /* brand ruling 2: no glow on UI */
  --shadow-card:      none;
  --shadow-float:     0 20px 60px rgba(0, 0, 0, 0.45);   /* ONLY surfaces that truly float: menus, sheets, the CTA modal */
  --scrim:            rgba(10, 11, 16, 0.6);             /* behind a modal; behind a logo on a photo */
  --chrome-bg:        rgba(10, 11, 16, 0.72);            /* translucent nav ground, with the blur below */
  --chrome-blur:      saturate(160%) blur(20px);

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

  /* ─── MOTION: explains a change, never decorates. transform + opacity only ── */
  --ease:             cubic-bezier(0.2, 0.8, 0.2, 1);    /* entrances and feedback: the one feel */
  --ease-out:         var(--ease);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);    /* on-screen moves */
  --ease-spring:      var(--ease);                       /* no overshoot anywhere */
  /* a critically damped spring curve (no overshoot) for panel moves: transition: transform var(--t-move) var(--spring) */
  --spring:           linear(0, 0.0151 2%, 0.0535 4%, 0.1373 7%, 0.2359 10%, 0.3704 14%, 0.4947 18%, 0.6262 23%, 0.7471 29%, 0.8442 36%, 0.9128 44%, 0.959 54%, 0.984 66%, 0.9948 80%, 1);
  --press-scale:      0.97;
  --t-press:          100ms;      /* pointer-down feedback */
  --t-fast:           160ms;      /* hover, focus, small state changes: inside 200 ms */
  --t-feedback:       var(--t-fast);
  --t:                300ms;
  --t-slow:           360ms;      /* reveals, panels, menus: inside 500 ms */
  --t-move:           var(--t-slow);

  /* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
  --z-bg:             0;
  --z-stars:          -1;     /* behind ALL page content: the star field is part of the background */
  --z-content:        5;
  --z-nav:            80;
  --z-modal:          200;
  --z-fab:            90;
  --z-chat-fab:       2147483647; /* sage chat widget — top of stack */
}

/* ─── RESPECT · reduced transparency: solid surfaces, no blur ─────────────── */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --chrome-bg: var(--void);
    --chrome-blur: none;
    --scrim: rgba(10, 11, 16, 0.94);
  }
  #topNav, #topNav.scrolled { background: var(--void) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .cta-modal-backdrop { background: rgba(10, 11, 16, 0.94) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .pvid-replay, .ba-label, #seb-root .seb-gate { background-color: var(--obsidian) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ─── RESPECT · more contrast: defined borders, brighter secondary text ───── */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(237, 231, 218, 0.32);
    --hairline: rgba(237, 231, 218, 0.5);
    --hairline-strong: rgba(237, 231, 218, 0.64);
    --linen-soft: #D8D1C0;
  }
}

/* ═══ 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: var(--body-lh);
  font-size: var(--body-size);
  min-height: 100vh;
}

/* Brand ruling 1: Montserrat only, no italic. Emphasis is weight, or one word in Crimson Bright. */
em, i { font-style: normal; }
h1 em, h2 em, h3 em, .sb-line em { font-weight: inherit; color: var(--crimson-bright); }
p em, li em, .lede em, .pli em { font-weight: 700; color: var(--linen); }

::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;
}
@media (hover: hover) {
  ::-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-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-ls);
  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: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-ls);
  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 ──────────────────────────────────────────────── */

/* H2 · a section's opening heading. One opener size, set once in tokens.css (ruling 2026-10-15). */
.h-section {
  font-family: var(--font);
  font-weight: 800;
  font-size: var(--h2-open-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  text-transform: uppercase;
  color: var(--linen);
}
.h-section em {
  font-weight: inherit;
  color: var(--crimson-bright);
}

/* H3 · card and step titles: Bold, sentence case */
.h-card {
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--linen);
}
.h-card em {
  font-weight: inherit;
  color: var(--crimson-bright);
}

/* Body · Medium 500 on dark */
.lede {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  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-size);
  line-height: var(--body-lh);
  color: var(--linen-mute);
}
.body-copy strong { color: var(--linen); font-weight: 700; }

/* Small running lines (sign-offs, "Prefer to talk? Call…", catalogue numbers). Montserrat, never a code face:
   the system monospace is reserved for terminal and log mockups (.terminal, ruling 2026-10-15). */
.mono {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--caption-size);   /* running text: the 13px floor, not the 12px caps-label size */
  letter-spacing: var(--caption-ls);
  font-variant-numeric: tabular-nums;
  color: var(--linen-soft);
}
.mono b { color: var(--linen); font-weight: 700; }   /* weight carries it: these lines sit on Obsidian cards too, where small Crimson Bright fails AA */
.terminal .mono { font-family: var(--font-mono); }

/* ─── BUTTONS (kit: flat Crimson fill or hairline ghost, 8px radius, Bold caps) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  font-family: var(--font);
  font-size: var(--button-size);
  font-weight: 700;
  letter-spacing: var(--button-ls);
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--linen);
}
.btn-primary::after {
  content: '→';
  transition: transform var(--t-fast) var(--ease);
}

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

/* hover is a bonus for pointer users, never the only signal */
@media (hover: hover) {
  .btn-primary:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); }
  .btn-primary:hover::after { transform: translateX(4px); }
  .btn-ghost:hover { border-color: var(--line3); color: var(--linen); background: rgba(237, 231, 218, 0.08); }
  .btn-ghost:hover::after { transform: translateX(3px); opacity: 1; }
}

.btn-sm {
  min-height: var(--tap);
  padding: 11px 22px;
}

/* ─── PRESS: one mechanism for every control. Feedback starts on pointer-down
   (site.js adds an empty touchstart listener so iOS honors :active). ───────── */
:is(.btn, .nav-btn, .ssf-submit, .lf-submit, .range-tab, .nav-burger, .pvid-ctl, .film-ctl, .cta-modal-close, .demo-launch, .ssf-back) {
  transition: transform var(--t-press) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
:is(.btn, .nav-btn, .ssf-submit, .lf-submit, .range-tab, .nav-burger, .pvid-ctl, .film-ctl, .cta-modal-close, .demo-launch, .ssf-back):active {
  transform: scale(var(--press-scale));
}

/* ─── CARDS ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: var(--s-6);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-press) var(--ease);
}
@media (hover: hover) {
  a.card:hover { border-color: var(--line3); }
}
a.card:active { transform: scale(var(--press-scale)); }

/* ─── REVEAL (scroll-triggered) ───────────────────────────────────────────
   Gated on html.js, set by an inline script in every <head> (and removed after
   4 s unless site.js has booted), so copy is visible without JavaScript. One
   subtle reveal: 12 px of travel in 360 ms, fired once. */
.js .rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js .rv.vis {
  opacity: 1;
  transform: none;
}
/* Press beats the reveal end state: .js .rv.vis (0,3,0) holds transform: none on a revealed
   card, and its slow, staggered transition would also delay the feedback. */
.js .rv.vis:is(a.card, a.cross-link, .fn-featured, .ins-hcard, .ins-card):active {
  transform: scale(var(--press-scale));
  transition-duration: var(--t-press);
  transition-delay: 0s;
}
/* First-viewport content: revealed instantly on load (no fade/stagger). */
.rv.rv-now { transition: none !important; }
.rv-d1 { transition-delay: 40ms; }
.rv-d2 { transition-delay: 80ms; }
.rv-d3 { transition-delay: 120ms; }
.rv-d4 { transition-delay: 160ms; }
.rv-d5 { transition-delay: 200ms; }

/* ═══════════════════════════════════════════════════════════════════════════
   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: var(--ease);
  --mo-dur:  var(--t-slow);
  --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 ("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: var(--crimson);
  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: rgba(237, 231, 218, 0.28);
}

.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: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-ls);
  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 var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.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 */

.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 var(--mo-dur) var(--mo-ease), transform var(--mo-dur) 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; }

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


/* ─── 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;
  }
  .mo-loop,
  .mo-loop::before,
  .mo-loop::after { animation: none !important; }
}

/* ─── SCENE LAYOUT (used by every page) ──────────────────────────────────── */
.scene {
  position: relative;
  padding: var(--s-8) 24px;
  /* NO min-height. This used to be `min-height: 90vh`, which on a tall browser
     window (2400px+) forced every content section to ~2170px regardless of how
     much was in it — a 600px section got ~780px of blank above AND below. That
     was the source of the dead space across the whole site. Sections now size
     to their content, and the padding does the breathing. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .scene { padding: 104px 56px; }
}
@media (min-width: 1100px) {
  .scene { padding: 120px 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-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;
}

/* ════════════════════════════════════════════════════════════════════════
   FILM — a page's video, placed directly UNDER the page's first text section
   (the subhero). Starts muted + inline when scrolled into view, poster so it
   is never blank, pauses off-screen, and on the last frame shows Book a call.
   Markup: section.film > .film-frame > video.film-v + .film-end + .film-ctl
   Logic:  /assets/js/film.js
   ════════════════════════════════════════════════════════════════════════ */
.film {
  position: relative;
  padding: 0 16px 8px;
}
.film-frame {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0A0B10;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.film-v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #0A0B10;
}
@media (min-width: 768px) {
  .film { padding: 0 24px 16px; }
}

/* end card: appears on the last frame (and when the video cannot start) */
.film-end {
  position: absolute; inset: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(10, 11, 16, 0.35) 0%, rgba(10, 11, 16, 0.78) 100%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.film.is-ended .film-end,
.film.is-idle .film-end {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-slow) var(--ease), visibility 0s;
}
.film-play[hidden], .film-again[hidden] { display: none; }
.film-end .film-play::after, .film-end .film-again::after { content: none; }
@media (max-width: 600px) {
  .film-end { flex-direction: column; gap: 6px; }
  .film-end .btn-primary { padding: 13px 22px; font-size: var(--eyebrow-size); }
  .film-end .film-play, .film-end .film-again {
    padding: 8px 12px; font-size: var(--eyebrow-size);
    background: transparent; border-color: transparent;
  }
}

/* pause / play control (WCAG 2.2.2: moving content can be paused) */
.film-ctl {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: var(--tap); height: var(--tap); padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: rgba(10, 11, 16, 0.62);
  color: var(--linen);
  cursor: pointer;
  opacity: 0;
}
.film-ctl svg { width: 16px; height: 16px; display: block; }
.film-ctl:focus-visible { opacity: 1; }
@media (hover: hover) {
  .film-frame:hover .film-ctl { opacity: 1; }
  .film-ctl:hover { background: var(--crimson); border-color: var(--crimson); }
}
.film.is-ended .film-ctl, .film.is-idle .film-ctl { display: none; }

/* sound on / off — films autoplay muted (browser policy), so this is the way in */
.film-sound {
  position: absolute; right: calc(12px + var(--tap) + 8px); bottom: 12px; z-index: 2;
  width: var(--tap); height: var(--tap); padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: rgba(10, 11, 16, 0.62);
  color: var(--linen);
  cursor: pointer;
  opacity: 0.9;
}
.film-sound svg { width: 17px; height: 17px; display: block; }
.film-sound.is-on { background: var(--crimson); border-color: var(--crimson); }
.film-sound:focus-visible { opacity: 1; }
@media (hover: hover) {
  .film-sound:hover { background: var(--crimson); border-color: var(--crimson); }
}
.film.is-ended .film-sound, .film.is-idle .film-sound { display: none; }
@media (hover: none) { .film-ctl { opacity: 0.85; } }

/* ════════════════════════════════════════════════════════════════════════
   LOGO BAND — client logos, cleared in writing only (work.html, 2026-10-09).
   Hides itself while the list is empty. Logos render as one-colour linen
   silhouettes so mixed brand colours sit evenly on the dark page — use
   transparent-background files (SVG preferred).
   ════════════════════════════════════════════════════════════════════════ */
.logo-band {
  padding: 44px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-band:not(:has(.logo-band-list li)) { display: none; }
.logo-band-w { max-width: var(--content-w); margin: 0 auto; text-align: center; }
.logo-band .eyebrow { justify-content: center; margin-bottom: 26px; }
.logo-band-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 44px;
}
.logo-band-list li { flex: 0 0 auto; }
.logo-band-list img {
  display: block; height: 36px; width: auto; max-width: 150px; object-fit: contain;
  filter: brightness(0) invert(0.92) sepia(0.12);
  opacity: 0.72;
  transition: opacity var(--t-fast) var(--ease);
}
@media (hover: hover) { .logo-band-list li:hover img { opacity: 1; } }
@media (min-width: 768px) {
  .logo-band { padding: 56px 32px; }
  .logo-band-list { gap: 30px 64px; }
  .logo-band-list img { height: 44px; max-width: 180px; }
}

/* Links inside running copy read as links: Linen, semibold, crimson underline (design v1 review). */
.lede a:not(.btn), .body-copy a:not(.btn) { color: var(--linen); font-weight: 600; text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 3px; }
/* Phone and SMS links in the small contact lines get a 44 px tap height. */
:is(.mono, .prose-meta) a:is([href^="tel:"], [href^="sms:"]) { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }

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

/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · INTERACTIVE.CSS
   Styles for the moving parts: live-demo embeds, before/after slider, ROI
   calculator, count-up numerals, the home multi-step form.
   Pairs with assets/js/interactive.js. Uses tokens.css variables throughout.
   (Dead blocks with no markup on any page — bento, marquee, device frame, lead
   strip, stack cards, the auto-typing Sage demo, the draw-on flow, the text
   before/after — were removed 2026-10-15.)
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ─── 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(2.125rem, 5vw, 3.5rem); font-weight: 900;
  letter-spacing: var(--numeral-ls); color: var(--linen); line-height: 1; font-variant-numeric: tabular-nums;
}
.work-stat-label { font-family: var(--font); font-size: var(--eyebrow-size); 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);
  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: var(--bg-card);
  transition: opacity var(--t) var(--ease);
}
.demo-live .demo-facade { opacity: 0; pointer-events: none; }
/* the facade's label is the kit eyebrow: Linen Soft with the crimson dash (Crimson Bright fails AA on Obsidian) */
.demo-facade-tag {
  font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase; color: var(--linen-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.demo-facade-tag::before { content: ''; width: 18px; height: 1px; background: var(--crimson); }
.demo-facade-title { font-family: var(--font); font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); color: var(--linen); }
.demo-facade-sub { font-family: var(--font); font-size: var(--body-sm); color: var(--linen-soft); max-width: 42ch; line-height: var(--body-sm-lh); }
.demo-launch {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap);
  font-family: var(--font); font-size: var(--button-size); font-weight: 700; letter-spacing: var(--button-ls); text-transform: uppercase;
  padding: 14px 26px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: var(--crimson); color: var(--linen);
}
.demo-launch::after { content: '↗'; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) {
  .demo-launch:hover { background: var(--crimson-deep); }
  .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); }

@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%); }
/* a caps label, not a pill: 8px radius, kit eyebrow type, on the Void scrim */
.ba-label {
  position: absolute; bottom: 14px; z-index: 3;
  font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase;
  color: var(--linen); background: rgba(10, 11, 16, 0.72); padding: 6px 12px; border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(8px); 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);
}
.ba-handle::after {
  content: '⟺'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--crimson); color: var(--linen);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  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; gap: 12px; margin-bottom: 10px;
  font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--button-ls); text-transform: uppercase; color: var(--linen-soft);
}
/* the live value: Linen at weight, since small Crimson Bright fails AA on the Obsidian card */
.roi-field label b { font-size: var(--body-size); font-weight: 800; color: var(--linen); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
/* 44px tall hit area; the visible track stays a 4px line drawn by the background */
.roi input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); border-radius: 4px;
  background: linear-gradient(var(--line3), var(--line3)) center / 100% 4px no-repeat;
  outline: none; cursor: pointer;
}
.roi input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--crimson); border: 3px solid var(--bg-card); cursor: grab;
}
.roi input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--crimson);
  border: 3px solid var(--bg-card); cursor: grab;
}
.roi input[type="range"]::-moz-range-track { height: 4px; background: var(--line3); border-radius: 4px; }
.roi input[type="range"]:focus-visible { outline: 2px solid var(--crimson-bright); outline-offset: 6px; }
.roi-output {
  text-align: center; padding: var(--s-6) var(--s-5);
  border: 1px solid var(--crimson); border-radius: var(--r); background: var(--bg-card);
}
.roi-output-num {
  font-family: var(--font); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1;
  letter-spacing: var(--numeral-ls); color: var(--linen); font-variant-numeric: tabular-nums;
}
.roi-output-label { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-top: 10px; }
.roi-output-note { font-family: var(--font); font-size: var(--caption-size); color: var(--linen-soft); line-height: 1.6; margin-top: 14px; }

/* ─── MULTI-STEP FORM (theme-agnostic — inherits the form's own colors) ───── */
.ssf-step[hidden] { display: none; }
/* step labels sit on the form card (Obsidian), so Linen Soft, not Crimson Bright */
.ssf-progress { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-bottom: 18px; }
.ssf-step-label { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-bottom: 16px; }
.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-2); border: 1px solid var(--line2); color: var(--linen-mute); opacity: 1;
  font-family: var(--font); font-size: var(--button-size); font-weight: 700; letter-spacing: var(--button-ls); text-transform: uppercase;
  min-height: var(--tap); padding: 14px 22px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .ssf-back:hover { border-color: var(--line3); 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; }

/* ═══ motion-fx.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   Motion layer start states.
   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.
   Hero copy has NO start state: it is on screen at first paint (2026-10-15).
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

/* ── 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 var(--ease);
}
@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 .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; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }   /* instant swap */
}

/* ═══ leadform.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   Compact lead capture — the CTA band form used on every page except the
   homepage (which keeps its longer 2-step qualifier).

   Deliberately three fields. On a secondary page the visitor has already spent
   attention getting here; asking for revenue and marketing spend at that point
   is how you turn interest into a bounce. Name, email, phone — then a human
   does the qualifying.
   ═══════════════════════════════════════════════════════════════════════════ */

.lf {
  max-width: 620px;
  margin: var(--s-7) auto 0;
  text-align: left;
}
.lf-head {
  font-family: var(--font);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--linen-soft);
  text-align: center;
  margin-bottom: var(--s-4);
}
.lf-row { display: grid; gap: 12px; }
@media (min-width: 720px) { .lf-row { grid-template-columns: 1fr 1fr; } }

.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-field label {
  font: 600 var(--eyebrow-size)/1.6 var(--font);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--linen-soft);
}
.lf-field input,
.lf-field select {
  font-family: var(--font);
  font-size: 14px;
  color: var(--linen);
  background: rgba(237, 231, 218, 0.04);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  min-height: var(--tap);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* iOS Safari zooms any focused field under 16px, throwing the visitor out of
   the layout mid-form. Desktop keeps 14px; phones get 16px. */
@media (max-width: 767px) {
  .lf-field input, .lf-field select { font-size: 16px; }
}
.lf-field input:focus,
.lf-field select:focus {
  border-color: var(--crimson);
  background: rgba(237, 231, 218, 0.06);
}
.lf-field input:focus-visible,
.lf-field select:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 2px;
  box-shadow: none;
}
/* 0.8 keeps the 14px placeholder over AA on the input fill and on card forms (5.6 / 6.0:1). */
.lf-field input::placeholder { color: var(--linen-soft); opacity: 0.8; }

/* Inline validation (leadform.js): a red edge only once the visitor has touched a field
   (:user-invalid), or after submit (aria-invalid), plus a short message under the field.
   Separate rules, so a browser without :user-invalid still honours aria-invalid. */
.lf-field input:user-invalid,
.lf-field select:user-invalid { border-color: var(--crimson-bright); }
.lf-field [aria-invalid="true"] { border-color: var(--crimson-bright); }
.lf-err {
  font: 600 var(--caption-size)/var(--caption-lh) var(--font);
  letter-spacing: var(--caption-ls);
  color: var(--linen);
}
.lf-err::before {
  content: ''; display: inline-block; width: 12px; height: 1px; margin-right: 8px;
  vertical-align: middle; background: var(--crimson-bright);
}
.lf-err[hidden] { display: none; }

.lf-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}
.lf-note {
  font-family: var(--font);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-ls);
  color: var(--linen-mute);
}
.lf-submit[disabled] { opacity: 0.6; cursor: wait; }

.lf-done, .lf-fail {
  font-family: var(--font);
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--linen);
  background: var(--bg-card);
  border: 1px solid var(--crimson);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  text-align: left;
}
.lf-done b { color: var(--linen); }
.lf-fail { border-color: var(--line3); background: var(--bg-card); }
/* A failed send keeps the form: leadform.js moves the fail box above the button. */
form[data-leadform] .lf-fail { margin-top: var(--s-5); }
.lf-fail a { color: var(--linen); font-weight: 700; text-decoration: underline; text-decoration-color: var(--crimson-bright); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* The form is a secondary path — the booking button stays the loud one. */
.lf-divider {
  display: flex; align-items: center; gap: 14px;
  margin: var(--s-6) auto var(--s-5);
  max-width: 620px;
  font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft);
}
.lf-divider::before, .lf-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line2);
}

@media (prefers-reduced-motion: reduce) {
  .lf-field input, .lf-field select { transition: none; }
}

/* ═══ 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: 48px 24px 56px;   /* phones: the primary action lands above the fold (sits under the 78px nav spacer) */
  overflow: hidden;
}
@media (min-width: 768px) { .subhero { padding: 180px 56px 96px; } }
@media (min-width: 1100px) { .subhero { padding: var(--s-10) 96px var(--s-9); } }
.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; }
/* H1 · ExtraBold caps on the kit's H1 tokens (48–80px) */
.subhero h1 {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls);
  color: var(--linen); margin-bottom: var(--s-5); max-width: 18ch;
}
/* phones: 40px. The kit's 48–80px H1 range is a desktop range; at 48px on a 342px column the
   long words nearly overflow and the primary action drops below the fold (measured 2026-10-15). */
@media (max-width: 600px) { .subhero h1 { font-size: 2.5rem; } }
.subhero-w.center h1 { margin-left: auto; margin-right: auto; }
.subhero h1 em { font-weight: inherit; color: var(--crimson-bright); }
/* The kit deck (one plain Medium line under the H1), not a second caps label: one
   label per section, and small red caps over the hero art failed AA (LB-03). */
.subhero-sub {
  font-family: var(--font); font-size: var(--deck-size); font-weight: 500; line-height: var(--deck-lh);
  letter-spacing: 0; text-transform: none; color: var(--linen-mute); 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: var(--s-9) 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); 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-radius: var(--r); padding: var(--s-5); font-family: var(--font); font-size: var(--body-sm);
  line-height: var(--body-sm-lh); color: var(--linen-mute);
}
/* the card's label is the kit eyebrow: Linen Soft with the crimson dash (Crimson Bright fails AA on Obsidian) */
.pain-list .pli b { display: flex; align-items: center; gap: 12px; color: var(--linen-soft); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; margin-bottom: 12px; }
.pain-list .pli b::before { content: ''; flex: none; width: 18px; height: 1px; background: var(--crimson); }

/* ─── 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);
}
.deliv-num { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.deliv-num::before { content: ''; flex: none; width: 18px; height: 1px; background: var(--crimson); }
.deliv h3 { font-family: var(--font); font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); letter-spacing: var(--h3-ls); color: var(--linen); margin-bottom: 10px; }
.deliv p { font-family: var(--font); font-size: var(--body-sm); line-height: var(--body-sm-lh); 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); }
.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(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1; color: var(--crimson); letter-spacing: var(--numeral-ls); font-variant-numeric: tabular-nums; }
.step-dur { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-top: 8px; }
.step-body h3 { font-family: var(--font); font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); color: var(--linen); margin-bottom: 12px; }
.step-body p { font-family: var(--font); font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); margin-bottom: 14px; }
/* the take-away line: no accent stripe, weight carries it */
.step-take { font-family: var(--font); font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
.step-take b { color: var(--linen); 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: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); color: var(--linen); margin-bottom: 8px; }
.channel p { font-family: var(--font); font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }

/* ─── TERMINAL / LOG MOCK (Iris intel, analytics proof) ────────────────────
   A depicted screen, so it may keep the system monospace (ruling 2026-10-15). */
.terminal { background: var(--void); border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--obsidian); 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: var(--eyebrow-size); 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-bright); }
.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: none; }

/* ─── 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); }
.agent-card h3 { font-family: var(--font); font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); color: var(--linen); }
.agent-role { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin: 4px 0 12px; }
.agent-card p { font-family: var(--font); font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }

/* ─── 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);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-press) var(--ease);
}
@media (hover: hover) { .cross-link:hover { border-color: var(--crimson); } }
a.cross-link:active { transform: scale(var(--press-scale)); }
.cross-link .cl-label { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); }
.cross-link .cl-name { font-family: var(--font); font-size: var(--h3-size); font-weight: 800; line-height: var(--h3-lh); letter-spacing: var(--h2-ls); text-transform: uppercase; color: var(--linen); }
.cross-link .cl-name em { font-weight: inherit; color: var(--crimson-bright); }

/* ─── 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: var(--s-9) 56px; } }
.cta-band-w { max-width: 760px; margin: 0 auto; position: relative; z-index: 5; }
/* H2 · the closing section's opening heading */
.cta-band h2 { font-family: var(--font); font-weight: 800; text-transform: uppercase; font-size: var(--h2-open-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); color: var(--linen); margin-bottom: var(--s-5); }
.cta-band h2 em { font-weight: inherit; color: var(--crimson-bright); }
.cta-band h2 { text-wrap: balance; }
.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: var(--body-size); line-height: var(--body-lh); margin-bottom: 18px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { font-size: var(--body-size); line-height: var(--body-lh); 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: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); 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-fast) var(--ease); }
@media (hover: hover) { .post-card:hover { border-color: var(--line3); } }
.post-card-body { padding: var(--s-5); }
/* card label = kit eyebrow in Linen Soft with the crimson dash (Crimson Bright fails AA on Obsidian) */
.post-tag { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-bottom: 10px; }
.post-tag::before { content: ''; flex: none; width: 18px; height: 1px; background: var(--crimson); }
.post-card h3 { font-family: var(--font); font-size: var(--h3-size); font-weight: 700; color: var(--linen); line-height: var(--h3-lh); margin-bottom: 10px; }
.post-card p { font-family: var(--font); font-size: var(--body-sm); line-height: var(--body-sm-lh); 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: 900; line-height: 1; color: var(--linen); letter-spacing: var(--numeral-ls); }
.fourohfour .big em { color: var(--crimson-bright); }
/* the copy sits above the absolutely positioned fresco + scrim (it used to ride on the reveal's transform for this) */
.fourohfour > :not(.subhero-media) { position: relative; z-index: 5; }

/* ─── 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: var(--void); }
.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; }

/* Per-page crop + scrim overrides.
   The defaults above (object-position 70% 45% + a left-heavy 90deg scrim) are
   tuned for the LEFT-ALIGNED subheroes (insights, solutions, services/*). Two
   pages don't match that shape, so they opt out by attribute rather than by
   page-specific selectors:
     data-crop="center"  — the subject sits dead centre of the frame, so a 70%
                           horizontal bias pushes it off-screen (privacy, terms).
     data-scrim="center" — the page's copy is centred, so a left-heavy gradient
                           darkens empty space and leaves the text column bright
                           against the image (404). */
.subhero-media[data-crop="center"] img { object-position: 50% 45%; }

/* data-lift — for art that is mostly black with a small bright subject.
   The default 0.55 opacity assumes a big, bright, frame-filling image; a sparse
   one disappears under it. Measured on paid-advertising: 0.55 image x a 0.92
   centre scrim left about 4% of the picture showing. */
.subhero-media[data-lift] img { opacity: 0.78; }
@media (max-width: 999px) { .subhero-media[data-lift] img { opacity: 0.6; } }

.subhero-media[data-scrim="center"] .subhero-scrim {
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(10,11,16,0.84) 0%, rgba(10,11,16,0.66) 45%, rgba(10,11,16,0.26) 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%);
}
@media (max-width: 999px) {
  .subhero-media[data-crop="center"] img { object-position: 50% 45%; }
}
@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 var(--line2); background: var(--void);
}
.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 var(--eyebrow-size)/1.6 var(--font); letter-spacing: var(--eyebrow-ls); 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); }

/* ═══ sections.css ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · SECTION PATTERNS (visual sweep, 2026-10-09)

   Band structure borrowed (layout only) from the Legacy site build:
   head (eyebrow → H2 → lead) → body → one proof object (diagram, timeline,
   comparison, icon cards, statement). Bands alternate tone; the same shape
   never repeats twice in a row; stats, statements and the final CTA centre.

   Mobile-first. Brand: dark System A, Montserrat, crimson as the only accent,
   8–10px radii, no emoji.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── split head: H2 left, lead right (desktop) ───────────────────────────── */
.split-head { display: grid; gap: 14px; margin-bottom: 36px; }
.split-head .h-section { margin: 0; }
.split-head .lede { margin: 0; }
@media (min-width: 960px) {
  .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 48px; }
}

/* centred head variant */
.sec-head.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head.is-center .eyebrow { justify-content: center; }
.sec-head.is-center .h-section,
.sec-head.is-center .lede { margin-left: auto; margin-right: auto; }

/* ── split with a proof object beside the head ───────────────────────────── */
.proof-split { display: grid; gap: 36px; align-items: center; }
.proof-split .sec-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .proof-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .proof-split.media-left > :first-child { order: 2; }
}

/* ── 7 + 1 system diagram ────────────────────────────────────────────────── */
.sys-diagram {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-card);
}
.sys-tile {
  aspect-ratio: 1 / 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 9px; border: 1px solid var(--line2); border-radius: var(--r-sm);
  background: rgba(237, 231, 218, 0.025);
}
.sys-tile svg { width: 20px; height: 20px; color: var(--linen-soft); }
.sys-tile .t { font-size: var(--eyebrow-size); font-weight: 700; line-height: 1.15; color: var(--linen); letter-spacing: 0; }
.sys-tile .n { font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--button-ls); color: var(--linen-soft); font-variant-numeric: tabular-nums; }
/* the one featured tile: a Crimson edge and nothing else */
.sys-tile.is-eighth { border-color: var(--crimson); }
.sys-tile.is-eighth svg, .sys-tile.is-eighth .n { color: var(--linen); }
.sys-cap {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  padding-top: 8px; font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--button-ls); text-transform: uppercase; color: var(--linen-soft);
}
.sys-cap b { color: var(--linen); font-weight: 700; }
/* phones: two columns of icon + label rows, so no label ever breaks mid-word */
@media (max-width: 479px) {
  .sys-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-tile { aspect-ratio: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 11px 12px; }
  .sys-tile > div { display: flex; align-items: baseline; gap: 8px; }
  .sys-tile .t { font-size: var(--caption-size); }
}
@media (min-width: 480px) {
  .sys-diagram { gap: 10px; padding: 18px; }
  .sys-tile { padding: 12px; }
  .sys-tile svg { width: 22px; height: 22px; }
  .sys-tile .t { font-size: var(--caption-size); }
}

/* ── ruled three-up statements (cards → rules) ───────────────────────────── */
.ruled3 { display: grid; gap: 26px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line2); }
.ruled3 > div { position: relative; }
.ruled3 .k { display: block; margin-bottom: 10px; font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--button-ls); color: var(--crimson-bright); font-variant-numeric: tabular-nums; }
/* on an Obsidian band small Crimson Bright fails AA (4.40:1), so the number goes Linen Soft there */
.sec.alt .ruled3 .k, .sec.alt .num-list > li::before { color: var(--linen-soft); }
.ruled3 h3 { margin: 0 0 8px; font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); color: var(--linen); }
.ruled3 p { margin: 0; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
@media (min-width: 900px) {
  .ruled3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ruled3 > div { padding: 2px 34px; }
  .ruled3 > div:first-child { padding-left: 0; }
  .ruled3 > div:last-child { padding-right: 0; }
  .ruled3 > div + div::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: var(--line3);
  }
}

/* .deliv-ico and .card-ico (icon tiles) retired in design v1: the title names the item (anti-slop tell 6). */

/* ── statement bar: one line the page already says + the action, full width.
   (Not a testimonial strip — there are no cleared client quotes yet.) ─────── */
.statement-bar {
  position: relative; overflow: hidden;
  padding: 52px 24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}
.statement-bar-w { max-width: var(--content-w); margin: 0 auto; display: grid; gap: 26px; align-items: center; }
.statement-bar .sb-line { margin: 0; }
.statement-bar .sb-line {
  margin: 0; max-width: 30ch;
  font-size: var(--h2-size); font-weight: 800; line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls); text-transform: uppercase; color: var(--linen);
}
.statement-bar .sb-line em { font-style: normal; color: var(--crimson-bright); }
.statement-bar .sb-sub { margin: 14px 0 0; max-width: var(--measure); font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
.statement-bar .sb-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* same gutters as .sec, so a left-aligned bar lines up with the bands around it */
@media (min-width: 768px) { .statement-bar { padding: 60px 56px; } }
@media (min-width: 960px) { .statement-bar-w { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }
@media (min-width: 1100px) { .statement-bar { padding: 64px 96px; } }

/* ── 3-stop timeline: vertical rail on phones, horizontal on desktop ─────── */
.timeline3 { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline3 > li { position: relative; padding: 0 0 34px 60px; }
.timeline3 > li:last-child { padding-bottom: 0; }
.timeline3 > li::before {
  content: ''; position: absolute; left: 20px; top: 46px; bottom: 6px; width: 2px;
  background: var(--crimson);
}
.timeline3 > li:last-child::before { display: none; }
.tl-node {
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--crimson); color: var(--linen);
  font-size: var(--caption-size); font-weight: 800; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tl-when { margin: 9px 0 8px; font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); }
.timeline3 h3 { margin: 0 0 10px; font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); color: var(--linen); }
.timeline3 p { margin: 0 0 12px; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
.timeline3 .step-take { margin-bottom: 0; }
@media (min-width: 960px) {
  .timeline3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .timeline3 > li { padding: 70px 0 0; }
  .timeline3 > li::before {
    left: 58px; right: -30px; top: 20px; bottom: auto; width: auto; height: 2px;
    background: var(--crimson);
  }
  .tl-when { margin-top: 0; }
}

/* ── two-column comparison ───────────────────────────────────────────────── */
.contrast { display: grid; gap: 14px; }
.contrast-col { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-card); }
.contrast-col.is-yes { border-color: var(--crimson); }
.contrast-col h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); }
.contrast-col h3::before { content: ''; flex: none; width: 18px; height: 1px; background: var(--crimson); }
.contrast-col.is-no h3::before { background: var(--line3); }
.contrast ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.contrast li { position: relative; padding-left: 36px; }
.contrast li b { display: block; margin-bottom: 4px; font-size: var(--body-sm); font-weight: 700; line-height: 1.35; color: var(--linen); }
.contrast li span { display: block; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
.contrast-col.is-yes li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 6px;
  background: var(--crimson) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE7DA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.contrast-col.is-no li::before {
  content: ''; position: absolute; left: 3px; top: 11px; width: 15px; height: 2px; background: var(--linen-soft);
}
@media (min-width: 860px) {
  .contrast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 2px solid var(--line3); }
  .contrast-col { border: 0; border-radius: 0; padding: var(--s-6); }
  .contrast-col.is-yes { border: 0; }
  .contrast-col.is-no { border-left: 1px solid var(--line); background: transparent; }
}

/* phones: the shared deliverable cards were padded for desktop */
@media (max-width: 599px) {
  .deliv { padding: 24px 20px; }
}

/* ── media split: copy beside an image (add .media-left to swap sides) ───── */
.media-frame { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line2); background: var(--void); }
.media-frame img { display: block; width: 100%; height: auto; }
.media-frame img[src$="Sacred-Eye-Linen.svg"] { padding: 14%; }   /* the kit eye on Void, with its clear space */
.media-frame figcaption { padding: 10px 14px; border-top: 1px solid var(--line); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); }

/* ── flow diagram: A → B → C (vertical on phones) ────────────────────────── */
.flow-diagram { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; counter-reset: flow; }
.flow-diagram > li {
  position: relative; counter-increment: flow;
  padding: 18px 18px 18px 64px; border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--bg-card);
}
.flow-diagram > li::before {
  content: counter(flow, decimal-leading-zero); position: absolute; left: 16px; top: 16px;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--crimson-soft); border: 1px solid rgba(196, 18, 48, 0.4);
  font-size: var(--eyebrow-size); font-weight: 800; color: var(--linen); font-variant-numeric: tabular-nums;
}
.flow-diagram > li + li::after {
  content: ''; position: absolute; left: 32px; top: -34px; width: 2px; height: 34px;
  background: var(--crimson);
}
.flow-diagram b { display: block; margin-bottom: 4px; font-size: var(--body-sm); font-weight: 700; color: var(--linen); }
.flow-diagram span { display: block; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
.flow-diagram.is-loop > li:last-child { border-color: var(--crimson); }
.flow-note { margin-top: 16px; font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); }
.flow-note svg { color: var(--crimson-bright); }   /* the loop icon keeps the accent; the words stay readable on Obsidian */
@media (min-width: 960px) {
  .flow-diagram { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 36px; }
  .flow-diagram > li { padding: 62px 20px 22px; }
  .flow-diagram > li::before { left: 20px; top: 18px; }
  .flow-diagram > li + li::after { left: -36px; top: 34px; width: 36px; height: 2px; background: var(--crimson); }
}

/* ── numbered ruled list: number | text rows ─────────────────────────────── */
.num-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line3); counter-reset: nl; }
.num-list > li { counter-increment: nl; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.num-list > li::before { content: counter(nl, decimal-leading-zero); font-size: var(--caption-size); font-weight: 800; color: var(--crimson-bright); padding-top: 3px; font-variant-numeric: tabular-nums; }
.num-list b { display: block; margin-bottom: 4px; font-size: var(--body-size); font-weight: 700; color: var(--linen); }
.num-list span, .num-list p { display: block; grid-column: 2; margin: 0; font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--linen-mute); }
@media (min-width: 900px) {
  .num-list > li { grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 28px; align-items: baseline; padding: 24px 0; }
  .num-list b { margin: 0; }
  .num-list span, .num-list p { grid-column: 3; }
}

/* ── chips: outlined labels ──────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip-row > li, .chip-row > span {
  padding: 9px 14px; border: 1px solid var(--line2); border-radius: var(--r-sm);
  font-size: var(--caption-size); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--linen-mute); background: rgba(237, 231, 218, 0.02);
}
.chip-row > .is-on { border-color: var(--crimson); color: var(--linen); background: var(--crimson-soft); }

/* ── stat band: centred figures (ONLY figures the page already states) ────── */
.stat-band { display: grid; gap: 30px; padding: 44px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); text-align: center; }
.stat-band > div { position: relative; }
.stat-band .v { display: block; font-size: clamp(2.125rem, 4.4vw, 3.5rem); font-weight: 900; line-height: 1; color: var(--linen); letter-spacing: var(--numeral-ls); font-variant-numeric: tabular-nums; }
.stat-band .v em { font-style: normal; color: var(--crimson-bright); }
.stat-band .l { display: block; margin-top: 12px; font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); }
@media (min-width: 860px) {
  .stat-band { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .stat-band > div + div::before { content: ''; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: var(--line3); }
}

/* phone numbers never split across lines. Buttons are excluded: a whole button label
   held on one line overflows a 390px phone (the number inside keeps its own .nw span). */
a[href^="tel:"]:not(.btn), a[href^="sms:"]:not(.btn), .mono b { white-space: nowrap; }

/* ═══ chrome.css ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   SACRED STUDIOS · SHARED CHROME
   Top sticky nav · Footer · Atmospheric layer (hero star field)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ATMOSPHERIC LAYERS ─────────────────────────────────────────────────── */
/* The star field is part of the page background. It sits at a NEGATIVE z-index, so
   every piece of content (text, cards, images, video, bands with their own fill)
   paints above it and nothing on the page can ever be overlapped by a star. For a
   negative layer to be visible the <body> must not paint its own fill over it, so
   the page colour lives on <html> and <body> is transparent. */
html { background: var(--bg); }
body { background: transparent; }
/* Brand ruling 2: atmosphere on hero moments only. The canvas covers the first screen and scrolls
   away with the hero; site.js stops the loop once it is off screen. */
#stars-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: var(--z-stars);
  opacity: 0.85;
}


/* ─── TOP NAV (fixed · 78px) ─────────────────────────────────────────────────
   Floating chrome is a material: translucent Void with the content scrolling
   beneath it, at the top and when scrolled (tokens: --chrome-bg, --chrome-blur;
   reduced transparency swaps both for solid Void in tokens.css). */
#topNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--chrome-bg);
  -webkit-backdrop-filter: var(--chrome-blur);
  backdrop-filter: var(--chrome-blur);
  border-bottom: 1px solid transparent;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#topNav.scrolled {
  background: var(--chrome-bg);
  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-links {
  display: none;
  align-items: center;
  gap: 32px;
}
@media (min-width: 1220px) {
  .nav-links { display: flex; }
}
/* Multi-word labels ("Iris Intel", "Custom Builds") must never break across two lines.
   Measured 2026-10-15 at the 12px nav type with eight links ("Custom Builds") and the
   "AI Assessment" button: the bar needs ~1151px at a 16px link gap (40+40 pad, 203
   logo, 548 of link text + 7 gaps of 16, 159 button, 2 x 24 gaps). The desktop nav
   starts at 1220px (the copy branch's choice), which leaves ~70px of air and keeps
   1180/1194px tablets in landscape on the burger and its 44px targets. Keep the
   1220px queries (links, CTA, burger, menu) in step. */
.nav-link { white-space: nowrap; }
@media (min-width: 1220px) and (max-width: 1339px) {
  .nav-links { gap: 16px; }
}
@media (min-width: 1340px) and (max-width: 1439px) {
  .nav-links { gap: 24px; }
}
/* Button role at the kit's 12px end (Button: Bold caps, +0.1em, 12–13px), so the
   full row fits beside the "AI Assessment" button. */
.nav-link {
  font-family: var(--font);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--button-ls);
  text-transform: uppercase;
  color: var(--linen);
  transition: color var(--t-fast) var(--ease);
  position: relative;
  padding-bottom: 4px;
}
@media (hover: hover) { .nav-link:hover { color: var(--crimson-bright); } }
.nav-link.active { color: var(--linen); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--crimson-bright);
}

.nav-cta {
  display: none;
  align-items: center;
  gap: 16px;
}
@media (min-width: 1220px) {
  .nav-cta { display: flex; }
}
/* Desktop "AI Assessment": a hairline ghost, so the hero CTA is the only
   Crimson fill above the fold (ruling 2026-10-15). The mobile-menu CTA stays Crimson. */
.nav-btn {
  font-family: var(--font);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--button-ls);
  text-transform: uppercase;
  color: var(--linen);
  background: transparent;
  border: 1px solid var(--line3);
  box-shadow: none;
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
@media (hover: hover) { .nav-btn:hover { border-color: var(--crimson-bright); background: transparent; } }

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

/* MOBILE MENU — opacity + a short slide (transform only), the same path in and
   out; scrolls inside itself when the viewport is shorter than the list. */
.nav-mobile {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--void);
  border-bottom: 1px solid var(--line2);
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
  z-index: 79;
}
.nav-mobile.open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--t-fast) var(--ease), transform 240ms var(--ease), visibility 0s;
}
.nav-mobile-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile a {
  font-family: var(--font);
  font-size: var(--button-size);
  font-weight: 700;
  letter-spacing: var(--button-ls);
  text-transform: uppercase;
  color: var(--linen-mute);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav-mobile a[aria-current="page"] {
  color: var(--linen);
  text-decoration: underline 2px var(--crimson-bright);
  text-underline-offset: 6px;
}
.nav-mobile a.cta {
  background: var(--crimson);
  color: var(--linen);
  text-align: center;
  border-radius: var(--r-sm);
  border: none;
  margin-top: 12px;
  padding: 16px;
}
@media (hover: hover) {
  .nav-mobile a:hover { color: var(--linen); }
  .nav-mobile a.cta:hover { background: var(--crimson-deep); color: var(--linen); }
}

/* 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;
  /* Was --bg-deep, which tokens.css reserves for the hero atmosphere ("hero
     only"). Using it here made the footer read as a separate, off-brand slab.
     Match the page background. */
  background: var(--bg);
}
@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 {
  display: inline-block;
  margin-bottom: 14px;
  line-height: 0;
}
/* Brand Kit 2B (wordmark + tagline). 300px file = 244px of art, over the 200px minimum. */
.footer-mark-logo { display: block; width: 300px; height: auto; max-width: none; margin: -28px 0 -14px -28px; }
/* On the 24px phone gutter, -28px cut 4px into the clear space the file carries:
   put the file edge on the trim instead. */
@media (max-width: 767px) { .footer-mark-logo { margin-left: -24px; } }
.footer-desc {
  font-family: var(--font);
  font-size: var(--caption-size);
  color: var(--linen-mute);
  line-height: 1.6;
  letter-spacing: var(--caption-ls);
  font-weight: 500;
  max-width: 300px;
  margin-bottom: 18px;
}

.footer-soc {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.footer-soc a {
  width: var(--tap);
  height: var(--tap);
  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: var(--caption-size);
  font-weight: 700;
  transition: transform var(--t-press) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.footer-soc a:active { transform: scale(var(--press-scale)); }
@media (hover: hover) {
  .footer-soc a:hover { border-color: var(--crimson); color: var(--linen); }
}

.footer-col h3 {
  font: 600 var(--eyebrow-size)/1.6 var(--font);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--linen-soft);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-family: var(--font);
  font-size: var(--caption-size);
  letter-spacing: var(--caption-ls);
  color: var(--linen-mute);
  margin-bottom: 10px;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .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: var(--caption-size);
  font-weight: 500;
  letter-spacing: var(--caption-ls);
  color: var(--linen-soft);
}
.footer-bot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--crimson-bright); font-weight: 700; }

/* ── NAV BRAND LOGO (replaces the text wordmark) ──────────────────────────── */
/* Brand Kit 1D (horizontal lockup, no tagline). The file carries its own clear space, so the
   negative margin puts the art itself on the page gutter. */
.nav-mark-logo { height: 76px; width: auto; max-width: none; display: block; margin-left: -16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   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; }
  /* The third label goes on its own line, so it must not start with the "·" separator. */
  .hairline span:nth-of-type(3) { flex-basis: 100%; }
  .hairline span:nth-of-type(3)::before { display: none; }
  /* Eyebrows wrap as text with the crimson rule kept inline with the first word
     (as flex items the rule ended up alone on its own line). */
  .eyebrow { display: block; line-height: 1.7; }
  .eyebrow::before, .eyebrow.center::after { display: inline-block; vertical-align: middle; }
  .eyebrow::before { margin-right: 12px; }
  .eyebrow.center::after { margin-left: 12px; }
  .eyebrow.center { text-wrap: balance; }   /* keep each dash with its first/last word on narrow lines */
  /* Wrapped button labels need real leading (the base .btn has line-height: 1). */
  .btn { line-height: 1.35; }
  /* Footer links: 44px tap targets. */
  .footer-col a { padding: 12px 0; margin-bottom: 0; }
  /* 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: var(--eyebrow-size); }
  /* Multi-step form nav wraps instead of squeezing the submit button. */
  .ssf-steps-nav { flex-wrap: wrap; }
}

/* press feedback for links in the chrome (buttons scale; links dim on pointer-down) */
.nav-mark:active, .nav-link:active, .nav-mobile a:active, .footer-mark:active, .footer-col a:active,
.footer-bot a:active, .lp-foot a:active, .work-link:active, .legal-doc .chip-row a:active,
.ins-crumbs a:active, a.ins-cat:active, :is(p, .prose-meta, .fn-box-k) a:not([class]):active { opacity: 0.72; }