/* Jary AI scroll-story system — shared by the 2026 public-site revamp. */
:root {
  --story-purple: #5b2ee5;
  --story-violet: #8b5cf6;
  --story-pink: #ec4899;
  --story-ink: #17151f;
  --story-paper: #f7f3ec;
  --hero-accent: var(--story-purple);
  --hero-secondary: var(--story-pink);
  --hero-wash: rgba(91, 46, 229, .1);
}

html { scroll-behavior: smooth; }

.immersive-page {
  background: var(--story-paper);
  color: var(--story-ink);
}

.story-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  background: rgba(23, 21, 31, .06);
  pointer-events: none;
}

.story-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--story-scroll, 0));
  transform-origin: left;
  background: var(--story-purple);
}

.immersive-page .site-header {
  background: color-mix(in srgb, var(--story-paper) 84%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.story-index { --hero-accent: #5b2ee5; --hero-secondary: #ec4899; --hero-wash: rgba(91, 46, 229, .11); }
.story-askjary-plus { --hero-accent: #315edb; --hero-secondary: #8b5cf6; --hero-wash: rgba(49, 94, 219, .1); }
.story-xos { --hero-accent: #0f766e; --hero-secondary: #5b2ee5; --hero-wash: rgba(15, 118, 110, .09); }
.story-academy { --hero-accent: #c05a20; --hero-secondary: #ec4899; --hero-wash: rgba(192, 90, 32, .09); }
.story-partners { --hero-accent: #7c3aed; --hero-secondary: #e34b87; --hero-wash: rgba(124, 58, 237, .1); }
.story-company { --hero-accent: #b33a5b; --hero-secondary: #5b2ee5; --hero-wash: rgba(179, 58, 91, .09); }
.story-buildos { --hero-accent: #176f75; --hero-secondary: #c05a20; --hero-wash: rgba(23, 111, 117, .09); }
.story-getstarted { --hero-accent: #5b2ee5; --hero-secondary: #c05a20; --hero-wash: rgba(91, 46, 229, .1); }

.story-hero {
  --story-hero-height: calc(100vh - 70px);
  position: relative;
  width: 100%;
  height: var(--story-hero-height);
  min-height: var(--story-hero-height);
  display: grid;
  align-items: center;
  padding: clamp(1.5rem, 4.5svh, 3.5rem) 0;
  overflow: clip;
  isolation: isolate;
}

@supports (height: 100svh) {
  .story-hero { --story-hero-height: calc(100svh - 70px); }
}

@supports (height: 100dvh) {
  .story-hero { --story-hero-height: calc(100dvh - 70px); }
}

.story-hero > .wrap {
  max-width: 1600px;
  padding-inline: clamp(1.25rem, 4vw, 5rem);
}

.story-hero::before,
.story-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  border-radius: 36% 64% 56% 44%;
  pointer-events: none;
}

.story-hero::before {
  width: min(55vw, 760px);
  aspect-ratio: 1;
  right: -12vw;
  top: -12%;
  background: color-mix(in srgb, var(--hero-accent) 13%, transparent);
  transform: rotate(calc(var(--story-scroll, 0) * 35deg));
}

.story-hero::after {
  width: min(33vw, 460px);
  aspect-ratio: 1;
  left: -12vw;
  bottom: -12%;
  background: color-mix(in srgb, var(--hero-secondary) 11%, transparent);
  transform: rotate(calc(var(--story-scroll, 0) * -45deg));
}

.story-hero-grid {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
}

.story-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-height: 100%;
}

.story-hero h1 {
  max-width: 12ch;
  margin: clamp(.75rem, 1.8svh, 1.25rem) 0 clamp(.8rem, 2svh, 1.35rem);
  font-size: clamp(3rem, min(6.2vw, 10.5svh), 7.2rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.story-hero h1 .accentword {
  display: inline;
  color: var(--hero-accent);
}

.story-hero .lead {
  max-width: 42rem;
  font-size: clamp(1rem, min(1.4vw, 2.35svh), 1.3rem);
  line-height: 1.5;
}

.story-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1rem, 2.8svh, 2rem);
}

.story-cue {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: clamp(1rem, 3svh, 2.4rem);
  font-family: var(--mono, monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.story-cue::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: currentColor;
}

.story-art {
  position: relative;
  width: 100%;
  height: min(100%, 650px);
  min-height: 0;
  perspective: 1000px;
}

.hero-scene {
  position: absolute;
  inset: 19% 18%;
  z-index: 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 19%, var(--line));
  border-radius: 34px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent));
  box-shadow: 0 42px 90px -50px color-mix(in srgb, var(--hero-accent) 42%, transparent);
  transform: translate3d(0, calc(var(--story-scroll, 0) * -18px), 0) rotateX(1.5deg);
  backdrop-filter: blur(18px);
}

.hero-scene::before {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero-accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 9%, transparent) 1px, transparent 1px);
  background-size: 2.2rem 2.2rem;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  content: "";
  pointer-events: none;
}

.hero-scene::after {
  position: absolute;
  width: 18rem;
  aspect-ratio: 1;
  right: -8rem;
  bottom: -10rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hero-secondary) 14%, transparent);
  filter: blur(2px);
  content: "";
  pointer-events: none;
}

.hero-scene-kicker {
  position: relative;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

.scene-logo {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 25%, var(--line));
  background: var(--surface);
  box-shadow: 0 16px 38px -18px color-mix(in srgb, var(--hero-accent) 50%, transparent);
}

.scene-logo img { width: 58%; height: auto; }

/* Home — living Jary Core */
.hero-scene--core {
  display: grid;
  place-items: center;
}

.hero-scene--core > .hero-scene-kicker {
  position: absolute;
  top: 1.4rem;
  left: 1.6rem;
}

.core-field { position: absolute; inset: 11%; }
.core-field i {
  position: absolute;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hero-accent) 11%, transparent);
  animation: core-node 3.8s ease-in-out infinite;
}
.core-field i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(4rem, 9vw, 7.5rem);
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 30%, transparent), transparent);
  content: "";
}
.core-field i[data-core-node="1"] { top: 4%; left: 18%; }
.core-field i[data-core-node="2"] { top: 11%; left: 64%; animation-delay: -.4s; }
.core-field i[data-core-node="3"] { top: 30%; left: 2%; animation-delay: -.8s; }
.core-field i[data-core-node="4"] { top: 33%; right: 3%; animation-delay: -1.2s; }
.core-field i[data-core-node="5"] { top: 52%; left: 17%; animation-delay: -1.6s; }
.core-field i[data-core-node="6"] { top: 57%; right: 14%; animation-delay: -2s; }
.core-field i[data-core-node="7"] { bottom: 12%; left: 5%; animation-delay: -2.4s; }
.core-field i[data-core-node="8"] { right: 4%; bottom: 7%; animation-delay: -2.8s; }
.core-field i[data-core-node="9"] { top: 16%; left: 40%; animation-delay: -3.2s; }
.core-field i[data-core-node="10"] { bottom: 13%; left: 39%; animation-delay: -3.6s; }
.core-field i[data-core-node="11"] { top: 44%; left: 31%; animation-delay: -1s; }
.core-field i[data-core-node="12"] { top: 42%; right: 31%; animation-delay: -1.8s; }

.living-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(8.5rem, 17vw, 11rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 44% 56% 48% 52%;
  background: color-mix(in srgb, var(--surface) 86%, var(--hero-wash));
  box-shadow: 0 28px 70px -26px color-mix(in srgb, var(--hero-accent) 58%, transparent);
  animation: living-core 6s ease-in-out infinite alternate;
}
.living-core .scene-logo { width: 54%; aspect-ratio: 1; border-radius: 28%; }
.living-core strong {
  position: absolute;
  bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.living-core-ring {
  position: absolute;
  inset: -26%;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 26%, transparent);
  border-radius: 43% 57% 51% 49%;
  animation: hero-orbit 14s linear infinite;
}
.living-core-ring:nth-child(2) { inset: -51%; border-style: dashed; animation-duration: 20s; animation-direction: reverse; }
.living-core-ring:nth-child(3) { inset: -78%; border-color: color-mix(in srgb, var(--hero-secondary) 22%, transparent); animation-duration: 28s; }
.core-flow {
  position: absolute;
  z-index: 2;
  padding: .38rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--ink-2);
}
.core-flow--in { left: 7%; top: 48%; }
.core-flow--out { right: 5%; top: 48%; }

