/* =========================================================
   KHALEEJ VISION — TEAM PAGE
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.team-page{
    background:#F7F4ED;

    font-family:
        "Inter",
        Arial,
        sans-serif;
}


.team-page .eyebrow{
    font-size:10px;

    font-weight:700;

    line-height:1;

    letter-spacing:.22em;

    text-transform:uppercase;
}


.team-page .eyebrow.dark{
    color:#A17A24;
}


.team-page .gold-dot{
    color:var(--gold-light);
}



/* =========================================================
   HEADER
   ========================================================= */

.team-page .site-header{
    position:absolute;

    top:0;
    left:0;
    right:0;

    z-index:50;

    background:
        rgba(7,17,28,.64);

    backdrop-filter:
        blur(16px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(120%);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        background .25s ease,
        backdrop-filter .25s ease,
        box-shadow .25s ease;
}


.team-page .site-header.scrolled{
    position:fixed;

    background:
        rgba(7,17,28,.90);

    backdrop-filter:
        blur(20px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(125%);

    box-shadow:
        0 10px 32px
        rgba(0,0,0,.20);
}


.team-page .nav-wrap{
    height:112px;
}


.team-page .desktop-nav{
    gap:28px;
}


.team-page .btn-nav{
    min-height:58px;

    padding:
        0
        26px;
}



/* =========================================================
   HERO
   ========================================================= */

.team-hero{
    position:relative;

    min-height:470px;

    overflow:hidden;

    color:#fff;

    background:

        radial-gradient(
            circle at 78% 42%,
            rgba(47,82,105,.18),
            transparent 34%
        ),

        linear-gradient(
            120deg,
            #06101A 0%,
            #071522 52%,
            #0B1C2A 100%
        );
}



/* TECHNICAL GRID */

.team-hero-grid{
    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.075;

    background-image:

        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size:
        72px
        72px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 25%,
            #000 63%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 25%,
            #000 63%,
            #000 100%
        );
}



/* DECORATIVE SURVEY CIRCLE */

.team-hero::before{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    top:52%;
    right:9%;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(213,166,59,.15);

    border-radius:50%;

    box-shadow:

        0 0 0 70px
        rgba(213,166,59,.025),

        0 0 0 140px
        rgba(213,166,59,.015);
}



/* SURVEY AXIS */

.team-hero::after{
    content:"";

    position:absolute;

    top:15%;
    bottom:12%;

    right:21%;

    width:1px;

    background:
        linear-gradient(
            transparent,
            rgba(213,166,59,.32),
            transparent
        );
}



/* HERO INNER */

.team-hero-inner{
    position:relative;

    z-index:3;

    min-height:470px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:125px;

    padding-bottom:48px;
}


.team-hero-copy{
    width:64%;

    max-width:760px;
}


.team-hero .eyebrow{
    margin-bottom:20px;

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


.team-hero h1{
    margin:0;

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            54px,
            4.6vw,
            78px
        );

    font-weight:600;

    line-height:.94;

    letter-spacing:-.035em;
}


.team-hero-copy p{
    max-width:590px;

    margin:
        25px
        0
        0;

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

    font-size:15px;

    line-height:1.75;
}


.team-hero-note{
    align-self:flex-end;

    display:flex;

    flex-direction:column;

    gap:7px;

    margin-bottom:35px;

    padding-left:23px;

    border-left:
        1px solid
        rgba(213,166,59,.52);

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

    font-size:9px;

    letter-spacing:.21em;

    text-transform:uppercase;
}



/* =========================================================
   FEATURED LEADERSHIP
   ========================================================= */

.featured-leadership{
    padding:
        95px
        0
        110px;

    background:#F7F4ED;
}


.leadership-section-heading{
    margin-bottom:48px;
}


.leadership-section-heading .eyebrow{
    margin-bottom:18px;
}


.leadership-section-heading h2{
    margin:0;

    color:#0B1623;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            3.2vw,
            57px
        );

    font-weight:600;

    line-height:1;

    letter-spacing:-.028em;
}



