.cinematic-journey {
  --cinematic-gold: #f1c86e;
  --cinematic-mint: #7fffe1;
  --journey-progress: 0%;
  position: relative;
  isolation: isolate;
  min-height: 500svh;
  overflow: clip;
  color: #fff;
  background: #07131f;
  transition: background-color 700ms ease;
}

.cinematic-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 75% 12%, rgba(105, 75, 178, .42), transparent 22%),
    radial-gradient(circle at 20% 46%, rgba(20, 138, 105, .25), transparent 28%),
    linear-gradient(180deg, #07131f, #11213c 46%, #081712);
  transition: background 900ms ease;
}

.cinematic-journey--day {
  background: #7fb2c0;
}

.cinematic-journey--day .cinematic-backdrop {
  background:
    radial-gradient(circle at 74% 12%, rgba(255, 221, 146, .5), transparent 24%),
    radial-gradient(circle at 18% 48%, rgba(65, 164, 119, .32), transparent 30%),
    linear-gradient(180deg, #8bc4d8 0%, #b7d4c3 49%, #467a59 100%);
}

.cinematic-journey--night .cinematic-backdrop {
  background:
    radial-gradient(circle at 75% 12%, rgba(105, 75, 178, .42), transparent 22%),
    radial-gradient(circle at 20% 46%, rgba(20, 138, 105, .25), transparent 28%),
    linear-gradient(180deg, #07131f, #11213c 46%, #081712);
}

.cinematic-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.cinematic-canvas--visible {
  opacity: 1;
}

.cinematic-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cinematic-chapter {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: clamp(5.5rem, 10vh, 8rem) clamp(1rem, 6vw, 6rem);
}

.cinematic-copy {
  width: min(35rem, 46vw);
  padding: clamp(1.15rem, 2.2vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 1.75rem;
  background: linear-gradient(135deg, rgba(7, 19, 31, .78), rgba(20, 32, 54, .48));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

.cinematic-copy--right {
  justify-self: end;
}

.cinematic-copy--hero {
  width: min(43rem, 55vw);
  border-color: rgba(241, 200, 110, .22);
}

.cinematic-copy--final {
  width: min(48rem, 82vw);
  justify-self: center;
  text-align: center;
}

.cinematic-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.cinematic-brand img,
.cinematic-loader img {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 0 40px rgba(127, 255, 225, .18);
}

.cinematic-eyebrow {
  margin: 0 0 .65rem;
  color: var(--cinematic-mint);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cinematic-brand .cinematic-eyebrow {
  margin: 0;
}

.cinematic-copy h1,
.cinematic-copy h2 {
  margin: 0;
  max-width: 18ch;
  color: #fff;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.cinematic-copy h1 {
  font-size: clamp(2.35rem, 5.6vw, 5.4rem);
}

.cinematic-copy h2 {
  font-size: clamp(2rem, 4.2vw, 4rem);
}

.cinematic-copy--final h2 {
  margin-inline: auto;
}

.cinematic-lead {
  margin: 1rem 0 .6rem;
  color: #f7f1df;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}

.cinematic-body,
.cinematic-supporting {
  margin: .8rem 0 0;
  max-width: 57ch;
  color: rgba(244, 249, 255, .78);
  font-size: clamp(.96rem, 1.35vw, 1.08rem);
  line-height: 1.7;
}

.cinematic-copy h3 {
  margin: 1.25rem 0 0;
  color: var(--cinematic-gold);
  font-size: 1rem;
}

.cinematic-supporting {
  margin-top: .35rem;
  font-size: .94rem;
}

.cinematic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}

.cinematic-actions a {
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1.08rem;
  border: 1px solid rgba(127, 255, 225, .58);
  border-radius: 999px;
  color: #061d22;
  background: linear-gradient(135deg, #adffe9, #f0d083);
  box-shadow: 0 12px 32px rgba(69, 226, 189, .13);
  font-size: .91rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cinematic-actions a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(69, 226, 189, .22);
}

.cinematic-actions .cinematic-action--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.cinematic-actions a:focus-visible,
.cinematic-video-control:focus-visible,
.cinematic-skip-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.cinematic-scroll-cue {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.35rem 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.cinematic-scroll-cue span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  animation: cinematic-bob 1.8s ease-in-out infinite;
}

.cinematic-tags,
.cinematic-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.cinematic-tags li,
.cinematic-destinations li {
  padding: .5rem .72rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .8rem;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .07);
  font-size: .82rem;
  line-height: 1.35;
}

.cinematic-pos {
  display: grid;
  gap: .25rem;
  margin-top: 1rem;
  padding: .8rem;
  border-left: 2px solid var(--cinematic-gold);
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  line-height: 1.5;
}

.cinematic-pos strong {
  color: #fff;
  font-size: .95rem;
}

.cinematic-copy blockquote {
  max-width: 55rem;
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
  font-style: italic;
  line-height: 1.65;
}

.cinematic-copy--final .cinematic-actions {
  justify-content: center;
}

.cinematic-progress {
  position: fixed;
  z-index: 12;
  top: 50%;
  right: max(.65rem, env(safe-area-inset-right));
  width: 2px;
  height: min(27vh, 13rem);
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
  transform: translateY(-50%);
}

.cinematic-progress span {
  display: block;
  width: 100%;
  height: var(--journey-progress);
  border-radius: inherit;
  background: linear-gradient(var(--cinematic-mint), var(--cinematic-gold));
  box-shadow: 0 0 10px var(--cinematic-mint);
}

.cinematic-loader {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  color: rgba(255, 255, 255, .82);
  background: #07131f;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.cinematic-loader__track {
  width: min(16rem, 65vw);
  height: 3px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
}

.cinematic-loader__track span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cinematic-mint), transparent);
  animation: cinematic-load 1.1s ease-in-out infinite;
}

.cinematic-video-control {
  position: fixed;
  z-index: 15;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 19, 32, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .8rem;
  font-weight: 800;
}

.cinematic-skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: 50%;
  padding: .65rem 1rem;
  border-radius: 999px;
  color: #061d22;
  background: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translate(-50%, -180%);
  transition: transform 150ms ease;
}

.cinematic-skip-link:focus {
  transform: translate(-50%, 0);
}

.cinematic-journey--static {
  min-height: auto;
}

.cinematic-journey--static .cinematic-chapter {
  min-height: min(46rem, 100svh);
}

.cinematic-journey--static .cinematic-progress {
  display: none;
}

.cinematic-journey--static .cinematic-chapter::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 30rem);
  aspect-ratio: 1;
  right: 8vw;
  border: 1px solid rgba(127, 255, 225, .2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(127, 255, 225, .22), transparent 8%),
    radial-gradient(circle, rgba(110, 79, 181, .38), transparent 65%);
  box-shadow: inset 0 0 50px rgba(241, 200, 110, .1);
}

