/* Homepage hero: slideshow (assets/img/slide images/) + overlay text */
.hero--slideshow {
  position: relative;
  height: min(62vh, 620px);
  min-height: 340px;
  max-height: 680px;
  overflow: hidden;
  background: #1a3555;
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  transition: opacity 0.85s ease-in-out;
  pointer-events: none;
}

.hero__slide--active {
  opacity: 1;
  z-index: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 20, 60, 0.18) 0%,
    rgba(0, 20, 60, 0.32) 55%,
    rgba(0, 20, 60, 0.55) 100%
  );
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 36px) 16px clamp(56px, 10vw, 80px);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 700;
  color: #fff;
}

.hero__lede {
  margin: 0 auto 16px;
  font-size: clamp(0.88rem, 2.2vw, 0.98rem);
  max-width: 46ch;
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
}

.hero__cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--color-orange, #f78b00);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid #d97a00;
}

.hero__cta:hover {
  background: #e07d00;
  color: #fff !important;
  text-decoration: none;
}

.hero__secondary {
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__secondary:hover {
  color: #ffe0b8 !important;
}

@media (min-width: 768px) {
  .hero--slideshow {
    height: min(65vh, 640px);
    min-height: 380px;
  }
}

@media (min-width: 1200px) {
  .hero--slideshow {
    height: min(68vh, 680px);
  }
}