@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --font-geist-sans: "Geist";
  --font-geist-mono: "Geist Mono";
  --black: #08090b;
  --white: #f7f6f2;
  --navy: #172b61;
  --red: #d93232;
  --muted: #686b70;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-geist-sans), Arial, sans-serif;
}
.shell { width: min(100% - 56px, 1480px); margin-inline: auto; }
.mercy-site { overflow: hidden; }

.opening {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.93%, rgba(8,9,11,.055) 50%, transparent 50.07%),
    linear-gradient(rgba(8,9,11,.035) 1px, transparent 1px),
    var(--white);
  background-size: 100% 100%, 100% 84px, auto;
}
.opening::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 49%, rgba(23,43,97,.07), transparent 30%);
}

.site-header {
  position: relative;
  z-index: 5;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(8,9,11,.18);
}
.brand { display: inline-flex; align-items: center; }
.brand-wordmark img { display: block; width: 124px; height: auto; }
.brand-inverse { gap: 9px; }
.brand-inverse span { color: #050505; font-size: 22px; font-weight: 780; letter-spacing: -.055em; }
.brand-inverse img { display: block; width: 35px; height: auto; }
.brand-inverse span { color: var(--white); }
.header-status { display: flex; gap: clamp(20px, 3.6vw, 58px); }
.header-status span {
  position: relative;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #484b50;
}
.header-status span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: clamp(-29px, -1.8vw, -10px);
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--red);
}

