[data-carousel] { position: relative; touch-action: pan-y; }
.carousel-images { position: absolute; inset: 0; }
.hero .carousel-images { z-index: -2; }
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .65s ease;
    pointer-events: none;
}
.carousel-slide.is-active { opacity: 1; }
.hero .carousel-slide { object-position: center 56%; }
.carousel-controls {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #ffffff45;
    border-radius: 30px;
    background: #092c25e8;
    color: #fff;
}
.hero .carousel-controls { right: 6%; bottom: 65px; }
.carousel-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    line-height: 1;
}
.carousel-controls button:hover { background: #ffffff20; }
.carousel-controls button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.carousel-arrow { font-size: 24px; }
.carousel-dots { display: flex; }
.carousel-dots button { min-width: 28px; }
.carousel-dots button::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background: #ffffff70;
    transition: width .2s, background .2s;
}
.carousel-dots button[aria-pressed="true"]::before { width: 18px; background: var(--lime); }
.carousel-pause { font-size: 13px; }
.carousel-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media (max-width:720px) {
    .carousel-controls { right:12px; bottom:12px; }
    .hero .carousel-controls { left:5.5%; right:auto; bottom:62px; }
}
@media (prefers-reduced-motion:reduce) {
    .carousel-slide, .carousel-dots button::before { transition:none; }
}