/* Color follows the sentence, while the line breaks preserve the approved type layout. */
.hero h1 { color: #fff; }
.hero h1 .hero-sentence { color: var(--green); }

/* Allow the hero to grow with longer copy or larger text settings. */
.hero { height: auto; max-height: none; }
.hero .hero-content { padding-bottom: 124px; }
.hero .hero-actions { flex-wrap: wrap; }

/* A separate, full-width room photograph for the resident experience. */
.residents-hero .hero-photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.residents-hero .hero-shade {
  background:
    linear-gradient(90deg, rgba(24,26,30,.95) 0%, rgba(24,26,30,.87) 27%, rgba(24,26,30,.42) 52%, rgba(24,26,30,.06) 80%),
    linear-gradient(0deg, rgba(24,26,30,.76), transparent 32%);
}
.residents-hero .hero-description { max-width: 470px; }
.residents-hero .hero-foot > span { letter-spacing: .04em; }

@media (max-width: 800px) {
  .hero h1 { font-size: clamp(3.5rem, 10.8vw, 6.4rem); }
  .hero .hero-content { padding-bottom: 330px; }
  .hero .hero-foot { gap: 18px; align-items: flex-end; }
  .residents-hero .hero-photo { object-position: 73% center; }
  .residents-hero .hero-shade {
    background: linear-gradient(180deg, rgba(24,26,30,.91) 0%, rgba(24,26,30,.85) 46%, rgba(24,26,30,.26) 73%, rgba(24,26,30,.65) 100%);
  }
  .residents-hero .hero-foot > p { max-width: 175px; }
  .residents-hero .hero-foot > span { max-width: 130px; text-align: right; line-height: 1.5; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(3.1rem, 14vw, 4.15rem); }
  .hero .hero-actions { gap: 20px; }
}