/* =========================================================
   FEATURED LEADER
   ========================================================= */

.featured-leader{
    display:grid;

    grid-template-columns:
        minmax(330px,.78fr)
        1.22fr;

    min-height:600px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #0A1926,
            #06111B
        );

    box-shadow:
        0 22px 55px
        rgba(7,17,28,.12);
}



/* =========================================================
   FEATURED LEADER PHOTO
   ========================================================= */

.featured-leader-photo{
    position:relative;

    min-height:600px;

    overflow:hidden;

    background:#101A24;
}


.featured-leader-photo img{
    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 18%;

    display:block;

    filter:
        contrast(1.02)
        saturate(.94);
}


.featured-leader-photo::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            0deg,
            rgba(4,10,17,.34),
            transparent 38%
        );
}


.featured-photo-caption{
    position:absolute;

    z-index:3;

    left:25px;
    right:25px;
    bottom:22px;

    display:flex;

    justify-content:space-between;

    gap:20px;

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

    font-size:8px;

    font-weight:700;

    letter-spacing:.18em;
}



/* =========================================================
   FEATURED LEADER CONTENT
   ========================================================= */

.featured-leader-content{
    padding:
        55px
        58px
        48px;

    color:#fff;
}


.featured-leader-content .eyebrow{
    margin-bottom:17px;

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


.featured-leader-content > h2{
    margin:
        0
        0
        20px;

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            43px,
            3.6vw,
            62px
        );

    font-weight:600;

    line-height:1;

    letter-spacing:-.03em;
}


.featured-leader-intro{
    max-width:650px;

    margin:
        0
        0
        34px;

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

    font-size:14px;

    line-height:1.75;
}



/* =========================================================
   LEADER FACTS
   ========================================================= */

.leader-facts{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    margin-bottom:38px;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.leader-fact{
    min-height:90px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        14px
        18px;

    border-right:
        1px solid
        rgba(255,255,255,.10);
}


.leader-fact:first-child{
    padding-left:0;
}


.leader-fact:last-child{
    border-right:0;
}


.leader-fact strong{
    margin-bottom:5px;

    color:var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:30px;

    font-weight:500;
}


.leader-fact span{
    color:
        rgba(255,255,255,.48);

    font-size:8px;

    font-weight:700;

    letter-spacing:.16em;
}



/* =========================================================
   FEATURED CAREER
   ========================================================= */

.featured-career-heading{
    margin-bottom:13px;
}


.featured-career-heading span{
    color:var(--gold-light);

    font-size:8px;

    font-weight:700;

    letter-spacing:.18em;
}


.featured-career-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    column-gap:30px;
}


.featured-career-item{
    display:grid;

    grid-template-columns:
        95px
        1fr;

    gap:14px;

    padding:
        13px
        0;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}


.featured-career-item > span{
    color:var(--gold-light);

    font-size:9px;

    font-weight:600;

    line-height:1.5;
}


.featured-career-item strong{
    display:block;

    margin-bottom:3px;

    color:#fff;

    font-size:11px;

    line-height:1.4;
}


.featured-career-item small{
    display:block;

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

    font-size:9px;

    line-height:1.5;
}



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

.executive-leadership{
    padding:
        105px
        0
        120px;

    background:#F1EDE4;
}


.executive-heading{
    display:grid;

    grid-template-columns:
        1fr
        .72fr;

    gap:70px;

    align-items:end;

    margin-bottom:52px;
}


.executive-heading .eyebrow{
    margin-bottom:18px;
}


.executive-heading h2{
    margin:0;

    color:#0B1623;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            3.2vw,
            56px
        );

    font-weight:600;

    line-height:1;

    letter-spacing:-.028em;
}


.executive-heading > p{
    max-width:530px;

    margin:
        0
        0
        3px;

    color:#59636D;

    font-size:14px;

    line-height:1.78;
}



/* =========================================================
   EXECUTIVE GRID
   ========================================================= */

.executive-grid{
    display:grid;

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

    gap:25px;

    align-items:start;
}



