/* V25 — hero banner slider. Keeps the existing hero dimensions in desktop/tablet/mobile. */
.hero.hero-banner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#071e13 !important;
}
.hero-slide-stage{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.012);
  transition:opacity .85s ease,transform 5.5s ease;
  will-change:opacity,transform;
}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero.hero-banner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,8,28,18),var(--hero-overlay-strong,.90)),rgba(var(--hero-overlay-rgb,8,28,18),var(--hero-overlay-soft,.18)));
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
}
.hero-slider-dots{
  position:absolute;
  left:50%;
  bottom:22px;
  z-index:4;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(7,31,21,.32);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero-dot{
  display:block !important;
  width:9px;
  height:9px;
  min-width:9px;
  padding:0 !important;
  margin:0;
  border:1.5px solid rgba(255,255,255,.9) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.28) !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:width .22s ease,background .22s ease,transform .22s ease;
}
.hero-dot.is-active{
  width:24px;
  border-radius:999px !important;
  background:#fff !important;
  transform:none;
}
@media(max-width:800px){
  .hero.hero-banner::after{background:linear-gradient(180deg,rgba(var(--hero-overlay-rgb,8,28,18),var(--hero-overlay-mobile-top,.40)),rgba(var(--hero-overlay-rgb,8,28,18),var(--hero-overlay-mobile-bottom,.63)))}
  .hero-slider-dots{bottom:18px;gap:7px;padding:7px 10px}
  .hero-dot{width:8px;height:8px;min-width:8px}
  .hero-dot.is-active{width:21px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .25s linear;transform:none}
}