/*
Theme Name: SGAL Custom
Theme URI: https://satinaif.com/
Author: SGAL
Description: Custom single-page WordPress theme recreating the SGAL site design without Elementor.
Version: 1.0.0
*/

:root{
    --green:#0f2d20;
    --green-2:#1c4a38;
    --green-3:#071812;
    --gold:#c8a96a;
    --gold-2:#e5c97a;
    --cream:#faf8f2;
    --cream-2:#f4ede4;
    --card:#f7f0e3;
    --ink:#1c1917;
    --muted:#78716c;
    --white:#fff;
    --display:"Roboto Slab", Georgia, serif;
    --body:"Roboto", Arial, sans-serif;
    --ease:cubic-bezier(.2,1,.22,1);
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:var(--body);
    color:var(--ink);
    background:#fff;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

body.modal-open{overflow:hidden}

img{max-width:100%;height:auto}

a{color:inherit}

button,input,textarea{font:inherit}

button{cursor:pointer}

.container{
    width:min(1240px,calc(100% - 48px));
    margin-inline:auto;
}

.section{
    width:100%;
    padding:70px 24px;
}

.section-inner{
    width:min(1240px,100%);
    margin-inline:auto;
}

.section-head{
    text-align:center;
    margin-bottom:46px;
}

.eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:18px;
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    letter-spacing:.32em;
    line-height:1.4;
    text-transform:uppercase;
}

.eyebrow::before,
.eyebrow::after{
    content:"";
    display:block;
    width:44px;
    height:1px;
}

.eyebrow::before{background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}

.section-title{
    margin:0;
    font-family: var(--font-display,serif);
    font-size:clamp(42px,5vw,72px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.03em;
}

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

.site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    height:84px;
    color:#fff;
    background:linear-gradient(180deg,rgba(7,24,18,.62),rgba(7,24,18,.08));
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease;
}

.site-header.is-scrolled{
    background:rgba(7,24,18,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.header-container{
    width:min(1280px,calc(100% - 48px));
    height:84px;
    margin:auto;
    margin-top: 10px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
}

.site-logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.site-logo img{
    width:auto;
    height:40px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.site-logo-fallback{
    display:none;
    color:#fff;
    font-family:var(--display);
    font-size:22px;
    font-weight:900;
    letter-spacing:-.04em;
}

.main-navigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.main-navigation a{
    position:relative;
    padding:11px 14px;
    color:rgba(255,255,255,.86);
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    border-radius:999px;
    transition:color .25s ease,background .25s ease;
}

.main-navigation a:hover{
    color:#fff;
    background:rgba(255,255,255,.07);
}

/* Active menu item */
.main-navigation a.active{
    color:#c8a96a !important;
}

.header-linkedin{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(200,169,106,.35);
    border-radius:50%;
    color:var(--gold-2);
    text-decoration:none;
    font-size:13px;
    font-weight:900;
}

.mobile-menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:9px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px;
    background:rgba(255,255,255,.06);
}

.mobile-menu-toggle span{
    display:block;
    width:24px;
    height:2px;
    margin:5px auto;
    background:#fff;
    transition:transform .3s ease,opacity .3s ease;
}

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

.hero-slider{
    position:relative;
    min-height:710px;
    height:710px;
    width:100%;
    overflow:hidden;
    background:#071812;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.035);
    background-size:cover;
    background-position:center;
    transition:opacity 700ms cubic-bezier(.22,1,.36,1),
               transform 900ms cubic-bezier(.22,1,.36,1);
}

.hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(7,24,18,.08) 0%,rgba(7,24,18,.02) 40%,rgba(7,24,18,.30) 100%);
}

.hero-slide.is-active{
    opacity:1;
    transform:scale(1);
}

.hero-panel{
    position:absolute;
    z-index:2;
    left:13%;
    right:13%;
    bottom:32px;
    padding:20px;
    text-align:center;
    color:#fff;
    background:rgba(15,45,32,.96);
    box-shadow:0 24px 60px rgba(0,0,0,.22);
}

.hero-panel h1{
    margin:0;
    font-family:var(--font-display,serif);
    font-size:clamp(28px,2.6vw,42px);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.01em;
}

.hero-panel p{
    max-width:850px;
    margin:14px auto 0;
    color:rgba(255,255,255,.8);
    font-size:15px;
    line-height:1.65;
}

.hero-legacy{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:14px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    font-style: italic;
}

.hero-legacy:hover{color:var(--gold-2)}

.hero-dots{
    position:absolute;
    z-index:4;
    bottom:17px;
    left:50%;
    display:flex;
    gap:7px;
    transform:translateX(-50%);
}

.hero-dot{
    width:28px;
    height:3px;
    padding:0;
    border:0;
    background:rgba(255,255,255,.3);
}

.hero-dot.is-active{background:var(--gold-2)}

/* =========================================================
   ABOUT
========================================================= */

.about{
    padding:70px 24px 80px;
    background:#fff;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:18px;
    max-width:1280px;
    margin:auto;
}