.cinematic-journey--static .cinematic-copy--right {
  justify-self: start;
}

@keyframes cinematic-load {
  from { transform: translateX(-130%); }
  to { transform: translateX(300%); }
}

@keyframes cinematic-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.3rem); }
}

@media (max-width: 767px) {
  .cinematic-chapter {
    align-items: end;
    min-height: 100svh;
    padding: 5rem .85rem calc(5.25rem + env(safe-area-inset-bottom));
  }

  .cinematic-chapter--hero {
    align-items: center;
    padding-top: 6rem;
  }

  .cinematic-copy,
  .cinematic-copy--hero,
  .cinematic-copy--final {
    width: 100%;
    max-width: 34rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(7, 19, 31, .82), rgba(20, 32, 54, .64));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .cinematic-copy h1 {
    font-size: clamp(2.05rem, 11vw, 3.35rem);
  }

  .cinematic-copy h2 {
    font-size: clamp(1.75rem, 8vw, 2.7rem);
  }

  .cinematic-brand img {
    width: 52px;
    height: 52px;
  }

  .cinematic-body {
    line-height: 1.55;
  }

  .cinematic-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cinematic-actions a {
    width: 100%;
  }

  .cinematic-scroll-cue {
    display: none;
  }

  .cinematic-progress {
    right: 4px;
  }

  .cinematic-journey--static .cinematic-chapter {
    min-height: auto;
    padding-block: 6rem;
  }

  .cinematic-journey--static .cinematic-chapter::before {
    width: 75vw;
    right: -25vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-journey *,
  .cinematic-journey *::before,
  .cinematic-journey *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .cinematic-copy,
  .cinematic-actions a,
  .cinematic-tags li,
  .cinematic-destinations li {
    border: 1px solid CanvasText;
  }
}

/* Scroll-driven street journey.
   The scenery is five illustrated plates stacked in order. Scrolling dollies
   each one forward and fades the next in over the top, so a scroll frame only
   ever animates transform and opacity on two composited elements. */
.city-journey {
  --journey-progress: 0%;
  --city-accent-products: #f4a259;
  --city-accent-rentals: #67b0ef;
  --city-accent-jobs: #f0c74b;
  --city-accent-places: #58d3a3;
  --city-accent-skills: #b79bf0;

  /* Where the night grade pools its warm light. Tracks the shopfront line,
     which sits at a different height once mobile crops to a band. */
  --city-glow-at: 50% 94%;
  /* Which part of the artwork survives the crop. */
  --city-focus: 50% 52%;
  /* Where the street's vanishing point lands on the stage; the dolly zooms
     towards it so the motion reads as travelling straight down the road. */
  --city-vanish: 50% 60%;

  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--city-shell);
}

