:root {
      --bg: #f6f4ef;
      --paper: #ffffff;
      --ink: #111111;
      --muted: #6c6c68;
      --line: #d9d7d1;
      --soft: #ece9e1;
      --accent: #d72b23;

      --content: min(1240px, calc(100vw - 96px));
      --copy: 680px;
      --wide-copy: 880px;

      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 40px;
      --space-5: 64px;
      --space-6: 96px;
      --space-7: 128px;
      --space-8: 176px;

      --display: clamp(58px, 8vw, 128px);
      --chapter-title: clamp(44px, 5.8vw, 88px);
      --lede: clamp(22px, 2vw, 32px);
      --body: clamp(18px, 1.45vw, 22px);
      --small: 13px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      font-family: "Noto Sans", sans-serif;
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Noto Sans", sans-serif;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a {
      color: inherit;
    }

    .scroll-progress {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 100;
      height: 3px;
      background: transparent;
      pointer-events: none;
    }

    .scroll-progress__bar {
      width: 0%;
      height: 100%;
      background: var(--ink);
      transform-origin: left center;
    }

    .prototype-tag {
      position: fixed;
      top: 20px;
      left: 24px;
      z-index: 80;
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    main {
      width: 100%;
    }

    .chapter {
      position: relative;
      border-top: 1px solid var(--line);
    }

    .chapter:first-child {
      border-top: none;
    }

    .chapter__inner {
      width: var(--content);
      margin: 0 auto;
    }

    .chapter__number {
      margin: 0 0 var(--space-3);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--muted);
      text-transform: uppercase;
    }

    .chapter__title {
      margin: 0;
      max-width: 1120px;
      font-size: var(--chapter-title);
      line-height: 0.96;
      letter-spacing: -0.045em;
      font-weight: 700;
    }

    .chapter__dek {
      margin: var(--space-4) 0 0;
      max-width: var(--wide-copy);
      color: #2e2e2b;
      font-family: "Noto Sans", sans-serif;
      font-size: var(--lede);
      line-height: 1.35;
    }

    .chapter__copy {
      max-width: var(--copy);
      color: #292925;
      font-family: "Noto Sans", sans-serif;
      font-size: var(--body);
      line-height: 1.68;
    }

    .chapter__copy p {
      margin: 0 0 1.25em;
    }

    .label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .placeholder {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 260px;
      border: 1px solid #bdbab1;
      background:
        linear-gradient(90deg, transparent calc(50% - .5px), #d8d5cc 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px), #d8d5cc 50%, transparent calc(50% + .5px)),
        #e8e5de;
      color: #5e5c56;
      overflow: hidden;
    }

    .placeholder::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(94, 92, 86, 0.18);
      pointer-events: none;
    }

    .placeholder__label {
      position: relative;
      z-index: 1;
      max-width: 80%;
      text-align: center;
      font-size: clamp(16px, 1.6vw, 24px);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .placeholder__note {
      display: block;
      margin-top: 10px;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: #77746d;
    }

    .chapter--scale {
      --scale-footprint: 1;
      --scale-footprint-fade: 1;
      --scale-syd: 0;
      --scale-runway: 0;
      --scale-capacity: 0;
      min-height: 320vh;
      background: var(--bg);
    }

    .scale-story__header {
      width: var(--content);
      margin: 0 auto;
      padding: var(--space-8) 0 var(--space-6);
    }

    .scale-story {
      width: var(--content);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
      gap: clamp(56px, 6vw, 104px);
      align-items: start;
    }

    .scale-story__graphic-wrap {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      padding: 56px 0 44px;
    }

    .scale-story__graphic {
      width: 100%;
    }

    .scale-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 1.15 / 1;
      min-height: min(72svh, 760px);
      border: 1px solid #c9c4b7;
      background: #ece7dc;
      overflow: hidden;
    }

    .scale-stage::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(90, 87, 80, 0.16);
      pointer-events: none;
    }

    .scale-stage svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .scale-story__steps {
      padding: 38vh 0 44vh;
    }

    .scale-step {
      position: relative;
      min-height: 76vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 7vh 0;
      opacity: 0.36;
      transition: opacity 240ms ease, transform 340ms ease;
    }

    .scale-step.is-active {
      opacity: 1;
    }

    .scale-step__index {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .scale-step__metric {
      margin: 0 0 12px;
      font-size: clamp(44px, 5.2vw, 92px);
      line-height: 0.86;
      letter-spacing: -0.075em;
      font-weight: 700;
    }

    .scale-step__metric--pair {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 12px;
    }

    .scale-step__metric--pair small {
      display: inline-block;
      margin-bottom: 0.2em;
      font-size: 0.24em;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--muted);
      font-weight: 700;
    }

    .scale-step__label {
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .scale-step h3 {
      margin: 0;
      font-size: clamp(30px, 2.9vw, 48px);
      line-height: 1.02;
      letter-spacing: -0.04em;
      font-weight: 700;
      max-width: 560px;
    }

    .scale-step p {
      margin: 22px 0 0;
      max-width: 520px;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.35vw, 21px);
      line-height: 1.64;
      color: #33332f;
    }

    .scale-stage text {
      font-family: "Noto Sans", sans-serif;
    }

    .scale-outline {
      fill: none;
      stroke: #111111;
      stroke-width: 2.5;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .scale-outline--syd {
      stroke: #6f6a64;
      stroke-width: 2.2;
    }

    .scale-soft-fill {
      fill: rgba(255, 255, 255, 0.24);
    }

    .scale-ui-label {
      fill: #6c6c68;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.14em;
    }

    .scale-ui-small {
      fill: #7a766e;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    .scale-stage-layer,
    .scale-runway-body,
    .scale-capacity-outer,
    .scale-capacity-inner,
    .scale-capacity-text {
      transition:
        opacity 700ms cubic-bezier(.2,.7,.2,1),
        transform 850ms cubic-bezier(.2,.7,.2,1);
      transform-origin: 50% 50%;
    }

    .scale-footprint-layer {
      opacity: var(--scale-footprint-fade);
      transform: translateY(calc(12px * (1 - var(--scale-footprint)))) scale(calc(0.92 + (0.08 * var(--scale-footprint))));
    }

    .scale-syd-layer {
      opacity: calc(var(--scale-syd) * var(--scale-footprint-fade));
      transform: translateY(calc(10px * (1 - var(--scale-syd)))) scale(calc(0.86 + (0.14 * var(--scale-syd))));
    }

    .scale-runway-layer {
      opacity: var(--scale-runway);
      transform: translateY(calc(18px * (1 - var(--scale-runway)))) scale(calc(0.94 + (0.06 * var(--scale-runway))));
    }

    .scale-runway-body {
      transform: scaleX(calc(0.16 + (0.84 * var(--scale-runway))));
    }

    .scale-runway-dim {
      opacity: calc(0.22 + (0.78 * var(--scale-runway)));
    }

    .scale-capacity-layer {
      opacity: var(--scale-capacity);
      transform: scale(calc(0.84 + (0.16 * var(--scale-capacity))));
    }

    .scale-capacity-inner {
      transform: scale(calc(0.64 + (0.36 * var(--scale-capacity))));
    }

    .scale-capacity-outer {
      transform: scale(calc(0.36 + (0.64 * var(--scale-capacity))));
    }

    .scale-capacity-text {
      opacity: calc(0.22 + (0.78 * var(--scale-capacity)));
    }


    .chapter--compare {
      --compare-curfew: 0;
      --compare-wsi-glow: 0;
      min-height: 300vh;
      background: var(--paper);
    }

    .compare-story__header {
      width: var(--content);
      margin: 0 auto;
      padding: var(--space-8) 0 var(--space-5);
    }

    .compare-story__body {
      width: var(--content);
      margin: 0 auto;
      min-height: 240vh;
      position: relative;
    }

    .compare-sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      padding: 38px 0 34px;
    }

    .compare-stage {
      width: 100%;
      display: grid;
      grid-template-rows: auto auto;
      gap: 28px;
      align-items: stretch;
    }

    .compare-panels {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(18px, 2vw, 24px);
      align-items: stretch;
    }

    .compare-panel {
      position: relative;
      min-width: 0;
      min-height: 58svh;
      padding: 18px 20px 18px;
      border: 1px solid #d6d3cc;
      background: #f6f4ef;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: background 420ms ease, border-color 420ms ease, opacity 420ms ease, filter 420ms ease;
    }

    .compare-panel::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(74, 72, 66, 0.12);
      pointer-events: none;
    }

    .compare-panel__top {
      position: relative;
      z-index: 3;
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 16px;
    }

    .compare-panel__eyebrow {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .compare-panel__title {
      margin: 0;
      max-width: 330px;
      font-size: clamp(24px, 2.1vw, 34px);
      line-height: 0.98;
      letter-spacing: -0.04em;
      font-weight: 700;
      text-wrap: balance;
    }

    .compare-panel__tag {
      align-self: flex-start;
      padding: 8px 10px;
      border: 1px solid currentColor;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 300ms ease, transform 300ms ease;
      white-space: nowrap;
    }

    .compare-panel__time {
      position: relative;
      z-index: 3;
      flex: 0 0 auto;
      display: flex;
      align-items: baseline;
      gap: 14px;
      margin-top: clamp(12px, 1.6vh, 18px);
      min-height: 72px;
      transition: opacity 420ms ease, filter 420ms ease;
    }

    .compare-panel__time-value {
      font-size: clamp(64px, 6.2vw, 94px);
      line-height: 0.8;
      letter-spacing: -0.085em;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .compare-panel__code {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .compare-panel__visual {
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      min-height: 250px;
      width: 100%;
      margin-top: 8px;
      overflow: hidden;
      transition: opacity 420ms ease, filter 420ms ease;
    }

    .compare-panel__visual svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .compare-visual-bg {
      fill: #f2efe8;
      transition: fill 420ms ease;
    }

    .compare-visual-bg--wsi {
      fill: #f5f3ec;
    }

    .compare-visual-ink {
      fill: none;
      stroke: #111111;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .compare-visual-soft {
      fill: rgba(17,17,17,0.08);
      stroke: none;
    }

    .compare-visual-label {
      fill: #6c6c68;
      font-family: "Noto Sans", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
    }

    .compare-day-timeline__title {
      fill: #FFD56A;
      font-family: "Noto Sans", sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
    }

    .compare-day-timeline__line,
    .compare-day-timeline__tick line {
      stroke: #111111;
      stroke-width: 1.5;
      vector-effect: non-scaling-stroke;
    }

    .compare-day-timeline__tick text {
      fill: #FFD56A;
      font-family: "Noto Sans", sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }


    .compare-aircraft {
      transition: opacity 320ms ease;
    }

    .compare-aircraft path {
      fill: #111111;
    }

    .compare-flight-path {
      fill: none;
      stroke: #111111;
      stroke-width: 2;
      stroke-dasharray: 5 8;
      opacity: 0.4;
    }

    .compare-runway-glow {
      fill: rgba(17,17,17,0.04);
      opacity: 0;
      transition: opacity 420ms ease;
    }

    .chapter--compare.compare--curfew .compare-panel--syd {
      background: #efede8;
      border-color: #ddd9d0;
    }

    .chapter--compare.compare--curfew .compare-panel--syd .compare-panel__visual {
      opacity: 0.52;
      filter: grayscale(1);
    }

    .chapter--compare.compare--curfew .compare-panel--syd .compare-panel__time {
      opacity: 0.48;
      filter: grayscale(1);
    }

    .chapter--compare.compare--curfew .compare-panel--syd .compare-panel__tag {
      opacity: 1;
      transform: translateY(0);
      color: #111111;
    }

    .chapter--compare.compare--curfew .compare-panel--wsi .compare-panel__tag {
      opacity: 1;
      transform: translateY(0);
      color: #111111;
    }

    .chapter--compare.compare--curfew .compare-panel--wsi .compare-runway-glow {
      opacity: 1;
    }

    .compare-timeline {
      position: relative;
      border-top: 1px solid var(--line);
      padding-top: 22px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      align-items: end;
    }

    .compare-time-readout {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 158px;
    }

    .compare-time-readout__eyebrow {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .compare-time-readout__value {
      font-size: clamp(54px, 6vw, 92px);
      line-height: 0.9;
      letter-spacing: -0.08em;
      font-weight: 700;
    }

    .compare-time-readout__note {
      color: #393733;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(16px, 1.1vw, 18px);
      line-height: 1.45;
      max-width: 300px;
    }

    .compare-timeline__control {
      position: relative;
      padding-top: 10px;
      touch-action: none;
      user-select: none;
    }

    .compare-track {
      position: relative;
      height: 60px;
      cursor: grab;
    }

    .compare-track:active {
      cursor: grabbing;
    }

    .compare-track__line {
      position: absolute;
      top: 24px;
      left: 0;
      right: 0;
      height: 2px;
      background: #cfcac0;
    }

    .compare-track__fill {
      position: absolute;
      top: 24px;
      left: 0;
      width: 0%;
      height: 2px;
      background: #111111;
      transform-origin: left center;
    }

    .compare-track__ticks {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .compare-track__tick {
      position: absolute;
      left: var(--tick, 0%);
      top: 0;
      width: 0;
      height: 100%;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .compare-track__tick::before {
      content: "";
      position: absolute;
      top: 18px;
      left: -0.5px;
      width: 1px;
      height: 14px;
      background: #bdb7ab;
    }

    .compare-track__tick span {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .compare-track__knob {
      position: absolute;
      top: 10px;
      left: 0%;
      width: 30px;
      height: 30px;
      margin-left: -15px;
      border: 1.5px solid #111111;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      cursor: grab;
    }

    .compare-track__knob::after {
      content: "";
      position: absolute;
      inset: 9px;
      border-radius: 999px;
      background: #111111;
    }

    .compare-track__hint {
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .chapter--scrolly {
      min-height: 240vh;
      background: var(--paper);
    }

    .scrolly {
      width: var(--content);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.68fr);
      gap: clamp(56px, 6vw, 96px);
      align-items: start;
    }

    .scrolly__graphic-wrap {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      padding: 72px 0 48px;
    }

    .scrolly__graphic {
      width: 100%;
    }

    .scrolly__graphic .placeholder {
      min-height: min(72svh, 760px);
    }

    .scrolly__steps {
      padding: 40vh 0 45vh;
    }

    .step {
      position: relative;
      min-height: 74vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8vh 0;
      opacity: 0.42;
      transition: opacity 220ms ease;
    }

    .step.is-active {
      opacity: 1;
    }

    .step__index {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .step h3 {
      margin: 0;
      font-size: clamp(30px, 3vw, 52px);
      line-height: 1.02;
      letter-spacing: -0.035em;
      font-weight: 700;
    }

    .step p {
      margin: 24px 0 0;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.35vw, 21px);
      line-height: 1.65;
      color: #33332f;
    }

    .scrolly__header {
      width: var(--content);
      margin: 0 auto;
      padding: var(--space-8) 0 var(--space-6);
    }


    .chapter--destinations {
      min-height: 118vh;
      padding: var(--space-8) 0 var(--space-8);
      background: var(--bg);
    }

    .transport-explorer {
      width: var(--content);
      margin: 0 auto;
    }

    .transport-explorer__header {
      max-width: 1080px;
      margin-bottom: clamp(64px, 7vw, 108px);
    }

    .transport-explorer__layout {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
      gap: clamp(48px, 5vw, 88px);
      align-items: stretch;
    }

    .transport-map {
      position: relative;
      min-width: 0;
      min-height: 650px;
      border-top: 1px solid var(--ink);
      border-bottom: 1px solid var(--line);
      background: #eeebe3;
      overflow: hidden;
    }

    .transport-map svg {
      width: 100%;
      height: 100%;
      min-height: 650px;
      display: block;
    }

    .transport-map__land {
      fill: #f3f0e9;
    }

    .transport-map__water {
      fill: none;
      stroke: #c7c4bc;
      stroke-width: 10;
      stroke-linecap: round;
      opacity: 0.72;
    }

    .transport-map__context {
      fill: none;
      stroke: #d2cec5;
      stroke-width: 1.5;
      stroke-dasharray: 5 8;
    }

    .transport-map__route {
      fill: none;
      stroke: #111111;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .transport-map__route-shadow {
      fill: none;
      stroke: #ffffff;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.9;
      vector-effect: non-scaling-stroke;
    }

    .transport-map__wsi-ring {
      fill: #111111;
    }

    .transport-map__wsi-core {
      fill: #f3f0e9;
      stroke: #111111;
      stroke-width: 2;
    }

    .transport-map__wsi-label,
    .transport-map__node-label,
    .transport-map__micro-label {
      font-family: "Noto Sans", sans-serif;
      pointer-events: none;
    }

    .transport-map__wsi-label {
      fill: #111111;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .transport-map__micro-label {
      fill: #77736b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
    }

    .transport-map__node {
      cursor: pointer;
      outline: none;
    }

    .transport-map__node circle {
      transition: fill 260ms ease, stroke 260ms ease, transform 260ms ease, opacity 260ms ease;
      transform-box: fill-box;
      transform-origin: center;
    }

    .transport-map__node .node-hit {
      fill: transparent;
      stroke: none;
    }

    .transport-map__node .node-ring {
      fill: #f3f0e9;
      stroke: #6e6a63;
      stroke-width: 2;
    }

    .transport-map__node .node-core {
      fill: #6e6a63;
      stroke: none;
    }

    .transport-map__node-label {
      fill: #55524d;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.01em;
      transition: fill 260ms ease;
    }

    .transport-map__node.is-selected .node-ring {
      fill: #ffffff;
      stroke: #111111;
      transform: scale(1.14);
    }

    .transport-map__node.is-selected .node-core {
      fill: #111111;
      transform: scale(1.16);
    }

    .transport-map__node.is-selected .transport-map__node-label {
      fill: #111111;
    }

    .transport-map__node.is-pulsing .node-ring {
      animation: destinationPulse 900ms cubic-bezier(.2,.7,.2,1) 1;
    }

    @keyframes destinationPulse {
      0% { transform: scale(1); opacity: 1; }
      45% { transform: scale(1.7); opacity: 0.28; }
      100% { transform: scale(1.14); opacity: 1; }
    }

    .transport-map__caption {
      position: absolute;
      left: 20px;
      bottom: 16px;
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .transport-explorer__side {
      min-width: 0;
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--ink);
    }

    .destination-selector {
      padding: 18px 0 26px;
      border-bottom: 1px solid var(--line);
    }

    .destination-selector__eyebrow {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .destination-selector__list {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .destination-selector__button {
      position: relative;
      width: 100%;
      padding: 16px 30px 16px 0;
      border: 0;
      border-bottom: 1px solid #ddd9d0;
      border-radius: 0;
      background: transparent;
      color: #77736b;
      text-align: left;
      font: inherit;
      font-size: clamp(21px, 1.8vw, 29px);
      line-height: 1;
      letter-spacing: -0.03em;
      font-weight: 700;
      cursor: pointer;
      transition: color 220ms ease, padding-left 220ms ease;
    }

    .destination-selector__button::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 16px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0.35);
      transform-origin: right center;
      transition: transform 220ms ease;
    }

    .destination-selector__button:hover,
    .destination-selector__button:focus-visible,
    .destination-selector__button.is-selected {
      color: #111111;
    }

    .destination-selector__button.is-selected {
      padding-left: 14px;
    }

    .destination-selector__button.is-selected::after {
      transform: scaleX(1);
    }

    .transport-info {
      flex: 1;
      padding: 30px 0 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 46px;
    }

    .transport-info__kicker {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .transport-info__name {
      margin: 0;
      font-size: clamp(48px, 4.8vw, 78px);
      line-height: 0.88;
      letter-spacing: -0.065em;
      font-weight: 700;
    }

    .transport-info__description {
      margin: 28px 0 0;
      max-width: 390px;
      color: #34322e;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.3vw, 21px);
      line-height: 1.58;
    }

    .transport-info__meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .transport-info__meta-item {
      padding: 16px 14px 16px 0;
    }

    .transport-info__meta-item + .transport-info__meta-item {
      padding-left: 18px;
      border-left: 1px solid var(--line);
    }

    .transport-info__meta-label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .transport-info__meta-value {
      display: block;
      font-size: 15px;
      line-height: 1.35;
      font-weight: 700;
    }

    .chapter--metro {
      --metro-current-opacity: 1;
      --metro-future-opacity: 0;
      min-height: 235vh;
      background: var(--paper);
    }

    .metro-story__header {
      width: var(--content);
      margin: 0 auto;
      padding: var(--space-8) 0 var(--space-6);
    }

    .metro-story {
      width: var(--content);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
      gap: clamp(56px, 6vw, 100px);
      align-items: start;
    }

    .metro-story__graphic-wrap {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      padding: 56px 0 42px;
    }

    .metro-story__graphic {
      width: 100%;
    }

    .metro-diagram {
      position: relative;
      width: 100%;
      aspect-ratio: 1.22 / 1;
      min-height: min(72svh, 760px);
      border: 1px solid #d7d2c8;
      background: #f5f2ea;
      overflow: hidden;
    }

    .metro-diagram::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(72, 69, 63, 0.14);
      pointer-events: none;
    }

    .metro-diagram svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .metro-diagram__caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .metro-story__steps {
      padding: 40vh 0 44vh;
    }

    .metro-step {
      position: relative;
      min-height: 78vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8vh 0;
      opacity: 0.36;
      transition: opacity 260ms ease;
    }

    .metro-step.is-active {
      opacity: 1;
    }

    .metro-step__index {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .metro-step__eyebrow {
      margin: 0 0 16px;
      color: #111111;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .metro-step__metric {
      margin: 0 0 14px;
      font-size: clamp(44px, 5vw, 90px);
      line-height: 0.86;
      letter-spacing: -0.08em;
      font-weight: 700;
    }

    .metro-step h3 {
      margin: 0;
      max-width: 540px;
      font-size: clamp(30px, 2.9vw, 48px);
      line-height: 1.02;
      letter-spacing: -0.04em;
      font-weight: 700;
    }

    .metro-step p {
      margin: 22px 0 0;
      max-width: 520px;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.35vw, 21px);
      line-height: 1.64;
      color: #33332f;
    }

    .metro-static-label,
    .metro-label {
      fill: #6c6c68;
      font-family: "Noto Sans", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .metro-state-label {
      fill: #111111;
      font-family: "Noto Sans", sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .metro-base-line {
      fill: none;
      stroke: #d7d1c6;
      stroke-width: 5;
      stroke-linecap: round;
    }

    .metro-route {
      fill: none;
      stroke: #111111;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .metro-route--current {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      opacity: 0.96;
    }

    .metro-route--future {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      opacity: 0.96;
    }

    .metro-route--dashed {
      stroke-dasharray: 9 10;
    }

    .metro-station-ring {
      fill: #ffffff;
      stroke: #111111;
      stroke-width: 2.5;
    }

    .metro-station-core {
      fill: #111111;
    }

    .metro-chip {
      fill: #ffffff;
      stroke: #111111;
      stroke-width: 1.4;
      rx: 18;
      ry: 18;
    }

    .metro-chip-text {
      fill: #111111;
      font-family: "Noto Sans", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .metro-vehicle-body {
      fill: #ffffff;
      stroke: #111111;
      stroke-width: 1.8;
    }

    .metro-vehicle-line {
      fill: none;
      stroke: #111111;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .metro-vehicle-wheel {
      fill: #111111;
    }

    .metro-layer {
      transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
      transform-origin: 50% 50%;
    }

    .metro-current-layer {
      opacity: var(--metro-current-opacity);
      transform: translateY(calc(10px * (1 - var(--metro-current-opacity))));
    }

    .metro-future-layer {
      opacity: var(--metro-future-opacity);
      transform: translateY(calc(12px * (1 - var(--metro-future-opacity))));
    }

    .chapter--community {
      --community-west: 0;
      --community-local: 0;
      --community-callout: 0;
      min-height: 310vh;
      background: var(--bg);
    }

    .community-story__header {
      width: var(--content);
      margin: 0 auto;
      padding: var(--space-8) 0 var(--space-6);
    }

    .community-story {
      width: var(--content);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
      gap: clamp(56px, 6vw, 100px);
      align-items: start;
    }

    .community-story__graphic-wrap {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      padding: 56px 0 42px;
    }

    .community-story__graphic {
      width: 100%;
    }

    .community-map {
      position: relative;
      width: 100%;
      aspect-ratio: 1.14 / 1;
      min-height: min(72svh, 760px);
      border: 1px solid #d0cbc0;
      background: #ece8de;
      overflow: hidden;
    }

    .community-map::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(72, 69, 63, 0.14);
      pointer-events: none;
    }

    .community-map svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .community-map__caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .community-step {
      position: relative;
      min-height: 76vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8vh 0;
      opacity: 0.36;
      transition: opacity 260ms ease;
    }

    .community-step.is-active {
      opacity: 1;
    }

    .community-story__steps {
      padding: 40vh 0 44vh;
    }

    .community-step__index {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .community-step__eyebrow {
      margin: 0 0 16px;
      color: #111111;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .community-step__metric {
      margin: 0 0 14px;
      font-size: clamp(46px, 5.2vw, 94px);
      line-height: 0.86;
      letter-spacing: -0.08em;
      font-weight: 700;
    }

    .community-step h3 {
      margin: 0;
      max-width: 560px;
      font-size: clamp(30px, 2.9vw, 48px);
      line-height: 1.02;
      letter-spacing: -0.04em;
      font-weight: 700;
    }

    .community-step p {
      margin: 22px 0 0;
      max-width: 520px;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.35vw, 21px);
      line-height: 1.64;
      color: #33332f;
    }

    .community-map__boundary {
      fill: none;
      stroke: #bcb6aa;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .community-map__district {
      fill: #d5d0c6;
      stroke: #f3efe6;
      stroke-width: 2.5;
      transition: fill 600ms cubic-bezier(.2,.7,.2,1), opacity 600ms cubic-bezier(.2,.7,.2,1);
    }

    .community-map__district--west {
      fill: rgba(17,17,17, calc(0.09 + 0.12 * var(--community-west)));
    }

    .community-map__highlight {
      fill: #111111;
      opacity: var(--community-local);
      transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
      transform-origin: center;
      transform: scale(calc(0.92 + 0.08 * var(--community-local)));
    }

    .community-map__label,
    .community-map__small {
      fill: #6c6c68;
      font-family: "Noto Sans", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .community-map__small {
      font-size: 10px;
      letter-spacing: 0.12em;
    }

    .community-map__label--local,
    .community-map__small--local {
      opacity: var(--community-local);
      transition: opacity 520ms cubic-bezier(.2,.7,.2,1);
    }

    .community-map__west-outline {
      fill: none;
      stroke: #111111;
      stroke-width: 2.4;
      opacity: var(--community-west);
      transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
      transform-origin: center;
      transform: scale(calc(0.98 + 0.02 * var(--community-west)));
    }

    .community-callout {
      position: absolute;
      right: 22px;
      top: 22px;
      max-width: 260px;
      opacity: var(--community-callout);
      transform: translateY(calc(14px * (1 - var(--community-callout))));
      transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
      pointer-events: none;
    }

    .community-callout__number {
      margin: 0;
      font-size: clamp(62px, 7vw, 116px);
      line-height: 0.86;
      letter-spacing: -0.08em;
      font-weight: 700;
      color: #111111;
    }

    .community-callout__label {
      margin-top: 12px;
      color: #3a3834;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(16px, 1.15vw, 19px);
      line-height: 1.4;
    }

    .chapter--finale {
      --finale-dests: 0;
      --finale-wsi: 0;
      --finale-route: 0;
      --finale-copy: 0;
      min-height: 285vh;
      background: #f7f4ed;
      color: var(--ink);
      border-top: none;
    }

    .finale-story__header {
      width: var(--content);
      margin: 0 auto;
      padding: var(--space-8) 0 var(--space-5);
    }

    .finale-sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .finale-stage {
      width: min(1360px, calc(100vw - 64px));
      margin: 0 auto;
      height: 100%;
      padding: clamp(46px, 5vh, 72px) 0 clamp(34px, 4vh, 52px);
      display: grid;
      grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
      gap: clamp(52px, 6vw, 96px);
      align-items: center;
    }

    .finale-visual {
      position: relative;
      min-width: 0;
      align-self: stretch;
      display: flex;
      align-items: center;
    }

    .finale-map {
      position: relative;
      width: 100%;
      aspect-ratio: 1.12 / 1;
      min-height: min(70svh, 760px);
      border: 1px solid #d3cec2;
      background: #efebe2;
      overflow: hidden;
    }

    .finale-map::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(74,72,66,0.12);
      pointer-events: none;
    }

    .finale-map svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .finale-map__outline {
      fill: none;
      stroke: #111111;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.9;
    }

    .finale-map__land {
      fill: rgba(17,17,17,0.03);
    }

    .finale-map__label, .finale-map__small {
      fill: #6c6c68;
      font-family: "Noto Sans", sans-serif;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .finale-map__label { font-size: 12px; }
    .finale-map__small { font-size: 10px; letter-spacing: 0.12em; }

    .finale-map__city {
      opacity: var(--finale-dests);
      transition: opacity 650ms cubic-bezier(.2,.7,.2,1), transform 650ms cubic-bezier(.2,.7,.2,1);
      transform-origin: center;
      transform: translateY(calc(10px * (1 - var(--finale-dests))));
    }

    .finale-map__city circle {
      fill: #111111;
    }

    .finale-map__wsi {
      opacity: var(--finale-wsi);
      transition: opacity 650ms cubic-bezier(.2,.7,.2,1), transform 650ms cubic-bezier(.2,.7,.2,1);
      transform-origin: center;
      transform: scale(calc(0.88 + 0.12 * var(--finale-wsi)));
    }

    .finale-map__wsi circle:first-child {
      fill: none;
      stroke: rgba(215,43,35,0.55);
      stroke-width: 1.6;
    }

    .finale-map__wsi circle:last-child {
      fill: #d72b23;
    }

    .finale-map__route-layer {
      opacity: var(--finale-route);
      transition: opacity 450ms ease;
    }

    .finale-map__route {
      fill: none;
      stroke: #d72b23;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }

    .finale-map__hcm {
      opacity: var(--finale-route);
      transition: opacity 450ms ease;
    }

    .finale-plane {
      position: absolute;
      left: 0;
      top: 0;
      width: clamp(48px, 4.6vw, 72px);
      height: auto;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      opacity: 0;
      z-index: 4;
      pointer-events: none;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,.18));
    }

    .finale-map__caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .finale-scroll-cue {
      position: absolute;
      right: 18px;
      top: 18px;
      z-index: 4;
      color: rgba(17,17,17,.48);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: calc(1 - var(--finale-route));
      transition: opacity 300ms ease;
      pointer-events: none;
    }

    .finale-copy {
      position: relative;
      z-index: 2;
      max-width: 520px;
      opacity: calc(0.24 + 0.76 * var(--finale-copy));
      transform: translateY(calc(20px * (1 - var(--finale-copy))));
      transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
    }

    .finale-copy__eyebrow {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    .finale-copy__title {
      margin: 0;
      font-size: clamp(42px, 5.3vw, 80px);
      line-height: 0.92;
      letter-spacing: -0.06em;
      font-weight: 700;
      text-wrap: balance;
    }

    .finale-copy__meta {
      margin-top: 34px;
      display: grid;
      gap: 0;
      border-top: 1px solid #d8d3c8;
    }

    .finale-copy__row {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 18px;
      align-items: baseline;
      padding: 14px 0;
      border-bottom: 1px solid #d8d3c8;
    }

    .finale-copy__term {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .finale-copy__value {
      color: #111111;
      font-size: clamp(19px, 1.45vw, 23px);
      line-height: 1.35;
      font-weight: 700;
    }


    :root {
      --story-active: #d72b23;
      --story-line: 2.25px;
      --story-motion: cubic-bezier(.2,.7,.2,1);
    }

    #story-transition-layer {
      display: none !important;
    }

    #story-transition-layer.is-visible {
      opacity: 1;
    }

    #story-transition-layer svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .transition-object {
      opacity: 0;
      vector-effect: non-scaling-stroke;
    }

    .transition-node-ring {
      fill: none;
      stroke: var(--story-active);
      stroke-width: 1.6;
    }

    .transition-node-core {
      fill: var(--story-active);
    }

    .transition-runway {
      fill: none;
      stroke: #111111;
      stroke-width: var(--story-line);
      stroke-linecap: round;
    }

    .transition-route {
      fill: none;
      stroke: var(--story-active);
      stroke-width: var(--story-line);
      stroke-linecap: round;
    }

    .transition-region {
      fill: rgba(215,43,35,0.025);
      stroke: var(--story-active);
      stroke-width: 1.7;
    }

    .chapter.is-leaving .chapter__number {
      opacity: .58;
      transition: opacity 320ms var(--story-motion);
    }

    @media (max-width: 899px) {
      .transition-runway,
      .transition-region--metro {
        display: none;
      }
    }


    .js [data-reveal] {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 520ms cubic-bezier(.2,.7,.2,1),
        transform 520ms cubic-bezier(.2,.7,.2,1);
    }

    .js [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }


    .measure {
      width: var(--content);
      margin: 0 auto;
      height: 1px;
      background: transparent;
    }

    @media (max-width: 899px) {
      :root {
        --content: min(100% - 40px, 720px);
        --space-8: 120px;
        --space-7: 88px;
      }

      .prototype-tag {
        left: 20px;
        top: 14px;
      }

      .hero__grid,
      .finale-stage {
        grid-template-columns: 1fr;
      }

      .hero__grid {
        align-items: start;
        padding-top: 108px;
      }

      .hero__copy {
        padding-bottom: 0;
      }

      .hero__visual {
        min-height: 52svh;
      }

      .hero__visual .placeholder {
        min-height: 52svh;
      }

      .scale-story {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .scale-story__graphic-wrap {
        z-index: 8;
        height: 60svh;
        min-height: 370px;
        padding: 0;
        background: var(--bg);
      }

      .scale-stage {
        height: 48svh;
        min-height: 320px;
        aspect-ratio: auto;
      }

      .scale-story__steps {
        position: relative;
        z-index: 12;
        padding: 16vh 0 22vh;
      }

      .scale-step {
        min-height: 72vh;
        justify-content: flex-end;
        padding: 0 0 12vh;
      }

      .scale-step::before {
        content: "";
        position: absolute;
        left: -20px;
        right: -20px;
        height: 48%;
        bottom: 5vh;
        background: linear-gradient(to bottom, rgba(246,244,239,0), rgba(246,244,239,.96) 30%, rgba(246,244,239,1));
        z-index: -1;
        pointer-events: none;
      }

      .transport-explorer__layout {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .transport-map {
        min-height: 520px;
      }

      .transport-map svg {
        min-height: 520px;
      }

      .transport-explorer__side {
        display: contents;
      }

      .destination-selector {
        order: 2;
        border-top: 1px solid var(--ink);
      }

      .destination-selector__list {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 0;
      }

      .destination-selector__button {
        width: auto;
        padding: 14px 22px 14px 0;
        font-size: 22px;
      }

      .destination-selector__button.is-selected {
        padding-left: 0;
      }

      .transport-info {
        order: 3;
        padding-top: 8px;
      }

      .compare-story__body {
        min-height: 205vh;
      }

      .compare-sticky {
        padding: 26px 0 24px;
      }

      .compare-panels {
        grid-template-columns: 1fr;
      }

      .compare-panel {
        min-height: 28.5svh;
        padding: 14px 16px 12px;
      }

      .compare-panel__time {
        min-height: 52px;
        margin-top: 8px;
      }

      .compare-panel__time-value {
        font-size: clamp(46px, 8.6vw, 68px);
      }

      .compare-panel__visual {
        min-height: 110px;
        margin-top: 2px;
      }

      .compare-timeline {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .compare-time-readout {
        min-width: 0;
      }

      .compare-time-readout__note {
        max-width: 520px;
      }

      .metro-story {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .metro-story__graphic-wrap {
        z-index: 8;
        height: 58svh;
        min-height: 360px;
        padding: 0;
        background: var(--paper);
      }

      .metro-diagram {
        height: 46svh;
        min-height: 320px;
        aspect-ratio: auto;
      }

      .metro-story__steps {
        position: relative;
        z-index: 12;
        padding: 16vh 0 22vh;
      }

      .metro-step {
        min-height: 72vh;
        justify-content: flex-end;
        padding: 0 0 12vh;
      }

      .metro-step::before {
        content: "";
        position: absolute;
        left: -20px;
        right: -20px;
        height: 48%;
        bottom: 5vh;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 30%, rgba(255,255,255,1));
        z-index: -1;
        pointer-events: none;
      }

      .community-story {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .community-story__graphic-wrap {
        z-index: 8;
        height: 58svh;
        min-height: 360px;
        padding: 0;
        background: var(--bg);
      }

      .community-map {
        height: 46svh;
        min-height: 320px;
        aspect-ratio: auto;
      }

      .community-story__steps {
        position: relative;
        z-index: 12;
        padding: 16vh 0 22vh;
      }

      .community-step {
        min-height: 72vh;
        justify-content: flex-end;
        padding: 0 0 12vh;
      }

      .community-step::before {
        content: "";
        position: absolute;
        left: -20px;
        right: -20px;
        height: 48%;
        bottom: 5vh;
        background: linear-gradient(to bottom, rgba(246,244,239,0), rgba(246,244,239,.96) 30%, rgba(246,244,239,1));
        z-index: -1;
        pointer-events: none;
      }

      .scale__layout,
      .community__grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }

      .scrolly {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .scrolly__graphic-wrap {
        z-index: 8;
        height: 58svh;
        min-height: 360px;
        padding: 0;
        background: inherit;
      }

      .scrolly__graphic .placeholder {
        min-height: 46svh;
        height: 46svh;
      }

      .scrolly__steps {
        position: relative;
        z-index: 12;
        padding: 18vh 0 20vh;
      }

      .step {
        min-height: 72vh;
        justify-content: flex-end;
        padding: 0 0 12vh;
      }

      .step::before {
        content: "";
        position: absolute;
        left: -20px;
        right: -20px;
        height: 48%;
        bottom: 5vh;
        background: linear-gradient(to bottom, rgba(246,244,239,0), rgba(246,244,239,.96) 30%, rgba(246,244,239,1));
        z-index: -1;
        pointer-events: none;
      }

      .chapter--scrolly .step::before,
      .chapter--metro .step::before {
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 30%, rgba(255,255,255,1));
      }

      .finale-stage {
        gap: 48px;
      }

      .finale-stage {
        grid-template-columns: 1fr;
      }

      .finale-copy {
        max-width: none;
      }

      .finale-map {
        min-height: 48svh;
      }
    }

    @media (max-width: 520px) {
      :root {
        --content: calc(100vw - 32px);
        --display: clamp(54px, 17vw, 76px);
        --chapter-title: clamp(40px, 12vw, 60px);
        --lede: clamp(20px, 6vw, 25px);
        --body: 18px;
        --space-8: 96px;
        --space-7: 72px;
      }

      .prototype-tag {
        left: 16px;
      }

      .hero__grid {
        gap: 48px;
        padding-top: 94px;
        padding-bottom: 36px;
      }

      .hero h1 {
        line-height: 0.91;
      }

      .hero__dek {
        margin-top: 28px;
        font-size: 20px;
      }

      .hero__footer {
        margin-top: 28px;
        flex-direction: column;
        gap: 8px;
      }

      .hero__visual,
      .hero__visual .placeholder {
        min-height: 50svh;
      }

      .scale__visual .placeholder,
      .community__visual .placeholder {
        min-height: 52svh;
      }
      .chapter--community {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 104px;
      }

      .community-story__header {
        padding-top: 0;
        padding-bottom: 56px;
      }

      .community-story__graphic-wrap {
        height: 54svh;
        min-height: 340px;
      }

      .community-map {
        height: 44svh;
        min-height: 290px;
      }

      .community-map__caption {
        left: 12px;
        right: 12px;
        bottom: 10px;
        font-size: 9px;
      }

      .community-callout {
        right: 14px;
        top: 14px;
        max-width: 190px;
      }

      .community-callout__number {
        font-size: clamp(50px, 15vw, 78px);
      }

      .community-step__metric {
        font-size: clamp(60px, 18vw, 102px);
      }

      .community-step h3 {
        font-size: 36px;
      }

      .chapter--metro {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 104px;
      }

      .metro-story__header {
        padding-top: 0;
        padding-bottom: 56px;
      }

      .metro-story__graphic-wrap {
        height: 54svh;
        min-height: 340px;
      }

      .metro-diagram {
        height: 44svh;
        min-height: 290px;
      }

      .metro-step__metric {
        font-size: clamp(38px, 11vw, 64px);
      }

      .metro-step h3 {
        font-size: 36px;
      }

      .metro-diagram__caption {
        left: 12px;
        right: 12px;
        bottom: 10px;
        font-size: 9px;
      }

      .chapter--destinations {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 104px;
      }

      .transport-explorer__header {
        margin-bottom: 56px;
      }

      .transport-explorer__layout {
        gap: 26px;
      }

      .transport-map,
      .transport-map svg {
        min-height: 410px;
      }

      .transport-map__caption {
        left: 12px;
        right: 12px;
        bottom: 10px;
        font-size: 9px;
      }

      .destination-selector {
        padding-top: 14px;
        padding-bottom: 20px;
      }

      .destination-selector__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
      }

      .destination-selector__button {
        width: 100%;
        padding: 13px 18px 13px 0;
        font-size: 20px;
      }

      .transport-info {
        gap: 34px;
      }

      .transport-info__name {
        font-size: clamp(52px, 15vw, 72px);
      }

      .transport-info__description {
        margin-top: 22px;
        font-size: 18px;
      }

      .transport-info__meta {
        grid-template-columns: 1fr;
      }

      .transport-info__meta-item + .transport-info__meta-item {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .transport-map__node-label {
        font-size: 16px;
      }

      .compare-story__header {
        padding-top: 104px;
        padding-bottom: 46px;
      }

      .compare-story__body {
        min-height: 220vh;
      }

      .compare-sticky {
        top: 28px;
        height: calc(100svh - 28px);
        padding: 10px 0 12px;
      }

      .compare-stage {
        gap: 12px;
      }

      .compare-panels {
        gap: 10px;
      }

      .compare-panel {
        min-height: 25svh;
        padding: 10px 12px 8px;
      }

      .compare-panel__top {
        gap: 8px;
      }

      .compare-panel__eyebrow {
        margin-bottom: 5px;
        font-size: 9px;
      }

      .compare-panel__title {
        max-width: none;
        font-size: 18px;
        line-height: 1;
        padding-right: 2px;
      }

      .compare-panel__tag {
        padding: 5px 6px;
        font-size: 8.5px;
        letter-spacing: 0.1em;
      }

      .compare-panel__time {
        min-height: 38px;
        gap: 7px;
        margin-top: 4px;
      }

      .compare-panel__time-value {
        font-size: 38px;
      }

      .compare-panel__code {
        font-size: 9px;
      }

      .compare-panel__visual {
        min-height: 76px;
        margin-top: 0;
      }

      .compare-timeline {
        padding-top: 16px;
        gap: 14px;
      }

      .compare-time-readout__value {
        font-size: 48px;
      }

      .compare-time-readout__note,
      .compare-track__hint {
        display: none;
      }

      .compare-track {
        height: 56px;
      }

      .compare-track__tick {
        font-size: 9px;
      }

      .compare-track__knob {
        width: 28px;
        height: 28px;
        margin-left: -14px;
      }


      .scrolly__header {
        padding-top: 104px;
        padding-bottom: 56px;
      }

      .scrolly__graphic-wrap {
        height: 54svh;
        min-height: 340px;
      }

      .scrolly__graphic .placeholder {
        height: 44svh;
        min-height: 300px;
      }
      .scale-story__header {
        padding-top: 104px;
        padding-bottom: 56px;
      }

      .scale-story__graphic-wrap {
        height: 56svh;
        min-height: 350px;
      }

      .scale-stage {
        height: 46svh;
        min-height: 300px;
      }

      .scale-step__metric {
        font-size: clamp(38px, 11vw, 65px);
      }

      .scale-step h3 {
        font-size: 36px;
      }


      .step {
        min-height: 68vh;
        padding-bottom: 10vh;
      }

      .step h3 {
        font-size: 38px;
      }

      .step p {
        font-size: 18px;
      }

      .chapter--community {
        min-height: auto;
      }

      .chapter--finale {
        min-height: 260vh;
      }

      .finale-stage {
        width: var(--content);
        padding: 96px 0 62px;
      }

      .finale-map {
        min-height: 44svh;
      }

      .finale-copy__title {
        font-size: clamp(38px, 11vw, 58px);
      }

      .finale-copy__row {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .finale-map__caption {
        left: 12px;
        right: 12px;
        bottom: 10px;
        font-size: 9px;
      }
    }


    .hero.hero--wsi {
      position: relative;
      display: block;
      min-height: 220svh;
      border-top: 0;
      background: #111312;
      overflow: clip;
      color: #ffffff;
    }

    .hero-wsi__sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100svh;
      overflow: hidden;
      isolation: isolate;
      background: #111312;
    }

    .hero-wsi__visual {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 100svh;
      overflow: hidden;
      z-index: 0;
    }

    .hero-wsi__photo {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 112vw;
      height: 100svh;
      max-width: none;
      object-fit: cover;
      object-position: 48% center;
      transform: scale(1.06);
      transform-origin: 0 50%;
      will-change: transform;
      user-select: none;
      pointer-events: none;
    }

    .hero-wsi__shade {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(
          ellipse 58% 64% at 6% 100%,
          rgba(188, 11, 31, 0.98) 0%,
          rgba(214, 34, 33, 0.95) 24%,
          rgba(252, 105, 35, 0.76) 44%,
          rgba(252, 105, 35, 0.24) 58%,
          rgba(252, 105, 35, 0.00) 68%
        ),
        linear-gradient(
          180deg,
          rgba(8, 11, 11, 0.00) 0%,
          rgba(8, 11, 11, 0.00) 64%,
          rgba(8, 11, 11, 0.10) 84%,
          rgba(8, 11, 11, 0.22) 100%
        );
    }

    .hero-wsi__inner {
      position: relative;
      z-index: 3;
      width: min(calc(100vw - 10vw), 1600px);
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: flex-end;
      padding: 0 0 clamp(70px, 9vh, 112px);
    }

    .hero-wsi__text {
      width: min(40vw, 680px);
      max-width: 680px;
      color: #ffffff;
      transform: translateY(0);
      will-change: opacity, transform;
    }

    .hero-wsi__title {
      margin: 0;
      font-family: "Noto Sans", sans-serif;
      font-weight: 400;
      color: #ffffff;
      text-wrap: balance;
    }

    .hero-wsi__lead {
      display: block;
      margin: 0 0 12px;
      font-size: clamp(30px, 2.45vw, 46px);
      line-height: 1.02;
      letter-spacing: -0.035em;
      font-weight: 500;
    }

    .hero-wsi__headline {
      display: block;
      font-size: clamp(54px, 4.8vw, 82px);
      line-height: 0.96;
      letter-spacing: -0.052em;
      font-weight: 800;
    }

    .hero-wsi__subline {
      max-width: 510px;
      margin: 24px 0 0;
      color: rgba(255, 255, 255, 0.90);
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.18vw, 21px);
      line-height: 1.52;
      font-weight: 400;
    }

    .hero-wsi__plane {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 34%;
      width: clamp(420px, 34vw, 620px);
      max-width: none;
      height: auto;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      transform: translate3d(-44vw, -50%, 0) rotate(-1.6deg) scale(.99);
      transform-origin: center center;
      will-change: transform, opacity;
      filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.20));
      animation: heroPlaneCruise 19s linear infinite;
    }

    @keyframes heroPlaneCruise {
      0%, 8% { opacity: 0; transform: translate3d(-44vw, -50%, 0) rotate(-1.6deg) scale(.99); }
      14% { opacity: .92; }
      48% { opacity: .96; transform: translate3d(24vw, calc(-50% - 4px), 0) rotate(-1deg) scale(1); }
      82% { opacity: .96; transform: translate3d(82vw, calc(-50% - 2px), 0) rotate(-0.4deg) scale(1.02); }
      100% { opacity: 0; transform: translate3d(112vw, -50%, 0) rotate(0deg) scale(1.03); }
    }

    .hero-body {
      background: var(--paper);
      border-top: 1px solid var(--line);
      padding: clamp(76px, 9vw, 130px) 0 clamp(90px, 11vw, 150px);
    }

    .hero-body__inner {
      width: var(--content);
      margin: 0 auto;
    }

    .hero-body__sapo {
      max-width: 900px;
      margin: 0 0 clamp(52px, 6vw, 82px);
      color: #242420;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(22px, 1.95vw, 30px);
      line-height: 1.5;
      font-weight: 400;
    }

    .hero-body__copy {
      max-width: 760px;
      color: #2f2f2b;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.25vw, 21px);
      line-height: 1.74;
      font-weight: 400;
    }

    .hero-body__copy p { margin: 0 0 1.35em; }
    .hero-body__copy p:last-child { margin-bottom: 0; }

    .hero-body__layout {
      display: grid;
      grid-template-columns: minmax(0, 760px) minmax(280px, 420px);
      gap: clamp(28px, 4vw, 72px);
      align-items: end;
    }

    .hero-body__main { min-width: 0; }

    .hero-body__aside {
      margin: 0;
      align-self: end;
    }

    .hero-body__aside img {
      display: block;
      width: min(100%, 380px);
      margin-left: auto;
      height: auto;
      border: 1px solid var(--line);
      object-fit: cover;
    }


    .chapter--scale { min-height: 250vh; }
    .scale-story__steps { padding: 28vh 0 32vh; }
    .scale-step { min-height: 66vh; }
    .scale-step p + p { margin-top: 0; }


    .compare-story__body { min-height: 190vh; }
    .compare-sticky {
      top: 0;
      height: 100svh;
      align-items: stretch;
      padding: clamp(10px, 2vh, 22px) 0;
      overflow: hidden;
    }
    .compare-stage {
      height: 100%;
      min-height: 0;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: clamp(8px, 1.6vh, 18px);
    }
    .compare-panels { min-height: 0; }
    .compare-panel {
      min-height: 0;
      height: 100%;
      padding: clamp(10px, 1.7vh, 18px) 18px;
    }
    .compare-panel__top { flex: 0 0 auto; }
    .compare-panel__time {
      min-height: 0;
      margin-top: clamp(5px, 1vh, 12px);
    }
    .compare-panel__time-value { font-size: clamp(42px, 5vw, 78px); }
    .compare-panel__visual {
      min-height: 72px;
      margin-top: 2px;
    }
    .compare-timeline {
      padding-top: clamp(10px, 1.5vh, 18px);
      gap: 18px;
    }
    .compare-time-readout__value { font-size: clamp(42px, 5vw, 72px); }
    .compare-time-readout__note { font-size: clamp(14px, 1vw, 17px); }

    @media (max-height: 620px) and (min-width: 900px) {
      .compare-sticky { padding: 8px 0; }
      .compare-stage { gap: 7px; }
      .compare-panel { padding: 8px 12px; }
      .compare-panel__eyebrow { margin-bottom: 4px; font-size: 9px; }
      .compare-panel__title { font-size: clamp(18px, 1.7vw, 27px); }
      .compare-panel__tag { padding: 5px 7px; font-size: 8px; }
      .compare-panel__time-value { font-size: clamp(34px, 4vw, 56px); }
      .compare-panel__code { font-size: 9px; }
      .compare-panel__visual { min-height: 58px; }
      .compare-visual-label { font-size: 9px; }
      .compare-timeline { padding-top: 7px; }
      .compare-time-readout { min-width: 132px; }
      .compare-time-readout__eyebrow { font-size: 9px; }
      .compare-time-readout__value { font-size: 38px; }
      .compare-time-readout__note { display: none; }
      .compare-track { height: 46px; }
      .compare-track__hint { display: none; }
    }


    .chapter--community { min-height: 225vh; }
    .community-story__steps { padding: 30vh 0 34vh; }
    .community-step { min-height: 70vh; }

    @media (max-width: 899px) {
      .hero.hero--wsi { min-height: 176svh; }
      .hero-wsi__sticky,
      .hero-wsi__visual,
      .hero-wsi__photo { height: 100svh; }
      .hero-wsi__photo {
        width: 124vw;
        object-position: 58% center;
        transform: scale(1.04);
      }
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 86% 68% at 10% 100%,
            rgba(188,11,31,.98) 0%,
            rgba(214,34,33,.95) 24%,
            rgba(252,105,35,.78) 44%,
            rgba(252,105,35,.28) 60%,
            rgba(252,105,35,0) 70%
          ),
          linear-gradient(180deg, rgba(8,11,11,0) 0%, rgba(8,11,11,.03) 64%, rgba(8,11,11,.24) 100%);
      }
      .hero-wsi__inner {
        width: calc(100vw - 36px);
        padding-bottom: 42px;
      }
      .hero-wsi__text {
        width: min(100%, 520px);
        max-width: 100%;
      }
      .hero-wsi__lead {
        margin-bottom: 8px;
        font-size: clamp(24px, 7vw, 32px);
      }
      .hero-wsi__headline {
        font-size: clamp(43px, 12.1vw, 58px);
        line-height: .96;
      }
      .hero-wsi__subline {
        max-width: 100%;
        margin-top: 16px;
        font-size: 16px;
        line-height: 1.48;
      }
      .hero-wsi__plane {
        top: 32%;
        width: clamp(300px, 66vw, 380px);
      }
      .hero-body { padding: 62px 0 84px; }
      .hero-body__sapo { font-size: 22px; margin-bottom: 42px; }
      .hero-body__copy { font-size: 18px; line-height: 1.66; }
      .hero-body__layout { grid-template-columns: 1fr; }
      .hero-body__aside img { width: min(100%, 520px); margin: 0; }
    }


    @media (prefers-reduced-motion: reduce) {
      .hero-wsi__photo { transform: scale(1.02) !important; }
      .hero-wsi__plane {
        animation: none !important;
        opacity: .92;
        transform: translate3d(56vw, -50%, 0) rotate(-0.6deg) scale(1);
      }
    }

    .no-js .chapter--finale {
      --finale-dests: 1;
      --finale-wsi: 1;
      --finale-route: 1;
      --finale-copy: 1;
    }
    .no-js .finale-map__route { stroke-dashoffset: 0; }
    .no-js .finale-plane { display: none; }

    .chapter-photo-break {
      width: min(var(--content), 1280px);
      margin: clamp(62px, 7vw, 110px) auto clamp(86px, 9vw, 140px);
    }

    .chapter-photo-break img {
      display: block;
      width: 100%;
      max-height: 720px;
      object-fit: cover;
      border: 1px solid var(--line);
    }

    .article-closing {
      position: relative;
      z-index: 1;
      background: var(--paper);
      border-top: 1px solid var(--line);
    }

    .article-closing__inner {
      width: var(--content);
      margin: 0 auto;
      padding: clamp(82px, 9vw, 142px) 0 clamp(100px, 11vw, 170px);
    }

    .article-closing p {
      max-width: 820px;
      margin: 0;
      color: #242420;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(19px, 1.4vw, 23px);
      line-height: 1.72;
      font-weight: 400;
    }

    @media (max-width: 899px) {
      .chapter-photo-break {
        width: calc(100vw - 32px);
        margin: 48px auto 76px;
      }
      .chapter-photo-break img {
        max-height: none;
      }
      .article-closing__inner {
        width: calc(100vw - 40px);
        padding: 68px 0 92px;
      }
      .article-closing p {
        font-size: 18px;
        line-height: 1.66;
      }
      .finale-plane {
        width: 46px;
      }
    }


    :root {
      --bg: #F5F7F8;
      --paper: #FFFFFF;
      --ink: #10212E;
      --muted: #60717D;
      --line: #D7E0E5;
      --soft: #E9EEF1;
      --accent: #E52329;
      --navy: #071B33;
      --aviation: #123A5A;
      --blue-soft: #DCE7ED;
      --gold: #D7A64A;
      --story-active: #E52329;
    }

    html, body {
      background: var(--bg);
      color: var(--ink);
    }

    .scroll-progress__bar {
      background: var(--aviation); 
    }

    .chapter {
      border-top-color: var(--line);
    }

    .chapter__number {
      color: var(--accent);
    }

    .chapter__title,
    .scale-step__metric,
    .community-step__metric {
      color: var(--ink);
    }

    .chapter__dek,
    .chapter__copy,
    .editorial-copy,
    .scale-step p,
    .community-step p,
    .transport-info__description,
    .hero-body__copy,
    .hero-body__sapo {
      color: var(--ink);
    }


    .hero-wsi__route-signature {
      margin: 20px 0 0;
      color: rgba(255,255,255,.92);
      font-size: 11px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }


    .hero-body {
      background: var(--paper);
      border-top-color: rgba(18,58,90,.14);
    }

    .hero-body__aside {
      position: relative;
      padding-top: 14px;
    }

    .hero-body__aside::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 72px;
      height: 2px;
      background: var(--accent);
    }

    .hero-body__aside img,
    .chapter-photo-break img {
      border-color: rgba(18,58,90,.16);
      filter: saturate(.94) contrast(1.025);
    }


    .chapter--scale {
      background: var(--bg);
    }

    .scale-stage {
      background: #F8FAFB;
      border-color: #CAD8E0;
    }

    .scale-stage::before {
      border-color: rgba(18,58,90,.10);
    }

    .scale-outline {
      stroke: var(--aviation);
    }

    .scale-outline--syd {
      stroke: rgba(18,58,90,.38);
    }

    .scale-soft-fill {
      fill: rgba(18,58,90,.035);
    }

    .scale-ui-label {
      fill: var(--aviation);
    }

    .scale-ui-small {
      fill: var(--muted);
    }

    .scale-runway-body rect {
      fill: #FFFFFF;
      stroke: var(--aviation);
    }

    .scale-runway-body line {
      stroke: var(--aviation);
    }


    #scale-person-outline circle,
    #scale-person-outline rect {
      fill: #EDF3F6;
      stroke: #8DA7B6;
    }

    #scale-person-solid circle,
    #scale-person-solid rect {
      fill: var(--accent);
    }


    .chapter--compare {
      background: var(--paper);
    }

    .compare-panel--syd {
      background: #E9EEF1;
      border-color: #D0DBE1;
      color: var(--ink);
    }

    .compare-panel--syd::before {
      border-color: rgba(18,58,90,.10);
    }

    .compare-panel--syd .compare-visual-bg {
      fill: #E5EBEF;
    }

    .compare-panel--syd .compare-visual-ink,
    .compare-panel--syd .compare-flight-path {
      stroke: var(--aviation);
    }

    .compare-panel--syd .compare-aircraft path {
      fill: var(--aviation);
    }

    .compare-panel--syd .compare-visual-soft {
      fill: rgba(18,58,90,.08);
    }

    .compare-panel--wsi {
      background: var(--navy);
      border-color: #163755;
      color: #FFFFFF;
    }

    .compare-panel--wsi::before {
      border-color: rgba(255,255,255,.10);
    }

    .compare-panel--wsi .compare-panel__eyebrow,
    .compare-panel--wsi .compare-panel__code,
    .compare-panel--wsi .compare-visual-label {
      color: #B9CBD6;
      fill: #B9CBD6;
    }

    .compare-panel--wsi .compare-panel__tag {
      color: #FFFFFF;
      border-color: rgba(255,255,255,.56);
    }

    .compare-panel--wsi .compare-visual-bg,
    .compare-panel--wsi .compare-visual-bg--wsi {
      fill: #0B2741;
    }

    .compare-panel--wsi .compare-visual-ink {
      stroke: #F6FAFC;
    }

    .compare-panel--wsi .compare-flight-path {
      stroke: #9AB8C8;
    }

    .compare-panel--wsi .compare-aircraft path {
      fill: #FFFFFF;
    }

    .compare-panel--wsi .compare-visual-soft {
      fill: rgba(255,255,255,.08);
    }

    .chapter--compare.compare--curfew .compare-panel--syd {
      background: #E4E9EC;
      border-color: #CCD6DC;
    }

    .chapter--compare.compare--curfew .compare-panel--syd .compare-panel__tag {
      color: var(--ink);
    }

    .chapter--compare.compare--curfew .compare-panel--wsi .compare-panel__tag {
      color: #FFFFFF;
    }

    .chapter--compare.compare--curfew .compare-panel--wsi .compare-runway-glow {
      fill: rgba(229,35,41,.20);
      opacity: 1;
    }

    .compare-track__fill {
      background: var(--accent);
    }

    .compare-track__knob {
      border-color: var(--accent);
      background: #FFFFFF;
    }

    .compare-track__knob::after {
      background: var(--accent);
    }


    .chapter--destinations {
      background: var(--bg);
    }

    .transport-map {
      background: #F7FAFB;
      border-top-color: var(--aviation);
      border-bottom-color: var(--line);
    }

    .transport-map__land {
      fill: #F7FAFB;
    }

    .transport-map__water {
      stroke: #B9CFDA;
    }

    .transport-map__context {
      stroke: #C8D8E0;
    }

    .transport-map__route {
      stroke: var(--accent);
    }

    .transport-map__route-shadow {
      stroke: #FFFFFF;
    }

    .transport-map__wsi-ring {
      fill: var(--accent);
    }

    .transport-map__wsi-core {
      fill: #FFFFFF;
      stroke: var(--accent);
    }

    .transport-map__wsi-label {
      fill: var(--ink);
    }

    .transport-map__micro-label,
    .transport-map__node-label {
      fill: var(--muted);
    }

    .transport-map__node .node-ring {
      fill: #F7FAFB;
      stroke: #8EA5B2;
    }

    .transport-map__node .node-core {
      fill: #8EA5B2;
    }

    .transport-map__node.is-selected .node-ring {
      fill: #FFFFFF;
      stroke: var(--accent);
    }

    .transport-map__node.is-selected .node-core {
      fill: var(--accent);
    }

    .transport-map__node.is-selected .transport-map__node-label {
      fill: var(--ink);
    }

    .transport-explorer__side {
      border-top-color: var(--aviation);
    }

    .destination-selector__button {
      color: var(--muted);
      border-bottom-color: var(--line);
    }

    .destination-selector__button:hover,
    .destination-selector__button:focus-visible,
    .destination-selector__button.is-selected {
      color: var(--ink);
    }

    .destination-selector__button::after {
      background: var(--accent);
    }


    .chapter--metro {
      background: var(--navy);
      color: #FFFFFF;
      border-top-color: #173956;
    }

    .chapter--metro .chapter__number {
      color: #FF5358;
    }

    .chapter--metro .chapter__title,
    .chapter--metro .chapter__dek,
    .chapter--metro .metro-step__metric,
    .chapter--metro .metro-step p,
    .chapter--metro .metro-step__eyebrow {
      color: #FFFFFF;
    }

    .chapter--metro .metro-step:not(.is-active) {
      opacity: .28;
    }

    .metro-diagram {
      background: #0A233A;
      border-color: #244761;
    }

    .metro-diagram::before {
      border-color: rgba(255,255,255,.09);
    }

    .metro-diagram__caption {
      color: #9DB5C3;
    }

    .metro-static-label,
    .metro-label {
      fill: #AAC0CC;
    }

    .metro-state-label {
      fill: #FFFFFF;
    }

    .metro-base-line {
      stroke: #284B65;
    }

    .metro-route--current {
      stroke: #DDE8EE;
    }

    .metro-route--future {
      stroke: var(--accent);
    }

    .metro-station-ring {
      fill: #0A233A;
      stroke: #FFFFFF;
    }

    .metro-station-core {
      fill: #FFFFFF;
    }

    [data-handoff="metro-wsi"] {
      fill: var(--accent);
    }

    .metro-chip {
      fill: #102D46;
      stroke: #8EABB9;
    }

    .metro-chip-text {
      fill: #FFFFFF;
    }

    .metro-vehicle-body {
      fill: #102D46;
      stroke: #DDE8EE;
    }

    .metro-vehicle-line {
      stroke: #DDE8EE;
    }

    .metro-vehicle-wheel {
      fill: #DDE8EE;
    }


    .chapter--community {
      background: var(--bg);
    }

    .community-map {
      background: #F4F8FA;
      border-color: #CEDAE0;
    }

    .community-map::before {
      border-color: rgba(18,58,90,.10);
    }

    .community-map__boundary {
      stroke: #91A9B5;
    }

    .community-map__district {
      fill: #DCE7ED;
      stroke: #F4F8FA;
    }

    .community-map__district--west {
      fill: rgba(18,58,90, calc(0.10 + 0.14 * var(--community-west)));
    }

    .community-map__highlight {
      fill: var(--accent);
      opacity: calc(var(--community-local) * .72);
    }

    .community-map__west-outline {
      stroke: var(--aviation);
    }

    .community-map__label,
    .community-map__small {
      fill: var(--muted);
    }

    .community-map__label--local,
    .community-map__small--local {
      fill: var(--aviation);
    }

    .community-callout__number {
      color: var(--accent);
    }

    .community-callout__label {
      color: var(--ink);
    }


    .chapter--finale {
      background: var(--navy);
      color: #FFFFFF;
      border-top-color: #173956;
    }

    .chapter--finale .chapter__number {
      color: #FF5358;
    }

    .chapter--finale .chapter__title,
    .chapter--finale .chapter__dek,
    .chapter--finale .editorial-copy,
    .chapter--finale .editorial-copy p {
      color: #FFFFFF;
    }

    .finale-map {
      background: #0A233A;
      border-color: #244761;
    }

    .finale-map::before {
      border-color: rgba(255,255,255,.09);
    }

    .finale-map__land {
      fill: rgba(255,255,255,.025);
    }

    .finale-map__outline {
      stroke: rgba(255,255,255,.46);
    }

    .finale-map__label,
    .finale-map__small {
      fill: #B4C7D2;
    }

    .finale-map__city circle {
      fill: #FFFFFF;
    }

    .finale-map__wsi circle:first-child {
      stroke: rgba(229,35,41,.66);
    }

    .finale-map__wsi circle:last-child,
    .finale-map__hcm circle {
      fill: var(--accent) !important;
    }

    .finale-map__route {
      stroke: var(--accent);
      stroke-width: 2.8;
    }

    .finale-scroll-cue {
      color: rgba(255,255,255,.52);
    }

    .finale-copy__eyebrow {
      color: #FF5C61;
    }

    .finale-copy__title {
      color: #FFFFFF;
    }

    .finale-copy__arrow {
      color: var(--accent);
    }

    .finale-copy__meta {
      position: relative;
      border-top: 0;
      padding-top: 10px;
    }

    .finale-copy__meta::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 72px;
      height: 2px;
      background: var(--gold);
    }

    .finale-copy__row {
      border-bottom-color: rgba(255,255,255,.14);
    }

    .finale-copy__term {
      color: #9FB7C4;
    }

    .finale-copy__value {
      color: #FFFFFF;
    }

    .finale-plane {
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.34));
    }


    .article-closing {
      background: #FFFFFF;
      border-top-color: var(--line);
    }

    .article-closing__inner::before {
      content: "";
      display: block;
      width: 72px;
      height: 2px;
      margin-bottom: 28px;
      background: var(--accent);
    }

    .article-closing p {
      color: var(--ink);
    }

    .article-closing__signature {
      margin-top: 36px;
      color: var(--aviation);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .article-closing__signature span {
      color: var(--accent);
    }


    .chapter-photo-break {
      background: transparent;
    }

    .chapter-photo-break img {
      filter: saturate(.94) contrast(1.03);
    }

    @media (max-width: 899px) {
      .hero-wsi__route-signature {
        margin-top: 14px;
        font-size: 9px;
        letter-spacing: .13em;
      }

      .compare-panel--wsi {
        background: var(--navy);
      }

      .chapter--metro,
      .chapter--finale {
        background: var(--navy);
      }

      .finale-copy__meta::before {
        width: 58px;
      }
    }


    


    .compare-panel--wsi,
    .chapter--compare.compare--curfew .compare-panel--wsi {
      background: #F3F7F9 !important;
      border-color: #C9D7DE !important;
      color: var(--ink) !important;
    }
    .compare-panel--wsi::before { border-color: rgba(18,58,90,.10) !important; }
    .compare-panel--wsi .compare-panel__eyebrow,
    .compare-panel--wsi .compare-panel__code { color: var(--muted) !important; }
    .compare-panel--wsi .compare-visual-label { fill: var(--muted) !important; }
    .compare-panel--wsi .compare-panel__tag,
    .chapter--compare.compare--curfew .compare-panel--wsi .compare-panel__tag {
      color: var(--aviation) !important;
      border-color: rgba(18,58,90,.30) !important;
    }
    .chapter--compare.compare--curfew .compare-panel--wsi .compare-panel__tag {
      color: var(--accent) !important;
      border-color: rgba(229,35,41,.34) !important;
    }
    .compare-panel--wsi .compare-visual-bg,
    .compare-panel--wsi .compare-visual-bg--wsi { fill: #EAF1F5 !important; }
    .compare-panel--wsi .compare-visual-ink { stroke: var(--aviation) !important; }
    .compare-panel--wsi .compare-flight-path { stroke: #86A3B3 !important; }
    .compare-panel--wsi .compare-aircraft path { fill: var(--aviation) !important; }
    .compare-panel--wsi .compare-visual-soft { fill: rgba(18,58,90,.08) !important; }
    .chapter--compare.compare--curfew .compare-panel--wsi .compare-runway-glow {
      fill: rgba(229,35,41,.12) !important;
    }
    .compare-panel--wsi .compare-day-timeline__title,
    .compare-panel--wsi .compare-day-timeline__tick text {
      fill: #FFD56A !important;
    }


    .chapter--metro {
      background: #FFFFFF !important;
      color: var(--ink) !important;
      border-top-color: var(--line) !important;
    }
    .chapter--metro .chapter__number { color: var(--accent) !important; }
    .chapter--metro .chapter__title,
    .chapter--metro .chapter__dek,
    .chapter--metro .metro-step__metric,
    .chapter--metro .metro-step p,
    .chapter--metro .metro-step__eyebrow { color: var(--ink) !important; }
    .metro-diagram {
      background: #F7FAFB !important;
      border-color: #C9D7DE !important;
    }
    .metro-diagram::before { border-color: rgba(18,58,90,.10) !important; }
    .metro-diagram__caption { color: var(--muted) !important; }
    .metro-static-label,
    .metro-label { fill: var(--muted) !important; }
    .metro-state-label { fill: var(--aviation) !important; }
    .metro-base-line { stroke: #B7C9D2 !important; }
    .metro-route--current { stroke: var(--aviation) !important; }
    .metro-route--future { stroke: var(--accent) !important; }
    .metro-station-ring { fill: #FFFFFF !important; stroke: var(--aviation) !important; }
    .metro-station-core { fill: var(--aviation) !important; }
    [data-handoff="metro-wsi"] { fill: var(--accent) !important; }
    .metro-chip { fill: #EAF1F5 !important; stroke: #9AB0BC !important; }
    .metro-chip-text { fill: var(--aviation) !important; }
    .metro-vehicle-body { fill: #FFFFFF !important; stroke: var(--aviation) !important; }
    .metro-vehicle-line { stroke: var(--aviation) !important; }
    .metro-vehicle-wheel { fill: var(--aviation) !important; }


    .chapter--finale {
      background: #FFFFFF !important;
      color: var(--ink) !important;
      border-top-color: var(--line) !important;
    }
    .chapter--finale .chapter__number { color: var(--accent) !important; }
    .chapter--finale .chapter__title,
    .chapter--finale .chapter__dek,
    .chapter--finale .editorial-copy,
    .chapter--finale .editorial-copy p { color: var(--ink) !important; }
    .finale-map {
      background: #F7FAFB !important;
      border-color: #C9D7DE !important;
    }
    .finale-map::before { border-color: rgba(18,58,90,.10) !important; }
    .finale-map__land { fill: rgba(18,58,90,.025) !important; }
    .finale-map__outline { stroke: rgba(18,58,90,.58) !important; }
    .finale-map__label,
    .finale-map__small { fill: var(--muted) !important; }
    .finale-map__city circle { fill: var(--aviation) !important; }
    .finale-map__wsi circle:first-child { stroke: rgba(229,35,41,.54) !important; }
    .finale-map__wsi circle:last-child,
    .finale-map__hcm circle { fill: var(--accent) !important; }
    .finale-map__route { stroke: var(--accent) !important; }
    .finale-scroll-cue { color: var(--muted) !important; }
    .finale-copy__eyebrow { color: var(--accent) !important; }
    .finale-copy__title { color: var(--ink) !important; }
    .finale-copy__arrow { color: var(--accent) !important; }
    .finale-copy__row { border-bottom-color: var(--line) !important; }
    .finale-copy__term { color: var(--muted) !important; }
    .finale-copy__value { color: var(--ink) !important; }
    .finale-plane { filter: drop-shadow(0 3px 8px rgba(7,27,51,.18)) !important; }

    @media (max-width: 899px) {
      .compare-panel--wsi { background: #F3F7F9 !important; }
      .chapter--metro,
      .chapter--finale { background: #FFFFFF !important; }
    }


    :root {
      --bg: #FFF7F1;
      --paper: #FFFFFF;
      --ink: #291A1A;
      --muted: #806762;
      --line: #EAD5CC;
      --soft: #F8E7DE;
      --accent: #F3132B;
      --accent-deep: #C80D20;
      --orange: #FF5908;
      --orange-light: #FF8A18;
      --gold: #F5B83D;
      --cream: #FFF0E3;
      --peach: #F7CDBB;
      --blush: #FBE1D7;
      --aviation: #5A3532;
      --blue-soft: #F7D9CC;
      --navy: #5A0714;
      --map-water: #D9E4E7;
      --map-context: #B6A5A0;
      --story-active: #F3132B;
    }

    html, body { background: var(--bg); color: var(--ink); }
    .scroll-progress__bar { background: var(--accent); }
    .chapter { border-top-color: var(--line); }
    .chapter__number { color: var(--accent); }
    .chapter__dek,
    .chapter__copy,
    .editorial-copy,
    .scale-step p,
    .community-step p,
    .transport-info__description,
    .hero-body__copy,
    .hero-body__sapo { color: var(--ink); }


    .hero--wsi,
    .hero-wsi__sticky { background: #350611; }
    .hero-wsi__shade {
      background:
        linear-gradient(180deg,
          rgba(49,4,11,.03) 0%,
          rgba(49,4,11,.08) 28%,
          rgba(67,5,15,.18) 52%,
          rgba(56,5,13,.62) 100%),
        linear-gradient(90deg,
          rgba(67,5,15,.82) 0%,
          rgba(91,7,18,.62) 18%,
          rgba(176,12,29,.26) 40%,
          rgba(255,89,8,.07) 67%,
          rgba(255,89,8,0) 100%);
    }
    .hero-wsi__route-signature { color: #FFD16A; }
    .hero-body { background: #FFFFFF; border-top-color: rgba(200,13,32,.14); }
    .hero-body__aside::before { background: var(--accent); }
    .hero-body__aside img,
    .chapter-photo-break img { border-color: rgba(128,65,55,.18); filter: saturate(1.02) contrast(1.025); }


    .chapter--scale { background: var(--bg); }
    .scale-stage { background: #FFFDF9; border-color: #E3C9BE; }
    .scale-stage::before { border-color: rgba(90,53,50,.10); }
    .scale-outline { stroke: #4C2727; }
    .scale-outline--syd { stroke: #BCA49E; }
    .scale-soft-fill { fill: rgba(243,19,43,.035); }
    .scale-ui-label { fill: #5A3532; }
    .scale-ui-small { fill: var(--muted); }
    .scale-runway-body rect { fill: #FFFFFF; stroke: #5A3532; }
    .scale-runway-body line { stroke: #5A3532; }
    #scale-person-outline circle,
    #scale-person-outline rect { fill: #FBE1D7; stroke: #C99A8C; }
    #scale-person-solid circle,
    #scale-person-solid rect { fill: var(--accent); stroke: var(--accent); }


    .chapter--compare { background: var(--paper); }
    .compare-panel--syd,
    .chapter--compare.compare--curfew .compare-panel--syd {
      background: #F3EFEA;
      border-color: #E2D5CF;
      color: #342525;
    }
    .compare-panel--syd::before { border-color: rgba(90,53,50,.08); }
    .compare-panel--syd .compare-visual-bg { fill: #EFE8E3; }
    .compare-panel--syd .compare-visual-ink,
    .compare-panel--syd .compare-flight-path { stroke: #6E615E; }
    .compare-panel--syd .compare-aircraft path { fill: #6E615E; }
    .compare-panel--syd .compare-visual-soft { fill: rgba(90,53,50,.07); }

    .compare-panel--wsi,
    .chapter--compare.compare--curfew .compare-panel--wsi {
      background: linear-gradient(135deg, #C80D20 0%, #F3132B 46%, #FF5908 100%) !important;
      border-color: #E33A2D !important;
      color: #FFFFFF !important;
    }
    .compare-panel--wsi::before { border-color: rgba(255,255,255,.16) !important; }
    .compare-panel--wsi .compare-panel__eyebrow,
    .compare-panel--wsi .compare-panel__code { color: rgba(255,255,255,.72) !important; }
    .compare-panel--wsi .compare-visual-label { fill: rgba(255,255,255,.74) !important; }
    .compare-panel--wsi .compare-panel__tag,
    .chapter--compare.compare--curfew .compare-panel--wsi .compare-panel__tag {
      color: #FFE19A !important;
      border-color: rgba(255,225,154,.72) !important;
    }
    .compare-panel--wsi .compare-visual-bg,
    .compare-panel--wsi .compare-visual-bg--wsi { fill: rgba(116,8,22,.22) !important; }
    .compare-panel--wsi .compare-visual-ink { stroke: #FFFFFF !important; }
    .compare-panel--wsi .compare-flight-path { stroke: rgba(255,255,255,.62) !important; }
    .compare-panel--wsi .compare-aircraft path { fill: #FFFFFF !important; }
    .compare-panel--wsi .compare-visual-soft { fill: rgba(255,255,255,.10) !important; }
    .chapter--compare.compare--curfew .compare-panel--wsi .compare-runway-glow {
      fill: rgba(255,216,112,.30) !important;
      opacity: 1;
    }
    .compare-track__line { background: #E3D0C8; }
    .compare-track__fill { background: var(--accent); }
    .compare-track__tick::before { background: #CFAEA3; }
    .compare-track__knob { border-color: var(--accent); background: #FFFFFF; }
    .compare-track__knob::after { background: var(--accent); }


    .chapter--destinations { background: #FFF9F5; }
    .transport-map { background: #FFF2E8; border-top-color: #7E463F; border-bottom-color: var(--line); }
    .transport-map__land { fill: #FFF7F2; }
    .transport-map__water { stroke: var(--map-water); }
    .transport-map__context { stroke: #DEC9C0; }
    .transport-map__route { stroke: var(--accent); }
    .transport-map__route-shadow { stroke: #FFFFFF; }
    .transport-map__wsi-ring { fill: var(--accent); }
    .transport-map__wsi-core { fill: #FFFFFF; stroke: var(--accent); }
    .transport-map__wsi-label { fill: var(--ink); }
    .transport-map__micro-label,
    .transport-map__node-label { fill: var(--muted); }
    .transport-map__node .node-ring { fill: #FFF7F2; stroke: #B9998E; }
    .transport-map__node .node-core { fill: #B9998E; }
    .transport-map__node.is-selected .node-ring { fill: #FFFFFF; stroke: var(--orange); }
    .transport-map__node.is-selected .node-core { fill: var(--orange); }
    .transport-map__node.is-selected .transport-map__node-label { fill: var(--ink); }
    .transport-explorer__side { border-top-color: #7E463F; }
    .destination-selector__button { color: var(--muted); border-bottom-color: var(--line); }
    .destination-selector__button:hover,
    .destination-selector__button:focus-visible,
    .destination-selector__button.is-selected { color: var(--ink); }
    .destination-selector__button::after { background: var(--orange); }


    .chapter--metro {
      background: var(--bg) !important;
      color: var(--ink) !important;
      border-top-color: var(--line) !important;
    }
    .chapter--metro .chapter__number { color: var(--accent) !important; }
    .chapter--metro .chapter__title,
    .chapter--metro .chapter__dek,
    .chapter--metro .metro-step__metric,
    .chapter--metro .metro-step p,
    .chapter--metro .metro-step__eyebrow { color: var(--ink) !important; }
    .metro-diagram { background: #FFFDF9 !important; border-color: #E3C9BE !important; }
    .metro-diagram::before { border-color: rgba(90,53,50,.10) !important; }
    .metro-diagram__caption { color: var(--muted) !important; }
    .metro-static-label,
    .metro-label { fill: var(--muted) !important; }
    .metro-state-label { fill: #5A3532 !important; }
    .metro-base-line { stroke: #DCC8C0 !important; }
    .metro-route--current { stroke: #5A3532 !important; }
    .metro-route--future { stroke: var(--orange) !important; }
    .metro-station-ring { fill: #FFFFFF !important; stroke: #5A3532 !important; }
    .metro-station-core { fill: #5A3532 !important; }
    [data-handoff="metro-wsi"] { fill: var(--accent) !important; }
    .metro-chip { fill: #FFF0E3 !important; stroke: #CFAEA3 !important; }
    .metro-chip-text { fill: #5A3532 !important; }
    .metro-vehicle-body { fill: #FFFFFF !important; stroke: #5A3532 !important; }
    .metro-vehicle-line { stroke: #5A3532 !important; }
    .metro-vehicle-wheel { fill: #5A3532 !important; }


    .chapter--community { background: var(--bg); }
    .community-map { background: #FFF4EC; border-color: #E3C9BE; }
    .community-map::before { border-color: rgba(90,53,50,.10); }
    .community-map__boundary { stroke: #BA8E81; }
    .community-map__district { fill: #F2DED5; stroke: #FFF4EC; }
    .community-map__district--west { fill: rgba(243,19,43, calc(0.08 + 0.12 * var(--community-west))); }
    .community-map__highlight { fill: var(--accent); opacity: calc(var(--community-local) * .78); }
    .community-map__west-outline { stroke: #8C4A41; }
    .community-map__label,
    .community-map__small { fill: var(--muted); }
    .community-map__label--local,
    .community-map__small--local { fill: #6B302C; }
    .community-callout__number { color: var(--accent); }
    .community-callout__label { color: var(--ink); }


    .chapter--finale {
      background:
        radial-gradient(circle at 74% 35%, rgba(255,157,43,.92) 0%, rgba(255,89,8,.54) 26%, rgba(255,89,8,0) 52%),
        linear-gradient(135deg, #B80A1D 0%, #F3132B 45%, #FF5908 100%) !important;
      color: #FFFFFF !important;
      border-top-color: rgba(255,255,255,.16) !important;
    }
    .chapter--finale .chapter__number { color: #FFD56A !important; }
    .chapter--finale .chapter__title,
    .chapter--finale .chapter__dek,
    .chapter--finale .editorial-copy,
    .chapter--finale .editorial-copy p { color: #FFFFFF !important; }
    .finale-map {
      background: rgba(104,6,19,.20) !important;
      border-color: rgba(255,255,255,.30) !important;
    }
    .finale-map::before { border-color: rgba(255,255,255,.12) !important; }
    .finale-map__land { fill: rgba(255,255,255,.045) !important; }
    .finale-map__outline { stroke: rgba(255,255,255,.64) !important; }
    .finale-map__label,
    .finale-map__small { fill: rgba(255,255,255,.72) !important; }
    .finale-map__city circle { fill: #FFF2CF !important; }
    .finale-map__wsi circle:first-child { stroke: rgba(255,222,118,.82) !important; }
    .finale-map__wsi circle:last-child,
    .finale-map__hcm circle { fill: #FFD35E !important; }
    .finale-map__route { stroke: #FFD35E !important; stroke-width: 2.8; }
    .finale-scroll-cue { color: rgba(255,255,255,.66) !important; }
    .finale-map__caption { color: rgba(255,255,255,.58); }
    .finale-copy__eyebrow { color: #FFD56A !important; }
    .finale-copy__title { color: #FFFFFF !important; }
    .finale-copy__arrow { color: #FFD56A !important; }
    .finale-copy__meta::before { background: #FFD56A; }
    .finale-copy__row { border-bottom-color: rgba(255,255,255,.22) !important; }
    .finale-copy__term { color: rgba(255,255,255,.68) !important; }
    .finale-copy__value { color: #FFFFFF !important; }
    .finale-plane { filter: drop-shadow(0 5px 12px rgba(82,2,12,.34)) !important; }


    .article-closing { background: #FFFFFF; border-top-color: var(--line); }
    .article-closing__inner::before { background: var(--accent); }
    .article-closing p { color: var(--ink); }
    .article-closing__signature { color: #6B302C; }
    .article-closing__signature span { color: var(--accent); }

    @media (max-width: 899px) {
      .compare-panel--wsi,
      .chapter--compare.compare--curfew .compare-panel--wsi {
        background: linear-gradient(135deg, #C80D20 0%, #F3132B 50%, #FF5908 100%) !important;
      }
      .chapter--metro { background: var(--bg) !important; }
      .metro-story__graphic-wrap { background: var(--bg) !important; }
      .scale-step::before,
      .community-step::before,
      .step::before {
        background: linear-gradient(to bottom, rgba(255,247,241,0), rgba(255,247,241,.96) 30%, rgba(255,247,241,1)) !important;
      }
      .chapter--scrolly .step::before,
      .chapter--metro .step::before,
      .metro-step::before {
        background: linear-gradient(to bottom, rgba(255,247,241,0), rgba(255,247,241,.96) 30%, rgba(255,247,241,1)) !important;
      }
      .chapter--finale {
        background:
          radial-gradient(circle at 78% 28%, rgba(255,157,43,.86) 0%, rgba(255,89,8,.48) 24%, rgba(255,89,8,0) 48%),
          linear-gradient(150deg, #B80A1D 0%, #F3132B 50%, #FF5908 100%) !important;
      }
    }


    .hero-wsi__shade {
      background:
        linear-gradient(180deg,
          rgba(53, 6, 17, 0.00) 0%,
          rgba(53, 6, 17, 0.04) 58%,
          rgba(53, 6, 17, 0.20) 100%),
        linear-gradient(98deg,
          rgba(188, 11, 31, 0.98) 0%,
          rgba(188, 11, 31, 0.96) 14%,
          rgba(219, 43, 32, 0.94) 28%,
          rgba(252, 105, 35, 0.90) 43%,
          rgba(252, 105, 35, 0.72) 49%,
          rgba(252, 105, 35, 0.34) 55%,
          rgba(252, 105, 35, 0.10) 59%,
          rgba(252, 105, 35, 0.00) 64%);
    }


    @media (max-width: 899px) {
      .hero-wsi__shade {
        background:
          linear-gradient(180deg,
            rgba(53, 6, 17, 0.00) 0%,
            rgba(53, 6, 17, 0.05) 52%,
            rgba(53, 6, 17, 0.24) 100%),
          linear-gradient(100deg,
            rgba(188, 11, 31, 0.97) 0%,
            rgba(188, 11, 31, 0.95) 18%,
            rgba(221, 47, 31, 0.91) 36%,
            rgba(252, 105, 35, 0.82) 53%,
            rgba(252, 105, 35, 0.42) 64%,
            rgba(252, 105, 35, 0.12) 72%,
            rgba(252, 105, 35, 0.00) 80%);
      }
    }


    .hero-wsi__shade {
      background:
        radial-gradient(
          ellipse 46% 52% at 4% 100%,
          rgba(188, 11, 31, 0.98) 0%,
          rgba(214, 34, 33, 0.95) 22%,
          rgba(252, 105, 35, 0.72) 40%,
          rgba(252, 105, 35, 0.18) 54%,
          rgba(252, 105, 35, 0.00) 64%
        ),
        linear-gradient(
          180deg,
          rgba(8, 11, 11, 0.00) 0%,
          rgba(8, 11, 11, 0.00) 64%,
          rgba(8, 11, 11, 0.10) 84%,
          rgba(8, 11, 11, 0.22) 100%
        ) !important;
    }

    .hero-body__sapo {
      font-size: clamp(18px, 1.56vw, 24px) !important;
    }

    .chapter--scale .chapter__title,
    .chapter--compare .chapter__title,
    .chapter--destinations .chapter__title,
    .chapter--metro .chapter__title,
    .chapter--community .chapter__title {
      font-size: clamp(35px, 4.64vw, 70px) !important;
    }

    .finale-copy__title {
      font-size: clamp(34px, 4.24vw, 64px) !important;
    }

    .chapter--scale {
      background: #fff3ee !important;
    }
    .scale-stage {
      background: #ffe5d8 !important;
      border-color: #e7b29b !important;
    }
    .scale-stage::before {
      border-color: rgba(154, 83, 53, 0.12) !important;
    }

    .chapter--destinations {
      background: #fff1eb !important;
    }
    .transport-map {
      background: #ffe1d4 !important;
      border-top-color: #d7663a !important;
      border-bottom-color: #ebc5b5 !important;
    }
    .transport-map__land {
      fill: #fff0e7 !important;
    }

    .chapter--metro {
      background: #fff2ec !important;
      color: var(--ink) !important;
      border-top-color: var(--line) !important;
    }
    .metro-diagram {
      background: #ffe6db !important;
      border-color: #e7bba7 !important;
    }
    .metro-diagram::before {
      border-color: rgba(154, 83, 53, 0.10) !important;
    }

    .chapter--community {
      background: #fff3ee !important;
    }
    .community-map {
      background: #ffe7db !important;
      border-color: #e8beac !important;
    }
    .community-map::before {
      border-color: rgba(154, 83, 53, 0.10) !important;
    }

    @media (max-width: 899px) {
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 70% 56% at 6% 100%,
            rgba(188,11,31,.98) 0%,
            rgba(214,34,33,.95) 24%,
            rgba(252,105,35,.72) 42%,
            rgba(252,105,35,.20) 58%,
            rgba(252,105,35,0) 68%
          ),
          linear-gradient(180deg, rgba(8,11,11,0) 0%, rgba(8,11,11,.03) 64%, rgba(8,11,11,.24) 100%) !important;
      }

      .finale-copy__title {
        font-size: clamp(30px, 8.8vw, 46px) !important;
      }
    }


    .hero-wsi__shade {
      background:
        radial-gradient(
          ellipse 46% 104% at 4% 100%,
          rgba(188, 11, 31, 0.98) 0%,
          rgba(210, 29, 29, 0.94) 18%,
          rgba(235, 67, 31, 0.86) 34%,
          rgba(252, 105, 35, 0.64) 50%,
          rgba(252, 105, 35, 0.24) 64%,
          rgba(252, 105, 35, 0.00) 78%
        ),
        linear-gradient(
          180deg,
          rgba(8, 11, 11, 0.00) 0%,
          rgba(8, 11, 11, 0.00) 64%,
          rgba(8, 11, 11, 0.08) 84%,
          rgba(8, 11, 11, 0.18) 100%
        ) !important;
    }


    .chapter--scale {
      background:
        radial-gradient(circle at 10% 10%, rgba(252,105,35,.075), transparent 34%),
        linear-gradient(180deg, #fff9f2 0%, #fff2e5 52%, #fff8f0 100%) !important;
    }
    .scale-stage {
      background: #ffead8 !important;
      border-color: #efc19e !important;
    }
    .scale-stage::before {
      border-color: rgba(197, 94, 45, 0.12) !important;
    }

    .chapter--destinations {
      background:
        radial-gradient(circle at 88% 14%, rgba(252,105,35,.065), transparent 32%),
        linear-gradient(180deg, #fff8f0 0%, #fff0e0 56%, #fff8f1 100%) !important;
    }
    .transport-map {
      background: #ffe9d7 !important;
      border-top-color: #e77a46 !important;
      border-bottom-color: #efc8aa !important;
    }
    .transport-map__land {
      fill: #fff6ec !important;
    }
    .transport-map__wsi-core,
    .transport-map__node .node-ring {
      fill: #fff6ec !important;
    }

    .chapter--metro {
      background:
        radial-gradient(circle at 12% 8%, rgba(252,105,35,.07), transparent 34%),
        linear-gradient(180deg, #fff8f0 0%, #fff1e2 54%, #fff8f1 100%) !important;
      color: var(--ink) !important;
      border-top-color: var(--line) !important;
    }
    .metro-diagram {
      background: #ffead9 !important;
      border-color: #efc4a6 !important;
    }
    .metro-diagram::before {
      border-color: rgba(197, 94, 45, 0.10) !important;
    }

    .chapter--community {
      background:
        radial-gradient(circle at 86% 12%, rgba(252,105,35,.07), transparent 34%),
        linear-gradient(180deg, #fff9f2 0%, #fff1e3 55%, #fff8f0 100%) !important;
    }
    .community-map {
      background: #ffead9 !important;
      border-color: #efc3a4 !important;
    }
    .community-map::before {
      border-color: rgba(197, 94, 45, 0.10) !important;
    }

    @media (max-width: 899px) {
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 70% 112% at 6% 100%,
            rgba(188,11,31,.98) 0%,
            rgba(210,29,29,.94) 18%,
            rgba(235,67,31,.86) 34%,
            rgba(252,105,35,.62) 50%,
            rgba(252,105,35,.22) 64%,
            rgba(252,105,35,0) 78%
          ),
          linear-gradient(180deg, rgba(8,11,11,0) 0%, rgba(8,11,11,.02) 64%, rgba(8,11,11,.18) 100%) !important;
      }
    }


    .hero-wsi__shade {
      background:
        radial-gradient(
          ellipse 52% 118% at 2% 100%,
          rgba(188, 11, 31, 0.98) 0%,
          rgba(205, 22, 32, 0.96) 18%,
          rgba(228, 52, 31, 0.88) 34%,
          rgba(252, 105, 35, 0.66) 50%,
          rgba(252, 105, 35, 0.28) 66%,
          rgba(252, 105, 35, 0.08) 76%,
          rgba(252, 105, 35, 0.00) 84%
        ),
        linear-gradient(
          180deg,
          rgba(8, 11, 11, 0.00) 0%,
          rgba(8, 11, 11, 0.00) 58%,
          rgba(8, 11, 11, 0.10) 84%,
          rgba(8, 11, 11, 0.22) 100%
        ) !important;
    }

    .chapter--compare .chapter__dek,
    .chapter--compare .editorial-copy,
    .chapter--compare .editorial-copy p,
    .chapter--destinations .chapter__dek,
    .chapter--destinations .editorial-copy,
    .chapter--destinations .editorial-copy p {
      font-size: clamp(18px, 1.25vw, 21px) !important;
      line-height: 1.68 !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      max-width: 760px;
    }

    .chapter--compare .chapter__dek,
    .chapter--destinations .chapter__dek {
      margin-top: 24px !important;
    }

    .chapter--compare .editorial-copy,
    .chapter--destinations .editorial-copy {
      margin-top: 22px;
    }

    .chapter--compare .editorial-copy p,
    .chapter--destinations .editorial-copy p {
      margin: 0 0 1.3em;
    }

    @media (max-width: 899px) {
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 78% 132% at 2% 100%,
            rgba(188,11,31,.98) 0%,
            rgba(205,22,32,.96) 20%,
            rgba(228,52,31,.88) 36%,
            rgba(252,105,35,.66) 52%,
            rgba(252,105,35,.28) 66%,
            rgba(252,105,35,.08) 76%,
            rgba(252,105,35,0) 84%
          ),
          linear-gradient(180deg, rgba(8,11,11,0) 0%, rgba(8,11,11,.03) 60%, rgba(8,11,11,.24) 100%) !important;
      }

      .chapter--compare .chapter__dek,
      .chapter--compare .editorial-copy,
      .chapter--compare .editorial-copy p,
      .chapter--destinations .chapter__dek,
      .chapter--destinations .editorial-copy,
      .chapter--destinations .editorial-copy p {
        font-size: 17px !important;
        line-height: 1.66 !important;
      }
    }


    .hero-wsi__shade {
      background:
        radial-gradient(
          ellipse 56% 240% at 0% 100%,
          rgba(188, 11, 31, 0.99) 0%,
          rgba(205, 22, 32, 0.97) 16%,
          rgba(228, 52, 31, 0.90) 32%,
          rgba(252, 105, 35, 0.72) 48%,
          rgba(252, 105, 35, 0.34) 64%,
          rgba(252, 105, 35, 0.12) 76%,
          rgba(252, 105, 35, 0.03) 84%,
          rgba(252, 105, 35, 0.00) 90%
        ),
        linear-gradient(
          180deg,
          rgba(8, 11, 11, 0.00) 0%,
          rgba(8, 11, 11, 0.00) 56%,
          rgba(8, 11, 11, 0.10) 84%,
          rgba(8, 11, 11, 0.22) 100%
        ) !important;
    }

    .chapter--scale,
    .chapter--compare,
    .chapter--destinations,
    .chapter--metro,
    .chapter--community {
      background: #ffffff !important;
    }

    @media (max-width: 899px) {
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 88% 260% at 0% 100%,
            rgba(188,11,31,.99) 0%,
            rgba(205,22,32,.97) 16%,
            rgba(228,52,31,.90) 34%,
            rgba(252,105,35,.72) 50%,
            rgba(252,105,35,.34) 64%,
            rgba(252,105,35,.12) 76%,
            rgba(252,105,35,.03) 84%,
            rgba(252,105,35,0) 90%
          ),
          linear-gradient(180deg, rgba(8,11,11,0) 0%, rgba(8,11,11,.03) 60%, rgba(8,11,11,.24) 100%) !important;
      }
    }


    .hero-wsi__shade {
      background:
        radial-gradient(
          ellipse 60% 480% at 0% 100%,
          rgba(188, 11, 31, 0.99) 0%,
          rgba(205, 22, 32, 0.97) 14%,
          rgba(228, 52, 31, 0.90) 28%,
          rgba(252, 105, 35, 0.74) 44%,
          rgba(252, 105, 35, 0.38) 60%,
          rgba(252, 105, 35, 0.14) 74%,
          rgba(252, 105, 35, 0.04) 84%,
          rgba(252, 105, 35, 0.00) 90%
        ),
        linear-gradient(
          180deg,
          rgba(8, 11, 11, 0.00) 0%,
          rgba(8, 11, 11, 0.00) 56%,
          rgba(8, 11, 11, 0.10) 84%,
          rgba(8, 11, 11, 0.22) 100%
        ) !important;
    }

    body,
    .hero-body,
    .chapter--scale,
    .chapter--compare,
    .chapter--destinations,
    .chapter--metro,
    .chapter--community,
    .chapter-photo-break {
      background: #ffffff !important;
    }

    .chapter,
    .hero-body,
    .compare-timeline,
    .transport-map,
    .transport-explorer__side,
    .destination-selector,
    .destination-selector__button,
    .transport-info__meta,
    .transport-info__meta-item + .transport-info__meta-item,
    .finale-copy__meta,
    .finale-copy__row {
      border-top: none !important;
      border-bottom: none !important;
      border-left: none !important;
    }

    .chapter:first-child {
      border-top: none !important;
    }

    @media (max-width: 899px) {
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 92% 500% at 0% 100%,
            rgba(188,11,31,.99) 0%,
            rgba(205,22,32,.97) 16%,
            rgba(228,52,31,.90) 30%,
            rgba(252,105,35,.74) 46%,
            rgba(252,105,35,.38) 62%,
            rgba(252,105,35,.14) 74%,
            rgba(252,105,35,.04) 84%,
            rgba(252,105,35,0) 90%
          ),
          linear-gradient(180deg, rgba(8,11,11,0) 0%, rgba(8,11,11,.03) 60%, rgba(8,11,11,.24) 100%) !important;
      }
    }


    .hero-wsi__brandline {
      display: flex;
      align-items: flex-end;
      gap: clamp(12px, 1.2vw, 20px);
      margin: 0 0 18px;
      white-space: nowrap;
    }

    .hero-wsi__brand {
      display: block;
      font-size: clamp(86px, 8.8vw, 150px);
      line-height: 0.78;
      letter-spacing: -0.075em;
      font-weight: 850;
    }

    .hero-wsi__brandline .hero-wsi__lead {
      display: block;
      margin: 0 0 0.06em;
      font-size: clamp(28px, 2.35vw, 44px);
      line-height: 1;
      letter-spacing: -0.035em;
      font-weight: 500;
    }

    .hero-wsi__headline {
      font-size: clamp(42px, 3.75vw, 64px) !important;
      line-height: 0.98;
      letter-spacing: -0.045em;
      font-weight: 400 !important;
    }

    .transport-explorer__header {
      max-width: none;
    }

    .chapter--destinations .chapter__dek {
      max-width: 900px;
    }

    .transport-keyfacts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(28px, 3.5vw, 54px);
      margin-top: clamp(44px, 5vw, 72px);
      padding-top: 2px;
    }

    .transport-keyfact {
      position: relative;
      min-width: 0;
      padding: 22px 0 0;
    }

    .transport-keyfact::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #bc0b1f 0%, #fc6923 74%, rgba(252,105,35,0.12) 100%);
    }

    .transport-keyfact__eyebrow {
      margin: 0 0 14px;
      color: #bc0b1f;
      font-size: 11px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .transport-keyfact__metric {
      margin: 0;
      color: var(--ink);
      font-size: clamp(32px, 3vw, 48px);
      line-height: .96;
      letter-spacing: -0.045em;
      font-weight: 800;
    }

    .transport-keyfact__metric strong {
      color: #bc0b1f;
      font-size: 1.42em;
      line-height: .7;
      letter-spacing: -0.07em;
    }

    .transport-keyfact__routes {
      margin: 15px 0 0;
      color: #e94a22;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .transport-keyfact__detail {
      margin: 18px 0 0;
      color: #2f2b29;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(16px, 1.06vw, 18px);
      line-height: 1.62;
      font-weight: 400;
    }

    .transport-keyfacts__takeaway {
      position: relative;
      max-width: 940px;
      margin: clamp(44px, 5vw, 72px) 0 0;
      padding: 24px 0 0 28px;
      color: #262321;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.25vw, 21px);
      line-height: 1.64;
      font-weight: 500;
    }

    .transport-keyfacts__takeaway::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #fc6923;
    }

    @media (max-width: 899px) {
      .hero-wsi__brandline {
        gap: 10px;
        margin-bottom: 16px;
      }

      .hero-wsi__brand {
        font-size: clamp(66px, 19vw, 94px);
        line-height: .8;
      }

      .hero-wsi__brandline .hero-wsi__lead {
        font-size: clamp(22px, 6vw, 29px);
      }

      .hero-wsi__headline {
        font-size: clamp(36px, 9.6vw, 48px) !important;
      }

      .transport-keyfacts {
        grid-template-columns: 1fr;
        gap: 34px;
        margin-top: 36px;
      }

      .transport-keyfact {
        padding-top: 18px;
      }

      .transport-keyfact__metric {
        font-size: clamp(30px, 9vw, 42px);
      }

      .transport-keyfact__detail {
        font-size: 16px;
        line-height: 1.6;
      }

      .transport-keyfacts__takeaway {
        margin-top: 38px;
        padding: 20px 0 0 20px;
        font-size: 17px;
        line-height: 1.62;
      }
    }


    .hero-body__intro {
      max-width: 900px;
    }

    .hero-body__copy--intro {
      max-width: 760px;
    }

    .vietjet-moment {
      position: relative;
      margin-top: clamp(84px, 9vw, 142px);
      padding-top: clamp(28px, 3vw, 42px);
    }

    .vietjet-moment::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: min(310px, 32vw);
      height: 4px;
      background: linear-gradient(90deg, #bc0b1f 0%, #fc6923 72%, rgba(252,105,35,0) 100%);
    }

    .vietjet-moment__heading {
      display: grid;
      grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
      gap: clamp(28px, 5vw, 82px);
      align-items: start;
      margin-bottom: clamp(36px, 4.5vw, 64px);
    }

    .vietjet-moment__kicker {
      margin: 7px 0 0;
      color: #bc0b1f;
      font-size: 11px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .vietjet-moment__title {
      margin: 0;
      max-width: 920px;
      color: var(--ink);
      font-size: clamp(40px, 4.6vw, 72px);
      line-height: .98;
      letter-spacing: -.052em;
      font-weight: 760;
      text-wrap: balance;
    }

    .vietjet-moment__title span {
      display: block;
      margin-bottom: .08em;
      color: #bc0b1f;
      font-size: 1.28em;
      line-height: .84;
      letter-spacing: -.07em;
      font-weight: 850;
    }

    .vietjet-moment__figure {
      margin: 0;
      width: 100%;
    }

    .vietjet-moment__figure img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: 50% 47%;
      background: #f5f2ee;
    }

    .vietjet-moment__figure figcaption {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 13px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .vietjet-moment__rail {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: clamp(34px, 4vw, 54px);
      border-top: 1px solid rgba(41,26,26,.18);
      border-bottom: 1px solid rgba(41,26,26,.18);
    }

    .vietjet-moment__stat {
      min-width: 0;
      padding: clamp(20px, 2vw, 28px) clamp(18px, 2.5vw, 34px) clamp(22px, 2.2vw, 30px) 0;
    }

    .vietjet-moment__stat + .vietjet-moment__stat {
      padding-left: clamp(18px, 2.5vw, 34px);
      border-left: 1px solid rgba(41,26,26,.18);
    }

    .vietjet-moment__stat-label {
      display: block;
      margin-bottom: 10px;
      color: #bc0b1f;
      font-size: 10px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .vietjet-moment__stat strong {
      display: block;
      color: var(--ink);
      font-size: clamp(22px, 2.1vw, 34px);
      line-height: 1.02;
      letter-spacing: -.035em;
      font-weight: 800;
      text-wrap: balance;
    }

    .vietjet-moment__copy {
      margin-top: clamp(42px, 5vw, 68px);
      max-width: 760px;
    }

    @media (max-width: 899px) {
      .vietjet-moment {
        margin-top: 72px;
        padding-top: 26px;
      }

      .vietjet-moment::before {
        width: 190px;
        height: 3px;
      }

      .vietjet-moment__heading {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 30px;
      }

      .vietjet-moment__kicker {
        margin-top: 0;
        font-size: 10px;
      }

      .vietjet-moment__title {
        font-size: clamp(34px, 9.5vw, 50px);
        line-height: .98;
      }

      .vietjet-moment__title span {
        font-size: 1.22em;
      }

      .vietjet-moment__figure img {
        aspect-ratio: 4 / 3;
        object-position: 50% 49%;
      }

      .vietjet-moment__figure figcaption {
        flex-direction: column;
        gap: 4px;
        font-size: 9px;
      }

      .vietjet-moment__rail {
        grid-template-columns: 1fr;
        margin-top: 30px;
      }

      .vietjet-moment__stat {
        padding: 18px 0 20px;
      }

      .vietjet-moment__stat + .vietjet-moment__stat {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(41,26,26,.14);
      }

      .vietjet-moment__stat strong {
        font-size: 26px;
      }

      .vietjet-moment__copy {
        margin-top: 34px;
      }
    }


    .chapter--technology {
      --tech-terminal: 1;
      --tech-baggage-photo: 0;
      --tech-runway-photo: 0;
      --tech-title-opacity: 1;
      --tech-title-shift: 0;
      --tech-intro-copy: 0;
      --tech-baggage-copy: 0;
      --tech-runway-copy: 0;
      --tech-finale-copy: 0;
      --tech-darken: .18;
      min-height: 560vh;
      background: #000;
      color: #fff;
      border: 0 !important;
    }

    .tech-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100svh;
      overflow: hidden;
      background: #090909;
    }

    .tech-stage,
    .tech-media,
    .tech-photo {
      position: absolute;
      inset: 0;
    }

    .tech-stage {
      isolation: isolate;
      overflow: hidden;
    }

    .tech-media {
      z-index: 0;
      background: #090909;
    }

    .tech-photo {
      margin: 0;
      overflow: hidden;
      will-change: opacity, transform;
    }

    .tech-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.025);
    }

    .tech-photo--terminal {
      opacity: var(--tech-terminal);
      transform: scale(calc(.99 + .015 * var(--tech-terminal)));
    }

    .tech-photo--baggage {
      opacity: var(--tech-baggage-photo);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      background: #111;
      transform: translateY(calc(24px * (1 - var(--tech-baggage-photo))));
    }

    .tech-baggage__item {
      position: relative;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      background: #111;
    }

    .tech-baggage__item img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .tech-baggage__item--system img { object-position: center; }
    .tech-baggage__item--vietjet img { object-position: 58% center; }

    .tech-photo--runway {
      opacity: var(--tech-runway-photo);
      transform: scale(calc(1.04 - .02 * var(--tech-runway-photo)));
    }

    .tech-photo--runway img {
      object-position: center 58%;
    }

    .tech-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(4,6,7,.76) 0%, rgba(4,6,7,.52) 32%, rgba(4,6,7,.14) 62%, rgba(4,6,7,.02) 100%),
        linear-gradient(180deg, rgba(3,5,6,.14) 0%, rgba(3,5,6,.04) 42%, rgba(3,5,6,.58) 100%),
        rgba(0,0,0,var(--tech-darken));
      transition: background-color 120ms linear;
    }

    .tech-intro-title {
      position: absolute;
      z-index: 3;
      left: max(5vw, calc((100vw - 1440px) / 2 + 60px));
      top: clamp(54px, 8vh, 92px);
      width: min(900px, 76vw);
      opacity: var(--tech-title-opacity);
      transform: translateY(calc(-28px * var(--tech-title-shift)));
      will-change: opacity, transform;
    }

    .tech-section-number {
      margin: 0 0 20px;
      color: #ffb35c;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .tech-intro-title h2 {
      max-width: 880px;
      margin: 0;
      color: #fff;
      font-size: clamp(52px, 6.3vw, 102px);
      line-height: .94;
      letter-spacing: -.055em;
      font-weight: 700;
      text-wrap: balance;
    }

    .tech-copy {
      position: absolute;
      z-index: 3;
      left: max(5vw, calc((100vw - 1440px) / 2 + 60px));
      bottom: clamp(52px, 8vh, 94px);
      width: min(690px, 46vw);
      color: #fff;
      font-family: "Noto Sans", sans-serif;
      font-size: clamp(18px, 1.25vw, 21px);
      line-height: 1.62;
      font-weight: 400;
      will-change: opacity, transform;
      pointer-events: none;
    }

    .tech-copy p { margin: 0; }

    .tech-copy--intro {
      opacity: var(--tech-intro-copy);
      transform: translateY(calc(22px * (1 - var(--tech-intro-copy))));
    }

    .tech-copy--baggage {
      opacity: var(--tech-baggage-copy);
      transform: translateY(calc(24px * (1 - var(--tech-baggage-copy))));
      width: min(720px, 47vw);
    }

    .tech-copy--runway {
      opacity: var(--tech-runway-copy);
      transform: translateY(calc(24px * (1 - var(--tech-runway-copy))));
      width: min(760px, 50vw);
    }

    .tech-copy__eyebrow {
      margin: 0 0 18px !important;
      color: #ffb35c;
      font-size: clamp(21px, 2vw, 31px);
      line-height: 1.02;
      letter-spacing: -.025em;
      font-weight: 850;
      text-transform: uppercase;
    }

    .tech-finale {
      position: absolute;
      z-index: 4;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8vw;
      text-align: center;
      opacity: var(--tech-finale-copy);
      transform: translateY(calc(22px * (1 - var(--tech-finale-copy))));
      will-change: opacity, transform;
      pointer-events: none;
    }

    .tech-finale p {
      max-width: 1120px;
      margin: 0;
      color: #fff;
      font-size: clamp(40px, 5vw, 78px);
      line-height: 1.02;
      letter-spacing: -.045em;
      font-weight: 650;
      text-wrap: balance;
      text-shadow: 0 2px 30px rgba(0,0,0,.36);
    }

    @media (max-width: 899px) {
      .chapter--technology { min-height: 600vh; }

      .tech-intro-title {
        left: 20px;
        top: 46px;
        width: calc(100vw - 40px);
      }

      .tech-intro-title h2 {
        font-size: clamp(44px, 13vw, 66px);
        line-height: .96;
      }

      .tech-copy,
      .tech-copy--baggage,
      .tech-copy--runway {
        left: 20px;
        bottom: 34px;
        width: calc(100vw - 40px);
        font-size: 16px;
        line-height: 1.55;
      }

      .tech-copy__eyebrow {
        margin-bottom: 12px !important;
        font-size: clamp(19px, 6vw, 26px);
      }

      .tech-photo--baggage {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .tech-baggage__item--vietjet img { object-position: center; }

      .tech-scrim {
        background:
          linear-gradient(180deg, rgba(3,5,6,.18) 0%, rgba(3,5,6,.06) 30%, rgba(3,5,6,.72) 100%),
          rgba(0,0,0,var(--tech-darken));
      }

      .tech-finale { padding: 24px; }
      .tech-finale p { font-size: clamp(34px, 10.5vw, 52px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .chapter--technology { min-height: 500vh; }
      .tech-photo,
      .tech-copy,
      .tech-intro-title,
      .tech-finale { transition: none !important; }
    }


    .hero-wsi__brandline {
      margin: 0 0 26px !important;
    }

    .hero-wsi__scrollcue {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 22px;
      color: rgba(255,255,255,.82);
      font-size: 12px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .hero-wsi__scrollcue-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 999px;
      font-size: 14px;
      line-height: 1;
    }

    .vietjet-moment__copy {
      margin-top: clamp(34px, 4vw, 48px) !important;
    }

    .vietjet-moment__figure {
      border-radius: 24px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 18px 54px rgba(35, 18, 14, 0.10);
      border: 1px solid rgba(41,26,26,.10);
    }

    .vietjet-moment__figure img {
      border-radius: 20px 20px 0 0;
    }

    .vietjet-moment__figure figcaption {
      padding: 14px 18px 16px;
      background: #fff;
    }

    .chapter-photo-break {
      background: #fff;
      border: 1px solid rgba(41,26,26,.10);
      border-radius: 24px;
      padding: 10px;
      box-shadow: 0 18px 52px rgba(35, 18, 14, 0.08);
      overflow: hidden;
    }

    .chapter-photo-break img {
      border-radius: 18px;
      border: 1px solid rgba(41,26,26,.06) !important;
      box-shadow: none;
    }

    .scale-stage,
    .compare-panel,
    .compare-timeline,
    .transport-map,
    .transport-explorer__side,
    .destination-selector,
    .metro-diagram,
    .community-map,
    .finale-stage {
      border-radius: 22px !important;
      overflow: hidden;
      box-shadow: 0 16px 42px rgba(35, 18, 14, 0.07);
    }

    .destination-selector__button:first-child {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }

    .destination-selector__button:last-child {
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
    }

    .tech-intro-title h2 {
      font-size: clamp(44px, 5.8vw, 88px) !important;
      line-height: .94;
    }

    .tech-copy {
      font-size: clamp(17px, 1.08vw, 18px) !important;
      line-height: 1.68 !important;
    }

    .tech-copy p + p {
      margin-top: 1em;
    }

    .tech-copy__eyebrow {
      margin-bottom: 14px !important;
    }

    .tech-finale p {
      max-width: 1080px;
      font-size: clamp(22px, 2.5vw, 38px) !important;
      line-height: 1.1 !important;
      font-weight: 700;
    }

    .article-closing__credit {
      margin-top: 18px;
      color: #6B302C;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: none;
    }

    @media (max-width: 899px) {
      .hero-wsi__brandline {
        margin-bottom: 22px !important;
      }

      .hero-wsi__scrollcue {
        margin-top: 18px;
        font-size: 11px;
        letter-spacing: .1em;
      }

      .hero-wsi__scrollcue-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }

      .vietjet-moment__figure,
      .chapter-photo-break {
        border-radius: 20px;
        padding: 8px;
      }

      .vietjet-moment__figure img,
      .chapter-photo-break img {
        border-radius: 14px;
      }

      .scale-stage,
      .compare-panel,
      .compare-timeline,
      .transport-map,
      .transport-explorer__side,
      .destination-selector,
      .metro-diagram,
      .community-map,
      .finale-stage {
        border-radius: 18px !important;
      }

      .tech-intro-title h2 {
        font-size: clamp(40px, 11.5vw, 62px) !important;
      }

      .tech-copy,
      .tech-copy--baggage,
      .tech-copy--runway {
        font-size: 15px !important;
        line-height: 1.62 !important;
      }

      .tech-finale p {
        font-size: clamp(20px, 6.6vw, 30px) !important;
        line-height: 1.14 !important;
      }

      .article-closing__credit {
        font-size: 13px;
      }
    }


    .hero-wsi__brandline {
      margin: 0 0 18px !important;
    }

    .hero-wsi__scrollcue {
      position: absolute;
      z-index: 5;
      left: 50%;
      bottom: clamp(22px, 3.2vh, 38px);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin: 0 !important;
      color: rgba(255,255,255,.82);
      font-size: 10px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
      text-shadow: 0 1px 12px rgba(0,0,0,.28);
    }

    .hero-wsi__scrollcue-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255,255,255,.48);
      border-radius: 50%;
      font-size: 14px;
      line-height: 1;
      animation: heroScrollCue 1.8s ease-in-out infinite;
    }

    @keyframes heroScrollCue {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    @media (max-width: 899px) {
      .hero-wsi__brandline {
        margin-bottom: 16px !important;
      }
      .hero-wsi__scrollcue {
        bottom: 18px;
        font-size: 9px;
        gap: 7px;
      }
      .hero-wsi__scrollcue-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }
    }


    .chapter--technology {
      min-height: 440vh !important;
    }

    .chapter--compare {
      min-height: 175vh !important;
      --compare-curfew: 1;
      --compare-wsi-glow: 1;
    }

    .compare-story__body {
      min-height: 118vh !important;
    }

    .compare-stage {
      grid-template-rows: 1fr !important;
      gap: 0 !important;
    }

    .compare-panels {
      grid-template-columns: minmax(0, 1fr) !important;
      width: min(920px, 100%);
      margin: 0 auto;
    }

    .compare-panel--wsi {
      min-height: min(66svh, 650px) !important;
    }

    .compare-panel--wsi .compare-panel__tag {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    .compare-panel--wsi .compare-runway-glow {
      opacity: 1 !important;
    }

    .finale-copy__city--hcm {
      display: inline-block;
      white-space: nowrap;
    }

    @media (max-width: 899px) {
      .chapter--technology {
        min-height: 470vh !important;
      }

      .chapter--compare {
        min-height: 155vh !important;
      }

      .compare-story__body {
        min-height: 105vh !important;
      }

      .compare-panel--wsi {
        min-height: 62svh !important;
      }

      .finale-copy__title {
        font-size: clamp(28px, 8.2vw, 44px) !important;
      }
    }


    @media (max-width: 899px) {

      .hero.hero--wsi { min-height: 172svh; }
      .hero-wsi__photo {
        width: 118vw !important;
        object-position: 56% 38% !important;
        transform: scale(1.015) !important;
      }
      .hero-wsi__shade {
        background:
          radial-gradient(
            ellipse 118% 46% at 12% 112%,
            rgba(188,11,31,.98) 0%,
            rgba(214,34,33,.95) 18%,
            rgba(252,105,35,.76) 34%,
            rgba(252,105,35,.26) 48%,
            rgba(252,105,35,0) 58%
          ),
          linear-gradient(
            180deg,
            rgba(8,11,11,0) 0%,
            rgba(8,11,11,0) 72%,
            rgba(8,11,11,.10) 88%,
            rgba(8,11,11,.18) 100%
          ) !important;
      }
      .hero-wsi__plane {
        top: 39% !important;
        width: clamp(300px, 66vw, 380px);
        animation-duration: 15.8s !important;
      }

      
      .scale-story__graphic-wrap,
      .metro-story__graphic-wrap,
      .community-story__graphic-wrap,
      .compare-sticky {
        z-index: 20 !important;
        isolation: isolate;
      }
      .scale-story__graphic-wrap,
      .metro-story__graphic-wrap,
      .community-story__graphic-wrap {
        background: var(--paper) !important;
      }
      .chapter--scale .scale-story__graphic-wrap { background: var(--bg) !important; }
      .chapter--community .community-story__graphic-wrap { background: var(--bg) !important; }

      .scale-story__steps,
      .metro-story__steps,
      .community-story__steps {
        position: relative;
        z-index: 1 !important;
      }
      .scale-step,
      .metro-step,
      .community-step {
        position: relative;
        z-index: 1;
      }

      .scale-story__graphic-wrap::after,
      .metro-story__graphic-wrap::after,
      .community-story__graphic-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 72px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 72%, rgba(255,255,255,1) 100%);
        z-index: 3;
      }
      .chapter--scale .scale-story__graphic-wrap::after,
      .chapter--community .community-story__graphic-wrap::after {
        background: linear-gradient(to bottom, rgba(246,244,239,0), rgba(246,244,239,.96) 72%, rgba(246,244,239,1) 100%);
      }


      .scale-story__graphic-wrap {
        height: 64svh !important;
        min-height: 400px !important;
      }
      .scale-stage {
        height: 52svh !important;
        min-height: 348px !important;
      }
      .scale-story__steps { padding-top: 18vh !important; }


      .tech-photo--baggage {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1fr !important;
      }
      .tech-baggage__item--vietjet { order: -1 !important; }
      .tech-baggage__item--system { order: 1 !important; }
    }

@media (max-width: 899px) {
  .hero-wsi__photo {
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100svh !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 40% 38% !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .hero-wsi__shade {
    background:
      radial-gradient(
        ellipse 138% 82% at 14% 112%,
        rgba(188,11,31,.98) 0%,
        rgba(214,34,33,.94) 22%,
        rgba(252,105,35,.76) 43%,
        rgba(252,105,35,.30) 62%,
        rgba(252,105,35,0) 78%
      ),
      linear-gradient(
        180deg,
        rgba(8,11,11,0) 0%,
        rgba(8,11,11,0) 50%,
        rgba(252,105,35,.08) 58%,
        rgba(252,105,35,.26) 69%,
        rgba(225,46,31,.58) 82%,
        rgba(188,11,31,.92) 100%
      ) !important;
  }

  .hero-wsi__plane {
    animation-duration: 9.4s !important;
  }

  .finale-stage {
    width: calc(100vw - 32px) !important;
    height: 100% !important;
    padding: 20px 0 18px !important;
    gap: 14px !important;
    align-content: center !important;
    align-items: center !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  .finale-visual {
    align-self: auto !important;
    min-height: 0 !important;
  }

  .finale-map {
    height: 34svh !important;
    min-height: 250px !important;
    max-height: 320px !important;
    aspect-ratio: auto !important;
  }

  .finale-copy {
    width: 100% !important;
    max-width: none !important;
  }

  .finale-copy__eyebrow {
    margin-bottom: 8px !important;
    font-size: 10px !important;
  }

  .finale-copy__title {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: .94 !important;
  }

  .finale-copy__meta {
    margin-top: 14px !important;
    padding-top: 8px !important;
  }

  .finale-copy__row {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 7px 0 !important;
  }

  .finale-copy__term {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .finale-copy__value {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 520px) {
  .hero-wsi__photo {
    object-position: 38% 38% !important;
  }
}


/* Hero aircraft sky-flight tuning */
@keyframes heroPlaneSkyDesktop {
  0%, 7% {
    opacity: 0;
    transform: translate3d(-34vw, -50%, 0) rotate(-1.1deg) scale(.98);
  }
  13% { opacity: .94; }
  48% {
    opacity: .97;
    transform: translate3d(34vw, calc(-50% - 6px), 0) rotate(-.5deg) scale(1);
  }
  83% {
    opacity: .97;
    transform: translate3d(82vw, calc(-50% - 2px), 0) rotate(-.2deg) scale(1.01);
  }
  100% {
    opacity: 0;
    transform: translate3d(112vw, -50%, 0) rotate(0deg) scale(1.02);
  }
}

@keyframes heroPlaneSkyMobile {
  0%, 7% {
    opacity: 0;
    transform: translate3d(-72vw, -50%, 0) rotate(-1deg) scale(.98);
  }
  13% { opacity: .94; }
  48% {
    opacity: .97;
    transform: translate3d(28vw, calc(-50% - 4px), 0) rotate(-.4deg) scale(1);
  }
  83% {
    opacity: .97;
    transform: translate3d(82vw, calc(-50% - 1px), 0) rotate(-.1deg) scale(1.01);
  }
  100% {
    opacity: 0;
    transform: translate3d(122vw, -50%, 0) rotate(0deg) scale(1.02);
  }
}

@media (min-width: 900px) {
  .hero-wsi__photo {
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100svh !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 18% !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .hero-wsi__plane {
    top: 14% !important;
    width: clamp(260px, 22vw, 390px) !important;
    animation-name: heroPlaneSkyDesktop !important;
    animation-duration: 10.53s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.16)) !important;
  }
}

@media (max-width: 899px) {
  .hero-wsi__plane {
    top: 20% !important;
    width: clamp(220px, 55vw, 320px) !important;
    animation-name: heroPlaneSkyMobile !important;
    animation-duration: 6.27s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.14)) !important;
  }
}

@media (max-width: 520px) {
  .hero-wsi__plane {
    top: 19% !important;
    width: clamp(210px, 54vw, 290px) !important;
  }
}