.stat-card{
    min-height:180px;
    padding:26px 22px;
    overflow:hidden;
    border-radius:24px;
    background:linear-gradient(#f7f0e3,#f1eadc);
    box-shadow:0 18px 34px rgba(15,45,32,.06);
    opacity:0;
    transform:translateY(18px);
    transition:opacity 520ms ease,transform 620ms var(--ease),box-shadow 260ms ease;
}

.stat-card.is-visible{
    opacity:1;
    transform:translateY(0);
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 42px rgba(15,45,32,.10);
}

.stat-label{
    margin:0 0 20px;
    color:var(--gold);
    font-size:11px;
    font-weight:700;
    letter-spacing:.22em;
    line-height:1.4;
    text-transform:uppercase;
}

.stat-value{
    margin:0;
    color:var(--ink);
    font-size:clamp(22px,1.35vw,30px);
    font-weight:800;
    line-height:1.22;
    letter-spacing:-.01em;
}

.stat-note{
    margin:14px 0 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.45;
}

/* =========================================================
   DIFFERENTIATED APPROACH
========================================================= */

.approach{
    background:#faf8f2;
    padding:64px 24px 72px;
    overflow:visible;
}

.approach .section-inner{
    width:min(1240px,100%);
    margin:0 auto;
}

/* Heading */

.approach .section-head{
    margin-bottom:28px;
}

.approach .eyebrow{
    margin-bottom:14px;
    color:#d7bd73;
    font-size:12px;
    letter-spacing:.18em;
}

.approach .eyebrow::before,
.approach .eyebrow::after{
    width:32px;
}

.approach .section-title{
    color:#1c1917;
    font-size:clamp(36px,4.5vw,56px);
    line-height:1.08;
    letter-spacing:-.025em;
}

/* Main framework */

.approach-box{
    position:relative;
    width:min(100%, 1240px);
    margin:28px auto 0;

    padding:32px 32px 38px;

    background:linear-gradient(
        180deg,
        #fcf8f1 0%,
        #f3ecdf 100%
    );

    border:1px solid rgba(28,74,56,.10);
    border-radius:32px;

    box-shadow:
        0 28px 60px rgba(15,45,32,.08),
        inset 0 1px rgba(255,255,255,.78);

    box-sizing:border-box;
}

.map-shell{
    position:relative;
    width:100%;
    min-height:548px;
    margin:0;
}


/* Central vertical line */

.map-line{
    position:absolute;
    top:-30px;
    bottom:-30px;
    left:50%;
    width:1px;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(200,169,106,.35) 8%,
            #d7bd73 50%,
            rgba(200,169,106,.35) 92%,
            transparent 100%
        );
    transform:translateX(-50%);
}

/* Individual item */

.map-point{
    position:absolute;
    left:0;
    right:0;
    min-height:64px;

    opacity:0;
    transform:translateY(18px);

    transition:
        opacity 650ms ease,
        transform 700ms cubic-bezier(.2,1,.22,1);
}

.map-point.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* Vertical positions */

.map-point:nth-child(2){top:0;}
.map-point:nth-child(3){top:78px;}
.map-point:nth-child(4){top:156px;}
.map-point:nth-child(5){top:234px;}
.map-point:nth-child(6){top:312px;}
.map-point:nth-child(7){top:390px;}
.map-point:nth-child(8){top:468px;}

/* Left / right card positions */

.map-point.left .map-card{
    margin-right:calc(50% + 42px);
}

.map-point.right .map-card{
    margin-left:calc(50% + 260px);
}

/* Card */

