/* ═════════════════════════════════════════════════════════════════
   PRAJNA ANALYTICS LTD — SCROLL STORY LAYER
   Parallax scenes for the homepage: "The Ascent" in five chapters.
   Loaded after styles.css; driven by js/story.js.

   Motion is progressive enhancement. Everything below renders as a
   sensible static page unless <html> has the .story-on class (set in
   <head> when the visitor has not asked for reduced motion).
   ═════════════════════════════════════════════════════════════════ */

:root {
  --night-0: #03050d;
  --night-1: #070d26;
  --night-2: #0e1c52;
  --night-3: #1b3a94;
  --glow-cyan: 0, 210, 255;
  --glow-warm: 255, 196, 128;
}

/* Individual transform properties (translate / scale) are used for all
   parallax so they compose with the existing hover and reveal transforms.
   These rules stop `transition: all` from smoothing per-frame updates. */
[data-depth], [data-x], [data-rise], [data-rise-x] {
  transition-property: opacity, transform, box-shadow, border-color, background-color;
}

/* ─── SHARED SCENE PRIMITIVES ──────────────────────────────────── */
.scene-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.scene-layers > * {
  position: absolute;
  will-change: translate;
}

/* Star fields: one 1px element per field, stars are its box-shadows (set by js) */
.star-field {
  inset: 0 0 25% 0;
  opacity: calc(1 - var(--p, 0) * 1.35);
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}

.stars--a { animation: starTwinkle 5s ease-in-out infinite; }
.stars--b { animation: starTwinkle 7s ease-in-out -2.6s infinite; }

@keyframes starTwinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Sun / dawn glow that rises from behind the ridgelines */
.sun {
  left: 62%;
  bottom: 24%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  margin-left: calc(min(120vw, 1100px) / -2);
  transform: translateY(50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 244, 214, 0.95) 0%,
    rgba(var(--glow-warm), 0.55) 14%,
    rgba(var(--glow-cyan), 0.18) 38%,
    rgba(var(--glow-cyan), 0) 70%);
  opacity: calc(0.15 + var(--p, 0) * 0.9);
}

/* Dawn wash that fades in over the night sky as the story progresses */
.sky-dawn {
  inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 58, 138, 0) 0%,
    rgba(59, 130, 246, 0.38) 48%,
    rgba(var(--glow-cyan), 0.32) 74%,
    rgba(var(--glow-warm), 0.55) 100%);
  opacity: calc(var(--p, 0) * 1.3);
}

/* Soft volumetric clouds (radial gradients, no filter:blur — cheap to move) */
.cloud {
  width: 70vw;
  max-width: 1000px;
  height: 22vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 165, 255, 0.22), rgba(120, 165, 255, 0));
}

.cloud--white {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}

/* Ridgelines: <svg> is generated by js from data-seed / data-base / data-amp / data-rough */
.ridge {
  left: -3%;
  right: -3%;
  bottom: 0;
}

