/*
|--------------------------------------------------------------------------
| Chairman Intro
|--------------------------------------------------------------------------
*/

.chairman-intro {
    position: relative;

    min-height: 720px;
    height: 75svh;

    overflow: hidden;

    background: #171717;
}


/*
|--------------------------------------------------------------------------
| Background
|--------------------------------------------------------------------------
*/

.chairman-intro__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../../images/chairman-intro-bg.png");

    background-repeat:
        no-repeat;

    background-position:
        center top;

    background-size:
        cover;

    /* opacity: 0; */
}


/*
|--------------------------------------------------------------------------
| Inner
|--------------------------------------------------------------------------
*/

.chairman-intro__inner {
    position: relative;

    z-index: 1;

    width: 100%;
    min-height: inherit;
    height: 100%;

    display: flex;

    align-items: flex-end;
    justify-content: center;
}


/*
|--------------------------------------------------------------------------
| Portrait
|--------------------------------------------------------------------------
*/

.chairman-intro__portrait {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 1;

    width:
        clamp(
            390px,
            38vw,
            670px
        );

        transform:

        translate(

            -50%,

            -50%

        );

    /* opacity: 0; */

    pointer-events: none;
}


.chairman-intro__portrait img {
    display: block;

    width: 100%;
    height: auto;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.chairman-intro__content {
    position: absolute;

    left: 50%;
    top: 62%;
    
    z-index: 2;

    width:
        min(
            520px,
            calc(100% - 40px)
        );

    text-align: left;

    transform:

        translate(

            -50%,

            -50%

        );

    /* opacity: 1; */
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.chairman-intro__title {
    margin:
        0
        0
        14px;

    color: #fff;

    font-family:
        var(--font-title);

    font-size: var(--font-size-h1);

    font-weight: 400;

    line-height: .98;

    letter-spacing:
        -.025em;

        text-align: center;
}


/*
|--------------------------------------------------------------------------
| Chairman Name
|--------------------------------------------------------------------------
*/

.chairman-intro__name {
    margin-left: 7px;

    color:
        var(--color-gold);

    font-family:
        var(--font-primary);

    font-size:
        var(--font-size-text-small);

    font-weight: 600;

    line-height: 1.3;
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Scroll Indicator
|--------------------------------------------------------------------------
*/

.chairman-intro__scroll {
    position: absolute;

    left: 50%;
    bottom: 0;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.72);

    cursor: pointer;

    transform:
        translateX(-50%);

    /* opacity: 0; */
}


.chairman-intro__scroll span {
    font-size: 9px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: .04em;

    text-transform: uppercase;
}


.chairman-intro__scroll i {
    display: block;

    width: 1px;
    height: 42px;

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

    transform-origin:
        top center;

    transition:
        background-color .3s ease,
        height .3s ease;
}


.chairman-intro__scroll:hover i {
    height: 48px;

    background:
        var(--color-gold);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .chairman-intro {
        min-height: 680px;
    }


    .chairman-intro__portrait {
        width:
            clamp(
                390px,
                45vw,
                580px
            );
    }


    .chairman-intro__content {
        transform:
            translate(
                -50%,
                -50%
            );
    }

}


/*
|--------------------------------------------------------------------------
| <= 991
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .chairman-intro {
        min-height: 650px;
        height: 75svh;
    }


    .chairman-intro__background {
        background-position:
            center top;
    }


    .chairman-intro__portrait {
        width:
            min(
                520px,
                68vw
            );
    }


    .chairman-intro__content {
        

        width:
            min(
                460px,
                calc(100% - 40px)
            );

 
    }
    .chairman-intro__content {
        transform:
            translate(
                -50%,
                -50%
            );
    }


    .chairman-intro__title {
        font-size:
            clamp(
                44px,
                7vw,
                62px
            );
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .chairman-intro {
        min-height: 620px;
        height: 75svh;
    }


    .chairman-intro__background {
        background-position:
            center top;

        background-size:
            auto 100%;
    }


    .chairman-intro__portrait {
        width:
            min(
                480px,
                92vw
            );

        left: 50%;
    }


    .chairman-intro__content {
        left: 50%;
        bottom: 100px;

        width:
            calc(100% - 44px);

        text-align: center;

        /* transform:
            translateX(-50%); */
    }

    .chairman-intro__content {
        transform:
            translate(
                -50%,
                -50%
            );
    }


    .chairman-intro__title {
        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        line-height: 1;
    }


    .chairman-intro__name {
        margin-left: 0;
    }


    .chairman-intro__scroll {
        bottom: 0;
    }

}

/*
|--------------------------------------------------------------------------
| Chairman Message
|--------------------------------------------------------------------------
*/