/* =========================================================
   EXECUTIVE CARD
   ========================================================= */

.executive-card{
    overflow:hidden;

    background:#fff;

    border:
        1px solid
        rgba(11,22,35,.09);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.executive-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(161,122,36,.28);

    box-shadow:
        0 20px 45px
        rgba(7,17,28,.10);
}



/* =========================================================
   EXECUTIVE PHOTOS
   ========================================================= */

.executive-photo{
    position:relative;

    overflow:hidden;

    aspect-ratio:
        4 / 4.6;

    background:#0A1622;
}


.executive-photo::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            0deg,
            rgba(4,10,17,.15),
            transparent 32%
        );
}


.executive-photo img{
    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    display:block;

    transition:
        transform .4s ease;
}


.executive-card:hover
.executive-photo img{
    transform:
        scale(1.018);
}



/* PHOTO CROP TUNING */

.executive-card:nth-child(1)
.executive-photo img{
    object-position:
        center 15%;
}


.executive-card:nth-child(2)
.executive-photo img{
    object-position:
        center 16%;
}


.executive-card:nth-child(3)
.executive-photo img{
    object-position:
        center 18%;
}



/* =========================================================
   EXECUTIVE CONTENT
   ========================================================= */

.executive-content{
    padding:
        30px
        27px
        32px;
}


.executive-content h3{
    margin:
        0
        0
        7px;

    color:#0B1623;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:27px;

    font-weight:600;

    line-height:1.05;

    letter-spacing:-.02em;
}


.executive-role{
    margin:
        0
        0
        21px;

    color:#A17A24;

    font-size:9px;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;
}


.executive-bio{
    min-height:92px;

    margin:0;

    color:#59636D;

    font-size:13px;

    line-height:1.7;
}


.executive-divider{
    height:1px;

    margin:
        24px
        0;

    background:
        rgba(11,22,35,.11);
}



/* =========================================================
   EXECUTIVE DETAILS
   ========================================================= */

.executive-detail{
    margin-bottom:25px;
}


.executive-detail:last-child{
    margin-bottom:0;
}


.executive-detail > span{
    display:block;

    margin-bottom:11px;

    color:#A17A24;

    font-size:8px;

    font-weight:700;

    letter-spacing:.18em;
}


.executive-detail > strong{
    display:block;

    margin-bottom:4px;

    color:#162330;

    font-size:12px;

    line-height:1.5;
}


.executive-detail > small{
    display:block;

    color:#737B82;

    font-size:10px;

    line-height:1.5;
}



/* =========================================================
   EXPERIENCE LIST
   ========================================================= */

.executive-detail ul{
    margin:0;

    padding:0;

    list-style:none;

    border-top:
        1px solid
        rgba(11,22,35,.08);
}


.executive-detail li{
    padding:
        11px
        0;

    border-bottom:
        1px solid
        rgba(11,22,35,.08);
}


.executive-detail li strong{
    display:block;

    margin-bottom:3px;

    color:#162330;

    font-size:11px;

    line-height:1.4;
}


.executive-detail li small{
    display:block;

    color:#737B82;

    font-size:9px;

    line-height:1.5;
}



/* =========================================================
   RTL
   ========================================================= */

body.rtl.team-page
.team-hero-note{
    padding-left:0;

    padding-right:23px;

    border-left:0;

    border-right:
        1px solid
        rgba(213,166,59,.52);
}


body.rtl.team-page
.featured-leader-content,

body.rtl.team-page
.executive-content,

body.rtl.team-page
.leadership-section-heading,

body.rtl.team-page
.executive-heading{
    text-align:right;
}


body.rtl.team-page
.leader-fact{
    border-right:0;

    border-left:
        1px solid
        rgba(255,255,255,.10);
}


body.rtl.team-page
.leader-fact:last-child{
    border-left:0;
}


body.rtl.team-page
.featured-career-item{
    grid-template-columns:
        1fr
        95px;
}


