/* Art-directed hero: landscape for desktop, portrait for mobile. */
.hero {
  min-height: clamp(640px, 45vw, 860px);
  background-image: none;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero.parallax-enabled .hero-photo {
    inset: -40px 0;
    transform: translate3d(0, var(--hero-shift, 0px), 0);
    will-change: transform;
  }
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}

.hero-shade {
  background: linear-gradient(180deg, rgba(4, 12, 35, .12), rgba(4, 12, 35, .22) 55%, rgba(4, 12, 35, .38));
}

.hero-content {
  width: min(760px, 90%);
  padding: 56px 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.hero .brand {
  margin-bottom: 30px;
}

.hero h1 {
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  line-height: 1.08;
}

@media (max-width: 800px) {
  .hero { min-height: 580px; }
  .hero-photo img { object-position: 52% 50%; }
  .hero-content { padding: 55px 0; }
  .hero .brand { margin-bottom: 34px; }
  .hero h1 { font-size: 2.25rem; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 2rem; }
}