/* Karim inner/missing-page banners — desktop 2560×1440 + mobile 1080×1920.
   Photo strip above the existing page-hero / hero-3d. Homepage heroes stay
   on homepage-hero.css. City doorways stay on city-pages.css.
   Mobile source is 9:16 with the title across the frame — show it at its
   natural height. Do not force a short landscape crop. */
.hero-banner--inner,
.hero-banner--inner .hero-banner-photo {
  background: #0A0A0A;
}

.hero-banner--inner .hero-banner-photo picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.hero-banner--inner .hero-banner-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: #0A0A0A;
}

/* Tesla Tint LA — WHITE / high-key pack only. */
.hero-banner--inner-white,
.hero-banner--inner-white .hero-banner-photo {
  background: #ffffff;
}

.hero-banner--inner-white .hero-banner-photo img {
  background: #ffffff;
}

@media (min-width: 768px) {
  .hero-banner--phone-only {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-banner--inner {
    overflow: visible;
  }

  .hero-banner--inner .hero-banner-photo {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    line-height: 0;
  }

  .hero-banner--inner .hero-banner-photo picture,
  .hero-banner--inner .hero-banner-photo img {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}