.motion-hero {
  /* Fill the screen; keep the road anchored to its bottom edge. */
  width: 100%; height: 100svh; min-height: 0; max-height: none;
  aspect-ratio: auto; margin: 0; border-radius: 0; container-type: inline-size;
  --scene-scale: .7;
  --scene-height: calc(100cqw * var(--scene-scale) * 941 / 1672);
}
.motion-hero .hero-copy { padding-top: clamp(76px, min(11.5cqw, 15svh), 175px); }
.motion-hero h1 { font-size: clamp(46px, min(6cqw, 10svh), 88px); }
.motion-hero .hero-copy p { font-size: clamp(17px, min(1.45cqw, 2.6svh), 21px); margin-top: 22px; }      /* was 15-20 px (2026-09-25) */
.motion-hero .hero-actions { margin-top: 24px; }
.scene-viewport {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  mask-image: linear-gradient(to top, #000 calc(var(--scene-height) * .85), transparent var(--scene-height));
}
.scene-wrap {
  /* Crop spare sky on wide screens, never the lower road or the vehicle. */
  position: absolute; bottom: 0; left: 50%; width: calc(100% * var(--scene-scale));
  transform: translateX(-50%); aspect-ratio: 1672 / 941;
}
#journey-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.framing-study { width: min(520px, 100%); margin: 0 auto 38px; }
.framing-label { display: block; margin-bottom: 8px; color: var(--quiet); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.framing-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 5px; border: 1px solid #15262125; border-radius: 18px; background: #fffefaed; }
.framing-options button { border: 0; border-radius: 13px; background: transparent; color: var(--ink); min-height: 48px; padding: 7px 5px; }
.framing-options button strong, .framing-options button span { display: block; }
.framing-options button strong { font-size: 13px; font-weight: 600; }
.framing-options button span { margin-top: 3px; font-size: 11px; }
.framing-options button:hover { background: #e6eddf; }
.framing-options button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.framing-hint { display: block; margin-top: 8px; color: var(--quiet); font-size: 11px; line-height: 1.4; }
.sky-extension { position: absolute; inset: 0; z-index: -2; background: #cce5ee url('./art/landscape-panorama-a3.webp') center top / auto 200%; }
#ambient-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.hero-playback { position: absolute; bottom: clamp(48px, calc(var(--scene-height) * .16), 106px); right: 3%; border: 1px solid #15262144; border-radius: 24px; background: #fffefae8; padding: 9px 16px; min-height: 44px; color: var(--ink); font-size: 13px; }
.secondary-cta svg { margin-left: 6px; vertical-align: middle; }
@media (min-width: 701px) { .motion-hero .site-header { padding-top: 20px; } }
.motion-study { padding-top: 40px; padding-bottom: 34px; }
.playback-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.transport { display: flex; align-items: center; gap: 10px; }
.transport button, .transport select { border: 1px solid #b9c7be; color: var(--ink); background: transparent; min-height: 44px; padding: 10px 19px; border-radius: 24px; font: inherit; font-size: 14px; }
.transport #play-pause { min-width: 84px; background: var(--ink); color: white; border-color: var(--ink); }
.speed-label { font-size: 13px; margin-left: 15px; color: var(--quiet); }
.transport select { padding-inline: 12px; }
.motion-status { display: flex; gap: 16px; font-size: 14px; margin: 0; }
#position-readout { font-variant-numeric: tabular-nums; color: var(--quiet); min-width: 42px; }
.timeline-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--quiet); margin-top: 28px; }
#time-readout { font-variant-numeric: tabular-nums; }
#timeline { display: block; width: 100%; margin: 10px 0 17px; height: 28px; accent-color: #c25456; cursor: pointer; }
input:focus-visible, select:focus-visible { outline: 3px solid #b84246; outline-offset: 4px; }
.step-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.step-buttons button { text-align: left; border: 0; border-top: 2px solid #d5ded7; padding: 13px 0; background: transparent; color: var(--quiet); font-size: 13px; min-height: 46px; }
.step-buttons button:hover, .step-buttons button[aria-pressed="true"] { border-color: #b44349; color: var(--ink); }
.motion-settings { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; line-height: 1.6; color: var(--quiet); margin: 4px 0 22px; }
.motion-settings p { margin: 0; }
.motion-settings label { display: flex; gap: 9px; align-items: center; }
.motion-settings label { flex-shrink: 0; }
.motion-settings input { accent-color: var(--ink); width: 17px; height: 17px; }
.preference-note { font-size: 13px; color: var(--quiet); }
#asset-error { position: absolute; bottom: 12px; left: 5%; background: var(--paper); color: #933b3e; padding: 12px; font-size: 14px; }
@media (min-width: 701px) and (max-width: 1208px) {
  .motion-hero .hero-copy { padding-top: clamp(85px, 15svh, 130px); }
  .motion-hero h1 { font-size: clamp(46px, min(6.1vw, 10svh), 75px); }
}
@media (max-width: 700px) {
  .motion-hero .hero-copy { padding-top: clamp(92px, 17svh, 150px); }
  .motion-hero h1 { font-size: clamp(42px, 11.7vw, 68px); }
  .hero-playback { right: 15px; padding: 6px 12px; min-height: 36px; font-size: 12px; }
  .motion-study { padding-top: 30px; }
  .playback-row { align-items: flex-start; flex-direction: column; gap: 18px; }
  .motion-status { justify-content: space-between; width: 100%; }
  .step-buttons { grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
  .speed-label { margin-left: 3px; }
  .transport { gap: 8px; }
  .transport button { padding-inline: 16px; }
  .motion-settings { display: block; }
  .motion-settings label { margin-top: 14px; min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }