/* =========================================================
   HERO FINAL OVERRIDE (LOCKED) — targets #heroCarousel
   Kept in sync with style.css hero-wrap rules.
   ========================================================= */

#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{
  position: relative !important;
  width: 100% !important;
  height: 82vh !important;
  min-height: 560px !important;
  overflow: hidden !important;
}

@media (max-width: 576px){
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item{
    height: 92vh !important;
    min-height: 580px !important;
  }
}

#heroCarousel .carousel-item .hero-media{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

#heroCarousel .carousel-item .hero-media img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#heroCarousel .carousel-item .hero-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(
    100deg,
    rgba(10,37,64,.90) 0%,
    rgba(10,37,64,.72) 40%,
    rgba(10,37,64,.30) 75%,
    rgba(10,37,64,.10) 100%
  ) !important;
}

@media (max-width: 576px){
  #heroCarousel .carousel-item .hero-overlay{
    background: linear-gradient(
      to top,
      rgba(10,37,64,.95) 10%,
      rgba(10,37,64,.75) 50%,
      rgba(10,37,64,.35) 100%
    ) !important;
  }
}

#heroCarousel .carousel-item .hero-content{
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  padding: 22px 0 70px !important;
  pointer-events: none !important;
}

#heroCarousel .hero-content a,
#heroCarousel .hero-content button{
  pointer-events: auto !important;
}

@media (max-width: 576px){
  #heroCarousel .carousel-item .hero-content{
    align-items: flex-end !important;
    padding: 14px 0 40px !important;
  }
}

#heroCarousel .hero-content .col-lg-7{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

#heroCarousel h1,
#heroCarousel h2{
  color: #ffffff !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}

#heroCarousel .hero-lead{
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
}

.hero-wrap + section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  opacity: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
}

#heroCarousel .carousel-control-prev{ left: 14px !important; }
#heroCarousel .carousel-control-next{ right: 14px !important; }

@media (max-width: 576px){
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next{
    top: 44% !important;
    width: 46px !important;
    height: 46px !important;
  }
}