body.rtl.team-page
.featured-career-item > span{
    grid-column:2;

    grid-row:1;
}


body.rtl.team-page
.featured-career-item > div{
    grid-column:1;

    grid-row:1;
}



/* =========================================================
   RESPONSIVE — 1300PX
   ========================================================= */

@media(max-width:1300px){

    .team-page .desktop-nav{
        gap:20px;
    }


    .team-page .btn-nav{
        padding:
            0
            19px;
    }


    .featured-leader-content{
        padding:
            48px
            44px
            42px;
    }


    .featured-career-grid{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   RESPONSIVE — 1050PX
   ========================================================= */

@media(max-width:1050px){

    .featured-leader{
        grid-template-columns:
            .85fr
            1.15fr;
    }


    .leader-facts{
        grid-template-columns:
            repeat(3,1fr);
    }


    .executive-heading{
        grid-template-columns:1fr;

        gap:25px;
    }


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

}



/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:820px){

    .team-page .nav-wrap{
        height:92px;
    }


    .team-hero{
        min-height:500px;
    }


    .team-hero-inner{
        min-height:500px;

        padding-top:125px;

        padding-bottom:55px;
    }


    .team-hero-copy{
        width:78%;
    }


    .team-hero-note{
        display:none;
    }


    .team-hero::before{
        right:-190px;
    }


    .featured-leader{
        grid-template-columns:1fr;
    }


    .featured-leader-photo{
        min-height:600px;
    }


    .featured-leader-content{
        padding:
            45px
            38px;
    }


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


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


    .executive-card{
        display:grid;

        grid-template-columns:
            .8fr
            1.2fr;
    }


    .executive-photo{
        aspect-ratio:auto;

        min-height:520px;
    }

}



/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:620px){

    .team-page .nav-wrap{
        height:78px;
    }


    .team-hero{
        min-height:480px;
    }


    .team-hero-inner{
        min-height:480px;

        padding-top:105px;

        padding-bottom:50px;
    }


    .team-hero-copy{
        width:100%;
    }


    .team-hero h1{
        font-size:46px;

        line-height:.96;
    }


    .team-hero-copy p{
        max-width:94%;

        font-size:14px;
    }


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


    .leadership-section-heading{
        margin-bottom:35px;
    }


    .leadership-section-heading h2,
    .executive-heading h2{
        font-size:38px;
    }


    .featured-leader-photo{
        min-height:500px;
    }


    .featured-leader-content{
        padding:
            35px
            25px;
    }


    .featured-leader-content > h2{
        font-size:42px;
    }


    .leader-facts{
        grid-template-columns:1fr;
    }


    .leader-fact{
        min-height:72px;

        padding:
            14px
            0;

        border-right:0;

        border-bottom:
            1px solid
            rgba(255,255,255,.10);
    }


    .leader-fact:last-child{
        border-bottom:0;
    }


    .featured-career-grid{
        grid-template-columns:1fr;
    }


    .featured-career-item{
        grid-template-columns:
            90px
            1fr;
    }


    .executive-leadership{
        padding:
            72px
            0
            85px;
    }


    .executive-heading{
        margin-bottom:35px;
    }


    .executive-grid{
        gap:30px;
    }


    .executive-card{
        display:block;
    }


    .executive-photo{
        aspect-ratio:
            4 / 4.7;

        min-height:0;
    }


    .executive-content{
        padding:
            26px
            23px
            29px;
    }


    .executive-content h3{
        font-size:27px;
    }


    .executive-bio{
        min-height:0;
    }

}

/* =========================================================
   LIGHT THEME OVERRIDES — TEAM PAGE
   ========================================================= */

.team-page.theme-active{
    background:var(--theme-page-bg);
    color:var(--theme-text);
}

.team-page.theme-active .eyebrow.dark{
    color:var(--theme-accent-text);
}


/* Team file has its own header selectors, so these overrides
   intentionally repeat the global theme header colors. */

.team-page.theme-active .site-header{
    background:var(--theme-header-bg);
    border-bottom:1px solid var(--theme-header-border);
    box-shadow:none;
}

