/* One native scrolling runway, one sticky camera, a shared perspective space. */
.hero.has-hero-stage { overflow: visible; }
.hero-camera { position: sticky; overflow: clip; }
.has-hero-stage .hero-layout { transform-origin: 50% 48%; }
.has-story-stage { display: block; }
.has-story-stage > .space-scene { display: none; }
.has-story-stage .operations-layout { display: block; }
.has-story-stage .operations-sticky { position: static; margin-bottom: 48px; }
.has-story-stage .operations-sticky h2 { max-width: 18ch; }
.has-story-stage .operations-sticky > p:not(.eyebrow) { max-width: 58ch; }
.has-story-stage .case-grid:empty, .has-story-stage .toolkit-grid:empty,
.has-story-stage .process-chapters:empty, .has-story-stage > .metrics:empty { display: none; }
.has-story-stage .case-grid { margin: 0; }
.story-runway { position: relative; width: 100%; overflow-anchor: none; }
.story-viewport {
  position: sticky; top: 0; height: var(--stage-viewport, 100svh); min-height: 300px;
  display: grid; grid-template-rows: 48px minmax(0, 1fr) 58px;
  padding-top: 90px; isolation: isolate; overflow: clip;
  /* Keep the sticky scene on one persistent surface during native scrolling. */
  transform: translateZ(0);
}
.story-status { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: .75rem/1.4 Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.story-status > span:last-child { color: var(--gold); white-space: nowrap; }
.story-aperture { position: relative; z-index: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.story-camera { position: relative; display: block; height: 100%; min-height: 0; width: min(100%, 1040px); margin-inline: auto;
  perspective: 1200px; perspective-origin: 50% 44%; transform-style: flat; }
.story-camera > .stage-panel {
  position: absolute; inset: 0 0 auto; width: 100%; max-width: none; margin: 0;
  /* The choreography never shows a back face; avoid unnecessary culling. */
  backface-visibility: visible; border: 1px solid #526881; border-radius: 8px;
  background: linear-gradient(125deg, #16273e, #0b1424 70%); visibility: hidden;
  transition: none; translate: none; transform-origin: 50% 40%; opacity: 0;
}
.story-camera > .stage-panel[data-stage-prepared] { visibility: visible; }
.story-camera > .stage-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid #b7d7f461; pointer-events: none; }
/* Prepare the upcoming face before it fades in, and retain it across phases. */
.story-runway[data-stage-active] .stage-panel[data-stage-prepared] { will-change: transform, opacity; }
.story-camera .stage-panel:hover { translate: none; }
.story-camera .case-wide .case-main { display: block; }
.story-camera .case-wide .case-main h3 { max-width: none; margin-bottom: 22px; }
.story-camera .case-details { margin-top: auto; }
.story-camera .detail-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.story-camera .case-featured { display: grid; grid-template-columns: 1.35fr 1fr; }
.story-camera > [data-story="chapter"], .story-camera > [data-story="toolkit"],
.story-camera > [data-story="personal"] { padding: clamp(24px, 5vw, 58px); }
.story-camera > [data-story="chapter"] .chapter-number { top: 28px; right: 28px; }
.story-camera > [data-story="chapter"] h3 { margin: 24px 0; }
.story-camera > [data-story="chapter"] .eyebrow { padding-right: 46px; }
.story-camera > [data-story="chapter"] .chapter-note { margin-top: 30px; color: var(--accent); font-size: .875rem; }
.story-camera > [data-story="toolkit"] h3 { margin-bottom: 18px; }
.story-camera .tool-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.story-camera > [data-story="metric"] { display: block; padding: 50px; }
.story-camera.metrics dd:not(.metric-context) { font-size: clamp(5rem, 12vw, 9rem); margin: 14px 0; }
.story-camera.metrics dt, .story-camera.metrics .metric-direction, .story-camera.metrics .metric-context { font-size: 1rem; }
.story-camera.metrics .metric-context { max-width: 46ch; }
.story-camera > .experience-portrait { width: min(70%, 390px); left: 50%; margin-left: max(-35%, -195px); }
.story-camera .experience-copy h2 { font-size: clamp(2rem, 3.7vw, 3rem); }
.story-stops { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; }
.story-stops button { border: 1px solid #34445c; background: #091222; color: var(--muted); min-width: 44px; min-height: 44px; border-radius: 4px; font: .875rem/1.2 Consolas, monospace; }
.story-stops button[aria-current="step"] { color: #08101c; background: var(--accent); border-color: var(--accent); }
.story-stops .story-read-all { margin-left: 10px; padding-inline: 14px; }
/* Stationary clipping and explicit sibling order keep the backdrop behind content. */
.story-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Fixed travel margin keeps one unscaled texture moving forward for the full stage. */
.story-haze { position: absolute; inset: -296px -60px; opacity: .48;
  background: radial-gradient(ellipse, transparent 12%, #060913 80%), url('../assets/cosmic-nebula.webp') 70% 50% / cover;
  transform: translate3d(0,0,0); }
.story-runway[data-stage-active] .story-haze { will-change: transform; }
[data-stage="person"] .story-haze { opacity: .25; }
.has-story-stage.experience { gap: 0; }
/* The shared scroll response owns motion; no independent ambient loops. */
html[data-motion-running] .nebula-drift, html[data-motion-running] .orbit-ambient,
html[data-motion-running] .cosmic-spark { animation: none; }
@media (max-width: 800px), (pointer: coarse) {
  .story-viewport { padding-top: 72px; grid-template-rows: 44px minmax(0,1fr) 62px; }
  .story-camera { perspective: 780px; }
  .story-camera .case-main, .story-camera .case-featured .case-main { padding: 22px; }
  .story-camera .case-index { margin-bottom: 18px; gap: 8px; flex-wrap: wrap; }
  .story-camera .case-main h3 { font-size: 1.55rem; margin-bottom: 16px; }
  .story-camera .case-main > p:not(.case-index) { line-height: 1.6; }
  .story-camera .tags { margin-top: 18px; gap: 6px; }
  .story-camera .case-featured { grid-template-columns: 1fr; }
  .story-camera .case-result { padding: 20px 22px; border-left: 0; border-top: 1px solid var(--line); }
  .story-camera .case-result > strong { font-size: 3.8rem; }
  .story-camera .case-result > p { margin: 4px 0 14px; }
  .story-camera .case-details summary { padding: 16px 22px; }
  .story-camera .detail-grid { grid-template-columns: 1fr; padding: 8px 22px 28px; }
  .story-camera > [data-story="chapter"], .story-camera > [data-story="toolkit"], .story-camera > [data-story="personal"] { padding: 26px; }
  .story-camera > [data-story="chapter"] h3 { font-size: 1.7rem; }
  .story-camera .tool-list { display: block; }
  .story-camera > [data-story="metric"] { padding: 34px 28px; }
  .story-camera.metrics dd:not(.metric-context) { font-size: 5.5rem; }
  .story-camera > .experience-portrait { width: 82%; left: 9%; margin-left: 0; max-width: none; }
  .story-camera .experience-copy h2 { font-size: 2rem; }
  .story-haze { inset-block: -256px; background-image: radial-gradient(ellipse, transparent 12%, #060913 80%), url('../assets/cosmic-nebula-mobile.webp'); }
}
@media (max-width: 360px) { .story-camera { perspective: 720px; } .story-stops { gap: 5px; } }
@media (max-height: 550px) and (min-width: 601px) {
  .story-viewport { padding-top: 58px; grid-template-rows: 32px minmax(0,1fr) 48px; }
  .story-camera { width: min(92%, 950px); perspective: 850px; }
  .story-camera .case-featured { grid-template-columns: 1.4fr 1fr; }
  .story-camera .case-result { border-top: 0; border-left: 1px solid var(--line); }
  .story-camera > .experience-portrait { width: 200px; left: 50%; margin-left: -100px; }
}
@media print {
  .story-runway { height: auto !important; }
  .story-viewport, .story-camera { display: block; position: static; height: auto; overflow: visible; perspective: none; transform: none; }
  .story-camera > .stage-panel { position: static; visibility: visible; transform: none !important; opacity: 1 !important; margin: 20px 0; }
  .story-sky, .story-stops, .story-status { display: none; }
}