.bshAboutUs {
    padding-block: var(--bsh-section-y);
    overflow: hidden;
    background: var(--bsh-color-bg);
}

.bshAboutUs__layout {
    display: grid;
    width: min(100%, var(--bsh-container-max));
    min-height: clamp(560px, 36vw, 690px);
    grid-template-columns: minmax(380px, .95fr) minmax(460px, 1.15fr) minmax(300px, .75fr);
    align-items: center;
    column-gap: clamp(36px, 3vw, 58px);
    margin-inline: auto;
    padding-inline: clamp(48px, 7vw, var(--bsh-container-pad));
}

.bshAboutUs__mediaCluster {
    --bsh-about-image-gap: clamp(16px, 1.7vw, 34px);
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.bshAboutUs__image,
.bshAboutUs__sideImage {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bsh-color-pastel-1);
    isolation: isolate;
}

.bshAboutUs__image {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - (var(--bsh-about-image-gap) / 2));
    height: 100%;
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    transition: left 750ms cubic-bezier(.22, 1, .36, 1), top 750ms cubic-bezier(.22, 1, .36, 1), width 750ms cubic-bezier(.22, 1, .36, 1), height 750ms cubic-bezier(.22, 1, .36, 1), border-radius 750ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease, transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.bshAboutUs__image--secondary {
    left: calc(50% + (var(--bsh-about-image-gap) / 2));
}

.bshAboutUs__mediaCluster--single .bshAboutUs__image {
    left: 0;
}

.bshAboutUs__image--main .bshAboutUs__photo {
    object-position: 58% center;
}

.bshAboutUs__image--secondary .bshAboutUs__photo {
    object-position: center;
}

.bshAboutUs__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 850ms cubic-bezier(.22, 1, .36, 1);
}

.bshAboutUs__content {
    position: relative;
    z-index: 3;
    max-width: 640px;
    padding-block: 36px;
}

.bshAboutUs__content :is(h1, h2) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--bsh-color-headline);
    font-size: var(--bsh-fs-h1);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.045em;
}

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

.bshAboutUs__copy {
    max-width: 60ch;
    margin-top: clamp(18px, 1.8vw, 30px);
    font-size: var(--bsh-fs-body);
    line-height: 1.8;
}

.bshAboutUs__copy > *:first-child {
    margin-top: 0;
}

.bshAboutUs__copy > *:last-child {
    margin-bottom: 0;
}

.bshAboutUs__content .bshBtn {
    margin-top: 32px;
}

.bshAboutUs__side {
    position: relative;
    min-height: clamp(430px, 31vw, 600px);
}

.bshAboutUs__sideImage {
    position: absolute;
    top: 50%;
    right: clamp(-72px, -3.7vw, -28px);
    width: min(100%, 410px);
    aspect-ratio: .82;
    box-shadow: 0 24px 60px rgb(45 39 36 / .16);
    transform: translateY(-50%) rotate(7deg);
    transform-origin: center;
    transition: transform 750ms cubic-bezier(.22, 1, .36, 1), box-shadow 750ms cubic-bezier(.22, 1, .36, 1);
}

.bshAboutUs__badge {
    position: absolute;
    top: clamp(42px, 4.2vw, 82px);
    left: clamp(-70px, -3.6vw, -28px);
    z-index: 4;
    display: grid;
    width: clamp(148px, 10.5vw, 202px);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--bsh-color-pastel-2) 75%, transparent);
    border-radius: 50%;
    color: var(--bsh-color-headline);
    background: var(--bsh-color-bg);
    box-shadow: 0 18px 46px rgb(44 39 37 / .14);
}

.bshAboutUs__badgeText {
    position: absolute;
    inset: 7%;
    width: 86%;
    height: 86%;
    overflow: visible;
    animation: bshAboutBadgeRotate 18s linear infinite;
}

.bshAboutUs__badgeText text {
    fill: currentColor;
    font-family: var(--bsh-font-body);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bshAboutUs__badge strong {
    display: flex;
    max-width: 62%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: clamp(1rem, 1.3vw, 1.55rem);
    font-weight: 500;
    line-height: 1.05;
    text-align: center;
}

.bshAboutUs__badge strong small {
    margin-bottom: .32em;
    color: var(--bsh-color-pastel-2);
    font-size: .44em;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
}



@media (hover: hover) and (pointer: fine) {
    .bshAboutUs__mediaCluster:has(.bshAboutUs__image:hover) .bshAboutUs__image:not(:hover),
    .bshAboutUs__mediaCluster:has(.bshAboutUs__image:focus-visible) .bshAboutUs__image:not(:focus-visible) {
        opacity: 0;
        pointer-events: none;
        transform: scale(.9);
    }

    .bshAboutUs__image:hover,
    .bshAboutUs__image:focus-visible {
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform: none;
    }

    .bshAboutUs__image:hover .bshAboutUs__photo,
    .bshAboutUs__image:focus-visible .bshAboutUs__photo {
        transform: scale(1.045);
    }

    .bshAboutUs__sideImage:hover,
    .bshAboutUs__sideImage:focus-visible {
        box-shadow: 0 32px 70px rgb(45 39 36 / .22);
        transform: translateY(-50%) rotate(3deg) scale(1.02);
    }

    .bshAboutUs__sideImage:hover .bshAboutUs__photo,
    .bshAboutUs__sideImage:focus-visible .bshAboutUs__photo {
        transform: scale(1.035);
    }
}

@keyframes bshAboutBadgeRotate {
    to { transform: rotate(360deg); }
}

@media (max-width: 1360px) {
    .bshAboutUs__layout {
        grid-template-columns: minmax(330px, .85fr) minmax(430px, 1.15fr) minmax(270px, .7fr);
        column-gap: clamp(28px, 2.5vw, 42px);
    }

    .bshAboutUs__badge {
        left: -48px;
    }
}

@media (max-width: 1100px) {
    .bshAboutUs__layout {
        grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.1fr);
        row-gap: 54px;
        padding-inline: clamp(24px, 5vw, 48px);
    }

    .bshAboutUs__content {
        max-width: 620px;
    }

    .bshAboutUs__side {
        grid-column: 1 / -1;
        min-height: min(62vw, 650px);
        margin-top: 6px;
    }

    .bshAboutUs__sideImage {
        right: 3%;
        width: min(46vw, 440px);
    }

    .bshAboutUs__badge {
        top: 9%;
        left: auto;
        right: min(42vw, 410px);
    }
}

@media (max-width: 767px) {
    .bshAboutUs__layout {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 42px;
        padding-inline: var(--bsh-container-pad);
    }

    .bshAboutUs__content {
        order: 1;
        padding-block: 0;
    }

    .bshAboutUs__content :is(h1, h2) { max-width: 100%; }

    .bshAboutUs__mediaCluster {
        order: 2;
        --bsh-about-image-gap: 14px;
    }

    .bshAboutUs__side {
        order: 3;
        min-height: min(118vw, 580px);
        margin-top: 10px;
    }

    .bshAboutUs__sideImage {
        right: -6%;
        width: min(82vw, 390px);
    }

    .bshAboutUs__badge {
        top: 6%;
        right: auto;
        left: 0;
        width: clamp(136px, 39vw, 174px);
    }

}

@media (max-width: 420px) {
    .bshAboutUs__side {
        min-height: 470px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bshAboutUs__badgeText {
        animation: none;
    }

    .bshAboutUs__image,
    .bshAboutUs__sideImage,
    .bshAboutUs__photo {
        transition: none;
    }
}