.team-page.theme-active .site-header.scrolled{
    background:var(--theme-header-bg-scrolled);
    border-bottom:1px solid var(--theme-header-border);
    box-shadow:0 10px 32px var(--theme-shadow);
}


/* Hero */

.team-page.theme-active .team-hero{
    color:var(--theme-primary);
    background:
        radial-gradient(
            circle at 78% 42%,
            color-mix(in srgb,var(--theme-tertiary) 38%,transparent),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            var(--theme-hero-start) 0%,
            var(--theme-hero-mid) 52%,
            var(--theme-hero-end) 100%
        );
}

.team-page.theme-active .team-hero-grid{
    background-image:
        linear-gradient(
            color-mix(in srgb,var(--theme-primary) 7%,transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb,var(--theme-primary) 7%,transparent) 1px,
            transparent 1px
        );
}

.team-page.theme-active .team-hero .eyebrow{
    color:var(--theme-accent-text);
}

.team-page.theme-active .team-hero h1{
    color:var(--theme-primary);
}

.team-page.theme-active .team-hero-copy p{
    color:var(--theme-muted);
}

.team-page.theme-active .team-hero-note{
    color:color-mix(in srgb,var(--theme-muted) 74%,transparent);
}


/* Featured leadership section */

.team-page.theme-active .featured-leadership{
    background:var(--theme-page-bg);
}

.team-page.theme-active .leadership-section-heading h2{
    color:var(--theme-primary);
}


/* Featured leader */

.team-page.theme-active .featured-leader{
    background:
        linear-gradient(
            145deg,
            var(--theme-strong),
            color-mix(in srgb,var(--theme-strong) 76%,var(--theme-page-bg))
        );
    box-shadow:0 22px 55px var(--theme-shadow);
}

.team-page.theme-active .featured-leader-content{
    color:var(--theme-strong-text);
}

.team-page.theme-active .featured-leader-content .eyebrow,
.team-page.theme-active .leader-fact strong,
.team-page.theme-active .featured-career-heading span,
.team-page.theme-active .featured-career-item > span{
    color:var(--theme-accent-text);
}

.team-page.theme-active .featured-leader-content > h2,
.team-page.theme-active .featured-career-item strong{
    color:var(--theme-strong-text);
}

.team-page.theme-active .featured-leader-intro,
.team-page.theme-active .leader-fact span,
.team-page.theme-active .featured-career-item small{
    color:var(--theme-strong-muted);
}

.team-page.theme-active .leader-facts,
.team-page.theme-active .leader-fact,
.team-page.theme-active .featured-career-item{
    border-color:var(--theme-strong-border);
}


/* Executive leadership */

.team-page.theme-active .executive-leadership{
    background:var(--theme-page-alt);
}

.team-page.theme-active .executive-heading h2{
    color:var(--theme-primary);
}

.team-page.theme-active .executive-heading > p{
    color:var(--theme-muted);
}

.team-page.theme-active .executive-card{
    background:var(--theme-surface);
    border-color:var(--theme-border);
}

.team-page.theme-active .executive-card:hover{
    border-color:color-mix(in srgb,var(--gold) 48%,var(--theme-border));
    box-shadow:0 20px 45px var(--theme-shadow);
}

.team-page.theme-active .executive-content h3,
.team-page.theme-active .executive-detail > strong,
.team-page.theme-active .executive-detail li strong{
    color:var(--theme-primary);
}

.team-page.theme-active .executive-bio,
.team-page.theme-active .executive-detail > small,
.team-page.theme-active .executive-detail li small{
    color:var(--theme-muted);
}

.team-page.theme-active .executive-divider,
.team-page.theme-active .executive-detail ul,
.team-page.theme-active .executive-detail li{
    border-color:var(--theme-border);
}

.team-page.theme-active .executive-divider{
    background:var(--theme-border);
}

.team-page.theme-active .executive-role,
.team-page.theme-active .executive-detail > span{
    color:var(--theme-accent-text);
}