.city-journey--day {
  --city-shell: #cfe8f3;
  --city-plate-filter: saturate(1.04);
  --city-grade: radial-gradient(120% 90% at 50% 6%, rgba(255, 241, 208, .26), transparent 54%);
  /* Lighter than the vector version was: the copy panel now carries its own
     glass backing, so the scrim only has to lift contrast, not hide art. */
  --city-scrim:
    linear-gradient(100deg, rgba(4, 18, 30, .58) 0%, rgba(4, 18, 30, .2) 40%, rgba(4, 18, 30, 0) 66%),
    linear-gradient(0deg, rgba(4, 18, 30, .3), transparent 38%);
}

/* Dark mode is a colour grade over the same artwork rather than a second set
   of images, so switching theme costs no extra download. */
.city-journey--night {
  --city-shell: #070d1c;
  /* Dusk, not a blackout. Crushing the brightness far enough to read as deep
     night also throws away the colour and detail that make the artwork worth
     having, so the plate is only dimmed and cooled, and the grade does the
     rest: a heavy blue wash up top to bury the daytime sky, and a warm pool at
     street level so the shopfronts read as lit. */
  --city-plate-filter: brightness(.6) saturate(.86) contrast(1.06) hue-rotate(-12deg);
  --city-grade:
    radial-gradient(95% 58% at var(--city-glow-at), rgba(255, 172, 74, .4), transparent 66%),
    radial-gradient(80% 52% at 20% 4%, rgba(88, 124, 214, .34), transparent 72%),
    linear-gradient(180deg, rgba(10, 20, 58, .66), rgba(6, 12, 34, .14) 46%, rgba(4, 8, 22, .5));
  --city-scrim:
    linear-gradient(100deg, rgba(2, 8, 18, .88) 0%, rgba(2, 8, 18, .48) 42%, rgba(2, 8, 18, .12) 74%),
    linear-gradient(0deg, rgba(2, 8, 18, .6), transparent 44%);
}

.city-journey__stage {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  background: var(--city-shell);
}

.city-journey__scenery,
.city-scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.city-journey__placeholder {
  position: absolute;
  inset: 0;
  background: var(--city-shell);
}

/* One illustrated scene per section. The blurred stand-in is set inline as a
   background image so the plate shows its colours before the WebP decodes. */
.city-plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-position: var(--city-focus);
  background-size: cover;
  transform-origin: var(--city-vanish);
  will-change: transform, opacity;
}

.city-plate__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--city-focus);
  filter: var(--city-plate-filter);
}

