:root {
  --navy: #081d2a;
  --navy-soft: #102f40;
  --ink: #101820;
  --paper: #f3f0e9;
  --white: #fff;
  --orange: #e0612d;
  --scene-accent: #e0612d;
  --line: rgba(16, 24, 32, 0.22);
  --muted: #65727a;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Libre Franklin", Arial, sans-serif;
  --mono: "DM Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 3.2vw;
  border-bottom: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  background: rgba(8, 29, 42, .92);
}
.brand, .header-tools, .site-header nav { display: flex; align-items: center; }
.brand { gap: 11px; font-weight: 700; letter-spacing: .12em; }
.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: var(--white);
  background: var(--orange);
  font-family: var(--serif);
  font-size: 24px;
}
.site-header nav { gap: 32px; font-size: 12px; }
.site-header nav a, .header-link { border-bottom: 1px solid transparent; padding: 8px 0; }
.site-header nav a:hover, .header-link:hover { border-color: currentColor; }
.header-tools { justify-content: flex-end; gap: 20px; }
.icon-button {
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.45);
  background: transparent;
  cursor: pointer;
}
.sound-icon, .header-link { font: 500 10px var(--mono); letter-spacing: .04em; }

.home-hero {
  position: relative;
  min-height: 830px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.home-hero-image, .hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-hero-image {
  object-fit: cover;
  object-position: center;
  transition: opacity .36s ease, transform 10s ease;
}
.home-hero-image.is-changing { opacity: .15; }
.home-hero:hover .home-hero-image { transform: scale(1.015); }
.hero-overlay { background: rgba(5, 24, 35, .48); }
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 78vw);
  padding: 150px 0 80px 6vw;
}
.kicker {
  margin: 0 0 24px;
  color: #dbe8ec;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .09em;
}
.kicker.dark { color: var(--orange); }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
h1 { font-size: clamp(72px, 8.2vw, 132px); line-height: .79; }
h1 em, h2 em { color: var(--scene-accent); font-weight: 400; }
.hero-intro {
  width: min(590px, 90%);
  margin: 34px 0;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
}
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  font: 500 11px var(--mono);
}
.arrow-link span { font-size: 18px; transition: transform .2s ease; }
.arrow-link:hover span { transform: translateX(6px); }
.scene-console {
  position: absolute;
  z-index: 3;
  right: 3vw;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  background: rgba(8, 29, 42, .9);
}
.scene-console > span { font: 500 9px var(--mono); color: #b7c9d0; }
.scene-console > div { display: flex; }
.scene-button {
  min-width: 54px;
  min-height: 32px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.32);
  background: transparent;
  cursor: pointer;
  font: 500 9px var(--mono);
}
.scene-button.is-active { background: var(--scene-accent); border-color: var(--scene-accent); }

