.ss-hero { width: 100%; overflow: hidden; background: #1d241e; }
.ss-hero__image { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; }
/* Full composition is visible on mobile; no crop of the person or fire. */
@media (max-width: 767px) { .ss-hero__image { width: 100%; height: auto; } }

/* Homepage headline */
.home-real .hero-copy h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep NEXT. green */
.home-real .hero-copy h1 em {
  color: #91a653 !important;
  -webkit-text-fill-color: #91a653 !important;
}

/* Weather widget and dynamically populated values */
.home-real .weather-card,
.home-real .weather-card *,
.home-real .weather-card .weather-title,
.home-real .weather-card .weather-now,
.home-real .weather-card .weather-stats,
.home-real .weather-card .forecast-strip {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Override any gradient text effects */
.home-real .hero-copy h1,
.home-real .weather-card * {
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
}

.hero-shade {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
  background-color: #182019;
}

.hero-shade .ss-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-shade .ss-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-shade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.65),
    rgba(0,0,0,.15)
  );
  pointer-events: none;
}

.hero-shade .hero-grid {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .hero-shade .ss-hero__image {
    object-position: 60% center;
  }
}