.kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--red); margin-bottom: 22px; }

.opener {
  position: relative; height: 64vh; min-height: 480px; max-height: 720px;
  overflow: hidden; background: var(--black); display: flex; align-items: center;
}
.opener-media { position: absolute; inset: 0; }
.opener-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.opener-scrim {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.42) 55%, rgba(0,0,0,.55));
}
.opener-grid {
  position: absolute; inset: 0; z-index: 10; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 50px 50px;
}
.opener-content { position: relative; z-index: 20; padding-top: 40px; }
.crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 12px; color: rgba(255,255,255,.6); }
.crumb a { transition: color .3s; }
.crumb a:hover { color: var(--red); }
.crumb span[aria-hidden] { color: rgba(255,255,255,.28); }
.opener-kicker {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--red);
  letter-spacing: .5em; text-transform: uppercase; margin-bottom: 16px;
}
.opener-title {
  font-size: clamp(42px, 6.9vw, 102px); line-height: .9; font-weight: 900;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--white);
  white-space: nowrap;
}
.opener-title .line { display: block; }
.opener-line {
  margin-top: 26px; max-width: 26em;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; color: rgba(255,255,255,.82);
}

.crumb, .opener-kicker, .opener-title .line, .opener-line { animation: rise 1s cubic-bezier(.16,1,.3,1) both; }
.opener-title .line-outline { animation-delay: .12s; }
.opener-line { animation-delay: .22s; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

.infra { padding-block: var(--sect); background: var(--white); }
.infra-inner { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: stretch; }
.infra-copy h2 {
  font-size: clamp(34px, 3.6vw, 52px); font-weight: 900; text-transform: uppercase;
  line-height: .95; letter-spacing: -.03em; color: var(--slate-900);
}
.infra-copy h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--black); }
.infra-copy p { margin-top: 22px; font-size: 16px; line-height: 1.68; color: var(--slate-600); max-width: 34em; }
.infra-copy .kicker { color: var(--red); }
.infra-copy h2 + p { margin-top: 32px; }
.infra-media { position: relative; border: 1px solid var(--slate-200); overflow: hidden; }
.infra-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cc { position: relative; background: var(--zinc-950); color: var(--white); padding-top: var(--sect); --plate-line: rgba(255,255,255,.14); --copy: rgba(255,255,255,.66); }
.cc-head { max-width: 760px; margin-bottom: 64px; }
.cc-head h2 {
  font-size: clamp(56px, 6.6vw, 96px); font-weight: 900; text-transform: uppercase;
  line-height: .84; letter-spacing: -.04em;
}
.cc-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--white); }
.cc-sub { margin-top: 28px; font-size: 17px; line-height: 1.65; color: var(--zinc-400); max-width: 640px; }

.ch { position: relative; padding-bottom: 80px; scroll-margin-top: 76px; }
.ch-photo { position: relative; margin: 0; height: 58vh; min-height: 380px; max-height: 640px; overflow: hidden; background: var(--zinc-900); }
.ch-photo > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.ch-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,9,11,.96), rgba(9,9,11,.35) 45%, rgba(9,9,11,.15)); }
.ch-head { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 36px; }
.ch-num { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; color: var(--red); }
.ch-name {
  margin-top: 8px; font-size: clamp(40px, 5vw, 76px); font-weight: 900; text-transform: uppercase;
  line-height: .9; letter-spacing: -.03em; color: var(--white);
}
.ch-fig { margin-top: 12px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.ch-head-c { text-align: center; }
.ch-copy { margin-top: 36px; font-size: 18px; line-height: 1.6; color: var(--copy); max-width: 60ch; }
.ch-copy-c { margin-inline: auto; text-align: center; }

.steps { list-style: none; margin-top: 36px; display: grid; border-right: 1px solid var(--plate-line); border-bottom: 1px solid var(--plate-line); }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 50%; }
.steps-1 { grid-template-columns: 1fr; width: 25%; margin-inline: auto; }
.step { position: relative; padding: 26px 26px 30px; border-top: 1px solid var(--plate-line); border-left: 1px solid var(--plate-line); }
.pic { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.pic img { display: block; width: 100%; height: auto; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1); }
.pic.is-in img { clip-path: inset(0); }
.step-i { margin-top: 18px; font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--red); }
.step-n { margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: var(--white); }
.step-t { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--copy); }

.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.route { min-width: 0; padding-bottom: 56px; }
.route .ch-photo { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; }
.route .ch-head { padding: 0 24px 24px; }
.route .ch-name { font-size: clamp(32px, 3.2vw, 48px); }
.route .ch-copy { font-size: 16px; margin-top: 28px; }
.route .steps-2 { width: 100%; }
.ch-end { padding-bottom: 96px; }

.junction { position: relative; height: 140px; }
.junction-svg { display: block; width: min(1200px, 100% - 48px); height: 100%; margin: 0 auto; }
.j-line { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.j-hot { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--fill, 0)); }

@media (max-width: 1279px) {
  .routes { gap: 32px; }
  .step { padding: 22px 20px 26px; }
}

@media (max-width: 1023px) {
  .infra-inner { grid-template-columns: 1fr; gap: 48px; }
  .infra-media img { position: static; height: auto; aspect-ratio: 4 / 3; }
  .ch-photo { height: 48vh; }
  .routes { grid-template-columns: 1fr; gap: 0; }
  .route { padding-bottom: 72px; }
  .route .ch-photo { aspect-ratio: 16 / 9; }
  .junction { height: 72px; }
  .junction-svg { display: none; }
  .junction::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.18); }
  .junction::after { content: ""; position: absolute; left: calc(50% - .5px); top: 0; width: 2px; height: calc(var(--fill, 0) * 1%); background: var(--red); }
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-2 { width: 100%; }
  .steps-1 { width: 50%; }
}

@media (max-width: 767px) {
  .opener { height: 56vh; min-height: 420px; }
  .opener-kicker { font-size: 13px; }
  .opener-line { margin-top: 20px; }
  .cc-head { margin-bottom: 40px; }
  .ch { padding-bottom: 56px; }
  .ch-photo { height: 44vh; min-height: 300px; }
  .ch-head { padding-bottom: 24px; }
  .ch-copy { font-size: 16px; margin-top: 28px; }
  .steps { margin-top: 28px; }
  .step { padding: 18px 16px 22px; }
  .step-n { font-size: 17px; }
  .step-t { font-size: 14px; }
  .junction { height: 56px; }
}

@media (max-width: 559px) {
  .cc-head h2 { font-size: clamp(34px, 10vw, 56px); }
  .steps-1 { width: 100%; }
  .step-n { font-size: 16px; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pic img { clip-path: inset(0); transition: none; }
  .crumb, .opener-kicker, .opener-title .line, .opener-line { animation: none; }
}