/* RoadStage cover: photograph, emblem and navigation move on separate layers. */
.hero {
  min-height: 680px;
  height: 100svh;
  max-height: 1100px;
  isolation: isolate;
}
.hero-photo-layer {
  position: absolute;
  inset: -12% 0 -4%;
  will-change: transform;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
  will-change: auto;
}
.hero-media::after {
  background: linear-gradient(180deg, rgba(8,13,18,.45), rgba(8,13,18,.08) 28%, rgba(8,13,18,.18) 48%, rgba(8,13,18,.82) 100%);
}
.hero-emblem {
  position: absolute;
  top: 45%;
  left: 50%;
  width: clamp(230px, 24vw, 350px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-emblem-motion {
  will-change: transform, opacity;
}
.hero-emblem img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
}
.hero-content {
  bottom: 104px;
  text-align: center;
}
.hero .eyebrow {
  justify-content: center;
}
.hero h1 {
  max-width: none;
  font-size: clamp(42px, 4.5vw, 68px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.04;
  margin-top: 16px;
}
.hero h1 span {
  white-space: nowrap;
}
.hero-bottom {
  justify-content: center;
  gap: 32px;
  margin-top: 24px;
}
.hero-bottom p {
  max-width: 350px;
  font-size: 14px;
  text-align: left;
}
.hero-bottom .button {
  min-height: 50px;
  padding: 15px 20px;
}
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .hero-photo-layer { inset: 0; }
  .hero-image { object-fit: contain; object-position: 50% 35%; }
}
@media (min-width: 761px) and (max-height: 720px) {
  .hero { min-height: 620px; }
  .hero-emblem { top: 38%; width: 220px; }
  .hero-content { bottom: 85px; }
  .hero h1 { font-size: 46px; }
  .hero-bottom { margin-top: 18px; }
}
@media (max-width: 760px) {
  .site-header:not(.is-fixed) .header-tools { margin-left: auto; }
  .hero { min-height: 700px; height: 100svh; max-height: 1000px; }
  .hero-photo-layer { inset: 0; }
  .hero-image {
    object-fit: contain;
    object-position: 50% 35%;
  }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(8,13,18,.12), rgba(8,13,18,.04) 28%, rgba(8,13,18,.06) 48%, rgba(8,13,18,.85) 75%, #101820 100%);
  }
  .hero-emblem { top: 42%; width: clamp(160px, 48vw, 220px); }
  .hero-content { bottom: 89px; }
  .hero h1 { font-size: clamp(35px, 9.4vw, 48px); line-height: 1.02; margin-top: 16px; }
  .hero h1 span { display: block; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .08em; }
  .hero-bottom { margin-top: 20px; }
  .hero-bottom p { margin: 0 auto 20px; text-align: center; font-size: 12px; max-width: 285px; }
  .hero-bottom .button { display: inline-flex; min-height: 48px; font-size: 12px; }
  .hero-foot { font-size: 8px; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .hero-emblem { top: 36%; width: 165px; }
  .hero-image { object-position: 50% 25%; }
  .hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .hero-bottom { margin-top: 16px; }
  .hero-bottom p { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-layer, .hero-emblem-motion { transform: none !important; will-change: auto; }
  .hero-emblem-motion { opacity: 1 !important; }
}