/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  font-size: clamp(14px, calc(.5rem + .6vw), 18px);

  --void: #070d1a;
  --abyss: #0a1628;
  --obsidian: #101c34;
  --slate-glass: rgba(16, 28, 52, 0.55);
  --frost-glass: rgba(10, 16, 32, 0.72);
  --smoke-glass: rgba(8, 14, 28, 0.92);

  --sapphire: #0131db;
  --ocean: #018ccd;
  --cyan: #00e8e6;
  --depths: #0080b3;
  --marine: #0183b7;
  --teal: #00c9a7;
  --rose: #ff6ba8;

  --frost: #e8f4ff;
  --mist: #7f9dbc;
  --ice: #fff;

  --border-glow: rgba(0, 229, 255, 0.14);
  --border-bright: rgba(0, 229, 255, 0.38);
  --border-faint: rgba(0, 229, 255, 0.06);

  --gradient: linear-gradient(135deg, #0131db 0%, #018ccd 30%, #00e8e6 50%, #0080b3 75%, #00c9a7 100%);
  --grad-text: linear-gradient(90deg, #018ccd, #00e8e6, #00c9a7);
  --grad-glow: radial-gradient(ellipse at center, rgba(0, 232, 230, 0.12) 0%, transparent 70%);

  --text-hero: clamp(52px, 8.5vw, 100px);
  --text-display: clamp(40px, 6vw, 80px);
  --text-title: clamp(32px, 4.5vw, 56px);
  --text-heading: clamp(24px, 3vw, 36px);
  --text-stat: clamp(48px, 7vw, 96px);
  --text-body: clamp(16px, 2vw, 19px);
  --text-small: clamp(14px, 1.6vw, 16px);
  --text-eyebrow: clamp(10px, 1.2vw, 11px);

  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  background: var(--void);
  color: var(--frost);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

::selection {
  background: rgba(0, 232, 230, 0.25);
  color: var(--ice);
}

/* ── Brand Splash (Screen 1) ─────────────────────────────────────────── */
.section_brand-splash {
  position: sticky;
  top: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #070d1a;
}

.brand-splash_logo {
  width: clamp(180px, 45vw, 800px);   /* v48: 50% of original clamp(360px,90vw,1600px) — Matt: 30% too small, 70% too large. Breakaway auto-follows (samples offsetWidth). */
  height: auto;
  max-width: 100%;
  position: relative;
  z-index: 2;
  /* v4.5.17: hide at first paint to prevent FOUC flash on cold-cache
     loads. GSAP's intro timeline fades this in at 3.4s — previously the
     browser painted the logo visible, then JS ran and hid it, causing
     a brief blink before the animation began. */
  opacity: 0;
}

.brand-splash_canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* v47: service strip under the brand-splash logo — "what we do" (AI Consulting ·
   AI Enablement · AI Engineering). Fades in with the logo (entrance timeline)
   and dissolves with it on scroll (opacity mirrored in the render loop). */
.v5-svc-strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(14px, 1.6vw, 26px);
  display: flex;
  flex-wrap: wrap;   /* v134.1: lets the ZERO HALLUCINATIONS stamp take its own line below (it was riding the flex row to the right of the services - Matt: "it should just be sitting underneath") */
  align-items: center;
  justify-content: center;
  gap: 0 clamp(14px, 1.5vw, 26px);           /* v48 column gap kept; row gap 0 - the stamp brings its own margin */
  font-size: clamp(13px, 1.45vw, 20px);    /* v48: scaled up to match the larger logo */
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(150, 200, 230, 0.85);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;   /* hidden at first paint; entrance timeline fades it in */
}
.v5-svc-strip i {
  font-style: normal;
  opacity: 0.5;
  color: rgba(0, 232, 230, 0.9);
}

/* v56: MOBILE — hide the dev panels on phones (a visitor must never see the
   REST-FRAME TUNER or the variant switcher) and stop the service strip overflowing
   the viewport (white-space:nowrap + 0.24em tracking made it ~487px → ~49px of
   horizontal scroll on a phone). Mobile-scoped; desktop is untouched. */
@media (max-width: 760px) {
  #v5-resttune, #v5-switcher { display: none !important; }
  .v5-svc-strip {
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.35em 0.8em;
    font-size: 11px;
    letter-spacing: 0.14em;
    max-width: 90vw;
  }
}

/* ── Velocity-comet scroll indicator (replaces old "SCROLL" text) ───
   A vertical rail with a cyan comet block that accelerates, stretches
   into a comet tail at peak velocity, then decelerates into a block
   and exits. R—K pattern, restyled to brand. */
.brand-splash_scroll-hint {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 7em;
  background: rgba(0, 232, 230, 0.22);
  overflow: hidden;
  z-index: 2;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  pointer-events: auto;
}
.brand-splash_scroll-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 1.8em;
  background: linear-gradient(
    to bottom,
    rgba(0, 232, 230, 0.0) 0%,
    rgba(0, 232, 230, 0.85) 45%,
    rgba(255, 107, 168, 0.55) 92%,
    rgba(255, 107, 168, 0.0) 100%
  );
  box-shadow:
    0 0 6px rgba(0, 232, 230, 0.65),
    0 0 14px rgba(0, 232, 230, 0.35);
  opacity: 0;
  clip-path: polygon(22% 0%, 78% 0%, 78% 100%, 22% 100%);
  animation: sailsy-scroll-comet 2.8s cubic-bezier(0.7, 0.05, 0.13, 1) infinite;
  animation-delay: 4s;
  pointer-events: none;
  will-change: transform, opacity, clip-path;
  transform: translate(-50%, -180%) scaleY(0.8);
}
@keyframes sailsy-scroll-comet {
  0% {
    transform: translate(-50%, -180%) scaleY(0.8);
    opacity: 0;
    clip-path: polygon(22% 0%, 78% 0%, 78% 100%, 22% 100%);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -120%) scaleY(0.95);
    clip-path: polygon(18% 0%, 82% 0%, 82% 100%, 18% 100%);
  }
  40% {
    transform: translate(-50%, 170%) scaleY(1.35);
    clip-path: polygon(22% 0%, 78% 0%, 92% 32%, 86% 100%, 14% 100%, 8% 32%);
  }
  65% {
    transform: translate(-50%, 320%) scaleY(2);
    clip-path: polygon(28% 0%, 72% 0%, 92% 20%, 84% 100%, 16% 100%, 8% 20%);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 560%) scaleY(1);
    opacity: 1;
    clip-path: polygon(16% 0%, 84% 0%, 84% 100%, 16% 100%);
  }
  100% {
    transform: translate(-50%, 620%) scaleY(0.5);
    opacity: 0;
    clip-path: polygon(22% 0%, 78% 0%, 78% 100%, 22% 100%);
  }
}

/* ── v4.4: Full-bleed wrappers ────────────────────────────────────────
   The three rebuilt sections need zero horizontal boxing. Kill any
   Webflow-inherited max-width / padding on the section elements and
   let the inner .v5-* wrappers handle their own layout. */