.map-card{
    position:relative;

    width:min(315px,calc(50% - 55px));

    padding:.8rem 1rem .82rem;

    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #0f2d20 0%,
            #174431 100%
        );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 10px 22px rgba(15,45,32,.13);

    transition:
        background .35s ease,
        transform .35s cubic-bezier(.2,1,.22,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

/* Hover */

.map-card:hover{
    background:
        linear-gradient(
            135deg,
            #a8893a 0%,
            #c8a96a 100%
        );

    /* transform:translateY(-3px); */

    border-color:rgba(255,255,255,.18);

    box-shadow:
        0 14px 30px rgba(120,90,30,.20);
}

/*
 * Active card
 *
 * This is what the original SGAL animation uses:
 * one card becomes gold while the others remain green.
 */

.map-point.is-active .map-card{
    background:linear-gradient(#b49256fa,#96763efa);

    box-shadow:
        0 14px 30px rgba(120,90,30,.20);
}

/* Number */

.map-kicker{
    margin:0 0 3px;

    color:#e5c97a;

    font-size:0.62em;
    font-weight:800;

    letter-spacing:.16em;
    line-height:1.2;
}

/* When active/hovered, number becomes white */

.map-card:hover .map-kicker,
.map-point.is-active .map-kicker{
    color:#fff;
}

/* Title */

.map-title{
    margin:0;

    color:#fff;

    font-size:0.96em;
    font-weight:800;

    line-height:1.25;
}

/* Description */

.map-copy{
    margin:3px 0 0;

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

    font-size:0.74em;
    line-height:1.35;
}

.map-card:hover .map-copy,
.map-point.is-active .map-copy{
    color:rgba(255,255,255,.9);
}

/* Horizontal connector */

.map-stem{
    position:absolute;

    top:50%;

    width:301px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(200,169,106,.15),
            #d7bd73
        );

    transform:translateY(-50%);

    transition:
        width .35s ease,
        background .35s ease;
}

.map-card::after{
    content:"";
    position:absolute;

    top:50%;

    width:16px;
    height:16px;

    background:linear-gradient(135deg,#0f2d20 0%,#174431 100%);

    transform:translateY(-50%) rotate(45deg);

    z-index:0;

    transition:
        background .30s ease,
        transform .30s ease;
}


/* Diamond on LEFT cards */
.map-point.left .map-card::after{
    right:-8px;
}


/* Diamond on RIGHT cards */
.map-point.right .map-card::after{
    left:-8px;
}


/* Gold diamond when card is hovered */
.map-card:hover::after{
    background:#e5c97a85;
}


/* Gold diamond when card is active */
.map-point.is-active .map-card::after{
    background:linear-gradient(#b49256fa,#96763efa);
    transition:background .30s ease;
}


/* Keep card text above the diamond */
.map-card > *{
    position:relative;
    z-index:1;
}


/* Left card connector */

.map-point.left .map-stem{
    left:calc(50% - 301px);
}

/* Right card connector */

.map-point.right .map-stem{
    right:calc(50% - 301px);

    background:
        linear-gradient(
            90deg,
            #d7bd73,
            rgba(200,169,106,.15)
        );
}

/* Connector reacts to hover */

.map-point:hover .map-stem{
    width:301px;
}

/* Central node */

.map-node{
    position:absolute;

    top:50%;
    left:50%;

    width:10px;
    height:10px;

    border:1.5px solid #d7bd73;

    border-radius:50%;

    background:#faf8f2;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 0 4px rgba(215,189,115,.08);

    z-index:3;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

/* Active node */

.map-point.is-active .map-node,
.map-point:hover .map-node{
    background:#133628;

    /* transform:translate(-50%,-50%) scale(1.35); */

    box-shadow:
        0 0 0 5px rgba(200,169,106,.14);
}



/* =========================================================
   JOURNEY
========================================================= */

.journey{
    position:relative;
    min-height:640px;
    height:640px;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(
        180deg,
        #071812 0%,
        #0d2218 40%,
        #0a1e16 100%
    );
}

.journey::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(7,24,18,.84),
            rgba(7,24,18,.84)
        ),
        url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=2000&q=70");
    background-size:cover;
    background-position:center 70%;
    opacity:.18;
}

.journey-track-wrap{
    position:relative;
    z-index:2;
    height:470px;
    overflow:hidden;
    margin-top:0;
}

.journey-track{
    position:absolute;
    top:100px;
    left:0;
    display:flex;
    align-items:flex-start;
    height:280px;
    width:max-content;
    will-change:transform;
}

.journey-node{
    width:400px;
    flex:0 0 400px;

    display:flex;
    flex-direction:column;
    align-items:center;

    will-change:transform, opacity;
    transform-origin:center center;

    transition:opacity .2s ease;
}

.journey-pin{
    width:150px;
    padding:16px 18px;

    text-align:center;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #fffdf8,
            #f3ecdf
        );

    box-shadow:
        0 16px 32px rgba(0,0,0,.16);

    transition:
        box-shadow .3s ease;
}

.journey-date{
    display:block;

    color:var(--gold);

    font-size:11px;
    font-weight:700;

    letter-spacing:.1em;
    text-transform:uppercase;
}

.journey-name{
    display:block;

    margin-top:10px;

    color:var(--green);

    font-size:15px;
    font-weight:700;

    line-height:1.4;
}

.journey-stem{
    width:2px;
    height:64px;

    margin-top:21px;

    background:
        linear-gradient(
            to bottom,
            rgba(200,169,106,.75),
            rgba(200,169,106,.08)
        );
}

.journey-node-dot{
    width:46px;
    height:46px;

    border:5px solid rgba(200,169,106,.8);
    border-radius:50%;

    background:rgba(200,169,106,.07);

    box-shadow:
        0 0 20px rgba(200,169,106,.28);
}


/* Highlight the milestone closest to the centre */

.journey-node.is-center .journey-pin{
    box-shadow:
        0 20px 40px rgba(0,0,0,.24),
        0 0 0 1px rgba(200,169,106,.25);
}

.journey-node.is-center .journey-node-dot{
    background:rgba(200,169,106,.22);

    box-shadow:
        0 0 28px rgba(200,169,106,.55);
}


/* Mobile */

@media (max-width:767px){

    .journey{
        min-height:560px;
        height:560px;
    }

    .journey-track-wrap{
        height:390px;
    }

    .journey-track{
        top:90px;
    }

    .journey-node{
        width:280px;
        flex-basis:280px;
    }

    .journey-pin{
        width:140px;
        padding:14px 16px;
    }

    .journey-name{
        font-size:14px;
    }

    .journey-stem{
        height:50px;
        margin-top:16px;
    }

    .journey-node-dot{
        width:38px;
        height:38px;
        border-width:4px;
    }
}

/* =========================================================
   OFFERINGS
========================================================= */

.offerings{
    background:#fff;
}

.offerings-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    max-width:1100px;
    margin:auto;
}

