/* Real-time 3D is progressive enhancement; the existing unique photograph is the fallback. */
.drive-hero { overflow: hidden; background: #e8f3f6; }
/* Keep the whole wordmark above the rendered road, in the upper-right sky.
   A negative stacking level lets the opaque WebGL ground slice through it. */
.drive-hero__backword { position: absolute; z-index: 1; top: 122px; left: 48%; right: 5%; color: #b8d7e1; font: italic 800 clamp(2.5rem,7vw,8rem)/1.15 var(--font-latin); text-align: right; padding-right: .08em; white-space: nowrap; letter-spacing: -.035em; pointer-events: none; display: none; }
.drive-stage { position: absolute; inset: 80px -3% 0 28%; z-index: 0; outline-offset: -8px; opacity: 0; visibility: hidden; touch-action: pan-y; cursor: grab; }
.drive-stage:active { cursor: grabbing; }
.drive-stage__canvas { width: 100%; height: 100%; display: block; }
.drive-hero.is-3d-ready .drive-stage { opacity: 1; visibility: visible; transition: opacity .65s; }
.drive-hero.is-3d-ready .poster-hero__image { visibility: hidden; }
.drive-hero.is-3d-ready .drive-hero__backword { display: block; }
.drive-hero.is-3d-ready .poster-hero__inner { pointer-events: none; }
.drive-hero .poster-hero__inner { min-height: max(800px,95svh); padding-top: 145px; padding-bottom: 100px; }
.drive-hero .poster-hero__message { margin-block: auto; padding-top: 70px; }
.drive-hero .poster-hero__title { font-size: clamp(2.6rem,5.1vw,5.1rem); line-height: 1.42; }
.drive-hero .poster-hero__english { font-size: clamp(1.2rem,2.3vw,2rem); color: #ffae77; }
.drive-hero .poster-hero__bottom { flex-direction: column; align-items: start; gap: 26px; }
.drive-hero .poster-hero__bottom p { color: #d5dfe8; }
.drive-hero .poster-hero__cta { min-width: 240px; padding: 17px 30px; pointer-events: auto; }
.drive-hero .poster-hero__scroll { right: auto; left: 0; bottom: 38px; writing-mode: horizontal-tb; pointer-events: auto; }
.drive-hero.is-3d-ready { color: #142334; }
.drive-hero.is-3d-ready .poster-hero__english { color: #a73508; }
.drive-hero.is-3d-ready .poster-hero__title .accent { color: #bb3f08; }
.drive-hero.is-3d-ready .poster-hero__bottom p { color: #334e5e; }
.home .site-header--overlay { color: #142334; background: rgba(255,255,255,.94); }
.home .site-header--overlay .nav-primary li a:hover { color: #b43b07; }
.drive-hero.is-3d-ready .drive-stage { mask-image: linear-gradient(90deg,transparent,#000 13%); }
@media (min-width:1800px) { .drive-stage { right: 3%; left: 35%; } }
@media (max-width:1050px) and (min-width:761px) {
  .drive-hero .poster-hero__title { font-size: 4.6vw; }
  .drive-stage { left: 30%; }
}
@media (max-width:760px) {
  .drive-hero.is-3d-ready { display: flex; flex-direction: column; }
  .drive-hero .poster-hero__inner { min-height: 960px; padding-top: 112px; padding-bottom: 245px; }
  .drive-hero.is-3d-ready .poster-hero__inner { order: 1; min-height: 0; padding-bottom: 32px; }
  .drive-hero .poster-hero__kicker { font-size: .75rem; }
  .drive-hero .poster-hero__message { margin: 24px 0 0; padding-top: 0; }
  .drive-hero .poster-hero__english { font-size: 1.1rem; margin-bottom: 12px; }
  .drive-hero .poster-hero__title { font-size: clamp(1.85rem,7.6vw,3.2rem); line-height: 1.42; }
  .drive-hero .poster-hero__bottom { margin-top: 340px; gap: 20px; }
  .drive-hero .poster-hero__bottom p { font-size: .9375rem; }
  .drive-hero .poster-hero__cta { min-height: 54px; padding: 14px 24px; font-size: 1rem; align-self: center; width: 100%; max-width: 340px; min-width: 0; position: relative; padding-inline: 52px; }
  .drive-hero .poster-hero__cta > span { position: absolute; right: 20px; top: 0; bottom: 0; display: flex; align-items: center; line-height: 1; }
  .drive-hero .poster-hero__bottom p { align-self: stretch; }
  .drive-hero.is-3d-ready .drive-stage { mask-image: none; }
  .drive-stage { top: 275px; left: -6%; right: -6%; bottom: auto; height: 380px; }
  /* On small screens give the vehicle its own clean area, without a second slogan. */
  .drive-hero.is-3d-ready .drive-hero__backword { display: none; }
  .drive-hero .poster-hero__scroll { display: none; }
  .drive-hero:not(.is-3d-ready) .poster-hero__inner { min-height: 800px; padding-bottom: 56px; }
  .drive-hero:not(.is-3d-ready) .poster-hero__message { margin-top: auto; padding-top: 230px; }
  .drive-hero:not(.is-3d-ready) .poster-hero__bottom { margin-top: 24px; }
}
@media (prefers-reduced-motion:reduce) { .drive-hero .drive-stage { transition: none; } }