.metric-band {
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  min-height: 190px;
  color: var(--white);
  background: var(--navy);
}
.metric-intro {
  padding: 40px 6vw;
  border-right: 1px solid rgba(255,255,255,.25);
}
.metric-intro span { color: #8fa7b2; font: 500 10px var(--mono); }
.metric-intro p { max-width: 390px; margin: 22px 0 0; font-family: var(--serif); font-size: 25px; line-height: 1.15; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.metrics > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px 2vw;
  border-right: 1px solid rgba(255,255,255,.25);
}
.metrics strong { font: 400 46px var(--serif); }
.metrics span { margin-top: 12px; color: #adc0c7; font: 500 9px var(--mono); }

.editorial-section {
  display: grid;
  grid-template-columns: 160px minmax(340px, .9fr) minmax(460px, 1.2fr);
  gap: 4vw;
  padding: 120px 5vw;
}
.section-number { color: var(--muted); font: 500 10px var(--mono); }
.section-lead h2, .evidence-copy h2, .boundary-section h2 {
  font-size: clamp(52px, 5.2vw, 82px);
  line-height: .94;
}
.large-copy { margin: 0 0 44px; font: 400 clamp(25px, 2.3vw, 36px)/1.23 var(--serif); }
.pipeline { display: flex; flex-wrap: wrap; gap: 13px; padding: 24px 0; border-block: 1px solid var(--line); font: 500 10px var(--mono); }
.pipeline i { color: var(--orange); font-style: normal; }
.boundary-note { display: grid; gap: 8px; margin-top: 38px; padding-left: 18px; border-left: 4px solid var(--orange); }
.boundary-note strong { font: 500 11px var(--mono); }
.boundary-note span { color: var(--muted); font-size: 14px; }

.agents-section { padding: 115px 5vw; color: var(--white); background: var(--navy); }
.section-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 8vw;
  margin-bottom: 64px;
}
.section-heading h2 { font-size: clamp(58px, 6.5vw, 98px); line-height: .88; }
.section-heading > p { max-width: 470px; margin: 0; color: #c0d0d6; font-size: 18px; line-height: 1.6; }
.agent-portal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.3);
  border-left: 1px solid rgba(255,255,255,.3);
}
.agent-portal-card {
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,.3);
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: background .2s ease;
}
.agent-portal-card:hover { background: var(--agent); }
.agent-portrait { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; background: #173645; }
.agent-portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.agent-portal-card:hover img { transform: scale(1.035); }
.agent-portrait > span {
  position: absolute;
  left: 16px;
  top: 16px;
  min-width: 34px;
  padding: 8px;
  text-align: center;
  background: var(--navy);
  font: 500 10px var(--mono);
}
.agent-summary { min-height: 270px; display: flex; flex-direction: column; padding: 25px 22px; }
.agent-summary p { margin: 0 0 12px; color: #a9bec6; font: 500 9px var(--mono); }
.agent-summary h3 { margin: 0; font: 400 28px/1.04 var(--serif); }
.agent-summary > span { margin: 20px 0; color: #c4d2d7; font-size: 13px; line-height: 1.55; }
.agent-summary strong { margin-top: auto; font: 500 9px var(--mono); }

.evidence-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 820px; }
.evidence-image-wrap { position: relative; min-height: 760px; overflow: hidden; }
.evidence-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.evidence-image-wrap span {
  position: absolute;
  left: 28px;
  bottom: 28px;
  padding: 12px;
  color: var(--white);
  background: var(--navy);
  font: 500 9px var(--mono);
}
.evidence-copy { padding: 90px 6vw; }
.evidence-list { margin-top: 50px; }
.evidence-list article {
  display: grid;
  grid-template-columns: 46px 150px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.evidence-list article > span { color: var(--orange); font: 500 10px var(--mono); }
.evidence-list h3 { margin: 0; font: 500 16px var(--sans); }
.evidence-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.test-signal { display: flex; align-items: baseline; gap: 18px; margin-top: 42px; }
.test-signal strong { font: 400 50px var(--serif); }
.test-signal span { font: 500 10px var(--mono); }

.boundary-section { padding: 110px 6vw; border-top: 1px solid var(--line); }
.boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 65px; border-top: 1px solid var(--line); }
.boundary-grid > div { min-height: 250px; padding: 30px 30px 30px 0; border-right: 1px solid var(--line); }
.boundary-grid > div:not(:first-child) { padding-left: 30px; }
.boundary-grid span { color: var(--orange); font: 500 10px var(--mono); }
.boundary-grid p { margin: 22px 0 0; font: 400 23px/1.3 var(--serif); }

footer {
  min-height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 5vw;
  color: var(--white);
  background: var(--navy);
}
footer > div { display: flex; align-items: center; gap: 12px; }
footer p, footer > span { font: 500 10px var(--mono); }

/* Agent operating pages */
.agent-page { background: var(--paper); }
.agent-page .site-header { position: absolute; }
.agent-hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  color: var(--white);
  background: var(--navy);
}
.agent-hero-copy { display: flex; justify-content: flex-end; flex-direction: column; padding: 145px 5vw 80px; }
.agent-index { color: var(--agent-color); font: 500 12px var(--mono); }
.agent-hero h1 { margin-top: 24px; font-size: clamp(65px, 7vw, 110px); line-height: .82; }
.agent-hero h1 em { color: var(--agent-color); }
.agent-hero-copy > p { max-width: 580px; margin: 30px 0 0; color: #d4e0e4; font-size: 19px; line-height: 1.55; }
.agent-hero-image { min-height: 690px; overflow: hidden; }
.agent-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.agent-contract { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.contract-cell { min-height: 230px; padding: 45px 5vw; border-right: 1px solid var(--line); }
.contract-cell span { color: var(--agent-color); font: 500 10px var(--mono); }
.contract-cell p { margin: 22px 0 0; font: 400 28px/1.25 var(--serif); }
.agent-detail { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; padding: 100px 6vw; }
.agent-detail h2 { font-size: clamp(48px, 5vw, 76px); line-height: .95; }
.agent-question { margin-top: 35px; padding-left: 20px; border-left: 4px solid var(--agent-color); font: 400 25px/1.3 var(--serif); }
.subagent-list, .capability-list { list-style: none; margin: 0; padding: 0; }
.subagent-list li {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  min-height: 84px;
  border-top: 1px solid var(--line);
}
.subagent-list span { color: var(--agent-color); font: 500 10px var(--mono); }
.subagent-list strong { font: 500 17px var(--sans); }
.capability-columns { display: grid; grid-template-columns: 1fr 1fr; margin-top: 70px; }
.capability-column { padding-right: 3vw; }
.capability-column + .capability-column { padding-left: 3vw; border-left: 1px solid var(--line); }
.capability-column h3 { color: var(--agent-color); font: 500 10px var(--mono); }
.capability-list li { padding: 15px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.agent-navigation { display: grid; grid-template-columns: 1fr 1fr; color: var(--white); background: var(--navy); }
.agent-navigation a { min-height: 170px; display: flex; justify-content: center; flex-direction: column; padding: 30px 6vw; border-right: 1px solid rgba(255,255,255,.25); }
.agent-navigation span { color: #9fb3bc; font: 500 9px var(--mono); }
.agent-navigation strong { margin-top: 14px; font: 400 28px var(--serif); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .metric-band { grid-template-columns: 1fr; }
  .metric-intro { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .editorial-section { grid-template-columns: 80px 1fr; }
  .system-copy { grid-column: 2; }
  .agent-portal-grid { grid-template-columns: repeat(2, 1fr); }
  .evidence-section { grid-template-columns: 1fr; }
  .evidence-image-wrap { min-height: 620px; }
}

@media (max-width: 680px) {
  .site-header { height: 62px; padding: 0 18px; }
  .header-link { display: none; }
  .home-hero { min-height: 720px; align-items: flex-end; }
  .home-hero-image { object-position: 52% center; }
  .hero-copy { width: 100%; padding: 105px 20px 140px; }
  h1 { font-size: 65px; line-height: .82; }
  .hero-intro { font-size: 15px; }
  .scene-console { left: 20px; right: auto; bottom: 28px; max-width: calc(100vw - 40px); gap: 10px; }
  .scene-console > span { display: none; }
  .scene-button { min-width: 48px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics > div { min-height: 130px; }
  .editorial-section { grid-template-columns: 1fr; padding: 78px 20px; }
  .section-number { margin-bottom: 18px; }
  .system-copy { grid-column: auto; }
  .section-lead h2, .evidence-copy h2, .boundary-section h2 { font-size: 50px; }
  .large-copy { margin-top: 38px; font-size: 26px; }
  .agents-section { padding: 78px 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 32px; }
  .section-heading h2 { font-size: 58px; }
  .agent-portal-grid { grid-template-columns: 1fr; }
  .agent-summary { min-height: 220px; }
  .evidence-image-wrap { min-height: 470px; }
  .evidence-copy { padding: 75px 20px; }
  .evidence-list article { grid-template-columns: 38px 1fr; }
  .evidence-list p { grid-column: 2; }
  .boundary-section { padding: 78px 20px; }
  .boundary-grid { grid-template-columns: 1fr; }
  .boundary-grid > div, .boundary-grid > div:not(:first-child) { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  footer { align-items: flex-start; flex-direction: column; gap: 25px; }
  .agent-hero { grid-template-columns: 1fr; }
  .agent-hero-copy { min-height: 570px; padding: 130px 20px 55px; }
  .agent-hero h1 { font-size: 66px; }
  .agent-hero-image { min-height: 470px; }
  .agent-contract { grid-template-columns: 1fr; }
  .contract-cell { min-height: auto; padding: 38px 20px; border-bottom: 1px solid var(--line); }
  .agent-detail { grid-template-columns: 1fr; padding: 78px 20px; }
  .capability-columns { grid-template-columns: 1fr; }
  .capability-column + .capability-column { margin-top: 45px; padding-left: 0; border-left: 0; }
  .agent-navigation strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}