/* --- Homepage: hero ambient cityscape background --- */

.ls-hero {
  background: #ffffff;
  min-height: clamp(460px, 58vh, 620px);
  display: flex;
  align-items: center;
}

/* Mobile: let content drive the height so the hero doesn't dominate
   the viewport on short phones. Inner padding from hero.html still
   gives it breathing room. */
@media (max-width: 767.98px) {
  .ls-hero {
    min-height: auto;
  }
}

.ls-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ls-hero-cityscape {
  position: absolute;
  left: -32.5%;
  bottom: 0;
  width: 165%;
  height: auto;
  max-width: none;
  transform: none;
  opacity: 0.35;
}

@media (min-width: 576px) {
  .ls-hero-cityscape {
    left: -25%;
    width: 150%;
  }
}

@media (min-width: 768px) {
  .ls-hero-cityscape {
    left: -18.75%;
    width: 137.5%;
  }
}

@media (min-width: 992px) {
  .ls-hero-cityscape {
    left: -7.5%;
    width: 115%;
  }
}

@media (min-width: 1200px) {
  .ls-hero-cityscape {
    left: -2.5%;
    width: 105%;
  }
}

@media (min-width: 1400px) {
  .ls-hero-cityscape {
    left: 0;
    width: 100%;
  }
}

/* Site-wide patterns previously here have been promoted into
 * `custom.css` so other pages can use them: scroll-reveal animations,
 * the animated counter (`.ls-counter`), the n-up stat divider
 * (`.ls-stat-divider`), and the carousel component (`.ls-carousel`,
 * `.ls-carousel-card`, chevron buttons). Homepage carousels use the
 * default card widths in custom.css; no per-instance overrides needed.
 */

/* --- Homepage: area pill hover --- */

.ls-area-pill {
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

@media (hover: hover) {
  .ls-area-pill:hover {
    background-color: #003366 !important;
    border-color: #003366 !important;
    color: white !important;
  }
}