/*========================================*
* THE GOLD MERIDIAN GROUP
* GROUP PAGE VARIABLES
*========================================*/

:root{
    --group-off-white:#F8F8F8;
    --group-gray:#4A4A4A;
    --group-border:rgba(0,0,0,.06);
}


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

.group-hero{
    position:relative;

    width:100%;
    min-height:88vh;

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

    overflow:hidden;
    isolation:isolate;

    background:var(--midnight-black);
}

.group-hero-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    z-index:-3;

    filter:
        brightness(.58)
        contrast(1.08)
        saturate(.92);
}

.group-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.56),
            rgba(0,0,0,.82)
        );

    z-index:-2;
}

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

    position:absolute;

    left:50%;
    bottom:-140px;

    width:560px;
    height:280px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(184,134,11,.16),
            transparent 70%
        );

    pointer-events:none;
}

.group-hero .container{
    position:relative;
    z-index:2;
}

.group-hero-content{
    max-width:850px;

    margin:0 auto;

    text-align:center;

    color:var(--white);
}

.group-hero-content .section-label{
    display:inline-block;
    margin-bottom:18px;
}

.group-hero-content h1{
    margin-bottom:24px;

    font-size:clamp(
        3rem,
        6vw,
        5.2rem
    );

    line-height:1.08;
    letter-spacing:.5px;

    text-shadow:
        0 8px 25px rgba(0,0,0,.45);
}

.group-hero-content p{
    max-width:720px;

    margin:0 auto 36px;

    color:#E7E7E7;

    font-size:1.1rem;
    line-height:1.85;
}

.group-hero-actions{
    display:flex;

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

    gap:16px;

    flex-wrap:wrap;
}

.group-hero-actions .btn-primary,
.group-hero-actions .btn-secondary{
    min-width:195px;
}


/*========================================*
* GROUP OVERVIEW
*========================================*/

#group-overview{
    padding:120px 0;

    background:var(--white);
}

.group-overview-grid{
    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:5rem;

    align-items:center;
}

.group-overview-content h2{
    color:var(--midnight-black);

    font-size:clamp(
        2.3rem,
        4vw,
        3.2rem
    );

    line-height:1.2;

    margin:18px 0 25px;
}

.group-overview-content p{
    color:var(--group-gray);

    font-size:1rem;
    line-height:1.9;

    margin-bottom:18px;
}

.group-overview-image{
    overflow:hidden;

    border-radius:24px;

    background:#202020;

    box-shadow:
        0 25px 60px rgba(0,0,0,.13);
}

.group-overview-image img{
    width:100%;
    height:auto;

    display:block;

    transition:
        transform .5s ease;
}

.group-overview-image:hover img{
    transform:scale(1.04);
}


/*========================================*
* WHAT WE DO
*========================================*/

#what-we-do{
    padding:110px 0 120px;

    background:var(--group-off-white);
}

.group-focus-grid{
    display:grid;

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

    gap:2rem;

    margin-top:50px;
}

.group-focus-card{
    position:relative;

    padding:2.5rem 2rem;

    background:var(--white);

    border:1px solid var(--group-border);

    border-radius:22px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.07);

    transition:var(--transition);
}

.group-focus-card:hover{
    transform:translateY(-8px);

    border-color:
        rgba(184,134,11,.28);

    box-shadow:
        0 25px 55px rgba(0,0,0,.12);
}

.group-focus-icon{
    width:68px;
    height:68px;

    margin-bottom:22px;

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

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(184,134,11,.14),
            rgba(184,134,11,.05)
        );

    color:var(--primary-gold);

    font-size:1.5rem;
}

.group-focus-number{
    display:block;

    margin-bottom:10px;

    color:var(--primary-gold);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:1px;
}

.group-focus-card h3{
    color:var(--midnight-black);

    font-size:1.4rem;
    line-height:1.3;

    margin-bottom:14px;
}

.group-focus-card p{
    color:var(--group-gray);

    line-height:1.8;

    margin-bottom:22px;
}

.group-focus-link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary-gold);

    font-size:.9rem;
    font-weight:700;

    text-decoration:none;

    transition:var(--transition);
}

.group-focus-link i{
    transition:transform .3s ease;
}

.group-focus-link:hover{
    color:var(--dark-gold);
}

.group-focus-link:hover i{
    transform:translateX(5px);
}


/*========================================*
* GROUP ECOSYSTEM
*========================================*/