/* AskJary+ — product within a product */
.hero-scene--runtime { display: flex; flex-direction: column; }
.runtime-bar {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: .75rem;
}
.runtime-bar > span { font-weight: 700; }
.runtime-bar b { display: inline-flex; align-items: center; gap: .45rem; color: var(--hero-accent); font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.runtime-bar b i { width: 6px; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation: core-node 2s ease-in-out infinite; }
.runtime-workspace { position: relative; z-index: 2; display: grid; flex: 1; grid-template-columns: 1.15fr .85fr; gap: 1rem; padding: 1.2rem; }
.runtime-host {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.runtime-message, .runtime-response {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem;
  border-radius: 13px;
  background: var(--surface-2);
  font-size: .72rem;
}
.runtime-message { margin-top: auto; width: 82%; }
.runtime-message i { width: 1.6rem; aspect-ratio: 1; border-radius: 8px; background: var(--ink); }
.runtime-response { position: relative; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--hero-accent) 28%, var(--line)); background: var(--surface); }
.runtime-response .runtime-mark { width: 2rem; flex: none; }
.runtime-response > span:nth-child(2) { font-weight: 700; }
.runtime-response > b { position: absolute; right: .7rem; bottom: .55rem; color: var(--hero-accent); font-family: var(--font-mono); font-size: .52rem; text-transform: uppercase; }
.runtime-mark { display: grid; aspect-ratio: 1; place-items: center; border-radius: 10px; background: var(--ink); }
.runtime-mark img { width: 62%; filter: brightness(0) invert(1); }
.runtime-stack { display: grid; align-content: center; gap: .55rem; perspective: 600px; }
.runtime-layer {
  display: flex;
  min-height: 3.2rem;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 20%, var(--line));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 24px -22px var(--ink);
  transform: translateX(calc((var(--layer-index, 0)) * .35rem));
  animation: runtime-layer 5s ease-in-out infinite alternate;
}
.runtime-layer[data-runtime-layer="2"] { margin-left: .65rem; animation-delay: -.8s; }
.runtime-layer[data-runtime-layer="3"] { margin-left: 1.3rem; animation-delay: -1.6s; }
.runtime-layer[data-runtime-layer="4"] { margin-left: 1.95rem; animation-delay: -2.4s; }
.runtime-layer span { color: var(--hero-accent); font-family: var(--font-mono); font-size: .56rem; }
.runtime-layer b { font-size: .72rem; }

/* xOS — operating spine */
.hero-scene--spine { display: flex; flex-direction: column; padding: 1.4rem; }
.operating-spine {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  margin: 1rem 0;
}
.operating-spine::before {
  position: absolute;
  right: 7%;
  left: 7%;
  top: 50%;
  height: 2px;
  background: color-mix(in srgb, var(--hero-accent) 24%, var(--line));
  content: "";
}
.spine-scan {
  position: absolute;
  z-index: 1;
  top: calc(50% - 2px);
  left: 7%;
  width: 22%;
  height: 4px;
  border-radius: 999px;
  background: var(--hero-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--hero-accent) 55%, transparent);
  animation: spine-scan 5.5s ease-in-out infinite;
}
.spine-node {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .55rem;
  font-size: .7rem;
  text-align: center;
}
.spine-node::before {
  width: 3.4rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 31%, var(--line));
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 15px 30px -22px var(--hero-accent);
  content: "";
}
.spine-node i { position: absolute; top: 1.15rem; color: var(--hero-accent); font-family: var(--font-mono); font-size: .58rem; font-style: normal; }
.spine-node b { max-width: 7rem; }
.spine-node span { width: 5px; aspect-ratio: 1; border-radius: 50%; background: var(--hero-secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-secondary) 12%, transparent); }
.spine-caption { position: relative; z-index: 2; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-2); }
.spine-caption--start { align-self: flex-start; margin-top: auto; }
.spine-caption--end { align-self: flex-end; }

/* Academy — agent playground */
.hero-scene--academy { display: flex; flex-direction: column; }
.academy-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.academy-toolbar b { font-size: .74rem; }
.academy-canvas { position: relative; z-index: 2; flex: 1; }
.academy-block {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 7.7rem;
  min-height: 3.4rem;
  align-items: center;
  gap: .6rem;
  padding: .7rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 25%, var(--line));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 30px -24px var(--ink);
  animation: academy-block 5s ease-in-out infinite alternate;
}
.academy-block i { color: var(--hero-accent); font-family: var(--font-mono); font-size: .54rem; font-style: normal; }
.academy-block b { font-size: .68rem; }
.academy-block[data-academy-block="1"] { top: 15%; left: 7%; }
.academy-block[data-academy-block="2"] { top: 54%; left: 13%; animation-delay: -1s; }
.academy-block[data-academy-block="3"] { top: 17%; right: 7%; animation-delay: -2s; }
.academy-block[data-academy-block="4"] { right: 12%; bottom: 10%; animation-delay: -3s; }
.academy-wire { position: absolute; z-index: 1; height: 1px; background: color-mix(in srgb, var(--hero-accent) 28%, transparent); transform-origin: left; }
.academy-wire--one { top: 31%; left: 25%; width: 48%; transform: rotate(8deg); }
.academy-wire--two { top: 61%; left: 29%; width: 42%; transform: rotate(-16deg); }
.academy-wire--three { top: 48%; left: 47%; width: 28%; transform: rotate(62deg); }
.academy-result {
  position: absolute;
  z-index: 3;
  top: 39%;
  left: 50%;
  display: flex;
  width: 9.8rem;
  align-items: center;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--hero-accent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 45px -25px var(--hero-accent);
  transform: translate(-50%, -50%);
}
.academy-result .runtime-mark { width: 2.3rem; flex: none; }
.academy-result small { display: block; color: var(--ink-3); font-size: .54rem; }
.academy-result b { display: block; font-size: .66rem; }

/* Partners — partnership flywheel */
.hero-scene--partners { display: grid; place-items: center; }
.hero-scene--partners > .hero-scene-kicker { position: absolute; top: 1.4rem; left: 1.6rem; }
.partner-wheel { position: relative; width: min(72%, 20rem); aspect-ratio: 1; }
.partner-wheel-track {
  position: absolute;
  inset: 7%;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 28%, var(--line));
  border-radius: 50%;
  animation: hero-orbit 24s linear infinite;
}
.partner-wheel-track:nth-child(2) { inset: 24%; border-style: dashed; border-color: color-mix(in srgb, var(--hero-secondary) 28%, var(--line)); animation-direction: reverse; animation-duration: 18s; }
.partner-centre {
  position: absolute;
  inset: 34%;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 34%;
  background: var(--surface);
  box-shadow: 0 22px 60px -30px var(--hero-accent);
}
.partner-centre .scene-logo { width: 2.7rem; aspect-ratio: 1; border-radius: 12px; }
.partner-centre b { font-size: .58rem; text-align: center; }
.partner-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 6.4rem;
  min-height: 3.7rem;
  align-content: center;
  gap: .2rem;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 32px -25px var(--ink);
}
.partner-node i { color: var(--hero-accent); font-family: var(--font-mono); font-size: .52rem; font-style: normal; }
.partner-node b { font-size: .67rem; }
.partner-node[data-partner-node="1"] { top: -2%; left: 50%; transform: translateX(-50%); }
.partner-node[data-partner-node="2"] { top: 50%; right: -10%; transform: translateY(-50%); }
.partner-node[data-partner-node="3"] { bottom: -2%; left: 50%; transform: translateX(-50%); }
.partner-node[data-partner-node="4"] { top: 50%; left: -10%; transform: translateY(-50%); }
.partner-value { position: absolute; right: 1.5rem; bottom: 1.2rem; z-index: 3; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-2); }
.partner-value i { color: var(--hero-accent); font-style: normal; }

