/*
==========================================================================
iTHM unified executive leadership system
Homepage: first two active leaders
About Us: up to four active leaders
==========================================================================
*/

[data-ithm-leadership].ithm-leadership-loading{
    opacity:.82;
}

[data-ithm-leadership]{
    transition:opacity .25s ease;
}

.ithm-leadership-grid,
[data-ithm-leadership][data-leadership-ready="true"]{
    position:relative;
    z-index:2;

    display:grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    align-items:start !important;
    align-content:start !important;

    grid-auto-rows:auto !important;
    grid-template-rows:auto !important;

    gap:
        29px !important;
}

[data-ithm-leadership][data-leadership-ready="true"]
.ithm-leader-card{
    --leader-main:#1765c8;
    --leader-main-rgb:23,101,200;

    --leader-accent:#70dcff;
    --leader-accent-rgb:112,220,255;

    --leader-depth:#123f81;

    --leader-surface-one:#d9eaff;
    --leader-surface-two:#c4dcff;
    --leader-surface-three:#eff6ff;

    position:relative;
    isolation:isolate;

    display:grid;

    grid-template-columns:
        164px
        minmax(
            0,
            1fr
        );

    align-items:center;
    align-self:start;

    gap:24px;

    min-width:0 !important;
    min-height:0 !important;

    width:100%;
    height:auto !important;
    block-size:auto !important;

    margin:
        0
        0
        21px;

    padding:
        22px
        24px
        24px;

    overflow:visible;

    border:
        2px
        solid
        rgba(
            var(--leader-main-rgb),
            .74
        );

    border-radius:34px;

    background:
        radial-gradient(
            circle at 8% 3%,
            rgba(
                var(--leader-accent-rgb),
                .25
            ),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(
                var(--leader-main-rgb),
                .22
            ),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            var(--leader-surface-one) 0%,
            var(--leader-surface-three) 49%,
            var(--leader-surface-two) 100%
        );

    box-shadow:
        0 11px 0
        var(--leader-depth),

        0 18px 0
        rgba(
            7,
            27,
            67,
            .11
        ),

        0 33px 54px
        rgba(
            7,
            27,
            67,
            .20
        ),

        0 20px 38px
        rgba(
            var(--leader-main-rgb),
            .19
        ),

        0 0 0 7px
        rgba(
            var(--leader-main-rgb),
            .045
        ),

        inset 0 3px 0
        rgba(
            255,
            255,
            255,
            .95
        ),

        inset 0 -14px 25px
        rgba(
            var(--leader-main-rgb),
            .10
        );

    transform:
        translateY(0)
        perspective(950px)
        rotateX(0)
        rotateY(0);

    transform-style:
        preserve-3d;

    transition:
        transform
        .34s
        cubic-bezier(
            .2,
            .75,
            .2,
            1
        ),

        border-color
        .34s
        ease,

        box-shadow
        .34s
        ease,

        filter
        .34s
        ease;
}

.ithm-leader-card.theme-emerald{
    --leader-main:#078f70;
    --leader-main-rgb:7,143,112;

    --leader-accent:#72e7c6;
    --leader-accent-rgb:114,231,198;

    --leader-depth:#075e51;

    --leader-surface-one:#d8f4eb;
    --leader-surface-two:#c3e9df;
    --leader-surface-three:#effbf7;
}

.ithm-leader-card.theme-amethyst{
    --leader-main:#6945bc;
    --leader-main-rgb:105,69,188;

    --leader-accent:#c5a8ff;
    --leader-accent-rgb:197,168,255;

    --leader-depth:#46307f;

    --leader-surface-one:#e9e1ff;
    --leader-surface-two:#d9cdf8;
    --leader-surface-three:#f7f3ff;
}

.ithm-leader-card.theme-ruby{
    --leader-main:#b43666;
    --leader-main-rgb:180,54,102;

    --leader-accent:#ff9dc2;
    --leader-accent-rgb:255,157,194;

    --leader-depth:#772743;

    --leader-surface-one:#f9dfe9;
    --leader-surface-two:#efcddd;
    --leader-surface-three:#fff4f8;
}

