.hero-slider { touch-action: pan-y; cursor: grab; user-select: none; }
.hero-slider.is-dragging { cursor: grabbing; }
.hero-slider .hero-slide img { -webkit-user-drag: none; pointer-events: none; }
.hero-slider.is-dragging .hero-slide, .hero-slider.is-repositioning .hero-slide, .hero-slide.is-repositioning { transition: none; }
.hero-slider::after { z-index: 2; }
.hero-slide { position: absolute; inset: 0; transform: translateX(100%); transition: transform .5s cubic-bezier(.25,.8,.25,1); will-change: transform; }
.hero-slide.is-active { transform: translateX(0); }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slider-bottom { position: absolute; inset-inline: 0; bottom: 35px; z-index: 3; display: flex; align-items: end; justify-content: flex-end; gap: 30px; color: white; }
.slider-controls { display: flex; align-items: center; gap: 12px; }
.slider-controls button { color: #fff; background: transparent; cursor: pointer; }
.slider-arrow { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff65; border-radius: 50%; font-size: 21px; backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease; }
.slider-arrow:hover { background: #ffffff20; border-color: #fff; }
.slider-count { font-size: 10px; letter-spacing: .1em; margin-inline: 8px 14px; white-space: nowrap; }
.slider-count > span:last-child { color: #ffffff80; }
.slider-dots { display: flex; gap: 2px; }
.slider-dots button { display: grid; place-items: center; height: 44px; width: 28px; padding: 0; border: 0; }
.slider-dots button > span { display: block; width: 5px; height: 5px; border-radius: 50%; background: #ffffff65; transition: background .2s ease, box-shadow .2s ease; }
.slider-dots button[aria-pressed='true'] > span { background: #fff; box-shadow: 0 0 0 4px #ffffff20; }
.slider-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
    .hero-slide img { object-position: 53% center; }
    .slider-bottom { bottom: 24px; flex-direction: column; align-items: start; gap: 22px; }
    .slider-controls { width: 100%; gap: 10px; }
    .slider-count { margin-right: auto; }
    .slider-arrow { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide, .slider-controls button, .slider-dots button > span { transition: none; } }