.city-scenery__grade {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: var(--city-grade);
}

.city-scenery__shade {
  position: absolute;
  inset: 0;
  z-index: 21;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 55%, #0b1526 30%, #05080f);
  will-change: opacity;
}


.city-journey__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--city-scrim);
}

/* Floating UI cards */
.city-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.city-cardset {
  position: absolute;
  inset: 0;
}

.city-card {
  position: absolute;
  width: clamp(8.25rem, 13vw, 11.5rem);
  will-change: opacity, transform;
}

.city-card:nth-child(1) { top: 17%; right: 7%; }
.city-card:nth-child(2) { top: 41%; right: 25%; }
.city-card:nth-child(3) { top: 63%; right: 5%; }

.city-card__inner {
  display: grid;
  gap: .15rem;
  padding: .8rem .95rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 1.1rem;
  background: linear-gradient(140deg, rgba(8, 22, 36, .84), rgba(18, 38, 60, .58));
  box-shadow: 0 18px 42px rgba(3, 12, 22, .38);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  will-change: transform;
}

.city-card__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.city-card__value {
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.city-card__label {
  color: rgba(238, 247, 255, .74);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.32;
}

/* Scene copy */
.city-panels {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: clamp(4.5rem, 9vh, 7rem) clamp(1rem, 5vw, 5.5rem) clamp(6.5rem, 12vh, 8.5rem);
  pointer-events: none;
}

.city-panel {
  grid-area: 1 / 1;
  width: min(34rem, 45vw);
  max-height: 100%;
  overflow: hidden;
  pointer-events: auto;
  will-change: opacity, transform;
}

.city-panel[data-active="false"] {
  pointer-events: none;
}

.city-panel--hero h1 {
  font-size: clamp(1.85rem, 3.4vw, 3.1rem);
}

.city-panel h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
}

.city-panel--hero h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
}

