/* Two parallel journeys. Content remains available without JavaScript. */
.journey {
  overflow: clip;
  padding: 5rem 1.5rem 7rem;
}
.journey-intro, .journey-ending {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}
.journey-eyebrow {
  color: #e8c95b;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.journey h2 {
  margin: 0 0 1.5rem;
  font-family: 'Assistant', sans-serif;
  font-size: 4rem;
  line-height: 1.1;
  text-wrap: balance;
}
.journey-intro > p:last-child, .journey-ending > p:last-child {
  color: #c4c4c8;
  line-height: 1.8;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.journey-map {
  position: relative;
  max-width: 1250px;
  margin: 4rem auto 0;
  padding-bottom: 7rem;
  isolation: isolate;
}
.journey-tracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.track {
  fill: none;
  stroke-linecap: round;
}
.track-red { stroke: #ff5269; }
.track-blue { stroke: #4b9fff; }
.track-glow {
  stroke-width: 15;
  opacity: .55;
  filter: blur(11px);
}
.track-core { stroke-width: 2; opacity: .9; }
.journey-pill { visibility: hidden; }
.journey.is-moving .journey-pill { visibility: visible; }
.journey-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  padding: 1rem 10% 5rem;
  text-align: center;
}
.journey-labels p {
  font-size: 1rem;
  line-height: 1.5;
}
.journey-labels strong {
  font-family: 'Assistant', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}
.label-red, .card-red .card-path { color: #ff8e9c; }
.label-blue, .card-blue .card-path { color: #90c5ff; }
.journey-steps { list-style: none; margin: 0; padding: 0; }
.journey-step { padding: 0 10% 8rem; }
.journey-step:last-child { padding-bottom: 0; }
.step-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.step-heading span {
  border: 1px solid #656052;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex-shrink: 0;
  color: #040404;
  font-size: 1.5rem;
  font-weight: 900;
  background: #e8c95b;
}
.step-heading h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f2f2f2;
  margin: 0;
}
.step-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.journey-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid;
  background: rgba(12, 12, 16, .58);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  border-radius: 0 0 1.2rem 1.2rem;
}
.card-red { border-color: #cc4357; background: linear-gradient(155deg, rgba(35, 16, 23, .62), rgba(9, 7, 8, .46) 80%); }
.card-blue { border-color: #397fc7; background: linear-gradient(205deg, rgba(14, 29, 48, .62), rgba(7, 9, 12, .46) 80%); }
.card-path { font-size: 1.2rem; margin-bottom: 1.2rem; }
.journey-card h4 {
  font-family: 'Assistant', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
.journey-card > p:last-child {
  color: #d0cdd1;
  line-height: 1.8;
  font-size: 1.2rem;
  margin: 0;
}
.journey-ending { padding-top: 3rem; }
.journey-ending h2 { color: #e8c95b; }
@media (max-width: 767px) {
  .track-glow { display: none; filter: none; }
  .journey { padding: 3rem 1rem 5rem; }
  .journey-map { margin-top: 2rem; padding-bottom: 7rem; }
  .journey-labels { padding: 1rem 1rem 3rem; gap: 1rem; }
  .journey-labels strong { font-size: 1.65rem; }
  .journey-step { padding: 0 1.5rem 4rem; }
  .step-heading { gap: .7rem; margin-bottom: 1.5rem; }
  .step-comparison { grid-template-columns: 1fr; gap: 1.25rem; }
  .journey-card { padding: 1.5rem; }
  .journey-card h4 { font-size: 1.8rem; }
  .journey-ending { padding-top: 1rem; }
}
@media print {
  .journey { padding: 1rem; }
  .journey-tracks, .journey-labels { display: none; }
  .journey-step { padding: 1rem 0; break-inside: avoid; }
  .journey-card { opacity: 1 !important; transform: none !important; background: white; }
  .journey h2, .journey p, .journey h3, .journey h4 { color: black !important; }
}

/* The trails start at the opening capsules and grow behind their movement. */
main { position: relative; isolation: isolate; }
.journey { overflow: visible; padding-top: 0; }
.journey-labels { display: none; }
.journey-map { margin-top: 0; padding-top: 10rem; isolation: auto; }
.journey-tracks { z-index: 1; }
.journey-travelers { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: clip; }
.journey-travelers img { position: absolute; top: 0; left: 0; object-fit: contain; }
.capsule-slot { display: block; width: clamp(65px, 6vw, 110px); aspect-ratio: 3 / 2; }
.hero-capsules .capsule-slot img { display: block; width: 100%; height: 100%; }
.hero:not(.is-enhanced) .hero-stage {
  z-index: 2;
  background: transparent;
}
.journey-card, .step-heading { position: relative; z-index: 2; }
.journey-step { padding-bottom: 15rem; }
.journey-step:nth-child(even) .card-blue { grid-column: 2; grid-row: 1; }
.journey-step:nth-child(even) .card-red { grid-column: 1; grid-row: 1; }
.journey-step:nth-child(3) .card-red { margin-top: 4rem; }
.journey-step:nth-child(4) .card-blue { margin-top: 3rem; }
.journey-animated .track { stroke-linecap: butt; }
.journey-ending { position: relative; z-index: 2; background: #040404; }
@media (min-width: 768px) {
  .journey-step:nth-child(4) .card-blue { grid-column: 1; }
  .journey-step:nth-child(4) .card-red { grid-column: 2; }
}
@media (max-width: 767px) {
  .journey { padding-top: 0; }
  .journey-map { padding-top: 7rem; }
  .journey-step { padding-bottom: 12rem; }
  .journey-step:nth-child(even) .card-blue, .journey-step:nth-child(even) .card-red { grid-column: auto; grid-row: auto; }
  .journey-step:nth-child(3) .card-red, .journey-step:nth-child(4) .card-blue { margin-top: 0; }
}
@media print {
  .journey-travelers, main > .journey-tracks { display: none; }
  .journey-map { padding-top: 0; }
  .journey-step { padding-bottom: 1rem; }
  .step-heading { opacity: 1 !important; }
}

@media (max-width: 767px) {
  .journey h2 { font-size: clamp(2.3rem, 8vw, 4rem); }
}

/* Keep the decorative animation layer transparent with the remote contrast plugin,
   including while an older plugin stylesheet is still cached. */
html[data-fm-contrast] body main > .journey-travelers:not(#fm-preferences) {
  background-color: transparent !important;
}