.hero-banner { overflow:hidden; background-image:url('../images/heroimage.png'); }
.hero-banner[data-hero-ready="true"] { background-image:none; }
.hero-slides { position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.hero-banner .hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; opacity:0; transition:opacity .75s ease; }
.hero-banner .hero-slide.is-active { opacity:1; }
.hero-controls[hidden] { display:none; }
.hero-banner .hero-btn { z-index:2; }
.hero-controls button { position:absolute; z-index:3; border:1px solid #ffffff80; color:#fff; background:#292132b3; cursor:pointer; font-family:inherit; }
.hero-controls button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.hero-controls .hero-previous,.hero-controls .hero-next { top:50%; transform:translateY(-50%); width:42px; height:48px; box-sizing:border-box; padding:0; display:grid; place-items:center; border-radius:8px; line-height:1; }
.hero-controls .hero-previous svg,.hero-controls .hero-next svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.hero-previous { left:16px; }
.hero-next { right:16px; }
.hero-controls .hero-pause { top:16px; right:16px; padding:8px 12px; border-radius:6px; font-size:13px; }
.hero-dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:5px; padding:4px 7px; border-radius:30px; background:#29213280; }
.hero-dots button { position:relative; width:26px; height:26px; padding:0; border:0; background:transparent; }
.hero-dots button::after { content:''; position:absolute; width:8px; height:8px; top:9px; left:9px; border-radius:50%; background:#ffffff80; }
.hero-dots button[aria-current="true"]::after { background:white; box-shadow:0 0 0 2px #ffffff55; }
@media(max-width:600px) {
  .hero-previous { left:8px; }
  .hero-next { right:8px; }
  .hero-controls .hero-previous,.hero-controls .hero-next { width:34px; height:42px; }
  .hero-dots { bottom:8px; }
}
@media(prefers-reduced-motion:reduce) { .hero-banner .hero-slide { transition:none; } }