/* One shared hero control group on desktop and mobile. */
.home-hero__swiper .home-hero__controls {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 30px;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* The pagination must stay in the control row, not at its old absolute position. */
.home-hero__swiper .home-hero__controls .home-hero__pagination,
.home-hero__swiper .home-hero__controls .home-hero__pagination.swiper-pagination-bullets,
.home-hero__swiper .home-hero__controls .home-hero__pagination.swiper-pagination-horizontal {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    align-items: center;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto;
}

.home-hero__swiper .home-hero__controls .home-hero__pause {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(31, 31, 31, .32);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.home-hero__swiper .home-hero__controls .home-hero__pause span {
    display: block;
    width: 4px;
    height: 14px;
    border-radius: 1px;
    background: currentColor;
    pointer-events: none;
}

.home-hero__swiper .home-hero__controls .home-hero__pause::before {
    display: none;
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid currentColor;
    content: '';
    pointer-events: none;
}

.home-hero__swiper .home-hero__controls .home-hero__pause.is-paused span {
    display: none;
}

.home-hero__swiper .home-hero__controls .home-hero__pause.is-paused::before {
    display: block;
}

/* Keep the existing mobile Figma geometry, including its 44px control button. */
@media (max-width: 760px) {
    .home-hero__swiper .home-hero__controls {
        left: 0;
        right: 0;
        bottom: 40px;
        width: auto;
        transform: none;
    }
}

.home-hero__swiper.is-autoplay-paused .home-hero__dot.is-active::after {
    animation-play-state: paused !important;
}