.ridge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ridge-peak { stop-color: var(--ridge-peak, #0a1540); }
.ridge-fog { stop-color: var(--ridge-fog, var(--ridge-peak, #0a1540)); }

.ridge-edge {
  fill: none;
  stroke: var(--ridge-edge, rgba(90, 180, 255, 0.35));
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Topographic contour art (generated by js), used on the light sections */
.topo {
  position: absolute;
  inset: -8% -4%;
  pointer-events: none;
  color: var(--primary-blue);
  z-index: 0;
}

.topo svg { display: block; width: 100%; height: 100%; }

.topo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.16;
  vector-effect: non-scaling-stroke;
}

.aura {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(0, 82, 255, 0.10), rgba(0, 82, 255, 0));
}

.aura--cyan {
  background: radial-gradient(closest-side, rgba(0, 210, 255, 0.13), rgba(0, 210, 255, 0));
}

/* Night ridge colour ramp (far → near): peak colour, fog colour, lit edge.
   The hero overrides the fog colours so the foreground fades into the white page. */
.scene--night .ridge--1 { --ridge-peak: #2b4fb8; --ridge-fog: #4a72e6; --ridge-edge: rgba(120, 205, 255, 0.6); }
.scene--night .ridge--2 { --ridge-peak: #1f3d9c; --ridge-fog: #3a5fcf; --ridge-edge: rgba(100, 190, 255, 0.5); }
.scene--night .ridge--3 { --ridge-peak: #142c78; --ridge-fog: #2a48b0; --ridge-edge: rgba(84, 176, 255, 0.4); }
.scene--night .ridge--4 { --ridge-peak: #0c1c55; --ridge-fog: #1a3290; --ridge-edge: rgba(70, 160, 255, 0.32); }
.scene--night .ridge--5 { --ridge-peak: #070f33; --ridge-fog: #0c1a55; --ridge-edge: rgba(56, 140, 255, 0.24); }

/* Back layers stay dark enough for white copy; only the two near layers go pale */
.hero-section.scene--night .ridge--1 { --ridge-fog: #3f66d8; }
.hero-section.scene--night .ridge--2 { --ridge-fog: #3157c4; }
.hero-section.scene--night .ridge--3 { --ridge-fog: #7d9df0; }
.hero-section.scene--night .ridge--4 { --ridge-fog: #cddcff; }
.hero-section.scene--night .ridge--5 { --ridge-fog: #ffffff; }

/* The climb keeps its ridges dark so the trail and camp labels stay legible; the
   sky brightens behind them as the summit approaches */
.climb-track.scene--night .ridge--1 { --ridge-peak: #24439f; --ridge-fog: #1a3184; --ridge-edge: rgba(120, 205, 255, 0.55); }
.climb-track.scene--night .ridge--2 { --ridge-peak: #1b3585; --ridge-fog: #142870; --ridge-edge: rgba(100, 190, 255, 0.45); }
.climb-track.scene--night .ridge--3 { --ridge-peak: #142a6c; --ridge-fog: #0e1e56; --ridge-edge: rgba(84, 176, 255, 0.36); }
.climb-track.scene--night .ridge--4 { --ridge-peak: #0d1d54; --ridge-fog: #08133d; --ridge-edge: rgba(70, 160, 255, 0.28); }
.climb-track.scene--night .ridge--5 { --ridge-peak: #070f33; --ridge-fog: #040a22; --ridge-edge: rgba(56, 140, 255, 0.2); }

/* Chapter label: mono eyebrow above each section title */
.chapter-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 14px;
}

.chapter-label b {
  font-weight: 600;
  padding-right: 10px;
  border-right: 1px solid currentColor;
  opacity: 0.9;
}

.scene--night .chapter-label,
.chapter-label--light { color: #7fe3ff; }

/* ─── NAVBAR: transparent over the night hero, dark glass once scrolling ── */
.navbar {
  background: transparent;
  border-bottom-color: transparent;
}

.navbar:not(.scrolled) { backdrop-filter: none; }

.navbar.scrolled {
  background: rgba(7, 13, 38, 0.93);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(3, 5, 13, 0.3);
}

.logo-title { color: #ffffff; }
.logo-sub { color: #7fe3ff; }
.nav-link { color: rgba(255, 255, 255, 0.78); }
.nav-link:hover { color: #00d2ff; }

.nav-mobile-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.nav-mobile-toggle:hover { background: rgba(255, 255, 255, 0.16); }

/* ─── CHAPTER 01: BASE CAMP (HERO) ─────────────────────────────── */
/* The section is the pin track; .hero-stage holds the scene. On large screens the stage
   pins for a short prologue (see the media query below); elsewhere it scrolls normally. */
.hero-section {
  position: relative;
  padding: 0;
  background: var(--night-0);
}

.hero-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-height) + 50px) 0 190px;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 32%, var(--night-2) 66%, var(--night-3) 100%);
  color: #ffffff;
}

.hero-stage > .container { position: relative; z-index: 2; }

/* Let the hero columns shrink below the code card's natural width: without this the
   sandbox header forces the whole hero wider than a phone screen */
.hero-left,
.hero-right { min-width: 0; }

.hero-section .sandbox-header {
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* The typewriter grows the code box line by line, which used to shove the whole page
   (and the vertically-centred pinned hero) around. Reserve the final height up front. */
.hero-section .sandbox-body { min-height: 340px; }

@media (max-width: 1024px) {
  .hero-section .sandbox-body { min-height: 360px; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.hero-section .ridge--1 { height: 66%; }
.hero-section .ridge--2 { height: 55%; }
.hero-section .ridge--3 { height: 44%; }
.hero-section .ridge--4 { height: 34%; }
.hero-section .ridge--5 { height: 22%; }

.hero-section .cloud--a { top: 34%; left: -12%; }
.hero-section .cloud--b { top: 48%; right: -18%; height: 26vh; }

/* Final veil so the scene lands on the pure-white trust bar without a seam */
.hero-section .mist {
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-surface) 100%);
}

.hero-section .cloud--front {
  bottom: -9%;
  left: 10%;
  height: 26vh;
  width: 90vw;
}

.hero-section .cloud--front-b {
  bottom: -11%;
  left: -30%;
  height: 22vh;
  width: 80vw;
}

/* Hero copy on the dark sky */
.hero-section .badge-kobault {
  background: rgba(var(--glow-cyan), 0.1);
  border-color: rgba(var(--glow-cyan), 0.32);
  color: #8fe9ff;
}

.hero-section .badge-dot {
  background: #00d2ff;
  box-shadow: 0 0 10px #00d2ff;
}

.hero-section .heading-xl { color: #ffffff; text-shadow: 0 2px 30px rgba(3, 5, 13, 0.55); }

.hero-section .text-cobalt-gradient {
  background: linear-gradient(135deg, #6ea8ff 0%, #00d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-section .subheading { color: rgba(226, 232, 240, 0.9); text-shadow: 0 1px 14px rgba(3, 5, 13, 0.7); }
.hero-section .bullet-item { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 12px rgba(3, 5, 13, 0.75); }

.hero-section .bullet-icon {
  background: rgba(var(--glow-cyan), 0.16);
  color: #00d2ff;
}

.hero-section .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.hero-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #00d2ff;
}

.hero-section .sandbox-card {
  border-color: rgba(var(--glow-cyan), 0.22);
  box-shadow: 0 30px 80px rgba(0, 82, 255, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Pinned hero: the pitch lifts away, dawn breaks, and a one-line prologue takes over.
   Needs room for the full pitch, so it only applies on roomy desktop viewports. */
.hero-prologue { display: none; }

@media (min-width: 1025px) and (min-height: 760px) {
  html.story-on .hero-section { height: 230vh; height: 230svh; }

  html.story-on .hero-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: calc(var(--nav-height) + 20px) 0 140px;
    display: flex;
    align-items: center;
  }

  html.story-on .hero-stage > .hero-content { width: 100%; }
}

.hero-section.is-pinned .hero-content {
  opacity: clamp(0, calc(1.55 - var(--p, 0) * 3.6), 1);
  translate: 0 calc(var(--p, 0) * -70px);
}

.hero-section.is-departed .hero-content { pointer-events: none; }

.hero-section.is-pinned .hero-prologue {
  display: block;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: min(900px, 88vw);
  text-align: center;
  pointer-events: none;
  opacity: clamp(0, min(calc((var(--p, 0) - 0.55) * 6), calc((1 - var(--p, 0)) * 7)), 1);
}

.hero-prologue p {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 40px rgba(3, 5, 13, 0.7);
}

.hero-prologue em {
  font-style: normal;
  background: linear-gradient(135deg, #8fe9ff 0%, #ffd58a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-section.is-pinned .scroll-cue { opacity: clamp(0, calc(1 - var(--p, 0) * 7), 1); }

/* "Begin the ascent" cue */
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--tr);
}

.scroll-cue:hover { color: var(--primary-blue); }

.scroll-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  background: rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.scroll-cue-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--primary-blue);
  animation: cueDrop 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

@keyframes cueDrop {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

/* ─── SHARED: MAP LAYERS & STORY METER (chapters 02 and 03) ────── */
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}

.map-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Each layer is larger than the stage so panning never exposes an edge */
.map-layer {
  position: absolute;
  inset: -35%;
  will-change: translate;
}

.map-layer .topo { inset: 0; }
.map-layer .topo path { opacity: 0.1; }
.map-layer .topo--mid path { opacity: 0.14; }
.map-layer .topo--strong path { opacity: 0.26; stroke-width: 1.25; }

.map-mark {
  position: absolute;
  color: rgba(0, 82, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-mark--cross { font-size: 15px; font-weight: 400; color: rgba(0, 82, 255, 0.28); }
.map-mark--compass { width: 64px; height: 64px; color: rgba(0, 82, 255, 0.4); }

.map-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  opacity: 0.75;
}

.story-meter {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

html.story-on .story-meter { display: flex; }

.story-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  white-space: nowrap;
}

.story-count b { color: var(--primary-blue); font-weight: 600; }

.story-meter-track {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.story-meter-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: var(--primary-gradient);
}

/* ─── CHAPTER 02: THE TERRAIN (SERVICES AS A PANNING MAP) ──────── */
.terrain { position: relative; background: var(--bg-main); }
.terrain-track { position: relative; }

.terrain-stage {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 90px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.terrain-grid { position: relative; z-index: 2; }

.terrain-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}

/* Static / reduced-motion layout: the familiar 2x2 grid over a quiet contour backdrop */
.terrain-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.map-layer--route,
.map-layer:nth-child(n+3) { display: none; }

/* Story mode: pinned stage, one region at a time, camera pans across the map */
html.story-on .terrain-track {
  height: 380vh;
  height: 380svh;
}

html.story-on .terrain-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 16px) 0 32px;
}

html.story-on .map-layer--route,
html.story-on .map-layer:nth-child(n+3) { display: block; }

html.story-on .terrain-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 34%, rgba(255, 255, 255, 0) 58%);
}

html.story-on .terrain-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "head map"
    "panel map";
  column-gap: 56px;
  align-content: center;
  pointer-events: none;
}

html.story-on .terrain-head { grid-area: head; text-align: left; margin: 0 0 24px; max-width: none; pointer-events: auto; }
html.story-on .terrain-panel { grid-area: panel; pointer-events: auto; }
html.story-on .terrain-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }

html.story-on .terrain-step {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow var(--tr), border-color var(--tr);
}

html.story-on .terrain-step.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0.1s, 0.1s, 0s, 0s;
}

.map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-ghost,
.route-live,
.route-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-ghost { stroke: rgba(0, 82, 255, 0.3); stroke-width: 2; stroke-dasharray: 3 10; }
.route-glow { stroke: rgba(0, 82, 255, 0.16); stroke-width: 10; }
.route-live { stroke: var(--primary-blue); stroke-width: 3.5; }

.map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid rgba(0, 82, 255, 0.4);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}

.map-pin.is-reached { border-color: var(--primary-blue); }

.map-pin.is-active {
  background: var(--primary-blue);
  border-color: #ffffff;
  transform: scale(1.3);
  box-shadow: 0 0 0 7px rgba(0, 82, 255, 0.16), 0 8px 26px rgba(0, 82, 255, 0.45);
  animation: pinPulse 2.2s ease-in-out infinite;
}

@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(0, 82, 255, 0.16), 0 8px 26px rgba(0, 82, 255, 0.45); }
  50% { box-shadow: 0 0 0 16px rgba(0, 82, 255, 0.05), 0 8px 30px rgba(0, 82, 255, 0.5); }
}

.map-pin-label {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}

.map-pin.is-active .map-pin-label {
  background: var(--primary-blue);
  border-color: transparent;
  color: #ffffff;
}

.map-pin--label-left .map-pin-label {
  top: 50%;
  left: auto;
  right: 36px;
  transform: translateY(-50%);
}

/* Static mode hides the pin art; the pins only make sense while the camera moves */
.map-pin { display: none; }
html.story-on .map-pin { display: block; }

/* ─── CHAPTER 03: EXPEDITIONS (PINNED HORIZONTAL GALLERY) ──────── */
.expeditions { position: relative; background: #ffffff; }
.exp-track { position: relative; }

.exp-stage {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 90px 0 30px;
  background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%);
}

.exp-head { position: relative; z-index: 2; }

/* Static layout: the classic 2-column featured grid */
.exp-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.exp-slide { display: contents; }
.exp-word,
.exp-meta,
.exp-dots,
.exp-count { display: none; }

.exp-more { padding-top: 40px; padding-bottom: 100px; text-align: left; }

html.story-on .exp-track {
  height: 400vh;
  height: 400svh;
}

html.story-on .exp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-height) + 14px) 0 34px;
}

html.story-on .exp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  flex: 0 0 auto;
}

html.story-on .exp-head .section-head { text-align: left; margin: 0; max-width: 640px; }
html.story-on .exp-head .subheading { font-size: 15px; }
html.story-on .exp-count { display: block; padding-bottom: 8px; font-size: 13px; }
html.story-on .exp-count b { font-size: 26px; font-family: var(--font-heading); letter-spacing: 0; }

html.story-on .exp-strip {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  width: calc(var(--n, 4) * 100%);
}

html.story-on .exp-slide {
  display: flex;
  flex: 0 0 calc(100% / var(--n, 4));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
}

html.story-on .exp-word {
  display: block;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(120px, 21vw, 340px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 82, 255, 0.14);
  user-select: none;
  z-index: 0;
}

html.story-on .exp-meta {
  display: block;
  position: relative;
  z-index: 1;
  width: min(1232px, calc(100% - 48px));
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-blue);
}

html.story-on .exp-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  width: min(1232px, calc(100% - 48px));
  height: min(50vh, 470px);
  height: min(50svh, 470px);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
}

html.story-on .exp-card .kobault-media { aspect-ratio: auto; height: 100%; }
html.story-on .exp-card .kobault-body { padding: 30px 34px; justify-content: center; }
html.story-on .exp-card .kobault-title { font-size: 24px; }
html.story-on .exp-card .kobault-desc { flex: 0 0 auto; }

html.story-on .exp-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
}

.exp-dots span {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--border-strong);
  transition: width 0.4s, background 0.4s;
}

.exp-dots span.is-active {
  width: 32px;
  background: var(--primary-gradient);
}

/* ─── DUSK: LIGHT FADES INTO THE NIGHT CLIMB ───────────────────── */
.dusk {
  position: relative;
  height: 80vh;
  min-height: 480px;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e4ebff 12%,
    #b3c3f6 28%,
    #7c8ee2 44%,
    #4b52b4 58%,
    #2b3181 70%,
    #0f1548 84%,
    var(--night-0) 100%);
}

.dusk .star-field {
  inset: 0 0 42% 0;
  opacity: clamp(0, calc((var(--p, 0) - 0.3) * 2.2), 1);
}

.dusk-glow {
  left: 50%;
  bottom: 30%;
  width: min(110vw, 1000px);
  aspect-ratio: 1;
  margin-left: calc(min(110vw, 1000px) / -2);
  transform: translateY(50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 214, 170, 0.95) 0%,
    rgba(255, 150, 120, 0.5) 16%,
    rgba(255, 120, 160, 0.18) 40%,
    rgba(255, 120, 160, 0) 70%);
}

.cloud--dusk { background: radial-gradient(closest-side, rgba(255, 190, 190, 0.34), rgba(255, 190, 190, 0)); }
.dusk .cloud--a { top: 32%; left: -10%; }
.dusk .cloud--b { top: 50%; right: -14%; }

.dusk .ridge--1 { height: 60%; --ridge-peak: #4a55b5; --ridge-fog: #2a2f7d; --ridge-edge: rgba(255, 190, 160, 0.5); }
.dusk .ridge--2 { height: 48%; --ridge-peak: #2b3283; --ridge-fog: #1a1f5c; --ridge-edge: rgba(255, 180, 170, 0.32); }
.dusk .ridge--3 { height: 36%; --ridge-peak: #161c5a; --ridge-fog: #0c1040; --ridge-edge: rgba(150, 170, 255, 0.26); }
.dusk .ridge--4 { height: 25%; --ridge-peak: #080c30; --ridge-fog: #03050d; --ridge-edge: rgba(100, 140, 255, 0.2); }

/* ─── CHAPTER 04: THE CLIMB (PINNED METHODOLOGY) ───────────────── */
.climb {
  position: relative;
  background: var(--night-1);
  color: #ffffff;
}

.climb-track { position: relative; }

.climb-stage {
  position: relative;
  overflow: hidden;
  padding: 100px 0 90px;
  background: linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 34%, var(--night-2) 70%, var(--night-3) 100%);
}

.climb-stage .sun { left: 68%; bottom: 8%; }
.climb-stage .ridge--1 { height: 62%; }
.climb-stage .ridge--2 { height: 52%; }
.climb-stage .ridge--3 { height: 41%; }
.climb-stage .ridge--4 { height: 31%; }
.climb-stage .ridge--5 { height: 21%; }
.climb-stage .cloud--a { top: 42%; left: -10%; }
.climb-stage .cloud--b { top: 60%; right: -14%; }

.climb-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "head viz"
    "steps viz";
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 56px;
  row-gap: 0;
}

.climb-head { grid-area: head; }
.climb-panel { grid-area: steps; }
.climb-viz { grid-area: viz; align-self: center; }

.climb .heading-lg { color: #ffffff; }
.climb .subheading { color: rgba(226, 232, 240, 0.8); }

.climb .badge-kobault {
  background: rgba(var(--glow-cyan), 0.1);
  border-color: rgba(var(--glow-cyan), 0.32);
  color: #8fe9ff;
}

.climb-head { margin-bottom: 28px; }

/* Static / reduced-motion layout: the four stages sit side by side as cards */
.climb-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.climb-step {
  padding: 26px 28px;
  border-radius: var(--radius-md);
  background: rgba(7, 13, 38, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

.climb-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #6ea8ff 0%, #00d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.climb-step h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}

.climb-step p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.8);
}

.climb-meter,
.climb-viz { display: none; }

/* Story mode: the stage pins to the viewport and the scroll drives the climb */
html.story-on .climb-track {
  height: 460vh;
  height: 460svh;
}

html.story-on .climb-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 16px) 0 32px;
}

html.story-on .climb-stage > .container { width: 100%; }

html.story-on .climb-steps {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Inactive stages are faded, not hidden, so screen readers and find-in-page still reach all four */
html.story-on .climb-step {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

html.story-on .climb-step.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

html.story-on .climb-step.is-past { transform: translateY(-22px); }

html.story-on .climb-meter {
  display: block;
  position: relative;
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.climb-meter-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #0052ff, #00d2ff);
}

/* Trail: an equity-curve style climb through four camps */
html.story-on .climb-viz {
  display: block;
  position: relative;
  height: min(62vh, 560px);
  border-radius: var(--radius-lg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 100%);
}

.climb-viz svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trail-ghost,
.trail-live {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trail-ghost {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
  stroke-dasharray: 2 9;
}

.trail-live {
  stroke: url(#trailGradient);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px rgba(var(--glow-cyan), 0.7));
}

.camp,
.climber {
  position: absolute;
  top: 0;
  left: 0;
  will-change: translate;
}

.camp {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--night-1);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.camp.is-reached {
  background: #00d2ff;
  border-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(var(--glow-cyan), 0.2), 0 0 26px rgba(var(--glow-cyan), 0.75);
}

.camp-label {
  position: absolute;
  top: 12px;
  left: 20px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.4s;
}

.camp.is-reached .camp-label { color: #ffffff; }

.camp--flip .camp-label {
  left: auto;
  right: 20px;
  top: -26px;
}

.camp--summit::before {
  content: '';
  position: absolute;
  left: 5px;
  bottom: 10px;
  width: 2px;
  height: 30px;
  background: rgba(255, 255, 255, 0.7);
}

.camp--summit::after {
  content: '';
  position: absolute;
  left: 7px;
  bottom: 26px;
  width: 20px;
  height: 14px;
  background: rgba(255, 255, 255, 0.35);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: background 0.4s;
}

.camp--summit.is-reached::after { background: #ffd58a; }

.climber {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 5px rgba(var(--glow-cyan), 0.35), 0 0 34px 8px rgba(var(--glow-cyan), 0.6);
  animation: climberPulse 2s ease-in-out infinite;
}

@keyframes climberPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(var(--glow-cyan), 0.35), 0 0 34px 8px rgba(var(--glow-cyan), 0.6); }
  50% { box-shadow: 0 0 0 11px rgba(var(--glow-cyan), 0.12), 0 0 44px 12px rgba(var(--glow-cyan), 0.7); }
}

/* ─── CHAPTER 05: THE SUMMIT (CONTACT) ─────────────────────────── */
.summit {
  position: relative;
  background: #070d26;
}

/* Static: the sky fills the section. Story mode: it pins while the form scrolls over it. */
.summit-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg,
    #070d26 0%,
    #10236b 26%,
    #2559d6 54%,
    #6fb6ff 76%,
    #ffd9a6 100%);
}

html.story-on .summit-stage {
  position: sticky;
  top: 0;
  bottom: auto;
  left: auto;
  right: auto;
  height: 100vh;
  height: 100svh;
}

.summit-content {
  position: relative;
  z-index: 2;
  padding: 110px 0 260px;
}

/* The content is pulled up over the stage (rather than the stage pushed down), so the
   pinned sky can never overhang the section and cover the footer */
html.story-on .summit-content {
  margin-top: -100vh;
  margin-top: -100svh;
  padding: 34vh 0 240px;
  padding-top: 34svh;
}
html.story-on .summit { scroll-margin-top: -12vh; scroll-margin-top: -12svh; }

.summit .star-field { inset: 0 0 55% 0; }
.summit .sun { left: 50%; bottom: 4%; width: min(150vw, 1400px); margin-left: calc(min(150vw, 1400px) / -2); opacity: 0.95; }
.summit .cloud--white { opacity: 0.55; }
.summit .cloud--a { top: 48%; left: -16%; }
.summit .cloud--b { top: 60%; right: -20%; }
.summit .ridge--1 { height: 34%; }
.summit .ridge--2 { height: 27%; }
.summit .ridge--3 { height: 20%; }
.summit .ridge--4 { height: 13%; }

.summit .ridge--1 { --ridge-peak: #6d8fd8; --ridge-fog: #a9bfe8; --ridge-edge: rgba(255, 255, 255, 0.6); }
.summit .ridge--2 { --ridge-peak: #3f63b8; --ridge-fog: #5f83d0; --ridge-edge: rgba(255, 255, 255, 0.4); }
.summit .ridge--3 { --ridge-peak: #23428f; --ridge-fog: #1b3578; --ridge-edge: rgba(255, 255, 255, 0.26); }
.summit .ridge--4 { --ridge-peak: #0f1f57; --ridge-fog: #090d16; --ridge-edge: rgba(255, 255, 255, 0.14); }

.summit-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.summit-head .heading-lg { color: #ffffff; text-shadow: 0 2px 30px rgba(3, 5, 13, 0.4); }
.summit-head .subheading { color: rgba(240, 246, 255, 0.88); margin-top: 10px; }

.summit .contact-split-card {
  box-shadow: 0 30px 90px rgba(3, 5, 13, 0.45);
}

/* Columns may shrink below the long email link's width (no sideways overflow on small phones) */
.contact-split-card > * { min-width: 0; }
.contact-split-card a { overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .contact-split-card { grid-template-columns: minmax(0, 1fr); }
}

/* ─── ASCENT PROGRESS + ALTIMETER ──────────────────────────────── */
.ascent-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1100;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(var(--ascent, 0));
  background: linear-gradient(90deg, #0052ff, #00d2ff 70%, #ffd58a);
}

.altimeter {
  display: none;
  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 900;
  transform: translateY(-50%);
  width: 58px;
  padding: 14px 6px 12px;
  border-radius: 999px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(7, 13, 38, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: var(--font-mono);
  pointer-events: none;
}

.alt-value {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

.alt-value small {
  display: block;
  font-size: 9px;
  opacity: 0.55;
  letter-spacing: 0.12em;
}

.alt-rail {
  position: relative;
  width: 2px;
  height: 140px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.alt-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform-origin: bottom center;
  transform: scaleY(var(--ascent, 0));
  border-radius: 2px;
  background: linear-gradient(0deg, #0052ff, #00d2ff);
}

.alt-dot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ascent, 0) * 100%);
  width: 10px;
  height: 10px;
  margin: 0 0 -5px -5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(var(--glow-cyan), 0.9);
}

.alt-chapter {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.2;
  color: #7fe3ff;
}

.alt-chapter small {
  display: block;
  font-size: 8px;
  opacity: 0.6;
  letter-spacing: 0.12em;
}

@media (min-width: 1400px) {
  .altimeter { display: flex; }
}

/* ─── REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stars--a,
  .stars--b,
  .climber,
  .map-pin.is-active,
  .scroll-cue-line::after { animation: none !important; }

  .scene-layers > *,
  .map-layer { will-change: auto; }
  .ascent-bar,
  .altimeter { display: none !important; }
}

/* ─── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-height: 700px) {
  html.story-on .climb-stage { padding-top: calc(var(--nav-height) + 4px); padding-bottom: 16px; }
  .climb .subheading { display: none; }
  .climb-head { margin-bottom: 16px; }
  .climb-num { font-size: 34px; margin-bottom: 8px; }
  .climb-step { padding: 18px 22px; }
  html.story-on .climb-viz { height: min(56vh, 480px); }
}

@media (max-width: 1024px) {
  .hero-stage { padding-bottom: 170px; }

  .climb-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "viz"
      "steps";
    row-gap: 14px;
  }

  html.story-on .climb-viz { height: 26vh; height: 26svh; min-height: 150px; }
  .climb .subheading { display: none; }
  .climb-head { margin-bottom: 16px; }
  html.story-on .climb-stage { padding-top: calc(var(--nav-height) + 6px); padding-bottom: 20px; }
  .climb-num { font-size: 32px; margin-bottom: 8px; }
  .climb-step { padding: 18px 20px; }
  .climb-step h3 { font-size: 18px; }
  .climb-step p { font-size: 14px; line-height: 1.55; }
  .camp-label { display: none; }
}

@media (max-width: 640px) {
  .hero-stage { padding-bottom: 150px; }
  .scroll-cue { bottom: 22px; }
  .summit-content { padding: 70px 0 180px; }
  html.story-on .summit-content { padding: 30svh 0 180px; }
  .climb-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ─── PINNED CHAPTERS ON TABLET / PHONE ────────────────────────── */
@media (max-width: 1024px) {
  html.story-on .terrain-stage {
    align-items: stretch;
    padding: calc(var(--nav-height) + 8px) 0 22px;
  }

  html.story-on .terrain-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "head"
      "map"
      "panel";
  }

  html.story-on .terrain-stage::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.9) 100%);
  }

  html.story-on .terrain-head { margin-bottom: 0; }
  html.story-on .terrain-head .subheading,
  html.story-on .terrain-head .badge-kobault { display: none; }
  html.story-on .terrain-step { padding: 20px 22px; }
  html.story-on .terrain-step .bento-title { font-size: 19px; margin-bottom: 6px; }
  html.story-on .terrain-step .bento-desc { font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
  html.story-on .terrain-step .bento-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  html.story-on .terrain-step .bento-icon svg { width: 20px; height: 20px; }
  html.story-on .terrain-step .bento-tag { font-size: 11px; padding: 3px 10px; }
  .map-pin-label { top: 32px; font-size: 10px; }

  html.story-on .exp-stage { padding: calc(var(--nav-height) + 6px) 0 20px; }
  html.story-on .exp-head .subheading,
  html.story-on .exp-head .badge-kobault { display: none; }
  html.story-on .exp-head .section-head { max-width: none; }

  html.story-on .exp-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 42%) minmax(0, 1fr);
    width: calc(100% - 32px);
    height: min(64vh, 560px);
    height: min(64svh, 560px);
  }

  html.story-on .exp-meta { width: calc(100% - 32px); }
  html.story-on .exp-card .kobault-body { padding: 16px 20px; }
  html.story-on .exp-card .kobault-title { font-size: 19px; margin-bottom: 6px; }
  html.story-on .exp-card .kobault-desc { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
  html.story-on .exp-card .kobault-metrics { display: none; }
  html.story-on .exp-word { font-size: 38vw; top: 40%; }
}

/* Tablet portrait: keep the media at its natural 16:10 and let the card size to its content */
@media (min-width: 700px) and (max-width: 1024px) {
  html.story-on .exp-card {
    grid-template-rows: auto 1fr;
    height: auto;
    max-height: 74vh;
    max-height: 74svh;
  }

  html.story-on .exp-card .kobault-media { aspect-ratio: 16 / 10; height: auto; }
  html.story-on .exp-card .kobault-body { padding: 22px 28px 26px; }
  html.story-on .exp-card .kobault-desc { font-size: 15px; }
}

/* Short laptop windows: drop the secondary copy so each pinned stage still fits */
@media (max-height: 760px) and (min-width: 1025px) {
  html.story-on .exp-head .subheading,
  html.story-on .exp-head .badge-kobault,
  html.story-on .exp-meta,
  html.story-on .terrain-head .subheading,
  html.story-on .terrain-head .badge-kobault { display: none; }

  html.story-on .exp-card { height: min(56vh, 430px); }
  html.story-on .terrain-head { margin-bottom: 16px; }
  html.story-on .terrain-head .heading-lg,
  html.story-on .exp-head .heading-lg { font-size: 32px; }
  html.story-on .terrain-step { padding: 24px 28px; }
  html.story-on .terrain-step .bento-icon { margin-bottom: 12px; }
  html.story-on .terrain-step .bento-desc { font-size: 14px; margin-bottom: 14px; }
}

/* Very small phones (320px): the long no-wrap portfolio button was wider than the screen,
   and Chrome widened the whole layout to fit it. Let it wrap. */
.exp-more .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}