/* ================================================================
   SAINI ECOMM — BRAND DECK AS LANDING PAGE
   Editorial / Pentagram-grade · Scroll-driven · 16-slide replica
   ================================================================ */

/* -- CSS VARIABLES --------------------------------------------- */
:root {
  --paper:        #F4F1EA;
  --paper-deep:   #EEE9DE;
  --graphite:     #0E1116;
  --canvas:       #0D1117;
  --ink:          #111418;
  --rust:         #D94B1F;
  --electric:     #1E7FFF;
  --amber:        #E8B34A;
  --paper-red:    #F85149;
  --se-blue:      #58A6FF;

  --mute:         #6B6A63;
  --mute-dark:    #8A8A84;
  --mute-dark-2:  #5E6067;

  --hair:         rgba(14, 17, 22, 0.12);
  --hair-strong:  rgba(14, 17, 22, 0.22);
  --hair-dark:    rgba(244, 241, 234, 0.14);

  --fs-display:   'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-mono:      'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --fs-serif:     'Fraunces', Georgia, serif;

  --container:    1320px;
  --gutter:       clamp(24px, 5vw, 80px);

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

/* -- RESET ------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: 72px; }
/* Lenis handles smooth scroll; keep fallback for no-JS via `data-lenis-prevent` toggle */
html.lenis-ready { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fs-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rust); }

/* -- CONTAINER -------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.container-wide {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* -- NAV -------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(244, 241, 234, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
/* Only apply blur on scroll so the initial paint is cheap */
.nav.scrolled {
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: rgba(244, 241, 234, 0.82);
}
.nav.scrolled { border-bottom-color: var(--hair); }
.nav.scrolled.on-dark {
  background: rgba(14, 17, 22, 0.82);
}
.nav.on-dark {
  background: rgba(14, 17, 22, 0.82);
  color: var(--paper);
}
.nav.on-dark .nav__brand { color: var(--paper); }
.nav.on-dark .nav__links { color: rgba(244,241,234,0.65); }

.nav__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fs-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.nav__bolt { color: var(--rust); flex-shrink: 0; }
.nav__dot { color: var(--rust); }
.nav__wordmark-em { color: var(--rust); }

.nav__links {
  display: flex; align-items: center; gap: clamp(12px, 2.6vw, 28px);
  font-family: var(--fs-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
}
.nav__cta {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper) !important;
  transition: background 0.2s var(--ease);
}
.nav__cta:hover { background: var(--rust); }
.nav.on-dark .nav__cta { background: var(--paper); color: var(--ink) !important; }
.nav.on-dark .nav__cta:hover { background: var(--rust); color: var(--paper) !important; }