.chairman-message {
    position: relative;

    padding:
        110px
        0
        125px;

    overflow: hidden;

    background: #1d1d1d;
}


.chairman-message__inner {
    width:
        min(
            950px,
            100%
        );

    margin:
        0
        auto;
}


/*
|--------------------------------------------------------------------------
| Greeting
|--------------------------------------------------------------------------
*/

.chairman-message__greeting {
    margin-bottom: 42px;

    color: var(--color-gold);

    font-family: var(--font-primary);

    font-size: var(--font-size-h4);

    font-weight: 400;

    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.chairman-message__text {
    position: relative;

    color:
        rgba(
            255,
            255,
            255,
            .24
        );

    font-family: var(--font-primary);

    font-size: var(--font-size-h4);

    font-weight: 400;

    line-height: 1.18;

    letter-spacing: -1.44px;
}


.chairman-message__text > p {
    margin:
        0
        0
        42px;
}


.chairman-message__text > p:last-of-type {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Bright Overlay
|--------------------------------------------------------------------------
*/

.chairman-message__fill {
    position: absolute;

    inset: 0;

    z-index: 2;

    color:
        rgba(
            255,
            255,
            255,
            .94
        );

    pointer-events: none;

    clip-path:
        inset(
            0
            0
            100%
            0
        );

    will-change: clip-path;
}


.chairman-message__fill p {
    margin:
        0
        0
        42px;
}


.chairman-message__fill p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .chairman-message {
        padding:
            80px
            0
            90px;
    }


    .chairman-message__inner {
        max-width: 760px;
    }

}


@media (max-width: 767.98px) {

    .chairman-message {
        padding:
            60px
            0
            70px;
    }


    .chairman-message__greeting {
        margin-bottom: 30px;

        font-size: 25px;
    }


    .chairman-message__text {
        font-size: 21px;

        line-height: 1.5;

        letter-spacing: 0;
    }


    .chairman-message__text > p,
    .chairman-message__fill p {
        margin-bottom: 32px;
    }

}

/*
|--------------------------------------------------------------------------
| Leadership
|--------------------------------------------------------------------------
*/

.leadership-section {
    position: relative;

    padding:
        85px
        0
        105px;

    overflow: hidden;

    background: #202020;
}


/*
|--------------------------------------------------------------------------
| Background
|--------------------------------------------------------------------------
*/

.leadership-section__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../../images/chairman-bg.png");

    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    background-size:
        cover;

    opacity: .28;

    pointer-events: none;
}


.leadership-section__inner {
    position: relative;

    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.leadership-section__head {
    margin-bottom: 28px;
}


.leadership-section__eyebrow {
    margin-bottom: 10px;

    color:
        var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;
}


.leadership-section__title,
.leadership-chiefs__title {
    margin: 0;

    color: #fff;

    font-family:
        var(--font-title);

    font-size:
        var(--font-size-h2);

    font-weight: 400;

    line-height: 1.05;
}


/*
|--------------------------------------------------------------------------
| Executive
|--------------------------------------------------------------------------
*/

.leadership-executives {
    width: 100%;

    margin-bottom: 55px;
}


/*
|--------------------------------------------------------------------------
| GCEO Full Row
|--------------------------------------------------------------------------
*/

.leadership-executive-card {
    position: relative;

    width: 100%;

    min-height: 525px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        55px
        clamp(
            50px,
            6vw,
            95px
        )
        45px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            185,
            163,
            130,
            .72
        );

    background:
        rgba(
            64,
            61,
            53,
            .88
        );

    isolation: isolate;

    transition:
        border-color .35s ease,
        background-color .35s ease;
}


/*
|--------------------------------------------------------------------------
| GCEO Background Texture
|--------------------------------------------------------------------------
*/

.leadership-executive-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        rgba(
            64,
            61,
            53,
            .9
        );

    pointer-events: none;
}


.leadership-executive-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: -1;

    height: 50%;

    /* background-image:
        url("../../images/chairman-bg.png"); */

    background-repeat:
        no-repeat;

    background-position:
        left bottom;

    background-size:
        cover;

    opacity: .17;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Clickable GCEO
|--------------------------------------------------------------------------
*/

.leadership-executive-card.has-detail {
    cursor: pointer;
}


.leadership-executive-card.has-detail:hover {
    border-color:
        var(--color-gold);
}


/*
|--------------------------------------------------------------------------
| GCEO Left
|--------------------------------------------------------------------------
*/

.leadership-executive-card__left {
    position: relative;

    z-index: 1;

    width: min(
        100%,
        420px
    );

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| GCEO Image
|--------------------------------------------------------------------------
*/
.leadership-executive-card__image {
    position: relative;

    width: 100%;
    max-width: 360px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    margin-bottom: 24px;

    overflow: hidden;
}


.leadership-executive-card__image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    object-position:
        center bottom;

    transform: scale(1);

    transform-origin:
        center bottom;

    transition:
        transform
        .6s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}

