.bshHero {
    position: relative;
    height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
    color: #fff;
}

.bsh-js .bshHero:not(.is-intro-ready) .bshHero__smallTitle,
.bsh-js .bshHero:not(.is-intro-ready) .bshHero__headlineWrap,
.bsh-js .bshHero:not(.is-intro-ready) .bshHero__card,
.bsh-js .bshHero:not(.is-intro-ready) .bshHero__cta {
    opacity: 0;
    visibility: hidden;
}

.bshHero__headlineWrap {
    /* The intro animation moves the wrapper itself, so clipping is not needed.
       Keeping overflow visible prevents font descenders (g, j, p, q, y) from
       being cut off by the wrapper's line box. */
    overflow: visible;
}

.bshHero__mediaArea {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bshHero__swiper,
.bshHero__swiper .swiper-wrapper,
.bshHero__swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.bshHero__slide {
    overflow: hidden;
}

.bshHero__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bshHero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .35);
}

.bshHero__content {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.bshHero__text {
    position: absolute;
    left: 80px;
    bottom: 80px;
    max-width: 760px;
}

.bshHero__smallTitle {
    margin-bottom: 20px;
    color: var(--bsh-color-pastel-1);
}

.bshHero__headline {
    margin: 0;
    max-width: 760px;
    font-size: clamp(46px, 4.6vw, 70px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -.045em;
    color: #fff;
}

.bshHero__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 56px;
    width: 820px;
    /*border: 1px solid rgba(255,255,255,.2);*/
    background: rgba(255,255,255,.08);

    -webkit-backdrop-filter: blur(var(--bsh-blur-18, 18px));
    backdrop-filter: blur(var(--bsh-blur-18, 18px));
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position:relative;
    overflow: hidden;
}

.bshHero__card {
    min-height: 154px;
    padding: 28px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.18);
    text-decoration: none;
}



.bshHero__card:last-child {
    border-right: 0;
}

.bshHero__card .bshHero__cardOver {
    position: absolute;
    z-index: 0;
    top:0;
    left:0;
    width: 0%;
    height: 100%;
    display:flex;
    background: var(--bsh-color-pastel-1);
    transition: all 500ms ease-in-out;
}

.bshHero__card:hover .bshHero__cardOver {
    width: 100%;
    height:100%;
}


.bshHero__cardIcon {
    position: absolute;
    display: flex;
    padding:10px;
    left:0;
    top:0;
    background: var(--bsh-color-pastel-1);
    border-bottom-right-radius: 4px;
    z-index:99;
}

.bshHero__cardIcon svg {
    width: 26px;
    height: 26px;
    color: #fff;

}

.bshHero__cardTitle {
    font-size: 20px;
    line-height: 1.2;
    color: rgba(255,255,255,.86);
    position: relative;
    z-index: 2;
    left:0px;
    transition: all 200ms ease-in-out;
}

.bshHero__card:hover .bshHero__cardTitle {
    left:30px;
}

.bshHero__content .bshBtn {
    position: absolute;
    right: 80px;
    bottom: 80px;
    min-width: 210px;
    min-height: 64px;
    padding-inline: 40px;
    background: var(--bsh-color-pastel-1);
}

.bshHero__image {
    transform: scale(1);
    transition: transform 6.4s ease-in-out;
    will-change: transform;
}

.swiper-slide-active .bshHero__image {
    transform: scale(1.12);
}

/* Responsive safeguards that preserve the original desktop composition. */
@media (max-width: 900px) {
    .bshHero__text {
        right: 32px;
        left: 32px;
        bottom: 48px;
    }

    .bshHero__cards {
        width: min(100%, 820px);
    }

    .bshHero__content .bshBtn {
        right: 32px;
        bottom: 32px;
    }
}

@media (max-width: 767px) {
    .bshHero {
        height: auto;
        min-height: 100svh;
    }

    .bshHero__text {
        right: 20px;
        left: 20px;
        bottom: 86px;
    }

    .bshHero__smallTitle {
        margin-bottom: 16px;
    }

    .bshHero__headline {
        font-size: clamp(36px, 10vw, 52px);
        line-height: 1.08;
    }

    .bshHero__cards {
        display: inline-grid;
        width: max-content;
        max-width: 100%;
        grid-template-columns: minmax(min-content, max-content);
        margin-top: 28px;
        border-radius: 5px;
    }

    .bshHero__card {
        width: 100%;
        min-height: 58px;
        justify-content: center;
        padding: 16px 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }

    .bshHero__cardIcon {
        display: none;
    }

    .bshHero__cardTitle {
        white-space: nowrap;
    }

    .bshHero__card:hover .bshHero__cardTitle {
        left: 0;
    }

    .bshHero__content .bshBtn {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        min-height: 64px;
        padding-inline: 24px;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bshHero__image,
    .swiper-slide-active .bshHero__image {
        transform: none;
        transition: none;
    }
}