.block_text-image-animated {
    width: 100%;
    height: auto;
    background-color: rgb(223, 221, 217);
    display: flex;
    flex-direction: column;
    gap: 0px;
}


@media (min-width: 1020px) {
    .block_text-image-animated {
        height: 300vh;
    }
}







.block_text-image-animated .container {
    display: flex;
    flex-direction: column;
    max-width: unset;
    width: 100%;
    height: auto;
    gap: 0px;
    margin: 0px;
    overflow: hidden;
}

@media (min-width: 1020px) {
    .block_text-image-animated .container {
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(12, minmax(0px, 1fr));
        grid-template-rows: repeat(12, minmax(0px, 1fr));
        gap: 0px;
        overflow: visible;
    }
}


.block_text-image-animated .container .text-wrapper {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-9xl) var(--spacing-6xl);
    gap: var(--spacing-xl);
}

@media (min-width: 1020px) {
    .block_text-image-animated .container .text-wrapper {
        padding: 0px;
        grid-column: 2 / 10;
        grid-row: 2 / 11;
    }
}



.sub-1 {
    font-style: normal;
    line-height: 90%;
    letter-spacing: 3.9px;
    text-transform: uppercase;
    font-family: var(--font-cond), sans-serif;
    font-size: clamp(12px, 11.2969px + 0.1875vw, 15px);
}


.block_text-image-animated .container .text-wrapper .title {
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -3%;
    text-transform: uppercase;
    font-family: var(--font-display), sans-serif;
    /* font-size: clamp(68px, 50.25px + 4.5vw, 182px); */
    font-size: clamp(40px, 50.25px + 4.5vw, 90px);
}

.block_text-image-animated .container .text-wrapper .rich-text {
    max-width: 1024px;
}

.block_text-image-animated .container .text-wrapper .rich-text p {
    color: inherit;
    font-style: normal;
    font-weight: lighter;
    line-height: 130%;
    text-transform: unset;
    letter-spacing: 0.48px;
    font-family: var(--font--body), sans-serif;
    /* font-size: clamp(25px, 12px + 1.6vw, 35px); */
    font-size: clamp(18px, .1875vw + 17.296875px, 24px);

}


/* @media (max-width: 768px) {
    .block_text-image-animated .container .text-wrapper .rich-text p {
        font-size: 25px;
        line-height: 140%;
        letter-spacing: 0.3px;
    }
} */


.block_text-image-animated .container .text-wrapper .cta-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}


