@keyframes team-intro-photo-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.section-team-intro--v2 .team-intro-image {
    animation: team-intro-photo-in 1s ease forwards;
}

.team-intro-media {
    overflow: hidden;
}

.section-team-intro .team-intro-text p {
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 145%;
    color: #FFFBED;
    text-align: center;
    max-width: 1031px;
    margin: auto;
    margin-top: 6px;
}

.section-team-intro {
    margin-top: 140px;
}

.section-team-intro--v2 {
    margin-top: 0;
}

.section-team-intro .team-intro-image {
    height: 737px;
    margin: auto;
    width: 100%;
    object-fit: cover;
}

.section-team-intro--v2 .team-intro-image {
    height: 918px;
}

@media screen and (min-width: 1921px) {
    .section-team-intro .team-intro-image {
        object-fit: contain;
    }

    .section-team-intro--v2 .team-intro-image {
        max-width: 1920px;
        max-height: 918px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        object-position: center top;
    }

    .section-team-intro--v2 .container {
        z-index: 2;
    }

    /* object-position: center top crops the bottom of the source photo at
       this width — this fade mimics that crop as an intentional blur
       instead of a hard cut. .section-team-intro--v2 (not .team-intro-media)
       is the positioned ancestor the image is absolutely placed against.
       z-index:1 keeps it above the photo but below .container (z-index:2). */
    .section-team-intro--v2::after {
        content: '';
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 100px;
        background: color-mix(in srgb, var(--zds-color-deep-green) 90%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
        -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
        pointer-events: none;
    }
}

@media screen and (max-width: 1300px) {
    .section-team-intro .team-intro-image {
        object-fit: cover;
        height: auto;
    }
}

@media screen and (max-width: 1150px) {
    .section-team-intro .team-intro-image {
        object-fit: contain;
        height: auto;
    }
}

.section-team-intro .team-intro-title {
    display: none;
}

.section-team-intro--v2 {
    position: relative;
}

.section-team-intro--v2 .container {
    max-width: 1280px !important;
    padding: 0 var(--zds-space-4) !important;
    position: relative;
    bottom: 202px;
}

.section-team-intro--v2 .team-intro-badge {
    margin-bottom: var(--zds-space-8);
}

.section-team-intro--v2 .team-intro-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--zds-space-20);
}

.section-team-intro--v2 .team-intro-v2-title,
.section-team-intro--v2 .team-intro-v2-title h1 {
    max-width: 419px;
    font-family: var(--zds-font-family-heading);
    font-style: normal;
    font-weight: var(--zds-font-weight-bold);
    font-size: var(--zds-heading-size-md) !important;
    line-height: var(--zds-heading-line-height) !important;
    color: var(--zds-color-text);
    margin: 0;
}

/* Desktop only — compensates the heading font's line-height leading below
   the last line of glyphs, so the title's visible baseline sits flush with
   the text column's baseline instead of ~6px above it despite
   align-items: flex-end. */
@media screen and (min-width: 1025px) {
    .section-team-intro--v2 .team-intro-v2-title {
        margin-bottom: -15px;
    }
}

.section-team-intro--v2 .team-intro-v2-text {
    flex: 1;
    font-family: var(--zds-font-family-base);
    font-style: normal;
    font-weight: var(--zds-font-weight-light);
    font-size: var(--zds-body-size-large);
    line-height: var(--zds-body-line-height);
    color: var(--zds-color-text);
}

.team-intro-image.mobile {
    display: none;
}

.Team .squares {
    display: none;
}

.team-intro-text p br {
    display: none;
}

@media screen and (max-width: 768px) {
    .team-intro-text p br {
        display: block;
    }

    .section-team-intro .team-intro-image {
        height: 331px;
    }
    
    .section-team-intro {
        margin-top: 80px;
        .container {
            padding: 0 16px !important;
        }

        .team-intro-image {
            display: none;
        }

        .team-intro-image.mobile {
            display: block;
            margin: auto;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .team-intro-text p {
            font-size: 18px;
            font-style: normal;
            font-weight: 300;
            line-height: 145%;
            margin-top: 16px;
        }
    }

    .section-team-intro--v2 {
        margin-top: 32px;
    }

    .section-team-intro--v2 .team-intro-image {
        min-height: 309px;
    }

    .section-team-intro--v2 .team-intro-media {
        min-height: 309px;
    }

    /* Oversized on purpose: at scale(0.8) (animation start) the box is
       still 0.8 * 130% = 104% of the frame, so it fully covers .team-intro-media
       (overflow: hidden above) throughout the whole scale(0.8)->scale(1)
       animation instead of revealing background at the edges. */
    .section-team-intro--v2 .team-intro-image.mobile {
        width: 130%;
        max-width: none;
        margin: 0 0 0 -15%;
    }

    .section-team-intro--v2 .container {
        position: static;
    }

    .section-team-intro--v2 .team-intro-badge {
        margin-bottom: var(--zds-space-3);
    }

    .section-team-intro--v2 .team-intro-columns {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--zds-space-3);
    }

    .section-team-intro--v2 .team-intro-v2-title,
    .section-team-intro--v2 .team-intro-v2-title h1 {
        max-width: 100%;
        text-align: left;
        font-size: var(--zds-heading-size-mobile-default) !important;
    }

    .section-team-intro--v2 .team-intro-v2-text {
        max-width: 100%;
        font-size: var(--zds-body-size-base);
        color: var(--zds-color-on-light-text-disabled);
    }
}

@media screen and (max-width: 1024px) {
    .section-team-intro--v2 {
        margin-bottom: 80px;
    }

    .section-team-intro--v2 .team-intro-image {
        object-fit: cover;
    }

    .section-team-intro--v2 .container {
        bottom: unset;
    }

    .section-team-intro--v2 .team-intro-badge {
        margin-bottom: var(--zds-space-3);
    }

    .section-team-intro--v2 .team-intro-columns {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--zds-space-3);
    }

    .section-team-intro--v2 .team-intro-v2-title,
    .section-team-intro--v2 .team-intro-v2-title h1 {
        max-width: 100%;
        text-align: left;
        font-size: var(--zds-heading-size-mobile-default) !important;
    }

    .section-team-intro--v2 .team-intro-v2-text {
        max-width: 100%;
        font-size: var(--zds-body-size-base);
        color: var(--zds-color-on-light-text-disabled);
    }

}

@media screen and (min-width: 1024px) {
    .section-team-intro--v2 {
        /* Fluid height between 1024px (811px) and 1920px (918px), matching
           the 390x309 image aspect ratio from Figma. */
        height: clamp(811px, 688.7px + 11.942vw, 918px);
        margin-bottom: 281px;
    }

    .section-team-intro--v2 .team-intro-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .section-team-intro--v2 .container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -32px;
    }
}