/* ==========================================================================
   Two Sixes — homepage hero and the Route to Oatman journey
   Loaded only on the homepage.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Slide up under the sticky header so the artwork runs edge to edge. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  min-height: max(34rem, min(100svh, 48rem));
  color: var(--text-invert);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(178deg, #10243d 0%, #2b4560 26%, #6b5470 48%, #b7663f 68%, #d98c42 82%, #e0a544 100%);
}

.hero__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__scene > svg { width: 100%; height: 100%; }

/*
  Parallax layers. journey.js reads `--layer-shift` once per layer and then
  writes each layer's transform directly. Driving them from a custom property
  on a shared ancestor invalidated style for the entire scene subtree on every
  frame, which measured 2.55ms per frame on its own.
  `will-change` is applied only while movement is actually happening.
*/
.hero .layer { transform-box: view-box; }
.hero.is-animating .layer { will-change: transform; }
.hero .layer--sun    { --layer-shift: 34px; }
.hero .layer--far    { --layer-shift: 16px; }
.hero .layer--mid    { --layer-shift: 34px; }
.hero .layer--near   { --layer-shift: 62px; }
.hero .layer--fore   { --layer-shift: 96px; }

/* Decorative motion stops once the hero is scrolled past or the tab is hidden. */
.hero.is-paused .hero__scroll .icon { animation-play-state: paused; }

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(29, 26, 23, 0.55), transparent 60%),
    radial-gradient(80% 60% at 50% 0%, rgba(9, 18, 31, 0.5), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  width: 100%;
}

@media (min-width: 64em) {
  .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.85rem;
  /* Opaque instead of blurred: this sits over the parallaxing hero art. */
  background: rgba(9, 14, 22, 0.52);
  border: 1px solid rgba(247, 239, 224, 0.25);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #f6e6c4;
}
.hero__eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-gold);
}

.hero__title {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(10, 16, 26, 0.4);
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--c-gold);
}

.hero__lede {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: rgba(247, 239, 224, 0.88);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--sp-6);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(247, 239, 224, 0.2);
}

.hero__fact { min-width: 7rem; }
.hero__fact dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(247, 239, 224, 0.62);
}
.hero__fact dd {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.hero__medallion { display: none; }

@media (min-width: 64em) {
  .hero__medallion {
    display: grid;
    place-items: center;
    justify-self: center;
  }
  .hero__medallion .logo--stacked { align-items: center; text-align: center; }
  .hero__medallion .logo__badge { width: 11rem; color: var(--c-gold); --logo-plate: rgba(15, 22, 34, 0.42); }
  .hero__medallion .logo__type { align-items: center; color: #f7efe0; }
  .hero__medallion .logo__name { font-size: 1.9rem; }
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-7);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(247, 239, 224, 0.7);
  text-decoration: none;
}
.hero__scroll .icon { animation: nudge 2.6s var(--ease) infinite; }
.hero__scroll:hover { color: var(--text-invert); }

@keyframes nudge {
  0%, 72%, 100% { transform: translateY(0); }
  82% { transform: translateY(0.3rem); }
}

/* ==========================================================================
   Journey
   ========================================================================== */

.journey {
  position: relative;
  background: #16202e;
  color: var(--text-invert);
  isolation: isolate;
}

.journey__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  z-index: 0;
}

.journey__stops {
  position: relative;
  z-index: 2;
  /* Pull the flowing stop panels back over the pinned scene. Because the
     panels stay in normal flow, every product inside them is reachable by
     keyboard and screen reader in document order. */
  margin-top: -100svh;
}

.journey__stop {
  display: grid;
  align-content: center;
  min-height: 100svh;
  /* Extra space at the top keeps a tall panel clear of the sticky header. */
  padding-block: calc(var(--header-h) + clamp(1rem, 3vh, 2rem)) clamp(2rem, 6vh, 4rem);
}

/* ---------------------------------------------------------------- sky */

.journey__sky { position: absolute; inset: 0; }