#group-ecosystem{
    padding:120px 0;

    background:var(--white);
}

.ecosystem-layout{
    position:relative;

    min-height:650px;

    max-width:900px;

    margin:70px auto 0;
}

.ecosystem-center{
    position:absolute;

    top:50%;
    left:50%;

    width:260px;
    height:260px;

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

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(184,134,11,.12),
            rgba(184,134,11,.03)
        );

    border:1px solid
        rgba(184,134,11,.28);

    box-shadow:
        0 25px 70px rgba(0,0,0,.10);
}

.ecosystem-center::before{
    content:"";

    position:absolute;
    inset:-16px;

    border:1px dashed
        rgba(184,134,11,.25);

    border-radius:50%;
}

.ecosystem-center-inner{
    position:relative;

    width:180px;
    height:180px;

    display:flex;
    flex-direction:column;

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

    text-align:center;
}

.ecosystem-center-inner img{
    width:85px;
    height:auto;

    margin-bottom:15px;
}

.ecosystem-center-inner span{
    max-width:140px;

    color:var(--midnight-black);

    font-size:.9rem;
    font-weight:700;

    line-height:1.4;
}


/* Connection lines */

.ecosystem-layout::before,
.ecosystem-layout::after{
    content:"";

    position:absolute;

    background:
        rgba(184,134,11,.18);

    z-index:0;
}

.ecosystem-layout::before{
    top:50%;
    left:18%;
    right:18%;

    height:1px;
}

.ecosystem-layout::after{
    top:18%;
    bottom:18%;
    left:50%;

    width:1px;
}


/* Ecosystem nodes */

.ecosystem-node{
    position:absolute;

    width:190px;
    min-height:150px;

    padding:24px 18px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    background:var(--group-off-white);

    border:1px solid var(--group-border);

    border-radius:20px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.07);

    z-index:2;

    transition:var(--transition);
}

.ecosystem-node:hover{
    transform:translateY(-6px);

    border-color:
        rgba(184,134,11,.28);

    box-shadow:
        0 22px 45px rgba(0,0,0,.11);
}

.ecosystem-node i{
    margin-bottom:12px;

    color:var(--primary-gold);

    font-size:1.6rem;
}

.ecosystem-node h3{
    margin-bottom:7px;

    color:var(--midnight-black);

    font-size:1.15rem;
}

.ecosystem-node p{
    margin:0;

    color:var(--group-gray);

    font-size:.85rem;
    line-height:1.5;
}

.ecosystem-node-top{
    top:0;
    left:50%;

    transform:translateX(-50%);
}

.ecosystem-node-top:hover{
    transform:translateX(-50%) translateY(-6px);
}

.ecosystem-node-left{
    top:50%;
    left:0;

    transform:translateY(-50%);
}

.ecosystem-node-left:hover{
    transform:translateY(-50%) translateY(-6px);
}

.ecosystem-node-right{
    top:50%;
    right:0;

    transform:translateY(-50%);
}

.ecosystem-node-right:hover{
    transform:translateY(-50%) translateY(-6px);
}

.ecosystem-node-bottom{
    bottom:0;
    left:50%;

    transform:translateX(-50%);
}

.ecosystem-node-bottom:hover{
    transform:translateX(-50%) translateY(-6px);
}


/*========================================*
* GROUP LEADERSHIP
*========================================*/

#group-leadership{
    padding:120px 0;

    background:var(--group-off-white);
}

.group-leadership-grid{
    display:grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:5rem;

    align-items:center;
}

.group-leadership-image{
    overflow:hidden;

    border-radius:24px;

    background:#202020;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}

.group-leadership-image img{
    width:100%;
    height:auto;

    display:block;

    transition:
        transform .5s ease;
}

.group-leadership-image:hover img{
    transform:scale(1.04);
}

.group-leadership-content h2{
    color:var(--midnight-black);

    font-size:clamp(
        2.2rem,
        4vw,
        3.1rem
    );

    line-height:1.2;

    margin:18px 0 24px;
}

.group-leadership-content p{
    color:var(--group-gray);

    line-height:1.9;

    margin-bottom:18px;
}

.leadership-principles{
    display:grid;

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

    gap:12px;

    margin-top:30px;
}

.leadership-principle{
    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 16px;

    border-radius:14px;

    background:var(--white);

    border:1px solid var(--group-border);
}

.leadership-principle i{
    color:var(--primary-gold);
}

.leadership-principle span{
    color:var(--midnight-black);

    font-size:.9rem;
    font-weight:700;
}


/*========================================*
* STRATEGIC VISION
*========================================*/

#group-vision{
    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #1A1A1A,
            #111111
        );
}

