hero-slideshow{display:block}
.hero.hero-slideshow{height:var(--hero-h,610px);min-height:0;position:relative;overflow:hidden;background:#111310;touch-action:pan-y}
.hero-slideshow.hero-adapt{height:auto;aspect-ratio:var(--hero-ar,1.5)}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--hero-fade,700ms) ease,visibility 0s linear var(--hero-fade,700ms);z-index:0}
.hero-slide.is-active{opacity:1;visibility:visible;transition:opacity var(--hero-fade,700ms) ease,visibility 0s;z-index:1}
.hero-slide picture,.hero-slide picture img,.hero-slide>img{display:block;width:100%;height:100%}
.hero-slide img{object-fit:cover;object-position:center}
.hero-slide .hero-copy{z-index:2}
.hero-slideshow .hero-title{font-size:clamp(45px,5.4vw,78px);line-height:1.35;margin:18px 0;font-weight:900;letter-spacing:-3px}
.hero-slide-link{position:absolute;inset:0;z-index:2}
.hero-slideshow .hero-bottom{z-index:3}

.hero-controls{position:absolute;z-index:4;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;background:rgba(8,14,9,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-arrow{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;padding:0}
.hero-arrow:hover{background:rgba(255,255,255,.14)}
.hero-arrow svg{width:18px;height:18px}
[dir=rtl] .hero-arrow[data-prev] svg,[dir=rtl] .hero-arrow[data-next] svg{transform:scaleX(-1)}
.hero-dots{display:flex;gap:7px;padding:0 4px}
.hero-dot{width:8px;height:8px;border:0;border-radius:999px;padding:0;background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.hero-dot[aria-current=true]{width:24px;background:var(--green)}
.hero-pause .i-play,.hero-pause[aria-pressed=true] .i-pause{display:none}
.hero-pause[aria-pressed=true] .i-play{display:block}
.hero-controls button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media(max-width:700px){
  .hero.hero-slideshow{height:590px}
  .hero-slideshow.hero-adapt{height:auto;aspect-ratio:var(--hero-ar-m,var(--hero-ar))}
  .hero-slide img{object-position:44% center}
  .hero-slideshow .hero-title{font-size:47px;letter-spacing:-2px}
  .hero-controls{bottom:16px;gap:2px}
  .hero-arrow{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active,.hero-dot{transition:none}}