.leadership-executive-card:hover
.leadership-executive-card__image img {
    transform:
        scale(1.025);
}


/*
|--------------------------------------------------------------------------
| GCEO Identity
|--------------------------------------------------------------------------
*/

.leadership-executive-card__identity {
    position: relative;

    z-index: 1;

    width: 100%;

    text-align: center;
}


.leadership-executive-card__name {
    margin:
        0
        0
        14px;

    color: #fff;

    font-family:
        var(--font-title);

    font-size:
        clamp(
            30px,
            2.25vw,
            42px
        );

    font-weight: 400;

    line-height: 1.08;
}


.leadership-executive-card__title {
    color:
        var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.25;

    text-align: center;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| GCEO Biography
|--------------------------------------------------------------------------
*/

.leadership-executive-card__bio {
    position: relative;

    z-index: 1;

    align-self: center;

    max-width: 100%;

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.5;
}


.leadership-executive-card__bio p {
    margin:
        0
        0
        28px;
}


.leadership-executive-card__bio p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Chiefs
|--------------------------------------------------------------------------
*/

.leadership-chiefs__title {
    margin-bottom: 18px;
}


.leadership-chiefs__grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        18px
        16px;
}


/*
|--------------------------------------------------------------------------
| Chief Card
|--------------------------------------------------------------------------
*/

.leadership-chief-card {
    position: relative;

    overflow: hidden;

    background: transparent;

    border: 0;

    isolation: isolate;
}


/*
|--------------------------------------------------------------------------
| Chief Image
|--------------------------------------------------------------------------
*/

.leadership-chief-card__image {
    position: relative;

    width: 100%;
}


.leadership-chief-card__image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    transform:
        scale(1);

    transition:
        transform
        .55s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.leadership-chief-card:hover
.leadership-chief-card__image img {
    transform:
        scale(1.035);
}


/*
|--------------------------------------------------------------------------
| Chief Hover Info
|--------------------------------------------------------------------------
*/

