/* Signal Grid — site-local cinematic profile v2; no external runtime assets. */
@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-Variable.woff2") format("woff2"), url("fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.76, 0, 0.24, 1);
  --font-display: Manrope, Arial, sans-serif;
}
body {
  font-family: var(--font-display);
  overflow-x: clip;
}
h1,
h2,
h3,
.wordmark {
  font-family: var(--font-display);
}
h1,
h2 {
  font-weight: 450;
  letter-spacing: -0.055em;
}
p {
  line-height: 1.7;
}
.shell {
  max-width: 1440px;
  width: calc(100% - 112px);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
}
.site-header {
  position: relative;
  z-index: 20;
  max-width: none;
  min-height: 92px;
  border-color: #bacbc719;
  padding: 22px 56px;
  background: var(--bg);
}
.wordmark {
  font-size: 25px;
  letter-spacing: -1.3px;
}
.wordmark img {
  width: 34px;
  height: 34px;
}
.nav-links {
  font-size: 12px;
  gap: 30px;
}
.nav-links a {
  position: relative;
}
.nav-links a:after {
  content: "";
  position: absolute;
  height: 1px;
  background: var(--accent);
  bottom: 7px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-cinema);
}
.nav-links a:hover:after,
.nav-links a:focus-visible:after {
  transform: scaleX(1);
  transform-origin: left;
}
.header-cta {
  border-color: #607c7d80;
  font-size: 12px;
  transition:
    background 0.3s,
    color 0.3s;
}
.header-cta:hover {
  background: var(--accent);
  color: var(--bg);
}
.button {
  position: relative;
  border-radius: 2px;
  padding: 18px 24px;
  font-weight: 600;
  overflow: hidden;
  transition:
    background 0.3s,
    transform 0.4s var(--ease-cinema);
}
.button:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff3;
  transform: translateX(-105%) skewX(-12deg);
  transition: transform 0.6s var(--ease-cinema);
}
.button:hover:after,
.button:focus-visible:after {
  transform: translateX(105%) skewX(-12deg);
}
.button:hover {
  transform: translateY(-3px);
}
.text-link {
  font-size: 13px;
  border-color: #607c7d80;
  transition: color 0.3s;
}
.text-link:hover {
  color: var(--accent);
}
/* Intro hidden by default; CSS deadline plus an independent JS deadline fail open. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0b1418;
  display: none;
  place-items: center;
  overflow: hidden;
  color: var(--text);
}
.intro-candidate .site-intro {
  display: grid;
  animation: intro-curtain-out 0.62s 0.98s var(--ease-in) both;
}
.intro-candidate .site-intro.intro-finished {
  display: none;
}
.intro-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background:
    linear-gradient(#8ae5bb44 1px, transparent 1px),
    linear-gradient(90deg, #8ae5bb44 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
.intro-composition {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.intro-kicker,
.intro-caption {
  font:
    10px "Courier New",
    monospace;
  letter-spacing: 3px;
  color: var(--muted);
}
.intro-kicker {
  margin-bottom: 36px;
  animation: intro-fade 0.5s 0.05s both;
}
.intro-symbol {
  width: 320px;
  height: 120px;
  overflow: visible;
  margin-bottom: 12px;
}
.intro-wire {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: intro-draw 0.55s var(--ease-cinema) forwards;
}
.wire-right {
  animation-delay: 0.15s;
}
.intro-mark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 310;
  stroke-dashoffset: 310;
  animation: intro-draw 0.65s 0.12s var(--ease-cinema) forwards;
}
.intro-dot {
  fill: var(--accent);
  transform-origin: 202px 30px;
  animation: intro-dot 0.5s 0.35s both;
}
.intro-wordmark {
  font: 550 clamp(40px, 7vw, 88px) / 1 var(--font-display);
  letter-spacing: -0.06em;
  animation: intro-word 0.7s 0.1s var(--ease-cinema) both;
}
.intro-period {
  color: var(--accent);
}
.intro-caption {
  margin-top: 32px;
  font-size: 9px;
  animation: intro-fade 0.6s 0.3s both;
}
.intro-skip {
  position: absolute;
  bottom: 40px;
  right: 56px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  min-height: 44px;
  font-size: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.intro-skip span {
  padding-left: 32px;
}
.intro-dismiss .site-intro {
  animation: intro-curtain-out 0.25s 0s var(--ease-in) both;
}
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  transform: translateY(102%);
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 0.2s var(--ease-in),
    visibility 0s 0.2s;
}
.page-curtain > span {
  display: flex;
  gap: 72px;
  font: 500 clamp(28px, 5vw, 56px) var(--font-display);
  letter-spacing: -0.05em;
}
.page-leaving .page-curtain {
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  opacity: 0.7;
}
.replay-intro {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  padding: 0;
}
.replay-intro:hover {
  color: var(--accent);
}
@keyframes intro-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes intro-word {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes intro-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes intro-dot {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes intro-curtain-out {
  0% {
    transform: translateY(0);
    visibility: visible;
  }
  99% {
    visibility: visible;
  }
  100% {
    transform: translateY(-102%);
    visibility: hidden;
    pointer-events: none;
  }
}
/* Native-scrolling cinematic story. */
.cinema-hero {
  position: relative;
  min-height: min(960px, calc(100svh - 92px));
  isolation: isolate;
  overflow: hidden;
  background: #0c1519;
  display: flex;
  align-items: center;
}
.cinema-hero-copy {
  position: relative;
  z-index: 3;
  padding-top: 72px;
  padding-bottom: 126px;
  pointer-events: none;
}
.cinema-hero-copy a {
  pointer-events: auto;
}
.cinema-hero .eyebrow {
  margin-bottom: 34px;
}
.cinema-hero h1 {
  font-size: clamp(48px, 6.1vw, 92px);
  line-height: 1.035;
  max-width: 770px;
  font-weight: 420;
  letter-spacing: -0.063em;
}
.cinema-lead {
  font-size: clamp(15px, 1.18vw, 19px);
  color: var(--muted);
  margin: 36px 0 30px;
  max-width: 480px;
}
.cinema-object {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0)
    scale(var(--hero-scale, 1.025));
  will-change: transform;
  /* A local vector remains visible if the raster cannot load; no JS or WebGL required. */
  background: url("signal-core.svg") no-repeat 85% center / min(76vw, 920px) auto;
}
.cinema-object img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cinema-object figcaption {
  position: absolute;
  right: 56px;
  bottom: 100px;
  font:
    8px "Courier New",
    monospace;
  letter-spacing: 1.5px;
  color: var(--muted);
  opacity: 0.55;
}
.cinema-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #0c1519 0%,
      #0c1519e0 27%,
      #0c151958 49%,
      transparent 75%
    ),
    linear-gradient(0deg, #0c1519, transparent 24%);
}
.cinema-bottom {
  position: absolute;
  bottom: 32px;
  left: 56px;
  width: calc(100% - 112px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #607c7d55;
  padding-top: 24px;
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.cinema-bottom b {
  font-size: 18px;
  margin-left: 16px;
  color: var(--accent);
}
.signal-story {
  position: relative;
  background: #0c1519;
  isolation: isolate;
}
.story-visual {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  z-index: 0;
  overflow: hidden;
}
.story-image {
  position: absolute;
  inset: 0;
  transform: translateY(var(--story-y, 0px)) scale(var(--story-scale, 1));
  will-change: transform;
}
.story-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #0c1519f5 0%,
    #0c1519e0 25%,
    #0c151955 47%,
    transparent 74%
  );
}
.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.story-chapters {
  position: relative;
  margin-top: -100svh;
  z-index: 2;
  pointer-events: none;
}
.story-chapter {
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 42%;
  max-width: 570px;
  padding: 100px 0;
}
.story-chapter a {
  pointer-events: auto;
}
.story-chapter h2 {
  font-size: clamp(46px, 5.7vw, 82px);
  line-height: 1.04;
  margin-bottom: 32px;
}
.story-chapter p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  max-width: 34ch;
}
.story-coordinate {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 32px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 1.6px;
  z-index: 2;
}
.story-indicators {
  position: absolute;
  right: 56px;
  top: 45%;
  display: grid;
  gap: 14px;
}
.story-indicators span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition:
    background 0.4s,
    transform 0.4s;
}
.story-indicators span.is-current {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.5);
}
.story-rings {
  position: absolute;
  inset: 15% 10% 15% 45%;
  opacity: 0.3;
  pointer-events: none;
}
.story-rings i {
  position: absolute;
  border: 1px solid #8ae5bb55;
  border-radius: 50%;
  inset: 10%;
  transform: rotateX(65deg) rotateZ(calc(var(--story-angle, 0deg) + 20deg));
}
.story-rings i:nth-child(2) {
  inset: 0;
  transform: rotateX(55deg) rotateZ(calc(var(--story-angle, 0deg) - 25deg));
}
.story-rings i:nth-child(3) {
  inset: 25%;
  border-color: var(--warm);
}
.web-showcase {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 140px 0;
}
.web-showcase h2 {
  font-size: clamp(42px, 5vw, 76px);
  margin-bottom: 32px;
}
.web-showcase p:not(.eyebrow) {
  max-width: 42ch;
  color: var(--muted);
  font-size: 17px;
}
.web-art {
  position: relative;
  display: block;
  min-height: 550px;
  perspective: 1200px;
}
.web-window {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 36px 80px #0004;
  transition: transform 0.8s var(--ease-cinema);
}
.window-back {
  inset: 12% 0 18% 20%;
  transform: rotateY(-14deg) rotateZ(8deg);
  padding: 28px;
  color: var(--accent);
  font:
    9px "Courier New",
    monospace;
  background: linear-gradient(120deg, #233940, #101b20);
}
.window-back i {
  display: block;
  height: 24px;
  margin-top: 32px;
  width: 65%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.window-front {
  inset: 24% 12% 5% 0;
  transform: rotateY(-14deg) rotateZ(-5deg);
  padding: 28px;
  background: #0d181d;
}
.mock-nav {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.mock-nav b {
  color: var(--text);
}
.window-front strong {
  font: 450 clamp(26px, 3vw, 42px) / 1.2 var(--font-display);
  letter-spacing: -0.045em;
  display: block;
  margin-top: 24px;
}
.mock-bottom {
  display: flex;
  justify-content: space-between;
  font:
    7px "Courier New",
    monospace;
  position: absolute;
  bottom: 22px;
  left: 28px;
  right: 28px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.mock-trace {
  position: absolute;
  right: 24px;
  top: 40%;
  width: 40%;
  height: 40%;
  opacity: 0.35;
}
.mock-trace i {
  position: absolute;
  inset: 10%;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}
.mock-trace i:nth-child(2) {
  inset: 30% -10% 30% 30%;
}
.mock-trace i:nth-child(3) {
  inset: -10% 30% 50% 50%;
}
.web-art-caption {
  position: absolute;
  bottom: -20px;
  right: 10px;
  font:
    8px "Courier New",
    monospace;
  color: var(--muted);
  letter-spacing: 1.4px;
}
.web-art:hover .window-front,
.web-art:focus-visible .window-front {
  transform: rotateY(-5deg) rotateZ(-2deg) translateY(-10px);
}
.web-art:hover .window-back,
.web-art:focus-visible .window-back {
  transform: rotateY(-5deg) rotateZ(6deg) translateY(8px);
}
/* Coherent editorial rhythm for retained editable homepage sections. */
.principle-strip {
  padding: 32px 56px;
  font-size: 12px;
  border-color: #607c7d40;
  gap: 72px;
}
.section {
  padding: 124px 0;
}
.section-heading {
  max-width: 900px;
  margin-bottom: 70px;
}
.section-heading h2 {
  font-size: clamp(40px, 4.4vw, 64px);
}
.service-row {
  position: relative;
  grid-template-columns: 38px 1fr 0.95fr 36px;
  padding: 44px 0;
  gap: 28px;
  isolation: isolate;
  border-color: #607c7d50;
  overflow: hidden;
}
.service-row:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-cinema);
}
.service-row:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s var(--ease-cinema);
}
.service-row:hover,
.service-row:focus-visible {
  padding-left: 0;
  background: none;
}
.service-row:hover:before,
.service-row:focus-visible:before {
  transform: scaleY(1);
}
.service-row:hover:after,
.service-row:focus-visible:after {
  transform: scaleX(1);
  transform-origin: left;
}
.service-row h3 {
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 450;
  transition: transform 0.6s var(--ease-cinema);
}
.service-row:hover h3 {
  transform: translateX(8px);
}
.row-arrow {
  transition: transform 0.55s var(--ease-cinema);
}
.service-row:hover .row-arrow {
  transform: translate(4px, -4px);
}
.takeover {
  padding: 116px 0;
}
.takeover h2 {
  font-size: clamp(44px, 5.5vw, 80px);
}
.takeover-grid {
  gap: 100px;
  grid-template-columns: 1.1fr 1fr;
}
.large-copy {
  font-size: 24px;
  line-height: 1.45;
}
.steps {
  margin-top: 70px;
  gap: 38px;
}
.step {
  position: relative;
  border-color: var(--line);
  padding-top: 30px;
}
.step:before {
  content: "";
  height: 1px;
  background: var(--accent);
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-cinema);
}
.step.reveal-visible:before {
  transform: scaleX(1);
}
.step h3 {
  font-size: 22px;
  line-height: 1.2;
}
.pilot-section {
  border-radius: 2px;
}
.pilot-copy {
  padding: 64px;
}
.pilot-copy h2 {
  font-size: clamp(30px, 3vw, 44px);
}
.pilot-art {
  min-height: 520px;
}
.scan-board {
  transform: rotate(-14deg);
  transition: transform 1.2s var(--ease-cinema);
}
.pilot-section:hover .scan-board {
  transform: rotate(-8deg) translateY(-8px);
}
.contact-banner h2 {
  font-size: clamp(44px, 6vw, 88px);
}
.faq summary {
  font-size: 19px;
  padding: 24px 0;
  line-height: 1.45;
}
.faq details[open] p {
  animation: intro-word 0.45s var(--ease-cinema);
}
/* Inner pages: authored title/art, asymmetrical editorial chapters. */
.chapter-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0 100px;
  min-height: 620px;
}
.chapter-title {
  position: relative;
  z-index: 2;
}
.chapter-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 54px;
}
.chapter-title .eyebrow > span {
  color: var(--warm);
  margin-right: 10px;
}
.chapter-title h1 {
  font-size: clamp(42px, 5.1vw, 76px);
  line-height: 1.06;
  max-width: 900px;
}
.chapter-scroll {
  display: inline-flex;
  align-items: center;
  gap: 44px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 36px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.chapter-scroll span {
  font-size: 18px;
  color: var(--accent);
}
.discipline-art {
  position: relative;
  min-height: 410px;
  aspect-ratio: 1.1;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #23394077, transparent 70%);
  isolation: isolate;
}
.art-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#607c7d29 1px, transparent 1px),
    linear-gradient(90deg, #607c7d29 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.art-signal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.art-trace {
  fill: none;
  stroke-width: 1;
}
.muted-trace {
  stroke: var(--border);
  opacity: 0.45;
}
.primary-trace {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.motion-ready .primary-trace {
  animation: art-draw 1.6s 0.25s var(--ease-cinema) both;
}
.art-signal circle {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.art-number {
  font: 300 clamp(130px, 15vw, 240px) / 1 var(--font-display);
  letter-spacing: -0.085em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #bacbc710;
}
.art-caption {
  position: absolute;
  bottom: 35px;
  left: 28px;
  right: 28px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 1.6px;
  color: var(--muted);
}
.art-cross {
  position: absolute;
  color: var(--warm);
  font:
    18px "Courier New",
    monospace;
}
.cross-one {
  top: 30px;
  left: 28px;
}
.cross-two {
  right: 28px;
  bottom: 28px;
}
.art-orbit {
  position: absolute;
  inset: 15%;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.35;
  transform: rotateX(55deg) rotateZ(-30deg);
}
.orbit-two {
  inset: 25%;
  transform: rotateY(50deg) rotateZ(30deg);
  border-color: var(--accent);
}
.art-software .art-orbit {
  border-radius: 4px;
  transform: rotate(-12deg);
}
.art-software .orbit-two {
  transform: rotate(12deg);
}
.art-electronics .art-orbit {
  border-radius: 10px;
  transform: rotate(45deg);
}
.art-infrastructure .art-orbit {
  border-radius: 0;
  inset: 20% 10%;
  transform: skewY(-12deg);
}
.art-web .art-orbit {
  border-radius: 4px;
  inset: 20% 5%;
  transform: perspective(800px) rotateY(-30deg) rotateZ(-8deg);
}
.art-vision .orbit-two {
  border-color: var(--warm);
}
.chapter-content {
  padding: 0 0 100px;
}
.chapter-intro {
  max-width: 880px;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.45;
  margin: 0 0 96px 25%;
  letter-spacing: -0.025em;
}
.chapter-intro p {
  color: var(--text);
  line-height: 1.5;
}
.editorial-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 80px;
  position: relative;
}
.section-index {
  align-self: start;
  position: sticky;
  top: 36px;
}
.section-index .eyebrow {
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 22px;
}
.section-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-index li {
  border-top: 1px solid #607c7d30;
}
.section-index a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted);
  padding: 13px 0;
  line-height: 1.6;
  transition: color 0.3s;
}
.section-index a > span {
  font:
    9px "Courier New",
    monospace;
  color: var(--border);
  min-width: 16px;
}
.section-index a:hover,
.section-index a.is-current {
  color: var(--accent);
}
.section-index a.index-contact {
  margin-top: 30px;
  border-bottom: 1px solid var(--border);
  display: inline-flex;
  color: var(--text);
  font-size: 12px;
}
.editorial-section {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
  padding: 48px 0 64px;
  scroll-margin-top: 40px;
}
.editorial-number {
  font:
    11px "Courier New",
    monospace;
  color: var(--accent);
  padding-top: 11px;
}
.editorial-section .prose {
  max-width: 780px;
  font-size: 17px;
}
.editorial-section .prose h2 {
  font-size: clamp(26px, 2.8vw, 40px);
  margin: 0 0 28px;
  line-height: 1.15;
  font-weight: 450;
}
.editorial-section .prose p {
  color: var(--muted);
  line-height: 1.8;
}
.editorial-section .prose ul {
  padding-left: 20px;
  color: var(--muted);
}
.editorial-section .prose li {
  padding-left: 10px;
  margin-bottom: 18px;
}
.editorial-section .prose li::marker {
  color: var(--accent);
}
.next-chapter {
  padding: 80px 0 110px;
  border-top: 1px solid var(--line);
}
.next-chapter > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font: 450 clamp(40px, 5.5vw, 82px) / 1.1 var(--font-display);
  letter-spacing: -0.055em;
}
.chapter-arrow {
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 250;
  color: var(--accent);
  transition: transform 0.7s var(--ease-cinema);
}
.next-chapter > a:hover .chapter-arrow {
  transform: translate(12px, -12px);
}
.next-chapter > p:last-child {
  color: var(--muted);
  font-size: 14px;
  margin-top: 30px;
}
.page-kind-overview .editorial-layout {
  grid-template-columns: 1fr;
}
.page-kind-overview .section-index {
  display: none;
}
.page-kind-overview .editorial-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
}
.page-kind-overview .editorial-section {
  min-height: 260px;
}
.page-kind-overview .editorial-section:nth-child(3n) {
  grid-column: 1/-1;
  max-width: 880px;
}
.page-kind-overview .prose h2 a {
  text-decoration: none;
  color: var(--text);
}
.page-kind-approach .editorial-section {
  border-top: 0;
  border-left: 1px solid var(--line);
  padding: 0 0 76px 40px;
  position: relative;
}
.page-kind-approach .editorial-number {
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  height: 30px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 9px;
}
.page-kind-approach .editorial-section > .prose {
  grid-column: 1/-1;
}
.page-kind-about .chapter-intro {
  font-size: clamp(30px, 3.1vw, 46px);
  max-width: 930px;
}
.page-kind-about .editorial-section {
  grid-template-columns: 70px 1fr;
}
.page-kind-about .editorial-number {
  font: 300 54px/1 var(--font-display);
  letter-spacing: -0.06em;
  color: var(--border);
}
.page-kind-contact .chapter-hero {
  min-height: 530px;
  padding-bottom: 50px;
}
.contact-address {
  border-block: 1px solid var(--line);
  padding: 48px 0;
  margin-bottom: 80px;
}
.contact-address > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 420 clamp(26px, 6.2vw, 92px) / 1.3 var(--font-display);
  letter-spacing: -0.05em;
  color: var(--accent);
  gap: 20px;
}
.copy-email {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  padding: 12px 0;
  font-size: 11px;
  min-height: 44px;
  cursor: pointer;
  margin-top: 22px;
}
.copy-email span {
  margin-left: 32px;
}
.copy-status {
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  margin-left: 24px;
}
.page-kind-contact .chapter-intro {
  font-size: 20px;
  max-width: 760px;
  margin-left: 25%;
}
.page-kind-contact .chapter-intro .button {
  display: none;
}
.page-kind-contact .editorial-layout {
  margin-left: 25%;
  grid-template-columns: 1fr;
}
.page-kind-contact .section-index {
  display: none;
}
.page-kind-document .chapter-hero {
  grid-template-columns: 1fr;
  min-height: 0;
}
.page-kind-document .discipline-art {
  display: none;
}
@keyframes art-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* Journal and reading. */
.journal {
  padding: 72px 0 120px;
  max-width: 1440px;
}
.journal-hero h1 {
  font-size: clamp(44px, 6vw, 88px);
  max-width: 1100px;
  margin: 0 0 48px;
  line-height: 1.08;
}
.journal-intro {
  display: flex;
  align-items: center;
  gap: 64px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  margin-bottom: 72px;
}
.journal-symbol {
  font-size: 44px;
  color: var(--accent);
  font-weight: 250;
}
.journal-intro p {
  font-size: 17px;
  color: var(--muted);
  max-width: 38ch;
  margin: 0;
}
.journal-intro > .mini-label {
  margin-left: auto;
  color: var(--muted);
  margin-bottom: 0;
}
.journal-grid {
  gap: 72px 40px;
}
.journal-card {
  border: 0;
  padding: 0;
  min-width: 0;
}
.journal-card h2 {
  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 450;
  line-height: 1.18;
  letter-spacing: -0.04em;
  margin: 20px 0;
}
.journal-image {
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  margin-bottom: 24px;
  background: var(--surface);
  aspect-ratio: 1.5;
}
.journal-image img,
.journal-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
  transition: transform 0.9s var(--ease-cinema);
}
.journal-image > span {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  height: 76px;
  width: 76px;
  display: grid;
  place-items: center;
  font-size: 11px;
  transform: translateY(15px);
  opacity: 0;
  transition:
    transform 0.6s var(--ease-cinema),
    opacity 0.4s;
}
.journal-card:hover .journal-image img,
.journal-card:focus-within .journal-image img {
  transform: scale(1.04);
}
.journal-card:hover .journal-image > span,
.journal-card:focus-within .journal-image > span {
  transform: none;
  opacity: 1;
}
.journal > .journal-grid > .journal-card:first-child {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  column-gap: 56px;
  align-content: center;
}
.journal > .journal-grid > .journal-card:first-child > .journal-image {
  grid-column: 1;
  grid-row: 1/5;
  margin: 0;
  aspect-ratio: 1.4;
}
.journal > .journal-grid > .journal-card:first-child > .eyebrow {
  margin-top: 20px;
}
.journal > .journal-grid > .journal-card:first-child > .text-link {
  justify-self: start;
  align-self: start;
}
.article-hero {
  padding: 72px 0 60px;
  max-width: 1280px;
}
.article-hero .chapter-breadcrumb {
  margin-bottom: 64px;
}
.article-meta {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-bottom: 28px;
}
.article-meta > .eyebrow {
  margin: 0;
}
.article-meta > span:last-child {
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.article-hero h1 {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.1;
  font-weight: 430;
  max-width: 1200px;
}
.article-deck {
  max-width: 750px;
  font-size: 21px;
  color: var(--muted);
  margin: 36px 0 0;
  line-height: 1.6;
}
.article-cover {
  margin-top: 0;
  margin-bottom: 88px;
  max-width: 1440px;
}
.article-cover img {
  width: 100%;
  max-height: 740px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.article-cover figcaption {
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin-top: 16px;
  text-transform: uppercase;
}
.article-body {
  max-width: 1280px;
  gap: 72px;
  margin-bottom: 100px;
}
.article-intro {
  font-size: 19px;
  margin-bottom: 48px;
}
.article-section {
  padding-bottom: 48px;
  scroll-margin-top: 40px;
}
.article-section h2 {
  font-size: 34px;
  margin: 0 0 28px;
  line-height: 1.2;
}
.article-section p {
  font-size: 17px;
  line-height: 1.85;
}
.article-section figure {
  margin: 40px -30px;
}
.article-section img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.related-reading {
  border-top: 1px solid var(--line);
  padding: 64px 0 100px;
}
.related-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.related-heading > .eyebrow {
  margin: 0;
}
.site-footer {
  padding: 64px 56px 28px;
}
.footer-top > .wordmark {
  font-size: 36px;
}
.footer-bottom {
  align-items: center;
  min-height: 70px;
}
.title-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.title-word > span {
  display: inline-block;
}
.motion-ready .title-word > span {
  animation: title-enter 1.05s calc(0.08s + var(--word-index, 0) * 0.035s)
    var(--ease-cinema) both;
}
.intro-candidate .title-word > span {
  animation-delay: calc(0.9s + var(--word-index, 0) * 0.035s);
}
.reveal-visible {
  transition-duration: 0.85s;
  transition-timing-function: var(--ease-cinema);
}
.reveal-pending {
  transform: translateY(28px);
}
@keyframes title-enter {
  from {
    transform: translateY(110%);
    opacity: 0.2;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
/* Responsive direction: mobile is a readable scene sequence, not a pinned animation. */
@media (max-width: 1100px) {
  .shell {
    width: calc(100% - 64px);
  }
  .site-header {
    padding: 20px 32px;
  }
  .nav-links {
    gap: 20px;
  }
  .cinema-hero {
    min-height: 740px;
  }
  .cinema-hero h1 {
    font-size: 64px;
    max-width: 560px;
  }
  .cinema-hero-copy {
    padding-top: 60px;
  }
  .cinema-bottom {
    left: 32px;
    width: calc(100% - 64px);
  }
  .cinema-object img {
    object-position: 56% center;
  }
  .cinema-atmosphere {
    background:
      linear-gradient(90deg, #0c1519ef, #0c151977 46%, transparent),
      linear-gradient(0deg, #0c1519, transparent 30%);
  }
  .story-chapter {
    width: 48%;
  }
  .story-coordinate {
    left: 32px;
    right: 32px;
  }
  .web-showcase {
    gap: 32px;
    padding: 100px 0;
  }
  .web-art {
    min-height: 480px;
  }
  .chapter-hero {
    gap: 32px;
    min-height: 560px;
  }
  .chapter-title h1 {
    font-size: 52px;
  }
  .discipline-art {
    min-height: 340px;
  }
  .editorial-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 40px;
  }
  .editorial-section {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 20px;
  }
  .chapter-intro {
    margin-left: 23%;
    font-size: 28px;
  }
  .article-body {
    gap: 40px;
  }
  .article-section figure {
    margin-inline: 0;
  }
  .journal > .journal-grid > .journal-card:first-child {
    column-gap: 32px;
  }
  .takeover-grid {
    gap: 48px;
  }
  .pilot-copy {
    padding: 40px;
  }
}
@media (max-width: 768px) {
  .shell {
    width: calc(100% - 40px);
  }
  .site-header {
    padding: 16px 20px;
    min-height: 76px;
  }
  .wordmark {
    font-size: 23px;
  }
  .wordmark img {
    width: 28px;
    height: 28px;
  }
  .menu-toggle {
    font-size: 12px;
    min-height: 44px;
  }
  .nav-links {
    gap: 20px;
    font-size: 13px;
  }
  #primary-nav,
  .js #primary-nav.is-open {
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-intro .intro-symbol {
    width: 260px;
    height: 100px;
  }
  .intro-kicker {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .intro-caption {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .intro-skip {
    right: 24px;
    bottom: 28px;
  }
  .cinema-hero {
    min-height: 850px;
    display: block;
  }
  .cinema-hero-copy {
    padding: 44px 0 390px;
  }
  .cinema-hero h1 {
    font-size: clamp(42px, 7.3vw, 60px);
    line-height: 1.06;
    max-width: 620px;
  }
  .cinema-hero .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .cinema-lead {
    font-size: 15px;
    margin: 24px 0;
    max-width: 450px;
  }
  .cinema-object {
    inset: 35% -15% 0 -15%;
    transform: none !important;
  }
  .cinema-object img {
    object-position: 70% center;
  }
  .cinema-object figcaption {
    right: 16%;
    bottom: 88px;
    font-size: 7px;
    letter-spacing: 0.8px;
  }
  .cinema-atmosphere {
    background: linear-gradient(
      180deg,
      #0c1519 0%,
      #0c1519 37%,
      #0c151900 62%,
      #0c1519 96%
    );
  }
  .cinema-bottom {
    left: 20px;
    width: calc(100% - 40px);
    bottom: 22px;
    gap: 20px;
    font-size: 7px;
    line-height: 1.6;
  }
  .cinema-bottom span:first-child {
    max-width: 135px;
  }
  .cinema-bottom span:last-child {
    text-align: right;
    max-width: 170px;
  }
  .signal-story {
    padding-top: 0;
    overflow: hidden;
  }
  .story-visual {
    position: relative;
    height: 460px;
    min-height: 0;
  }
  .story-image {
    transform: none !important;
  }
  .story-image img {
    object-position: 70% center;
  }
  .story-image:after {
    background: linear-gradient(
      180deg,
      #0c1519,
      transparent 20%,
      transparent 60%,
      #0c1519
    );
  }
  .story-chapters {
    margin-top: 0;
  }
  .story-chapter {
    min-height: 0;
    width: 100%;
    max-width: none;
    padding: 44px 0;
    border-top: 1px solid var(--line);
    pointer-events: auto;
  }
  .story-chapter h2 {
    font-size: 42px;
    margin-bottom: 20px;
  }
  .story-chapter p:not(.eyebrow) {
    font-size: 16px;
    max-width: 55ch;
  }
  .story-coordinate {
    left: 20px;
    right: 20px;
    font-size: 7px;
    bottom: 20px;
    gap: 20px;
  }
  .story-coordinate > span:last-child {
    text-align: right;
  }
  .story-indicators {
    display: none;
  }
  .story-rings {
    inset: 5% 10% 5% 20%;
  }
  .web-showcase {
    grid-template-columns: 1fr;
    padding: 72px 0 96px;
    gap: 8px;
  }
  .web-showcase h2 {
    font-size: 48px;
  }
  .web-showcase-copy p:not(.eyebrow) {
    font-size: 16px;
    max-width: 55ch;
  }
  .web-art {
    min-height: 450px;
    max-width: 620px;
    width: 100%;
    margin: auto;
  }
  .window-front {
    inset: 20% 12% 4% 0;
  }
  .window-front strong {
    font-size: 34px;
  }
  .window-back {
    inset: 6% 0 20% 20%;
  }
  .principle-strip {
    padding: 24px 20px;
    gap: 12px;
    font-size: 9px;
  }
  .section {
    padding: 72px 0;
  }
  .section-heading {
    margin-bottom: 40px;
  }
  .section-heading h2 {
    font-size: 36px;
  }
  .service-row {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    padding: 30px 0;
    gap: 16px;
  }
  .service-row h3 {
    font-size: 25px;
  }
  .service-row:hover h3 {
    transform: none;
  }
  .service-description {
    grid-column: 2;
  }
  .takeover {
    padding: 72px 0;
  }
  .takeover h2 {
    font-size: 48px;
  }
  .takeover-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .large-copy {
    font-size: 22px;
  }
  .steps {
    gap: 28px;
    margin-top: 40px;
  }
  .pilot-section {
    grid-template-columns: 1fr;
  }
  .pilot-art {
    min-height: 370px;
  }
  .pilot-copy {
    padding: 32px 24px;
  }
  .pilot-copy h2 {
    font-size: 36px;
  }
  .contact-banner h2 {
    font-size: 46px;
  }
  .chapter-hero {
    grid-template-columns: 1fr;
    padding: 40px 0 60px;
    gap: 0;
    min-height: 0;
  }
  .chapter-breadcrumb {
    margin-bottom: 36px;
    font-size: 10px;
  }
  .chapter-title h1 {
    font-size: clamp(38px, 7vw, 56px);
  }
  .chapter-title .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .chapter-scroll {
    margin-top: 24px;
  }
  .discipline-art {
    min-height: 0;
    height: 280px;
    aspect-ratio: auto;
    max-width: 520px;
    width: 100%;
    margin: auto;
  }
  .art-number {
    font-size: 180px;
  }
  .art-caption {
    font-size: 8px;
    bottom: 18px;
  }
  .chapter-content {
    padding-bottom: 64px;
  }
  .chapter-intro,
  .page-kind-about .chapter-intro {
    margin: 0 0 48px;
    font-size: 24px;
  }
  .editorial-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .section-index {
    position: relative;
    top: auto;
    display: none;
  }
  .editorial-section {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 16px;
    padding: 30px 0 40px;
  }
  .editorial-section .prose h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .editorial-section .prose p {
    font-size: 16px;
  }
  .editorial-number {
    font-size: 9px;
  }
  .next-chapter {
    padding: 48px 0 64px;
  }
  .next-chapter > a {
    font-size: 38px;
    gap: 12px;
  }
  .chapter-arrow {
    font-size: 64px;
  }
  .page-kind-overview .editorial-sections {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .page-kind-overview .editorial-section {
    min-height: 0;
  }
  .page-kind-overview .editorial-section:nth-child(3n) {
    grid-column: auto;
  }
  .page-kind-approach .editorial-sections {
    padding-left: 15px;
  }
  .page-kind-approach .editorial-section {
    padding: 0 0 48px 30px;
  }
  .page-kind-about .editorial-section {
    grid-template-columns: 42px 1fr;
  }
  .page-kind-about .editorial-number {
    font-size: 34px;
    padding-top: 0;
  }
  .page-kind-contact .chapter-hero {
    min-height: 0;
    padding-bottom: 24px;
  }
  .contact-address {
    padding: 32px 0;
    margin-bottom: 48px;
  }
  .contact-address > a {
    font-size: clamp(25px, 6vw, 46px);
  }
  .copy-status {
    display: block;
    margin: 12px 0 0;
  }
  .page-kind-contact .chapter-intro {
    font-size: 18px;
    margin-left: 0;
  }
  .page-kind-contact .editorial-layout {
    margin-left: 0;
  }
  .journal {
    padding: 44px 0 72px;
  }
  .journal-hero h1 {
    font-size: clamp(38px, 7vw, 54px);
    margin-bottom: 32px;
  }
  .journal-intro {
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-top: 24px;
  }
  .journal-intro p {
    font-size: 15px;
    max-width: 30ch;
  }
  .journal-intro > .mini-label {
    width: 100%;
    margin: 0;
  }
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .journal > .journal-grid > .journal-card:first-child {
    display: block;
    grid-column: auto;
  }
  .journal > .journal-grid > .journal-card:first-child > .journal-image {
    margin-bottom: 24px;
    aspect-ratio: 1.5;
  }
  .journal-card h2 {
    font-size: 28px;
  }
  .journal-image > span {
    width: 58px;
    height: 58px;
    right: 18px;
    bottom: 18px;
    opacity: 1;
    transform: none;
  }
  .article-hero {
    padding: 44px 0 36px;
  }
  .article-hero .chapter-breadcrumb {
    margin-bottom: 36px;
  }
  .article-meta {
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .article-hero h1 {
    font-size: clamp(32px, 6vw, 48px);
  }
  .article-deck {
    font-size: 18px;
    margin-top: 28px;
  }
  .article-cover {
    margin-bottom: 44px;
  }
  .article-cover img {
    max-height: 450px;
  }
  .article-body {
    margin-bottom: 56px;
  }
  .article-intro {
    font-size: 18px;
    margin-bottom: 32px;
  }
  .article-section {
    padding-bottom: 32px;
  }
  .article-section h2 {
    font-size: 28px;
  }
  .article-section p {
    font-size: 16px;
  }
  .related-reading {
    padding: 40px 0 64px;
  }
  .site-footer {
    padding: 40px 20px 20px;
  }
  .footer-top > .wordmark {
    font-size: 30px;
  }
  .footer-bottom {
    align-items: flex-start;
  }
}
@media (max-width: 420px) {
  .cinema-hero h1 {
    font-size: 43px;
  }
  .cinema-hero-copy {
    padding-bottom: 355px;
  }
  .cinema-lead {
    font-size: 14px;
    max-width: 330px;
  }
  .cinema-object {
    inset: 42% -25% 0 -25%;
  }
  .cinema-atmosphere {
    background: linear-gradient(
      180deg,
      #0c1519 0%,
      #0c1519 46%,
      #0c151900 70%,
      #0c1519 97%
    );
  }
  .actions {
    gap: 12px;
  }
  .actions > .button {
    font-size: 12px;
    padding: 16px 18px;
    gap: 24px;
  }
  .actions > .text-link {
    font-size: 11px;
  }
  .story-visual {
    height: 350px;
  }
  .story-chapter h2 {
    font-size: 38px;
  }
  .web-showcase h2 {
    font-size: 42px;
  }
  .web-art {
    min-height: 370px;
  }
  .window-front strong {
    font-size: 28px;
  }
  .chapter-title h1 {
    font-size: 38px;
  }
  .discipline-art {
    height: 250px;
  }
  .next-chapter > a {
    font-size: 32px;
  }
  .chapter-arrow {
    font-size: 52px;
  }
  .article-hero h1 {
    font-size: 34px;
  }
  .contact-address > a {
    font-size: 26px;
  }
  .intro-wordmark {
    font-size: 48px;
  }
  .intro-kicker,
  .intro-caption {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro,
  .page-curtain {
    display: none !important;
  }
  .cinema-object,
  .story-image,
  .story-rings i,
  .title-word > span {
    transform: none !important;
  }
  .reveal-pending {
    opacity: 1;
    transform: none;
  }
  .motion-ready .primary-trace {
    stroke-dashoffset: 0;
  }
  .step:before {
    transform: scaleX(1);
  }
  .scroll-progress {
    display: none;
  }
  .title-word > span {
    opacity: 1 !important;
    filter: none !important;
  }
}
@media print {
  .site-intro,
  .page-curtain,
  .scroll-progress,
  .discipline-art,
  .cinema-object,
  .story-visual,
  .section-index,
  .web-art,
  .replay-intro {
    display: none !important;
  }
  .cinema-hero,
  .signal-story {
    background: white;
    color: #172e32;
  }
  .cinema-hero-copy {
    padding: 24px 0;
  }
  .cinema-atmosphere {
    display: none;
  }
  .story-chapters {
    margin: 0;
  }
  .story-chapter {
    min-height: 0;
    width: 100%;
    padding: 24px 0;
  }
  .chapter-hero,
  .editorial-layout,
  .web-showcase {
    display: block;
    min-height: 0;
  }
  .chapter-intro {
    margin: 20px 0;
  }
  .chapter-hero {
    padding: 24px 0;
  }
  .editorial-section {
    break-inside: avoid;
  }
  .title-word > span {
    transform: none !important;
    opacity: 1 !important;
  }
  .reveal-pending {
    opacity: 1;
    transform: none;
  }
}
/* Layer choreography and editorial evidence. */
.cinema-object figcaption {
  font-size: 10px;
  opacity: 0.8;
  letter-spacing: 1px;
}
.story-image > img {
  position: absolute;
  inset: 0;
  transition: opacity 0.9s var(--ease-cinema);
}
.story-image .story-art-assembled,
.story-image .story-art-digital {
  opacity: 0;
}
.signal-story[data-active-step="0"] .story-art-assembled,
.signal-story[data-active-step="3"] .story-art-assembled,
.signal-story[data-active-step="4"] .story-art-assembled {
  opacity: 1;
}
.signal-story[data-active-step="2"] .story-art-digital {
  opacity: 1;
}
.story-callouts {
  position: absolute;
  inset: 12% 5% 15% 40%;
  z-index: 1;
  pointer-events: none;
}
.story-callouts svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.story-callouts svg circle {
  fill: var(--accent);
}
.story-callouts > span {
  position: absolute;
  z-index: 2;
  font:
    10px "Courier New",
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 10px 14px;
  background: #101b20c9;
  border-left: 1px solid var(--accent);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s,
    transform 0.7s var(--ease-cinema);
}
.story-callouts > span:nth-child(1) {
  top: 10%;
  left: 5%;
}
.story-callouts > span:nth-child(2) {
  top: 28%;
  right: 0;
}
.story-callouts > span:nth-child(3) {
  top: 52%;
  left: 6%;
}
.story-callouts > span:nth-child(4) {
  bottom: 14%;
  right: 0;
}
.story-callouts > span:nth-child(5) {
  bottom: 0;
  left: 12%;
}
.signal-story[data-active-step="0"] [data-callout="0"],
.signal-story[data-active-step="1"] [data-callout="1"],
.signal-story[data-active-step="2"] [data-callout="2"],
.signal-story[data-active-step="3"] [data-callout="3"],
.signal-story[data-active-step="4"] [data-callout="4"] {
  opacity: 1;
  transform: none;
}
.web-sculpture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.web-art {
  min-height: 620px;
  overflow: visible;
}
.web-window {
  display: none;
}
.web-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg), transparent 20%),
    linear-gradient(0deg, var(--bg), transparent 15%);
  pointer-events: none;
}
.web-art-caption {
  bottom: 15px;
  left: 30px;
  z-index: 2;
  font-size: 10px;
}
.editorial-proof {
  padding: 100px 0;
  border-top: 1px solid var(--line);
}
.proof-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 60px;
}
.proof-heading > .eyebrow {
  grid-column: 1/-1;
  margin: 0;
}
.proof-heading h2 {
  font-size: clamp(36px, 4.5vw, 66px);
}
.proof-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px 48px;
  align-items: start;
}
.proof-card:first-child {
  grid-row: 1/3;
}
.proof-card h3 {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 450;
  max-width: 28ch;
}
.proof-card:first-child h3 {
  font-size: 38px;
}
.proof-image {
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1.5;
  background: var(--surface);
  margin-bottom: 24px;
}
.proof-card:first-child .proof-image {
  aspect-ratio: 0.85;
}
.proof-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-cinema);
}
.proof-image:hover img {
  transform: scale(1.045);
}
.proof-image > span {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 32px;
  color: var(--bg);
  background: var(--accent);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.proof-card > .eyebrow {
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 16px;
}
/* Six individual journeys: real copy in WordPress, schematic geometry in the same editable block. */
.direction-story {
  background: #0c161b;
  padding: 84px 0 64px;
  margin-bottom: 100px;
  position: relative;
}
.direction-story-heading {
  margin-bottom: 72px;
}
.direction-story-heading h2 {
  font-size: clamp(36px, 4.8vw, 68px);
  max-width: 950px;
  line-height: 1.08;
  margin-bottom: 28px;
}
.direction-story-heading > p:last-child {
  font-size: 20px;
  color: var(--muted);
  max-width: 54ch;
}
.direction-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.direction-diagram {
  position: sticky;
  top: 12vh;
  margin: 0;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at center, #23394066, transparent 70%);
  overflow: hidden;
}
.direction-diagram:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#607c7d18 1px, transparent 1px),
    linear-gradient(90deg, #607c7d18 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.direction-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}
.diagram-geometry {
  fill: #101b2066;
  stroke: var(--border);
  stroke-width: 1.5;
}
.diagram-geometry path {
  fill: none;
}
.diagram-return {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  fill: none;
  opacity: 0.5;
}
.diagram-nodes circle {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
  transition:
    fill 0.6s,
    stroke-width 0.6s;
}
.direction-story[data-active-step="0"] [data-node="0"],
.direction-story[data-active-step="1"] [data-node="1"],
.direction-story[data-active-step="2"] [data-node="2"],
.direction-story[data-active-step="3"] [data-node="3"],
.direction-story[data-active-step="4"] [data-node="4"] {
  fill: var(--accent);
  stroke-width: 8;
}
.direction-diagram figcaption {
  font:
    9px/1.6 "Courier New",
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 0 28px 20px;
}
.diagram-labels {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  border-top: 1px solid var(--line);
  padding: 22px 28px;
  margin: 0;
  position: relative;
}
.diagram-labels li {
  font-size: 10px;
  color: var(--border);
  transition: color 0.4s;
}
.diagram-labels span {
  font:
    9px "Courier New",
    monospace;
  margin-right: 6px;
}
.direction-story[data-active-step="0"] [data-stage-label="0"],
.direction-story[data-active-step="1"] [data-stage-label="1"],
.direction-story[data-active-step="2"] [data-stage-label="2"],
.direction-story[data-active-step="3"] [data-stage-label="3"],
.direction-story[data-active-step="4"] [data-stage-label="4"] {
  color: var(--accent);
}
.direction-stage {
  min-height: 60vh;
  padding: 60px 0 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--line);
}
.direction-stage:first-child {
  border-top: 0;
  padding-top: 24px;
}
.direction-stage:last-child {
  padding-bottom: 30px;
  min-height: 45vh;
}
.direction-stage h3 {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 450;
  line-height: 1.16;
  max-width: 17ch;
  margin: 0 0 26px;
}
.direction-stage > p:not(.eyebrow) {
  font-size: 17px;
  color: var(--muted);
  max-width: 43ch;
  line-height: 1.8;
}
.stage-contract {
  border-left: 1px solid var(--accent);
  padding-left: 20px;
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.stage-contract span {
  font-size: 11px;
  color: var(--muted);
}
.stage-contract strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}
.direction-system-link {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  margin-top: 48px;
}
.direction-system-link > span {
  font:
    9px "Courier New",
    monospace;
  color: var(--muted);
  letter-spacing: 1px;
}
.direction-system-link > a {
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.direction-software .diagram-geometry {
  stroke: #8ae5bb99;
}
.direction-electronics .diagram-geometry {
  stroke: #ffbb8099;
}
.direction-infrastructure .diagram-geometry rect {
  fill: #233940;
}
.direction-web .diagram-geometry rect:first-child {
  fill: #192a30;
}
.direction-vision .diagram-geometry rect:nth-child(3) {
  stroke: var(--warm);
}
.direction-takeover .diagram-geometry {
  stroke: #8ae5bbaa;
}
@media (max-width: 1100px) {
  .direction-journey {
    gap: 48px;
  }
  .web-art {
    min-height: 520px;
  }
  .proof-card h3 {
    font-size: 26px;
  }
  .proof-card:first-child h3 {
    font-size: 32px;
  }
}
@media (max-width: 768px) {
  .intro-kicker,
  .intro-caption {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .cinema-object figcaption {
    font-size: 9px;
    opacity: 0.9;
    right: 17%;
    max-width: 220px;
    line-height: 1.5;
    text-align: right;
  }
  .story-callouts {
    inset: 5% 5% 15% 20%;
  }
  .story-callouts > span {
    font-size: 9px;
  }
  .story-coordinate {
    font-size: 9px;
    letter-spacing: 0.7px;
  }
  .web-art {
    min-height: 400px;
  }
  .web-art-caption {
    font-size: 9px;
    left: 20px;
    bottom: 0;
  }
  .editorial-proof {
    padding: 64px 0;
  }
  .proof-heading {
    display: block;
    margin-bottom: 36px;
  }
  .proof-heading > .eyebrow {
    margin-bottom: 24px;
  }
  .proof-heading > .text-link {
    margin-top: 20px;
  }
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .proof-card:first-child {
    grid-row: auto;
  }
  .proof-card:first-child .proof-image {
    aspect-ratio: 1.2;
  }
  .proof-card h3,
  .proof-card:first-child h3 {
    font-size: 28px;
  }
  .direction-story {
    padding: 48px 0;
    margin-bottom: 56px;
  }
  .direction-story-heading {
    margin-bottom: 36px;
  }
  .direction-story-heading h2 {
    font-size: 38px;
  }
  .direction-story-heading > p:last-child {
    font-size: 17px;
  }
  .direction-journey {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .direction-diagram {
    position: relative;
    top: auto;
  }
  .direction-diagram figcaption {
    font-size: 9px;
    line-height: 1.6;
    padding: 0 20px 20px;
  }
  .diagram-labels {
    padding: 20px;
    gap: 12px 20px;
  }
  .diagram-labels li {
    font-size: 11px;
    color: var(--muted);
  }
  .direction-stage {
    min-height: 0;
    padding: 32px 0 40px;
  }
  .direction-stage:last-child {
    min-height: 0;
  }
  .direction-stage h3 {
    font-size: 32px;
    max-width: 22ch;
  }
  .direction-stage > p:not(.eyebrow) {
    font-size: 16px;
  }
  .direction-system-link {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 24px;
    gap: 16px;
  }
  .direction-system-link > span {
    font-size: 9px;
    line-height: 1.6;
  }
  .stage-contract strong {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-image > img {
    transition: none;
  }
  .story-art-assembled,
  .story-art-digital {
    display: none;
  }
  .diagram-geometry,
  .diagram-nodes circle {
    transition: none;
  }
  .story-callouts > span {
    opacity: 1;
    transform: none;
  }
  .story-rings {
    display: none;
  }
}
.discipline-cinema{margin:0;min-height:460px;height:100%;aspect-ratio:auto;background:#0b1519}.discipline-cinema img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.discipline-cinema:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 30%),linear-gradient(90deg,var(--bg),transparent 20%)}.discipline-cinema figcaption{position:absolute;bottom:22px;left:24px;right:24px;font:10px/1.5 'Courier New',monospace;letter-spacing:1px;color:var(--muted);z-index:2}.page-kind-web .chapter-hero,.page-kind-electronics .chapter-hero{grid-template-columns:1fr 1fr}
.discipline-subject{margin:0;min-height:400px;aspect-ratio:10/7;background:radial-gradient(ellipse at 68% 48%,#1e3334,transparent 72%)}
.discipline-subject img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.discipline-subject figcaption{position:absolute;left:24px;right:24px;bottom:22px;font:10px/1.5 'Courier New',monospace;letter-spacing:1px;color:var(--muted)}
.direction-subject-fallback{display:block;width:100%;height:auto;transform:translateX(-8%);object-fit:contain}
.direction-story.live-story-ready.scene-frame-ready .direction-subject-fallback{display:none}
.direction-story.live-story-ready:has(.signal-webgl[data-model="robotics"]) .live-scene-host,
.direction-story.live-story-ready:has(.signal-webgl[data-model="web"]) .live-scene-host,
.direction-story.live-story-ready:has(.signal-webgl[data-model="software"]) .live-scene-host,
.direction-story.live-story-ready:has(.signal-webgl[data-model="infrastructure"]) .live-scene-host,
.direction-story.live-story-ready:has(.signal-webgl[data-model="vision"]) .live-scene-host{inset:10% 0 8% 40%;background:transparent}
@media(max-width:768px){
 .discipline-subject{min-height:270px;margin-top:24px}
 .discipline-subject img{width:120%;max-width:none;left:-20%}
}
@media(max-width:1100px){
 .direction-story.live-story-ready:has(.signal-webgl[data-model]) [data-direction-step]{left:24px;right:24px;width:auto;top:12%;transform:none}
 .direction-story.live-story-ready:has(.signal-webgl[data-model]) h3{font-size:34px;margin:14px 0}
 .direction-story.live-story-ready:has(.signal-webgl[data-model]) [data-direction-step]>p{font-size:13px;max-width:600px}
 .direction-story.live-story-ready:has(.signal-webgl[data-model]) .stage-contract{font-size:11px;margin-top:12px}
 .direction-story.live-story-ready:has(.signal-webgl[data-model="robotics"]) .live-scene-host,
 .direction-story.live-story-ready:has(.signal-webgl[data-model="web"]) .live-scene-host,
 .direction-story.live-story-ready:has(.signal-webgl[data-model="software"]) .live-scene-host,
 .direction-story.live-story-ready:has(.signal-webgl[data-model="infrastructure"]) .live-scene-host,
 .direction-story.live-story-ready:has(.signal-webgl[data-model="vision"]) .live-scene-host{inset:46% 0 5%}
}
@media(max-width:768px){.page-kind-web .chapter-hero,.page-kind-electronics .chapter-hero{grid-template-columns:1fr}.discipline-cinema{min-height:300px;margin-top:28px;max-width:none}.discipline-cinema figcaption{font-size:9px;left:20px;bottom:15px}}
/* Live Signal Core: scroll changes internal geometry and camera; copy stays in one place. */
.live-story-ready{height:460svh;min-height:3000px}.live-story-ready .story-visual{height:100svh;min-height:0;position:sticky;top:0;background:radial-gradient(ellipse at 72% 48%,#253b3b 0%,#101b20 42%,#0c1519 74%)}.live-scene-host{position:absolute;inset:0;z-index:1;pointer-events:none}.signal-webgl{width:100%;height:100%;display:block}.live-story-ready.scene-frame-ready .story-image,.live-story-ready .story-rings,.live-story-ready .story-callouts{display:none}.live-story-ready .story-chapters{position:absolute;inset:0;width:100%;max-width:none;margin:0;z-index:3;padding:0 56px;pointer-events:none}.live-story-ready .story-chapter{position:absolute;left:56px;top:50%;width:36%;max-width:520px;min-height:0;padding:0;transform:translateY(calc(-50% + 16px));opacity:0;visibility:hidden;transition:opacity .5s var(--ease-cinema),transform .7s var(--ease-cinema),visibility 0s .5s}.live-story-ready .story-chapter.is-active{opacity:1;visibility:visible;transform:translateY(-50%);transition-delay:0s}.live-story-ready .story-chapter h2{font-size:clamp(42px,4.7vw,70px);line-height:1.05}.live-story-ready .story-chapter p:not(.eyebrow){font-size:16px;max-width:34ch}.live-story-ready .story-chapter a{pointer-events:auto}.live-story-ready .story-coordinate{z-index:4}.live-story-ready .story-indicators{display:none}.act-navigation{position:absolute;right:56px;top:36px;z-index:5;display:flex;gap:8px}.act-navigation button{width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:50%;font:11px 'Courier New',monospace;color:var(--muted);cursor:pointer;transition:background .35s,color .35s,border-color .35s}.act-navigation button.is-current{background:var(--accent);color:var(--bg);border-color:var(--accent)}.act-navigation button:hover{border-color:var(--accent)}.live-story-ready .story-visual:after{content:'';position:absolute;left:56px;right:56px;bottom:72px;height:1px;background:var(--line);z-index:4}.live-story-ready .story-visual:before{content:'';position:absolute;left:56px;bottom:72px;width:calc((100% - 112px) * var(--act-progress,0));height:1px;background:var(--accent);z-index:5}
@media(max-width:1100px){.live-story-ready .story-chapter{left:32px;width:39%}.live-story-ready .story-chapter h2{font-size:48px}.act-navigation{right:32px}}
@media(max-width:768px){.live-story-ready{height:410svh;min-height:2600px;overflow:visible}.live-story-ready .story-visual{position:sticky;height:100svh;min-height:0}.live-scene-host{inset:26% -16% 0}.live-story-ready .story-chapters{padding:0 20px}.live-story-ready .story-chapter{left:20px;right:20px;top:12%;width:auto;max-width:none;min-height:0;border:0;transform:translateY(10px);padding:0}.live-story-ready .story-chapter.is-active{transform:translateY(0)}.live-story-ready .story-chapter h2{font-size:34px;margin-bottom:12px;max-width:90%}.live-story-ready .story-chapter h2 br{display:none}.live-story-ready .story-chapter .eyebrow{font-size:10px;margin-bottom:14px}.live-story-ready .story-chapter p:not(.eyebrow){font-size:13px;line-height:1.6;max-width:54ch;margin-bottom:10px}.live-story-ready .story-chapter .text-link{font-size:11px;padding:8px 0}.act-navigation{top:20px;right:20px;left:20px;justify-content:flex-end;gap:8px}.act-navigation button{width:36px;height:36px;font-size:10px}.live-story-ready .story-coordinate{bottom:20px;font-size:8px;line-height:1.5}.live-story-ready .story-visual:before{left:20px;bottom:56px;width:calc((100% - 40px) * var(--act-progress,0))}.live-story-ready .story-visual:after{left:20px;right:20px;bottom:56px}}
/* Direction close-ups use the same pinned optical stage as the complete mechanism. */
.direction-story.live-story-ready { position: relative; height: 460svh; min-height: 3000px; padding: 0; }
.direction-story.live-story-ready > .section-heading { display: none; }
.direction-story.live-story-ready .direction-journey { display: contents; }
.direction-story.live-story-ready .direction-diagram { position: sticky; top: 0; width: 100%; height: 100svh; margin: 0; padding: 0; max-width: none; border: 0; border-radius: 0; background: radial-gradient(ellipse at 66% 48%, #1c3034, #0b151a 70%); overflow: hidden; }
.direction-story.live-story-ready.scene-frame-ready .direction-diagram > svg,
.direction-story.live-story-ready .diagram-labels,
.direction-story.live-story-ready .direction-diagram > figcaption { display: none; }
.direction-story.live-story-ready .direction-stages { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.direction-story.live-story-ready [data-direction-step] { position: absolute; top: 50%; left: 56px; width: 34%; min-height: 0; padding: 0; border: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; pointer-events: none; }
.direction-story.live-story-ready [data-direction-step].is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.direction-story.live-story-ready h3 { font-size: clamp(36px, 4vw, 66px); line-height: 1.03; letter-spacing: -.055em; margin: 24px 0; }
.direction-story.live-story-ready .stage-contract { font-size: 12px; line-height: 1.6; margin-top: 24px; }
.direction-story.live-story-ready .act-navigation { z-index: 5; }
@media(max-width: 768px) {
 .direction-story.live-story-ready { height: 410svh; min-height: 2600px; }
 .direction-story.live-story-ready [data-direction-step] { left: 24px; right: 24px; width: auto; top: 12%; transform: none; }
 .direction-story.live-story-ready h3 { font-size: 34px; margin: 14px 0; }
 .direction-story.live-story-ready [data-direction-step] > p { font-size: 13px; max-width: 500px; }
 .direction-story.live-story-ready .stage-contract { font-size: 11px; margin-top: 12px; }
 .act-navigation button { width: 44px; height: 44px; }
 .intro-kicker, .hero-coordinate, .story-coordinate, .cinema-caption { font-size: 11px; letter-spacing: .1em; }
}
.act-navigation { left: 56px; right: 56px; display: flex; justify-content: space-between; gap: 8px; }
.act-checkpoint { display: flex; align-items: center; border-bottom: 1px solid #50696666; }
.act-navigation .act-checkpoint button { width: auto; min-height: 44px; height: auto; padding: 8px 10px; border: 0; border-radius: 0; font-size: 11px; letter-spacing: .02em; }
.act-checkpoint > a { padding: 10px; min-height: 44px; }
@media(max-width:768px) {
 .act-navigation { left: 16px; right: 16px; top: 12px; justify-content: flex-start; overflow-x: auto; }
 .act-checkpoint { flex: 0 0 auto; }
 .act-navigation .act-checkpoint button { font-size: 10px; }
}
.enquiry-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding-top: 120px; padding-bottom: 120px; border-top: 1px solid #536a6566; }
.enquiry-heading h2 { font-size: clamp(42px,5vw,76px); line-height: 1.04; letter-spacing: -.055em; margin: 30px 0; }
.enquiry-heading p { max-width: 420px; color: var(--muted); }
.enquiry-form { display: grid; gap: 24px; }
.enquiry-form label { display: grid; gap: 10px; font-size: 14px; }
.enquiry-form label > span, .form-note { color: var(--muted); font-size: 12px; }
.enquiry-form input:not([type=checkbox]), .enquiry-form textarea { width: 100%; border: 1px solid #526762; background: #142126; color: #ecf2ef; padding: 14px; border-radius: 0; font: inherit; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enquiry-form .form-consent { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.form-consent input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #8ae5bb; }
.form-consent a,.form-note a { text-decoration: underline; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-left: 2px solid #8ae5bb; background: #152d27; padding: 24px; margin-bottom: 24px; }
.form-error { border-color: #ffbb80; }
@media(max-width:768px){.enquiry-section{grid-template-columns:1fr;gap:36px;padding-top:72px;padding-bottom:72px}.form-pair{grid-template-columns:1fr}}
.system-checkpoints { position: sticky; top: 72px; z-index: 45; background: #101b20f5; border-bottom: 1px solid #50696666; backdrop-filter: blur(14px); }
.checkpoint-track { display: flex; justify-content: space-between; gap: 12px; overflow-x: auto; }
.system-checkpoint { display: flex; align-items: center; flex: 0 0 auto; }
.system-checkpoint a,.checkpoint-contact { padding: 14px 7px; font-size: 12px; min-height: 44px; white-space: nowrap; }
.system-checkpoint a[aria-current=step] { color: #8ae5bb; box-shadow: inset 0 -2px #8ae5bb; }
.signal-story.live-story-ready .act-navigation { display: none; }
@media(max-width:768px){.system-checkpoints{top:64px}.checkpoint-track{gap:12px;padding-left:16px;padding-right:16px}.system-checkpoint a,.checkpoint-contact{font-size:12px}}
.system-data-panel { position: absolute; z-index: 4; right: 6%; bottom: 15%; width: 330px; padding: 22px; background: #10252bea; border: 1px solid #779b8e88; backdrop-filter: blur(18px); box-shadow: 0 20px 80px #0005; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; pointer-events: none; }
.system-data-panel.is-visible { opacity: 1; transform: none; }
.data-panel-caption { display: block; font: 10px monospace; letter-spacing: .09em; color: #8ae5bb; margin-bottom: 16px; }
.data-panel-title { font-size: 18px; font-weight: 500; }
.data-table { margin-top: 18px; font: 11px monospace; }
.data-table > div { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0; border-top: 1px solid #68827866; opacity: .12; transform: translateX(8px); transition: opacity .3s, transform .3s; }
.data-table > div.is-written { opacity: 1; transform: none; }
.data-table b { font-weight: 400; color: #8ae5bb; }
.data-ui { display: none; margin-top: 20px; }
.is-interface .data-ui { display: grid; gap: 8px; }
.is-interface .data-table { display: none; }
.data-ui > strong { font-size: 56px; letter-spacing: -.07em; font-weight: 400; }
.data-ui small { font-size: 18px; letter-spacing: 0; }
.data-command { border-top: 1px solid #68827866; margin-top: 8px; padding-top: 14px; color: #8ae5bb; font-size: 12px; opacity: .3; }
.is-command .data-command { opacity: 1; }
@media(max-width:768px){.system-data-panel{right:20px;bottom:9%;width:245px;padding:14px}.data-panel-title{font-size:15px}.data-table{font-size:10px}.data-table>div{padding:8px 0}.data-panel-caption{font-size:9px}.data-ui>strong{font-size:42px}}
.system-checkpoints { top: 0; }
@media(max-width:768px){.system-checkpoints{top:0}}
.signal-story.live-story-ready .story-visual::after { content: ''; position: absolute; z-index: 2; inset: 0 40% 0 0; pointer-events: none; background: linear-gradient(90deg,#0d191ff2 0%,#0d191fe0 50%,#0d191f88 76%,transparent); }
@media(max-width:768px){.signal-story.live-story-ready .story-visual::after{inset:0 0 52% 0;background:linear-gradient(#0d191ff2 70%,transparent)}}
.form-pair { align-items: end; }
.signal-story.live-story-ready .story-visual::after { height: auto; }
.system-data-panel.is-visible { border-color: #8ae5bb99; box-shadow: 0 20px 80px #0005, 0 0 24px #8ae5bb17, inset 0 1px #b3ffdb22; }

/* Keep the whole company navigation visible above local page controls. */
:root { --site-header-height: 92px; --site-subnav-height: 0px; --admin-bar-height: 0px; }
html { scroll-padding-top: calc(var(--site-header-height) + var(--site-subnav-height) + var(--admin-bar-height)); }
[id] { scroll-margin-top: 24px; }
html:has(body.admin-bar) { --admin-bar-height: 32px; }
html:has(.system-checkpoints) { --site-subnav-height: 64px; }
.site-header { position: sticky; top: var(--admin-bar-height); z-index: 80; }
.system-checkpoints { top: calc(var(--site-header-height) + var(--admin-bar-height)); z-index: 45; }
.section-index { top: calc(var(--site-header-height) + var(--admin-bar-height) + 24px); }
.live-story-ready .story-visual,
.direction-story.live-story-ready .direction-diagram {
  top: calc(var(--site-header-height) + var(--site-subnav-height) + var(--admin-bar-height));
  height: calc(100svh - var(--site-header-height) - var(--site-subnav-height) - var(--admin-bar-height));
}
@media (max-width: 768px) {
  :root { --site-header-height: 76px; }
  html:has(body.admin-bar) { --admin-bar-height: 46px; }
  .site-header #primary-nav.is-open { max-height: calc(100svh - 100px); overflow-y: auto; }
}
@media print {
  html { scroll-padding-top: 0; }
  .site-header { position: static; }
}
.rail-controls{display:none}.rail-controls[hidden]{display:none!important}
@media(max-width:768px){
  .act-navigation,.checkpoint-track{scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:12px}
  .act-navigation::-webkit-scrollbar,.checkpoint-track::-webkit-scrollbar{display:none}
  .act-navigation.rail-overflow{right:100px;padding-inline:4px}
  .checkpoint-track.rail-overflow{width:calc(100% - 92px);margin-left:0;padding-right:16px}
  .rail-controls{position:absolute;right:16px;top:12px;display:flex;gap:2px;z-index:6;background:var(--bg)}
  .system-checkpoints>.rail-controls{top:5px}
  .rail-controls button{width:34px;min-height:44px;background:transparent;border:1px solid var(--line);color:var(--accent);font-size:24px;cursor:pointer}
  .rail-controls button:disabled{opacity:.28;cursor:default}
  .rail-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .rail-more-end{mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 20px),transparent)}
  .rail-more-start{mask-image:linear-gradient(to right,transparent,#000 16px,#000 100%)}
  .rail-more-start.rail-more-end{mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 20px),transparent)}
}

/* Reviewed content is rendered in the scene's normal reading flow. */
.scene-introduction {
  position: relative;
  z-index: 2;
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(64px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0 clamp(40px, 7vw, 112px);
  background: transparent;
}
.scene-introduction::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  width: 64px;
  height: 1px;
  background: var(--accent);
}
.scene-introduction > .eyebrow { grid-column: 1 / -1; margin: 0 0 28px; }
.scene-introduction h2 {
  font-size: clamp(32px, 3.7vw, 56px);
  letter-spacing: -.045em;
  line-height: 1.12;
  max-width: 15ch;
  margin: 0;
}
.scene-introduction-copy { max-width: 58ch; padding-top: 4px; }
.scene-introduction-copy p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 22px; }
.scene-introduction-copy p:last-child { margin-bottom: 0; }
.hero-cta-hint{font-size:13px;line-height:1.6;color:var(--muted);margin-top:20px;max-width:48ch}
.direction-story.live-story-ready [data-direction-step],.live-story-ready .story-chapter{transition:opacity .2s,visibility 0s}
.direction-story.live-story-ready [data-direction-step].is-active,.live-story-ready .story-chapter.is-active{transition:opacity .3s,visibility 0s}
@media(max-width:768px){
  .scene-introduction { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 64px; }
  .scene-introduction::before { top: 20px; width: 48px; }
  .scene-introduction > .eyebrow { margin-bottom: 22px; }
  .scene-introduction h2 { font-size: clamp(30px, 6.8vw, 40px); max-width: 18ch; margin-bottom: 28px; }
  .scene-introduction-copy { padding-top: 0; max-width: none; }
  .scene-introduction-copy p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
  .cinema-object { background-position: center 65%; background-size: 100% auto; }
  .hero-cta-hint { font-size: 12px; max-width: 40ch; }
}
.chapter-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.chapter-title{min-width:0}
.chapter-hero>.discipline-subject{margin:0;min-width:0;width:100%;max-width:100%;min-height:0;height:auto;aspect-ratio:10/7}
.page-kind-web .chapter-hero,.page-kind-electronics .chapter-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:768px){.chapter-hero,.page-kind-web .chapter-hero,.page-kind-electronics .chapter-hero{grid-template-columns:minmax(0,1fr)}.chapter-hero>.discipline-subject{margin-top:24px}}

/* HTML artwork stays visible until a nonzero-size WebGL frame has been drawn. */
.scene-frame-poster { display: block; width: 100%; height: 100%; }
.scene-frame-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.story-image .scene-frame-poster img { object-position: center; }
/* Bind the Home poster to its scene host regardless of saved CMS image markup. */
#signal-story .story-image { display: none; }
#signal-story .story-visual {
  background-color: #0c1519;
  background-image: url("art/scene-posters/system-desktop.png"), radial-gradient(ellipse at 72% 48%, #253b3b 0%, #101b20 42%, #0c1519 74%);
  background-position: center;
  background-size: contain, cover;
  background-repeat: no-repeat;
}
#signal-story.live-story-ready.scene-frame-ready .story-visual {
  background-image: radial-gradient(ellipse at 72% 48%, #253b3b 0%, #101b20 42%, #0c1519 74%);
  background-size: cover;
}
@media (max-width: 768px) {
  #signal-story:not(.scene-frame-ready) .story-visual {
    background-image: url("art/scene-posters/system-mobile.png"), radial-gradient(ellipse at 72% 48%, #253b3b 0%, #101b20 42%, #0c1519 74%);
  }
}
.direction-diagram > .scene-frame-poster { aspect-ratio: 16 / 9; height: auto; transform: none; }
.live-story-ready:not(.scene-frame-ready) .live-scene-host { visibility: hidden; }
.direction-story.live-story-ready:not(.scene-frame-ready) .direction-diagram > svg,
.direction-story.live-story-ready:not(.scene-frame-ready) .direction-subject-fallback {
  position: absolute;
  inset: 12% 0 8% 38%;
  width: 62%;
  height: 80%;
  transform: none;
  object-fit: contain;
}
.direction-story.live-story-ready:not(.scene-frame-ready) .direction-diagram > .scene-frame-poster { height: 80%; }
@media (max-width: 768px) {
  .direction-story.live-story-ready:not(.scene-frame-ready) .direction-diagram > svg,
  .direction-story.live-story-ready:not(.scene-frame-ready) .direction-subject-fallback {
    inset: 42% 0 10%;
    width: 100%;
    height: 48%;
  }
  .direction-story.live-story-ready:not(.scene-frame-ready) .direction-diagram > .scene-frame-poster { height: 48%; }
}
/* Each direction uses its own exported first 3D frame on the scene host. */
.direction-story.direction-electronics { --first-frame-desktop: url("art/scene-posters/electronics-desktop.png"); --first-frame-mobile: url("art/scene-posters/electronics-mobile.png"); }
.direction-story.direction-robotics { --first-frame-desktop: url("art/scene-posters/robotics-desktop.png"); --first-frame-mobile: url("art/scene-posters/robotics-mobile.png"); }
.direction-story.direction-software { --first-frame-desktop: url("art/scene-posters/software-desktop.png"); --first-frame-mobile: url("art/scene-posters/software-mobile.png"); }
.direction-story.direction-web { --first-frame-desktop: url("art/scene-posters/web-desktop.png"); --first-frame-mobile: url("art/scene-posters/web-mobile.png"); }
.direction-story.direction-vision { --first-frame-desktop: url("art/scene-posters/vision-desktop.png"); --first-frame-mobile: url("art/scene-posters/vision-mobile.png"); }
.direction-story.direction-infrastructure { --first-frame-desktop: url("art/scene-posters/infrastructure-desktop.png"); --first-frame-mobile: url("art/scene-posters/infrastructure-mobile.png"); }
.direction-story .direction-diagram > svg,
.direction-story .direction-diagram > img,
.direction-story .direction-diagram > picture { display: none; }
.direction-story:not(.live-story-ready) .direction-diagram { min-height: 320px; aspect-ratio: 16 / 9; }
.direction-story .direction-diagram::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-image: var(--first-frame-desktop);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.direction-story.live-story-ready .direction-diagram::before { inset: 12% 0 8% 38%; }
.direction-story.live-story-ready.scene-frame-ready .direction-diagram::before { display: none; }
@media (max-width: 768px) {
  .direction-story:not(.live-story-ready) .direction-diagram { aspect-ratio: 39 / 56; }
  .direction-story .direction-diagram::before { background-image: var(--first-frame-mobile); }
  .direction-story.live-story-ready .direction-diagram::before { inset: 42% 0 10%; }
}

/* Contact details, local verification and browser choices share the page rhythm. */
.enquiry-heading .telegram-compact { margin: 36px 0 28px; padding: 24px 0; border: 0; border-top: 1px solid rgba(181, 206, 190, .2); border-bottom: 1px solid rgba(181, 206, 190, .2); }
.company-contacts { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 1fr; gap: 20px; margin: 40px 0; font-style: normal; font-size: 14px; line-height: 1.7; color: #ced8d2; }
.company-contacts p { margin: 0; }
.company-contacts span { display: block; font-size: 12px; color: #9dadab; }
.company-contacts a { color: #e8f0e8; text-underline-offset: 4px; }
.company-name { font-weight: 600; }
.company-contacts-compact { display: block; margin: 28px 0 0; }
.company-contacts-compact p + p { margin-top: 12px; }
.enquiry-heading .company-contacts p { font-size: 14px; line-height: 1.7; max-width: none; }
.form-captcha { display: grid; gap: 12px; min-width: 0; }
/* ALTCHA v3 reads *-content colors inside its component; host variables inherit there. */
altcha-widget {
  display: block;
  color: #ecf2ef;
  color-scheme: dark;
  --altcha-color-base: #142126;
  --altcha-color-base-content: #ecf2ef;
  --altcha-color-neutral: #78918a;
  --altcha-color-neutral-content: #d4dfd9;
  --altcha-color-primary: #b7cf91;
  --altcha-color-primary-content: #142126;
  --altcha-color-success: #b7cf91;
  --altcha-color-success-content: #142126;
  --altcha-color-error: #8f302b;
  --altcha-color-error-content: #fff3ef;
  --altcha-border-color: #78918a;
  --altcha-border-radius: 4px;
  --altcha-checkbox-border-color: #9dadab;
  --altcha-checkbox-outline-color: #b7cf91;
  --altcha-spinner-color: #ecf2ef;
  --altcha-input-background-color: #142126;
  --altcha-input-color: #ecf2ef;
}
.form-captcha .captcha-refresh { justify-self: start; border: 0; padding: 4px 0; background: none; color: #b7cf91; font: inherit; font-size: 13px; cursor: pointer; }
.enquiry-submit:disabled { opacity: .5; cursor: not-allowed; }
.cookie-notice[hidden] { display: none; }
.cookie-notice { position: fixed; z-index: 120; inset: auto 24px 24px; max-width: 960px; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px; border: 1px solid #526762; border-radius: 8px; background: #142126; color: #ecf2ef; box-shadow: 0 12px 48px rgba(0, 0, 0, .32); }
.cookie-notice h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.cookie-notice p { margin: 0; max-width: 78ch; color: #c5d0cc; font-size: 14px; line-height: 1.6; }
.cookie-notice a { color: #d9e8cf; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-actions .button { min-height: 44px; padding: 12px 18px; font-size: 13px; }
.cookie-actions .button-secondary { background: transparent; border: 1px solid #78918a; color: #ecf2ef; }
.cookie-settings { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-bottom { flex-wrap: wrap; gap: 16px 24px; }
.cookie-noscript { padding: 12px 24px; color: #c5d0cc; font-size: 12px; }
.rg-number-control { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; width: 100%; min-width: 0; border: 1px solid #526762; background: #142126; color: #ecf2ef; }
.rg-number-control input[type="number"] { appearance: textfield; -moz-appearance: textfield; min-width: 0; width: 100%; border: 0; border-radius: 0; padding: 12px 4px; background: transparent; color: inherit; text-align: center; font: inherit; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.rg-number-control button { display: grid; place-items: center; min-height: 44px; border: 0; background: transparent; color: #b7cf91; font: inherit; font-size: 22px; cursor: pointer; }
.rg-number-control button:first-child { border-right: 1px solid rgba(82, 103, 98, .65); }
.rg-number-control button:last-child { border-left: 1px solid rgba(82, 103, 98, .65); }
.rg-number-control button:hover:not(:disabled) { background: rgba(183, 207, 145, .12); }
.rg-number-control button:disabled { opacity: .35; cursor: default; }
.rg-number-control:focus-within { outline: 2px solid #b7cf91; outline-offset: 3px; }
.rg-number-control input:focus { outline: none; }
@media (max-width: 1000px) { .company-contacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .enquiry-heading .telegram-compact { margin-top: 28px; padding: 20px 0; }
  .company-contacts { grid-template-columns: 1fr; gap: 16px; margin: 32px 0; }
  .company-contacts-compact { margin-bottom: 0; }
  .cookie-notice { inset: auto 12px 12px; padding: 18px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .cookie-notice h2 { font-size: 18px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr; }
  .cookie-actions .button { justify-content: center; }
}