.hero.hero-slideshow { position:relative; height:auto; padding-bottom:44px; background:#fff; }
.hero-stage { position:relative; width:min(100%,1264px); height:clamp(220px,42vw,550px); margin-inline:auto; background:#ece8dd; }
.hero-slide { position:absolute; inset:0; }
.hero-slide[hidden],.hero-controls[hidden] { display:none; }
.hero-slide img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
#hero-slide-2 img { object-fit:cover; object-position:center 35%; }
.hero-controls { position:absolute; left:0; right:0; bottom:0; height:44px; display:flex; justify-content:center; background:#fff; }
.hero-controls button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
.hero-controls button span { width:10px; height:10px; border-radius:50%; background:#777; }
.hero-controls button[aria-pressed="true"] span { background:#222; outline:1px solid #222; outline-offset:3px; }
.hero-controls button:focus-visible { outline:3px solid #49536f; outline-offset:-3px; }
/* Only enhanced slides overlap; HTML without JS still shows the first image. */
.hero-enhanced .hero-slide { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .9s ease-in-out,visibility 0s linear .9s; }
.hero-enhanced .hero-slide.is-active { opacity:1; visibility:visible; transition-delay:0s; }
@media (prefers-reduced-motion:reduce) {
    .hero-enhanced .hero-slide { transition:none; }
}