.leadership-chief-card__info {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 14px;

    z-index: 2;

    min-height: 62px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        10px
        12px;

    background:
        rgba(
            31,
            31,
            31,
            .9
        );

    opacity: 0;

    transform:
        translateY(18px);

    pointer-events: none;

    transition:
        opacity .35s ease,
        transform
        .4s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


.leadership-chief-card:hover
.leadership-chief-card__info {
    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Chief Name
|--------------------------------------------------------------------------
*/

.leadership-chief-card__name {
    margin:
        0
        0
        3px;

    color:
        var(--color-gold);

    font-family:
        var(--font-title);

    font-size:
        var(--font-size-text-main);

    font-weight: 400;

    line-height: 1.15;
}


.leadership-chief-card__title {
    color:
        rgba(
            255,
            255,
            255,
            .62
        );

    font-size:
        var(--font-size-text-small);

    font-weight: 300;

    line-height: 1.3;
}


/*
|--------------------------------------------------------------------------
| LinkedIn
|--------------------------------------------------------------------------
*/

.leadership-chief-card__linkedin {
    flex:
        0
        0
        30px;

    width: 30px;
    height: 30px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color:
        var(--color-gold);

    font-size: 17px;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.leadership-chief-card__linkedin:hover {
    color: #fff;

    transform:
        translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Leadership Detail
|--------------------------------------------------------------------------
*/

.leadership-detail {
    position: relative;
}


.leadership-detail[hidden] {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Detail Top Bar
|--------------------------------------------------------------------------
*/

.leadership-detail__topbar {
    padding-bottom: 20px;
}


.leadership-detail__back {
    min-height: 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        7px
        16px;

    border:
        1px solid
        var(--color-gold);

    background:
        var(--color-gold);

    color: #202020;

    font-size:
        var(--font-size-text-small);

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.leadership-detail__back:hover {
    background: transparent;

    color: #fff;
}


.leadership-detail__divider {
    width: 100%;
    height: 1px;

    margin-bottom: 50px;

    background:
        rgba(
            255,
            255,
            255,
            .12
        );
}


/*
|--------------------------------------------------------------------------
| Detail Layout
|--------------------------------------------------------------------------
*/

.leadership-detail__panel {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(420px, 1.05fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    align-items: center;

    min-height: 560px;
}


/*
|--------------------------------------------------------------------------
| Detail Content
|--------------------------------------------------------------------------
*/

.leadership-detail__name {
    margin:
        0
        0
        10px;

    color: #fff;

    font-family:
        var(--font-title);

    font-size:
        var(--font-size-h2);

    font-weight: 400;

    line-height: 1.08;
}


.leadership-detail__role {
    margin-bottom: 30px;

    color:
        var(--color-gold);

    font-size:
        var(--font-size-text-xsmall);

    font-weight: 700;

    line-height: 1.3;

    text-transform: uppercase;
}


.leadership-detail__bio {
    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size:
        var(--font-size-text-main);

    font-weight: 300;

    line-height: 1.5;
}


.leadership-detail__bio p {
    margin:
        0
        0
        24px;
}


.leadership-detail__bio p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Detail Portrait
|--------------------------------------------------------------------------
*/

.leadership-detail__portrait {
    display: flex;

    align-items: flex-end;
    justify-content: center;

    min-height: 520px;
}


.leadership-detail__portrait img {
    display: block;

    width: 100%;
    max-width: 610px;
    height: auto;

    object-fit: contain;

    object-position:
        center bottom;
}


/*
|--------------------------------------------------------------------------
| Clickable Leader Card
|--------------------------------------------------------------------------
*/

[data-leader-card] {
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Desktop <= 1199px
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .leadership-executive-card {
        grid-template-columns:
            minmax(360px, 270px)
            minmax(0, 1fr);

        gap: 45px;

        padding:
            45px
            45px
            40px
            32px;
    }


    .leadership-executive-card__bio {
        font-size:
            var(--font-size-text-small);
    }


    .leadership-chiefs__grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .leadership-section {
        padding:
            70px
            0
            80px;
    }


    .leadership-executive-card {
        grid-template-columns:
            minmax(210px, 250px)
            minmax(0, 1fr);

        gap: 35px;

        min-height: 0;

        padding:
            38px
            32px;
    }


    .leadership-executive-card__name {
        font-size: 30px;
    }


    .leadership-executive-card__bio {
        font-size: 17px;
    }


    .leadership-chiefs__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /*
    |--------------------------------------------------------------------------
    | Detail
    |--------------------------------------------------------------------------
    */

    .leadership-detail__panel {
        grid-template-columns:
            1fr;

        gap: 40px;

        min-height: 0;
    }


    .leadership-detail__portrait {
        min-height: 0;
    }


    .leadership-detail__portrait img {
        max-width: 480px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .leadership-section {
        padding:
            55px
            0
            65px;
    }


    /*
    |--------------------------------------------------------------------------
    | GCEO
    |--------------------------------------------------------------------------
    */

    .leadership-executives {
        margin-bottom: 45px;
    }


    .leadership-executive-card {
        display: block;

        padding:
            28px
            20px
            32px;
    }


    .leadership-executive-card::after {
        height: 35%;
    }


    .leadership-executive-card__left {
        /* max-width: 280px; */

        margin-bottom: 32px;
    }


    .leadership-executive-card__image {
        margin-bottom: 18px;
    }


    .leadership-executive-card__name {
        max-width: none;

        font-size: 30px;
    }


    .leadership-executive-card__bio {
        font-size: 16px;

        line-height: 1.5;
    }


    .leadership-executive-card__bio p {
        margin-bottom: 20px;
    }


    /*
    |--------------------------------------------------------------------------
    | Chiefs
    |--------------------------------------------------------------------------
    */

    .leadership-chiefs__grid {
        grid-template-columns:
            1fr
            1fr;

        gap: 12px;
    }


    .leadership-chief-card {
        min-height: 190px;
    }


    /*
     * Touch devices don't have dependable hover,
     * so keep the information visible.
     */

    .leadership-chief-card__info {
        left: 8px;
        right: 8px;
        bottom: 8px;

        padding:
            8px
            9px;

        opacity: 1;

        transform: none;

        pointer-events: auto;
    }


    .leadership-chief-card__name {
        font-size: 14px;
    }


    .leadership-chief-card__title {
        font-size: 11px;
    }


    /*
    |--------------------------------------------------------------------------
    | Detail
    |--------------------------------------------------------------------------
    */

    .leadership-detail__divider {
        margin-bottom: 35px;
    }


    .leadership-detail__panel {
        gap: 30px;
    }


    .leadership-detail__name {
        font-size: 34px;
    }


    .leadership-detail__portrait {
        order: -1;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 575.98px) {

    .leadership-executive-card {
        padding:
            24px
            18px
            28px;
    }


    .leadership-executive-card__left {
        max-width: 240px;
    }


    .leadership-executive-card__name {
        font-size: 27px;
    }

}

.leadership-chief-card {
    border:1px solid
    rgba(
        185,
        163,
        130,
        .72
    );
}



.card-highlighted {
    background-color: color-mix(
        in srgb,
        var(--color-gold) 60%,
        transparent
    );
}
.card-highlighted .leadership-chief-card__name,
.card-highlighted .leadership-chief-card__title {
    color:var(--color-dark-3);
}