/* Company — Hong Kong-built intelligence */
.hero-scene--company { display: flex; flex-direction: column; padding: 1.4rem; }
.hk-lattice { position: relative; z-index: 2; display: flex; flex: 1; align-items: end; justify-content: center; gap: .45rem; margin-top: 1rem; padding: 0 1.2rem; }
.hk-column {
  display: grid;
  width: clamp(1.8rem, 5vw, 3.1rem);
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: .32rem;
  padding: .55rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 22%, var(--line));
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.hk-column[data-hk-column="1"] { height: 42%; }
.hk-column[data-hk-column="2"] { height: 65%; }
.hk-column[data-hk-column="3"] { height: 52%; }
.hk-column[data-hk-column="4"] { height: 88%; }
.hk-column[data-hk-column="5"] { height: 58%; }
.hk-column[data-hk-column="6"] { height: 74%; }
.hk-column[data-hk-column="7"] { height: 47%; }
.hk-column i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--hero-accent) 10%, var(--surface-3)); }
.hk-column:nth-child(2n) i:nth-child(3n),
.hk-column:nth-child(3n) i:nth-child(2n) { background: var(--hero-accent); opacity: .68; animation: city-light 3.4s ease-in-out infinite alternate; }
.hk-intelligence-line { position: absolute; z-index: 3; right: 4%; bottom: 32%; left: 4%; height: 2px; background: linear-gradient(90deg, transparent, var(--hero-secondary), var(--hero-accent), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--hero-accent) 35%, transparent); animation: city-scan 5s ease-in-out infinite; }
.hk-core { position: absolute; z-index: 4; bottom: 25%; left: 50%; transform: translateX(-50%); }
.hk-core .scene-logo { width: 3.3rem; aspect-ratio: 1; border-radius: 15px; }
.hk-caption { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .63rem; }
.hk-caption span { color: var(--ink-2); font-family: var(--font-mono); }

/* BuildOS — living building twin */
.hero-scene--building { display: flex; flex-direction: column; padding: 1.2rem; }
.building-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.building-head b { display: inline-flex; align-items: center; gap: .4rem; color: var(--hero-accent); font-family: var(--font-mono); font-size: .56rem; text-transform: uppercase; }
.building-head b i { width: 6px; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation: core-node 2s ease-in-out infinite; }
.building-twin { position: relative; z-index: 2; display: grid; flex: 1; grid-template-columns: .9fr 1.1fr; gap: 1.2rem; align-items: center; }
.building-stack { display: flex; flex-direction: column; gap: .38rem; padding-left: .7rem; perspective: 800px; }
.building-floor {
  display: grid;
  min-height: 2.5rem;
  grid-template-columns: 2.5rem repeat(4, 1fr);
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transform: rotateY(-9deg) translateX(calc(var(--floor-shift, 0) * 1px));
}
.building-floor:nth-child(2n) { margin-left: .65rem; }
.building-floor span { color: var(--ink-3); font-family: var(--font-mono); font-size: .52rem; }
.building-floor i { height: .65rem; border-radius: 3px; background: color-mix(in srgb, var(--hero-accent) 11%, var(--surface-3)); }
.building-floor:nth-child(2) i:nth-of-type(3),
.building-floor:nth-child(4) i:nth-of-type(2) { background: var(--hero-secondary); animation: building-signal 2.4s ease-in-out infinite; }
.building-status { display: grid; gap: .55rem; padding: .9rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.building-status > span { color: var(--hero-accent); font-family: var(--font-mono); font-size: .55rem; text-transform: uppercase; }
.building-status h3 { font-size: 1rem; }
.building-status > div { display: grid; grid-template-columns: .7rem 1fr auto; align-items: center; gap: .5rem; padding-top: .45rem; border-top: 1px solid var(--line); font-size: .62rem; }
.building-status > div > i { width: 6px; aspect-ratio: 1; border-radius: 50%; background: #168467; }
.building-status > div > i[data-state="2"] { background: #c47c22; }
.building-status small { color: var(--ink-3); font-family: var(--font-mono); }

/* Get started — choose your doorway */
.hero-scene--doorways { display: flex; flex-direction: column; padding: 1.2rem; }
.doorway-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.doorway-head > b { max-width: 12rem; font-size: .78rem; text-align: right; }
.doorway-grid { position: relative; z-index: 2; display: grid; flex: 1; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: 1rem; }
.doorway {
  position: relative;
  display: grid;
  align-content: end;
  padding: .85rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 20%, var(--line));
  border-radius: 16px;
  background: var(--surface);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
  animation: doorway-glow 6s ease-in-out infinite alternate;
}
.doorway:nth-child(2) { animation-delay: -1.5s; }
.doorway:nth-child(3) { animation-delay: -3s; }
.doorway:nth-child(4) { animation-delay: -4.5s; }
.doorway::before { position: absolute; width: 6rem; aspect-ratio: 1; top: -3rem; right: -2rem; border-radius: 50%; background: color-mix(in srgb, var(--hero-accent) 8%, transparent); content: ""; }
.doorway > span { position: absolute; top: .7rem; left: .8rem; color: var(--hero-accent); font-family: var(--font-mono); font-size: .52rem; }
.doorway b { position: relative; z-index: 1; font-size: .74rem; }
.doorway small { color: var(--ink-3); font-family: var(--font-mono); font-size: .5rem; }
.doorway-core { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, var(--hero-accent) 24%, var(--line)); border-radius: 14px; background: var(--story-ink); box-shadow: 0 14px 34px -15px var(--hero-accent); transform: translate(-50%, -50%); }
.doorway-core img { width: 58%; filter: brightness(0) invert(1); }

@keyframes hero-orbit { to { transform: rotate(360deg); } }
@keyframes core-node { 50% { opacity: .35; transform: scale(.72); } }
@keyframes living-core { to { transform: translateY(-8px) rotate(2deg); border-radius: 57% 43% 54% 46%; } }
@keyframes runtime-layer { to { transform: translateX(.4rem); } }
@keyframes spine-scan { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(290%); } }
@keyframes academy-block { to { transform: translateY(-5px); } }
@keyframes city-light { to { opacity: .28; } }
@keyframes city-scan { 0%, 15% { transform: translateY(2rem); opacity: 0; } 35%, 75% { opacity: 1; } 100% { transform: translateY(-8rem); opacity: 0; } }
@keyframes building-signal { 50% { opacity: .28; transform: scaleX(.72); } }
@keyframes doorway-glow { to { border-color: color-mix(in srgb, var(--hero-accent) 45%, var(--line)); transform: translateY(-3px); } }

.story-core {
  position: absolute;
  inset: 20% 15%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 46, 229, .2);
  border-radius: 42% 58% 47% 53%;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 40px 100px rgba(62, 38, 120, .15);
  backdrop-filter: blur(18px);
  transform: translate3d(0, calc(var(--story-scroll, 0) * -24px), 0) rotate(-4deg);
}

.story-core::before,
.story-core::after {
  content: "";
  position: absolute;
  inset: -15%;
  border: 1px solid rgba(91, 46, 229, .15);
  border-radius: inherit;
  animation: story-orbit 13s linear infinite;
}

.story-core::after {
  inset: -29%;
  border-color: rgba(236, 72, 153, .12);
  animation-duration: 18s;
  animation-direction: reverse;
}

.story-core-mark {
  display: grid;
  place-items: center;
  width: clamp(96px, 12vw, 142px);
  aspect-ratio: 1;
  border-radius: 30%;
  background: var(--story-ink);
  box-shadow: 0 20px 45px rgba(23, 21, 31, .2);
}

.story-core-mark img {
  width: 56%;
  height: auto;
  filter: brightness(0) invert(1);
}