/* -- TYPOGRAPHIC UTILITIES ------------------------------------- */
.kicker {
  font-family: var(--fs-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.kicker .bar {
  display: inline-block; width: 28px; height: 1px;
  background: currentColor; opacity: 0.5;
}
.kicker.rust  { color: var(--rust); }
.kicker.rust .bar { background: var(--rust); opacity: 0.8; }
.kicker.electric { color: var(--electric); }
.kicker.electric .bar { background: var(--electric); opacity: 0.8; }
.kicker.amber { color: var(--amber); }
.kicker.amber .bar { background: var(--amber); opacity: 0.8; }

.display {
  font-family: var(--fs-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 40px;
  max-width: 16ch;
}
.display-lg {
  font-family: var(--fs-display);
  font-size: clamp(56px, 10vw, 148px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
}
.title {
  font-family: var(--fs-display);
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
}

.body-lg {
  font-family: var(--fs-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.58;
  font-weight: 400;
  max-width: 56ch;
}
.body {
  font-family: var(--fs-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
}

.serif-italic {
  font-family: var(--fs-serif);
  font-style: italic;
  font-weight: 400;
}

.rust     { color: var(--rust); }
.electric { color: var(--electric); }
.amber    { color: var(--amber); }

.mono-sm {
  font-family: var(--fs-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.mono-label {
  font-family: var(--fs-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.meta-value {
  font-family: var(--fs-display);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mono {
  font-family: var(--fs-mono);
  font-weight: 500;
}

.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  background: transparent;
}
.tag-pill .pip {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rust);
}
.tag-pill--electric .pip { background: var(--electric); }

.dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rust);
  margin-right: 10px; vertical-align: middle;
}
.dot.electric { background: var(--electric); }
.dot.amber    { background: var(--amber); }

/* Chrome row used by slide-like sections */
.chrome {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 0 16px;
  font-family: var(--fs-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.chrome__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
}
.chrome.dark .chrome__row { border-bottom-color: var(--hair-dark); color: var(--mute-dark); }

.section-num {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 12px; padding-bottom: 8px;
}
.section-num__left,
.section-num__right {
  font-family: var(--fs-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.section-num__rule {
  flex: 1; height: 1px; background: var(--hair);
}
.dark .section-num__left,
.dark .section-num__right { color: var(--mute-dark); }
.dark .section-num__rule  { background: var(--hair-dark); }

/* -- HERO ------------------------------------------------------- */
/* html is cream by default — full-bleed fallback for cream pages 7-14.
   On shader pages 1-6, the WebGL canvas (z-index:-1) paints OVER html,
   covering the cream completely with the animated shader. When user scrolls
   onto a cream page, JS sets body[data-shader-state="hidden"] which fades
   the canvas to opacity 0, revealing the cream html backdrop edge-to-edge. */
html { background: var(--paper); }
body { background: transparent; }

/* =============================================================
   UNIFIED SHADER CANVAS
   One fixed canvas at z-index: -1. Transparent sections show it;
   opaque sections cover it. Result: ONE continuous animation across
   pages 1 + 2 seamlessly.
   ============================================================= */
.bg-shader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  touch-action: none;
  background: transparent;
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px var(--gutter) 64px;
  color: var(--paper);
  overflow: hidden;
  background: transparent;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 40% at 60% 35%, rgba(217, 75, 31, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(232, 179, 74, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(217, 75, 31, 0.10), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}
/* Dark vignette over shader so text stays legible */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(7, 8, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(7, 8, 11, 0.35) 0%, transparent 25%, rgba(7, 8, 11, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero__chrome,
.hero__body,
.hero__ribbon,
.hero__fig-watermark,
.scroll-cue { position: relative; z-index: 2; }

/* =============================================================
   LAMP — (retired, kept in codebase as unused in case Jatin wants it back)
   ============================================================= */
.hero__lamp {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 72vh;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  z-index: 0;
  --lamp-hue: #D94B1F;
}
.hero__lamp-wedge {
  position: absolute;
  top: 0;
  height: 56vh;
  width: 38vw;
  max-width: 620px;
  opacity: 0;
  transform-origin: top center;
  animation: lampGrow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.hero__lamp-wedge--left {
  right: 50%;
  background: conic-gradient(from 70deg at center top,
    var(--lamp-hue) 0deg,
    rgba(217, 75, 31, 0.0) 28deg,
    transparent 40%);
  /* Mask bottom + right to soften into the dark */
  -webkit-mask-image:
    linear-gradient(to top,   white 20%, transparent 85%),
    linear-gradient(to right, white 60%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to top,   white 20%, transparent 85%),
    linear-gradient(to right, white 60%, transparent);
          mask-composite: intersect;
}
.hero__lamp-wedge--right {
  left: 50%;
  background: conic-gradient(from 290deg at center top,
    transparent 60%,
    rgba(217, 75, 31, 0.0) 332deg,
    var(--lamp-hue) 360deg);
  -webkit-mask-image:
    linear-gradient(to top,  white 20%, transparent 85%),
    linear-gradient(to left, white 60%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to top,  white 20%, transparent 85%),
    linear-gradient(to left, white 60%, transparent);
          mask-composite: intersect;
}

/* Hot horizontal line at the "filament" */
.hero__lamp-line {
  position: absolute;
  top: 56vh;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  height: 1px;
  width: 36vw;
  max-width: 560px;
  background: linear-gradient(90deg,
    transparent,
    var(--lamp-hue) 15%,
    #ff7a4a 50%,
    var(--lamp-hue) 85%,
    transparent);
  z-index: 2;
  animation: lampLine 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Glow orb (the 'bulb' of the lamp) */
.hero__lamp-orb {
  position: absolute;
  top: 56vh;
  left: 50%;
  width: 28vw;
  max-width: 480px;
  height: 180px;
  transform: translate(-50%, -55%);
  background: radial-gradient(ellipse at center,
    rgba(217, 75, 31, 0.55) 0%,
    rgba(217, 75, 31, 0.22) 30%,
    transparent 70%);
  filter: blur(28px);
  opacity: 0;
  z-index: 1;
  animation: lampOrb 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

/* Tight secondary bulb glow to give the filament some punch */
.hero__lamp-core {
  position: absolute;
  top: 56vh;
  left: 50%;
  width: 12vw;
  max-width: 220px;
  height: 80px;
  transform: translate(-50%, -70%);
  background: radial-gradient(ellipse at center,
    rgba(255, 132, 82, 0.85) 0%,
    rgba(217, 75, 31, 0.35) 35%,
    transparent 70%);
  filter: blur(12px);
  opacity: 0;
  z-index: 2;
  animation: lampCore 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* Soft top vignette to prevent the conic from clipping harshly */
.hero__lamp-topmask {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12vh;
  background: linear-gradient(to bottom, #07080b, transparent);
  z-index: 3;
  pointer-events: none;
}

@keyframes lampGrow {
  0%   { opacity: 0;   transform: scaleX(0.5); }
  100% { opacity: 0.85; transform: scaleX(1);  }
}
@keyframes lampLine {
  0%   { transform: translateX(-50%) scaleX(0);    opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1);    opacity: 1; }
}
@keyframes lampOrb {
  0%   { opacity: 0;   transform: translate(-50%, -55%) scale(0.6); }
  100% { opacity: 0.65; transform: translate(-50%, -55%) scale(1); }
}
@keyframes lampCore {
  0%   { opacity: 0;   transform: translate(-50%, -70%) scale(0.4); }
  100% { opacity: 0.9; transform: translate(-50%, -70%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__lamp-wedge,
  .hero__lamp-line,
  .hero__lamp-orb,
  .hero__lamp-core { animation: none; opacity: 1; transform: none; }
  .hero__lamp-line { transform: translateX(-50%); }
  .hero__lamp-orb  { transform: translate(-50%, -55%); }
  .hero__lamp-core { transform: translate(-50%, -70%); }
}

.hero__chrome {
  position: absolute;
  top: 82px; left: var(--gutter); right: var(--gutter);
  font-family: var(--fs-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute-dark);
  z-index: 2;
}
.hero__chrome .chrome-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair-dark);
}

.hero__body {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "kick side"
    "title side";
  gap: 16px 72px;
  align-items: end;
  min-height: 60vh;
  padding-top: 76px;
  position: relative; z-index: 2;
}
.hero__body .kicker    { grid-area: kick; color: var(--mute-dark); margin-bottom: 0; }
.hero__title           { grid-area: title; }
.hero__side            { grid-area: side; align-self: end; }

.hero__title {
  font-family: var(--fs-display);
  font-size: clamp(56px, 9.8vw, 156px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--paper);
}
.hero__title .reveal-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.hero__title .reveal-line { display: block; }

.hero__side { padding-bottom: 6px; }

/* Hero lede — editorial lead paragraph, confident scale so it catches
   the eye against the shader without competing with the display headline. */
.hero__lede {
  font-family: var(--fs-display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 34ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero__lede .serif-italic {
  color: var(--paper);
  font-weight: 400;
}

.hero__ribbon {
  max-width: var(--container);
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hair-dark);
  position: relative; z-index: 2;
}
.hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.hero__meta .mono-label { color: var(--mute-dark-2); }
.hero__meta .meta-value { color: var(--paper); }

.hero__fig-watermark {
  position: absolute; right: 22px; top: 82px;
  color: rgba(244,241,234, 0.18);
  font-family: var(--fs-mono);
  font-size: 11px; letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  z-index: 1;
}

.scroll-cue {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute-dark); z-index: 2;
}
.scroll-cue__line {
  width: 1px; height: 28px;
  background: var(--mute-dark);
  animation: scrollCue 2.2s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.3; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* -- SECTION BASE ---------------------------------------------- */
section.slide-section {
  position: relative;
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1px solid var(--hair);
  contain: layout paint;
}
.vx-dramatic { contain: layout paint; }
/* .hero explicitly NOT contained — we want the fixed canvas behind to show through */
section.slide-section.dark {
  background: var(--graphite);
  color: var(--paper);
  border-top: 1px solid var(--hair-dark);
}
section.slide-section.dark .body,
section.slide-section.dark .body-lg { color: rgba(244,241,234, 0.75); }
section.slide-section.dark .title { color: var(--paper); }
section.slide-section.dark .mono-sm,
section.slide-section.dark .mono-label { color: var(--mute-dark); }

/* -- WHO WE ARE ------------------------------------------------- */
.who {
  background: var(--paper);
}
.who__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  margin-top: 28px;
}
.who__glance {
  border-top: 1px solid var(--hair);
}
.who__glance-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: baseline;
}
.who__glance-row .mono-sm { color: var(--mute); }
.who__glance-row .mono    { font-size: 18px; font-weight: 500; letter-spacing: 0.01em; }

.who__stat-bar {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.who__stat {
  padding: 0 32px;
  border-left: 1px solid var(--hair);
}
.who__stat:first-child { border-left: 0; padding-left: 0; }
.who__stat:last-child { padding-right: 0; }
.who__stat-num {
  font-family: var(--fs-display);
  font-size: clamp(72px, 11vw, 140px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink);
  display: inline-flex; align-items: flex-start;
}
.who__stat-unit {
  font-family: var(--fs-mono);
  font-size: 0.18em; font-weight: 500;
  margin-top: 0.14em;
  margin-left: 0.06em;
  letter-spacing: 0.02em;
  color: var(--mute);
  text-transform: uppercase;
}
.who__stat-label {
  margin-top: 14px;
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}

/* -- THESIS ----------------------------------------------------- */
.thesis {
  background: var(--graphite);
  color: var(--paper);
  border-top: 1px solid var(--hair-dark);
}

/* Thesis · scroll-pin runway. Section is 240vh tall; inner sticks to the
   viewport while the bars/labels scrub from 0→target with scroll progress.
   When user reaches the bottom of the runway, bars are full and the next
   section enters. Disabled below 900px. */
.slide-section.thesis[data-thesis-pin] {
  padding: 0;
  height: 240vh;
}
.thesis__pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(72px, 10vh, 120px) 0;
  overflow: hidden;
}
.thesis__pin-inner > .container { width: 100%; }
@media (max-width: 900px) {
  .slide-section.thesis[data-thesis-pin] { height: auto; }
  .thesis__pin-inner {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }
}
.thesis .section-num__left,
.thesis .section-num__right { color: var(--mute-dark); }
.thesis .section-num__rule  { background: var(--hair-dark); }
.thesis__headline {
  max-width: 18ch;
  font-size: clamp(40px, 5.4vw, 74px);
  color: var(--paper);
}
.thesis__grid {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 64px;
  align-items: end;
  margin-top: 28px;
}
.thesis__delta {
  border: 1px solid var(--hair-dark);
  background: rgba(247,246,242,0.02);
  padding: 28px;
}
.thesis__delta-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.thesis__delta-head .mono-sm { color: var(--mute-dark); }
.delta-bar-row { margin-top: 20px; }
.delta-bar-row + .delta-bar-row { margin-top: 14px; }
.delta-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.delta-bar-head .mono-sm { color: rgba(244,241,234,0.72); }
.delta-bar-track {
  height: 8px;
  background: rgba(247,246,242,0.08);
  position: relative; overflow: hidden;
}
.delta-bar-fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(calc(var(--p, 0) * var(--target, 1)));
  background: var(--rust);
  will-change: transform;
}
.delta-bar-fill.legacy    { background: var(--rust); opacity: 0.7; --target: 0.20; }
.delta-bar-fill.operator  { background: var(--electric); --target: 0.80; }

.thesis__delta-metrics {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hair-dark);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.thesis__delta-metrics .mono-sm { color: var(--mute-dark); }
.thesis__delta-metrics .metric-value {
  font-family: var(--fs-display);
  font-size: 20px; font-weight: 500;
  color: var(--paper); margin-top: 4px;
}

.thesis__bottom {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--hair-dark);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 64px;
}

/* -- PIPELINE --------------------------------------------------- */
/* =============================================================
   PAGE DIVIDER — dramatic chapter-break band. Tall vertical gap
   + big roman-numeral centerpiece + hairline rules + end/start labels.
   Transparent bg so the shader keeps flowing behind.
   ============================================================= */
.page-divider {
  position: relative;
  z-index: 2;
  padding: clamp(140px, 20vh, 220px) var(--gutter);
  pointer-events: none;
}
.page-divider__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* Giant roman-numeral chapter mark */
.page-divider__mark {
  font-family: var(--fs-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(96px, 14vw, 180px);
  line-height: 0.9;
  letter-spacing: 0.05em;
  color: var(--paper);
  text-shadow:
    0 4px 40px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(217, 75, 31, 0.2);
  background: linear-gradient(180deg,
    rgba(244, 241, 234, 0.96) 0%,
    rgba(217, 75, 31, 0.85) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Horizontal rule row: pip + rule + "CHAPTER BREAK" + rule + pip */
.page-divider__rule-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--fs-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rust);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.page-divider__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(217, 75, 31, 0.5) 20%,
    rgba(217, 75, 31, 0.9) 50%,
    rgba(217, 75, 31, 0.5) 80%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(217, 75, 31, 0.3);
}
.page-divider__pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 14px rgba(217, 75, 31, 0.75), 0 0 24px rgba(217, 75, 31, 0.4);
  flex-shrink: 0;
}
.page-divider__chapter {
  flex-shrink: 0;
  padding: 0 4px;
  color: var(--rust);
}

/* End / Begins labels row */
.page-divider__labels {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fs-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.page-divider__label {
  color: rgba(244, 241, 234, 0.5);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.page-divider__label--accent {
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(217, 75, 31, 0.4), 0 1px 6px rgba(0, 0, 0, 0.6);
}
.page-divider__label-title {
  font-family: var(--fs-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
  margin-left: 10px;
}

@media (max-width: 720px) {
  .page-divider { padding: 96px var(--gutter); }
  .page-divider__mark { font-size: clamp(72px, 20vw, 120px); }
  .page-divider__inner { gap: 24px; }
  .page-divider__rule-row,
  .page-divider__labels { font-size: 9px; letter-spacing: 0.18em; }
  .page-divider__chapter { display: none; }
  .page-divider__labels { flex-direction: column; gap: 8px; text-align: center; }
  .page-divider__label-title { font-size: 11px; margin-left: 0; }
}

/* Pipeline section sits over the unified shader (pages 1+2+3).
   Transparent bg + contain:none so the fixed canvas shows through;
   text inverted to light, with text-shadow for shader legibility.
   Border-top: same light hairline as page 2 (systems) uses, so the
   page-break between 2 and 3 matches the page-break between 1 and 2. */
section.slide-section.pipeline-sec,
section.slide-section.pipeline-sec.dark {
  background: transparent;
  contain: none;
  border-top: 1px solid var(--hair-dark);
}
.pipeline-sec {
  color: var(--paper);
}
.pipeline-sec .section-num__left,
.pipeline-sec .section-num__right { color: var(--mute-dark); }
.pipeline-sec .section-num__rule  { background: var(--hair-dark); }
.pipeline-sec .kicker { color: rgba(244, 241, 234, 0.55); }
.pipeline-sec .title {
  color: var(--paper);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.pipeline-sec .body-lg {
  color: rgba(244, 241, 234, 0.88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.pipeline-sec__head {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: 56px; margin-top: 28px; align-items: end;
}
.pipeline {
  position: relative; margin-top: 64px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.pipeline__line {
  position: absolute; top: 28px; left: 40px; right: 40px;
  height: 1px;
  background:
    linear-gradient(to right, rgba(244, 241, 234, 0.22), rgba(244, 241, 234, 0.22)) no-repeat left center;
  background-size: calc(var(--draw, 0) * 100%) 1px;
}
.pipeline__node {
  position: relative; z-index: 1;
  padding-right: 28px;
}
.pipeline__circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(18, 22, 30, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 241, 234, 0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fs-mono);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--paper);
  transition: transform 0.35s var(--ease), border-color 0.3s var(--ease);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.pipeline__node:hover .pipeline__circle { transform: scale(1.04); }
.pipeline__node--rust .pipeline__circle { border-color: var(--rust); color: var(--rust); }
.pipeline__node--electric .pipeline__circle { border-color: var(--electric); color: var(--electric); }
.pipeline__label {
  margin-top: 22px;
  font-family: var(--fs-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.pipeline__sub {
  margin-top: 8px;
  font-family: var(--fs-body);
  font-size: 14px; line-height: 1.55;
  color: rgba(244, 241, 234, 0.68);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.pipeline-sec__callout {
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--hair-dark);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.pipeline-sec__callout .mono-sm        { color: rgba(244, 241, 234, 0.55); }
.pipeline-sec__callout .mono-sm.ink    { color: var(--paper); }
.pipeline-sec__callout div:last-child  { text-align: right; }

/* -- PARTNERS SPLIT -------------------------------------------- */
.partners { background: var(--paper); }
.partners__split {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  min-height: 560px;
}
.partners__divider { background: var(--hair); }
.partners__col {
  padding: 0 48px 0 0;
  display: flex; flex-direction: column; gap: 20px;
}
.partners__col + .partners__col { padding: 0 0 0 48px; }

.partners__col-head {
  display: flex; justify-content: space-between; align-items: center;
}
.partners__col-head img { height: 54px; width: auto; }
.partners__col-head .tag-pill { white-space: nowrap; }

.partners__mini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 4px;
}
.partners__mini-cell {
  aspect-ratio: 1/1;
  background: var(--paper-deep);
  border: 1px solid var(--hair);
  position: relative; overflow: hidden;
}
.partners__mini-cell.rust { border-color: rgba(217, 75, 31, 0.3); background: rgba(217, 75, 31, 0.06); }
.partners__mini-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partners__mini-cell .label {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--fs-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust);
}
.partners__mini-cell.on-photo .label {
  color: var(--paper); text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.partners__foot {
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* -- EASTMAN DEEP DIVE ----------------------------------------- */
.eastman-deep { background: var(--graphite); color: var(--paper); border-top: 1px solid var(--hair-dark); }
.eastman-deep .kicker.rust { color: var(--rust); }
.eastman-deep__grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 48px;
  margin-top: 28px;
}
.eastman-deep__title {
  font-family: var(--fs-display);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 20px;
}
.eastman-deep__body {
  max-width: 40ch;
  color: rgba(244,241,234, 0.78);
  font-size: 16px; line-height: 1.55;
  margin-bottom: 24px;
}
.eastman-cats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
}
.eastman-cats__cell {
  padding: 12px 14px;
  background: var(--graphite);
}
.eastman-cats__cell.sub {
  border-left: 2px solid var(--rust);
}
.eastman-cats__num {
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rust);
}
.eastman-cats__name {
  margin-top: 4px;
  font-family: var(--fs-display);
  font-size: 17px; font-weight: 500;
}
.eastman-cats__sub {
  margin-top: 2px;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute-dark);
}

.eastman-deep__visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start;
}
.eastman-visual-hero {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
  background: rgba(217, 75, 31, 0.12);
  border: 1px solid rgba(217, 75, 31, 0.3);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.eastman-visual-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(217,75,31,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,75,31,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.eastman-visual-hero__label {
  position: relative; z-index: 1;
  font-family: var(--fs-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(217, 75, 31, 0.8);
}
.eastman-visual-cell {
  aspect-ratio: 4/3;
  background: rgba(217, 75, 31, 0.08);
  border: 1px solid rgba(217, 75, 31, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(217, 75, 31, 0.7);
  padding: 16px;
  text-align: center;
}

/* -- VX DEEP DIVE ---------------------------------------------- */
.vx-deep { background: var(--paper); }
.vx-deep__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  margin-top: 28px; align-items: start;
}
.vx-deep__logo-row {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
}
.vx-deep__logo-row img { height: 54px; width: auto; }
.vx-deep__logo-meta {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  border-left: 1px solid var(--hair);
  padding-left: 14px;
}
.vx-deep__headline {
  font-family: var(--fs-display);
  font-size: clamp(56px, 8vw, 104px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
}
.vx-deep__body { margin-top: 22px; max-width: 38ch; }
.vx-certs {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; max-width: 480px;
}
.vx-cert {
  border: 1px solid var(--hair);
  padding: 14px 18px;
}
.vx-cert__mark {
  font-family: var(--fs-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
}
.vx-cert__label {
  margin-top: 4px;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}

.vx-deep__image {
  position: relative;
  min-height: 560px;
  background: #0c0d11;
  overflow: hidden;
}
.vx-deep__image img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  transition: filter 1.2s var(--ease), transform 8s var(--ease);
  filter: grayscale(100%) contrast(1.1);
  transform: scale(1.02);
}
.vx-deep__image.in img { filter: grayscale(0%) contrast(1.02); transform: scale(1); }
.vx-deep__image-caption {
  margin-top: 12px;
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}

.vx-partners {
  margin-top: 48px;
}
.vx-partners__label {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 12px;
}
.vx-partners__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.vx-partners__cell {
  padding: 22px 22px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
}
.vx-partners__name { font-size: 24px; color: var(--ink); white-space: nowrap; }
.vx-partners__name.dunlop    { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.vx-partners__name.spalding  { font-family: 'DM Sans', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.vx-partners__name.slazenger { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em; font-style: italic; }
.vx-partners__name.yasaka    { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.vx-partners__cell .mono-sm { color: var(--mute); white-space: nowrap; }

/* -- FOOTPRINT / MAP ------------------------------------------- */
.footprint { background: var(--paper); }
.footprint__grid {
  display: grid; grid-template-columns: 2fr 5fr; gap: 64px;
  margin-top: 28px;
  align-items: start;
}
.footprint__list {
  border-top: 1px solid var(--hair);
}
.footprint__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px; align-items: start;
  transition: padding-left 0.3s var(--ease);
}
.footprint__row:hover { padding-left: 6px; }
.footprint__row-code {
  font-family: var(--fs-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--rust);
  padding-top: 6px;
}
.footprint__row-code.amber { color: var(--amber); }
.footprint__row-body {
  display: flex; flex-direction: column; gap: 4px;
}
.footprint__row-city {
  font-family: var(--fs-display);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.footprint__row-coord {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.footprint__title {
  font-size: clamp(32px, 4.2vw, 52px) !important;   /* slightly smaller so it fits on one line in the narrower left cell */
  line-height: 1.02;
  margin-bottom: 0;
}
.footprint__grid { margin-top: 0 !important; }
section.footprint {
  padding-top: clamp(48px, 6vh, 64px);
  padding-bottom: clamp(48px, 6vh, 64px);
}
.footprint__map {
  position: relative;
}
.footprint__map svg {
  width: 100%;
  height: auto;
  display: block;
  transform: translateX(clamp(120px, 13vw, 200px));   /* shift right only — size unchanged */
}
.footprint__map {
  margin-right: -8px;
  padding-left: clamp(16px, 3vw, 48px);
}

.footprint__foot {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 0.8fr;
  gap: 24px; align-items: end;
}

/* -- OPERATING STACK ------------------------------------------- */
.stack-sec { background: var(--graphite); color: var(--paper); }
.stack-sec .kicker.amber { color: var(--amber); }
.stack-sec__grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 48px;
  margin-top: 28px;
}
.stack-layers {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.stack-layer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--hair-dark);
  background: rgba(244,241,234, 0.02);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.stack-layer:hover {
  border-color: var(--amber);
  background: rgba(232, 179, 74, 0.06);
}
.stack-layer__code {
  font-family: var(--fs-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.05em;
}
.stack-layer__desc {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute-dark);
}
.stack-layer:last-child .stack-layer__desc { color: var(--amber); }
.stack-sec__viz {
  position: relative;
  min-height: 480px;
}
.stack-sec__viz svg { width: 100%; height: auto; max-height: 780px; }

/* Why matrix — pinned 2-phase 3+3 swap */
.why-pin-wrap {
  position: relative;
  height: 420vh;              /* longer pin for the circular gallery rotation */
}
.why-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  border-top: 1px solid var(--hair-dark);
}
.why-pin-inner > .why {
  height: 100%;
  border-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 8vh, 96px) 0;
}
.why-matrix {
  position: relative;
  margin-top: 36px;
  min-height: 280px;
}
.why-row {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
}
.why-row .why-cell {
  opacity: 0;
  transform: translateX(56px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  min-height: 260px;
  background: var(--graphite);
  will-change: transform;
}
.why-row .why-cell:nth-child(2) { transition-delay: 0.10s; }
.why-row .why-cell:nth-child(3) { transition-delay: 0.20s; }

/* Phase 1: row-1 slides in from right */
.why-pin-inner.why-phase-1 .why-row--1 .why-cell {
  opacity: 1;
  transform: translateX(0);
}

/* Phase 2: row-1 slides out left, row-2 slides in from right */
.why-pin-inner.why-phase-2 .why-row--1 .why-cell {
  opacity: 0;
  transform: translateX(-56px);
  transition-delay: 0s;
}
.why-pin-inner.why-phase-2 .why-row--1 .why-cell:nth-child(2) { transition-delay: 0.05s; }
.why-pin-inner.why-phase-2 .why-row--1 .why-cell:nth-child(3) { transition-delay: 0.10s; }
.why-pin-inner.why-phase-2 .why-row--2 .why-cell {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.25s;
}
.why-pin-inner.why-phase-2 .why-row--2 .why-cell:nth-child(2) { transition-delay: 0.35s; }
.why-pin-inner.why-phase-2 .why-row--2 .why-cell:nth-child(3) { transition-delay: 0.45s; }

.why-phase-indicator {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
  font-family: var(--fs-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.25);
  transition: color 0.3s var(--ease);
}
.why-pin-inner.why-phase-1 .why-phase-dot[data-phase="1"] { color: var(--amber); }
.why-pin-inner.why-phase-2 .why-phase-dot[data-phase="1"] { color: rgba(244, 241, 234, 0.3); }
.why-pin-inner.why-phase-2 .why-phase-dot[data-phase="2"] { color: var(--amber); }



/* Stat pin — reveals 04 WH / 04 CH / 02 BR one at a time as user scrolls */
.stat-pin-wrap {
  position: relative;
  height: 260vh;
  background: var(--paper);
  border-top: 1px solid var(--hair);
}
.stat-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
}
.stat-pin-inner .container { width: 100%; }
.stat-pin-label {
  text-align: center;
  margin-bottom: 40px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.stat-pin-inner.stat-1-in .stat-pin-label { opacity: 1; }

.stat-pin-inner .who__stat-bar {
  margin-top: 0;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
  width: 100%;
}
.stat-pin-inner .who__stat {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.stat-pin-inner.stat-1-in .stat-n-1,
.stat-pin-inner.stat-2-in .stat-n-2,
.stat-pin-inner.stat-3-in .stat-n-3 {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .stat-pin-wrap { height: auto; }
  .stat-pin-inner { position: relative; height: auto; padding: 64px var(--gutter); }
  .stat-pin-inner .who__stat { opacity: 1; transform: none; }
  .stat-pin-label { opacity: 1; }
}
@media (max-width: 900px) {
  .stat-pin-wrap { height: auto; }
  .stat-pin-inner { position: relative; height: auto; padding: 64px var(--gutter); }
  .stat-pin-inner .who__stat { opacity: 1; transform: none; }
  .stat-pin-label { opacity: 1; }
}

/* Pinned scroll reveal wrapper — gives scroll room while section sticks */
.stack-pin-wrap {
  position: relative;
  height: 320vh;
}
.stack-pin-wrap > .stack-sec {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  padding: clamp(72px, 10vh, 120px) 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.stack-pin-wrap > .stack-sec > .container {
  width: 100%;
}

/* Stack plates — fade in only (can't transform SVG <g> without clobbering
   the positional translate attribute) */
.stack-plate {
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.stack-sec.plate-1-in .stack-plate[data-plate="1"],
.stack-sec.plate-2-in .stack-plate[data-plate="2"],
.stack-sec.plate-3-in .stack-plate[data-plate="3"],
.stack-sec.plate-4-in .stack-plate[data-plate="4"] {
  opacity: 1;
}

/* Highlight the corresponding layer row in the left list */
.stack-layers .stack-layer {
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.stack-sec.plate-1-in .stack-layers .stack-layer:nth-child(4) { border-color: var(--paper); }
.stack-sec.plate-2-in .stack-layers .stack-layer:nth-child(3) { border-color: var(--paper); }
.stack-sec.plate-3-in .stack-layers .stack-layer:nth-child(2) { border-color: var(--paper); }
.stack-sec.plate-4-in .stack-layers .stack-layer:nth-child(1) { border-color: var(--amber); background: rgba(232, 179, 74, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .stack-pin-wrap { height: auto; }
  .stack-pin-wrap > .stack-sec { position: relative; height: auto; max-height: none; }
  .stack-plate { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .stack-pin-wrap { height: auto; }
  .stack-pin-wrap > .stack-sec { position: relative; height: auto; max-height: none; }
  .stack-plate { opacity: 1; transform: none; }
}

/* -- CATEGORY BREADTH ------------------------------------------ */
.cat-breadth { background: var(--paper); }
.cat-breadth__head {
  display: grid; grid-template-columns: 8fr 4fr; gap: 40px;
  align-items: end; margin-top: 24px;
}
.cat-breadth__dual {
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.cat-col__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rust);
  margin-bottom: 14px;
}
.cat-col__head.electric { border-bottom-color: var(--electric); }
.cat-col__name {
  font-family: var(--fs-mono);
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rust);
}
.cat-col__head.electric .cat-col__name { color: var(--electric); }
.cat-col__count {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.cat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hair);
}
.cat-cell {
  padding: 16px 14px;
  background: var(--paper);
}
.cat-cell.imported {
  border-left: 2px solid var(--electric);
}
.cat-cell__num {
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.cat-cell.imported .cat-cell__num { color: var(--electric); }
.cat-cell__name {
  margin-top: 4px;
  font-family: var(--fs-display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em;
}
.cat-cell__sub {
  margin-top: 4px;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}

/* -- CHANNELS / MARKETPLACES ----------------------------------- */
.channels { background: var(--paper); }
.channels__grid {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.channel-card {
  padding: 28px 26px 24px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 18px;
  min-height: 236px;
  transition: background 0.3s var(--ease);
}
.channel-card:hover { background: var(--paper-deep); }
.channel-card__top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.channel-card__logo {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-start;
  /* Fixed 64px container — per-logo optical sizing sits inside */
  height: 64px;
}
.channel-card__logo img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 44px; /* default */
  object-fit: contain;
  display: block;
}
/* Per-logo optical sizing — nudge individually to feel equal weight */
.channel-card__logo[data-logo="amazon"]   img { max-height: 44px; }
.channel-card__logo[data-logo="flipkart"] img { max-height: 62px; }
.channel-card__logo[data-logo="shopify"]  img { max-height: 40px; }

/* Myntra (incoming band, different context) */
.channels__incoming-left img[data-logo="myntra"] {
  height: auto;
  max-height: 28px;
  width: auto;
}
.channel-card__logo .offline-word {
  font-family: var(--fs-serif);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.channel-card__logo .offline-word .dot { background: var(--rust); width: 6px; height: 6px; border-radius:50%; display: inline-block; margin-left: 2px; margin-right: 0; }

.channel-card__foot {
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 10px;
}
.channel-card__share {
  font-family: var(--fs-display);
  font-size: 38px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em;
}
.channel-card__meta {
  text-align: right;
}

.channels__incoming {
  margin-top: 24px;
  padding: 20px 26px;
  border: 1px dashed var(--amber);
  background: rgba(242, 167, 54, 0.04);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 28px; align-items: center;
}
.channels__incoming-left {
  display: flex; align-items: center; gap: 18px;
}
.channels__incoming-left img { height: 26px; width: auto; }
.channels__incoming-sep { width: 1px; height: 28px; background: var(--hair); }
.channels__incoming-text {
  font-family: var(--fs-serif);
  font-style: italic; font-weight: 400;
  font-size: 20px; letter-spacing: -0.01em;
  color: var(--mute);
  line-height: 1.3;
}

.channels__foot {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}

/* -- WHY ------------------------------------------------------- */
.why { background: var(--graphite); color: var(--paper); border-top: 1px solid var(--hair-dark); }
.why-grid {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
}
.why-cell {
  padding: 32px 28px;
  background: var(--graphite);
  transition: background 0.35s var(--ease);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 260px;
}
.why-cell:hover { background: #141820; }
.why-cell__label {
  font-family: var(--fs-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.why-cell__head {
  font-family: var(--fs-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--paper);
}
.why-cell__body {
  font-family: var(--fs-body);
  font-size: 14.5px; line-height: 1.6;
  color: rgba(244,241,234, 0.6);
  margin: 0;
}

/* -- PROOF ----------------------------------------------------- */
.proof { background: var(--paper); }
.proof__intro { color: var(--mute); max-width: 60ch; margin-top: 20px; }
.proof__big-stats {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.big-stat {
  padding: 40px 28px;
  border-left: 1px solid var(--hair);
}
.big-stat:first-child { border-left: 0; padding-left: 0; }
.big-stat__num {
  font-family: var(--fs-display);
  font-size: clamp(72px, 10vw, 156px);
  font-weight: 700; line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
  display: inline-flex; align-items: flex-start;
}
.big-stat__sup {
  font-size: 0.25em;
  font-weight: 600;
  margin-top: 0.22em; margin-left: 0.08em;
  color: var(--mute);
  letter-spacing: -0.02em;
}
.big-stat__label {
  margin-top: 16px;
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}

.proof__small-stats {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.small-stat__label {
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 8px;
}
.small-stat__num {
  font-family: var(--fs-display);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em; line-height: 1;
  color: var(--ink);
}
.small-stat__num .pct { font-size: 0.48em; font-weight: 500; color: var(--mute); margin-left: 2px; }
.small-stat__sub {
  margin-top: 8px;
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}

.timeline {
  margin-top: 56px;
}
.timeline__label {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 16px;
}
.timeline__track {
  position: relative;
  padding-top: 12px;
}
.timeline__track::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 16px;
  height: 1px;
  background: linear-gradient(to right, var(--hair), var(--hair)) no-repeat left center;
  background-size: calc(var(--draw, 0) * 100%) 1px;
}
.timeline__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  position: relative;
}
.timeline__node {
  display: flex; flex-direction: column; gap: 6px;
}
.timeline__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
  margin-top: 8px; margin-bottom: 8px;
}
.timeline__dot.rust { background: var(--rust); }
.timeline__dot.electric { background: var(--electric); }
.timeline__dot.amber { background: var(--amber); }
.timeline__year {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.timeline__text {
  font-family: var(--fs-mono);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--ink);
}

/* -- LEADERSHIP ------------------------------------------------ */
.leadership { background: var(--paper); }
.leadership__head {
  display: grid; grid-template-columns: 7fr 5fr; gap: 56px;
  margin-top: 28px; align-items: end;
}
.leadership__grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.leader-card { display: flex; flex-direction: column; gap: 14px; }
.leader-card__portrait {
  aspect-ratio: 1/1;
  background: var(--paper-deep);
  border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.leader-card__role {
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.leader-card__name {
  font-family: var(--fs-display);
  font-size: 22px; font-weight: 500;
  margin-top: 4px;
}
.leader-card__bio {
  margin-top: 4px;
  font-size: 14px; line-height: 1.5;
  color: var(--mute);
}

/* -- ROADMAP / WHAT'S NEXT ------------------------------------- */
.roadmap { background: var(--graphite); color: var(--paper); border-top: 1px solid var(--hair-dark); }
.roadmap__grid {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.roadmap__hero {
  font-family: var(--fs-display);
  font-size: clamp(56px, 6.8vw, 92px);
  font-weight: 600;
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0 0 28px;
}
.roadmap__hero .em {
  color: var(--amber);
  font-style: italic; font-weight: 500;
}
.roadmap__list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hair-dark);
}
.roadmap__row {
  padding: 24px 0;
  border-bottom: 1px solid var(--hair-dark);
  display: grid; grid-template-columns: 110px 1fr 180px;
  gap: 24px; align-items: baseline;
}
.roadmap__when {
  font-family: var(--fs-mono);
  font-size: 15px; font-weight: 500;
  color: var(--amber);
}
.roadmap__title {
  font-family: var(--fs-display);
  font-size: clamp(20px, 2.2vw, 28px); font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.roadmap__sub {
  margin-top: 4px;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(244,241,234, 0.6);
  max-width: 36ch;
}
.roadmap__status {
  text-align: right;
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute-dark);
}

/* -- CONTACT --------------------------------------------------- */
.contact { background: var(--paper); }
.contact__grid {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: 56px;
  margin-top: 28px;
}
.contact__headline {
  font-family: var(--fs-display);
  font-size: clamp(56px, 10.4vw, 152px);
  font-weight: 600; line-height: 0.98;
  letter-spacing: -0.038em;
  margin: 32px 0 28px;
}
.contact__headline .reveal-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.contact__headline .reveal-line { display: block; }
.contact__body {
  color: var(--mute); max-width: 40ch;
  margin-top: 20px;
}
.contact__sign-off {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink);
  font-family: var(--fs-display);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em;
}

.contact__details {
  border-top: 1px solid var(--ink);
}
.contact__row {
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}
.contact__row .mono-label { margin-bottom: 4px; }
.contact__row .value {
  font-family: var(--fs-display);
  font-size: 21px; font-weight: 500;
  letter-spacing: -0.01em;
}
.contact__row .mono {
  font-family: var(--fs-mono);
  font-size: 18px; font-weight: 500;
}
.contact__row a { border-bottom: 1px solid var(--hair-strong); }
.contact__row a:hover { color: var(--rust); border-color: var(--rust); }

/* -- FOOTER ---------------------------------------------------- */
/* Footer matches the Contact page (cream/paper) so there's no jarring
   dark band at the very end of the deck. */
.footer {
  background: var(--paper);
  color: rgba(14, 17, 22, 0.55);
  padding: 28px 0;
  border-top: 1px solid var(--hair);
}
.footer__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-family: var(--fs-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.footer__inner > :nth-child(2) { text-align: center; }
.footer__inner > :nth-child(3) { text-align: right; }

/* =============================================================
   SEVEN SYSTEMS RADIAL — slide 02
   Transparent bg so the unified shader flows through from hero.
   Override .slide-section.dark's opaque graphite bg AND remove
   contain:paint (which would otherwise isolate a stacking context
   that blocks the fixed canvas underneath).
   ============================================================= */
section.slide-section.systems,
section.slide-section.systems.dark {
  background: transparent;
  contain: none;
}
.systems {
  position: relative;
  color: var(--paper);
  border-top: 1px solid var(--hair-dark);
  overflow: hidden;
}
.systems > .container { position: relative; }

/* Text-shadow on heading and copy so they stay legible against the shader */
.systems__head-title,
.systems__standfirst,
.systems__subhead {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.systems .section-num__left,
.systems .section-num__right { color: var(--mute-dark); }
.systems .section-num__rule { background: var(--hair-dark); }

/* Page 2 is a two-column grid: copy on the left, orbit on the right */
.systems > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.systems > .container > .section-num { grid-column: 1 / -1; }
.systems > .container > .systems__foot { grid-column: 1 / -1; }

.systems__head {
  max-width: 560px;
  margin: 0;
  text-align: left;
}
.systems__head .kicker { margin: 0 0 20px; }
.systems__head-title {
  font-family: var(--fs-display);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 20px;
}
.systems__head-title .serif-italic { color: var(--rust); }
.systems__subhead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.6);
  max-width: 52ch;
  margin: 16px 0 0;
}

/* Standfirst — editorial lead paragraph under the main heading */
.systems__standfirst {
  font-family: var(--fs-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(244, 241, 234, 0.85);
  max-width: 50ch;
  margin: 10px 0 0;
}

@media (max-width: 960px) {
  .systems > .container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .systems__head { max-width: 720px; text-align: center; margin: 0 auto; }
  .systems__head .kicker { margin: 0 auto 18px; }
  .systems__subhead,
  .systems__standfirst { margin-left: auto; margin-right: auto; }
}
.systems__standfirst-em {
  color: var(--paper);
  font-weight: 400;
}

.wheel-wrap {
  position: relative;
  width: min(720px, 85vw);
  height: min(720px, 85vw);
  margin: 24px auto 32px;
  --wheel-rot: 0deg;
}
.wheel-rot {
  position: absolute; inset: 0;
  transform: rotate(var(--wheel-rot));
  transition: transform 0.05s linear;
}

.ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--hair-dark);
  pointer-events: none;
}
.ring-1 { width: 31%; height: 31%; border-color: rgba(244,241,234, 0.18); }
.ring-2 { width: 53%; height: 53%; }
.ring-3 { width: 72%; height: 72%; }
.ring-4 { width: 94%; height: 94%; border-style: dashed; opacity: 0.35; }

.hub {
  position: absolute; top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--graphite);
  border: 1px solid var(--rust);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 4;
  box-shadow:
    0 0 60px rgba(217, 75, 31, 0.18),
    inset 0 0 30px rgba(217, 75, 31, 0.05);
}
.hub-bolt {
  color: var(--rust);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(217, 75, 31, 0.5));
}
.hub-wordmark {
  font-family: var(--fs-display);
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1; color: var(--paper);
}
.hub-wordmark .tld { color: var(--rust); }
.hub-meta {
  margin-top: 10px;
  font-family: var(--fs-mono);
  font-size: clamp(7px, 0.7vw, 9px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
}

.tick-ring, .spoke-line-ring {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; z-index: 2;
}
.tick {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 12px;
  background: var(--paper);
  opacity: 0.55;
  transform-origin: 50% 0;
}
.spoke-line-ring { z-index: 1; }
.spoke-line {
  position: absolute; top: 0; left: 0;
  width: 1px;
  background-image: linear-gradient(to bottom,
    rgba(244, 241, 234, 0.22) 0,
    rgba(244, 241, 234, 0.22) 3px,
    transparent 3px, transparent 8px);
  background-size: 1px 8px;
  background-repeat: repeat-y;
  transform-origin: 50% 0;
}

/* 7 angles = 360/7 = 51.43° each */
.t1, .sl1 { transform: rotate(0deg)     translateY(var(--tick-r)); }
.t2, .sl2 { transform: rotate(51.43deg)  translateY(var(--tick-r)); }
.t3, .sl3 { transform: rotate(102.86deg) translateY(var(--tick-r)); }
.t4, .sl4 { transform: rotate(154.29deg) translateY(var(--tick-r)); }
.t5, .sl5 { transform: rotate(205.71deg) translateY(var(--tick-r)); }
.t6, .sl6 { transform: rotate(257.14deg) translateY(var(--tick-r)); }
.t7, .sl7 { transform: rotate(308.57deg) translateY(var(--tick-r)); }

.wheel-wrap { --tick-r: -26.5%; --spoke-h: 14.5%; --label-r: 43%; }
.spoke-line { height: var(--spoke-h); }

.label {
  position: absolute; top: 50%; left: 50%;
  width: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  transition: transform 0.3s var(--ease);
}
.label-inner {
  display: flex; flex-direction: column; gap: 4px;
}
.lbl-num {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}
.label.electric .lbl-num { color: var(--electric); }
.lbl-title {
  font-family: var(--fs-display);
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--paper);
}
.lbl-meta {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(244, 241, 234, 0.55);
  line-height: 1.4;
}

/* Label positions (approx polar → cartesian at radius 43%) */
.l1 { margin-top: -43%; margin-left: 0; }
.l2 { margin-top: -27%; margin-left: 34%; }
.l3 { margin-top:  9.6%; margin-left: 42%; }
.l4 { margin-top:  39%; margin-left: 19%; }
.l5 { margin-top:  39%; margin-left: -19%; }
.l6 { margin-top:  9.6%; margin-left: -42%; }
.l7 { margin-top: -27%; margin-left: -34%; }

/* Labels counter-rotate so text stays upright relative to viewport */
.label-inner {
  transform: rotate(calc(-1 * var(--wheel-rot)));
  transition: transform 0.05s linear;
}
.wheel-wrap { --wheel-rot: 0deg; }

/* =============================================================
   ORBITS — two-ring orbital system (replaces static wheel on page 2)
   Inner orbit (electric) · 3 items · clockwise
   Outer orbit (rust)     · 4 items · counter-clockwise
   ============================================================= */
.orbits-wrap {
  position: relative;
  width: min(680px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
@media (max-width: 960px) {
  .orbits-wrap { width: min(680px, 88vw); margin: 32px auto 0; }
}

/* Glowing orbit paths — pulse softly */
.orbit-path {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-path--inner {
  width: 340px; height: 340px;
  background: radial-gradient(circle, transparent 38%, rgba(88, 166, 255, 0.04) 60%, rgba(88, 166, 255, 0.12) 100%);
  box-shadow:
    inset 0 0 40px rgba(88, 166, 255, 0.12),
    0 0 60px rgba(88, 166, 255, 0.10);
  border: 1px solid rgba(88, 166, 255, 0.25);
  animation: orbitPulse 4s ease-in-out infinite;
}
.orbit-path--outer {
  width: 620px; height: 620px;
  background: radial-gradient(circle, transparent 42%, rgba(217, 75, 31, 0.04) 65%, rgba(217, 75, 31, 0.10) 100%);
  box-shadow:
    inset 0 0 60px rgba(217, 75, 31, 0.10),
    0 0 80px rgba(217, 75, 31, 0.08);
  border: 1px solid rgba(217, 75, 31, 0.22);
  animation: orbitPulse 4s ease-in-out infinite 1.5s;
}
@keyframes orbitPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Central hub */
.orbit-hub {
  position: relative;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(88, 166, 255, 0.07) 0%, transparent 52%),
    radial-gradient(circle at 68% 78%, rgba(217, 75, 31, 0.10) 0%, transparent 56%),
    linear-gradient(155deg, #1b1e27 0%, #0a0d12 100%);
  border: 1px solid rgba(244, 241, 234, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(217, 75, 31, 0.13),
    inset 0 1px 0 rgba(244, 241, 234, 0.05),
    inset 0 0 32px rgba(0, 0, 0, 0.45);
}
.orbit-hub::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, 0.055);
  pointer-events: none;
}
.orbit-hub__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  animation: hubPulse 3.4s ease-in-out infinite;
}
.orbit-hub__pulse--rust     { background: rgba(217, 75, 31, 0.28); }
.orbit-hub__pulse--electric { background: rgba(88, 166, 255, 0.20); animation-delay: 1.4s; }
@keyframes hubPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.orbit-hub__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
}
.orbit-hub__bolt {
  filter: drop-shadow(0 0 10px rgba(217, 75, 31, 0.5)) drop-shadow(0 0 6px rgba(88, 166, 255, 0.28));
}
.orbit-hub__wordmark {
  font-family: var(--fs-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
  line-height: 1;
}
.orbit-hub__wordmark .tld { color: var(--rust); }
.orbit-hub__meta {
  position: relative;
  font-family: var(--fs-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  padding-top: 5px;
}
.orbit-hub__meta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background: rgba(244, 241, 234, 0.18);
}

/* Orbiting items */
.orbit-item {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px;
  height: 56px;
  /* --ox / --oy set by JS each frame */
  transform: translate(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 0px)));
  z-index: 10;
  will-change: transform;
}
.orbit-item__disc {
  width: 100%;
  height: 100%;
  background: rgba(18, 22, 30, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 241, 234, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s var(--ease);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.orbit-item--electric .orbit-item__disc { border-color: rgba(88, 166, 255, 0.35); }
.orbit-item--rust     .orbit-item__disc { border-color: rgba(217, 75, 31, 0.35); }

.orbit-item:hover { z-index: 30; }
.orbit-item:hover .orbit-item__disc { transform: scale(1.25); }
.orbit-item--electric:hover .orbit-item__disc {
  border-color: var(--electric);
  box-shadow:
    0 0 30px rgba(88, 166, 255, 0.45),
    0 0 60px rgba(88, 166, 255, 0.2);
  color: var(--electric);
}
.orbit-item--rust:hover .orbit-item__disc {
  border-color: var(--rust);
  box-shadow:
    0 0 30px rgba(217, 75, 31, 0.45),
    0 0 60px rgba(217, 75, 31, 0.2);
  color: #ff7a4a;
}

/* Labels — ALWAYS visible, editorial styling.
   Positioned below each disc. Stay upright because the wrapper only
   translates (no rotation) so text orientation is preserved. */
.orbit-item__label {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.3s var(--ease);
  /* Gentle fade so the foreground disc feels primary */
  opacity: 0.88;
}
.orbit-item:hover .orbit-item__label {
  opacity: 1;
}
.orbit-item__num {
  font-family: var(--fs-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
  line-height: 1;
}
.orbit-item--electric .orbit-item__num { color: rgba(88, 166, 255, 0.78); }
.orbit-item--rust     .orbit-item__num { color: rgba(217, 75, 31, 0.82); }
.orbit-item__name {
  font-family: var(--fs-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--paper);
  line-height: 1.2;
  /* Subtle shadow lifts the text off the dark section */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Mobile fallback — stack vertically, disable motion */
@media (max-width: 720px) {
  .orbits-wrap {
    width: auto;
    height: auto;
    flex-direction: column;
    gap: 14px;
    padding: 40px 0;
  }
  .orbit-path { display: none; }
  .orbit-hub {
    position: relative;
    order: -1;
    margin-bottom: 18px;
  }
  .orbit-item {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 320px;
    height: auto;
    transform: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(18, 22, 30, 0.6);
    border: 1px solid rgba(244, 241, 234, 0.1);
    border-radius: 999px;
  }
  .orbit-item--electric { border-color: rgba(88, 166, 255, 0.3); }
  .orbit-item--rust     { border-color: rgba(217, 75, 31, 0.3); }
  .orbit-item__disc {
    width: 36px; height: 36px;
    flex-shrink: 0;
    box-shadow: none;
  }
  .orbit-item__label {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    align-items: flex-start;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-path { animation: none; }
  .orbit-hub__pulse { animation: none; opacity: 0.6; }
}

.systems__foot {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--hair-dark);
  display: flex; justify-content: space-between;
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
}

/* =============================================================
   SCROLL PROGRESS BAR (fixed top)
   ============================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 1.5px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Floating page counter — bottom-right, mono, dim. */
.page-counter {
  position: fixed;
  right: 24px; bottom: 22px;
  z-index: 50;
  font-family: var(--fs-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14, 17, 22, 0.42);
  pointer-events: none;
  user-select: none;
  transition: color 220ms var(--ease, ease);
}
.page-counter.on-dark {
  color: rgba(244, 241, 234, 0.45);
}
@media (max-width: 640px) {
  .page-counter { right: 14px; bottom: 14px; font-size: 10px; }
}

/* =============================================================
   LINK UNDERLINE DRAW (nav + inline)
   ============================================================= */
.nav__links a:not(.nav__cta) {
  position: relative;
  padding-bottom: 3px;
}
.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.22s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); }

a.underline-draw {
  position: relative;
  display: inline-block;
}
a.underline-draw::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.22s var(--ease);
}
a.underline-draw:hover::after { transform: scaleX(1); }

/* =============================================================
   VX EDITORIAL TWO-COLUMN (Kinfolk / Porsche-annual feel)
   ============================================================= */
.vx-editorial {
  position: relative;
  background: #0a0a0c;
  color: var(--paper);
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  contain: layout paint;
  border-top: 1px solid var(--hair-dark);
}

.vx-editorial__chrome {
  position: absolute;
  top: 96px; left: 0; right: 0;
  padding: 0 var(--gutter);
  z-index: 3;
  display: flex; justify-content: space-between;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.48);
}
.vx-ed__dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.vx-ed__dot-electric { background: var(--electric); }
.vx-ed__dot-rust     { background: var(--rust); }

.vx-editorial__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 100vh;
  align-items: stretch;
  gap: 0;
}

.vx-editorial__left {
  padding: 160px var(--gutter) 120px;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 700px;
  position: relative;
  z-index: 2;
}

.vx-editorial__label {
  font-family: var(--fs-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
  margin-bottom: 32px;
}

.vx-editorial__headline {
  font-family: var(--fs-display);
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 36px;
}
.vx-editorial__headline .vx-ed__word,
.vx-editorial__headline .vx-ed__line2 {
  display: block;
}
.vx-editorial__headline .vx-ed__word {
  font-style: normal;
  font-weight: 500;
}
.vx-editorial__headline .vx-ed__line2 {
  margin-top: 4px;
}
.vx-editorial__headline .vx-ed__is {
  font-style: normal;
  font-weight: 500;
  color: var(--paper);
}
.vx-editorial__headline .vx-ed__possible {
  font-family: var(--fs-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--electric);
  letter-spacing: -0.015em;
}

.vx-editorial__body {
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(244, 241, 234, 0.68);
  margin: 0 0 40px;
}
.vx-editorial__body b {
  color: var(--paper);
  font-weight: 600;
}

.vx-editorial__certs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vx-editorial__cert {
  padding: 10px 14px;
  border: 1px solid rgba(244, 241, 234, 0.18);
  min-width: 64px;
}
.vx-editorial__cert-mark {
  font-family: var(--fs-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.vx-editorial__cert-label {
  font-family: var(--fs-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
  margin-top: 2px;
}

.vx-editorial__right {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 700px;
  background: #0a0a0c;
}
.vx-editorial__image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vx-editorial__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  /* Grayscale baked into the image file — no runtime filter needed */
}
/* Hard edge between text column and photo — no fade. */

.vx-editorial__foot {
  position: absolute;
  left: 0; right: 0; bottom: 32px;
  padding: 0 var(--gutter);
  z-index: 3;
  display: flex; justify-content: space-between;
  font-family: var(--fs-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.42);
}

@media (max-width: 900px) {
  .vx-editorial__grid { grid-template-columns: 1fr; min-height: auto; }
  .vx-editorial__right { height: 56vh; min-height: 420px; }
  .vx-editorial__left  { padding: 120px var(--gutter) 60px; }
}

/* =============================================================
   VX FULL-BLEED DRAMATIC LAYOUT (legacy — unused)
   ============================================================= */
.vx-dramatic {
  position: relative;
  background: #000;
  color: var(--paper);
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  border-top: 1px solid var(--hair-dark);
}
.vx-dramatic__bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.vx-dramatic__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  filter: grayscale(100%) contrast(1.05);
}
.vx-dramatic__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 65%, transparent 100%),
    linear-gradient(0deg, rgba(0,0,0,0.5), transparent 40%);
}
.vx-dramatic__chrome {
  position: absolute; top: 96px; left: 0; right: 0;
  padding: 0 var(--gutter);
  z-index: 2;
  display: flex; justify-content: space-between;
  font-family: var(--fs-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
}
.vx-dramatic__chrome .dot-electric {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--electric);
  margin-right: 8px; vertical-align: middle;
}
.vx-dramatic__body {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px var(--gutter) 64px;
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: flex-end;
}
.vx-dramatic__label {
  font-family: var(--fs-mono);
  font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  margin-bottom: 14px;
}
.vx-dramatic__headline {
  font-family: var(--fs-display);
  font-size: clamp(72px, 12vw, 196px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0 0 32px;
}
.vx-dramatic__headline .em-italic {
  font-family: var(--fs-display);
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
}
.vx-dramatic__headline .possible {
  color: var(--electric);
  font-weight: 500;
}
.vx-dramatic__body-text {
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(244, 241, 234, 0.88);
  margin: 0 0 36px;
}
.vx-dramatic__body-text b { color: var(--paper); font-weight: 600; }

.vx-dramatic__certs {
  display: flex; gap: 10px;
  margin-bottom: 40px;
}
.vx-dramatic__cert {
  padding: 12px 18px;
  border: 1px solid rgba(244, 241, 234, 0.22);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vx-dramatic__cert-mark {
  font-family: var(--fs-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.vx-dramatic__cert-label {
  font-family: var(--fs-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  margin-top: 2px;
}

.vx-dramatic__foot {
  position: absolute; left: 0; right: 0; bottom: 32px;
  padding: 0 var(--gutter);
  z-index: 2;
  display: flex; justify-content: space-between;
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.45);
}

/* =============================================================
   PIPELINE — cooler motion (orbit dot + node pulse)
   ============================================================= */
.pipeline__orbit-track {
  position: absolute; top: 0; left: 40px; right: 40px;
  height: 56px;
  pointer-events: none;
  z-index: 2;
}
.pipeline__orbit-dot {
  position: absolute;
  top: 22px; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rust);
  opacity: 0;
  box-shadow: 0 0 12px rgba(217, 75, 31, 0.5);
}
.in .pipeline__orbit-dot {
  animation: orbitDot 7s var(--ease) 0.6s forwards;
}
@keyframes orbitDot {
  0%  { left: 0;    opacity: 0;   background: var(--rust);     box-shadow: 0 0 10px rgba(217, 75, 31, 0.6); }
  8%  { opacity: 1; }
  50% { background: var(--rust); }
  75% { background: var(--electric); box-shadow: 0 0 10px rgba(30, 127, 255, 0.6); }
  100%{ left: 100%; opacity: 0; background: var(--electric); box-shadow: 0 0 16px rgba(30, 127, 255, 0.7); }
}

.pipeline__circle {
  position: relative;
}
.pipeline__circle::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(0.6);
}
.in .pipeline__circle::before {
  animation: pulseRing 1.8s var(--ease) 0.2s 2;
}
@keyframes pulseRing {
  0% { opacity: 0.6; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* =============================================================
   REVEAL ANIMATIONS — progressive enhancement pattern
   ============================================================= */

/* Default state: everything visible. No-JS and stale-render-safe. */
.reveal,
.reveal-line {
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal-line { display: block; }
/* padding-bottom + negative margin gives descenders (g, y, p, q) room
   so the overflow:hidden doesn't clip the tail of "forge", "field", etc. */
.reveal-line-wrap {
  overflow: hidden;
  display: block;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

/* Only after JS sets html.js-ready do we hide-then-reveal */
html.js-ready .reveal:not(.in) {
  opacity: 0;
  transform: translateY(20px);
}
html.js-ready .reveal-line:not(.in) {
  opacity: 0;
  transform: translateY(100%);
}

html.js-ready .reveal.in,
html.js-ready .reveal-line.in {
  opacity: 1;
  transform: translateY(0);
}

/* Draw-line support (CSS var --draw goes from 0 to 1) */
.draw-line { --draw: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .delta-bar-fill.legacy   { transform: scaleX(0.08); }
  .delta-bar-fill.operator { transform: scaleX(0.96); }
  .draw-line { --draw: 1; }
  .vx-deep__image img { filter: grayscale(0%); transform: scale(1); }
  .scroll-cue__line { animation: none; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
  .hero__body { grid-template-columns: 1fr; grid-template-areas: "kick" "title" "side"; gap: 28px; }
  .who__grid,
  .pipeline-sec__head,
  .footprint__grid,
  .stack-sec__grid,
  .cat-breadth__head,
  .leadership__head,
  .contact__grid,
  .roadmap__grid { grid-template-columns: 1fr; gap: 32px; }
  .pipeline { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pipeline__line { display: none; }
  .partners__split { grid-template-columns: 1fr; }
  .partners__col { padding: 0; }
  .partners__col + .partners__col { padding: 32px 0 0; border-top: 1px solid var(--hair); }
  .partners__divider { display: none; }
  .eastman-deep__grid,
  .vx-deep__grid { grid-template-columns: 1fr; }
  .cat-breadth__dual { grid-template-columns: 1fr; }
  .channels__grid { grid-template-columns: 1fr 1fr; }
  .vx-partners__grid { grid-template-columns: 1fr 1fr; }
  .proof__big-stats { grid-template-columns: 1fr; }
  .big-stat { border-left: 0; border-top: 1px solid var(--hair); padding: 40px 0; }
  .big-stat:first-child { border-top: 0; padding-top: 0; }
  .proof__small-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .timeline__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .leadership__grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .hero__meta, .thesis__bottom, .pipeline-sec__callout, .footprint__foot, .channels__foot { grid-template-columns: 1fr 1fr; gap: 20px; }
  .roadmap__row { grid-template-columns: 90px 1fr; row-gap: 6px; }
  .roadmap__status { grid-column: 1 / -1; text-align: left; }
  .footer__inner { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .footer__inner > * { text-align: center !important; }
}

@media (max-width: 640px) {
  .pipeline { grid-template-columns: 1fr; }
  .channels__grid, .vx-partners__grid { grid-template-columns: 1fr; }
  .leadership__grid, .proof__small-stats { grid-template-columns: 1fr; }
  .timeline__grid { grid-template-columns: 1fr; }
  .hero__meta, .thesis__bottom, .pipeline-sec__callout, .footprint__foot, .channels__foot { grid-template-columns: 1fr; }
  .thesis__grid { grid-template-columns: 1fr; gap: 36px; }
  .thesis__delta-metrics { grid-template-columns: 1fr; }
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ===============================================================
   SHADER-BACKDROP PAGES 4–7
   Transparent bg + contain:none so the fixed shader canvas shows
   through (same treatment as systems p2 and pipeline-sec p3).
   Text/SVG colors inverted for legibility on dark shader.
   =============================================================== */
section.slide-section.footprint,
section.slide-section.footprint.dark,
section.slide-section.channels,
section.slide-section.channels.dark,
section.slide-section.why,
section.slide-section.why.dark,
section.slide-section.stack-sec,
section.slide-section.stack-sec.dark {
  background: transparent;
  contain: none;
}
.stack-pin-wrap > .stack-sec { background: transparent; }

.footprint,
.channels,
.why,
.stack-sec {
  border-top: 1px solid var(--hair-dark);
}

/* --- Footprint (p4) — invert from paper/ink to paper-on-shader --- */
.footprint .title {
  color: var(--paper);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.footprint .body-lg {
  color: rgba(244, 241, 234, 0.88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.footprint .kicker { color: rgba(244, 241, 234, 0.55); }
.footprint .section-num__left,
.footprint .section-num__right { color: var(--mute-dark); }
.footprint .section-num__rule  { background: var(--hair-dark); }

.footprint__list { border-top-color: var(--hair-dark); }
.footprint__row { border-bottom-color: var(--hair-dark); }
.footprint__row-city {
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.footprint__row-coord { color: rgba(244, 241, 234, 0.5); }

.footprint__foot {
  border-top-color: var(--hair-dark);
  color: var(--paper);
}
.footprint__foot .mono-sm { color: var(--mute-dark); }
.footprint__foot .mono,
.footprint__foot > div > div:last-child { color: var(--paper); }

/* Footprint map SVG — flip hardcoded dark (#0E1116 / rgba(14,17,22)) to light */
.footprint__map svg rect[stroke="#0E1116"] { stroke: rgba(244, 241, 234, 0.28); }
.footprint__map svg g[stroke="#0E1116"] line,
.footprint__map svg line[stroke="#0E1116"] { stroke: rgba(244, 241, 234, 0.35); }
.footprint__map svg text { fill: var(--paper); }
.footprint__map svg g[fill="rgba(14,17,22,0.56)"] text { fill: rgba(244, 241, 234, 0.55); }
.footprint__map svg g[fill="rgba(14,17,22,0.42)"] text { fill: rgba(244, 241, 234, 0.42); }
.footprint__map svg g[fill="rgba(14,17,22,0.78)"] text { fill: rgba(244, 241, 234, 0.78); }
.footprint__map svg g[stroke="rgba(14,17,22,0.12)"] line { stroke: rgba(244, 241, 234, 0.18); }
.footprint__map svg rect[fill="#F7F6F2"] {
  fill: rgba(14, 17, 22, 0.72);
  stroke: rgba(244, 241, 234, 0.22);
}
.footprint__map svg pattern#g path { stroke: rgba(244, 241, 234, 0.06); }

/* --- Channels (p5) — invert from paper/ink to paper-on-shader --- */
.channels .title {
  color: var(--paper);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.channels .kicker { color: rgba(244, 241, 234, 0.55); }
.channels .section-num__left,
.channels .section-num__right { color: var(--mute-dark); }
.channels .section-num__rule  { background: var(--hair-dark); }

.channels__grid {
  background: rgba(244, 241, 234, 0.14);
  border-color: rgba(244, 241, 234, 0.14);
}
.channel-card {
  background: rgba(14, 17, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--paper);
}
.channel-card:hover { background: rgba(14, 17, 22, 0.90); }
.channel-card__foot { border-top-color: var(--hair-dark); }
.channel-card .mono-sm { color: var(--mute-dark); }
.channel-card .mono { color: var(--paper); }
.channel-card__share { color: var(--paper); }
.channel-card__logo .offline-word { color: var(--paper); }

.channels__incoming {
  background: rgba(232, 179, 74, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.channels__incoming-sep { background: var(--hair-dark); }
.channels__incoming-text { color: rgba(244, 241, 234, 0.85); }
.channels__incoming .mono-sm { color: var(--mute-dark); }

.channels__foot {
  border-top-color: var(--hair-dark);
  color: var(--paper);
}
.channels__foot .mono-sm { color: var(--mute-dark); }
.channels__foot .mono { color: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  .channel-card,
  .channels__incoming { will-change: background; }
}

/* --- Why (p6) — translucent cells so shader bleeds through grid gaps --- */
.why-cell {
  background: rgba(14, 17, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.why-cell:hover {
  background: rgba(20, 24, 32, 0.88);
}
.why .title {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* --- Stack chips nested inside Why gallery card 02 — compact variant --- */
.why-gallery__card--stack .stack-layers {
  margin-top: 14px;
  gap: 5px;
}
.why-gallery__card--stack .stack-layer {
  padding: 9px 12px;
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.why-gallery__card--stack .stack-layer:hover {
  border-color: var(--amber);
  background: rgba(232, 179, 74, 0.08);
}
.why-gallery__card--stack .stack-layer__code { font-size: 11px; }
.why-gallery__card--stack .stack-layer__desc { font-size: 9.5px; }

/* --- Card 01 · Operator DNA — 3-row key/value stats -------------- */
.why-stats {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.why-stats__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 12px;
  font-family: var(--fs-mono);
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.why-stats__k {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.58);
}
.why-stats__v {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper);
}
.why-stats__zero {
  color: var(--amber);
  font-size: 13px;
}
.why-stats__note {
  font-size: 9px; letter-spacing: 0.12em;
  color: rgba(244, 241, 234, 0.44);
  margin-left: 4px;
}

/* --- Card 03 · Warehouse Density — mini India map --------------- */
.why-gallery__card--map .why-gallery__body { display: none; }
.why-map {
  margin-top: 10px;
  width: 100%; height: auto;
  max-height: 300px;
  display: block;
  flex: 1;
  min-height: 0;
}

/* --- Card 04 · Brand Trust — Eastman + Vector X logos ----------- */
.why-gallery__card--brands .why-gallery__body { display: none; }
.why-brands {
  flex: 1;
  align-self: stretch;
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1px 1fr;
  align-items: center; gap: 14px;
  padding: 28px 8px;
}
.why-brands__cell {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.why-brands__logo {
  max-width: 92px; width: 100%; height: auto;
  object-fit: contain;
}
.why-brands__divider {
  align-self: stretch;
  background: rgba(244, 241, 234, 0.14);
}
.why-brands__meta {
  font-family: var(--fs-mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.58);
}

/* --- Card 05 · Data-led POs — quiet one-liner with sigma mark --- */
.why-gallery__card--ai .why-gallery__body { display: none; }
.why-ai {
  flex: 1;
  align-self: stretch;
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 36px 18px;
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.why-ai__sigma {
  font-family: var(--fs-serif, 'Fraunces', serif);
  font-size: 52px; line-height: 0.9; font-weight: 400;
  color: var(--electric);
}
.why-ai__body { display: flex; flex-direction: column; gap: 6px; }
.why-ai__lede {
  font-family: var(--fs-display);
  font-size: 19px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--paper);
}
.why-ai__meta {
  font-family: var(--fs-mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
}

/* --- Card 06 · 3PL Reliability — Quickshift mark + backbone spine  */
.why-gallery__card--qs .why-gallery__body { display: none; }
.why-qs {
  flex: 1;
  align-self: stretch;
  margin-top: 14px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px;
  padding: 24px 6px 12px;
}
.why-qs__logo {
  width: 160px; height: auto; display: block;
  /* PNG is dark navy + amber on a transparent bg — invert so the mark reads
     as paper-light monochrome against the card's dark glass bg. */
  filter: invert(1) grayscale(1) brightness(1.25);
  opacity: 0.92;
}
.why-qs__spine {
  width: 82%;
  display: flex; align-items: center; gap: 6px;
}
.why-qs__spine-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(217,75,31,0.8) 0%,
    rgba(244,241,234,0.5) 50%,
    rgba(232,179,74,0.7) 100%
  );
}
.why-qs__spine-node {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.why-qs__spine-node--wh  { background: var(--rust); }
.why-qs__spine-node--pin { background: var(--amber); }
.why-qs__caption {
  font-family: var(--fs-display);
  font-size: 17px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--paper);
  margin-top: 2px;
}
.why-qs__meta {
  font-family: var(--fs-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.52);
}

/* ===============================================================
   WHY — circular gallery (replaces .why-matrix 3+3 grid reveal)
   6 cards orbit a shared Y-axis; ring rotates via inline JS based
   on scroll progress through .why-pin-wrap (handler in index.html).
   =============================================================== */
.why-gallery {
  position: relative;
  width: 100%;
  height: clamp(440px, 60vh, 560px);
  margin-top: clamp(72px, 10vh, 120px);
  perspective: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-gallery__ring {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}
.why-gallery__card {
  --r: 540px;                    /* orbit radius */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 480px;
  margin-left: -160px;
  margin-top: -240px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Frosted-glass — matches the channels gallery: near-transparent tile
     with heavy blur that picks up the shader hue behind. */
  background: linear-gradient(
    135deg,
    rgba(244, 241, 234, 0.08) 0%,
    rgba(244, 241, 234, 0.03) 100%
  );
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(244, 241, 234, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.45);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.25s linear;
}
/* Pre-position each card around the Y axis (60° × n for 6 cards) */
.why-gallery__card:nth-child(1) { transform: rotateY(  0deg) translateZ(var(--r)); }
.why-gallery__card:nth-child(2) { transform: rotateY( 60deg) translateZ(var(--r)); }
.why-gallery__card:nth-child(3) { transform: rotateY(120deg) translateZ(var(--r)); }
.why-gallery__card:nth-child(4) { transform: rotateY(180deg) translateZ(var(--r)); }
.why-gallery__card:nth-child(5) { transform: rotateY(240deg) translateZ(var(--r)); }
.why-gallery__card:nth-child(6) { transform: rotateY(300deg) translateZ(var(--r)); }

.why-gallery__label {
  font-family: var(--fs-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.why-gallery__label.rust     { color: var(--rust); }
.why-gallery__label.electric { color: var(--electric); }
.why-gallery__head {
  font-family: var(--fs-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}
.why-gallery__body {
  font-family: var(--fs-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.72);
  margin: 0;
}

/* Narrower viewports — smaller radius + smaller card */
@media (max-width: 1100px) {
  .why-gallery__card { --r: 420px; width: 280px; margin-left: -140px; }
}
@media (max-width: 820px) {
  .why-gallery__card { --r: 340px; width: 240px; margin-left: -120px; height: 440px; margin-top: -220px; }
  .why-gallery__head { font-size: 24px; }
}

/* Mobile & reduced-motion: disable 3D, show as vertical stack */
@media (max-width: 640px) {
  .why-pin-wrap { height: auto; }
  .why-pin-inner { position: relative; height: auto; overflow: visible; }
  .why-gallery { height: auto; perspective: none; margin-top: 32px; }
  .why-gallery__ring { transform: none !important; height: auto; display: flex; flex-direction: column; gap: 16px; }
  .why-gallery__card {
    position: relative; inset: auto;
    transform: none !important;
    width: 100%; height: auto; max-width: 420px;
    margin: 0 auto;
    opacity: 1 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-pin-wrap { height: auto; }
  .why-pin-inner { position: relative; height: auto; overflow: visible; }
  .why-gallery { height: auto; perspective: none; }
  .why-gallery__ring { transform: none !important; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .why-gallery__card {
    position: relative; inset: auto;
    transform: none !important;
    width: auto; height: auto;
    margin: 0;
    opacity: 1 !important;
  }
}

/* ===============================================================
   CHANNELS — circular gallery (replaces .channels__grid + incoming)
   5 cards (4 live + 1 incoming) orbit a shared Y-axis at 72° each.
   Pin-wrap mirrors .why-pin-wrap so the section scrolls-through.
   =============================================================== */
.channels-pin-wrap {
  position: relative;
  height: 360vh;                 /* 5 cards, ~72vh per card */
}
.channels-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}
.channels-pin-inner > .channels {
  height: 100%;
  border-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 8vh, 96px) 0;
}
.channels-gallery {
  position: relative;
  width: 100%;
  height: clamp(420px, 60vh, 540px);
  margin-top: clamp(36px, 6vh, 64px);
  perspective: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.channels-gallery__ring {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}
.channels-gallery__card {
  --r: 540px;                    /* orbit radius */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 360px;
  margin-left: -140px;
  margin-top: -180px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Frosted-glass card — near-transparent, heavy blur picks up the shader
     hue behind, faint paper tint so it reads as glass not plastic. */
  background: linear-gradient(
    135deg,
    rgba(244, 241, 234, 0.08) 0%,
    rgba(244, 241, 234, 0.03) 100%
  );
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(244, 241, 234, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.45);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.25s linear;
  color: var(--paper);
}
/* 72° spacing for 5 cards */
.channels-gallery__card:nth-child(1) { transform: rotateY(  0deg) translateZ(var(--r)); }
.channels-gallery__card:nth-child(2) { transform: rotateY( 72deg) translateZ(var(--r)); }
.channels-gallery__card:nth-child(3) { transform: rotateY(144deg) translateZ(var(--r)); }
.channels-gallery__card:nth-child(4) { transform: rotateY(216deg) translateZ(var(--r)); }
.channels-gallery__card:nth-child(5) { transform: rotateY(288deg) translateZ(var(--r)); }

/* Incoming card — amber accent, dashed border */
.channels-gallery__card--incoming {
  border: 1px dashed rgba(232, 179, 74, 0.55);
  background: rgba(28, 24, 16, 0.82);
}

.channels-gallery__top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.channels-gallery__top .mono-sm { color: var(--mute-dark); }
.channels-gallery__top .mono-sm.amber { color: var(--amber); }

/* Logo container — no pedestal. Logos sit directly on the frosted glass.
   PNGs with opaque light backgrounds get an invert+hue-rotate filter so
   the white plate vanishes and brand colors survive intact. */
.channels-gallery__logo {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
  padding: 12px 16px;
  background: transparent;
}
.channels-gallery__logo img {
  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 120px;
  object-fit: contain;
  display: block;
  /* invert + hue-rotate flips light backgrounds → dark (invisible on glass)
     and dark text → light (visible) while preserving brand colors. */
  filter: invert(1) hue-rotate(180deg);
  /* crisp scaling so upscaled PNGs don't look mushy at front-of-carousel */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Per-logo sizing — equalize visual weight across Flipkart / Amazon / Shopify */
.channels-gallery__logo[data-logo="flipkart"] img { max-width: 210px; max-height: 110px; }
.channels-gallery__logo[data-logo="amazon"]   img { max-width: 220px; max-height: 80px;  }
.channels-gallery__logo[data-logo="shopify"]  img { max-width: 200px; max-height: 90px;  }
.channels-gallery__logo img[data-logo="myntra"] { max-width: 150px; max-height: 70px; }

/* Flipkart SVG is already transparent with bright brand colors — don't touch. */
.channels-gallery__logo[data-logo="flipkart"] img {
  filter: none;
}

.channels-gallery__logo .offline-word {
  font-family: var(--fs-serif);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.025em;
  color: var(--paper);               /* back to paper — on glass, not pedestal */
}
.channels-gallery__logo .offline-word .dot {
  background: var(--rust);
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 2px;
}

.channels-gallery__foot {
  padding-top: 14px;
  border-top: 1px solid var(--hair-dark);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 10px;
}
.channels-gallery__foot .mono-sm { color: var(--mute-dark); }
.channels-gallery__share {
  font-family: var(--fs-display);
  font-size: 34px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--paper);
  margin-top: 6px;
}
.channels-gallery__meta { text-align: right; }
.channels-gallery__meta .mono { color: var(--paper); }
.channels-gallery__note {
  font-family: var(--fs-serif);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(244, 241, 234, 0.72);
  margin-top: 10px;
  line-height: 1.4;
}

/* Narrower viewports — shrink radius + cards */
@media (max-width: 1100px) {
  .channels-gallery__card { --r: 420px; width: 260px; margin-left: -130px; }
}
@media (max-width: 820px) {
  .channels-gallery__card { --r: 340px; width: 240px; margin-left: -120px; height: 320px; margin-top: -160px; }
  .channels-gallery__share { font-size: 28px; }
}

/* Mobile & reduced-motion — collapse to vertical stack */
@media (max-width: 640px) {
  .channels-pin-wrap { height: auto; }
  .channels-pin-inner { position: relative; height: auto; overflow: visible; }
  .channels-gallery { height: auto; perspective: none; margin-top: 32px; }
  .channels-gallery__ring { transform: none !important; height: auto; display: flex; flex-direction: column; gap: 16px; }
  .channels-gallery__card {
    position: relative; inset: auto;
    transform: none !important;
    width: 100%; height: auto; max-width: 420px;
    margin: 0 auto;
    opacity: 1 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .channels-pin-wrap { height: auto; }
  .channels-pin-inner { position: relative; height: auto; overflow: visible; }
  .channels-gallery { height: auto; perspective: none; }
  .channels-gallery__ring { transform: none !important; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .channels-gallery__card {
    position: relative; inset: auto;
    transform: none !important;
    width: auto; height: auto;
    margin: 0;
    opacity: 1 !important;
  }
}

/* ===============================================================
   DARK THEME — applied to all sections after Operator-grade
   throughput (proof, partners, vx-deep, cat-breadth, leadership,
   contact). Matches the editorial dark style of the Thesis page.
   =============================================================== */
section.slide-section.proof.dark,
section.slide-section.partners.dark,
section.slide-section.vx-deep.dark,
section.slide-section.cat-breadth.dark,
section.slide-section.leadership.dark,
section.slide-section.contact.dark {
  background: var(--graphite);
  color: var(--paper);
  border-top: 1px solid var(--hair-dark);
}

/* --- PROOF: invert ink → paper, hair → hair-dark, mute → mute-dark */
.proof.dark .proof__intro { color: rgba(244, 241, 234, 0.72); }
.proof.dark .proof__big-stats {
  border-top-color: var(--hair-dark);
  border-bottom-color: var(--hair-dark);
}
.proof.dark .big-stat { border-left-color: var(--hair-dark); }
.proof.dark .big-stat__num { color: var(--paper); }
.proof.dark .big-stat__sup { color: rgba(244, 241, 234, 0.55); }
.proof.dark .big-stat__label { color: rgba(244, 241, 234, 0.55); }
.proof.dark .small-stat__label { color: rgba(244, 241, 234, 0.55); }
.proof.dark .small-stat__num { color: var(--paper); }
.proof.dark .small-stat__num .pct { color: rgba(244, 241, 234, 0.5); }
.proof.dark .small-stat__sub { color: rgba(244, 241, 234, 0.5); }
.proof.dark .timeline__label { color: rgba(244, 241, 234, 0.55); }
.proof.dark .timeline__track::before {
  background: linear-gradient(to right, var(--hair-dark), var(--hair-dark)) no-repeat left center;
  background-size: calc(var(--draw, 0) * 100%) 1px;
}
.proof.dark .timeline__year { color: var(--paper); }
.proof.dark .timeline__text { color: rgba(244, 241, 234, 0.7); }
.proof.dark .timeline__dot { background: var(--paper); }

/* --- PARTNERS (Eastman | Vector X split) */
.partners.dark .body-lg,
.partners.dark p { color: rgba(244, 241, 234, 0.78) !important; }
.partners.dark .partners__divider { background: var(--hair-dark); }
.partners.dark .partners__mini-cell {
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid var(--hair-dark);
}
.partners.dark .partners__mini-cell .label { color: rgba(244, 241, 234, 0.7); }
.partners.dark .partners__foot {
  border-top-color: var(--hair-dark);
}
.partners.dark .mono-sm,
.partners.dark .mono-label { color: rgba(244, 241, 234, 0.5); }
.partners.dark .tag-pill {
  border-color: rgba(244, 241, 234, 0.22);
  color: rgba(244, 241, 234, 0.78);
}
.partners.dark img[alt="Eastman"],
.partners.dark img[alt="Vector X"] { filter: none; }

/* --- VX DEEP */
.vx-deep.dark { background: var(--graphite) !important; }
.vx-deep.dark *:not(b):not(.serif-italic) { color: inherit; }
.vx-deep.dark .body-lg,
.vx-deep.dark p { color: rgba(244, 241, 234, 0.78) !important; }

/* --- CAT BREADTH */
.cat-breadth.dark .cat-col {
  background: rgba(244, 241, 234, 0.03);
  border: 1px solid var(--hair-dark);
}
.cat-breadth.dark .cat-col__name { color: var(--paper); }
.cat-breadth.dark .cat-col__sub { color: rgba(244, 241, 234, 0.55); }
.cat-breadth.dark .body-lg,
.cat-breadth.dark p { color: rgba(244, 241, 234, 0.75) !important; }

/* --- LEADERSHIP */
.leadership.dark .leader-card,
.leadership.dark .leader-cell {
  background: rgba(244, 241, 234, 0.03);
  border: 1px solid var(--hair-dark);
}
.leadership.dark .leader-card__name,
.leadership.dark .leader-card__role { color: var(--paper); }
.leadership.dark .leader-card__bio { color: rgba(244, 241, 234, 0.7); }
.leadership.dark .body-lg,
.leadership.dark p { color: rgba(244, 241, 234, 0.78) !important; }

/* --- CONTACT */
.contact.dark .contact__grid,
.contact.dark .contact__card {
  border-color: var(--hair-dark);
}
.contact.dark .label,
.contact.dark .mono-label,
.contact.dark .mono-sm { color: rgba(244, 241, 234, 0.5); }
.contact.dark .value,
.contact.dark .mono { color: var(--paper); }
.contact.dark a { color: var(--paper); }
.contact.dark a:hover { color: var(--rust); }
.contact.dark .body-lg,
.contact.dark p { color: rgba(244, 241, 234, 0.78) !important; }

/* =============================================================
   LIGHT-THEME OVERRIDES (2026-04-25)
   For sections that previously forced dark via base CSS
   (.thesis, .eastman-deep, .roadmap). When the section does NOT
   carry a .dark class, fall back to the paper theme.
   ============================================================= */

/* -- THESIS · light variant ----------------------------------- */
section.slide-section.thesis:not(.dark) {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--hair);
}
section.slide-section.thesis:not(.dark) .thesis__headline { color: var(--ink); }
section.slide-section.thesis:not(.dark) .section-num__left,
section.slide-section.thesis:not(.dark) .section-num__right { color: var(--mute); }
section.slide-section.thesis:not(.dark) .section-num__rule { background: var(--hair); }
section.slide-section.thesis:not(.dark) .thesis__delta {
  border-color: var(--hair);
  background: rgba(14,17,22,0.02);
}
section.slide-section.thesis:not(.dark) .thesis__delta-head .mono-sm,
section.slide-section.thesis:not(.dark) .thesis__delta-metrics .mono-sm { color: var(--mute); }
section.slide-section.thesis:not(.dark) .thesis__delta-metrics {
  border-top-color: var(--hair);
}
section.slide-section.thesis:not(.dark) .thesis__delta-metrics .metric-value {
  color: var(--ink);
}
section.slide-section.thesis:not(.dark) .thesis__bottom {
  border-top-color: var(--hair);
}
section.slide-section.thesis:not(.dark) .delta-bar-track {
  background: rgba(14,17,22,0.08);
}
section.slide-section.thesis:not(.dark) .delta-bar-head .mono-sm { color: var(--mute); }

/* -- EASTMAN · light variant ---------------------------------- */
section.slide-section.eastman-deep:not(.dark) {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--hair);
}
section.slide-section.eastman-deep:not(.dark) .eastman-deep__title { color: var(--ink); }
section.slide-section.eastman-deep:not(.dark) .eastman-deep__body { color: var(--mute); }
section.slide-section.eastman-deep:not(.dark) .section-num__left,
section.slide-section.eastman-deep:not(.dark) .section-num__right { color: var(--mute); }
section.slide-section.eastman-deep:not(.dark) .section-num__rule { background: var(--hair); }
section.slide-section.eastman-deep:not(.dark) .eastman-cats {
  background: var(--hair);
  border-color: var(--hair);
}
section.slide-section.eastman-deep:not(.dark) .eastman-cats__cell { background: var(--paper); }
section.slide-section.eastman-deep:not(.dark) .eastman-cats__sub { color: var(--mute); }

/* -- ROADMAP · light variant ---------------------------------- */
section.slide-section.roadmap:not(.dark) {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--hair);
}
section.slide-section.roadmap:not(.dark) .roadmap__hero { color: var(--ink); }
section.slide-section.roadmap:not(.dark) .section-num__left,
section.slide-section.roadmap:not(.dark) .section-num__right { color: var(--mute); }
section.slide-section.roadmap:not(.dark) .section-num__rule { background: var(--hair); }
section.slide-section.roadmap:not(.dark) .roadmap__list { border-top-color: var(--hair); }
section.slide-section.roadmap:not(.dark) .roadmap__row { border-bottom-color: var(--hair); }
section.slide-section.roadmap:not(.dark) .roadmap__title { color: var(--ink); }
section.slide-section.roadmap:not(.dark) .roadmap__sub { color: var(--mute); }
section.slide-section.roadmap:not(.dark) .roadmap__status { color: var(--mute); }

/* =============================================================
   BRIGHT NAV WORDMARK — used on light pages
   (Proof and onwards). Mixed-case "Saini.Ecomm" with rust dot,
   matches the bright-logo source asset.
   ============================================================= */
.nav__wordmark { display: inline-flex; align-items: baseline; }
.nav__wordmark--light { display: none; }
.nav:not(.on-dark) .nav__wordmark--dark { display: none; }
.nav:not(.on-dark) .nav__wordmark--light { display: inline-flex; }
.nav__wordmark--light {
  font-family: var(--fs-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--ink);
}
.nav__wordmark-dot {
  color: var(--rust);
  font-weight: 800;
  margin: 0 1px;
}


/* Why-page: row-2 holds 4 cells now (after folding Operating Stack into reasons) */
.why-row--2 { grid-template-columns: repeat(4, 1fr); }
.why-row .why-cell:nth-child(4) { transition-delay: 0.30s; }
.why-pin-inner.why-phase-2 .why-row--2 .why-cell:nth-child(4) { opacity: 1; transform: translateX(0); }

/* =============================================================
   CIRCULAR 3D GALLERY (vanilla port — used on pg04 channels, pg05 why)
   - Rotating carousel of transparent backdrop-blur cards
   - Auto-rotates when idle, scroll-driven when scrolling viewport
   - data-radius + data-rotate-speed configurable per instance
   ============================================================= */
.cg {
  position: relative;
  width: 100%;
  min-height: 560px;
  margin: 60px 0 40px;
}
.cg__viewport {
  position: relative;
  width: 100%;
  height: 480px;
  perspective: 2000px;
  perspective-origin: 50% 50%;
}
.cg__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--cg-rotation, 0deg));
  will-change: transform;
}
.cg__card {
  position: absolute;
  width: 280px;
  height: 380px;
  left: 50%;
  top: 50%;
  margin-left: -140px;
  margin-top: -190px;
  transform: rotateY(calc(var(--idx) * var(--cg-angle, 90deg))) translateZ(var(--cg-radius, 500px));
  background: rgba(244, 241, 234, 0.04);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(244, 241, 234, 0.10);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--paper);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28),
              inset 0 1px 0 rgba(244, 241, 234, 0.08);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s var(--ease),
              background 0.4s var(--ease);
  backface-visibility: hidden;
  overflow: hidden;
}
.cg__card:hover {
  border-color: rgba(217, 75, 31, 0.42);
  background: rgba(244, 241, 234, 0.07);
}
/* On light/cream sections, invert: dark glass on light bg */
.cg.cg--light .cg__card {
  background: rgba(14, 17, 22, 0.045);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-color: rgba(14, 17, 22, 0.10);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(14, 17, 22, 0.12),
              inset 0 1px 0 rgba(244, 241, 234, 0.6);
}
.cg.cg--light .cg__card:hover {
  border-color: rgba(217, 75, 31, 0.42);
  background: rgba(14, 17, 22, 0.07);
}

/* Card internals */
.cg__card-num {
  font-family: var(--fs-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}
.cg.cg--light .cg__card-num { color: var(--rust); }
.cg__card-label {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
}
.cg.cg--light .cg__card-label { color: rgba(14, 17, 22, 0.5); }
.cg__card-head {
  font-family: var(--fs-display, 'Inter Tight'), sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
}
.cg__card-body {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.72);
  flex: 1;
}
.cg.cg--light .cg__card-body { color: rgba(14, 17, 22, 0.72); }
.cg__card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--fs-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244, 241, 234, 0.6);
  border-top: 1px solid rgba(244, 241, 234, 0.08);
  padding-top: 14px;
}
.cg.cg--light .cg__card-foot {
  color: rgba(14, 17, 22, 0.6);
  border-top-color: rgba(14, 17, 22, 0.08);
}
.cg__card-stat {
  font-family: var(--fs-display, 'Inter Tight'), sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
}
.cg.cg--light .cg__card-stat { color: var(--ink); }
.cg__card-logo {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}
.cg__card-logo img {
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0.95) contrast(1.05);
}
.cg.cg--light .cg__card-logo img { filter: none; }

/* Caption above gallery */
.cg__caption {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  font-family: var(--fs-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.42);
}
.cg.cg--light .cg__caption { color: rgba(14, 17, 22, 0.5); }

@media (max-width: 768px) {
  .cg__viewport { height: 380px; perspective: 1400px; }
  .cg__card { width: 220px; height: 320px; margin-left: -110px; margin-top: -160px; padding: 22px 20px; }
  .cg__card-head { font-size: 18px; }
  .cg__card-stat { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cg__stage { transform: none !important; transition: none !important; }
  .cg__card { transform: none !important; position: static !important; opacity: 1 !important; margin: 12px; }
  .cg__viewport { height: auto; perspective: none; }
}

/* Hide shader behind opaque cream sections */
.bg-shader { transition: opacity 0.4s ease; }
body[data-shader-state="hidden"] .bg-shader { opacity: 0; pointer-events: none; }

/* SCROLL-LOCKED CIRCULAR GALLERY (pages 4 + 5) */
.cg-pin-wrap {
  position: relative;
  height: 220vh;
}
.cg-pin-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.cg-pin-stick .cg { margin: 0; min-height: auto; }
.cg-pin-stick .cg__viewport { height: 70vh; }

@media (max-width: 768px) {
  .cg-pin-wrap { height: 180vh; }
  .cg-pin-stick .cg__viewport { height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-pin-wrap { height: auto; }
  .cg-pin-stick { position: static; height: auto; }
}


/* THEME UNIFICATION — pages 7-14 unified cream/light look (Proof's format) */
.proof,
.thesis,
.eastman-deep,
.vx-editorial,
.cat-breadth,
.leadership,
.roadmap,
.contact {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--hair) !important;
}

/* Force light text colors throughout these sections */
.proof, .proof *,
.thesis, .thesis *,
.eastman-deep, .eastman-deep *,
.vx-editorial, .vx-editorial *,
.cat-breadth, .cat-breadth *,
.leadership, .leadership *,
.roadmap, .roadmap *,
.contact, .contact * {
  text-shadow: none !important;
}
.proof h2, .proof .title, .proof .body-lg, .proof p,
.thesis h2, .thesis .title, .thesis .body-lg, .thesis p,
.eastman-deep h2, .eastman-deep .title, .eastman-deep .body-lg, .eastman-deep p,
.vx-editorial h2, .vx-editorial .title, .vx-editorial .body-lg, .vx-editorial p,
.cat-breadth h2, .cat-breadth .title, .cat-breadth .body-lg, .cat-breadth p,
.leadership h2, .leadership .title, .leadership .body-lg, .leadership p,
.roadmap h2, .roadmap .title, .roadmap .body-lg, .roadmap p,
.contact h2, .contact .title, .contact .body-lg, .contact p {
  color: var(--ink) !important;
}
.proof .body-lg, .thesis .body-lg, .eastman-deep .body-lg, .vx-editorial .body-lg,
.cat-breadth .body-lg, .leadership .body-lg, .roadmap .body-lg, .contact .body-lg {
  color: rgba(14, 17, 22, 0.78) !important;
}
.eastman-deep .rust, .roadmap .rust { color: var(--rust) !important; }

/* Light hairline borders on Proof's big-stats frame (was --ink, looked black) */
.proof__big-stats {
  border-top: 1px solid var(--hair) !important;
  border-bottom: 1px solid var(--hair) !important;
}
.big-stat { border-left-color: var(--hair) !important; }

/* Other dark-themed internal borders need to flip on cream sections */
.proof .timeline__track::before,
.thesis .timeline__track::before,
.eastman-deep .timeline__track::before,
.roadmap .timeline__track::before {
  background: var(--hair) !important;
}

/* =============================================================
   PAGES 1-6 — keep shader visible, transparent backgrounds where needed.
   The Footprint and Channels sections previously had opaque cream bgs
   that hid the shader. Make them transparent so shader animation shows
   through. Text/headings flip to cream for readability on the shader.
   ============================================================= */
.footprint,
.channels {
  background: transparent !important;
  color: var(--paper) !important;
  border-top: none !important;
}
.footprint h2, .footprint .title, .footprint p, .footprint .body-lg,
.channels h2, .channels .title, .channels p, .channels .body-lg {
  color: var(--paper) !important;
}
.footprint h2, .footprint .title,
.channels h2, .channels .title {
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.footprint .body-lg, .channels .body-lg {
  color: rgba(244, 241, 234, 0.85) !important;
}
.footprint .mono-sm, .channels .mono-sm,
.footprint .mono, .channels .mono {
  color: rgba(244, 241, 234, 0.65) !important;
}


/* Pipeline (pg06) — robust transition: ensure section is at least viewport tall
   so the shader stays visible while it's onscreen. Text colors stay cream-on-shader. */
.pipeline-sec {
  background: transparent !important;
  min-height: 100vh;
}

/* Hide pipeline meta callout if any straggler exists */
.pipeline-sec__callout { display: none !important; }


/* Channels gallery — card a touch taller so big share % numbers fit */
.cg__card { height: 410px; margin-top: -205px; }
.cg__card-stat { white-space: nowrap; }

/* Pages 4+5 galleries — slower scroll-driven rotation comes from data-rotations="1"
   plus a longer pin runway (260vh = 160vh of scroll for 1 full rotation) */
.cg-pin-wrap { height: 260vh; }

/* Galleries — flat carousel, slower auto-rotation, slightly shorter runway */
.cg-pin-wrap { height: 180vh; }
.cg__stage { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }


/* COVERFLOW carousel overrides (pg04 + pg05) */
.cg__viewport {
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
.cg__stage {
  transform-style: preserve-3d;
  transition: none;
}
/* Coverflow mode: JS sets per-card transforms, stage itself stays static */
[data-cg-mode="coverflow"] .cg__stage { transform: none !important; }
/* Circular mode: JS rotates the stage; cards have fixed circular positions */
[data-cg-mode="circular"] .cg__stage { transform: rotateY(0deg); }
.cg__card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.5s linear;
  transform-origin: center;
  /* keep card height set elsewhere */
}

/* PG04 Channels: bigger Flipkart share % so it pops */
[data-page="04"] .cg__card-stat {
  font-size: 44px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--paper);
}
[data-page="04"] .cg__card-stat span {
  font-size: 20px !important;
  margin-left: 2px;
  color: rgba(244, 241, 234, 0.6);
}


/* PG05 cards — taller, with icons, scannable */
[data-page="05"] .cg__card {
  height: 480px;
  padding: 36px 28px 28px;
}
.cg__icon {
  width: 48px;
  height: 48px;
  color: var(--rust);
  margin-bottom: 14px;
  opacity: 0.92;
}
[data-page="05"] .cg__card .cg__icon { color: var(--rust); }
[data-page="05"] .cg__card .cg__card-num[style*="electric"] ~ * + .cg__icon,
[data-page="05"] .cg__card:nth-child(n+4) .cg__icon { color: var(--electric); }
.cg__icon svg { width: 100%; height: 100%; display: block; }
[data-page="05"] .cg__card-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.7);
}

/* Make all cards consistent height (channels also gets the bump) */
[data-page="04"] .cg__card { height: 460px; }


/* PG04 coverflow — let cards breathe (was 280px wide, now 360px) */
[data-cg-mode="coverflow"] .cg__card {
  width: 360px;
  height: 500px;
  padding: 36px 32px 28px;
}
[data-cg-mode="coverflow"] .cg__card .cg__card-head {
  font-size: 26px;
  line-height: 1.15;
}

/* PG05 circular — restore previous all-cards-visible carousel style.
   Stage has transform applied by JS (rotateY only). Cards keep absolute
   positioning + their JS-set rotateY/translateZ transforms. */
[data-cg-mode="circular"] .cg__card {
  width: 320px;
  height: 480px;
  padding: 32px 28px 28px;
  /* JS sets card transform; stage rotates */
}
[data-cg-mode="circular"] .cg__viewport { perspective: 2400px; }

/* Express Delivery chip on Operator DNA card */
.cg__chips {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid rgba(244, 241, 234, 0.08);
}
.cg__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(217, 75, 31, 0.10);
  border: 1px solid rgba(217, 75, 31, 0.4);
  border-radius: 999px;
  font-family: var(--fs-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}
.cg__chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rust);
}


/* PG05 card visuals (under body copy) */
.cg__viz {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 241, 234, 0.08);
}

/* TECH STACK — layered bars */
.cg__viz--stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cg__viz-bar {
  display: grid;
  grid-template-columns: 28px 1fr 8px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(244, 241, 234, 0.045);
  border: 1px solid rgba(244, 241, 234, 0.08);
  border-radius: 4px;
}
.cg__viz-code {
  font-family: var(--fs-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--rust);
  letter-spacing: 0.06em;
}
.cg__viz-label {
  font-family: var(--fs-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.62);
}
.cg__viz-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 241, 234, 0.4);
  justify-self: end;
}

/* WAREHOUSE DENSITY — India map */
.cg__viz--map {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}
.cg__viz--map svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* BRAND TRUST — Eastman + Vector X logos */






/* PG03 (Footprint) — fit-on-screen tightening */
.footprint__list { gap: 8px !important; }
.footprint__row {
  padding: 9px 0 !important;
  font-size: 13px !important;
}
.footprint__row-code, .footprint__row-coord {
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
}
.footprint__row-city {
  font-size: 14px !important;
}
.footprint .body-lg {
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin-top: 14px !important;
}
/* Map labels smaller */
.footprint__map svg text { font-size: 9.5px !important; }
.footprint__map svg .map-coord { font-size: 8.5px !important; }
/* Section padding less */
.footprint { padding: 80px var(--gutter) 60px !important; }
.footprint__grid { gap: 40px !important; }


/* Pg05 — full India map (no body text above) */
.cg__viz--map--full svg { max-width: 240px !important; }

/* Pg05 — vertical brand stack on Trust card */

.cg__viz--brands--stack 

/* Pg05 — DATA-LED POs: AI + math + auto-signed PO */
.cg__viz--ai {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}
.cg__viz-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: wrap;
  font-family: var(--fs-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cg__viz-ai-input {
  padding: 4px 8px;
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid rgba(244, 241, 234, 0.12);
  border-radius: 3px;
  color: rgba(244, 241, 234, 0.78);
}
.cg__viz-ai-op { color: var(--electric); font-weight: 700; padding: 0 2px; }
.cg__viz-ai-arrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--electric);
}
.cg__viz-ai-arrow svg { width: 100%; height: 24px; }
.cg__viz-ai-label {
  font-family: var(--fs-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--electric);
}
.cg__viz-ai-output {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.32);
  border-radius: 4px;
  font-family: var(--fs-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.cg__viz-ai-output-code { color: var(--paper); font-weight: 600; }
.cg__viz-ai-output-status {
  font-size: 9.5px;
  color: var(--electric);
  letter-spacing: 0.16em;
}

/* Pg05 — OPERATING STACK literal L1-L4 layers */
.cg__viz--layers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
}
.cg__viz-layer {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(244, 241, 234, 0.045);
  border: 1px solid rgba(244, 241, 234, 0.08);
  border-radius: 3px;
}
.cg__viz-layer--l4 { background: rgba(88, 166, 255, 0.10); border-color: rgba(88, 166, 255, 0.28); }
.cg__viz-layer--l3 { background: rgba(88, 166, 255, 0.07); border-color: rgba(88, 166, 255, 0.22); }
.cg__viz-layer--l2 { background: rgba(88, 166, 255, 0.045); border-color: rgba(88, 166, 255, 0.16); }
.cg__viz-layer--l1 { background: rgba(244, 241, 234, 0.05); border-color: rgba(244, 241, 234, 0.12); }
.cg__viz-layer-code {
  font-family: var(--fs-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--electric);
  letter-spacing: 0.06em;
}
.cg__viz-layer--l1 .cg__viz-layer-code { color: var(--paper); }
.cg__viz-layer-name {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.75);
}

/* ============================================================
   PG02 ORBITAL — clean rebuild.
   Container is a fixed 600x600 box (when there's space) so geometry is
   100% predictable. Ring is an SVG circle (always crisp). Nodes are
   absolute-positioned at exact pixel coords computed in JS via sin/cos.
   ============================================================ */
.orbital {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  flex: 0 0 auto;
  /* shift the entire orbit group ~100px to the right per spec */
  transform: translateX(100px);
}
.orbital__ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(88, 166, 255, 0.16));
  animation: orbital-pulse 5s ease-in-out infinite;
}
@keyframes orbital-pulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

/* Hub — pinned at center of 600x600 container */
.orbital__hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #1A1F2C 0%, #0A0D14 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 10;
  box-shadow: 0 0 50px rgba(217, 75, 31, 0.32), inset 0 1px 0 rgba(244, 241, 234, 0.08);
  text-align: center;
  padding: 16px 14px;
  gap: 4px;
}
.orbital__hub::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 75, 31, 0.42), transparent 70%);
  filter: blur(14px); z-index: -1;
  animation: orbital-pulse 4s ease-in-out infinite;
}
.orbital__hub-bolt { font-size: 22px; color: var(--rust); line-height: 1; }
.orbital__hub-name { font-family: var(--fs-display, 'Inter Tight'), sans-serif; font-size: 14px; font-weight: 700; color: var(--paper); letter-spacing: -0.01em; line-height: 1.1; }
.orbital__hub-meta { font-family: var(--fs-mono); font-size: 7.5px; letter-spacing: 0.18em; color: rgba(244, 241, 234, 0.55); line-height: 1.3; }

/* Nodes — JS sets left/top in pixels (no percent tricks) */
.orbital__node {
  position: absolute;
  width: 50px; height: 50px;
  margin-left: -25px; margin-top: -25px;
  border-radius: 50%;
  background: rgba(20, 24, 32, 0.95);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  overflow: visible;
}
.orbital__node:hover { transform: scale(1.12); }
.orbital__node svg { width: 24px; height: 24px; }
.orbital__node--rust  { color: var(--rust); box-shadow: 0 4px 18px rgba(217,75,31,0.22), inset 0 1px 0 rgba(244,241,234,0.08); }
.orbital__node--electric { color: var(--electric); box-shadow: 0 4px 18px rgba(88,166,255,0.22), inset 0 1px 0 rgba(244,241,234,0.08); }

.orbital__node-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none; }
.orbital__node-num { font-family: var(--fs-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.orbital__node--rust .orbital__node-num { color: rgba(217, 75, 31, 0.78); }
.orbital__node--electric .orbital__node-num { color: rgba(88, 166, 255, 0.78); }
.orbital__node-title { font-family: var(--fs-display, 'Inter Tight'), sans-serif; font-size: 12px; font-weight: 600; color: var(--paper); letter-spacing: -0.005em; text-shadow: 0 1px 6px rgba(0,0,0,0.75); }

/* Section feels full-height — no squeeze */
.systems > .container { align-items: start !important; padding-top: 40px; }
@media (max-width: 1100px) {
  .orbital { transform: translateX(40px); }
}
@media (max-width: 768px) {
  .orbital { width: 380px; height: 380px; transform: none; margin: 32px auto 0; }
  .orbital__ring-svg { /* viewBox handles scale */ }
  .orbital__hub { width: 110px; height: 110px; padding: 12px 10px; }
  .orbital__hub-bolt { font-size: 18px; }
  .orbital__hub-name { font-size: 12px; }
  .orbital__hub-meta { font-size: 6.5px; }
  .orbital__node { width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; }
  .orbital__node svg { width: 22px; height: 22px; }
  .orbital__node-title { font-size: 11px; }
  .orbital__node-num { font-size: 7.5px; }
}
  .orbital__ring--outer { width: 320px; height: 320px; }
  .orbital__hub { width: 110px; height: 110px; padding: 12px 10px; }
  .orbital__hub-bolt { font-size: 18px; }
  .orbital__hub-name { font-size: 12px; }
  .orbital__hub-meta { font-size: 6.5px; }
  .orbital__node { width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; }
  .orbital__node svg { width: 22px; height: 22px; }
  .orbital__node-title { font-size: 11px; }
  .orbital__node-num { font-size: 7.5px; }
}
  .orbital__ring--inner { width: 200px; height: 200px; }
  .orbital__ring--outer { width: 320px; height: 320px; }
  .orbital__hub { width: 110px; height: 110px; padding: 12px 10px; }
  .orbital__hub-bolt { font-size: 18px; }
  .orbital__hub-name { font-size: 12px; }
  .orbital__hub-meta { font-size: 6.5px; }
  .orbital__node { width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; }
  .orbital__node svg { width: 22px; height: 22px; }
  .orbital__node-title { font-size: 11px; }
  .orbital__node-num { font-size: 7.5px; }
}
  .orbital__ring--inner { width: 240px; height: 240px; }
  .orbital__ring--outer { width: 380px; height: 380px; }
  .orbital__hub { width: 96px; height: 96px; }
  .orbital__node { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; }
  .orbital__node svg { width: 25px; height: 25px; }
  .orbital__node-title { font-size: 11px; }
  .orbital__node-num { font-size: 8px; }
}
  .orbital__ring--inner { width: 200px; height: 200px; }
  .orbital__ring--outer { width: 320px; height: 320px; }
  .orbital__hub { width: 88px; height: 88px; }
  .orbital__node { width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; }
  .orbital__node svg { width: 22px; height: 22px; }
}


/* ============================================================
   PG02 ORBITAL — fixes round 2
   ============================================================ */
/* Nudge orbital further right + a little down so it breathes */
.orbital { transform: translate(28px, 0) !important; }

/* Third decorative outer shell ring (very subtle — defines outer boundary) */
.orbital__ring--shell {
  width: 600px;
  height: 600px;
  border: 1px dashed rgba(244, 241, 234, 0.16);
  box-shadow:
    0 0 30px rgba(244, 241, 234, 0.04),
    inset 0 0 30px rgba(244, 241, 234, 0.02);
  animation: orbital-pulse 7s ease-in-out infinite;
  animation-delay: 3s;
}

/* Push pg02 footer ribbon DOWN so orbit nodes don't kiss it */
section.slide-section.systems { padding-bottom: 40px !important; }

@media (max-width: 768px) {
  .orbital__ring--shell { width: 380px; height: 380px; }
  .orbital { transform: none !important; }
}

/* ============================================================
   PG03 — city font sizes bumped back to readable
   ============================================================ */
.footprint__row-city { font-size: 17px !important; font-weight: 500 !important; }
.footprint__row-code { font-size: 11.5px !important; }
.footprint__row-coord { font-size: 11px !important; }
/* Keep one-screen fit: tighten section padding instead of shrinking type */
.footprint { padding: 56px var(--gutter) 40px !important; }
.footprint__list { gap: 6px !important; }
.footprint__row { padding: 8px 0 !important; }

/* ============================================================
   PG05 — Brand Trust card: Vector X logo no longer cropped
   ============================================================ */
.cg__viz--brands 
.cg__viz--brands 

.cg__viz--brands--stack 


/* PG05 Brand Trust — logos on cream plate so visible + uncropped */
.cg__viz--brands--stack 
.cg__viz--brands--stack 


/* === FINAL OVERRIDE: PG05 Brand Trust transparent (no plate) + invert vectorx === */
.cg__viz--brands--stack 
.cg__viz--brands--stack 





/* PG02 systems — paragraphs reflow to use bottom-left vertical space */
.systems__standfirst {
  max-width: 28ch !important;   /* ~3 lines for the standfirst */
  margin-top: 28px !important;
  margin-bottom: 24px !important;
}
.systems__subhead {
  max-width: 30ch !important;   /* ~4 lines for the subhead */
  line-height: 1.65 !important;
}


/* PG03 footprint — bigger city names, tightened gaps to keep one-screen fit */
.footprint__row-city { font-size: 20px !important; font-weight: 500 !important; }
.footprint__row-code { font-size: 12px !important; }
.footprint__row-coord { font-size: 11.5px !important; }
.footprint__list { gap: 6px !important; margin-top: 22px !important; }
.footprint__row { padding: 9px 0 !important; }
.footprint { padding: 56px var(--gutter) 36px !important; }


/* ============================================================
   PG05 · CARD 04 · BRAND TRUST — BULLETPROOF LOGO CONTAINER
   - Stripped all prior cg__viz--brands / cg__viz-brand rules
   - One source of truth for brand box geometry
   - Vector X aspect ratio (700x492 = 1.42:1 wide). Container sized so
     the wide logo always fits height-first with breathing padding.
   ============================================================ */
[data-page="05"] .cg__card .cg__viz--brands--stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: auto;
  padding: 14px 0 4px !important;
}
[data-page="05"] .cg__card .cg__viz--brands--stack .cg__viz-brand {
  width: 100% !important;
  height: 56px !important;
  padding: 8px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid rgba(244, 241, 234, 0.06) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
[data-page="05"] .cg__card .cg__viz--brands--stack .cg__viz-brand img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* Vector X — dark logo on dark card → invert + slight brightness */
[data-page="05"] .cg__card .cg__viz--brands--stack .cg__viz-brand img[src*="vectorx"] {
  filter: invert(1) brightness(1.05) !important;
  /* Keep extra padding so the X-symbol's pointed corners never touch edges */
  max-height: 90% !important;
  max-width: 88% !important;
}
/* Eastman — already coloured red+blue+black; just a slight lift */
[data-page="05"] .cg__card .cg__viz--brands--stack .cg__viz-brand img[src*="eastman"] {
  filter: brightness(1.05) contrast(1.05) !important;
  max-height: 90% !important;
  max-width: 92% !important;
}

/* ============================================================
   PG04 channel cards — Flipkart Assured / Prime tag badges
   Sits between body copy and the share/listings foot.
   ============================================================ */
[data-page="04"] .cg__card .cg__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 5px 10px 5px 6px;
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid rgba(244, 241, 234, 0.14);
  border-radius: 999px;
  font-family: var(--fs-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.88);
  align-self: flex-start;
  white-space: nowrap;
}
[data-page="04"] .cg__card .cg__badge-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}
[data-page="04"] .cg__card .cg__badge-mark--prime {
  width: 50px;
  flex: 0 0 50px;
  height: 14px;
}


/* PG04 Myntra incoming card — strong "not live yet" treatment */
[data-page="04"] .cg__card.cg__card--incoming {
  border: 1.5px dashed rgba(232, 179, 74, 0.55) !important;
  background: linear-gradient(180deg, rgba(232,179,74,0.04), rgba(20,24,32,0.95)) !important;
  position: relative;
}
[data-page="04"] .cg__card .cg__incoming-ribbon {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 9px;
  background: rgba(232, 179, 74, 0.18);
  border: 1px solid rgba(232, 179, 74, 0.5);
  border-radius: 999px;
  font-family: var(--fs-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
  z-index: 2;
}
[data-page="04"] .cg__card .cg__card-head-tag {
  font-family: var(--fs-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Myntra logo crispness — image-rendering hints + bigger render size */
[data-page="04"] .cg__card-logo--myntra {
  height: 100px !important;
  display: flex; align-items: center; justify-content: center;
}
[data-page="04"] .cg__card-logo--myntra img {
  max-height: 100% !important;
  max-width: 92% !important;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* =============================================================
   WEBGL FALLBACK — graceful degradation
   The shader canvas paints a fixed-position backdrop on dark pages
   (01 hero, 02 systems, 05 why). If WebGL2 fails, the canvas stays
   blank and html's cream bg would show — making dark sections unreadable.
   These per-section backdrops act as the dark fallback layer.
   ============================================================= */
.hero,
.systems,
.why {
  position: relative;
}
.hero::before,
.systems::before,
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;  /* behind shader (z-index -1), behind content */
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(217,75,31,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 70%, rgba(217,75,31,0.06), transparent 65%),
    linear-gradient(180deg, #07080b 0%, #0a0c12 100%);
  pointer-events: none;
}
/* When shader IS active (canvas painting), it sits above this fallback at z=-1
   and obscures it. When shader fails, fallback is visible. Either way the
   dark sections have a dark backdrop and the cream text reads. */

/* If JS detects WebGL failure, body gets a class to stop pretending — */
body.webgl-failed .bg-shader { display: none; }


/* ============================================================
   2026-05-06 · 11-page state · gallery card outline removed +
   lead-capture modal styles (see end of file).
   ============================================================ */


/* ============================================================
   GALLERY CARDS — kill the perceived white outline.
   Causes were (1) hairline border, (2) inset top highlight, and (3)
   `saturate(140%)` on the card's backdrop-filter, which boosted the
   bright shader streaks at the card edges and read as a glowing rim.
   We strip 1+2, drop the saturation back to 100%, and slightly darken
   the bg tint so the edge no longer halos. The Myntra "incoming" card
   keeps its dashed amber border (higher specificity wins).
   ============================================================ */
.cg__card {
  border: 0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  background: rgba(14, 17, 22, 0.18) !important;
  backdrop-filter: blur(18px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(100%) !important;
}
.cg__card:hover {
  border: 0 !important;
  background: rgba(14, 17, 22, 0.26) !important;
}


/* ============================================================
   LEAD CAPTURE — pg-final CTA + modal
   Editorial / spec-sheet language:
     · cream paper bg, hairline ink borders
     · mono caps labels above each input
     · ink-on-paper fields with hairline underline (no boxy chrome)
     · no rounded corners over 4px
   ============================================================ */
.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--fs-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.contact__cta:hover { background: var(--rust); border-color: var(--rust); }
.contact__cta-arrow { transition: transform 0.2s var(--ease); }
.contact__cta:hover .contact__cta-arrow { transform: translateX(4px); }

/* Modal shell ------------------------------------------------- */
.leads-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.leads-modal[data-open="true"] { display: flex; }

.leads-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 17, 22, 0.62);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  cursor: pointer;
  opacity: 0;
  animation: leadsBackdropIn 0.28s var(--ease) forwards;
}
@keyframes leadsBackdropIn { to { opacity: 1; } }

.leads-modal__card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  border-radius: 2px;
  padding: 36px 36px 32px;
  box-shadow: 0 30px 80px rgba(14, 17, 22, 0.45);
  opacity: 0;
  transform: translateY(12px);
  animation: leadsCardIn 0.32s var(--ease) 0.05s forwards;
}
@keyframes leadsCardIn { to { opacity: 1; transform: translateY(0); } }

.leads-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.leads-modal__close:hover {
  color: var(--rust);
  border-color: var(--hair);
  background: rgba(217, 75, 31, 0.06);
}

.leads-modal__head {
  margin-bottom: 24px;
  padding-right: 32px;
}
.leads-modal__head .mono-sm { display: block; margin-bottom: 12px; }
.leads-modal__title {
  font-family: var(--fs-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--ink);
}
.leads-modal__intro {
  font-family: var(--fs-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 44ch;
  margin: 0;
}

/* Form -------------------------------------------------------- */
.leads-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.leads-field { display: flex; flex-direction: column; gap: 6px; }
.leads-field label {
  font-family: var(--fs-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.leads-field__opt {
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 400;
  color: var(--mute-dark-2);
}
.leads-field input {
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  font-family: var(--fs-body);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  border-radius: 0;
  transition: border-color 0.15s var(--ease);
}
.leads-field input::placeholder {
  color: rgba(14, 17, 22, 0.32);
  font-style: italic;
}
.leads-field input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.leads-field input.is-invalid,
.leads-field.is-invalid input { border-bottom-color: var(--rust); }

.leads-field__error {
  display: none;
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  min-height: 12px;
}
.leads-field.is-invalid .leads-field__error { display: block; }

.leads-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.leads-form__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.leads-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--fs-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.leads-form__submit:hover { background: var(--rust); border-color: var(--rust); }
.leads-form__submit:disabled { opacity: 0.55; cursor: wait; }
.leads-form__submit svg { transition: transform 0.2s var(--ease); }
.leads-form__submit:hover svg { transform: translateX(4px); }

.leads-form__status {
  font-family: var(--fs-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  min-height: 14px;
}
.leads-form__status[data-state="success"] { color: #167a3d; }
.leads-form__status[data-state="error"]   { color: var(--rust); }

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .leads-modal { padding: 12px; align-items: flex-end; }
  .leads-modal__card { padding: 28px 22px 24px; max-height: 92vh; }
  .leads-modal__head { padding-right: 24px; }
  .leads-field-row { grid-template-columns: 1fr; }
  .leads-form__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .leads-form__submit { width: 100%; justify-content: center; }
}