.group-vision-wrapper{
    max-width:1000px;

    margin:0 auto;

    text-align:center;

    color:var(--white);
}

.group-vision-wrapper h2{
    max-width:850px;

    margin:18px auto 24px;

    color:var(--white);

    font-size:clamp(
        2.25rem,
        4vw,
        3.3rem
    );

    line-height:1.2;
}

.group-vision-wrapper > p{
    max-width:760px;

    margin:0 auto 50px;

    color:#D5D5D5;

    line-height:1.9;
}

.vision-pillars{
    display:grid;

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

    gap:20px;
}

.vision-pillar{
    padding:30px 22px;

    border:1px solid
        rgba(184,134,11,.18);

    border-radius:20px;

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

    transition:var(--transition);
}

.vision-pillar:hover{
    transform:translateY(-6px);

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

    border-color:
        rgba(184,134,11,.38);
}

.vision-pillar i{
    margin-bottom:15px;

    color:var(--primary-gold);

    font-size:1.8rem;
}

.vision-pillar h3{
    margin-bottom:10px;

    color:var(--white);

    font-size:1.25rem;
}

.vision-pillar p{
    margin:0;

    color:#C9C9C9;

    font-size:.9rem;
    line-height:1.7;
}


/*========================================*
* PARTNERSHIP CTA
*========================================*/

#group-partnership{
    padding:110px 0;

    background:var(--white);
}

.group-partnership-wrapper{
    max-width:900px;

    margin:0 auto;

    text-align:center;
}

.group-partnership-wrapper h2{
    margin:18px 0 22px;

    color:var(--midnight-black);

    font-size:clamp(
        2.2rem,
        4vw,
        3rem
    );

    line-height:1.2;
}

.group-partnership-wrapper p{
    max-width:760px;

    margin:0 auto 32px;

    color:var(--group-gray);

    line-height:1.9;

    font-size:1.05rem;
}

.group-partnership-actions{
    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;
}


/*========================================*
* NEWSLETTER
*========================================*/

#newsletter{
    padding:110px 0;

    background:
        linear-gradient(
            180deg,
            #1A1A1A,
            #111111
        );
}

.group-newsletter-wrapper{
    max-width:900px;

    margin:0 auto;

    padding:5rem 4rem;

    text-align:center;

    border-radius:25px;

    background:
        linear-gradient(
            145deg,
            #202020,
            #171717
        );

    border:1px solid
        rgba(184,134,11,.18);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);
}

.group-newsletter-wrapper h2{
    margin:18px 0 20px;

    color:var(--white);

    font-size:clamp(
        2.2rem,
        4vw,
        3rem
    );
}

.group-newsletter-wrapper p{
    max-width:680px;

    margin:0 auto 32px;

    color:#D5D5D5;

    line-height:1.9;
}

.group-newsletter-form{
    display:flex;

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

    gap:14px;

    flex-wrap:wrap;
}

.group-newsletter-form input{
    flex:1;

    min-width:300px;

    height:60px;

    padding:0 22px;

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

    border-radius:50px;

    background:#2A2A2A;

    color:var(--white);

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

    font-size:1rem;

    outline:none;

    transition:var(--transition);
}

.group-newsletter-form input::placeholder{
    color:#BDBDBD;
}

.group-newsletter-form input:focus{
    border-color:var(--primary-gold);

    box-shadow:
        0 0 18px
        rgba(184,134,11,.22);
}

.group-newsletter-form .btn-primary{
    min-height:60px;

    padding-left:30px;
    padding-right:30px;

    white-space:nowrap;
}


/*========================================*
* GROUP SCROLL REVEAL
*========================================*/

