/*
 * About Us hero collage.
 * Geometry and timing follow Figma component `About Us Header` (1720:14537).
 */

body.page-id-98 .elementor-element-5da767e {
    container-type: inline-size;
}

/* Huddle #390: match the Figma H1 typography on the About hero. */
body.page-id-98 .elementor-element-fda61ea.elementor-widget-heading .elementor-heading-title {
    font-family: "Quenda", sans-serif !important;
    font-size: 45px !important;
    font-weight: 500 !important;
    line-height: 52px !important;
}

/* Huddle #391-394: keep About page H2s on the Figma Quenda token. */
body.page-id-98 .elementor-widget-heading h2.elementor-heading-title {
    font-family: "Quenda", sans-serif !important;
    font-weight: 500 !important;
}

/* Huddle #412: mission copy is body copy, despite using an H2 widget. */
body.page-id-98 .elementor-element-04b334e.elementor-widget-heading .elementor-heading-title {
    font-family: "Source Sans Pro", sans-serif !important;
}

body.page-id-98 .elementor-element-635c4a0,
body.page-id-98 .elementor-element-635c4a0 .elementor-widget-container {
    position: relative;
}

body.page-id-98 .elementor-element-635c4a0 {
    min-height: min(643px, 65.080972cqw);
}

body.page-id-98 .cie-about-collage {
    position: relative;
    container-type: inline-size;
    display: block;
    width: min(100%, 988px);
    aspect-ratio: 988 / 643;
    margin-inline: auto;
    opacity: 0;
    isolation: isolate;
}

body.page-id-98 .cie-about-collage.is-ready {
    opacity: 1;
}

body.page-id-98 .elementor-element-635c4a0.cie-about-collage-ready > img,
body.page-id-98 .elementor-element-635c4a0.cie-about-collage-ready > picture,
body.page-id-98 .elementor-element-635c4a0 .elementor-widget-container.cie-about-collage-ready > img,
body.page-id-98 .elementor-element-635c4a0 .elementor-widget-container.cie-about-collage-ready > picture {
    display: none;
}

body.page-id-98 .cie-about-collage__item {
    position: absolute;
    overflow: hidden;
    border-radius: clamp(7px, 1.042vw, 20px);
    border-radius: 2.024291cqw;
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: 2083.538ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

body.page-id-98 .cie-about-collage__item img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
}

body.page-id-98 .cie-about-collage__item--training {
    top: 55.365474%;
    left: 10.222672%;
    width: 38.259109%;
    height: 36.236392%;
}

body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--training {
    transform: translate3d(107.936508%, 0, 0);
}

body.page-id-98 .cie-about-collage__item--support {
    top: 12.441680%;
    left: 21.356275%;
    width: 27.125506%;
    height: 38.258165%;
}

body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--support {
    transform: translate3d(0, 112.195122%, 0);
}

body.page-id-98 .cie-about-collage__item--support img {
    transition: opacity 2083.538ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-id-98 .cie-about-collage__item--support .cie-about-collage__image--hover,
body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--support .cie-about-collage__image--static {
    opacity: 0;
}

body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--support .cie-about-collage__image--hover {
    opacity: 1;
}

body.page-id-98 .cie-about-collage__item--trade-show {
    top: 0;
    left: 51.518219%;
    width: 48.481781%;
    height: 50.699844%;
}

body.page-id-98 .cie-about-collage__item--trade-show img {
    top: -5.21%;
    height: 110.11%;
}

body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--trade-show {
    transform: translate3d(-106.263048%, 0, 0);
}

body.page-id-98 .cie-about-collage__item--team {
    top: 55.365474%;
    left: 51.518219%;
    width: 31.882591%;
    height: 44.634526%;
}

body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--team {
    transform: translate3d(0, -110.452962%, 0);
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-98 .cie-about-collage__item,
    body.page-id-98 .cie-about-collage__item--support img {
        transition-duration: 0.01ms !important;
    }

    body.page-id-98 .cie-about-collage__item {
        will-change: auto;
    }

    body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item {
        transform: translate3d(0, 0, 0);
    }

    body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--support .cie-about-collage__image--static {
        opacity: 1;
    }

    body.page-id-98 .cie-about-collage.is-hover .cie-about-collage__item--support .cie-about-collage__image--hover {
        opacity: 0;
    }
}

/* About typography: Figma Bodycopy uses Source Sans Pro. */
body.page-id-98 .elementor-98 .elementor-widget-text-editor,
body.page-id-98 .elementor-98 .elementor-widget-text-editor * {
    font-family: "Source Sans Pro", sans-serif !important;
}

/* Huddle #368: promote the playing mobile video into a full-width modal. */
@media (max-width: 767px) {
    html.cie-about-video-modal-open-root,
    body.page-id-98.cie-about-video-modal-open {
        overflow: hidden;
    }

    body.page-id-98 .elementor-element-cdf9b17.cie-about-video-is-playing {
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100dvh;
        padding: 0;
        background: rgba(17, 24, 28, 0.96);
    }

    body.page-id-98 .elementor-element-cdf9b17.cie-about-video-is-playing .elementor-widget-video,
    body.page-id-98 .elementor-element-cdf9b17.cie-about-video-is-playing .elementor-widget-container,
    body.page-id-98 .elementor-element-cdf9b17.cie-about-video-is-playing .elementor-wrapper {
        width: 100vw;
        max-width: 100vw;
    }

    body.page-id-98 .elementor-element-cdf9b17.cie-about-video-is-playing .cievideo video {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 100dvh;
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }

    body.page-id-98 .cie-about-video-close {
        position: absolute;
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        z-index: 2;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        color: #ffffff;
        background: rgba(17, 24, 28, 0.82);
        font: 400 28px/1 sans-serif;
        cursor: pointer;
    }
}

/* Huddle #369: keep mobile team copy on an image-free solid grey field. */
@media (max-width: 767px) {
    body.page-id-98 .elementor-element-859b599 {
        background-color: #465961 !important;
        background-image: none !important;
    }

    body.page-id-98 .elementor-element-859b599 > .e-con-inner {
        background: #465961;
    }

    body.page-id-98 .elementor-element-ecc6b6c {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    body.page-id-98 .elementor-element-d280ac6 {
        display: none;
    }
}

/* Huddle #370: retain the tablet image at right with a larger solid text panel. */
@media (min-width: 768px) and (max-width: 1084px) {
    body.page-id-98 .elementor-element-859b599 {
        background-color: #465961 !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
        background-size: auto 100% !important;
    }

    body.page-id-98 .elementor-element-859b599 > .e-con-inner {
        gap: 0;
    }

    body.page-id-98 .elementor-element-ecc6b6c {
        box-sizing: border-box;
        flex: 0 0 58%;
        width: 58%;
        max-width: 58%;
        padding: clamp(32px, 4.167vw, 44px);
        border-radius: clamp(14px, 1.953vw, 20px);
        background: #465961;
    }

    body.page-id-98 .elementor-element-d280ac6 {
        flex: 1 1 42%;
        min-width: 0;
    }
}