.ithm-leader-card::before{
    content:"";

    position:absolute;
    inset:6px;

    z-index:0;

    border:
        2px
        solid
        rgba(
            var(--leader-main-rgb),
            .34
        );

    border-radius:27px;

    background:
        linear-gradient(
            128deg,
            rgba(
                255,
                255,
                255,
                .58
            ),
            transparent 30%,
            transparent 68%,
            rgba(
                var(--leader-main-rgb),
                .09
            )
        );

    box-shadow:
        inset 0 0 0 2px
        rgba(
            255,
            255,
            255,
            .70
        ),

        inset 4px 4px 0
        rgba(
            255,
            255,
            255,
            .45
        ),

        inset -6px -7px 0
        rgba(
            var(--leader-main-rgb),
            .11
        ),

        inset 0 0 27px
        rgba(
            var(--leader-main-rgb),
            .08
        );

    pointer-events:none;
}

.ithm-leader-card::after{
    content:"";

    position:absolute;

    left:21px;
    right:21px;
    bottom:-18px;

    height:27px;

    z-index:-2;

    border-radius:
        0
        0
        28px
        28px;

    background:
        linear-gradient(
            180deg,
            var(--leader-main),
            var(--leader-depth)
        );

    box-shadow:
        0 13px 23px
        rgba(
            7,
            27,
            67,
            .27
        ),

        0 6px 14px
        rgba(
            var(--leader-main-rgb),
            .25
        );

    transform:
        perspective(270px)
        rotateX(-25deg);

    transform-origin:
        top;
}

.ithm-leader-card
> *:not(.ithm-leader-ring):not(.ithm-leader-orbit){
    position:relative;
    z-index:2;
}

.ithm-leader-ring{
    position:absolute;
    inset:8px;

    z-index:7;

    padding:2px;

    border-radius:26px;

    background:
        conic-gradient(
            from 0deg,

            rgba(
                var(--leader-main-rgb),
                .16
            )
            0deg,

            rgba(
                var(--leader-main-rgb),
                .16
            )
            245deg,

            rgba(
                var(--leader-accent-rgb),
                .34
            )
            275deg,

            #ffffff
            302deg,

            var(--leader-accent)
            323deg,

            rgba(
                var(--leader-main-rgb),
                .16
            )
            350deg,

            rgba(
                var(--leader-main-rgb),
                .16
            )
            360deg
        );

    box-shadow:
        0 0 12px
        rgba(
            var(--leader-accent-rgb),
            .22
        ),

        inset 0 0 9px
        rgba(
            var(--leader-accent-rgb),
            .15
        );

    -webkit-mask:
        linear-gradient(
            #000
            0
            0
        )
        content-box,

        linear-gradient(
            #000
            0
            0
        );

    -webkit-mask-composite:
        xor;

    mask:
        linear-gradient(
            #000
            0
            0
        )
        content-box,

        linear-gradient(
            #000
            0
            0
        );

    mask-composite:
        exclude;

    pointer-events:none;

    animation:
        ithmLeadershipRing
        5.6s
        linear
        infinite;
}

.ithm-leader-orbit{
    position:absolute;
    top:0;
    left:0;

    z-index:8;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 0 5px
        #ffffff,

        0 0 11px
        var(--leader-accent),

        0 0 20px
        var(--leader-accent),

        0 0 31px
        rgba(
            var(--leader-accent-rgb),
            .88
        );

    offset-path:
        inset(
            9px
            round
            25px
        );

    offset-distance:
        0%;

    offset-rotate:
        0deg;

    pointer-events:none;

    animation:
        ithmLeadershipOrbit
        5.6s
        linear
        infinite;
}

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

@keyframes ithmLeadershipOrbit{
    0%{
        offset-distance:
            0%;

        opacity:.72;

        transform:
            scale(
                .72
            );
    }

    12%{
        opacity:1;

        transform:
            scale(
                1.18
            );
    }

    48%{
        opacity:.82;

        transform:
            scale(
                .86
            );
    }

    79%{
        opacity:1;

        transform:
            scale(
                1.14
            );
    }

    100%{
        offset-distance:
            100%;

        opacity:.72;

        transform:
            scale(
                .72
            );
    }
}