.city-panel__step {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 1rem 0 .7rem;
  padding: .34rem .78rem .34rem .5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.city-panel:first-child .city-panel__step {
  margin-top: 1.15rem;
}

.city-panel__step-icon {
  font-size: 1rem;
  line-height: 1;
}

.city-journey--khmer .city-panel__step,
.city-journey--khmer .city-steps__dot {
  letter-spacing: 0;
  text-transform: none;
}

.city-panel__closing {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.city-panel__closing h3 {
  margin-top: 0;
}

/* Step nav, cue and progress rail */
.city-steps {
  position: absolute;
  z-index: 6;
  bottom: calc(4.5rem + env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(4, 16, 28, .58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.city-steps__dot {
  min-height: 34px;
  padding: .3rem .72rem;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .68);
  background: transparent;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.city-steps__dot[data-active="true"] {
  color: #062030;
  background: #fff;
}

.city-steps__dot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.city-cue {
  position: absolute;
  z-index: 5;
  bottom: calc(2.2rem + env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .05em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.city-journey .cinematic-progress {
  position: absolute;
  z-index: 6;
}

/* Reduced motion / no-GSAP fallback: a readable stack, no pinning */
.city-journey--static .city-journey__stage {
  height: auto;
  min-height: 0;
}

/* Reduced motion keeps a single plate as a still backdrop. */
.city-journey--static .city-plate:not(:first-child),
.city-journey--static .city-cards,
.city-journey--static .city-steps,
.city-journey--static .city-cue,
.city-journey--static .cinematic-progress {
  display: none;
}

.city-journey--static .city-panels {
  position: relative;
  inset: auto;
  justify-items: center;
  gap: 1.15rem;
  padding-block: clamp(3rem, 8vh, 5rem);
}

.city-journey--static .city-panel {
  grid-area: auto;
  width: min(38rem, 100%);
  max-height: none;
  overflow: visible;
  opacity: 1;
}

@media (max-width: 767px) {
  .city-journey__stage {
    min-height: 100svh;
  }

  /* Portrait viewports leave far less clear space between the stat cards and
     the copy panel, so the horizon is raised and the street is narrowed to
     keep the shopfronts inside that band. */
  /* Covering a portrait viewport with a 3:2 illustration leaves a strip about
     a third of the artwork wide -- all upper-storey windows, no street, no
     shopfronts, no people. So on mobile the plate stops being full-bleed and
     becomes a band across the top: less of the screen, but the corridor and
     the crowd survive, which is the whole point of the section. */
  .city-journey {
    --city-focus: 52% 60%;
    --city-vanish: 52% 55%;
    --city-band: 48svh;
    /* Lifted clear of the band's fade, which would otherwise swallow it. */
    --city-glow-at: 54% 74%;
  }

  /* Below the band is a deliberate dark letterbox in both themes. Fading to
     the day shell instead would land a pale strip under the artwork that the
     scrim then muddies. */
  .city-journey--day { --city-band-fade: #0d2136; }
  .city-journey--night { --city-band-fade: #05080f; }

  .city-journey__stage {
    background: var(--city-band-fade);
  }

  .city-plate {
    inset: 0 0 auto;
    height: var(--city-band);
  }

  /* Softens the band's bottom edge into the letterbox instead of ending on a
     hard rectangle above the copy. */
  .city-scenery::after {
    content: '';
    position: absolute;
    inset: calc(var(--city-band) - 5rem) 0 auto;
    z-index: 22;
    height: 5rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--city-band-fade));
  }

  .city-scenery__grade,
  .city-scenery__shade {
    bottom: auto;
    height: var(--city-band);
  }

  .city-cardset {
    inset: auto;
    top: calc(4.25rem + env(safe-area-inset-top, 0px));
    right: .85rem;
    left: .85rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }

  .city-card {
    position: static;
    width: auto;
  }

  .city-card__inner {
    padding: .55rem .5rem;
    border-radius: .85rem;
  }

  .city-card__value {
    font-size: 1.02rem;
  }

  .city-card__label {
    font-size: .62rem;
  }

  .city-panels {
    align-items: end;
    justify-items: stretch;
    padding: 4.5rem .85rem calc(7.75rem + env(safe-area-inset-bottom));
  }

  .city-panel {
    width: 100%;
    max-width: 34rem;
    max-height: 46svh;
    margin-inline: auto;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(7, 19, 31, .86), rgba(20, 32, 54, .7));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .city-panel .cinematic-brand {
    margin-bottom: .5rem;
  }

  .city-panel .cinematic-brand img {
    width: 40px;
    height: 40px;
  }

  .city-panel .cinematic-body {
    font-size: .88rem;
  }

  .city-panel--hero h1 {
    font-size: clamp(1.5rem, 6.6vw, 2.05rem);
  }

  .city-panel h2 {
    font-size: clamp(1.3rem, 5.8vw, 1.75rem);
  }

  .city-panel--hero h2 {
    font-size: clamp(1.08rem, 4.8vw, 1.35rem);
  }

  .city-panel--hero .cinematic-lead {
    margin: .55rem 0 .3rem;
    font-size: .95rem;
  }

  .city-panel__step,
  .city-panel:first-child .city-panel__step {
    margin: .7rem 0 .5rem;
  }

  /* The intro panel carries the brand block and the closing panel carries the
     final call to action, so both get more room. Type is tuned to fit without
     inner scrolling, which would otherwise swallow the swipe that drives the
     animation. */
  .city-panel--hero,
  .city-panel:last-child {
    max-height: 60svh;
  }

  .city-panel .cinematic-actions {
    gap: .5rem;
    margin-top: 1rem;
  }

  .city-panel .cinematic-actions a {
    min-height: 44px;
    padding: .6rem .9rem;
    font-size: .86rem;
  }

  .city-panel__closing {
    margin-top: .9rem;
    padding-top: .8rem;
  }

  .city-steps {
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  .city-steps__dot {
    display: grid;
    width: 34px;
    padding: 0;
    place-items: center;
  }

  .city-steps__dot span {
    display: none;
  }

  .city-steps__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  .city-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-journey *,
  .city-journey *::before,
  .city-journey *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}