.story-core-label {
  position: absolute;
  bottom: 16%;
  font-family: var(--mono, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.story-chip {
  position: absolute;
  z-index: 2;
  width: clamp(8rem, 10vw, 10.75rem);
  max-width: calc(50% - .5rem);
  padding: .75rem .85rem;
  border: 1px solid rgba(23, 21, 31, .11);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 40px rgba(23, 21, 31, .1);
  font-size: .76rem;
  line-height: 1.35;
  transform: translate3d(0, calc(var(--story-scroll, 0) * var(--drift, 24px)), 0) rotate(var(--tilt, 0deg));
}

.story-chip b { display: block; margin-bottom: .25rem; color: var(--story-ink); }
.story-chip span { color: var(--muted); }
.story-chip[data-story-chip="north-west"] { --drift: -14px; --tilt: -3deg; top: 1.25rem; left: 0; }
.story-chip[data-story-chip="north-east"] { --drift: -14px; --tilt: 3deg; top: 1.25rem; right: 0; }
.story-chip[data-story-chip="south-west"] { --drift: 14px; --tilt: 2deg; bottom: 1.25rem; left: 0; }
.story-chip[data-story-chip="south-east"] { --drift: 14px; --tilt: -2deg; right: 0; bottom: 1.25rem; }

@keyframes story-orbit {
  to { transform: rotate(360deg); }
}

.story-strip {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.story-strip-track {
  display: flex;
  width: max-content;
  padding: 1rem 0;
  animation: story-marquee 28s linear infinite;
}

.story-strip-set {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  white-space: nowrap;
  font-family: var(--mono, monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.story-strip-set b { color: var(--story-purple); }

@keyframes story-marquee {
  to { transform: translateX(-50%); }
}

.story-section {
  position: relative;
  padding: clamp(5rem, 10vw, 10rem) 0;
}

.story-section.is-tint { background: color-mix(in srgb, var(--hero-accent) 3.5%, var(--bg)); }
.story-section.is-dark { background: var(--story-ink); color: #f7f6fb; }
.story-section.is-dark h2,
.story-section.is-dark h3 { color: #fff; }
.story-section.is-dark .lead,
.story-section.is-dark .story-card p { color: rgba(255, 255, 255, .68); }

.story-head {
  max-width: 54rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.story-head h2 {
  max-width: 14ch;
  margin: 1rem 0 1.25rem;
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.story-head .lead { max-width: 43rem; }

.story-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.story-step {
  position: relative;
  min-height: 23rem;
  padding: 2rem clamp(1rem, 2.5vw, 2.3rem) 2.5rem 0;
  border-right: 1px solid var(--line);
}

.story-step + .story-step { padding-left: clamp(1rem, 2.5vw, 2.3rem); }
.story-step:last-child { border-right: 0; }

.story-step-num {
  display: block;
  margin-bottom: clamp(5rem, 9vw, 9rem);
  font-family: var(--mono, monospace);
  color: var(--story-purple);
}

.story-step h3 {
  max-width: 14ch;
  margin-bottom: .85rem;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.story-step p { max-width: 29rem; color: var(--muted); }

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.story-card {
  grid-column: span 4;
  position: relative;
  min-height: 25rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  overflow: hidden;
  border: 1px solid rgba(23, 21, 31, .1);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 25px 70px rgba(54, 35, 94, .07);
}

.story-card.is-wide { grid-column: span 8; }
.story-card.is-small { grid-column: span 4; }

.story-card::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -35%;
  width: 14rem;
  aspect-ratio: 1;
  border-radius: 38% 62% 42% 58%;
  background: rgba(91, 46, 229, .08);
  transform: rotate(calc(var(--story-scroll, 0) * 60deg));
}

.story-card-kicker {
  display: block;
  margin-bottom: clamp(6rem, 10vw, 10rem);
  font-family: var(--mono, monospace);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--story-purple);
}

.story-card h3 {
  position: relative;
  z-index: 1;
  max-width: 15ch;
  margin-bottom: .8rem;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.story-card p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  color: var(--muted);
}

.story-card .txtlink {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 1.4rem;
}

.story-manifesto {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.story-manifesto blockquote {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.5rem, 5.5vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.story-manifesto-copy {
  display: grid;
  gap: 1.4rem;
  max-width: 42rem;
  padding-top: .7rem;
}

.story-manifesto-copy p {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.7;
}

.story-cta {
  padding: clamp(4rem, 8vw, 8rem) 0;
}

.story-cta-card {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 6rem);
  border-radius: 34px;
  background: var(--story-ink);
  color: #fff;
}

.story-cta-card::after {
  content: "";
  position: absolute;
  width: 28rem;
  aspect-ratio: 1;
  right: -8rem;
  top: -13rem;
  border-radius: 40% 60%;
  background: var(--story-purple);
  opacity: .65;
  transform: rotate(calc(var(--story-scroll, 0) * 50deg));
}

.story-cta-card > * { position: relative; z-index: 1; }
.story-cta-card h2 {
  max-width: 13ch;
  margin: 1rem 0;
  color: #fff;
  font-size: clamp(2.7rem, 6vw, 6rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.story-cta-card p { max-width: 40rem; color: rgba(255, 255, 255, .72); }

.story-ready [data-immersive] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}

.story-ready [data-immersive].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page-specific narrative systems */
.page-narrative {
  position: relative;
  overflow: clip;
}

.page-narrative article {
  position: relative;
}

.page-narrative article h3 {
  letter-spacing: -.035em;
}

.page-narrative article p {
  color: var(--muted);
}

.page-narrative .is-dark article p,
.page-narrative section.is-dark article p {
  color: rgba(255, 255, 255, .68);
}

/* Home — a diagonal river feeding a product constellation. */
.home-river {
  background:
    linear-gradient(118deg, transparent 0 47%, color-mix(in srgb, var(--hero-accent) 4%, transparent) 47% 65%, transparent 65%);
}

.knowledge-river {
  position: relative;
  min-height: 54rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.knowledge-river-line {
  position: absolute;
  top: 8%;
  bottom: 5%;
  left: 50%;
  width: 18rem;
  border-radius: 50%;
  border-left: 2px solid color-mix(in srgb, var(--hero-accent) 50%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--hero-secondary) 25%, transparent);
  transform: translateX(-50%) rotate(21deg);
}

.knowledge-river-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, var(--hero-accent), transparent);
  filter: blur(22px);
  opacity: .16;
}

.river-moment {
  z-index: 1;
  grid-column: span 5;
  max-width: 32rem;
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: 0 32px 80px -60px var(--story-ink);
}

.river-moment:nth-of-type(1) { grid-column: 1 / span 5; transform: rotate(-2deg); }
.river-moment:nth-of-type(2) { grid-column: 8 / span 5; margin-top: 12rem; transform: rotate(2deg); }
.river-moment:nth-of-type(3) { grid-column: 2 / span 5; margin-top: 11rem; transform: rotate(-1deg); }
.river-moment .story-step-num { margin: 0 0 4rem; }
.river-moment h3 { max-width: 13ch; margin-bottom: .8rem; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }

.river-core {
  position: absolute;
  z-index: 2;
  top: 44%;
  left: 50%;
  width: 7.5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--story-ink);
  color: #fff;
  box-shadow: 0 0 0 1.3rem color-mix(in srgb, var(--hero-accent) 11%, transparent), 0 0 0 2.6rem color-mix(in srgb, var(--hero-accent) 5%, transparent);
  transform: translate(-50%, -50%);
}

.river-core img { width: 2.7rem; filter: brightness(0) invert(1); }
.river-core span { position: absolute; top: calc(100% + .85rem); font-family: var(--mono, monospace); font-size: .6rem; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; color: var(--story-ink); }

.home-constellation { min-height: 88rem; }
.home-constellation .story-head { position: relative; z-index: 2; }

.product-constellation {
  position: relative;
  min-height: 58rem;
}

.constellation-orbit {
  position: absolute;
  inset: 8% 12%;
  border: 1px dashed color-mix(in srgb, var(--hero-accent) 32%, transparent);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.constellation-orbit::before,
.constellation-orbit::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid color-mix(in srgb, var(--hero-secondary) 17%, transparent);
  border-radius: 50%;
}

.constellation-orbit::after { inset: 34%; }

.constellation-centre {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 10rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--story-ink);
  color: #fff;
  transform: translate(-50%, -50%);
}

.constellation-centre img { width: 3rem; filter: brightness(0) invert(1); }
.constellation-centre span { position: absolute; top: calc(100% + .8rem); color: var(--story-ink); font-family: var(--mono, monospace); font-size: .65rem; text-transform: uppercase; white-space: nowrap; }

.constellation-card {
  position: absolute !important;
  z-index: 2;
  width: min(31rem, 42%);
  min-height: 20rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: var(--surface);
  box-shadow: 0 30px 80px -60px var(--story-ink);
}

.constellation-card[data-card="1"] { top: 0; left: 2%; transform: rotate(-2deg); }
.constellation-card[data-card="2"] { top: 10%; right: 0; transform: rotate(2deg); }
.constellation-card[data-card="3"] { right: 4%; bottom: 0; transform: rotate(-1.5deg); }
.constellation-card[data-card="4"] { bottom: 2%; left: 0; transform: rotate(1.5deg); }
.constellation-card .story-card-kicker { margin-bottom: 4.5rem; }
.constellation-card h3 { margin-bottom: .75rem; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.constellation-card .txtlink { display: inline-flex; margin-top: 1.25rem; }
.home-compounding { background: linear-gradient(145deg, var(--story-ink), #291f3b); }

/* AskJary+ — sticky product cutaway and an explicit responsibility ledger. */
.runtime-anatomy {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 3%, transparent), transparent 45%);
}

.runtime-anatomy-layout {
  display: grid;
  grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: start;
}

.runtime-cutaway {
  position: sticky;
  top: 9rem;
  min-height: 38rem;
  padding: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 22%, var(--line));
  border-radius: 2.2rem;
  background: var(--story-ink);
  color: #fff;
  box-shadow: 0 38px 90px -60px var(--story-ink);
}

.runtime-cutaway-label {
  display: block;
  padding: .8rem .9rem 1.4rem;
  font-family: var(--mono, monospace);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.runtime-cutaway-layer {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  min-height: 7.4rem;
  margin-bottom: .55rem;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--hero-accent) calc(8% + var(--layer, 0) * 2%), rgba(255,255,255,.04));
}

.runtime-cutaway-layer:nth-child(2) { margin-inline: 0 14%; }
.runtime-cutaway-layer:nth-child(3) { margin-inline: 5% 9%; }
.runtime-cutaway-layer:nth-child(4) { margin-inline: 10% 4%; }
.runtime-cutaway-layer:nth-child(5) { margin-inline: 15% 0; }
.runtime-cutaway-layer i { font-family: var(--mono, monospace); color: var(--hero-secondary); }
.runtime-cutaway-layer b,
.runtime-cutaway-layer span { display: block; }
.runtime-cutaway-layer span { margin-top: .3rem; font-size: .85rem; color: rgba(255,255,255,.58); }

.runtime-anatomy-rail {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 5vw, 4rem);
}

.anatomy-state {
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.anatomy-state:last-child { border-bottom: 0; }
.anatomy-state .story-step-num { margin: 0 0 5rem; }
.anatomy-state h3 { max-width: 13ch; margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .98; }
.anatomy-state p { max-width: 34rem; font-size: 1.05rem; }

.boundary-ledger {
  border-top: 1px solid var(--story-ink);
}

.ledger-row {
  display: grid;
  grid-template-columns: 10rem minmax(15rem, .75fr) minmax(18rem, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
}

.ledger-row .story-card-kicker { margin: 0; }
.ledger-row h3 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2.4rem); line-height: 1; }
.ledger-row .txtlink { white-space: nowrap; }
.runtime-native { background: linear-gradient(125deg, #151826, #172541); }

/* xOS — dark operating rail into a modular flagship console. */
.xos-operating-rail {
  min-height: 94svh;
  background: linear-gradient(135deg, #101718, #172b2c 55%, #17151f);
}

.xos-operating-rail .story-head h2 { max-width: 11ch; }

.operating-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2rem;
  background: rgba(255,255,255,.12);
}

.operating-rail::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 4.8rem;
  right: 7%;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, var(--hero-accent), var(--hero-secondary));
}

.operating-stop {
  min-height: 31rem;
  padding: 2rem;
  background: #152021;
}

.operating-stop .story-step-num {
  position: relative;
  z-index: 3;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  margin: 1.35rem 0 11rem;
  border: 1px solid var(--hero-accent);
  border-radius: 50%;
  background: #152021;
  color: #fff;
}

.operating-stop h3 { max-width: 12ch; margin-bottom: 1rem; color: #fff; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.operating-rail-signal {
  position: absolute;
  z-index: 4;
  top: calc(4.8rem - 4px);
  left: 7%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1.4rem var(--hero-accent);
  animation: narrative-scan-x 7s ease-in-out infinite;
}

.flagship-console {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 2.2rem;
  background: var(--story-ink);
  box-shadow: 0 45px 100px -75px var(--story-ink);
}

.console-status {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding: .8rem 1rem 1.2rem;
  color: rgba(255,255,255,.62);
  font-family: var(--mono, monospace);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.console-status i,
.operations-console-bar i {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: #53d98b;
  box-shadow: 0 0 0 .25rem rgba(83,217,139,.12);
}

.console-module {
  grid-column: span 4;
  min-height: 20rem;
  padding: 1.7rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 1.45rem;
  background: rgba(255,255,255,.055);
  color: #fff;
}

.console-module[data-card="1"],
.console-module[data-card="3"] { grid-column: span 8; }
.console-module .story-card-kicker { margin-bottom: 5rem; color: #70d2c8; }
.console-module h3 { margin-bottom: .75rem; color: #fff; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1; }
.console-module p { color: rgba(255,255,255,.6); }
.console-module .txtlink { display: inline-flex; margin-top: 1.2rem; color: #fff; }
.xos-outcome { background: #0f2929; }

/* Academy — a workshop path, manifesto break and physical programme shelf. */
.academy-workshop {
  background:
    linear-gradient(color-mix(in srgb, var(--hero-accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 5%, transparent) 1px, transparent 1px);
  background-size: 3rem 3rem;
}

.workshop-canvas {
  position: relative;
  min-height: 54rem;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 22%, var(--line));
  border-radius: 2.5rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.workshop-grid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 22%, transparent) 1.5px, transparent 1.5px);
  background-size: 2rem 2rem;
  opacity: .45;
}

.workshop-stage {
  position: absolute !important;
  z-index: 2;
  width: min(29rem, 42%);
  min-height: 17rem;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 1.8rem;
  background: var(--surface);
  box-shadow: .8rem .8rem 0 color-mix(in srgb, var(--hero-accent) 10%, transparent);
}

.workshop-stage[data-step="1"] { top: 8%; left: 4%; transform: rotate(-2deg); }
.workshop-stage[data-step="2"] { top: 27%; right: 5%; transform: rotate(1.5deg); }
.workshop-stage[data-step="3"] { bottom: 6%; left: 6%; transform: rotate(-1deg); }
.workshop-stage .story-step-num { margin: 0 0 3.5rem; }
.workshop-stage h3 { margin-bottom: .8rem; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1; }

.workshop-output {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: 9%;
  width: 9rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--story-ink);
  color: #fff;
  box-shadow: 0 0 0 1rem color-mix(in srgb, var(--hero-accent) 13%, transparent);
}

.workshop-output img { width: 2.8rem; filter: brightness(0) invert(1); }
.workshop-output span { position: absolute; top: calc(100% + .8rem); color: var(--story-ink); font-family: var(--mono, monospace); font-size: .62rem; text-transform: uppercase; white-space: nowrap; }
.academy-judgement { background: linear-gradient(135deg, #261a15, #4a2617); }

.programme-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: clamp(.7rem, 2vw, 1.4rem);
  padding: 0 1rem 1.4rem;
  border-bottom: 1.1rem solid #3b261c;
  box-shadow: 0 1.25rem 0 color-mix(in srgb, #3b261c 12%, transparent);
}

.programme-book {
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 28%, var(--line));
  border-radius: 1.3rem 1.3rem .3rem .3rem;
  background: var(--surface);
  transform-origin: bottom;
}

.programme-book:nth-child(2) { min-height: 36rem; transform: rotate(-1deg); background: color-mix(in srgb, var(--hero-accent) 6%, var(--surface)); }
.programme-book:nth-child(3) { min-height: 33rem; transform: rotate(1deg); }
.programme-book:nth-child(4) { min-height: 27rem; }
.programme-book .story-card-kicker { margin-bottom: auto; }
.programme-book h3 { margin-bottom: .8rem; font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1; }
.programme-book .txtlink { display: inline-flex; margin-top: 1.2rem; }

/* Partners — a flywheel, parallel partner tracks and two-sided support. */
.practice-flywheel {
  position: relative;
  min-height: 53rem;
  max-width: 72rem;
  margin-inline: auto;
  border: 1px dashed color-mix(in srgb, var(--hero-accent) 35%, transparent);
  border-radius: 50%;
}

.practice-flywheel::before,
.practice-flywheel::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid color-mix(in srgb, var(--hero-secondary) 20%, transparent);
  border-radius: 50%;
}

.practice-flywheel::after { inset: 28%; }

.practice-centre {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 11rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--story-ink);
  transform: translate(-50%, -50%);
}

.practice-centre img { width: 3.2rem; filter: brightness(0) invert(1); }
.practice-centre span { position: absolute; top: calc(100% + .75rem); color: var(--story-ink); font-family: var(--mono, monospace); font-size: .65rem; text-transform: uppercase; white-space: nowrap; }

.flywheel-phase {
  position: absolute !important;
  z-index: 2;
  width: 22rem;
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--surface);
  box-shadow: 0 28px 60px -50px var(--story-ink);
}

.flywheel-phase[data-step="1"] { top: 2%; left: 50%; transform: translateX(-50%); }
.flywheel-phase[data-step="2"] { top: 50%; right: -3%; transform: translateY(-50%); }
.flywheel-phase[data-step="3"] { bottom: 1%; left: 12%; }
.flywheel-phase .story-step-num { margin: 0 0 2.5rem; }
.flywheel-phase h3 { margin-bottom: .75rem; font-size: clamp(1.55rem, 2.8vw, 2.5rem); line-height: 1; }

.partner-tracks {
  display: grid;
  gap: .8rem;
}

.partner-track {
  display: grid;
  grid-template-columns: 7rem minmax(13rem, .7fr) minmax(18rem, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 12rem;
  padding: 1.7rem 2rem;
  border: 1px solid var(--line);
  border-radius: 6rem;
  background: var(--surface);
}

.partner-track:nth-child(even) { margin-left: 7%; background: color-mix(in srgb, var(--hero-accent) 6%, var(--surface)); }
.partner-track:nth-child(odd) { margin-right: 7%; }
.partner-track .story-card-kicker { margin: 0; }
.partner-track h3 { margin: 0; font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1; }
.partner-track .txtlink { white-space: nowrap; }

.partner-support {
  background: linear-gradient(135deg, #1c1726, #2f1c40);
}

.partner-support blockquote {
  max-width: 18ch;
  margin: 0 0 clamp(3rem, 8vw, 8rem);
  font-size: clamp(2.5rem, 6vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.support-duet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255,255,255,.16);
}

.support-duet article {
  min-height: 22rem;
  padding: 2rem 3rem 1rem 0;
}

.support-duet article + article { padding-left: 3rem; border-left: 1px solid rgba(255,255,255,.16); }
.support-duet span { font-family: var(--mono, monospace); color: #d2b8ff; }
.support-duet h3 { margin: 7rem 0 1rem; color: #fff; font-size: clamp(2rem, 4vw, 3.8rem); }

/* Company — editorial declaration, principles cascade and proof mosaic. */
.company-declaration {
  padding-block: clamp(7rem, 14vw, 14rem);
  background: linear-gradient(145deg, #21171b, #3d1e2a);
}

.company-declaration blockquote { max-width: 13ch; }

.company-principles .story-head {
  position: sticky;
  top: 8rem;
  float: left;
  width: 38%;
  padding-right: 4rem;
}

.principles-cascade {
  width: 56%;
  margin-left: auto;
}

.principle-line {
  min-height: 30rem;
  padding: 2rem 0;
  border-top: 1px solid var(--story-ink);
}

.principle-line .story-step-num { margin: 0 0 8rem; }
.principle-line h3 { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .92; }
.principle-line p { max-width: 35rem; font-size: 1.06rem; }
.company-principles .wrap::after { display: block; clear: both; content: ""; }

.proof-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 12rem;
  gap: 1rem;
}

.proof-tile {
  grid-column: span 5;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: var(--surface);
}

.proof-tile[data-card="2"] { grid-column: span 7; grid-row: span 3; background: var(--story-ink); color: #fff; }
.proof-tile[data-card="3"] { grid-column: span 7; grid-row: span 2; }
.proof-tile[data-card="4"] { grid-column: span 5; grid-row: span 3; background: color-mix(in srgb, var(--hero-accent) 9%, var(--surface)); }
.proof-tile .story-card-kicker { margin-bottom: auto; }
.proof-tile h3 { margin-bottom: .75rem; font-size: clamp(1.8rem, 3.5vw, 3.5rem); line-height: .95; }
.proof-tile .txtlink { display: inline-flex; margin-top: 1rem; }
.proof-tile[data-card="2"] p { color: rgba(255,255,255,.65); }
.proof-tile[data-card="2"] .txtlink { color: #fff; }

.contact-radar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 30rem;
  padding-inline: clamp(2.5rem, 5vw, 5rem);
  border: 1px solid var(--line);
  border-radius: 50%;
  overflow: hidden;
}

.contact-radar::before,
.contact-radar::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.contact-radar::after { inset: 33%; }
.contact-radar-line { position: absolute; top: 50%; right: 0; left: 0; border-top: 1px solid var(--line); }

.contact-person {
  z-index: 2;
  align-self: center;
  min-height: 15rem;
  padding: 2rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
}

.contact-person + .contact-person { border-left: 1px solid var(--line); }
.contact-person .story-card-kicker { margin-bottom: 5rem; }
.contact-person h3 { margin-bottom: .8rem; font-size: clamp(1.6rem, 3vw, 2.6rem); }

/* BuildOS — incident chronology, live console and evidence handover. */
.incident-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 5rem;
}

.incident-timeline::before {
  content: "";
  position: absolute;
  top: 6.3rem;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--hero-accent), var(--hero-secondary));
}

.incident-moment {
  min-height: 30rem;
  padding: 0 2rem 2rem;
}

.incident-moment + .incident-moment { border-left: 1px solid var(--line); }
.incident-moment .story-step-num {
  position: relative;
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  margin: 0 0 10rem;
  border: 1px solid var(--hero-accent);
  border-radius: 50%;
  background: var(--story-paper);
}
.incident-moment h3 { margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.incident-pulse {
  position: absolute;
  z-index: 3;
  top: calc(6.3rem - 5px);
  left: 8%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hero-secondary);
  box-shadow: 0 0 1.5rem var(--hero-secondary);
  animation: narrative-scan-x 7s ease-in-out infinite;
}

.buildos-operations { background: linear-gradient(135deg, #10191a, #142a2c); }
.buildos-operations .story-head h2 { max-width: 13ch; }

.operations-console {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .8rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2rem;
  background: #0e1516;
}

.operations-console-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding: .8rem 1rem 1.2rem;
  color: rgba(255,255,255,.65);
  font-family: var(--mono, monospace);
  font-size: .68rem;
  text-transform: uppercase;
}

.operations-module {
  grid-column: span 4;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.3rem;
  background: rgba(255,255,255,.045);
  color: #fff;
}

.operations-module[data-card="1"] { grid-column: span 8; }
.operations-module[data-card="4"] { grid-column: span 8; }
.operations-module .story-card-kicker { margin-bottom: auto; color: #73d4d8; }
.operations-module h3 { margin-bottom: .7rem; color: #fff; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1; }
.operations-module p { color: rgba(255,255,255,.62); }
.operations-module .txtlink { display: inline-flex; margin-top: 1rem; color: #fff; }

.buildos-evidence {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hero-accent) 9%, var(--surface)), var(--story-paper));
}

.evidence-chain {
  display: grid;
  gap: .5rem;
  margin-top: 3rem;
}

.evidence-chain span {
  display: grid;
  grid-template-columns: 3rem 1fr;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono, monospace);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.evidence-chain i { color: var(--hero-accent); }

/* Get started — decisions first, method second. */
.start-doorways .story-head {
  margin-inline: auto;
  text-align: center;
}

.start-doorways .story-head h2,
.start-doorways .story-head .lead { margin-inline: auto; }

.start-doorway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.start-doorway {
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  padding: 2.2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2.2rem;
  background: var(--surface);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
}

.start-doorway:nth-child(2),
.start-doorway:nth-child(3) { background: color-mix(in srgb, var(--hero-accent) 6%, var(--surface)); }
.start-doorway:hover,
.start-doorway:focus-within { z-index: 2; border-color: var(--hero-accent); box-shadow: 0 30px 70px -55px var(--story-ink); transform: translateY(-8px); }
.start-doorway .story-card-kicker { margin-bottom: auto; }
.start-doorway h3 { margin-bottom: .8rem; font-size: clamp(2rem, 4vw, 4rem); line-height: .94; }
.start-doorway .txtlink { display: inline-flex; margin-top: 1.2rem; }

.decision-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  padding-top: 5rem;
}

.decision-map-path {
  position: absolute;
  top: 6.15rem;
  right: 8%;
  left: 8%;
  border-top: 1px dashed var(--hero-accent);
}

.decision-route {
  z-index: 1;
  min-height: 27rem;
  padding: 0 1rem;
}

.decision-route .story-step-num {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin: 0 0 9rem;
  border: 1px solid var(--hero-accent);
  border-radius: 50%;
  background: var(--surface);
}

.decision-route h3 { margin-bottom: .8rem; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1; }
.start-small { background: linear-gradient(135deg, #241c31, #322049); }

@keyframes narrative-scan-x {
  0%, 10% { left: 7%; }
  90%, 100% { left: calc(93% - 10px); }
}

.legal-page .story-hero {
  height: var(--story-hero-height);
  min-height: var(--story-hero-height);
}
.legal-page .story-hero-grid { grid-template-columns: 1fr; }
.legal-page .story-hero h1 { max-width: 13ch; }
.legal-wrap { width: min(840px, calc(100% - 40px)); margin: 0 auto; padding: 1rem 0 8rem; }
.legal-updated { font-family: var(--mono, monospace); color: var(--muted); font-size: .78rem; }
.legal-protection {
  margin: 2rem 0 4rem;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 2px solid var(--story-purple);
  border-radius: 24px;
  background: color-mix(in srgb, var(--story-purple) 5.5%, var(--surface));
}
.legal-protection h2 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.legal-section { padding: 2rem 0; border-top: 1px solid var(--line); }
.legal-section h2 { margin-bottom: 1rem; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.legal-section p + p, .legal-section ul { margin-top: .8rem; }
.legal-section li + li { margin-top: .5rem; }

@media (max-width: 1120px) {
  .story-hero > .wrap { padding-inline: clamp(1.25rem, 3.5vw, 2.25rem); }
  .story-hero-grid {
    grid-template-columns: minmax(0, .98fr) minmax(310px, 1.02fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  .story-hero h1 { font-size: clamp(2.75rem, min(6vw, 8.5svh), 4.75rem); }
  .story-art { height: min(100%, 560px); max-width: none; margin: 0; }
  .hero-scene { inset: 23% 18%; }
  .story-chip {
    width: clamp(7.25rem, 14vw, 9.25rem);
    padding: .65rem .72rem;
    font-size: .7rem;
  }
  .story-cue { display: none; }
  .story-steps { grid-template-columns: 1fr; }
  .story-step, .story-step + .story-step {
    min-height: auto;
    padding: 2rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .story-step-num { margin-bottom: 3.5rem; }
  .story-card, .story-card.is-wide, .story-card.is-small { grid-column: span 6; }
  .story-manifesto { grid-template-columns: 1fr; }

  .knowledge-river { min-height: 46rem; }
  .river-moment { grid-column: span 6; }
  .river-moment:nth-of-type(1) { grid-column: 1 / span 6; }
  .river-moment:nth-of-type(2) { grid-column: 7 / span 6; }
  .river-moment:nth-of-type(3) { grid-column: 1 / span 6; }
  .home-constellation { min-height: auto; }
  .product-constellation { min-height: 53rem; }

  .runtime-anatomy-layout { gap: 3rem; }
  .ledger-row,
  .partner-track { grid-template-columns: 7rem minmax(12rem, .75fr) minmax(15rem, 1fr); }
  .ledger-row .txtlink,
  .partner-track .txtlink { grid-column: 2 / -1; }

  .practice-flywheel { min-height: 48rem; }
  .flywheel-phase { width: 19rem; }

  .company-principles .story-head {
    position: static;
    float: none;
    width: auto;
    padding-right: 0;
  }
  .principles-cascade { width: 100%; margin-left: 0; }
  .principle-line { min-height: 24rem; }
  .principle-line .story-step-num { margin-bottom: 6rem; }
}

@media (max-width: 760px) {
  .story-hero {
    padding: clamp(.75rem, 2.2svh, 1.25rem) 0;
  }
  .story-hero > .wrap { padding-inline: clamp(1rem, 5vw, 1.5rem); }
  .story-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(.5rem, 1.5svh, .9rem);
    align-items: stretch;
  }
  .story-hero-copy { align-self: start; }
  .story-hero h1 {
    max-width: 13ch;
    margin: .55rem 0 .65rem;
    font-size: clamp(2.15rem, 9.8vw, 3.3rem);
    line-height: .92;
  }
  .story-hero .lead {
    max-width: 46rem;
    font-size: clamp(.84rem, 3.6vw, 1rem);
    line-height: 1.4;
  }
  .story-hero-actions { gap: .5rem; margin-top: .8rem; }
  .story-hero-actions .btn-lg {
    --pad-y: 10px;
    --pad-x: 14px;
    min-height: 44px;
    font-size: .84rem;
  }
  .story-art {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .45rem;
  }
  .hero-scene {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    border-radius: 22px;
    transform: none;
  }
  .story-chip {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: .48rem .55rem;
    border-radius: 12px;
    font-size: .66rem;
    transform: none;
  }
  .story-chip b { margin-bottom: .12rem; }
  .story-chip[data-story-chip="north-west"] { grid-column: 1; grid-row: 1; }
  .story-chip[data-story-chip="north-east"] { grid-column: 2; grid-row: 1; }
  .story-chip[data-story-chip="south-west"] { grid-column: 1; grid-row: 3; }
  .story-chip[data-story-chip="south-east"] { grid-column: 2; grid-row: 3; }

  .knowledge-river {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-left: 2rem;
  }
  .knowledge-river-line {
    top: 0;
    bottom: 0;
    left: .6rem;
    width: 1px;
    border: 0;
    background: linear-gradient(var(--hero-accent), var(--hero-secondary));
    transform: none;
  }
  .river-moment,
  .river-moment:nth-of-type(1),
  .river-moment:nth-of-type(2),
  .river-moment:nth-of-type(3) {
    grid-column: 1;
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
  }
  .river-moment .story-step-num { margin-bottom: 2.5rem; }
  .river-core {
    top: 50%;
    left: .6rem;
    width: 3rem;
  }
  .river-core img { width: 1.25rem; }
  .river-core span { display: none; }

  .product-constellation {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .constellation-orbit,
  .constellation-centre { display: none; }
  .constellation-card,
  .constellation-card[data-card] {
    position: relative !important;
    inset: auto;
    width: auto;
    min-height: 20rem;
    transform: none;
  }

  .runtime-anatomy-layout { grid-template-columns: 1fr; }
  .runtime-cutaway {
    position: relative;
    top: auto;
    min-height: auto;
  }
  .runtime-anatomy-rail { padding-left: 1.5rem; }
  .anatomy-state { min-height: 22rem; }
  .anatomy-state .story-step-num { margin-bottom: 3.5rem; }
  .ledger-row,
  .partner-track {
    grid-template-columns: 1fr;
    gap: .8rem;
    border-radius: 1.8rem;
  }
  .ledger-row .txtlink,
  .partner-track .txtlink { grid-column: auto; }

  .operating-rail,
  .incident-timeline,
  .decision-map { grid-template-columns: 1fr; }
  .operating-rail::before {
    top: 5%;
    bottom: 5%;
    left: 3.35rem;
    width: 2px;
    height: auto;
  }
  .operating-stop { min-height: auto; padding: 2rem 2rem 3rem 6rem; }
  .operating-stop .story-step-num {
    position: absolute;
    top: 1.6rem;
    left: -4.05rem;
    margin: 0;
  }
  .operating-rail-signal { display: none; }

  .flagship-console,
  .operations-console { grid-template-columns: 1fr; }
  .console-status,
  .operations-console-bar,
  .console-module,
  .console-module[data-card],
  .operations-module,
  .operations-module[data-card] { grid-column: 1; }
  .console-module,
  .operations-module { min-height: 18rem; }

  .workshop-canvas {
    min-height: auto;
    display: grid;
    gap: 1rem;
  }
  .workshop-stage,
  .workshop-stage[data-step] {
    position: relative !important;
    inset: auto;
    width: auto;
    transform: none;
  }
  .workshop-output { display: none; }

  .programme-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .programme-book,
  .programme-book:nth-child(n) { min-height: 25rem; transform: none; }

  .practice-flywheel {
    min-height: auto;
    display: grid;
    gap: 1rem;
    border: 0;
    border-radius: 0;
  }
  .practice-flywheel::before,
  .practice-flywheel::after,
  .practice-centre { display: none; }
  .flywheel-phase,
  .flywheel-phase[data-step] {
    position: relative !important;
    inset: auto;
    width: auto;
    transform: none;
  }
  .partner-track:nth-child(n) { margin: 0; }
  .support-duet { grid-template-columns: 1fr; }
  .support-duet article { min-height: auto; padding: 2rem 0 3rem; }
  .support-duet article + article { padding-left: 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
  .support-duet h3 { margin-top: 4rem; }

  .principle-line { min-height: 21rem; }
  .principle-line .story-step-num { margin-bottom: 4rem; }
  .proof-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .proof-tile,
  .proof-tile[data-card] { grid-column: 1; grid-row: auto; min-height: 24rem; }
  .contact-radar {
    grid-template-columns: 1fr;
    padding-inline: 0;
    border-radius: 2rem;
  }
  .contact-radar::before,
  .contact-radar::after,
  .contact-radar-line { display: none; }
  .contact-person + .contact-person { border-top: 1px solid var(--line); border-left: 0; }

  .incident-timeline { gap: 0; padding-top: 0; padding-left: 2rem; }
  .incident-timeline::before {
    top: 0;
    bottom: 0;
    left: .65rem;
    width: 2px;
    height: auto;
  }
  .incident-moment { min-height: auto; padding: 2rem 0 3rem 2rem; }
  .incident-moment + .incident-moment { border-top: 1px solid var(--line); border-left: 0; }
  .incident-moment .story-step-num {
    position: absolute;
    top: 1.7rem;
    left: -3.45rem;
    margin: 0;
    background: var(--story-paper);
  }
  .incident-pulse { display: none; }

  .start-doorway-grid { grid-template-columns: 1fr; }
  .start-doorway { min-height: 23rem; }
  .decision-map {
    gap: 0;
    padding-top: 0;
    padding-left: 2rem;
  }
  .decision-map-path {
    top: 0;
    bottom: 0;
    left: .65rem;
    width: 1px;
    border-top: 0;
    border-left: 1px dashed var(--hero-accent);
  }
  .decision-route { min-height: auto; padding: 2rem 0 3rem 2rem; }
  .decision-route .story-step-num {
    position: absolute;
    top: 1.7rem;
    left: -3.25rem;
    margin: 0;
  }
}

@media (max-width: 620px) {
  .story-core { inset: 22% 17%; }
  .story-grid { display: grid; grid-template-columns: 1fr; }
  .story-card, .story-card.is-wide, .story-card.is-small { grid-column: auto; min-height: 22rem; }
  .story-card-kicker { margin-bottom: 6rem; }
  .story-strip-set { gap: 1.6rem; padding-right: 1.6rem; }
  .hero-scene { inset: auto; border-radius: 22px; }
  .runtime-workspace { grid-template-columns: 1fr 1fr; padding: .8rem; gap: .65rem; }
  .runtime-host { padding: .8rem; }
  .runtime-message { width: 100%; }
  .partner-wheel { width: min(76%, 18rem); }
  .building-twin { gap: .7rem; }
  .building-status { padding: .7rem; }
}

@media (max-width: 420px) {
  .story-core { inset: 30% 19%; }
  .hero-scene { inset: auto; border-radius: 18px; }
  .hero-scene-kicker { font-size: .56rem; }
  .hero-scene--core > .hero-scene-kicker,
  .hero-scene--partners > .hero-scene-kicker { top: .85rem; left: .9rem; }
  .core-flow { display: none; }
  .living-core { width: 7rem; }
  .living-core strong { bottom: .7rem; font-size: .48rem; }
  .runtime-bar { min-height: 2.55rem; padding: 0 .7rem; }
  .runtime-workspace { grid-template-columns: 1fr; }
  .runtime-host { display: none; }
  .runtime-stack { gap: .35rem; padding: .25rem .6rem; }
  .runtime-layer { min-height: 2.25rem; padding: .42rem .6rem; }
  .runtime-layer[data-runtime-layer="2"] { margin-left: .4rem; }
  .runtime-layer[data-runtime-layer="3"] { margin-left: .8rem; }
  .runtime-layer[data-runtime-layer="4"] { margin-left: 1.2rem; }
  .hero-scene--spine { padding: .8rem; }
  .operating-spine { grid-template-columns: 1fr; gap: .3rem; margin: .45rem 0; align-items: stretch; }
  .operating-spine::before { top: 5%; bottom: 5%; left: 1.7rem; width: 2px; height: auto; }
  .spine-scan { top: 5%; left: calc(1.7rem - 1px); width: 4px; height: 22%; animation-name: spine-scan-mobile; }
  .spine-node { grid-template-columns: 3.4rem 1fr auto; justify-items: start; align-items: center; gap: .45rem; text-align: left; }
  .spine-node::before { grid-row: 1; grid-column: 1; width: 2.2rem; margin-left: .6rem; border-radius: 10px; }
  .spine-node i { top: 50%; left: 1.65rem; transform: translate(-50%, -50%); }
  .spine-node b { grid-column: 2; grid-row: 1; }
  .spine-node span { grid-column: 3; grid-row: 1; }
  .spine-caption { display: none; }
  .academy-toolbar { min-height: 2.6rem; padding: 0 .7rem; }
  .academy-block { width: 5.6rem; min-height: 2.7rem; padding: .45rem; }
  .academy-block[data-academy-block="1"] { left: 4%; }
  .academy-block[data-academy-block="2"] { left: 6%; }
  .academy-block[data-academy-block="3"] { right: 4%; }
  .academy-block[data-academy-block="4"] { right: 6%; }
  .academy-result { width: 8.4rem; }
  .partner-wheel { width: 12rem; }
  .partner-node { width: 4.7rem; min-height: 3rem; padding: .45rem; }
  .partner-node b { font-size: .57rem; }
  .partner-node[data-partner-node="2"] { right: -13%; }
  .partner-node[data-partner-node="4"] { left: -13%; }
  .partner-value { display: none; }
  .hero-scene--company, .hero-scene--building, .hero-scene--doorways { padding: .75rem; }
  .hk-lattice { gap: .2rem; padding: 0 .25rem; }
  .hk-column { width: 1.65rem; padding: .3rem; gap: .18rem; }
  .hk-caption { font-size: .5rem; }
  .building-twin { grid-template-columns: 1fr; }
  .building-stack { padding: .6rem 1.2rem 0; }
  .building-floor { min-height: 1.8rem; }
  .building-status { display: none; }
  .doorway-head > b { max-width: 8rem; font-size: .62rem; }
  .doorway-grid { gap: .4rem; margin-top: .55rem; }
  .doorway { padding: .55rem; border-radius: 11px; }
  .doorway b { font-size: .62rem; }
  .doorway-core { width: 2.5rem; }
  .story-chip {
    width: 100%;
    max-width: none;
    padding: .42rem .48rem;
    font-size: .62rem;
    transform: none;
  }
  .story-chip[data-story-chip="north-west"] { top: auto; left: auto; }
  .story-chip[data-story-chip="north-east"] { top: auto; right: auto; }
  .story-chip[data-story-chip="south-west"] { bottom: auto; left: auto; }
  .story-chip[data-story-chip="south-east"] { right: auto; bottom: auto; }
}

@keyframes spine-scan-mobile {
  0%, 12% { transform: translateY(0); }
  88%, 100% { transform: translateY(290%); }
}

@media (max-width: 760px) and (max-height: 700px) {
  .story-hero { padding-block: .65rem; }
  .story-hero h1 {
    margin-block: .42rem .5rem;
    font-size: clamp(2rem, 8.8vw, 2.5rem);
    line-height: .9;
  }
  .story-hero .eyebrow { font-size: .62rem; }
  .story-hero .lead { font-size: .78rem; line-height: 1.32; }
  .story-hero-actions { margin-top: .58rem; }
  .story-hero-actions .btn-lg {
    --pad-y: 8px;
    --pad-x: 11px;
    min-height: 42px;
    font-size: .76rem;
  }
  .story-art {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    align-content: end;
    gap: .3rem;
  }
  .hero-scene { display: none; }
  .story-chip,
  .story-chip[data-story-chip] {
    grid-row: 1;
    padding: .38rem .3rem;
    align-self: end;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .story-chip[data-story-chip="north-west"] { grid-column: 1; }
  .story-chip[data-story-chip="north-east"] { grid-column: 2; }
  .story-chip[data-story-chip="south-west"] { grid-column: 3; }
  .story-chip[data-story-chip="south-east"] { grid-column: 4; }
  .story-chip span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story-core::before,
  .story-core::after,
  .story-strip-track,
  .operating-rail-signal,
  .incident-pulse,
  .hero-scene *,
  .hero-scene *::before,
  .hero-scene *::after { animation: none !important; }
  .story-ready [data-immersive],
  .story-ready [data-immersive].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .story-chip, .story-core, .hero-scene, .story-card::after, .story-cta-card::after,
  .start-doorway { transform: none; }
}