.ithm-leader-photo{
    position:relative;

    width:164px;
    height:214px;

    overflow:hidden;

    border:
        3px
        solid
        rgba(
            var(--leader-accent-rgb),
            .84
        );

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            var(--leader-main),
            var(--leader-depth)
        );

    box-shadow:
        0 8px 0
        var(--leader-depth),

        0 18px 28px
        rgba(
            7,
            27,
            67,
            .24
        ),

        0 0 0 6px
        rgba(
            var(--leader-accent-rgb),
            .10
        ),

        inset 0 2px 0
        rgba(
            255,
            255,
            255,
            .52
        );
}

.ithm-leader-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:
        var(
            --leader-x,
            50%
        )
        var(
            --leader-y,
            25%
        );

    transform:
        scale(
            var(
                --leader-zoom,
                1
            )
        );

    transform-origin:
        var(
            --leader-x,
            50%
        )
        var(
            --leader-y,
            25%
        );

    border-radius:20px;

    filter:
        contrast(
            1.03
        )
        saturate(
            1.03
        );
}

.ithm-leader-initials{
    display:grid;
    place-items:center;

    width:100%;
    height:100%;

    color:#ffffff;

    font-size:2.7rem;
    font-weight:950;
    letter-spacing:.04em;

    text-shadow:
        0 4px 20px
        rgba(
            0,
            0,
            0,
            .28
        );
}

.ithm-leader-photo-sheen{
    position:absolute;
    inset:0;

    z-index:2;

    background:
        linear-gradient(
            118deg,

            transparent 10%,

            rgba(
                255,
                255,
                255,
                .20
            )
            28%,

            transparent 43%
        );

    transform:
        translateX(
            -125%
        );

    pointer-events:none;

    animation:
        ithmLeadershipPhotoSheen
        6.8s
        ease-in-out
        infinite;
}

@keyframes ithmLeadershipPhotoSheen{
    0%,
    59%{
        transform:
            translateX(
                -125%
            );
    }

    76%,
    100%{
        transform:
            translateX(
                135%
            );
    }
}

.ithm-leader-copy{
    min-width:0;
    width:100%;
}

.ithm-leader-role{
    position:relative;

    display:block;

    width:100%;

    margin:
        0
        0
        13px;

    padding-left:25px;

    color:
        var(--leader-main);

    font-size:.67rem;
    font-weight:950;
    line-height:1.38;
    letter-spacing:.055em;
    text-transform:uppercase;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
}

.ithm-leader-role::before{
    content:"";

    position:absolute;

    left:0;
    top:.34em;

    width:14px;
    height:7px;

    border-radius:999px;

    background:
        var(--leader-main);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--leader-main-rgb),
            .12
        ),

        0 0 14px
        rgba(
            var(--leader-accent-rgb),
            .40
        );
}

.ithm-leader-copy h3{
    width:100%;

    margin:
        0
        0
        12px;

    color:#071f49;

    font-size:
        clamp(
            1.16rem,
            1.55vw,
            1.45rem
        );

    font-weight:950;
    line-height:1.18;
    letter-spacing:-.035em;

    text-wrap:balance;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;

    text-shadow:
        0 1px 0
        rgba(
            255,
            255,
            255,
            .82
        );
}

.ithm-leader-copy p{
    width:100%;

    margin:
        0
        0
        16px;

    color:#385878;

    font-size:.90rem;
    font-weight:570;
    line-height:1.59;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
}

.ithm-leader-focus{
    position:static !important;

    display:inline-flex !important;
    align-items:center;

    max-width:100%;

    margin:0;
    padding:
        8px
        12px;

    border:
        1px
        solid
        rgba(
            var(--leader-main-rgb),
            .26
        );

    border-radius:999px;

    background:
        rgba(
            255,
            255,
            255,
            .52
        );

    color:
        var(--leader-main);

    font-size:.68rem;
    font-weight:900;
    line-height:1.3;
    letter-spacing:.025em;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;

    box-shadow:
        0 5px 14px
        rgba(
            var(--leader-main-rgb),
            .10
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .85
        );

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;
}

