/* =========================================================
   EXECUTIVE LEADERSHIP
========================================================= */

.leadership-section{
    padding:7rem 0;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

.leadership-section::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:28rem;
    height:28rem;
    opacity:.35;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(10,56,87,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(10,56,87,.05) 1px,transparent 1px);
    background-size:2rem 2rem;
    mask-image:linear-gradient(to bottom left,#000,transparent 75%);
}

.leadership-section .container{
    position:relative;
    z-index:2;
}


/* ======================================
   Heading
====================================== */

.leadership-section__heading{
    max-width:52rem;
    margin:0 auto 4.5rem;
    text-align:center;
}

.leadership-section__eyebrow{
    display:inline-block;
    margin-bottom:1rem;
    color:#F4B400;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.leadership-section__title{
    margin:0;
    color:#0A3857;
    font-size:clamp(2.5rem,5vw,4.4rem);
    font-weight:800;
    line-height:1.08;
}

.leadership-section__title span{
    display:block;
    color:#F4B400;
}

.leadership-section__intro{
    max-width:44rem;
    margin:1.6rem auto 0;
    color:#5d6d78;
    line-height:1.9;
}


/* ======================================
   Grid
====================================== */

.leadership-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}


/* ======================================
   Card
====================================== */

.leader-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #E2E8EE;
    border-radius:18px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 12px 35px rgba(10,56,87,.05);
}

.leader-card:hover{
    transform:translateY(-8px);
    border-color:#F4B400;
    box-shadow:0 28px 55px rgba(10,56,87,.10);
}


/* ======================================
   Image
====================================== */

.leader-card__image-container{
    position:relative;
    aspect-ratio:4/4.5;
    overflow:hidden;
    background:#eef3f7;
}

.leader-card__image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s ease;
}

.leader-card:hover .leader-card__image{
    transform:scale(1.05);
}

.leader-card__number{
    position:absolute;
    right:1.2rem;
    bottom:1rem;
    color:rgba(255,255,255,.9);
    font-size:2.4rem;
    font-weight:800;
}


/* ======================================
   Content
====================================== */

.leader-card__content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:2rem;
    border-top:4px solid #F4B400;
}

.leader-card__position{
    margin:0;
    color:#C18A00;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.leader-card__name{
    margin:.9rem 0 1rem;
    color:#0A3857;
    font-size:1.55rem;
    font-weight:700;
}

.leader-card__description{
    margin:0;
    color:#5d6d78;
    line-height:1.85;
}


/* ======================================
   LinkedIn Button
====================================== */

.leader-card__linkedin{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    margin-top:auto;
    padding-top:2rem;
    text-decoration:none;
    color:#0A3857;
    font-weight:700;
    transition:.25s ease;
}

.leader-card__linkedin-icon{
    width:42px;
    height:42px;
    padding:9px;
    border-radius:50%;
    border:1px solid #d7dfe5;
    transition:.25s ease;
}

.leader-card__linkedin:hover{
    color:#F4B400;
}

.leader-card__linkedin:hover .leader-card__linkedin-icon{
    background:#0A3857;
    color:#fff;
    border-color:#0A3857;
}

.leader-card__arrow{
    font-size:1.1rem;
    transition:.25s ease;
}

.leader-card__linkedin:hover .leader-card__arrow{
    transform:translate(2px,-2px);
}


/* ======================================
   Leadership Approach
====================================== */

.leadership-approach{
    margin-top:4rem;
    padding:2.5rem;
    border-left:5px solid #F4B400;
    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 35px rgba(10,56,87,.05);
}

.leadership-approach__label{
    margin:0 0 .8rem;
    color:#0A3857;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.leadership-approach__text{
    margin:0;
    color:#5d6d78;
    line-height:1.9;
}


/* ======================================
   Tablet
====================================== */

@media(max-width:1024px){

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

    .leader-card:last-child{
        grid-column:1/-1;
        max-width:420px;
        justify-self:center;
    }

}


/* ======================================
   Mobile
====================================== */

@media(max-width:768px){

    .leadership-section{
        padding:5rem 0;
    }

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

    .leader-card:last-child{
        max-width:100%;
    }

    .leadership-section__heading{
        margin-bottom:3rem;
    }

    .leadership-approach{
        margin-top:3rem;
        padding:2rem;
    }

}


/* ======================================
   Small Mobile
====================================== */

@media(max-width:576px){

    .leadership-section{
        padding:4rem 0;
    }

    .leadership-section__heading{
        text-align:left;
    }

    .leader-card__content{
        padding:1.6rem;
    }

    .leader-card__name{
        font-size:1.35rem;
    }

    .leader-card__linkedin{
        font-size:.9rem;
    }

    .leadership-approach{
        padding:1.5rem;
    }

}