.hero-slide { position:absolute; inset:0; }
.hero-slide[hidden], .hero-controls[hidden] { display:none; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:60% center; }
.hero-slide a { position:absolute; bottom:18px; left:18px; right:18px; display:flex; justify-content:space-between; gap:12px; background:#ffffffeb; color:var(--ink); padding:16px 20px; border-radius:4px; font-size:13px; }
.hero-controls { position:absolute; bottom:86px; left:18px; right:18px; display:flex; justify-content:center; align-items:center; gap:8px; }
.hero-controls button { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border:1px solid #ffffff80; border-radius:50%; background:#123d43e8; color:#fff; cursor:pointer; font-size:18px; }
.hero-dots { display:flex; background:#123d43e8; border-radius:24px; }
.hero-dots button { width:32px; border:0; background:transparent; }
.hero-dots span { width:7px; height:7px; border-radius:50%; background:#ffffff70; }
.hero-dots [aria-pressed="true"] span { background:#fff; box-shadow:0 0 0 3px #ffffff40; }
.hero-controls button:hover { background:#24616a; }
.hero-carousel :focus-visible { outline:3px solid #e4bd79; outline-offset:2px; }

.hero-controls button { padding:0; line-height:1; }
.hero-controls svg { display:block; width:20px; height:20px; pointer-events:none; }
.hero-pause .hero-icon-play, .hero-pause.is-paused .hero-icon-pause { display:none; }
.hero-pause.is-paused .hero-icon-play { display:block; }