/* Homepage vivid heroes — Zack approved 2026-09-06.
   Desktop 16:9. Mobile 9:16 is cropped as a banner (city-banner bound),
   not a full-viewport wall. Alarm fold is excluded: copy stays on the photo. */
.hero-banner-photo picture {
  display: block;
  width: 100%;
  line-height: 0;
}

body.page-home .hero-banner:not(.hero-banner--fold) .hero-banner-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  object-fit: cover;
  object-position: center bottom;
  background: transparent;
}

@media (max-width: 767px) {
  body.page-home .hero-banner:not(.hero-banner--fold) .hero-banner-photo {
    aspect-ratio: 3 / 2;
    max-height: 280px;
    overflow: hidden;
    background: #0A0A0A;
  }

  body.page-home .hero-banner:not(.hero-banner--fold) .hero-banner-photo picture,
  body.page-home .hero-banner:not(.hero-banner--fold) .hero-banner-photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center bottom;
  }
}