.route-hero {
  --header: 84px;
  --scene: 0;
  --ink: var(--palette-story-ink);
  --muted: #c1cde2;
  --accent: var(--palette-signal-light);
  --tone: #1b2c50;
  --angle: -12deg;
  background: var(--palette-cinema);
  color: var(--ink);
}
.route-hero.is-moving {
  min-height: 137svh;
}
.route-hero.is-moving .route-hero__stage {
  position: sticky;
  top: var(--header);
}
.route-hero__layout {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.8rem, 5vw, 5.5rem);
  min-height: calc(100svh - var(--header));
  padding-block: clamp(2rem, 5vw, 5rem);
}
.route-hero__copy h1 {
  color: var(--ink);
  font-size: clamp(2.45rem, 4.5vw, 4.9rem);
  line-height: 1.09;
  letter-spacing: -.055em;
  max-width: 17ch;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.route-hero__copy h1 em {
  font-style: normal;
  color: inherit;
}
.route-hero__copy p:not(.v5-interior-hero__category) {
  color: var(--muted);
  max-width: 49ch;
  margin: 1.1rem 0 1.4rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
}
.route-hero .v5-hero-label, .route-hero .case-overline, .route-hero .v5-interior-hero__category {
  color: var(--accent);
}
.route-hero .v5-hero-label i {
  background: var(--accent);
}
.route-hero .v5-interior-hero__category {
  margin-top: 1.3rem;
}
.route-hero .v5-interior-hero__actions {
  margin-top: var(--space-2);
  gap: .5rem 1.3rem;
}
.route-hero .v5-interior-hero__text-link {
  color: var(--ink);
  border-color: #52647e;
}
.route-hero .v5-interior-hero__text-link:hover {
  color: var(--accent);
}
.route-hero .button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--palette-cinema);
  white-space: normal;
}
.route-hero .button--primary:hover {
  background: var(--surface);
  border-color: var(--palette-white);
}
.route-hero :focus-visible {
  outline-color: var(--accent);
}
.route-hero .case-hero__tags {
  margin-top: 1rem;
}
.route-hero .case-hero__tags span {
  color: var(--muted);
  background: transparent;
  border-color: #52647e;
}
.route-hero__figure {
  margin: 0;
  min-width: 0;
}
.route-hero__view {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 6 / 5;
  border: 1px solid #364763;
  border-radius: 12px;
  perspective: 850px;
  background: var(--tone);
}
.route-hero__rear {
  position: absolute;
  inset: -10%;
  background: repeating-linear-gradient(90deg, transparent 0 44px, #aec5ff25 45px 46px),
              repeating-linear-gradient(0deg, transparent 0 44px, #aec5ff25 45px 46px);
  transform: translateY(calc(var(--scene) * -24px)) rotate(-12deg) scale(1.15);
  mask-image: radial-gradient(ellipse at 52% 53%, var(--palette-black), transparent 72%);
}
.route-hero__plane {
  position: relative;
  width: 84%;
  padding: 5%;
  color: var(--accent);
  background: #080e1b74;
  border: 1px solid #b2cdf052;
  border-radius: 8px;
  box-shadow: 0 22px 55px #080e1b80, inset 0 0 45px #adc9ff10;
  transform: rotateY(calc(var(--angle) + var(--scene) * 12deg)) rotateX(calc(8deg - var(--scene) * 8deg))
             translateZ(calc(var(--scene) * 75px));
}
.route-hero__plane svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.route-hero__edge {
  position: absolute;
  inset: 69% -15% -40%;
  pointer-events: none;
  border-top: 1px solid #a6eeff50;
  background: repeating-linear-gradient(90deg, transparent 0 45px, #a6eeff40 46px 47px);
  transform: rotateX(64deg) translateY(calc(var(--scene) * 65px));
  mask-image: linear-gradient(var(--palette-black), transparent 72%);
}
.route-hero figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: .85rem;
}
.route-hero--blueprint, .route-hero--scanner {
  --tone: #102e41;
}
.route-hero--delivery, .route-hero--longitudinal {
  --tone: #262044;
  --accent: #d0baff;
}
.route-hero--lens, .route-hero--library {
  --tone: #302735;
  --accent: #ffe0b3;
  --angle: 12deg;
}
.route-hero--connection, .route-hero--signal {
  --tone: #172c3b;
  --accent: #aef5e0;
  --angle: 10deg;
}
.route-hero--privacy, .route-hero--reroute {
  --tone: #202943;
}
.route-hero--alignment, .route-hero--markets {
  --tone: #202747;
  --accent: #bcd1ff;
}
.route-hero--conversion {
  --angle: 9deg;
}
.route-hero--conversion .route-hero__plane,
.route-hero--longitudinal .route-hero__plane,
.route-hero--markets .route-hero__plane {
  width: 92%;
  padding: 3%;
}
.route-hero--scanner .route-hero__plane,
.route-hero--alignment .route-hero__plane {
  border-radius: 50%;
}
.route-hero--library .route-hero__plane {
  border-radius: 8px 8px 32px 32px;
}
@media (max-width: 900px) {
  .route-hero__layout {
    gap: var(--space-4);
  }
  .route-hero__view {
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 680px) {
  .route-hero.is-moving {
    min-height: 122svh;
  }
  .route-hero__layout {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1rem;
    padding-block: var(--space-4) 2rem;
  }
  .route-hero__copy h1 {
    font-size: clamp(2rem, 7.5vw, 3.15rem);
  }
  .route-hero .v5-hero-label {
    margin-bottom: .7rem;
  }
  .route-hero__copy p:not(.v5-interior-hero__category) {
    margin-block: .65rem .85rem;
  }
  .route-hero .button--primary {
    min-height: 46px;
    padding-inline: var(--space-2);
    gap: .65rem;
  }
  .route-hero__view {
    aspect-ratio: 16 / 9;
  }
  .route-hero__plane {
    width: 73%;
    padding: 2%;
  }
  .route-hero--conversion .route-hero__plane,
  .route-hero--longitudinal .route-hero__plane,
  .route-hero--markets .route-hero__plane {
    width: 82%;
    padding: 1%;
  }
}
@media (max-width: 620px) {
  .route-hero {
    --header: 72px;
  }
}
@media (max-height: 620px) and (orientation: landscape), (prefers-reduced-motion: reduce) {
  .route-hero.is-moving {
    min-height: 0;
  }
  .route-hero.is-moving .route-hero__stage {
    position: static;
  }
}
.route-hero .case-overline {
  display: block;
  margin-bottom: 1rem;
  font: 700 .75rem/1.4 var(--font-body);
}
.route-hero--scanner .route-hero__plane svg {
  transform: rotate(calc(var(--scene) * 22deg));
}
.route-hero--blueprint .route-hero__plane {
  border-radius: 0;
  border-style: dashed;
  background: #142a3e;
}
.route-hero--signal .route-hero__plane {
  border-inline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.route-hero--lens .route-hero__plane {
  clip-path: polygon(0 0, 94% 0, 100% 14%, 100% 100%, 0 100%);
}
.route-hero--connection .route-hero__plane, .route-hero--reroute .route-hero__plane {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.route-hero--connection .route-hero__view {
  border-radius: 32% 12px 28% 12px;
}
.route-hero--privacy .route-hero__edge {
  display: none;
}
.route-hero--privacy .route-hero__plane {
  width: 68%;
  border-radius: 50% 50% 18% 18%;
}
.route-hero--alignment .route-hero__plane {
  background: #232d54;
}
@media (min-width: 901px) {
  .route-hero--library .route-hero__figure, .route-hero--lens .route-hero__figure {
    grid-column: 1;
    grid-row: 1;
  }
  .route-hero--library .route-hero__copy, .route-hero--lens .route-hero__copy {
    grid-column: 2;
    grid-row: 1;
  }
  .route-hero--signal .route-hero__view, .route-hero--delivery .route-hero__view {
    aspect-ratio: 4 / 3;
  }
}