.opening-field {
  min-height: calc(100svh - 214px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.opening-copy { padding: 64px 0 54px; }
.overline, .section-code {
  margin: 0 0 28px;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
h1 {
  margin: 0;
  font-size: clamp(72px, 9.4vw, 150px);
  font-weight: 630;
  line-height: .82;
  letter-spacing: -.083em;
}
h1 em { color: var(--navy); font-style: normal; position: relative; }
h1 em::after {
  content: "";
  position: absolute;
  left: .04em;
  bottom: -.08em;
  width: 80%;
  height: .035em;
  background: var(--red);
  transform: rotate(-3deg);
  transform-origin: left;
}
.opening-statement {
  max-width: 570px;
  margin: 48px 0 0;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.52;
  letter-spacing: -.025em;
  color: #5c5f64;
}

.opening-mark {
  position: relative;
  justify-self: center;
  width: min(47vw, 680px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.opening-mark img {
  width: 105%;
  height: auto;
}

.chapter-index {
  position: relative;
  z-index: 4;
  min-height: 106px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(8,9,11,.18);
}
.chapter-index div { display: flex; align-items: center; gap: 18px; border-right: 1px solid rgba(8,9,11,.12); }
.chapter-index div:first-child { border-left: 1px solid rgba(8,9,11,.12); padding-left: 20px; }
.chapter-index div:not(:first-child) { padding-left: 20px; }
.chapter-index b { font-family: var(--font-geist-mono), monospace; font-size: 9px; font-weight: 400; color: var(--red); }
.chapter-index span { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }

.statement { background: #0a0b0d; color: var(--white); padding: clamp(120px, 16vw, 245px) 0; }
.statement-grid { display: grid; grid-template-columns: .3fr 1.15fr .55fr; gap: 48px; align-items: end; }
.statement .section-code { align-self: start; }
.statement h2 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(52px, 6.8vw, 106px);
  font-weight: 560;
  line-height: .94;
  letter-spacing: -.067em;
}
.statement-grid > p:last-child { margin: 0 0 5px; font-size: 15px; line-height: 1.72; color: rgba(247,246,242,.58); }

.chapter { position: relative; min-height: 100svh; overflow: hidden; }
.chapter-frame { position: relative; z-index: 3; min-height: 100svh; display: grid; grid-template-rows: 112px 1fr 104px; }
.chapter-topline {
  display: grid;
  grid-template-columns: .25fr 1fr .5fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid rgba(8,9,11,.19);
}
.chapter-topline p { margin: 0; font-family: var(--font-geist-mono), monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(8,9,11,.56); }
.chapter-topline p:nth-child(2) { color: var(--black); }
.chapter-topline p:last-child { text-align: right; }
.chapter-topline.light { border-color: rgba(247,246,242,.22); }
.chapter-topline.light p { color: rgba(247,246,242,.52); }
.chapter-topline.light p:nth-child(2) { color: var(--white); }
.chapter-kicker { margin: 0 0 24px; font-family: var(--font-geist-mono), monospace; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.chapter h2 {
  margin: 0;
  font-size: clamp(64px, 8vw, 126px);
  font-weight: 590;
  line-height: .88;
  letter-spacing: -.075em;
}
.chapter h2 em { font-style: normal; }
.chapter-description { max-width: 600px; margin: 42px 0 0; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.6; letter-spacing: -.022em; }

.construction { background: #e4e0d7; color: var(--black); }
.construction::after {
  content: "CONSTRUCTION";
  position: absolute;
  left: -1.5vw;
  bottom: -3.5vw;
  font-size: clamp(120px, 16vw, 270px);
  line-height: .8;
  font-weight: 750;
  letter-spacing: -.085em;
  color: rgba(8,9,11,.035);
  white-space: nowrap;
}
.construction-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,1fr); }
.construction-grid i { border-right: 1px solid rgba(8,9,11,.085); }
.construction-grid i:first-child { border-left: 1px solid rgba(8,9,11,.085); }
.construction-grid::before, .construction-grid::after { content: ""; position: absolute; width: 1px; height: 150%; top: -25%; left: 72%; background: rgba(217,50,50,.28); transform: rotate(38deg); }
.construction-grid::after { left: 78%; background: rgba(23,43,97,.18); }
.chapter-center { align-self: center; padding: 60px 0; }
.construction .chapter-kicker { color: var(--red); }
.construction h2 { max-width: 1120px; }
.construction h2 em { color: var(--navy); }
.chapter-footer { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(8,9,11,.19); }
.chapter-footer p { margin: 0; display: flex; align-items: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border-right: 1px solid rgba(8,9,11,.13); }
.chapter-footer p:not(:first-child) { padding-left: 24px; }

.government { background: #08090b; color: var(--white); }
.government::after {
  content: "GOVERNMENT";
  position: absolute;
  left: -1vw;
  bottom: -3vw;
  font-size: clamp(110px, 15vw, 250px);
  line-height: .8;
  font-weight: 750;
  letter-spacing: -.085em;
  color: rgba(247,246,242,.025);
  white-space: nowrap;
}
.gov-seal { position: absolute; width: min(65vw, 900px); aspect-ratio: 1; border: 1px solid rgba(247,246,242,.09); border-radius: 50%; right: -11vw; top: 50%; transform: translateY(-50%); display: grid; place-items: center; }
.gov-seal::before { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(217,50,50,.28); border-radius: 50%; }
.gov-seal::after { content: ""; position: absolute; inset: 30%; border: 1px solid rgba(247,246,242,.08); transform: rotate(45deg); }
.gov-seal span { font-family: var(--font-geist-mono), monospace; font-size: clamp(76px, 11vw, 170px); letter-spacing: -.08em; color: rgba(247,246,242,.055); }
.government-copy { align-self: center; padding: 60px 0; }
.government .chapter-kicker { color: #e04a49; }
.government-copy h2 { max-width: 950px; }
.government-copy h2 em { color: #e04a49; }
.cage-block { position: absolute; right: 0; bottom: 135px; width: 300px; padding: 25px 0; border-top: 1px solid rgba(247,246,242,.24); border-bottom: 1px solid rgba(247,246,242,.24); }
.cage-block p { margin: 0 0 12px; font-family: var(--font-geist-mono), monospace; font-size: 9px; letter-spacing: .2em; color: rgba(247,246,242,.5); }
.cage-block strong { display: block; font-size: 64px; line-height: 1; letter-spacing: -.06em; }
.cage-block span { display: block; margin-top: 13px; font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: .13em; color: rgba(247,246,242,.47); }

.aviation { background: var(--navy); color: var(--white); }
.aviation::after { content: "03"; position: absolute; right: -3vw; bottom: -11vw; font-size: min(54vw, 760px); line-height: .8; font-weight: 760; color: rgba(247,246,242,.027); letter-spacing: -.09em; }
.runway { position: absolute; inset: 0; opacity: .55; perspective: 700px; }
.runway-center { position: absolute; left: 50%; top: 20%; width: 3px; height: 78%; background: repeating-linear-gradient(to bottom, rgba(247,246,242,.54) 0 25px, transparent 25px 62px); transform: perspective(600px) rotateX(62deg); transform-origin: top; }
.runway-edge { position: absolute; top: 18%; width: 1px; height: 125%; background: linear-gradient(rgba(247,246,242,.45), transparent 72%); transform-origin: top; }
.runway-edge-left { left: 50%; transform: rotate(25deg); }
.runway-edge-right { right: 50%; transform: rotate(-25deg); }
.aviation-copy { align-self: center; padding: 60px 0; position: relative; z-index: 2; }
.aviation .chapter-kicker { color: #ff817d; }
.aviation-copy h2 { max-width: 1050px; }
.aviation-copy h2 em { color: #ff817d; }
.aviation .chapter-description { color: rgba(247,246,242,.65); }
.aviation-readout { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; border-top: 1px solid rgba(247,246,242,.22); }
.aviation-readout span { font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: .15em; color: rgba(247,246,242,.6); }
.aviation-readout span:nth-child(2) { text-align: center; }
.aviation-readout span:last-child { text-align: right; }

.technology { background: var(--white); color: var(--black); }
.technology::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(var(--red) 0 50%, var(--navy) 50%); }
.tech-matrix { position: absolute; right: -3vw; top: 12%; width: min(48vw, 700px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(6,1fr); grid-template-rows: repeat(4,1fr); transform: rotate(-7deg); }
.tech-matrix i { border: 1px solid rgba(8,9,11,.095); margin: 4px; }
.tech-matrix i:nth-child(3n) { background: rgba(23,43,97,.05); }
.tech-matrix i:nth-child(7n) { background: rgba(217,50,50,.075); }
.technology-copy { align-self: center; padding: 60px 0; position: relative; z-index: 2; }
.technology .chapter-kicker { color: var(--red); }
.technology-copy h2 { max-width: 1050px; }
.technology-copy h2 em { color: var(--navy); }
.technology .chapter-description { color: #62656a; }
.technology-foot { display: grid; grid-template-columns: repeat(4,1fr); align-items: center; border-top: 1px solid rgba(8,9,11,.19); }
.technology-foot span { font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(8,9,11,.58); }
.technology-foot span:not(:first-child) { text-align: center; }
.technology-foot span:last-child { text-align: right; }

.closing { position: relative; overflow: hidden; min-height: 92svh; background: var(--red); color: var(--white); }
.closing-watermark { position: absolute; right: -2vw; top: 50%; width: min(57vw, 820px); aspect-ratio: 1; transform: translateY(-50%); display: grid; place-items: center; opacity: .13; }
.closing-watermark img { width: 74%; height: auto; filter: grayscale(1) brightness(7); }
.closing-layout { position: relative; z-index: 2; min-height: 92svh; display: grid; grid-template-columns: .28fr 1.25fr .47fr; gap: 46px; align-items: center; }
.closing .section-code { align-self: start; margin-top: 112px; color: rgba(255,255,255,.75); }
.closing h2 { margin: 0; font-size: clamp(68px, 8.5vw, 134px); font-weight: 630; line-height: .84; letter-spacing: -.078em; }
.closing h2 em { color: var(--navy); font-style: normal; }
.closing-status { align-self: end; margin-bottom: 110px; display: flex; flex-direction: column; gap: 12px; }
.closing-status span { font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.site-footer { background: #08090b; color: var(--white); }
.footer-grid { min-height: 120px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 30px; }
.footer-grid p { margin: 0; font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: .14em; color: rgba(247,246,242,.45); }
.footer-grid p:nth-child(2) { text-align: center; }
.footer-grid p:last-child { text-align: right; }

@media (max-width: 820px) {
  .shell { width: min(100% - 34px, 1480px); }
  .site-header { height: 84px; }
  .brand-wordmark img { width: 118px; }
  .brand-inverse span { font-size: 20px; }
  .brand-inverse img { width: 31px; }
  .header-status { gap: 0; }
  .header-status span { display: none; }
  .header-status span:last-child { display: block; }
  .opening-field { min-height: auto; grid-template-columns: 1fr; padding: 86px 0 60px; }
  .opening-copy { padding: 0; }
  h1 { font-size: clamp(68px, 20vw, 104px); }
  .opening-statement { margin-top: 38px; }
  .opening-mark { width: 100%; max-width: 480px; margin-top: -12px; }
  .chapter-index { grid-template-columns: repeat(2, 1fr); padding-bottom: 18px; }
  .chapter-index div { min-height: 72px; border-bottom: 1px solid rgba(8,9,11,.12); }
  .statement { padding: 100px 0; }
  .statement-grid { grid-template-columns: 1fr; gap: 34px; }
  .chapter-frame { grid-template-rows: 86px 1fr auto; }
  .chapter-topline { grid-template-columns: .5fr 1fr; }
  .chapter-topline p:last-child { display: none; }
  .chapter-topline p:nth-child(2) { text-align: right; }
  .chapter h2 { font-size: clamp(58px, 17vw, 90px); }
  .chapter-center, .government-copy, .aviation-copy, .technology-copy { padding: 80px 0; }
  .chapter-footer { min-height: 150px; grid-template-columns: repeat(2,1fr); }
  .chapter-footer p { min-height: 70px; border-bottom: 1px solid rgba(8,9,11,.13); }
  .cage-block { position: relative; right: auto; bottom: auto; width: 100%; margin-bottom: 38px; }
  .gov-seal { width: 120vw; right: -65vw; }
  .aviation-readout, .technology-foot { min-height: 126px; grid-template-columns: repeat(2,1fr); gap: 20px; padding: 22px 0; }
  .aviation-readout span:nth-child(2), .aviation-readout span:last-child, .technology-foot span:not(:first-child), .technology-foot span:last-child { text-align: left; }
  .tech-matrix { width: 100vw; right: -42vw; top: 20%; opacity: .75; }
  .closing-layout { min-height: 90svh; grid-template-columns: 1fr; align-content: center; gap: 32px; }
  .closing .section-code { align-self: auto; margin: 0; }
  .closing-status { align-self: auto; margin: 30px 0 0; }
  .closing-watermark { width: 120vw; right: -68vw; }
  .footer-grid { min-height: 170px; grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .footer-grid p:nth-child(2), .footer-grid p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}