.solution-card{
    min-height:224px;
    perspective:1400px;
}

.solution-card-inner{
    position:relative;
    width:100%;
    height:100%;
    min-height:224px;
    transform-style:preserve-3d;
    transition:transform .72s var(--ease);
}

.solution-card:hover .solution-card-inner,
.solution-card.is-flipped .solution-card-inner{
    transform:rotateY(180deg);
}

.solution-face{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
    overflow:hidden;
    border-radius:28px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.solution-front{
    background:linear-gradient(180deg,#fbf6ec,#f2e9db);
    border:1px solid rgba(200,169,106,.18);
    box-shadow:0 18px 36px rgba(15,45,32,.06);
}

.solution-back{
    color:#fff;
    background:linear-gradient(135deg,var(--green),var(--green-2));
    transform:rotateY(180deg);
}

.solution-title{
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
    color: #17382a;
}

.solution-back .solution-title{color:#fff}

.solution-copy{
    margin:14px 0 0;
    color:rgba(255,255,255,.76);
    font-size:14.5px;
    line-height:1.65;
}

/* =========================================================
   PRINCIPLES
========================================================= */

.principles{
    position:relative;
    overflow:hidden;
    padding:92px 24px 112px;
    color:#fff;
    background:var(--green);
}

.principles-bg{
    position:absolute;
    inset:0;
    background:url("https://satinaif.com/wp-content/uploads/2026/04/principle.png") center/cover no-repeat;
    transform:translateY(40px) scale(1.06);
    opacity:.78;
    filter:saturate(1) brightness(1);
    transition:transform 1.15s var(--ease),opacity .95s ease;
}

.principles-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(8,18,14,.18),rgba(8,18,14,.58));
}

.principles-content{
    position:relative;
    z-index:2;
    width:min(1100px,100%);
    margin:auto;
    opacity:0;
    transform:translateY(36px);
    transition:opacity .85s ease,transform .95s var(--ease);
}

.principles.is-visible .principles-bg{
    transform:translateY(0) scale(1.03);
    opacity:1;
}

.principles.is-visible .principles-content{
    opacity:1;
    transform:none;
}

.principles-cards{
    display:flex;
    justify-content:center;
    gap:10rem;
    flex-wrap:wrap;
}

.principle-card{
    position:relative;
    width:min(100%,384px);
    padding:35px 32px 32px;
    border:1px solid rgba(205,177,121,.34);
    border-radius:30px;
    background:linear-gradient(180deg,#f4ede4,#efe4d1);
    box-shadow:0 24px 50px rgba(14,28,22,.18),inset 0 1px 0 rgba(255,255,255,.72);
    opacity:0;
    overflow:hidden;
}

.principle-card.from-left{transform:translateX(-110vw) scale(.96)}
.principle-card.from-right{transform:translateX(110vw) scale(.96)}

.principle-card.is-visible{
    opacity:1;
    transform:translateX(0) scale(1);
    transition:opacity 2.4s cubic-bezier(.22,1,.36,1),
               transform 2.4s cubic-bezier(.22,1,.36,1);
}

.principle-card h3{
    margin:0 0 18px;
    color:#173325;
    font-family:var(--font-display, serif);
    font-size:clamp(25px,2vw,31px);
    font-weight:700;
    line-height:1.1;
}

.principle-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.principle-card li{
    position:relative;
    padding-left:20px;
    color:rgba(23,51,37,.86);
    font-size:0.97rem;
    line-height:1.75;
}

.principle-card li+li{margin-top:11px}

.principle-card li::before{
    content:"";
    position:absolute;
    top:.72rem;
    left:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold-2);
    box-shadow:0 0 0 3px rgba(229,201,122,.12);
}

/* =========================================================
   TEAM
========================================================= */

.team{
    background:#fff;
}

.team-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    min-width: 200px;
    margin:0 auto 42px;
    padding: 1rem 1.5rem;
    overflow:hidden;
    border-radius:18px;
    background:linear-gradient(135deg,var(--green),var(--green-2));
}

.team-stat{
    padding:20px;
    text-align:center;
    color:#fff;
}

.team-stat+.team-stat{border-left:1px solid rgba(255,255,255,.12)}

.team-stat strong{
    display:block;
    color:var(--gold-2);
    font-size:2em;
    font-family: var(--font-display,serif);
}

.team-stat span{
    display: block;
    margin-top: 0.5em;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
}

/* =========================================================
   PEOPLE BEHIND SGAL - TWO ROW GRIDS
========================================================= */

