/* Full-width 1920x820 hero carousel. The page owns controls; artwork stays centered and unwarped. */
.home-hero {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1920 / 820;
  background: #f4f7fb;
}

.home-hero-carousel,
.home-hero-track {
  width: 100%;
  height: 100%;
}

.home-hero-slide.is-full-image {
  background: #f4f7fb;
}

.home-hero-full-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.home-hero-full-image > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.home-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-hero-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 8px;
  outline-offset: 4px;
}

.home-hero-hotspot:focus-visible {
  outline: 3px solid rgba(16, 88, 244, 0.75);
}

.home-hero-hotspot-primary {
  left: 8.2%;
  top: 67.4%;
  width: 13.8%;
  height: 10.2%;
}

.home-hero-hotspot-secondary {
  left: 24.2%;
  top: 67.4%;
  width: 11.2%;
  height: 10.2%;
}

.home-hero-slide:not(.is-full-image) .home-hero-media {
  height: 100%;
}

.home-carousel-prev {
  left: clamp(14px, 2.2vw, 42px);
}

.home-carousel-next {
  right: clamp(14px, 2.2vw, 42px);
}

.home-carousel-dots {
  bottom: 30px;
}

@media (max-width: 900px) {
  .home-hero,
  .home-hero-carousel,
  .home-hero-track {
    height: 720px;
    aspect-ratio: auto;
  }

  .home-hero-full-image > img {
    object-position: left center;
  }

  .home-hero-hotspot-primary {
    left: 15%;
    top: 67.4%;
    width: 29%;
    height: 10.2%;
  }

  .home-hero-hotspot-secondary {
    left: 50%;
    top: 67.4%;
    width: 25%;
    height: 10.2%;
  }
}

@media (max-width: 560px) {
  .home-hero,
  .home-hero-carousel,
  .home-hero-track {
    height: 620px;
  }

  .home-hero-hotspot-primary {
    left: 21%;
    width: 36%;
  }

  .home-hero-hotspot-secondary {
    left: 61%;
    width: 30%;
  }
}