#home-leadership-title{
    max-width:900px;

    margin-left:auto;
    margin-right:auto;

    line-height:1.04;

    text-wrap:balance;
}

@media(min-width:901px){
    #home-leadership-title span{
        display:inline;
    }
}

@media(hover:hover) and (pointer:fine){
    .ithm-leader-card:hover{
        transform:
            translateY(
                -13px
            )
            perspective(
                950px
            )
            rotateX(
                2deg
            )
            rotateY(
                -1deg
            );

        border-color:
            rgba(
                var(--leader-accent-rgb),
                .98
            );

        box-shadow:
            0 14px 0
            var(--leader-depth),

            0 22px 0
            rgba(
                7,
                27,
                67,
                .13
            ),

            0 47px 72px
            rgba(
                7,
                27,
                67,
                .26
            ),

            0 28px 50px
            rgba(
                var(--leader-main-rgb),
                .27
            ),

            0 0 40px
            rgba(
                var(--leader-accent-rgb),
                .14
            ),

            0 0 0 8px
            rgba(
                var(--leader-main-rgb),
                .055
            ),

            inset 0 3px 0
            rgba(
                255,
                255,
                255,
                1
            ),

            inset 0 -17px 27px
            rgba(
                var(--leader-main-rgb),
                .12
            );
    }

    .ithm-leader-card:hover
    .ithm-leader-ring,

    .ithm-leader-card:hover
    .ithm-leader-orbit{
        animation-duration:
            3.8s;
    }
}

@media(max-width:1120px) and (min-width:901px){
    .ithm-leader-card{
        grid-template-columns:
            146px
            minmax(
                0,
                1fr
            ) !important;

        gap:20px;

        padding:
            20px
            21px
            22px;
    }

    .ithm-leader-photo{
        width:146px;
        height:199px;
    }

    .ithm-leader-copy h3{
        font-size:1.17rem;
    }

    .ithm-leader-copy p{
        font-size:.84rem;
        line-height:1.54;
    }
}

@media(max-width:900px){
    .ithm-leadership-grid,
    [data-ithm-leadership][data-leadership-ready="true"]{
        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }

    .ithm-leader-card{
        width:
            min(
                100%,
                780px
            ) !important;

        justify-self:center;
    }
}

@media(max-width:640px){
    .ithm-leader-card{
        grid-template-columns:
            1fr !important;

        justify-items:stretch;

        gap:18px;

        width:100% !important;

        padding:
            19px
            17px
            21px;

        border-radius:29px;
    }

    .ithm-leader-card::before{
        inset:5px;
        border-radius:23px;
    }

    .ithm-leader-card::after{
        left:18px;
        right:18px;
        bottom:-16px;

        height:24px;
    }

    .ithm-leader-ring{
        inset:7px;
        border-radius:22px;
    }

    .ithm-leader-orbit{
        offset-path:
            inset(
                8px
                round
                21px
            );
    }

    .ithm-leader-photo{
        justify-self:center;

        width:154px;
        height:192px;

        border-radius:22px;
    }

    .ithm-leader-copy{
        text-align:left;
    }

    .ithm-leader-role{
        margin-bottom:11px;

        font-size:.64rem;
    }

    .ithm-leader-copy h3{
        margin-bottom:11px;

        font-size:1.28rem;
    }

    .ithm-leader-copy p{
        margin-bottom:14px;

        font-size:.87rem;
        line-height:1.56;
    }

    .ithm-leader-focus{
        font-size:.65rem;

        border-radius:18px;
    }
}

@media(max-width:390px){
    .ithm-leader-card{
        padding:
            18px
            15px
            20px;
    }

    .ithm-leader-photo{
        width:145px;
        height:182px;
    }

    .ithm-leader-copy h3{
        font-size:1.20rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .ithm-leader-card,
    .ithm-leader-ring,
    .ithm-leader-orbit,
    .ithm-leader-photo-sheen{
        animation:none !important;
        transition:none !important;
        transform:none !important;
    }
}