.block_text-image-animated .video_audio-manager {
    position: absolute;
    isolation: isolate;
    min-width: 100px;
    height: 30px;
    cursor: pointer;
    z-index: 16;
    bottom: 2em;
    right: 1em;
    padding: 6px;
    border-radius: 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

.block_text-image-animated .video_audio-manager .audio-indicator {
    position: absolute;
    top: 50%;
    left: 0px;
    opacity: 0;
    color: var(--color-neutral-20);
    transform: translate3d(8px, -50%, 0px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 1.7px;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: var(--font-cond-bold);
    font-size: clamp(12px, 11.2969px + 0.1875vw, 15px);
    text-transform: uppercase;
    transition: 0.4s ease-in-out;
}


.block_text-image-animated .video_audio-manager.has-audio-off .audio-indicator.audio-off {
    opacity: 1;
}

.block_text-image-animated .video_audio-manager svg {
    position: absolute;
    top: 50%;
    right: 0px;
    opacity: 0;
    transform: translate3d(0px, -50%, 0px);
    transition: 0.4s ease-in-out;
}

.block_text-image-animated .video_audio-manager.has-audio-off svg.svg_audio-on {
    opacity: 0;
}
.block_text-image-animated .video_audio-manager.has-audio-off svg.svg_audio-off {
    opacity: 1;
}
.block_text-image-animated .video_audio-manager.has-audio-on .audio-indicator.audio-on,
.block_text-image-animated .video_audio-manager.has-audio-on svg.svg_audio-on {
    opacity: 1;
}




@media (min-width: 1020px) {
    .block_text-image-animated .container .text-wrapper .cta-wrapper {
        width: max-content;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
    }
}



.block_text-image-animated .container .quote-wrapper {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 var(--spacing-6xl) var(--spacing-9xl) var(--spacing-6xl);
    gap: var(--spacing-xl);
}

.block_text-image-animated .container .quote-wrapper .quote p {
    color: inherit;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.38px;
    font-family: var(--font-cond), sans-serif;
    font-size: clamp(16px, 15.7656px + 0.0625vw, 21px);
}

@media (min-width: 1020px) {
    .block_text-image-animated .container .quote-wrapper {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 5 / 12;
        grid-row: 9 / 13;
        gap: 0px;
        padding: 0px;
    }
    .block_text-image-animated .container .quote-wrapper .quote {
        grid-row: 1 / 5;
        grid-column: 5 / 8;
        padding: 0 var(--spacing-4xl);
    }
}


@media (min-width: 1020px) {
    .block_text-image-animated .video_audio-manager .audio-indicator {
        transform: translate3d(4px, -50%, 0px);
    }

    .block_text-image-animated .video_audio-manager {
        min-width: 120px;
        right: 3em;
        bottom: 4em;
        background: transparent;
        box-shadow: 0 0 var(--color-white);
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        transition: all .6s cubic-bezier(.625, .05, 0, 1);
    }
    .block_text-image-animated .video_audio-manager {
        padding: 8px 12px;
    }
    .block_text-image-animated .video_audio-manager svg {
        width: 16px;
        height: 16px;
        transform: translate3d(-4px, -50%, 0px);
    }

    .block_text-image-animated .video_audio-manager:hover {
        background: linear-gradient(0deg, #ffffff17, #ffffff17), linear-gradient(0deg, #fff0, #fff0 30%, #fff0 70%, #e0edff0a), linear-gradient(317deg, #fff0 17.24%, #fff0 58.62%, #d9ebff0d 86.21%), radial-gradient(38.46% 38.46% at 11.54% 19.23%, #ffebff05, #e5fff003 70%, #f0f0ff00);
        box-shadow: 0 0 46px #fff0;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    .block_text-image-animated .container .text-wrapper .hero-title {
        font-size: clamp(72px, 5.833vw + 50px, 200px);
    }
    .block_text-image-animated .container .cta-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }
}



/* Mobile: there is no scroll animation, so the media just sits in normal flow
   below the text at the video's own 16:9 ratio. */
.block_text-image-animated .container-image {
    --clipT: 90%;
    --clipL: 33%;
    --clipB: 0%;
    --clipR: 33%;
    width: 100%;
    max-width: unset;
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    img {
        height: 100%;
        object-fit: cover;
    }
}


@media (min-width: 1020px) {
    .block_text-image-animated .container-image {
        --clipT: 66%;
        height: 100vh;
        aspect-ratio: auto;
        transform: translate3d(0px, -100vh, 0px);
        clip-path: inset(var(--clipT) var(--clipR) var(--clipB) var(--clipL));
        will-change: clip-path, transform;
    }

    /* Inner parallax: the media starts larger than the 34% clip window (so the
       mask crops it) and pushed down, then initTextImageAnimated() brings it to
       scale 1 / y 0 while the clip opens, so it drifts up inside the frame.
       It always covers the window as long as:
         --media-scale >= 0.34  and  --media-shift <= --media-scale - 0.34 */
    .block_text-image-animated .container-image picture img,
    .block_text-image-animated .container-image .main-media-wrapper {
        --media-scale: 0.6;
        --media-shift: 15%;
        transform: translate3d(0, var(--media-shift), 0) scale3d(var(--media-scale), var(--media-scale), 1);
        transform-origin: 50% 100%;
    }
}


.block_text-image-animated .container-image picture {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    transition: 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Visible by default — on mobile nothing fades it in. */
.block_text-image-animated .container-image .main-media-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    z-index: 1;
    will-change: clip-path, opacity;
    width: 100% !important;
    height: 100% !important;
    transition: opacity 1s;
}

@media (min-width: 1020px) {
    /* Desktop: initTextImageAnimated() cross-fades this in at 40% progress. */
    .block_text-image-animated .container-image .main-media-wrapper {
        opacity: 0;
        transition: none;
    }
}

.block_text-image-animated .container-image .main-media-wrapper .vimeo-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: auto;
    color: inherit;
    isolation: isolate;
    justify-content: center;
    align-items: center;
    display: flex;
    transform: translate(0px);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.block_text-image-animated .container-image .main-media-wrapper .vimeo-bg .vimeo-bg__iframe-wrapper {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0px);
}

@media (min-width: 1020px) {
    /* Desktop the box is 100vw x 100vh, and iframes ignore object-fit, so grow
       the wrapper until a 16:9 embed covers it. Local <video> uses object-fit
       instead and stays at 100%. */
    .block_text-image-animated .container-image .main-media-wrapper .vimeo-bg.has-embed .vimeo-bg__iframe-wrapper {
        width: max(100vw, calc(100vh * 16 / 9));
        height: max(100vh, calc(100vw * 9 / 16));
    }
}



.block_text-image-animated .container-image .main-media-wrapper .vimeo-bg .vimeo-bg__iframe {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
}