.hero-art .city-blueprint {
  overflow: hidden;
}

.hero-scroll { position: relative; background: #131c29; }
.hero-scroll.is-pinned .hero {
  position: sticky;
  top: var(--hero-pin-top);
  min-height: calc(100svh - var(--hero-header-height, 101px) - 16px);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.hero-art { isolation: isolate; }
.hero-art .city-blueprint { position: relative; z-index: 1; }
body.v4-feature .hero-art .city-blueprint .city-wire {
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#city-phosphor-trace) drop-shadow(0 0 1.1px #ede7d19e) drop-shadow(0 0 3.2px #b5c7b859);
}
body.v4-feature .hero-art .city-blueprint .plot-guide {
  stroke: #a7c5bb;
  stroke-opacity: .21;
  stroke-width: .8;
  filter: drop-shadow(0 0 1px #a7c5bb55);
}
body.v4-feature .hero-art .city-blueprint .city-route {
  filter: url(#city-phosphor-trace) drop-shadow(0 0 1.5px #efa487b8) drop-shadow(0 0 4.4px #d6755f6e);
}
.city-screen-texture {
  position: absolute;
  inset: 7px 1px 1px;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, #030a102c 0 1px, transparent 1px 3px), url('/assets/crt-grain.svg');
  background-size: auto, 160px 160px;
  opacity: .12;
  mix-blend-mode: screen;
}
.hero-art::before, .hero-art::after { z-index: 3; }
@media(prefers-reduced-motion:reduce) {
  .hero-scroll { height: auto !important; }
  .hero-scroll.is-pinned .hero { position: static; }
}