.sky {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.sky--0 { background: linear-gradient(180deg, #123152 0%, #3d6484 40%, #a9a074 78%, #d8b271 100%); }
.sky--1 { background: linear-gradient(180deg, #17395a 0%, #4a7291 38%, #b09a72 76%, #d9ac68 100%); }
.sky--2 { background: linear-gradient(180deg, #1d3b57 0%, #5c7b90 34%, #c08a5c 74%, #e0a544 100%); }
.sky--3 { background: linear-gradient(180deg, #29354b 0%, #7a6a72 32%, #c96f3c 70%, #e79a45 100%); }
.sky--4 { background: linear-gradient(180deg, #221f31 0%, #6b4a55 30%, #b4552f 66%, #dd8b3c 100%); }
.sky--5 { background: linear-gradient(180deg, #131625 0%, #3f2d3c 32%, #7c3a2b 64%, #c1592b 100%); }

/* Toggled directly on the sky element by journey.js. Matching on a data
   attribute of the pinned viewport instead made every stage change re-run
   selector matching for the whole scene subtree. */
.sky.is-active { opacity: 1; }

/* -------------------------------------------------------------- scene */

.journey__scene { position: absolute; inset: 0; }
.journey__scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* While the drive is moving, the scenery and the route each get their own
   compositor layer so the route's mask re-raster does not drag the whole
   pinned viewport into the same repaint. Dropped again the moment the
   animator settles, so idle pages hold no extra GPU memory. */
.journey.is-animating .journey__scene,
.journey.is-animating .journey__route { will-change: transform; }

/* See the note on .hero .layer: transforms are written per layer by
   journey.js; these declarations are only the configuration it reads. */
.journey .layer {
  transform-box: view-box;
  transform-origin: 50% 88%;
}
.journey.is-animating .layer { will-change: transform; }
.journey .layer--sun  { --layer-shift: 9vh;  --layer-zoom: 0.04; }
.journey .layer--far  { --layer-shift: 5vh;  --layer-zoom: 0.08; }
.journey .layer--mid  { --layer-shift: 11vh; --layer-zoom: 0.18; }
.journey .layer--near { --layer-shift: 20vh; --layer-zoom: 0.30; }
/* The town barely moves: the arrival has to stay composed at the end. */
.journey .layer--town { --layer-shift: 4vh;  --layer-zoom: 0.05; }
.journey .layer--fore { --layer-shift: 40vh; --layer-zoom: 0.55; }

/*
  The vignette never changes, but it sits above the scene, so without its own
  compositor layer every scene repaint also re-rasterized these two
  full-viewport gradients. Promoting it measured +7.7fps on its own.
*/
.journey__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
  background:
    linear-gradient(180deg, rgba(11, 16, 26, 0.55) 0%, transparent 26%, transparent 58%, rgba(11, 16, 26, 0.62) 100%),
    radial-gradient(110% 80% at 50% 46%, transparent 40%, rgba(11, 16, 26, 0.4) 100%);
}

/* Elements that only belong to one part of the drive. Same reasoning as the
   sky: the class goes on the piece, not on an ancestor. */
.scene-piece { opacity: 0; transition: opacity 800ms var(--ease); }
.scene-piece.is-shown { opacity: 1; }

.store-sign { font-family: var(--font-display); font-weight: 700; }

/* Burros only shuffle when motion is welcome, and only while the journey is
   actually on screen in a visible tab. */
.scene-piece--burros .burro { animation: burro-step 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.scene-piece--burros .burro:nth-of-type(2) { animation-delay: -2.4s; animation-duration: 6.6s; }
.scene-piece--burros .burro:nth-of-type(3) { animation-delay: -4.1s; animation-duration: 7.4s; }

.journey.is-paused .scene-piece--burros .burro,
.journey.is-paused .dust { animation-play-state: paused; }

@keyframes burro-step {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  35% { transform: translateX(1.4%) rotate(0.5deg); }
  70% { transform: translateX(-0.8%) rotate(-0.4deg); }
}

/* -------------------------------------------------------------- dust */

.journey__dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.dust {
  position: absolute;
  bottom: 6%;
  width: 26vmax;
  height: 26vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 200, 150, 0.16), transparent 62%);
  animation: drift 26s linear infinite;
}
.dust:nth-child(1) { left: -12%; animation-duration: 31s; }
.dust:nth-child(2) { left: 34%; bottom: 16%; animation-duration: 24s; animation-delay: -8s; opacity: 0.7; }
.dust:nth-child(3) { left: 68%; bottom: 2%; animation-duration: 37s; animation-delay: -16s; }

@keyframes drift {
  from { transform: translate3d(-14vw, 0, 0) scale(0.9); }
  to { transform: translate3d(22vw, -6vh, 0) scale(1.25); }
}

/* -------------------------------------------------------------- route */

.journey__route { position: absolute; inset: 0; }
.journey__route svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* On wide screens the stop panels live on the right, so the route is given
   the left half of the scene to wind through. */
@media (min-width: 62em) {
  .journey__route { left: 0; right: 58%; }
}

.route__shadow { fill: none; stroke: rgba(12, 16, 24, 0.35); stroke-width: 58; stroke-linecap: round; }
.route__base { fill: none; stroke: rgba(247, 239, 224, 0.16); stroke-width: 44; stroke-linecap: round; }
.route__line { fill: none; stroke: #f4e7cd; stroke-width: 44; stroke-linecap: round; }
/*
  The reveal happens on the mask path, so the road and its center line are
  uncovered together. With no JavaScript there is no dash pattern and the whole
  route is drawn.

  There is deliberately NO transition here. journey.js already writes this
  value every frame; a transition on top of that made the browser run a second
  interpolation between each written value, which both added work and made the
  road lag behind the marker. Easing now happens once, in the animator.
*/
.route__dashes { fill: none; stroke: #b8532c; stroke-width: 5; stroke-dasharray: 20 30; stroke-linecap: round; opacity: 0.85; }

.route__stop-dot { fill: #f4e7cd; stroke: #8a3f22; stroke-width: 4; }
.route__stop-dot.is-passed { fill: var(--c-gold); }

.route__marker { transition: opacity 400ms var(--ease); }
.route__marker-plate { fill: #a63a2e; stroke: #f4e7cd; stroke-width: 5; }
.route__marker-text { fill: #f9f0dc; font-family: var(--font-display); font-size: 30px; font-weight: 700; }

/* ----------------------------------------------------------- progress */

.journey__progress {
  position: absolute;
  top: 50%;
  left: clamp(0.75rem, 2vw, 1.75rem);
  transform: translateY(-50%);
  z-index: 3;
  display: none;
}

@media (min-width: 62em) {
  .journey__progress { display: block; }
}

.progress-rail { position: relative; display: grid; gap: 0; }

.progress-rail__track {
  position: absolute;
  left: 0.6875rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: rgba(247, 239, 224, 0.25);
}

/* Scaled rather than resized: animating `height` forced layout on every
   scroll frame, and the 120ms transition on top of a per-frame write made the
   fill lag the route. `scaleY` is a compositor-friendly transform. */
.progress-rail__fill {
  position: absolute;
  left: 0.6875rem;
  top: 0.6rem;
  width: 2px;
  height: calc(100% - 1.2rem);
  background: var(--c-gold);
  transform: scaleY(var(--p, 0));
  transform-origin: 50% 0;
}

.progress-rail__item { position: relative; z-index: 1; }

.progress-rail__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.5rem 0.4rem 0;
  min-height: 2.5rem;
  text-decoration: none;
  color: rgba(247, 239, 224, 0.66);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.progress-rail__link::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.375rem;
  border-radius: 50%;
  border: 2px solid rgba(247, 239, 224, 0.45);
  background: #16202e;
  transition: all var(--dur) var(--ease);
}
.progress-rail__link:hover { color: var(--text-invert); }
.progress-rail__item.is-active .progress-rail__link { color: var(--c-gold); }
.progress-rail__item.is-active .progress-rail__link::before { background: var(--c-gold); border-color: var(--c-gold); transform: scale(1.2); }
.progress-rail__item.is-passed .progress-rail__link::before { background: rgba(224, 165, 68, 0.65); border-color: var(--c-gold); }

.journey__meter {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  background: rgba(11, 16, 26, 0.72);
  border: 1px solid rgba(247, 239, 224, 0.22);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(247, 239, 224, 0.85);
}
.journey__meter-bar { width: 4.5rem; height: 3px; background: rgba(247, 239, 224, 0.25); border-radius: var(--r-pill); overflow: hidden; }
/* Same reasoning as .progress-rail__fill: scale instead of animating width. */
.journey__meter-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-gold);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* --------------------------------------------------------- stop cards */

/*
  Opaque on purpose. This card was 96% opaque with a 3px backdrop blur, which
  meant the browser re-blurred a large slice of the moving scene behind it on
  every frame — the single most expensive backdrop-filter on the page
  (+8.1fps when removed). At 96% opacity the blur was barely perceptible, so
  the card is now fully opaque and the effect is gone rather than faked.
*/
.stop-card {
  max-width: 34rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  color: var(--text);
  border: 1px solid rgba(29, 26, 23, 0.14);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* On wide screens the panels sit in the right half, leaving the left half of
   the scene for the route and the progress rail. */
@media (min-width: 62em) {
  .journey__stop > .shell { display: flex; justify-content: flex-end; }
  .journey__stop--center > .shell { justify-content: center; }
  .journey__stop--center .stop-card { text-align: center; max-width: 40rem; }
}

.journey.is-enhanced .stop-card {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.journey.is-enhanced .journey__stop.is-in .stop-card { opacity: 1; transform: none; }

.stop-card__marker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-leather);
}
.stop-card__marker::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--c-red);
}

.stop-card__title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.stop-card__subtitle {
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.stop-card__body { margin-top: var(--sp-4); color: var(--text-soft); }

.stop-card__stop {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.stop-card__stop-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.stop-card__stop-blurb { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--text-muted); }

.stop-card__products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-top: var(--sp-4);
}

.stop-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-5); }

/* Arrival card gets the brand treatment. */
.stop-card--arrival {
  background: var(--c-ink);
  color: var(--text-invert);
  border-color: rgba(224, 165, 68, 0.4);
}
.stop-card--arrival .stop-card__marker { color: var(--c-gold); }
.stop-card--arrival .stop-card__marker::before { background: var(--c-gold); }
.stop-card--arrival .stop-card__subtitle,
.stop-card--arrival .stop-card__body { color: var(--text-invert-soft); }
.stop-card--arrival .logo { color: var(--c-gold); justify-content: center; }
.stop-card--arrival .logo__badge { width: 5.5rem; }
.stop-card--arrival .logo__type { color: var(--text-invert); align-items: center; }
.stop-card--arrival .arrival-mark { display: flex; justify-content: center; margin-bottom: var(--sp-4); }
.stop-card--arrival .stop-card__actions { justify-content: center; }

/* --------------------------------------------------------- outro band */

.journey-outro {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--bg);
  border-top: 4px solid var(--c-gold-deep);
}

/* ==========================================================================
   Homepage sections
   ========================================================================== */

.story-band {
  position: relative;
  overflow: hidden;
  background: var(--c-blue);
  color: var(--text-invert);
}
.story-band__art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.22; pointer-events: none; }
.story-band__inner { position: relative; z-index: 1; }
.story-band .eyebrow { color: var(--c-gold); }
.story-band__title { margin-top: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; }
.story-band__body { margin-top: var(--sp-4); color: var(--text-invert-soft); }
.story-band__body p + p { margin-top: var(--sp-3); }

.visit-cta {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
@media (min-width: 54em) {
  .visit-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.visit-cta__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; }
.visit-cta__body { margin-top: var(--sp-3); color: var(--text-soft); }
.visit-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-5); }

/* ==========================================================================
   Smaller screens: shorter journey, fewer simultaneous effects
   ========================================================================== */

@media (max-width: 48em) {
  .journey__stop { min-height: 82svh; }

  /* Roadside product cards go horizontal so a stop panel stays close to one
     screen tall instead of turning into a long scroll of stacked cards. */
  .stop-card__products { grid-template-columns: 1fr; gap: 0.6rem; }
  .stop-card__products .pcard--compact {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    grid-template-areas: "media body" "media actions";
    align-items: start;
  }
  .stop-card__products .pcard__media {
    grid-area: media;
    align-self: stretch;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  .stop-card__products .pcard__media .product-art { height: 100%; aspect-ratio: auto; }
  .stop-card__products .pcard__body { grid-area: body; padding: 0.7rem 0.8rem 0; }
  .stop-card__products .pcard__actions { grid-area: actions; padding: 0.5rem 0.8rem 0.8rem; }
  .journey .layer--sun  { --layer-shift: 5vh;  --layer-zoom: 0.02; }
  .journey .layer--far  { --layer-shift: 3vh;  --layer-zoom: 0.04; }
  .journey .layer--mid  { --layer-shift: 6vh;  --layer-zoom: 0.09; }
  .journey .layer--near { --layer-shift: 10vh; --layer-zoom: 0.14; }
  .journey .layer--town { --layer-shift: 2vh;  --layer-zoom: 0.02; }
  .journey .layer--fore { --layer-shift: 18vh; --layer-zoom: 0.26; }
  .journey__dust { display: none; }
  .scene-piece--burros .burro { animation: none; }
  .hero .layer { transform: none; }
}

/* ==========================================================================
   Reduced motion: the same journey, told as a static sequence
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Unpinned and given the scene's own landscape band, so the illustration
     still reads as a place rather than a strip of empty sky.
     `relative` (not `static`) is important: the sky, scene, route and vignette
     are absolutely positioned against this box, and would otherwise stretch
     over the entire section. */
  .journey__viewport {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 7;
  }
  .journey__stops { margin-top: 0; }
  .journey__stop { min-height: 0; padding-block: var(--sp-6); }
  .journey.is-enhanced .stop-card { opacity: 1; transform: none; }
  .journey__stop > .shell { justify-content: center; }
  .stop-card { max-width: 46rem; margin-inline: auto; }
  .journey__progress, .journey__meter { display: none; }
  .journey__dust { display: none; }
  /* These must beat the inline transforms journey.js writes, in case reduced
     motion is switched on after the page has already been animated. */
  .journey .layer, .hero .layer { transform: none !important; }
  .scene-piece, .scene-piece.is-shown { opacity: 1; }
  .hero__scroll .icon { animation: none; }
  [data-route-mask] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}