.group-reveal{
    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.group-reveal.show{
    opacity:1;

    transform:translateY(0);
}


/*========================================*
* TABLET — 1024px
*========================================*/

@media (max-width:1024px){

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

    .group-overview-grid{
        gap:3rem;
    }

    .group-leadership-grid{
        gap:3rem;
    }

    .ecosystem-layout{
        max-width:820px;
    }

    .ecosystem-node{
        width:170px;
    }

}


/*========================================*
* TABLET — 768px
*========================================*/

@media (max-width:768px){

    .group-hero{
        min-height:90vh;

        padding:110px 0 80px;
    }

    .group-hero-content{
        max-width:650px;
    }

    .group-hero-content h1{
        font-size:clamp(
            2.35rem,
            8vw,
            3.5rem
        );

        line-height:1.12;
    }

    .group-hero-content p{
        font-size:1rem;

        line-height:1.7;

        margin-bottom:30px;
    }

    .group-hero-actions{
        flex-direction:column;
    }

    .group-hero-actions .btn-primary,
    .group-hero-actions .btn-secondary{
        width:100%;
        max-width:260px;
    }


    .group-overview-grid{
        grid-template-columns:1fr;

        gap:3rem;
    }

    .group-overview-content{
        text-align:center;
    }


    .group-focus-grid{
        grid-template-columns:1fr;

        gap:1.6rem;
    }


    /*
     * The circular ecosystem layout becomes a
     * normal vertical card layout on mobile.
     */

    .ecosystem-layout{
        min-height:0;

        display:grid;

        grid-template-columns:1fr;

        gap:1.2rem;

        margin-top:40px;
    }

    .ecosystem-layout::before,
    .ecosystem-layout::after{
        display:none;
    }

    .ecosystem-center{
        position:relative;

        top:auto;
        left:auto;

        width:220px;
        height:220px;

        transform:none;

        margin:0 auto 15px;
    }

    .ecosystem-center:hover{
        transform:none;
    }

    .ecosystem-node,
    .ecosystem-node-top,
    .ecosystem-node-left,
    .ecosystem-node-right,
    .ecosystem-node-bottom{
        position:relative;

        top:auto;
        left:auto;
        right:auto;
        bottom:auto;

        width:100%;

        min-height:130px;

        transform:none !important;
    }


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

        gap:3rem;
    }

    .group-leadership-content{
        text-align:center;
    }

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


    .vision-pillars{
        grid-template-columns:1fr;

        gap:14px;
    }


    .group-partnership-actions{
        flex-direction:column;

        align-items:center;
    }

    .group-partnership-actions .btn-primary,
    .group-partnership-actions .btn-secondary{
        width:100%;

        max-width:270px;
    }


    .group-newsletter-wrapper{
        padding:3rem 1.5rem;
    }

    .group-newsletter-form{
        flex-direction:column;
    }

    .group-newsletter-form input{
        width:100%;

        min-width:0;
    }

    .group-newsletter-form .btn-primary{
        width:100%;

        max-width:270px;
    }

}


/*========================================*
* SMALL PHONES — 480px
*========================================*/

@media (max-width:480px){

    .group-hero{
        min-height:88vh;

        padding:100px 0 70px;
    }

    .group-hero-content h1{
        font-size:2.15rem;
    }

    .group-hero-content p{
        font-size:.92rem;
    }


    #group-overview,
    #what-we-do,
    #group-ecosystem,
    #group-leadership,
    #group-partnership,
    #group-vision{
        padding-top:80px;
        padding-bottom:80px;
    }


    .group-overview-content h2{
        font-size:2rem;
    }


    .group-focus-card{
        padding:2rem 1.5rem;
    }


    .ecosystem-center{
        width:190px;
        height:190px;
    }

    .ecosystem-center-inner{
        width:150px;
        height:150px;
    }

    .ecosystem-center-inner img{
        width:70px;
    }


    .group-leadership-content h2{
        font-size:2rem;
    }


    .group-vision-wrapper h2{
        font-size:2rem;
    }


    .group-partnership-wrapper h2{
        font-size:2rem;
    }


    .group-newsletter-wrapper{
        padding:2.5rem 1rem;

        border-radius:20px;
    }

    .group-newsletter-wrapper h2{
        font-size:1.85rem;
    }

}

/* ========================================
   GROUP HERO PARTNER BUTTON
======================================== */

.group-partner-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:195px;
    min-height:52px;

    padding:14px 30px;

    background:rgba(255,255,255,.08);
    color:#FFFFFF;

    border:2px solid rgba(255,255,255,.8);
    border-radius:50px;

    font-family:var(--body-font);
    font-size:.95rem;
    font-weight:600;
    line-height:1;

    text-decoration:none;

    cursor:pointer;

    backdrop-filter:blur(6px);

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

.group-partner-btn:hover{
    background:#FFFFFF;
    color:var(--midnight-black);

    border-color:#FFFFFF;

    transform:translateY(-2px);
}