.team-grid{
    display:grid;
    /* grid-template-columns:repeat(3, minmax(0, 1fr)); */
    gap:22px;
    max-width:1500px;
    margin:0 auto;
}


/* First row - Director + Partner */
.team-grid-top{
    margin-bottom:24px;
}

.team-grid-top .team-card:first-child{
    grid-column:1;
}

.team-grid-top .team-card:nth-child(2){
    grid-column:3;
}


/* Second row - Freya + 2 role cards */
.team-grid-bottom{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.team-card,
.role-card{
    display:flex;
    flex-direction:column;
    min-height:500px;
    overflow:hidden;
    border:2px solid var(--green-2);
    border-radius:28px;
    background:#fff;
    box-shadow:0 18px 36px rgba(15,45,32,.06);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 520ms ease,transform 620ms var(--ease),box-shadow 260ms ease;
}

.team-card.is-visible,
.role-card.is-visible{
    opacity:1;
    transform:none;
}

.team-card:hover,
.role-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 50px rgba(15,45,32,.12);
}

.team-card-head{
    display:flex;
    align-items:stretch;
    background:linear-gradient(135deg,var(--green),var(--green-2));
}

.team-card-name{
    flex:1;
    padding:20px 24px;
}

.team-card-name h3{
    margin:0;
    color:#fff;
    font-size:22px;
    font-weight:800;
    line-height:1.2;
}