.section_approach,
.section_proof,
.section_about {
  width: 100vw;
  max-width: 100vw;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.section_approach::before { display: none !important; }
.section_approach > *:not(.v5-approach-wrap),
.section_proof    > *:not(.v5-results-wrap),
.section_about    > *:not(.v5-wi-sticky) { display: none !important; }

/* v40: WHO I AM — swoop-into-the-hole beat (text reads in front of the parked hole, then is consumed) */
.section_about.v5-wi-section { min-height: 320vh; overflow: visible; z-index: 3; }
.v5-wi-sticky { position: sticky; top: 0; height: 100vh; width: 100vw; overflow: visible; }
.v5-wi-intro { position: absolute; left: 6vw; top: 15vh; max-width: 36vw; z-index: 30; pointer-events: none; }
.v5-wi-tag { font-size: 12px; letter-spacing: 0.4em; color: var(--cyan); text-transform: uppercase; margin-bottom: 1.4rem; }
.v5-wi-h2 { font-size: clamp(26px, 3.0vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #f0f8ff; text-shadow: 0 2px 30px rgba(0,0,0,0.75); margin: 0 0 1.3rem; }
.v5-wi-bio { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: #cfe4f0; text-shadow: 0 1px 16px rgba(0,0,0,0.85); max-width: 36ch; }
.v5-wi-foot { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 2rem; font-size: 12px; letter-spacing: 0.05em; color: var(--frost); }
.v5-wi-foot span { opacity: 0.78; text-shadow: 0 1px 10px rgba(0,0,0,0.85); }
.v5-wi-swoop { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
.v5-wi-line { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity, filter;
  font-size: clamp(30px, 3.8vw, 58px); font-weight: 800; letter-spacing: -0.03em; color: #eafcff;
  text-shadow: 0 2px 26px rgba(0,0,0,0.9), 0 0 34px rgba(0,232,230,0.4); }

/* ── v5 Section 3: WHAT I DO — horizontal pin-scroll ────────────────
   v4.4.2 BUG FIX: .v5-approach-wrap must NOT have a fixed height.
   ScrollTrigger injects a pin-spacer inside it that's (sticky_h +
   pin_duration) tall. If the wrap is locked to 100vh, the spacer is
   clipped and document flow never gets the extra scroll space — which
   means Results & About ScrollTriggers fire DURING the approach pin
   instead of after it. Let the wrap size to its pin-spacer child. */
.v5-approach-wrap {
  width: 100vw;
  position: relative;
}
.v5-approach-sticky {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.v5-approach-tag-global {
  position: absolute;
  /* v4.5.22: 4vh → 10vh. The Webflow nav (~60–80px tall) was sitting
     over the top of the pinned title because 4vh on a 1200px viewport
     is only ~48px. 10vh (~120px on desktop) gives clear headroom. */
  top: 10vh;
  left: 6vw;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
  pointer-events: none;
  /* v4.5.30: will-change promotes to GPU layer so the cohesive spring
     doesn't repaint during its 2.3s arc. No visual change. */
  will-change: transform;
}
.v5-approach-tag-global span {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-transform: uppercase;
}
.v5-approach-tag-global em {
  font-size: clamp(14px, 1.15vw, 18px);
  font-style: normal;
  color: var(--frost);
  opacity: 0.85;
  letter-spacing: -0.01em;
}
.v5-approach-track {
  display: flex;
  width: 300vw;
  height: 100vh;
  will-change: transform;
}
.v5-approach-panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  padding: 0 6vw;
  gap: 2vw;
  overflow: hidden;
}
.v5-approach-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.v5-approach-panel[data-color="cyan"]::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 35%, rgba(0, 232, 230, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(1, 140, 205, 0.14) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0, 232, 230, 0.04) 0%, rgba(8, 24, 42, 0.28) 100%);
}
.v5-approach-panel[data-color="rose"]::before {
  background:
    radial-gradient(ellipse 70% 60% at 85% 35%, rgba(255, 107, 168, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(255, 139, 189, 0.10) 0%, transparent 70%),
    linear-gradient(135deg, rgba(255, 107, 168, 0.04) 0%, rgba(26, 14, 32, 0.28) 100%);
}
.v5-approach-panel[data-color="teal"]::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 70%, rgba(0, 201, 167, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(0, 232, 230, 0.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0, 201, 167, 0.04) 0%, rgba(8, 24, 28, 0.28) 100%);
}
.v5-approach-num {
  font-size: clamp(140px, 22vw, 360px);
  font-weight: 100;
  line-height: 0.88;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
  font-feature-settings: "tnum";
  will-change: transform;
}
.v5-approach-panel[data-color="cyan"] .v5-approach-num {
  background: linear-gradient(135deg, #00e8e6 0%, #018ccd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-approach-panel[data-color="rose"] .v5-approach-num {
  background: linear-gradient(135deg, #ff6ba8 0%, #ff8bbd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-approach-panel[data-color="teal"] .v5-approach-num {
  background: linear-gradient(135deg, #00c9a7 0%, #00e8e6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-approach-content {
  position: relative;
  z-index: 1;
  max-width: 46vw;
}
.v5-approach-tag {
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 2vh;
  font-weight: 500;
}
.v5-approach-panel[data-color="rose"] .v5-approach-tag { color: #ff8bbd; }
.v5-approach-panel[data-color="teal"] .v5-approach-tag { color: var(--teal); }
.v5-approach-title {
  font-size: clamp(36px, 5.2vw, 88px);
  font-weight: 700;
  line-height: 0.95;
  margin-bottom: 3vh;
  letter-spacing: -0.025em;
  color: var(--ice);
}
.v5-approach-desc {
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.55;
  color: var(--frost);
  opacity: 0.82;
  max-width: 40vw;
  margin-bottom: 4vh;
}
.v5-approach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7vw;
}
.v5-approach-chip {
  padding: 0.55em 1.15em;
  border: 1px solid rgba(0, 232, 230, 0.24);
  border-radius: 999px;
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.04em;
  color: var(--frost);
  background: rgba(0, 232, 230, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease;
}
.v5-approach-chip:hover { transform: translateY(-2px); }
.v5-approach-panel[data-color="rose"] .v5-approach-chip {
  border-color: rgba(255, 139, 189, 0.28); background: rgba(255, 139, 189, 0.05);
}
.v5-approach-panel[data-color="teal"] .v5-approach-chip {
  border-color: rgba(0, 201, 167, 0.28); background: rgba(0, 201, 167, 0.05);
}

/* ── v10.0 SERVICE panels: Train · Enable · Build ────────────────────
   The dive lands on these. Same panel shell as the method tiles (so the
   depth-dive + dive-reveal machinery is untouched) but a richer layout:
   a big offering word, a descriptive subtitle + tagline, then three
   columns (what I do / deliverables / ideal for). */
.v5-svc-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none;   /* override the method 2-col grid */
  padding: 11vh 7vw;
  gap: 4.5vh;
}
.v5-svc-head {
  display: flex;
  align-items: baseline;
  gap: 2.4vw;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.v5-svc-word {
  font-size: clamp(54px, 8vw, 142px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.v5-svc-panel[data-color="cyan"] .v5-svc-word {
  background: linear-gradient(135deg, #00e8e6 0%, #018ccd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-svc-panel[data-color="rose"] .v5-svc-word {
  background: linear-gradient(135deg, #ff6ba8 0%, #ff8bbd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-svc-panel[data-color="teal"] .v5-svc-word {
  background: linear-gradient(135deg, #00c9a7 0%, #00e8e6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-svc-headtext { max-width: 54vw; }
.v5-svc-headtext .v5-approach-tag { margin-bottom: 1.1vh; }
.v5-svc-sub {
  font-size: clamp(20px, 2.05vw, 33px);
  font-weight: 600;
  color: var(--ice);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 1.1vh;
}
.v5-svc-tagline {
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.5;
  color: var(--frost);
  opacity: 0.82;
  max-width: 42vw;
  margin: 0;
}
.v5-svc-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.8vw;
  width: 100%;
  max-width: 1120px;
  position: relative;
  z-index: 1;
}
.v5-svc-col h4 {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.6vh;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.9vh;
}
.v5-svc-panel[data-color="rose"] .v5-svc-col h4 { color: #ff8bbd; }
.v5-svc-panel[data-color="teal"] .v5-svc-col h4 { color: var(--teal); }
.v5-svc-col ul { list-style: none; margin: 0; padding: 0; }
.v5-svc-col li {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.7;
  color: var(--frost);
  opacity: 0.9;
}
/* divider panel between the offer and the method */
.v5-svc-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: none;
  text-align: center;
}
.v5-svc-divinner { position: relative; z-index: 1; max-width: 720px; padding: 0 8vw; }
.v5-svc-divtitle {
  font-size: clamp(44px, 7vw, 108px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--ice);
  margin: 1.6vh 0;
}
.v5-svc-divsub { font-size: clamp(15px, 1.3vw, 20px); color: var(--frost); opacity: 0.8; margin: 0; }

.v5-approach-hint {
  position: absolute;
  bottom: 4vh;
  right: 6vw;
  font-size: 10px;
  letter-spacing: 0.55em;
  color: var(--mist);
  opacity: 0.55;
  z-index: 10;
  pointer-events: none;
  /* v4.5.30: GPU-promote for cohesive spring. */
  will-change: transform;
}
.v5-approach-hint::after {
  content: '\2192';
  margin-left: 1em;
  display: inline-block;
  animation: v5-hint-nudge 1.8s ease-in-out infinite;
}
@keyframes v5-hint-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(6px); opacity: 1; }
}
.v5-approach-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 10;
}
.v5-approach-progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00e8e6, #ff8bbd, #00c9a7);
  transform: scaleX(0);
  transform-origin: left;
}

/* ── v5 Section 4: RESULTS — scramble reel ─────────────────────────── */
.v5-results-wrap {
  padding: 14vh 0 10vh;
  position: relative;
}
.v5-results-header {
  padding: 0 6vw 10vh;
}
.v5-results-tag {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  margin-bottom: 2.5vh;
  font-weight: 500;
}
.v5-results-title {
  font-size: clamp(40px, 7vw, 120px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ice);
  margin-bottom: 3vh;
  max-width: 18ch;
}
.v5-results-title .v5-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.05em;
}
.v5-results-title .v5-letter {
  display: inline-block;
  will-change: transform, opacity;
}
.v5-results-desc {
  font-size: clamp(16px, 1.3vw, 21px);
  color: var(--frost);
  opacity: 0.7;
  max-width: 62ch;
  line-height: 1.5;
}
.v5-results-reel {
  display: flex;
  flex-direction: column;
}
.v5-results-row {
  width: 100vw;
  min-height: 68vh;
  display: grid;
  align-items: center;
  padding: 8vh 6vw;
  position: relative;
  gap: 4vw;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.v5-results-row[data-side="left"]  { grid-template-columns: 1.35fr 1fr; }
.v5-results-row[data-side="right"] { grid-template-columns: 1fr 1.35fr; }
.v5-results-row[data-side="right"] .v5-results-num-wrap { order: 2; justify-self: end; text-align: right; }
.v5-results-row[data-side="right"] .v5-results-meta     { order: 1; }
.v5-results-num-wrap {
  position: relative;
  padding: 2vh 0;
}
.v5-results-rule {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-glow);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
}
.v5-results-row[data-side="right"] .v5-results-rule { transform-origin: right; }
.v5-results-num {
  font-size: clamp(110px, 18vw, 300px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  white-space: nowrap;
  --glow-strength: 0.3;
}
/* ── v4.5.1: digit-roulette barrel-roll structure ────────────────── */
.v5-digit {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: top;
}
.v5-digit-inner {
  display: block;
  line-height: 1;
  will-change: transform, filter;
}
.v5-digit-char {
  display: block;
  height: 1em;
  line-height: 1;
}
.v5-digit-suffix {
  display: inline-block;
  line-height: 1;
  vertical-align: top;
  will-change: transform, opacity, filter;
}
/* Solid brand colour + glow (replaces gradient text so digit roll renders cleanly) */
.v5-results-row[data-color="cyan"] .v5-results-num {
  color: #00e8e6;
  text-shadow: 0 0 calc(40px * var(--glow-strength)) rgba(0, 232, 230, calc(0.45 * var(--glow-strength)));
}
.v5-results-row[data-color="rose"] .v5-results-num {
  color: #ff8bbd;
  text-shadow: 0 0 calc(40px * var(--glow-strength)) rgba(255, 139, 189, calc(0.45 * var(--glow-strength)));
}
.v5-results-row[data-color="teal"] .v5-results-num {
  color: #3fe3c0;
  text-shadow: 0 0 calc(40px * var(--glow-strength)) rgba(63, 227, 192, calc(0.45 * var(--glow-strength)));
}
.v5-results-label {
  font-size: clamp(20px, 2.1vw, 36px);
  font-weight: 600;
  color: var(--ice);
  margin-bottom: 2vh;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.v5-results-note {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--frost);
  opacity: 0.72;
  margin-bottom: 3vh;
  max-width: 48ch;
}
.v5-results-source {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist);
  opacity: 0.8;
  font-weight: 500;
}

/* ── v5 Section 5: WHO I AM — zoom-out + cloud + stats ─────────────── */
.v5-about-wrap {
  padding: 14vh 0 6vh;
}
.v5-about-hero {
  padding: 0 6vw 4vh;
  position: relative;
  overflow: hidden;
}
.v5-about-tag {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  margin-bottom: 4vh;
  font-weight: 500;
}
.v5-about-headline {
  font-size: clamp(72px, 16vw, 320px);
  font-weight: 100;
  line-height: 0.85;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, #e8f4ff 0%, #7f9dbc 35%, #00e8e6 75%, #ff8bbd 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  transform-origin: left center;
  will-change: transform;
}
.v5-about-body {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 6vw;
  padding: 10vh 6vw 8vh;
  align-items: start;
}
.v5-about-copy {
  max-width: 46ch;
}
.v5-about-sub {
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: 600;
  color: var(--ice);
  margin-bottom: 3vh;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.v5-about-bio {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--frost);
  opacity: 0.82;
}
/* ── v4.5: 3×3 numbered capability grid (replaces pill cloud) ─────── */
.v5-about-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 16em);     /* v4.5.3: THREE explicit rows, ALL 16em tall. Bulletproof uniform. */
  gap: 1.2vw;
  padding-top: 1vh;
  align-items: stretch;
}
.v5-about-caps > .v5-cap { height: 100%; align-self: stretch; }
.v5-cap {
  position: relative;
  padding: 2.2vw 2vw 2.4vw;
  background: rgba(10, 16, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .5s var(--ease-smooth), border-color .4s ease, background .4s ease;
  cursor: default;
  will-change: transform, opacity;
  overflow: hidden;
}
.v5-cap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform .6s var(--ease-smooth), opacity .4s ease;
}
.v5-cap:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(14, 22, 42, 0.55);
}
.v5-cap:hover::before { transform: scaleX(1); opacity: 0.7; }
.v5-cap[data-color="cyan"] { color: #00e8e6; }
.v5-cap[data-color="rose"] { color: #ff8bbd; }
.v5-cap[data-color="teal"] { color: #3fe3c0; }
.v5-cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.2vw;
}
.v5-cap-num {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: currentColor;
  font-variant-numeric: tabular-nums;
}
.v5-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  box-shadow: 0 0 10px currentColor;
}
.v5-cap-name {
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ice);
  margin-bottom: 1vw;
  line-height: 1.15;
}
.v5-cap-desc {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--frost);
  opacity: 0.72;
}

.v5-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.v5-about-stat {
  padding: 7vh 4vw;
  border-right: 1px solid var(--border-faint);
  position: relative;
  overflow: hidden;
  transition: background .4s ease;
}
.v5-about-stat:last-child { border-right: none; }
.v5-about-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.v5-about-stat[data-color="cyan"]::before { background: radial-gradient(circle at 30% 30%, rgba(0, 232, 230, 0.10), transparent 65%); }
.v5-about-stat[data-color="rose"]::before { background: radial-gradient(circle at 30% 30%, rgba(255, 139, 189, 0.08), transparent 65%); }
.v5-about-stat[data-color="teal"]::before { background: radial-gradient(circle at 30% 30%, rgba(0, 201, 167, 0.09), transparent 65%); }
.v5-about-stat:hover::before { opacity: 1; }
.v5-about-statnum {
  font-size: clamp(64px, 7.5vw, 140px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 2.5vh;
  font-variant-numeric: tabular-nums;
}
.v5-about-stat[data-color="cyan"] .v5-about-statnum {
  background: linear-gradient(135deg, #00e8e6, #018ccd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-about-stat[data-color="rose"] .v5-about-statnum {
  background: linear-gradient(135deg, #ff6ba8, #ff8bbd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-about-stat[data-color="teal"] .v5-about-statnum {
  background: linear-gradient(135deg, #00c9a7, #00e8e6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.v5-about-statlabel {
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 600;
  color: var(--ice);
  margin-bottom: 1.2vh;
  letter-spacing: -0.008em;
}
.v5-about-statdetail {
  font-size: clamp(12px, 0.95vw, 14px);
  color: var(--mist);
  opacity: 0.85;
  line-height: 1.55;
}

/* ── v4.4 mobile fallbacks for all three rebuilt sections ─────────── */
@media (max-width: 991px) {
  .v5-approach-wrap,
  .v5-approach-sticky { height: auto; }
  .v5-approach-track { flex-direction: column; width: 100vw; height: auto; }
  .v5-approach-panel {
    height: auto;
    min-height: 82vh;
    grid-template-columns: 1fr;
    padding: 9vh 6vw 7vh;
    gap: 3vh;
  }
  .v5-approach-content { max-width: 100%; }
  .v5-approach-desc    { max-width: 100%; }
  .v5-approach-num     { font-size: clamp(110px, 40vw, 220px); }
  .v5-approach-hint    { display: none; }
  .v5-approach-tag-global { position: static; padding: 4vh 6vw 0; }

  /* v10.0: service panels stack on mobile */
  .v5-svc-panel { min-height: auto; padding: 8vh 6vw; gap: 3.5vh; }
  .v5-svc-head { flex-direction: column; gap: 1.4vh; align-items: flex-start; }
  .v5-svc-word { font-size: clamp(48px, 16vw, 96px); }
  .v5-svc-headtext, .v5-svc-tagline { max-width: 100%; }
  .v5-svc-cols { grid-template-columns: 1fr; gap: 3.2vh; }
  .v5-svc-divider { min-height: 60vh; }

  .v5-results-row,
  .v5-results-row[data-side="left"],
  .v5-results-row[data-side="right"] {
    grid-template-columns: 1fr;
    gap: 3vh;
    min-height: auto;
    padding: 7vh 6vw;
  }
  .v5-results-row[data-side="right"] .v5-results-num-wrap { order: 1; justify-self: start; text-align: left; }
  .v5-results-row[data-side="right"] .v5-results-meta     { order: 2; }
  .v5-results-num { font-size: clamp(80px, 30vw, 160px); }

  .v5-about-body  { grid-template-columns: 1fr; gap: 5vh; padding: 6vh 6vw; }
  .v5-about-caps  { grid-template-columns: 1fr; gap: 2vh; }
  .v5-cap         { padding: 6vw 6vw 7vw; }
  .v5-about-stats { grid-template-columns: 1fr; }
  .v5-about-stat  {
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
    padding: 6vh 6vw;
  }
  .v5-about-stat:last-child { border-bottom: none; }
  .v5-about-headline { font-size: clamp(72px, 22vw, 180px); }
}

/* ── Kinetic scrub row opacities ──────────────────────────────────────── */
.ks-row:nth-child(1) .ks-track { opacity: .78; }
.ks-row:nth-child(2) .ks-track { opacity: .9;  }
.ks-row:nth-child(3) .ks-track { opacity: .72; }
.ks-row:nth-child(4) .ks-track { opacity: .95; }
.ks-row:nth-child(5) .ks-track { opacity: .7;  }
.ks-row:nth-child(6) .ks-track { opacity: .9;  }

/* ── "Where time is wasted" — backdrop + coloured rows ───────────────── */
/* Override Webflow's flat dark fill with a diagonal gradient plus two
   large soft radial glows (cyan top-left, rose bottom-right) and a
   subtle edge vignette to pull focus centre. */
.section_problem, section.section_problem.ks-section {
  background:
    radial-gradient(ellipse 65% 55% at 15% 20%, rgba(0, 232, 230, 0.22) 0%, rgba(0, 232, 230, 0) 60%),
    radial-gradient(ellipse 60% 50% at 88% 85%, rgba(255, 139, 189, 0.18) 0%, rgba(255, 139, 189, 0) 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(135deg, rgba(8,24,42,0.55) 0%, rgba(10,21,40,0.55) 45%, rgba(18,15,36,0.58) 75%, rgba(26,15,31,0.58) 100%)
    !important;
  position: relative;
}

/* Row text colours — cyan / teal / rose / ice, cycled. Applied via
   text fill-colour so the kinetic scrub remains crisp. */
.section_problem .ks-row:nth-child(1) .ks-text { color: #00e8e6; }  /* cyan     */
.section_problem .ks-row:nth-child(2) .ks-text { color: #dfefff; }  /* ice      */
.section_problem .ks-row:nth-child(3) .ks-text { color: #ff8bbd; }  /* rose     */
.section_problem .ks-row:nth-child(4) .ks-text { color: #00c9a7; }  /* teal     */
.section_problem .ks-row:nth-child(5) .ks-text { color: #dfefff; }  /* ice      */
.section_problem .ks-row:nth-child(6) .ks-text { color: #00e8e6; }  /* cyan     */

/* Separator dots pick up the row colour too */
.section_problem .ks-row:nth-child(1) .ks-sep { color: #00e8e6; }
.section_problem .ks-row:nth-child(2) .ks-sep { color: #dfefff; }
.section_problem .ks-row:nth-child(3) .ks-sep { color: #ff8bbd; }
.section_problem .ks-row:nth-child(4) .ks-sep { color: #00c9a7; }
.section_problem .ks-row:nth-child(5) .ks-sep { color: #dfefff; }
.section_problem .ks-row:nth-child(6) .ks-sep { color: #00e8e6; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary, .cta_primary {
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover, .cta_primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 48px rgba(0, 229, 255, 0.6);
}

.btn-ghost, .cta_ghost {
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-ghost:hover, .cta_ghost:hover {
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--ice);
  transform: translateY(-2px);
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.navbar.is-scrolled {
  background: rgba(7, 13, 26, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
}

/* ── 3D Tilt ──────────────────────────────────────────────────────────── */
[data-tilt] { transition: transform .06s ease; }
[data-tilt]:not(:hover) { transition: transform .4s var(--ease-reveal); }

/* ═══════════════════════════════════════════════════════════════════════
   v5.0 REDESIGN LAYER
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ghost marquee: #problem retired, kinetic rows live in the hero ──── */
.section_problem, section.section_problem.ks-section {
  display: none !important;
}
.section_hero { position: relative; overflow: hidden; }
.hero_ghost-marquee {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 8vh 0;
}
/* Rows keep their kinetic motion but recede into atmosphere: heavily
   dimmed, desaturated, slightly blurred — texture, not headline. Same
   register as the transition section's ghost keywords. */
.hero_ghost-marquee .ks-row { flex: none; }
.hero_ghost-marquee .ks-track {
  opacity: 0.055 !important;
  filter: saturate(0.45) blur(1px);
}
/* Hero content sits above the ghost layer */
.section_hero > *:not(.hero_ghost-marquee):not(canvas) {
  position: relative;
  z-index: 2;
}

/* ── Tiles: DEPTH DIVE variant ───────────────────────────────────────── */
.v5-depth .v5-approach-track {
  width: 100vw;
  position: relative;
  display: block;
}
.v5-depth .v5-approach-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
}
.v5-depth .v5-approach-hint { display: none; }

/* ── Preview variant switcher (localhost only) ───────────────────────── */
#v5-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  background: rgba(7, 13, 26, 0.92);
  border: 1px solid rgba(0, 232, 230, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: Outfit, Arial, sans-serif;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
.v5sw-row { display: flex; align-items: center; gap: 6px; }
.v5sw-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(223, 239, 255, 0.55);
  width: 74px;
}
.v5sw-btn {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(223, 239, 255, 0.15);
  background: transparent;
  color: rgba(223, 239, 255, 0.6);
  cursor: pointer;
}
.v5sw-btn.is-active {
  border-color: rgba(0, 232, 230, 0.7);
  color: #00e8e6;
  background: rgba(0, 232, 230, 0.08);
}

/* ── v5.0.3: Who I Am capability cards — depth arrival ──────────────── */
.v5-caps-deep .v5-cap { will-change: transform, opacity, filter; }

/* ── v5.0.8: cursor black hole body ──────────────────────────────────── */
#v5-cursor-hole {
  position: fixed;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  pointer-events: none;
  z-index: 9000;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* dark event horizon core → thin cyan photon ring → soft falloff */
  background: radial-gradient(circle,
    rgba(3, 7, 18, 0.96) 0%,
    rgba(3, 7, 18, 0.92) 24%,
    rgba(0, 232, 230, 0.30) 31%,
    rgba(0, 232, 230, 0.10) 38%,
    rgba(0, 232, 230, 0.03) 48%,
    transparent 62%);
  box-shadow: 0 0 22px rgba(0, 232, 230, 0.14);
  will-change: transform;
}

/* ── v5.0.8: kill the dead scroll between What I Do and Results ──────── */
/* After the fall-through, the empty pinned frame used to scroll itself
   away before Results entered (Matt: "two scrolls that shouldn't be
   there"). Results now rises underneath during the final fall.        */
.section_approach { position: relative; z-index: 1; }
.section_proof {
  margin-top: -85vh; /* v5.0.9: deeper overlap — Results fades in during the fall-through */
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
   v5.2: CINEMATIC HERO — "The Gravity Well"
   ═══════════════════════════════════════════════════════════════════════ */
.section_hero { overflow: visible !important; }

.v5-hero-wrap  { position: relative; width: 100%; }
.v5-hero-stage { position: relative; width: 100%; height: 100vh; overflow: hidden; }

/* Gravity well — dark event horizon + faint cyan accretion ring */
.v5-hero-well {
  position: absolute;
  width: 210px; height: 210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(2,6,16,0.92) 0%,
    rgba(2,6,16,0.74) 26%,
    rgba(0,232,230,0.22) 33%,
    rgba(0,232,230,0.06) 44%,
    rgba(0,232,230,0) 62%);
  box-shadow: 0 0 90px rgba(0,232,230,0.10);
  will-change: transform, opacity;
}

/* Hook headline — restrained, monotone with one cyan accent line */
.v5-hero-hook {
  position: absolute;
  width: min(1100px, 88vw);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
}
.v5-hook-h1 {
  margin: 0;
  font-family: Outfit, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--frost, #e8f0ff);
}
.v5-hook-h1 span { display: block; }
.v5-hook-accent { color: var(--cyan, #00e8e6); }

/* Waste phrases — debris pulled into the well */
.v5-hero-waste { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.v5-waste-phrase {
  position: absolute;
  white-space: nowrap;
  font-family: Outfit, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: -0.01em;
  color: rgba(223,239,255,0.60);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

/* Thesis — emerges from the calmed well */
.v5-hero-thesis {
  position: absolute;
  left: 50%; top: 62%;
  transform: translate(-50%, -50%);
  width: min(900px, 88vw);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.v5-thesis-eyebrow {
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cyan, #00e8e6); margin-bottom: 22px;
  will-change: transform, opacity, filter;
}
.v5-thesis-lead {
  margin: 0 0 22px;
  font-family: Outfit, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.09; letter-spacing: -0.02em;
  color: var(--frost, #e8f0ff);
  will-change: transform, opacity, filter;
}
.v5-thesis-insight {
  margin: 0 auto; max-width: 620px;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1.55;
  color: rgba(223,239,255,0.58);
  will-change: transform, opacity, filter;
}

/* v5.3: Tier-3 accretion disk canvas (hero well) */
.v5-hero-disk {
  position: fixed;
  width: 2400px; height: 1600px;  /* v9.4: BIGGER SYMMETRIC canvas, centred on the hole. Per-pixel-preserving scale in-shader (uScaleX/Y) keeps the hole + disk the EXACT size/position they are now, while the canvas edges (and any clip) sit OFF-SCREEN → the disk fills the page edge-to-edge. No FOV change → no hard stops. */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;  /* hole at canvas centre → dive zoom stays centred on it */
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
}

/* v5.4: persistent-disk layering — keep all text above the fixed hole.
   Star field = z0, disk = z1, content = z2+. The section-level z-index
   lifts the WHOLE transition (statement + ghost field) above the disk in
   one stacking context — do NOT override the children's own position
   (.at-field is absolute by design; forcing it relative drops it into the
   flex row and squashes the statement onto the right). */
.v5-hero-stage { z-index: 2; }
.section_transition { position: relative; z-index: 2; }

/* v5.7: thesis words fly in individually.
   v5.8: margins removed — the join(" ") between words already gives one
   natural space; the extra margin made it read as a double space. */
.v5-tword { display: inline-block; will-change: transform, opacity, filter; }

/* v6.0: approach statement now lives inside the hero pin (same spot as the
   thesis, shown later) so the hole carries straight through with no gap. */
.v5-hero-approach {
  position: absolute;
  left: 50%; top: 62%;        /* v6.2: aligned with the thesis line, clear of the disk's bright band */
  transform: translate(-50%, -50%);
  width: min(960px, 90vw);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.v5-app-eyebrow {
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 22px;
  will-change: transform, opacity, filter;
}
.v5-app-headline {
  margin: 0 0 22px;
  font-family: Outfit, Arial, sans-serif; font-weight: 600;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--frost);
}
.v5-app-sub {
  margin: 0 auto; max-width: 620px;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1.55;
  color: rgba(223, 239, 255, 0.6);
  will-change: transform, opacity, filter;
}

/* ── v6.3: EDITORIAL OFF-AXIS ─────────────────────────────────────────
   Break the centred-stack template. On wide screens the thesis + approach
   anchor to a LEFT column (text-align left), so the dead-centre black hole
   becomes the counterweight rather than everything piling on one axis.
   Words still spiral into the central hole on exit (convergence tracks the
   hole's real position). Re-centred under 760px so phones stay readable. */
.v5-hero-thesis, .v5-hero-approach {
  left: 8vw;
  width: min(600px, 56vw);
  transform: translateY(-50%);
  text-align: left;
}
.v5-app-sub, .v5-thesis-insight { margin-left: 0; margin-right: auto; }
@media (max-width: 760px) {
  .v5-hero-thesis, .v5-hero-approach {
    left: 50%;
    width: min(900px, 88vw);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .v5-app-sub, .v5-thesis-insight { margin-left: auto; }
}

/* ── v6.5: FALL-THROUGH overlay ───────────────────────────────────────
   Black circle anchored at the hole centre; scales up to engulf the
   screen at the end of the hero pin (falling into the event horizon),
   then fades to reveal the depth tiles emerging from the dark. */
.v5-fallthrough {
  /* v6.8: full-screen black RECT (was a scaling circle that read as a
     "weird circle"). Just fades opacity to finish the void + cover the gap. */
  position: fixed;
  inset: 0;
  background: #050810;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  will-change: opacity;
}

/* ── v6.6: approach on the RIGHT (thesis stays left) ──────────────────── */
.v5-hero-approach {
  left: auto;
  right: 8vw;
  top: 25%;              /* v49: raised from 62% — clear of the accretion disc's bright band so "THE APPROACH" reads in the dark upper-right (Matt). Only the approach moves; thesis stays at 62%. Spin re-targets the hole from the new position. */
  text-align: right;
}
.v5-app-sub { margin-left: auto; margin-right: 0; }
@media (max-width: 760px) {
  .v5-hero-approach { left: 50%; right: auto; text-align: center; }
  .v5-app-sub { margin-left: auto; margin-right: auto; }
}

/* ── v50: FOOTER reveal ──────────────────────────────────────────────────
   The footer was the ONLY un-z-indexed block on the page, so it painted
   BEHIND the sticky brand-splash canvas (the fixed black-hole layer) and was
   never visible. Lift it above that layer, and veil it with a TRANSLUCENT
   gradient: transparent at the top so the accretion disc keeps glowing through
   (the cosmos settles straight out of the CTA), easing to near-solid dark at
   the bottom so the © line stays crisp (Matt: incorporate the disc, keep it
   beautiful). */
.site_footer {
  position: relative;
  z-index: 6;
  background: linear-gradient(to bottom,
    rgba(5, 8, 16, 0) 0%,
    rgba(5, 8, 16, 0.45) 38%,
    rgba(5, 8, 16, 0.82) 72%,
    rgba(5, 8, 16, 0.96) 100%) !important;
}

/* v51: SPECIALISMS — Matt hates the pill "AI bubbles"; render as a plain stacked list. */
.footer_pills {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5em !important;
}
.footer_pill {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  color: rgba(200, 220, 235, 0.72) !important;
  letter-spacing: 0.02em !important;
}

/* ════════════════════════════════════════════════════════════════════
   v52: CTA OVERRIDE (cardless / luminous / restrained) — design-panel
   synthesis. Loads AFTER Webflow, so !important beats the inline gradient
   headline, the gradient pill, and its padding/radius. Reuses live primitives:
     .v5-app-headline  → heading type (ice-white, ONE flat-cyan accent)
     .v5-app-eyebrow   → eyebrow (12px / 0.34em / uppercase / cyan)
     .v5-orbit-card[data-color="cyan"] .v5-orbit-word → "Let's talk"
   HTML CHANGE (done in index.html): wrap one word in the heading →
     <h2 class="cta_heading">Less pointless work <span class="cta_accent">starts</span> here</h2>
   ════════════════════════════════════════════════════════════════════ */
.cta_container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(18px, 2.4vw, 32px) !important;
  text-align: left !important;
}
.cta_eyebrow {
  display: block !important;
  margin: 0 0 2px !important;
  font-family: 'Outfit', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: var(--cyan, #00e8e6) !important;
  -webkit-text-fill-color: var(--cyan, #00e8e6) !important;
  background: none !important;
}
.cta_heading {
  margin: 0 !important;
  font-family: 'Outfit', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(34px, 5vw, 72px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  max-width: 18ch !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--frost, #e8f4ff) !important;
  -webkit-text-fill-color: var(--frost, #e8f4ff) !important;
}
.cta_heading .cta_accent {
  color: var(--cyan, #00e8e6) !important;
  -webkit-text-fill-color: var(--cyan, #00e8e6) !important;
  background: none !important;
  font-weight: 600 !important;
}
.cta_sub {
  margin: 0 !important;
  max-width: 52ch !important;
  font-family: 'Outfit', Arial, sans-serif !important;
  font-size: clamp(15px, 1.5vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--mist, #7f9dbc) !important;
}
.cta_buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: clamp(20px, 3vw, 40px) !important;
  margin-top: clamp(4px, 1vw, 12px) !important;
}
.cta_buttons .button_primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Outfit', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 2.6vw, 40px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  background: linear-gradient(135deg, #00e8e6, #018ccd) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter:
    drop-shadow(0 2px 14px rgba(0,0,0,0.65))
    drop-shadow(0 0 26px rgba(0,232,230,0.45)) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transform: translateY(0) !important;
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    filter .4s cubic-bezier(.16,1,.3,1),
    letter-spacing .4s cubic-bezier(.16,1,.3,1) !important;
  will-change: transform, filter !important;
}
.cta_buttons .button_primary::after {
  content: "\2192";
  display: inline-block;
  transform: translateX(0);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.cta_buttons .button_primary:hover,
.cta_buttons .button_primary:focus-visible {
  transform: translateY(-2px) !important;
  letter-spacing: -0.028em !important;
  filter:
    drop-shadow(0 2px 14px rgba(0,0,0,0.65))
    drop-shadow(0 0 36px rgba(0,232,230,0.6)) !important;
  outline: none !important;
}
.cta_buttons .button_primary:hover::after,
.cta_buttons .button_primary:focus-visible::after {
  transform: translateX(5px);
}
.cta_buttons .button_primary:active {
  transform: translateY(0) !important;
  filter:
    drop-shadow(0 2px 12px rgba(0,0,0,0.7))
    drop-shadow(0 0 30px rgba(0,232,230,0.5)) !important;
}
.cta_email-link {
  font-family: 'Outfit', Arial, sans-serif !important;
  font-size: clamp(13px, 1.1vw, 15px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--mist, #7f9dbc) !important;
  -webkit-text-fill-color: var(--mist, #7f9dbc) !important;
  background: none !important;
  text-decoration: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color .3s ease, transform .3s ease !important;
}
.cta_email-link:hover,
.cta_email-link:focus-visible {
  color: var(--frost, #e8f4ff) !important;
  -webkit-text-fill-color: var(--frost, #e8f4ff) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* ── v12.0 POST-BLACK ORBIT POV (Train · Enable · Build orbit the hole) ── */
.section_orbit { position: relative; z-index: 2; background: transparent; }
.v5-orbit-wrap { width: 100vw; position: relative; }
.v5-orbit-sticky { width: 100vw; height: 100vh; position: relative; overflow: hidden; z-index: 2; }
.v5-orbit-head {
  position: absolute; top: 10vh; left: 6vw; z-index: 30;
  display: flex; flex-direction: column; gap: 0.4vh; pointer-events: none;
}
.v5-orbit-head span { font-size: 11px; letter-spacing: 0.4em; color: var(--cyan); text-transform: uppercase; }
.v5-orbit-head em { font-size: clamp(14px, 1.15vw, 18px); font-style: normal; color: var(--frost); opacity: 0.85; letter-spacing: -0.01em; }
.v5-orbit-stage { position: absolute; inset: 0; z-index: 20; }
/* v25: CARDLESS — the offerings are luminous TYPE in the scene, not glass
   buttons/panels (Matt: "I don't like these enable buttons"). No box, no
   backdrop-blur (which also caused the stutter on emerge). Legibility over the
   bright disc comes from a drop-shadow glow on the type itself. */
.v5-orbit-card {
  position: absolute; left: 0; top: 0; width: min(340px, 78vw);
  text-align: center; cursor: pointer;
  will-change: transform, opacity;
}
.v5-orbit-word { font-size: clamp(34px, 4.1vw, 62px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; }
.v5-orbit-card[data-color="cyan"] .v5-orbit-word { background: linear-gradient(135deg, #00e8e6, #018ccd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 26px rgba(0,232,230,0.45)); }
.v5-orbit-card[data-color="rose"] .v5-orbit-word { background: linear-gradient(135deg, #ff6ba8, #ff8bbd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 26px rgba(255,139,189,0.45)); }
.v5-orbit-card[data-color="teal"] .v5-orbit-word { background: linear-gradient(135deg, #00c9a7, #00e8e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 26px rgba(0,201,167,0.45)); }
.v5-orbit-sub { font-size: clamp(13px, 1.15vw, 17px); color: #eaf7ff; font-weight: 600; margin-top: 0.5rem; text-shadow: 0 1px 12px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.6); }
.v5-orbit-tag {
  font-size: 13px; color: #d3e8f3; line-height: 1.45; margin: 0 auto; max-width: 32ch;
  max-height: 0; opacity: 0; overflow: hidden;
  text-shadow: 0 1px 10px rgba(0,0,0,0.85);
  transition: max-height .4s ease, opacity .4s ease, margin-top .4s ease;
}
/* fronted offering: brighter halo + reveal its tagline (no box, just glow) */
.v5-orbit-card.is-front .v5-orbit-word { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 36px rgba(0,232,230,0.6)); }
.v5-orbit-card[data-color="rose"].is-front .v5-orbit-word { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 36px rgba(255,139,189,0.6)); }
.v5-orbit-card[data-color="teal"].is-front .v5-orbit-word { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 36px rgba(0,201,167,0.6)); }
.v5-orbit-card.is-front .v5-orbit-tag { max-height: 120px; opacity: 0.92; margin-top: 0.5rem; }
.v5-orbit-hint {
  position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.3em; color: var(--frost); opacity: 0.5; z-index: 30;
}

/* v25: open affordance on the fronted offering — a quiet text cue, NOT a button */
.v5-orbit-cta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #bdeef0;
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
  transition: opacity .4s ease, max-height .4s ease, margin-top .4s ease;
}
.v5-orbit-card.is-front .v5-orbit-cta { opacity: 0.85; max-height: 30px; margin-top: 0.6rem; }
.v5-orbit-card[data-color="rose"] .v5-orbit-cta { color: #ffb8d6; }
.v5-orbit-card[data-color="teal"] .v5-orbit-cta { color: #7fe9d3; }

/* v12.3 click-to-open detail overlay */
.v5-orbit-detail {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 16, 0.38);   /* v82: lighter dim + blur so the SINGULARITY EYE glows behind the panel */
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.v5-orbit-detail.open { opacity: 1; pointer-events: auto; }
.v5-orbit-detail-inner {
  width: min(1040px, 88vw); max-height: 82vh; overflow-y: auto;
  padding: 2vh 1vw; transform: translateY(16px); transition: transform .4s ease;
}
.v5-orbit-detail.open .v5-orbit-detail-inner { transform: translateY(0); }
.v5-od-headrow { display: flex; align-items: baseline; gap: 1.8vw; flex-wrap: wrap; margin-bottom: 3.2vh; }
.v5-od-word { font-size: clamp(40px, 5vw, 84px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.9; }
.v5-orbit-detail[data-color="cyan"] .v5-od-word { background: linear-gradient(135deg,#00e8e6,#018ccd); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.v5-orbit-detail[data-color="rose"] .v5-od-word { background: linear-gradient(135deg,#ff6ba8,#ff8bbd); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.v5-orbit-detail[data-color="teal"] .v5-od-word { background: linear-gradient(135deg,#00c9a7,#00e8e6); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.v5-od-meta { max-width: 620px; }
.v5-od-sub { font-size: clamp(16px,1.6vw,24px); color: var(--ice); font-weight: 600; }
.v5-od-tag { font-size: clamp(13px,1.05vw,16px); color: var(--frost); opacity: 0.8; margin-top: 0.4rem; line-height: 1.5; }
.v5-od-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6vw; }
.v5-od-col h4 { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); margin: 0 0 1.4vh; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.9vh; }
.v5-orbit-detail[data-color="rose"] .v5-od-col h4 { color: #ff8bbd; }
.v5-orbit-detail[data-color="teal"] .v5-od-col h4 { color: var(--teal); }
.v5-od-col ul { list-style: none; margin: 0; padding: 0; }
/* ── v82: SINGULARITY EYE detail mode — pillar tabs + offer ladder + add-ons ─────── */
.v5-od-tabs { display: flex; gap: 0.6vw; flex-wrap: wrap; margin-bottom: 3vh; }
.v5-od-tab {
  position: relative; flex: 1 1 150px; text-align: left; cursor: pointer;
  background: rgba(10, 18, 30, 0.55); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 10px 12px; color: var(--frost);
  transition: border-color .25s ease, background .25s ease; font: inherit;
}
.v5-od-tab span { display: block; font-weight: 700; font-size: clamp(13px,1.05vw,16px); color: #eafffe; letter-spacing: -0.01em; }
.v5-od-tab em { display: block; font-style: normal; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.v5-od-tab .v5-od-flag { position: absolute; top: 6px; right: 8px; font-size: 8px; letter-spacing: 0.18em; font-weight: 700; color: #ffd479; }
.v5-od-tab:hover { border-color: rgba(0,232,230,0.5); }
.v5-od-tab.is-active[data-color="cyan"] { border-color: #00e8e6; background: rgba(0,232,230,0.12); }
.v5-od-tab.is-active[data-color="rose"] { border-color: #ff6ba8; background: rgba(255,107,168,0.12); }
.v5-od-tab.is-active[data-color="teal"] { border-color: #00c9a7; background: rgba(0,201,167,0.12); }
.v5-od-note { font-size: clamp(12px,0.95vw,14px); color: #ffd479; opacity: 0.85; margin-top: 0.6rem; }
.v5-od-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1vw; margin-bottom: 3vh; }
.v5-od-offer {
  position: relative; background: rgba(10, 18, 30, 0.72);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 16px 18px;
}
.v5-orbit-detail[data-color="cyan"] .v5-od-offer { border-color: rgba(0,232,230,0.28); }
.v5-orbit-detail[data-color="rose"] .v5-od-offer { border-color: rgba(255,107,168,0.28); }
.v5-orbit-detail[data-color="teal"] .v5-od-offer { border-color: rgba(0,201,167,0.28); }
.v5-od-offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.v5-od-offer h4 { margin: 0; font-size: clamp(14px,1.15vw,18px); font-weight: 700; color: #eafffe; }
.v5-od-offer-top span { font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: clamp(12px,0.95vw,14px); color: var(--cyan); white-space: nowrap; }
.v5-orbit-detail[data-color="rose"] .v5-od-offer-top span { color: #ff8bbd; }
.v5-orbit-detail[data-color="teal"] .v5-od-offer-top span { color: #00c9a7; }
.v5-od-offer p { margin: 8px 0 0; font-size: clamp(12px,0.95vw,14px); line-height: 1.55; color: var(--frost); opacity: 0.85; }
.v5-od-badge { position: absolute; top: -9px; right: 12px; background: linear-gradient(135deg,#00e8e6,#018ccd); color: #012; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.v5-od-addons h5 { margin: 0 0 1.2vh; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--frost); opacity: 0.7; font-weight: 600; }
.v5-od-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5vw; margin-bottom: 3vh; }
.v5-od-addon { display: flex; justify-content: space-between; gap: 10px; background: rgba(10,18,30,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 12px; font-size: clamp(11px,0.9vw,13px); color: var(--frost); }
.v5-od-addon em { font-style: normal; font-family: ui-monospace, "IBM Plex Mono", monospace; opacity: 0.8; white-space: nowrap; }
.v5-od-foot { display: flex; justify-content: space-between; align-items: center; gap: 2vw; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2vh; }
.v5-od-foot p { margin: 0; max-width: 620px; font-size: clamp(11px,0.9vw,13px); color: var(--frost); opacity: 0.65; line-height: 1.5; }
.v5-od-cta { display: inline-block; background: linear-gradient(135deg,#00e8e6,#018ccd); color: #012; font-weight: 800; font-size: clamp(13px,1.05vw,15px); padding: 12px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .2s ease; }
.v5-od-cta:hover { transform: translateY(-2px); }
.v5-od-col li { font-size: clamp(13px,1vw,16px); line-height: 1.7; color: var(--frost); opacity: 0.9; }
.v5-orbit-close {
  position: absolute; top: 3vh; right: 3vw; z-index: 61;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: var(--ice); font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .25s ease;
}
.v5-orbit-close:hover { background: rgba(255,255,255,0.14); }
@media (max-width: 760px) {
  .v5-od-cols { grid-template-columns: 1fr; gap: 2.5vh; }
  .v5-od-headrow { flex-direction: column; gap: 1vh; }
}

/* v64 — MOBILE legibility (Who-I-Am + Results). Placed last so these override the base rules at equal specificity; desktop >760px untouched. */
@media (max-width: 760px) {
  /* rank 5: free the WHO-I-AM bio from the ~36vw sliver → full-width, readable floor */
  .v5-wi-intro { left: 6vw; right: 6vw; max-width: none; top: 8vh; }
  .v5-wi-h2 { font-size: clamp(22px, 6vw, 30px); }
  .v5-wi-bio { max-width: none; font-size: 16px; line-height: 1.6; }
  /* rank 6: dark radial scrim behind the swoop + dark-only shadow (drops the additive cyan halo that fought the bright disc) */
  .v5-wi-sticky::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
    background: radial-gradient(ellipse 120% 70% at 50% 40%, rgba(5,8,16,0.55) 0%, rgba(5,8,16,0) 70%); }
  .v5-wi-line { text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 2px 18px rgba(0,0,0,0.95); }
  /* rank 7: scrim + shadows so RESULTS copy reads over the disc during the slide-up overlap */
  .v5-results-header { position: relative; }
  .v5-results-header::before { content: ""; position: absolute; inset: -4vh -6vw; z-index: -1;
    background: radial-gradient(ellipse 120% 80% at 30% 40%, rgba(5,8,16,0.6), rgba(5,8,16,0) 75%); }
  .v5-results-desc, .v5-results-note { opacity: 0.92; text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
  .v5-results-source { text-shadow: 0 1px 8px rgba(0,0,0,0.85); }
}

/* ── v88 MOBILE PERF: the hero ghost marquee is near-invisible (opacity 0.055)
   but its six rows of moving blur(1px) text cost real GPU on phones — drop it
   entirely on narrow screens. ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero_ghost-marquee { display: none !important; }
}

/* v88 MOBILE: only the FRONTED offering shows its subtitle - the side words are
   just words, so nothing collides at phone width. */
@media (max-width: 760px) {
  .v5-orbit-card:not(.is-front) .v5-orbit-sub { opacity: 0; }
}

/* ── v90 MOBILE STRUCTURE (Matt's phone review) ───────────────────────────
   1. CTA + footer: 160px CTA paddings + a 597px footer meant "READY?" was
      184px off the top of the screen by the time the footer was fully in
      view. Compact both so the whole CTA stays visible above the footer.
   2. Orbit: the fronted offering keeps word + subtitle + OPEN, but the
      tagline paragraph goes - too much text on a phone (Matt). ─────────── */
@media (max-width: 760px) {
  .section_cta { padding-top: 96px !important; padding-bottom: 32px !important; }
  .site_footer { padding-top: 32px !important; padding-bottom: 24px !important; }
  .footer_grid { row-gap: 16px !important; margin-bottom: 24px !important; }
  .v5-orbit-card .v5-orbit-tag { display: none !important; }
}

/* ── v91 MOBILE: all five offerings orbit again (option B) — sized so they
   physically cannot collide at 375px: smaller words, narrower cards. Taglines
   are already hidden and subtitles show on the fronted card only. ─────────── */
@media (max-width: 760px) {
  .v5-orbit-card { width: min(220px, 58vw); }
  .v5-orbit-word { font-size: clamp(22px, 7vw, 30px); }
  .v5-orbit-sub  { font-size: 12px; }
}

/* ═══ v100 THE MANIFEST — the offer detail as an engineering datasheet (design-panel
   winner). Zero boxes: monospace-indexed ledger rows, thin hairlines, luminous rail
   words, and a DIRECTIONAL scrim so the singularity eye burns through the right side
   instead of hiding behind smoked glass. Add-ons removed per Matt. ═══════════════ */
.v5-orbit-detail {
  background: linear-gradient(90deg, rgba(4,8,16,0.58) 0%, rgba(4,8,16,0.36) 55%, rgba(4,8,16,0.08) 100%) !important;
  justify-content: flex-start !important;
}
.v5-orbit-detail-inner {
  width: min(880px, 92vw) !important;
  margin-left: clamp(4vw, 7vw, 120px);
  padding: 4vh 1vw !important;
}
/* the last surviving border in the modal dies: plain eyebrow-text close (stolen from ORBIT) */
.v5-orbit-close {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; line-height: 1 !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.34em !important;
  color: rgba(223,239,255,0.55) !important; cursor: pointer;
  transition: color .25s ease;
}
.v5-orbit-close:hover { color: #00e8e6 !important; }

.v5-om-head { font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan, #00e8e6); margin-bottom: 16px; }
.v5-om-rail { position: relative; display: flex; flex-wrap: wrap; gap: 6px 2.4em; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 3.4vh; }
.v5-om-railword { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.v5-om-railword span { font-weight: 600; font-size: clamp(13px, 1.05vw, 16px); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(223,239,255,0.35); transition: color .25s ease; }
.v5-om-railword:hover span { color: rgba(223,239,255,0.75); }
.v5-om-railword em { display: block; font-style: normal; font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: 10px; margin-top: 3px; color: rgba(223,239,255,0); transition: color .25s ease; }
.v5-om-railword.is-active em { color: rgba(223,239,255,0.45); }
.v5-om-flag { font-size: 9px; color: #ffd479; font-weight: 400; margin-left: 5px; vertical-align: 0.6ex; }
.v5-om-railword.is-active span { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v5-om-railword.is-active[data-color="cyan"] span { background-image: linear-gradient(135deg,#00e8e6,#018ccd); filter: drop-shadow(0 0 16px rgba(0,232,230,0.5)); }
.v5-om-railword.is-active[data-color="rose"] span { background-image: linear-gradient(135deg,#ff6ba8,#ff8bbd); filter: drop-shadow(0 0 16px rgba(255,107,168,0.5)); }
.v5-om-railword.is-active[data-color="teal"] span { background-image: linear-gradient(135deg,#00c9a7,#00e8e6); filter: drop-shadow(0 0 16px rgba(0,201,167,0.5)); }
.v5-om-underline { position: absolute; left: 0; bottom: -1px; width: 100px; height: 1px; transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.v5-orbit-detail[data-color="cyan"] .v5-om-underline { background: rgba(0,232,230,0.6); }
.v5-orbit-detail[data-color="rose"] .v5-om-underline { background: rgba(255,107,168,0.6); }
.v5-orbit-detail[data-color="teal"] .v5-om-underline { background: rgba(0,201,167,0.6); }

.v5-om-eyebrow { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: #ffd479; margin-bottom: 8px; }
.v5-om-identity { margin-bottom: 1.2vh; }
.v5-om-identity .v5-od-tag { margin-top: 0.6rem; }

.v5-om-row { display: grid; grid-template-columns: 3.5ch 1fr auto; gap: 0 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: start; transition: border-bottom-color .3s ease; }
.v5-om-idx { font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: 12px; color: rgba(223,239,255,0.35); padding-top: 4px; }
.v5-om-body h4 { margin: 0; font-weight: 600; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -0.01em; color: #e8f4ff; transition: filter .25s ease; }
.v5-om-body p { margin: 7px 0 0; font-size: 15px; line-height: 1.55; color: rgba(223,239,255,0.6); max-width: 56ch; }
.v5-om-stamp { font-weight: 600; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; vertical-align: 0.5ex; margin-left: 8px; }
.v5-orbit-detail[data-color="cyan"] .v5-om-stamp { color: #00e8e6; }
.v5-orbit-detail[data-color="rose"] .v5-om-stamp { color: #ff8bbd; }
.v5-orbit-detail[data-color="teal"] .v5-om-stamp { color: #00c9a7; }
.v5-om-price { font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.04em; white-space: nowrap; padding-top: 5px; text-align: right; }
.v5-orbit-detail[data-color="cyan"] .v5-om-price { color: #00e8e6; }
.v5-orbit-detail[data-color="rose"] .v5-om-price { color: #ff8bbd; }
.v5-orbit-detail[data-color="teal"] .v5-om-price { color: #00c9a7; }
.v5-om-price em { font-style: normal; opacity: 0.55; }
@media (hover: hover) {
  .v5-orbit-detail[data-color="cyan"] .v5-om-row:hover h4 { filter: drop-shadow(0 0 18px rgba(0,232,230,0.55)); }
  .v5-orbit-detail[data-color="rose"] .v5-om-row:hover h4 { filter: drop-shadow(0 0 18px rgba(255,107,168,0.55)); }
  .v5-orbit-detail[data-color="teal"] .v5-om-row:hover h4 { filter: drop-shadow(0 0 18px rgba(0,201,167,0.55)); }
  .v5-orbit-detail[data-color="cyan"] .v5-om-row:hover { border-bottom-color: rgba(0,232,230,0.45); }
  .v5-orbit-detail[data-color="rose"] .v5-om-row:hover { border-bottom-color: rgba(255,107,168,0.45); }
  .v5-orbit-detail[data-color="teal"] .v5-om-row:hover { border-bottom-color: rgba(0,201,167,0.45); }
}
.v5-om-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 24px; flex-wrap: wrap; padding-top: 22px; }
.v5-om-foot p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(223,239,255,0.5); max-width: 52ch; }
.v5-om-cta {
  font-weight: 800; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #00e8e6, #018ccd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(0,232,230,0.45));
  transition: filter .3s ease;
}
.v5-om-cta:hover { filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 36px rgba(0,232,230,0.7)); }

/* entrance cascade — the sheet re-renders per switch, fresh nodes replay the animations;
   names arrive from the left while prices arrive from the right: each entry "rules off" */
.v5-orbit-detail.open .v5-om-identity, .v5-orbit-detail.open .v5-om-row, .v5-orbit-detail.open .v5-om-foot { animation: v5omIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
.v5-orbit-detail.open .v5-om-row .v5-om-price { animation: v5omInR .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
@keyframes v5omIn  { from { opacity: 0; transform: translate(-26px, 14px); } to { opacity: 1; transform: none; } }
@keyframes v5omInR { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
/* close: the sheet falls toward the eye, concurrent with the camera descent (judge's tightening) */
.v5-orbit-detail.v5-om-closing .v5-orbit-detail-inner { transform: translate(9vw, -5vh) scale(0.72) !important; opacity: 0 !important; transition: transform .45s cubic-bezier(.55,0,.85,.4), opacity .4s ease !important; }

@media (max-width: 760px) {
  .v5-orbit-detail { background: rgba(4,8,16,0.62) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .v5-orbit-detail-inner { margin-left: 0; width: 100% !important; padding: 3vh 20px !important; }
  .v5-om-rail { gap: 0 1.6em; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; scrollbar-width: none; }
  .v5-om-rail::-webkit-scrollbar { display: none; }
  .v5-om-railword em { display: none; }
  .v5-om-row { grid-template-columns: 1fr auto; padding: 18px 0; }
  .v5-om-idx { display: none; }
  .v5-om-body p { font-size: 14px; }
  .v5-om-foot { flex-direction: column; align-items: flex-start; }
}


/* v100.1 MANIFEST mobile refinements: rail words never wrap mid-word; ledger rows
   stack (name / price / description, each full width) so descriptions stop being
   squeezed into a half-column beside the price. */
.v5-om-railword span { white-space: nowrap; }
@media (max-width: 760px) {
  .v5-om-row { display: flex; flex-direction: column; gap: 5px; }
  .v5-om-body { display: contents; }
  .v5-om-body h4 { order: 1; }
  .v5-om-price { order: 2; text-align: left; padding-top: 0; }
  .v5-om-body p { order: 3; max-width: none; }
}

/* v100.2 MANIFEST refinements (Matt): (1) the sheet hovers OVER the hole''s black
   pupil - the darkest, most readable ground on screen - so it moves to the right
   where the pupil sits and the scrim mirrors (dark right, the ring''s far arc and
   disc glow burn free on the LEFT now). (2) No yellow on the site: the flagship
   diamond + eyebrow wear the pillar''s own accent; the note drops to quiet ice. */
.v5-orbit-detail {
  justify-content: flex-end !important;
  background: linear-gradient(270deg, rgba(4,8,16,0.55) 0%, rgba(4,8,16,0.30) 55%, rgba(4,8,16,0.06) 100%) !important;
}
.v5-orbit-detail-inner { margin-left: 0 !important; margin-right: clamp(2vw, 4vw, 80px); }
.v5-om-railword[data-color="cyan"] .v5-om-flag { color: rgba(0,232,230,0.85); }
.v5-om-railword[data-color="rose"] .v5-om-flag { color: rgba(255,139,189,0.85); }
.v5-om-railword[data-color="teal"] .v5-om-flag { color: rgba(0,201,167,0.85); }
.v5-orbit-detail[data-color="cyan"] .v5-om-eyebrow { color: #00e8e6; }
.v5-orbit-detail[data-color="rose"] .v5-om-eyebrow { color: #ff8bbd; }
.v5-orbit-detail[data-color="teal"] .v5-om-eyebrow { color: #00c9a7; }
.v5-orbit-detail .v5-od-note { color: rgba(223,239,255,0.55); }
@media (max-width: 760px) {
  .v5-orbit-detail-inner { margin-right: 0; }
}

/* v100.3 (Matt''s wide-monitor screenshot): flex-end parked the sheet BESIDE the
   pupil on wide viewports - the god view centres the hole, so the sheet must
   CENTRE too. Narrower column to sit inside the pupil, plus a radial pupil-scrim
   (edge-free) so any overhang onto the soft ring glow stays readable at every
   monitor size. */
.v5-orbit-detail {
  justify-content: center !important;
  background: radial-gradient(closest-side at 50% 50%, rgba(4,8,16,0.68) 0%, rgba(4,8,16,0.46) 55%, rgba(4,8,16,0.08) 100%) !important;
}
.v5-orbit-detail-inner { margin-right: 0 !important; width: min(720px, 92vw) !important; }
@media (max-width: 760px) {
  .v5-orbit-detail { background: rgba(4,8,16,0.62) !important; }
  .v5-orbit-detail-inner { width: 100% !important; }
}

/* v100.4: THE SCROLLBAR DIES (Matt: "breaks the whole aesthetic"). The sheet still
   scrolls - wheel/trackpad/touch, just invisibly. While more content waits below,
   the sheet''s bottom edge dissolves in a soft fade (edge-free hint, toggled by JS
   as .v5-om-more) and lifts once you reach the end. Dense spacing for 4+ offer
   pillars so most sheets never scroll at all. */
.v5-orbit-detail-inner { scrollbar-width: none; -ms-overflow-style: none; }
.v5-orbit-detail-inner::-webkit-scrollbar { display: none; width: 0; height: 0; }
.v5-orbit-detail-inner.v5-om-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 84px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 84px), transparent 100%);
}
.v5-om-dense .v5-om-row { padding: 16px 0; }
.v5-om-dense .v5-om-body p { font-size: 14px; }

/* v100.5: scroll containment - the sheet never chains its scroll to the pinned page
   (wheel handled in JS; touch contained here: pan-y inside the sheet, nothing outside). */
.v5-orbit-detail { touch-action: none; }
.v5-orbit-detail-inner { overscroll-behavior: contain; touch-action: pan-y; }

/* ── v102 THE PROJECTOR: the frozen film replaces the live hero on phones.
   The <video> sits exactly where the canvases were (z1, behind all text);
   while filming, every canvas hides and the ray-march is skipped. ───────── */
.v5-hero-film {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  object-fit: cover; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.v5-hero-film.on { opacity: 1; }
body.v5-filming canvas { visibility: hidden !important; }

/* ── v122 PHONE WIGGLE LOCK: the page is a vertical rail on touch - nothing
   pans sideways, nothing rubber-bands left-right (Matt: "you can move it
   left to right, it doesn't feel very secure"). overflow-x:clip masks any
   stray overflower without creating a new scroll container (sticky-safe). */
@media (hover: none) {
  html, body { overflow-x: clip; }
}

/* == v125 SHORT-VIEWPORT CTA ==============================================
   On a standard work-PC viewport (~600-800px tall) the READY block was taller
   than the screen, so the final ride landed with the CTA running off the bottom
   (Matt: "the call-to-action at the end over-scrolls the screen on a standard
   work PC"). Compacts padding and scales the headline with viewport HEIGHT so
   the whole block fits one screen. Tall monitors (>860px) are untouched, so
   Matt's workstation view is byte-identical. Phones keep their own <=760px rules. */
@media (min-width: 761px) and (max-height: 860px) {
  .section_cta { padding-top: 58px !important; padding-bottom: 44px !important; }
  .cta_heading { font-size: clamp(30px, 7.2vh, 58px) !important; line-height: 1.04 !important; }
  .cta_sub { margin-top: 12px !important; }
  .cta_buttons { margin-top: 20px !important; }
}

/* == v134: audit IS the Results title; splash stamp; method link ================== */
.v5-results-method { color: #00a896; text-decoration: none; font-weight: 700; white-space: nowrap; }
.v5-results-method:hover { text-decoration: underline; }
.v5-svc-zero { display: block; flex-basis: 100%; text-align: center; margin-top: 22px;   /* v135: Matt - more air under the services line */   /* v134.2: the stamp was a FULL-WIDTH line whose text still defaulted LEFT - the box was centred, the words were not (Matt's red line). text-align:center + the existing text-indent (which offsets the trailing letterspace) = mathematically centred under the strip. */ font-family: "IBM Plex Mono", Consolas, monospace; font-size: 0.82em; font-weight: 700; letter-spacing: 0.42em; color: var(--cyan); text-indent: 0.42em; }
/* the static SEO shell still carries .proof_audit markup (display:none via the shell rule) - no styles needed */