.team-card-name p{
    margin:7px 0 0;
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.team-photo-wrap{
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #fff;
}

.team-photo{
    width:90px;
    height:90px;
    border:3px solid rgba(200,169,106,.4);
    border-radius:12px;
    object-fit:cover;
    object-position:top center;
}

.team-list{
    margin:0;
    padding:24px 24px 12px;
    list-style:none;
    display:grid;
    gap:13px;
}

.team-list li{
    display:flex;
    gap:13px;
    color:#57534e;
    font-size:.95rem;
    line-height:1.65;
}

.team-list li::before{
    content:"";
    flex:0 0 6px;
    width:6px;
    height:6px;
    margin-top:.65em;
    border-radius:50%;
    background:var(--green-2);
}

.previous{
    margin-top:auto;
    padding:16px 24px 20px;
    border-top:1px solid #f0ede8;
}

.previous-label{
    margin-bottom:12px;
    color:#9a7b46;
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.logo-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
}

.logo-box{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    border:1px solid rgba(200,169,106,.28);
    border-radius:12px;
    background:#fff;
}

.logo-box img{
    max-width:100%;
    max-height:27px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.role-card{
    min-height:360px;
}

.role-card .role-head{
    padding:20px 24px;
    background:linear-gradient(135deg,var(--green),var(--green-2));
}

.role-card .role-head h3{
    margin:0;
    color:#fff;
    font-size:18px;
}

.role-card .role-head p{
    margin:6px 0 0;
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.role-card .role-copy{
    flex:1;
    display:grid;
    place-items:center;
    padding:32px;
    text-align:center;
    color:#57534e;
    font-size:15px;
    font-weight:600;
    line-height:1.7;
}

/* =========================================================
   INSIGHTS
========================================================= */

.insights{
    background:#fff;
}

.news-heading,
.insight-heading{
    margin:0 0 24px;
    padding:18px 28px;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(135deg,var(--green),var(--green-2));
    font-size:24px;
    font-weight:800;
}

.insight-heading{margin-top:64px}

.news-grid,
.insight-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.news-card,
.insight-card{
    display:block;
    overflow:hidden;
    text-decoration:none;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 480ms ease,transform 560ms var(--ease),box-shadow 260ms ease;
}

.news-card.is-visible,
.insight-card.is-visible{
    opacity:1;
    transform:none;
}

.news-card{
    border:1px solid rgba(200,169,106,.18);
    border-radius:28px;
    background:linear-gradient(145deg,var(--green),var(--green-2));
}

.news-card:hover,
.insight-card:hover{
    transform:translateY(-5px);
}

.news-image{
    height:210px;
    background-size:cover;
    background-position:center;
    border-bottom:1px solid rgba(200,169,106,.12);
}

.news-copy{
    padding:24px;
    color:var(--gold);
    font-size:16px;
    font-weight:700;
    line-height:1.5;
}

.insight-card{
    min-height:132px;
    display:flex;
    border:1px solid #e7e5e4;
    border-radius:28px;
    background:#fff;
    box-shadow:0 16px 36px rgba(15,45,32,.06);
}

.insight-image{
    width:180px;
    flex:0 0 180px;
    background-size:cover;
    background-position:center;
}

.insight-copy{
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content:space-between;
    padding:24px;
}

.insight-copy strong{
    color:var(--ink);
    font-size:17px;
    line-height:1.45;
}

.insight-copy span{
    margin-top:16px;
    color:var(--gold);
    font-size:13px;
    font-weight:800;
}

/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio{
    background:#fafaf9;
}

.portfolio-image-wrap{
    overflow:hidden;
    border:1px solid rgba(28,74,56,.1);
    border-radius:32px;
    background:#fff;
    box-shadow:0 20px 60px rgba(15,45,32,.08);
}

.portfolio-image{
    display:block;
    width:100%;
    opacity:0;
    transform:scale(1.035);
    transition:opacity 700ms ease,transform 900ms var(--ease),filter 400ms ease;
}

.portfolio-image.is-visible{
    opacity:1;
    transform:scale(1);
}

.portfolio-image:hover{
    transform:scale(1.025);
    filter:saturate(1.05);
}

/* =========================================================
   CONTACT
========================================================= */

.contact-form-wrap form.wpcf7-form{
    display:grid;
    /* gap:16px; */
}


.contact{
    padding:70px 24px 36px;
    color:#fff;
    background:var(--green);
}

.contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:32px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-card{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:24px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.06);
}

.contact-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(200,169,106,.3);
    border-radius:12px;
    color:var(--gold);
    background:rgba(200,169,106,.15);
    font-weight:800;
}

.contact-card strong{
    display:block;
    margin-bottom:6px;
    color:var(--gold);
    font-size:12px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.contact-card a,
.contact-card p{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.7;
    text-decoration:none;
}

.contact-form-wrap{
    padding:28px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:32px;
    background:rgba(255,255,255,.06);
}

.contact-form{
    display:grid;
    gap:16px;
}

.contact-form-wrap .wpcf7-form-control-wrap{
    display:block;
}

.contact-form-wrap .wpcf7-form-control{
    width:100%;
}

.contact-form-wrap .wpcf7-response-output{
    margin:0 0 16px;
    padding:12px 15px;
    border-radius:12px;
    font-size:14px;
}

.contact-form-wrap .wpcf7 form.sent .wpcf7-response-output{
    color:#dff5e8;
    background:rgba(94,190,127,.12);
    border:1px solid rgba(94,190,127,.25);
}

.contact-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.failed .wpcf7-response-output{
    color:#ffdede;
    background:rgba(210,80,80,.12);
    border:1px solid rgba(210,80,80,.25);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-field label{
    display:block;
    margin-bottom:-10px; 
    color:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:600;
}

.form-field input,
.form-field textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    outline:none;
    background:rgba(255,255,255,.05);
    padding:14px 16px;
    color:#fff;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.form-field textarea{
    min-height:140px;
    resize:vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder{color:rgba(255,255,255,.42)}

.form-field input:focus,
.form-field textarea:focus{
    border-color:rgba(200,169,106,.7);
    box-shadow:0 0 0 3px rgba(200,169,106,.14);
    background:rgba(255,255,255,.07);
}

.submit-btn{
    justify-self:start;
    border:0;
    border-radius:999px;
    padding:14px 24px;
    color:#fff;
    background:linear-gradient(135deg,var(--gold),#a8893a);
    font-weight:800;
    transition:transform .2s ease,box-shadow .2s ease;
}

.submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(200,169,106,.18);
}

.form-message{
    padding:12px 15px;
    border-radius:12px;
    color:#dff5e8;
    background:rgba(94,190,127,.12);
    border:1px solid rgba(94,190,127,.25);
    font-size:14px;
}

.disclaimer,
.policy-box{
    margin-top:48px;
    padding:28px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:32px;
    background:rgba(255,255,255,.04);
}

.policy-box{
    margin-top:32px;
}

.disclaimer h3{
    margin:0 0 16px;
    color:#fff;
    font-size:24px;
}

.disclaimer p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.8;
}

.disclaimer a{
    color:var(--gold-2);
}

.policy-label{
    margin:0 0 16px;
    color:rgba(200,169,106,.75);
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.policy-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.policy-trigger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(200,169,106,.3);
    border-radius:999px;
    padding:11px 20px;
    color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.07);
    font-size:14px;
}

.policy-trigger:hover{
    border-color:rgba(200,169,106,.65);
    color:#fff;
}

.site-footer{
    padding:24px;
    color:rgba(255,255,255,.55);
    background:linear-gradient(135deg,var(--green),var(--green-2));
    border-top:1px solid rgba(200,169,106,.18);
    font-size:13px;
    text-align:center;
}

/* =========================================================
   MODAL
========================================================= */

.policy-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(3,11,8,.74);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
}

.policy-modal.is-open{
    opacity:1;
    visibility:visible;
}

.policy-panel{
    width:min(760px,100%);
    max-height:min(760px,calc(100vh - 48px));
    overflow:auto;
    padding:34px;
    border:1px solid rgba(200,169,106,.25);
    border-radius:22px;
    color:#e8eee9;
    background:linear-gradient(145deg,#0f2d20,#10291e);
    box-shadow:0 30px 90px rgba(0,0,0,.38);
    transform:translateY(14px) scale(.98);
    transition:transform .3s var(--ease);
}

.policy-modal.is-open .policy-panel{
    transform:none;
}

.policy-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.policy-panel h2{
    margin:0;
    color:#fff;
    font-family:var(--font-display, serif);
    font-size:48px;
}

.policy-close{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.06);
    font-size:20px;
}

.policy-body{
    color:rgba(255,255,255,.76);
    font-size:15px;
    line-height:1.8;
}

.policy-body strong{color:#fff}

/* =========================================================
   REVEAL
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 650ms ease,transform 700ms var(--ease);
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){
    .about-grid{gap:12px}
    .stat-card{min-height:150px;padding:20px 14px}
    .stat-label{font-size:9px;letter-spacing:.16em;margin-bottom:14px}
    .stat-value{font-size:clamp(16px,1.45vw,24px)}
    .stat-note{font-size:12px;line-height:1.35}
    .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .role-card{grid-column:span 1}
}

@media(max-width:900px){
    .site-header,.header-container{height:72px}
    .header-container{width:min(100% - 32px,1280px);display:flex;justify-content:space-between}
    .site-logo img{height:34px}
    .main-navigation{
        position:fixed;
        top:80px;
        left:16px;
        right:16px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        padding:14px;
        border:1px solid rgba(255,255,255,.10);
        border-radius:18px;
        background:rgba(7,24,18,.97);
        box-shadow:0 25px 55px rgba(0,0,0,.24);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
    }
    .main-navigation.is-open{
        opacity:1;
        visibility:visible;
        transform:none;
    }
    .main-navigation a{padding:13px 10px}
    .header-linkedin{display:none}
    .mobile-menu-toggle{display:block}
    .mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .mobile-menu-toggle.is-open span:nth-child(2){opacity:0}
    .mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    .hero-slider{min-height:560px;height:560px}
    .hero-panel{left:6%;right:6%;bottom:22px;padding:16px}
    .hero-panel p{font-size:13px}
    .hero-dots{bottom:9px}

    .about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .map-shell{min-height:760px}
    .map-line{left:20px;top:10px;bottom:10px}
    .map-point{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0 0 16px 0;padding-left:52px;transform:none!important;opacity:1}
    .map-card,.map-point.left .map-card,.map-point.right .map-card{width:100%;margin:0}
    .map-node{left:20px;top:28px}
    .map-shell{display:grid;gap:0}
    .offerings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .principles{padding:76px 24px 82px}
    .principles-cards{gap:28px}
    .principle-card{width:100%;max-width:600px}
    .principle-card.from-left,.principle-card.from-right{transform:none}
    .principle-card{opacity:1}
    .principles-content{opacity:1;transform:none}
    .team-grid{grid-template-columns:1fr}
    .news-grid,.insight-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
    .container{width:min(100% - 32px,1240px)}
    .section{padding:56px 16px}
    .section-head{margin-bottom:32px}
    .section-title{font-size:clamp(38px,11vw,58px)}

    .hero-slider{min-height:500px;height:500px}
    .hero-panel{left:0;right:0;bottom:22px;margin-inline:16px}
    .hero-panel h1{font-size:25px}
    .hero-panel p{font-size:12px}
    .hero-slide{background-position:center}

    .about{padding:56px 16px}
    .about-grid{grid-template-columns:1fr}
    .stat-card{min-height:170px;padding:24px 20px}
    .stat-label{font-size:10px}
    .stat-value{font-size:23px}
    .stat-note{font-size:14px}

    .approach{
        padding:58px 16px 64px;
    }

    .approach .section-head{
        margin-bottom:30px;
    }

    .approach .eyebrow{
        margin-bottom:12px;
        font-size:10px;
    }

    .approach .eyebrow::before,
    .approach .eyebrow::after{
        width:22px;
    }

    .approach .section-title{
        font-size:36px;
        line-height:1.08;
    }

    .map-shell{
        min-height:0;
        width:100%;
    }

    .approach-box{
    width:100%;
    margin-top:24px;
    padding:24px 16px 28px;
    border-radius:24px;
}

.map-shell{
    width:100%;
}

    .map-line{
        left:16px;
        top:6px;
        bottom:6px;
    }

    .map-point{
        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;

        margin:0 0 14px;

        padding-left:42px;

        min-height:64px;

        transform:none !important;

        opacity:1;
    }

    .map-point:last-child{
        margin-bottom:0;
    }

    .map-point.left .map-card,
    .map-point.right .map-card{
        width:100%;
        margin:0;
    }

    .map-card{
        width:100%;

        padding:12px 14px;

        border-radius:9px;
    }

    .map-kicker{
        font-size:8px;
    }

    .map-title{
        font-size:11px;
    }

    .map-copy{
        font-size:8.5px;
    }

    .map-node{
        left:16px;
        top:32px;
    }

    .map-stem{
        left:20px !important;
        right:auto !important;
        width:20px;
    }

    .map-point:hover .map-stem{
        width:25px;
    }

    .journey{height:auto;min-height:0;padding-bottom:44px}
    .journey-track-wrap{display:none}
    .journey-mobile{
        position:relative;
        display:grid!important;
        gap:18px;
        padding:26px 16px 0 52px;
    }
    .journey-mobile::before{
        content:"";
        position:absolute;
        top:22px;
        bottom:10px;
        left:26px;
        width:1px;
        background:linear-gradient(180deg,rgba(200,169,106,.15),rgba(200,169,106,.85) 16%,rgba(200,169,106,.45) 84%,rgba(200,169,106,.12));
    }
    .journey-mobile-item{
        position:relative;
        padding:18px;
        border:1px solid rgba(200,169,106,.28);
        border-radius:22px;
        background:linear-gradient(180deg,#fffdf8,#f3ecdf);
        box-shadow:0 16px 32px rgba(0,0,0,.16);
    }
    .journey-mobile-item::before{
        content:"";
        position:absolute;
        left:-31px;
        top:20px;
        width:14px;
        height:14px;
        border:3px solid var(--gold);
        border-radius:50%;
        background:#f6efe3;
        box-shadow:0 0 0 6px rgba(200,169,106,.08);
    }
    .journey-mobile-item span{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
    .journey-mobile-item h3{margin:7px 0 0;color:var(--green);font-size:15px}

    .offerings-grid{grid-template-columns:1fr}
    .solution-card,.solution-card-inner{min-height:190px}

    .team-stats{grid-template-columns:1fr}
    .team-stat+.team-stat{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
    .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .team-card-name h3{font-size:19px}

    .insight-card{flex-direction:column}
    .insight-image{width:100%;flex-basis:180px}
    .news-image{height:170px}

    .form-row{grid-template-columns:1fr}
    .contact-form-wrap{padding:20px}
    .disclaimer,.policy-box{padding:22px;border-radius:24px}
    .policy-panel{padding:24px 18px 22px;border-radius:18px}
}

@media(min-width:768px){
    .journey-mobile{display:none}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

/* Investor navigation and dedicated Annual Return view. */
[hidden]{display:none!important}
.investor-navigation{position:relative}
.investor-toggle{
    display:flex;align-items:center;gap:6px;padding:11px 14px;border:0;
    border-radius:999px;background:transparent;color:rgba(255,255,255,.86);
    font-size:15px;font-weight:700;white-space:nowrap;
    transition:color .25s ease,background .25s ease;
}
.investor-toggle:hover{color:#fff;background:rgba(255,255,255,.07)}
.investor-toggle.active{color:#c8a96a}
.investor-toggle span{font-size:12px}
.investor-submenu{
    position:absolute;top:calc(100% + 8px);left:0;min-width:180px;padding:8px;
    border:1px solid rgba(255,255,255,.1);border-radius:12px;
    background:rgba(7,24,18,.97);box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.investor-submenu a{display:block;white-space:nowrap}
.main-navigation :focus-visible,.annual-return-report:focus-visible{
    outline:2px solid var(--gold);outline-offset:3px;
}
.annual-return-page{padding:130px 24px 64px;min-height:calc(100vh - 64px);background:#fff}
.annual-return-layout{
    width:min(1290px,100%);margin-inline:auto;display:grid;
    grid-template-columns:282px minmax(0,1fr);align-items:start;gap:25px;
}
.annual-return-tab{
    margin:0;padding:18px 19px;border-radius:9px;background:rgba(15,45,32,.96);
    color:#fff;font-family:var(--body);font-size:17px;font-weight:600;line-height:1.2;
}
.annual-return-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:33px;padding-top:0px}
.annual-return-card{display:flex;flex-direction:column;min-width:0;padding:14px 14px 18px;border:1px solid #37916af5;background:#fff}
.annual-return-card img{display:block;width:100%;aspect-ratio:276 / 286;height:auto;object-fit:cover}
.annual-return-card h2{margin:15px 0 19px;color:#4d4d4d;font-family:var(--body);font-size:26px;font-weight:500;line-height:1.3}
.annual-return-report{align-self:flex-start;margin-top:auto;padding:15px 20px;border:0;border-radius:4px;background:#ecf5f1f5;color:#555;font-size:17px;line-height:20px;text-decoration:none}
.annual-return-report:hover:not(:disabled){background:#d3ebe1f5;color:#0f2d20f5}
.annual-return-report:disabled{cursor:not-allowed}
.annual-return-pending{margin-top:10px;color:#68636d;font-size:12px}
@media(min-width:901px) and (max-width:1100px){
    .main-navigation{gap:3px}
    .main-navigation a,.investor-toggle{padding-inline:9px}
}
@media(max-width:1100px){
    .annual-return-layout{grid-template-columns:220px minmax(0,1fr)}
    .annual-return-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(max-width:900px){
    .investor-toggle{width:100%;padding:13px 10px;justify-content:space-between}
    .investor-submenu{position:static;margin:0 10px 8px;box-shadow:none}
    .main-navigation{max-height:calc(100dvh - 100px);overflow-y:auto}
    .annual-return-page{padding-top:110px}
    .annual-return-layout{grid-template-columns:1fr}
    .annual-return-tab{max-width:282px}
    .annual-return-grid{padding-top:0}
}
@media(max-width:600px){
    .annual-return-page{padding:110px 16px 48px}
    .annual-return-grid{grid-template-columns:1fr}
    .annual-return-tab{max-width:none}
}