@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=Playfair+Display:wght@500;600;700&display=swap');

/*
|--------------------------------------------------------------------------
| ROOT
|--------------------------------------------------------------------------
*/

:root{

    --palm-green:#1a4a2e;
    --palm-green-mid:#2d6b45;
    --palm-green-light:#4a9460;

    --palm-gold:#c4922a;
    --palm-gold-light:#e8b84b;

    --palm-cream:#f9f5ec;
    --palm-cream-dark:#ede8d8;

    --palm-dark:#0d2418;

    --text-body:#2c2c28;
    --text-muted:#5a5a50;

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:6rem;
    --space-2xl:8rem;

    --container:1280px;
}



/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

body{

    font-family:'DM Sans',sans-serif;

    background:var(--palm-cream);

    color:var(--text-body);

    overflow-x:hidden;
}

img{

    max-width:100%;

    display:block;
}

a{

    text-decoration:none;

    color:inherit;
}

ul{

    list-style:none;
}



/*
|--------------------------------------------------------------------------
| GLOBAL
|--------------------------------------------------------------------------
*/

.container{

    width:min(var(--container), calc(100% - 3rem));

    margin-inline:auto;
}

.section{

    padding:
        var(--space-2xl) 0;
}

.section-dark{

    background:var(--palm-dark);

    color:white;
}

.section-intro{

    margin-bottom:4rem;
}

.section-tag{

    color:var(--palm-gold);

    font-size:.75rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    margin-bottom:1rem;
}

.section-title{

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(2rem,4vw,3.5rem);

    line-height:1.1;

    max-width:760px;

    margin-bottom:1rem;

    color:var(--palm-dark);
}

.section-dark .section-title{

    color:white;
}



/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.site-header{

    position:fixed;

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

    z-index:1000;

    background:
        rgba(249,245,236,.92);

    backdrop-filter:blur(10px);

    border-bottom:
        1px solid rgba(196,146,42,.12);
}

.header-container{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;
}


/*
|--------------------------------------------------------------------------
| NAVIGATION
|--------------------------------------------------------------------------
*/

.main-nav{

    height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;
}



/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.nav-logo{

    display:flex;

    align-items:center;

    gap:.85rem;

    font-family:
        'Playfair Display',
        serif;

    font-size:1.8rem;

    color:var(--palm-green);

    font-weight:700;
}

/* .logo-leaf{

    width:22px;

    height:22px;

    border-radius:
        50% 0 50% 0;

    background:
        linear-gradient(
            135deg,
            var(--palm-green),
            var(--palm-green-light)
        );

    transform:rotate(45deg);
} */

.logo-leaf {
    width: 28px;
    height: 28px;
    background: var(--palm-green);
    border-radius: 50% 0 50% 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-leaf::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--palm-gold);
    border-radius: 50% 0 50% 0;
    transform: rotate(45deg);
}


/*
|--------------------------------------------------------------------------
| NAV LINKS
|--------------------------------------------------------------------------
*/

.nav-links{

    display:flex;

    align-items:center;

    gap:2rem;
}

.nav-links a{

    color:var(--text-muted);

    font-size:.92rem;

    transition:.2s ease;
}

.nav-links a:hover{

    color:var(--palm-green);
}



/*
|--------------------------------------------------------------------------
| NAV CTA
|--------------------------------------------------------------------------
*/

.nav-cta{

    display:flex;

    align-items:center;

    gap:1rem;
}



/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| BUTTON SYSTEM
|--------------------------------------------------------------------------
*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    padding:
        1rem 1.8rem;

    border-radius:6px;

    font-size:.9rem;

    font-weight:600;

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

    cursor:pointer;
}



/*
|--------------------------------------------------------------------------
| PRIMARY BUTTON
|--------------------------------------------------------------------------
*/

.btn-primary{

    background:
        linear-gradient(
            135deg,
            var(--palm-green),
            var(--palm-green-mid)
        );

    color:white;

    border:
        1px solid transparent;

    box-shadow:
        0 10px 24px rgba(26,74,46,.18);
}

.btn-primary:hover{

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--palm-dark),
            var(--palm-green)
        );

    box-shadow:
        0 16px 30px rgba(26,74,46,.24);
}



/*
|--------------------------------------------------------------------------
| SECONDARY BUTTON
|--------------------------------------------------------------------------
*/

.btn-secondary{

    background:white;

    color:var(--palm-green);

    border:
        1px solid rgba(26,74,46,.12);

    box-shadow:
        0 10px 24px rgba(0,0,0,.04);
}

.btn-secondary:hover{

    transform:
        translateY(-2px);

    background:
        rgba(26,74,46,.04);

    border-color:
        rgba(26,74,46,.22);
}



/*
|--------------------------------------------------------------------------
| NAV BUTTON OVERRIDES
|--------------------------------------------------------------------------
*/

.nav-cta .btn{

    padding:
        .9rem 1.4rem;

    font-size:.82rem;
}




/*
|--------------------------------------------------------------------------
| HEADER ACTIONS
|--------------------------------------------------------------------------
*/



.header-login{

    font-size:.85rem;

    color:var(--text-muted);
}



/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

.mobile-toggle{

    display:none;

    width:46px;
    height:46px;

    border:none;

    background:none;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    cursor:pointer;
}

.mobile-toggle span{

    width:20px;
    height:2px;

    background:var(--palm-dark);
}

.mobile-menu{

    position:fixed;

    inset:0;

    background:
        rgba(249,245,236,.98);

    display:none;

    z-index:999;
}

.mobile-menu.active{

    display:flex;
}

.mobile-menu-inner{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:2rem;
}

.mobile-menu a{

    font-size:1.3rem;

    color:var(--palm-dark);
}



/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    padding:1rem 2rem;

    border-radius:4px;

    font-size:.92rem;

    font-weight:500;

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

.btn:hover{

    transform:translateY(-2px);
}





/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero{

    position:relative;

    padding:
        12rem 0 7rem;

    background:
        linear-gradient(
            to bottom,
            var(--palm-cream),
            #ffffff
        );

    overflow:hidden;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(196,146,42,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(45,107,69,.08),
            transparent 35%
        );
}

.hero-container{

    position:relative;

    z-index:2;
}

.hero-content{

    max-width:960px;

    margin-inline:auto;

    text-align:center;
}

.hero-eyebrow{

    color:var(--palm-gold);

    font-size:.78rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    margin-bottom:1.5rem;
}

.hero-title{

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(3.5rem,7vw,6rem);

    line-height:1.02;

    color:var(--palm-dark);

    margin-bottom:1.5rem;

    letter-spacing:-.03em;
}

.hero-description{

    max-width:760px;

    margin:
        0 auto 2.5rem;

    font-size:1.12rem;

    line-height:1.9;

    color:var(--text-muted);
}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

    margin-bottom:4rem;
}



/*
|--------------------------------------------------------------------------
| HERO STATS
|--------------------------------------------------------------------------
*/

.hero-stats{

    display:grid;

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

    gap:1.5rem;

    max-width:900px;

    margin-inline:auto;
}

.stat-item{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:10px;

    padding:2rem;

    box-shadow:
        0 12px 30px rgba(0,0,0,.04);
}

.stat-number{

    font-family:
        'Playfair Display',
        serif;

    font-size:2.5rem;

    color:var(--palm-green);

    margin-bottom:.5rem;
}

.stat-label{

    color:var(--text-muted);

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    line-height:1.5;

    font-weight:600;
}



/*
|--------------------------------------------------------------------------
| FEATURE GRID
|--------------------------------------------------------------------------
*/

.feature-grid{

    display:grid;

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

    gap:2rem;
}

.card{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    padding:2.5rem;

    border-radius:8px;

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

    transition:.25s ease;
}

.card a{

    color:var(--palm-green);

    font-weight:600;
}

.card:hover{

    transform:
        translateY(-6px);
}

.card h3{

    font-family:
        'Playfair Display',
        serif;

    margin-bottom:1rem;

    color:var(--palm-dark);

    font-size:1.6rem;
}

.card p{

    line-height:1.8;

    color:var(--text-muted);
}



/*
|--------------------------------------------------------------------------
| STEPS
|--------------------------------------------------------------------------
*/

.steps-grid{

    display:grid;

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

    gap:2rem;
}

.step-card{

    padding:2rem;
}

.step-number{

    width:56px;
    height:56px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--palm-gold);

    margin-bottom:1.5rem;

    font-family:
        'Playfair Display',
        serif;
}

.step-card h3{

    margin-bottom:1rem;

    font-family:
        'Playfair Display',
        serif;

    color:white;
}

.step-card p{

    line-height:1.8;

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



/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.cta-section{

    padding:
        8rem 0;

    text-align:center;
}

.cta-title{

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(2.5rem,5vw,4rem);

    margin-bottom:1.25rem;

    color:var(--palm-dark);
}

.cta-description{

    max-width:620px;

    margin:
        0 auto 2rem;

    line-height:1.8;

    color:var(--text-muted);
}

.cta-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;
}



/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.site-footer{

    background:var(--palm-dark);

    color:white;

    padding:
        6rem 0 2rem;
}

.footer-note{

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

    line-height:1.9;

    margin-bottom:1.5rem;
}

.footer-highlight{

    border-left:
        2px solid var(--palm-gold);

    padding-left:1rem;

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

    line-height:1.9;

    margin-bottom:1.5rem;
}

.footer-contact{

    color:var(--palm-gold);

    font-size:.78rem;

    letter-spacing:.14em;

    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| FOOTER GRID
|--------------------------------------------------------------------------
*/

.footer-grid{

    display:grid;

    grid-template-columns:
        1.4fr 1fr 1fr 1fr;

    gap:4rem;
}



/*
|--------------------------------------------------------------------------
| FOOTER BRAND
|--------------------------------------------------------------------------
*/

.footer-logo{

    display:flex;

    align-items:center;

    gap:.85rem;

    font-family:
        'Playfair Display',
        serif;

    font-size:1.8rem;

    color:white;

    margin-bottom:1.5rem;
}

.footer-description{

    font-family:
        'Playfair Display',
        serif;

    font-size:1.6rem;

    line-height:1.3;

    margin-bottom:1.5rem;
}

.footer-note{

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

    line-height:1.9;

    margin-bottom:1.5rem;
}

.footer-contact{

    color:var(--palm-gold);

    font-size:.8rem;

    letter-spacing:.12em;

    text-transform:uppercase;
}



/*
|--------------------------------------------------------------------------
| FOOTER LINKS
|--------------------------------------------------------------------------
*/

.footer-column h4{

    color:white;

    margin-bottom:1rem;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.14em;
}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:.5rem;
}

.footer-column a{

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

    transition:.2s ease;

    line-height:1.5;
}

.footer-column a:hover{

    color:white;
}



/*
|--------------------------------------------------------------------------
| FOOTER LINKS
|--------------------------------------------------------------------------
*/

.footer-links-grid{

    display:grid;

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

    gap:3rem;
}

.footer-column h4{

    margin-bottom:1rem;

    color:white;

    font-size:.82rem;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:.45rem;
}

.footer-column a{

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

    font-size:.95rem;

    line-height:1.5;

    transition:.2s ease;
}

.footer-column a:hover{

    color:white;
}



/*
|--------------------------------------------------------------------------
| FOOTER BOTTOM
|--------------------------------------------------------------------------
*/

.footer-divider{

    height:1px;

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

    margin:
        4rem 0 2rem;
}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    gap:2rem;

    flex-wrap:wrap;

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

    font-size:.88rem;

    line-height:1.8;
}

.footer-bottom-left{

    max-width:700px;
}

.footer-bottom-right{

    max-width:420px;

    text-align:right;
}



/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/
@media(max-width:1024px){
    .legal-layout{

        grid-template-columns:1fr;

        gap:2rem;
    }

    .legal-sidebar{

        position:relative;

        top:auto;
    }

    .legal-grid{

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

    .news-grid{

        grid-template-columns:1fr;
    }

    .featured-news{

        grid-column:auto;

        grid-template-columns:1fr;
    }

    .gallery-grid{

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

    .nav-links,
    .nav-cta{

        display:none;
    }

    .footer-grid,
    .feature-grid,
    .steps-grid{

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

}



@media(max-width:768px){

    .legal-content{

        padding:2rem;
    }

    .legal-grid{

        grid-template-columns:1fr;
    }

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:240px;
    }

    .gallery-item.large{

        grid-column:auto;
    }

    .hero{

        padding:
            10rem 0 5rem;
    }

    .section-dark .steps-grid::before{

        display:none;
    }

    .hero-title{

        font-size:3rem;
    }

    .hero-description{

        font-size:1rem;
    }

    .hero-stats,
    .feature-grid,
    .steps-grid,
    .footer-grid{

        grid-template-columns:1fr;
    }

    .footer-bottom{

        flex-direction:column;
    }

    .footer-bottom-right{

        text-align:left;
    }

}




/*
|--------------------------------------------------------------------------
| INTERNAL PAGE HERO
|--------------------------------------------------------------------------
*/

.page-hero{

    padding:
        13rem 0 6rem;

    background:
        linear-gradient(
            to bottom,
            var(--palm-cream),
            #ffffff
        );

    position:relative;

    overflow:hidden;
}

.page-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(196,146,42,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(45,107,69,.06),
            transparent 35%
        );
}

.page-hero .container{

    position:relative;

    z-index:2;
}

.page-eyebrow{

    color:var(--palm-gold);

    font-size:.78rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    margin-bottom:1.5rem;
}

.page-title{

    font-family:
        'Playfair Display',
        serif;

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

    line-height:1.05;

    letter-spacing:-.03em;

    color:var(--palm-dark);

    max-width:900px;

    margin-bottom:1.5rem;
}

.page-subtitle{

    max-width:760px;

    font-size:1.15rem;

    line-height:1.9;

    color:var(--text-muted);
}



/*
|--------------------------------------------------------------------------
| LEAD BLOCK
|--------------------------------------------------------------------------
*/

.lead-block{

    max-width:980px;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(1.8rem,3vw,2.8rem);

    line-height:1.5;

    color:var(--palm-dark);
}



/*
|--------------------------------------------------------------------------
| BODY CONTENT
|--------------------------------------------------------------------------
*/

.section p{

    font-size:1.05rem;

    line-height:1.95;

    color:var(--text-muted);

    max-width:900px;
}



/*
|--------------------------------------------------------------------------
| NUMBERS BANNER
|--------------------------------------------------------------------------
*/

.numbers-banner{

    display:grid;

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

    gap:1.5rem;

    margin-top:4rem;
}

.nb-item{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:10px;

    padding:2rem;

    text-align:center;

    box-shadow:
        0 12px 30px rgba(0,0,0,.04);
}

.nb-num{

    display:block;

    font-family:
        'Playfair Display',
        serif;

    font-size:2.4rem;

    color:var(--palm-green);

    margin-bottom:.75rem;
}

.nb-label{

    display:block;

    color:var(--text-muted);

    font-size:.82rem;

    line-height:1.5;

    text-transform:uppercase;

    letter-spacing:.08em;
}



/*
|--------------------------------------------------------------------------
| PULLQUOTE
|--------------------------------------------------------------------------
*/

.pullquote{

    padding:
        5rem 0;

    text-align:center;

    max-width:900px;

    margin-inline:auto;
}

.pullquote p{

    font-family:
        'Playfair Display',
        serif;

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

    line-height:1.4;

    color:var(--palm-dark);

    margin-bottom:1.5rem;
}

.pullquote cite{

    color:var(--palm-gold);

    font-style:normal;

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.78rem;
}



/*
|--------------------------------------------------------------------------
| INTERNAL PAGE RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:1024px){

    .numbers-banner{

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

}



@media(max-width:768px){

    .page-hero{

        padding:
            10rem 0 5rem;
    }

    .page-title{

        font-size:2.8rem;
    }

    .lead-block{

        font-size:1.8rem;
    }

    .numbers-banner{

        grid-template-columns:1fr;
    }

}


/*
|--------------------------------------------------------------------------
| STORY LAYOUT
|--------------------------------------------------------------------------
*/

.story-grid{

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:5rem;

    align-items:center;
}

.reverse-grid{

    grid-template-columns:
        .9fr 1.1fr;
}



/*
|--------------------------------------------------------------------------
| STORY IMAGE
|--------------------------------------------------------------------------
*/

.story-image{

    position:relative;
}

.story-image img{

    width:100%;

    border-radius:14px;

    display:block;

    box-shadow:
        0 30px 60px rgba(0,0,0,.08);

    border:
        1px solid rgba(0,0,0,.05);
}



/*
|--------------------------------------------------------------------------
| STORY TYPOGRAPHY
|--------------------------------------------------------------------------
*/

.story-grid p{

    max-width:680px;

    line-height:2;

    color:var(--text-muted);

    font-size:1.05rem;
}



/*
|--------------------------------------------------------------------------
| STORY LIST
|--------------------------------------------------------------------------
*/

.story-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:1rem;
}

.story-list li{

    position:relative;

    padding-left:1.75rem;

    line-height:1.8;

    color:var(--text-muted);
}

.story-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:.72rem;

    width:8px;

    height:8px;

    border-radius:50%;

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



/*
|--------------------------------------------------------------------------
| STORY RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:1024px){

    .story-grid,
    .reverse-grid{

        grid-template-columns:1fr;

        gap:3rem;
    }

}



@media(max-width:768px){

    .story-grid{

        gap:2.5rem;
    }

}

/*
|--------------------------------------------------------------------------
| FAQ SYSTEM
|--------------------------------------------------------------------------
*/

.faq-container{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    max-width:1000px;

    margin-inline:auto;
}



/*
|--------------------------------------------------------------------------
| FAQ ITEM
|--------------------------------------------------------------------------
*/

.faq-item{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:12px;

    padding:2rem;

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);

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

.faq-item:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.06);
}



/*
|--------------------------------------------------------------------------
| FAQ QUESTION
|--------------------------------------------------------------------------
*/

.faq-item h3{

    font-family:
        'Playfair Display',
        serif;

    font-size:1.6rem;

    color:var(--palm-dark);

    margin-bottom:1rem;

    line-height:1.3;
}



/*
|--------------------------------------------------------------------------
| FAQ ANSWER
|--------------------------------------------------------------------------
*/

.faq-item p{

    color:var(--text-muted);

    line-height:1.9;

    max-width:850px;
}



/*
|--------------------------------------------------------------------------
| SECTION DESCRIPTION
|--------------------------------------------------------------------------
*/

.section-description{

    max-width:760px;

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

    line-height:1.9;

    font-size:1.05rem;

    margin-top:1rem;
}



/*
|--------------------------------------------------------------------------
| PARTNER GRID
|--------------------------------------------------------------------------
*/

.partner-grid{

    display:grid;

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

    gap:2rem;
}



/*
|--------------------------------------------------------------------------
| PARTNER CARD
|--------------------------------------------------------------------------
*/

.partner-card{

    height:160px;

    border-radius:12px;

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:2rem;

    color:var(--text-muted);

    font-size:.95rem;

    box-shadow:
        0 12px 30px rgba(0,0,0,.04);

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

.partner-card:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.06);
}


/*
|--------------------------------------------------------------------------
| CONTACT PEOPLE
|--------------------------------------------------------------------------
*/

.section-description-light{

    max-width:760px;

    color:var(--text-muted);

    line-height:1.9;

    margin-top:1rem;
}



/*
|--------------------------------------------------------------------------
| CONTACT PEOPLE GRID
|--------------------------------------------------------------------------
*/

.contact-people-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;
}



/*
|--------------------------------------------------------------------------
| CONTACT PERSON CARD
|--------------------------------------------------------------------------
*/

.contact-person-card{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:14px;

    padding:2rem;

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

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

.contact-person-card:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 24px 50px rgba(0,0,0,.06);
}



/*
|--------------------------------------------------------------------------
| CONTACT TOP
|--------------------------------------------------------------------------
*/

.contact-person-top{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:1.5rem;
}



/*
|--------------------------------------------------------------------------
| CONTACT AVATAR
|--------------------------------------------------------------------------
*/

.contact-avatar{

    width:64px;
    height:64px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--palm-green),
            var(--palm-dark)
        );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    letter-spacing:.08em;
}



/*
|--------------------------------------------------------------------------
| CONTACT ROLE
|--------------------------------------------------------------------------
*/

.contact-role{

    color:var(--palm-gold);

    font-size:.85rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-top:.35rem;
}



/*
|--------------------------------------------------------------------------
| CONTACT DETAILS
|--------------------------------------------------------------------------
*/

.contact-details p{

    color:var(--text-muted);

    line-height:1.9;

    margin-bottom:.75rem;
}

.contact-details a{

    color:var(--palm-green);

    font-weight:600;
}



/*
|--------------------------------------------------------------------------
| OFFICE GRID
|--------------------------------------------------------------------------
*/

.office-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;
}



/*
|--------------------------------------------------------------------------
| OFFICE CARD
|--------------------------------------------------------------------------
*/

.office-card{

    background:
        linear-gradient(
            180deg,
            rgba(26,74,46,.02),
            rgba(26,74,46,.01)
        );

    border:
        1px solid rgba(26,74,46,.08);

    border-radius:14px;

    padding:2rem;
}



/*
|--------------------------------------------------------------------------
| OFFICE LABEL
|--------------------------------------------------------------------------
*/

.office-label{

    color:var(--palm-gold);

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.75rem;

    margin-bottom:1rem;
}

.office-card h3{

    margin-bottom:1rem;
}

.office-card p{

    color:var(--text-muted);

    line-height:1.9;

    margin-bottom:1rem;
}

.office-card a{

    color:var(--palm-green);

    font-weight:600;
}



/*
|--------------------------------------------------------------------------
| ESTATE PORTFOLIO ENHANCEMENTS
|--------------------------------------------------------------------------
*/

.numbers-banner{

    margin:
        5rem auto;

    position:relative;
}



/*
|--------------------------------------------------------------------------
| ESTATE METRICS ATMOSPHERE
|--------------------------------------------------------------------------
*/

.numbers-banner::before{

    content:"";

    position:absolute;

    inset:-30px;

    background:

        radial-gradient(
            circle,
            rgba(196,146,42,.05),
            transparent 70%
        );

    pointer-events:none;

    z-index:-1;
}



/*
|--------------------------------------------------------------------------
| ESTATE FEATURE CARDS
|--------------------------------------------------------------------------
*/

.feature-grid .card{

    min-height:240px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;
}



/*
|--------------------------------------------------------------------------
| ESTATE DEVELOPMENT FLOW
|--------------------------------------------------------------------------
*/

.section-dark .step-card{

    position:relative;

    padding-top:2.5rem;
}



/*
|--------------------------------------------------------------------------
| ESTATE STEP CONNECTORS
|--------------------------------------------------------------------------
*/

.steps-grid{

    position:relative;
}

.section-dark .steps-grid::before{

    content:"";

    position:absolute;

    top:56px;

    left:10%;

    width:80%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(196,146,42,.3),
            transparent
        );

    z-index:0;
}

.section-dark .step-card{

    position:relative;

    z-index:2;
}



/*
|--------------------------------------------------------------------------
| ESTATE PHASE DEPTH
|--------------------------------------------------------------------------
*/

.section-dark{

    overflow:hidden;
}



/*
|--------------------------------------------------------------------------
| ESTATE CARD REFINEMENT
|--------------------------------------------------------------------------
*/

.section-dark .step-card{

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

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

    border-radius:12px;

    backdrop-filter:blur(8px);
}


/*
|--------------------------------------------------------------------------
| GALLERY GRID
|--------------------------------------------------------------------------
*/

.gallery-grid{

    display:grid;

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

    gap:1.5rem;

    grid-auto-rows:260px;
}



/*
|--------------------------------------------------------------------------
| GALLERY ITEM
|--------------------------------------------------------------------------
*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:14px;

    background:
        rgba(0,0,0,.04);

    box-shadow:
        0 20px 40px rgba(0,0,0,.06);
}



/*
|--------------------------------------------------------------------------
| LARGE ITEMS
|--------------------------------------------------------------------------
*/

.gallery-item.large{

    grid-column:span 2;
}



/*
|--------------------------------------------------------------------------
| GALLERY IMAGE
|--------------------------------------------------------------------------
*/

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease;
}



/*
|--------------------------------------------------------------------------
| GALLERY HOVER
|--------------------------------------------------------------------------
*/

.gallery-item:hover img{

    transform:scale(1.05);
}



/*
|--------------------------------------------------------------------------
| GALLERY OVERLAY
|--------------------------------------------------------------------------
*/

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 50%
        );

    pointer-events:none;
}


/*
|--------------------------------------------------------------------------
| GALLERY FUTURE TEXT
|--------------------------------------------------------------------------
*/

.gallery-future-text{

    font-size:1.08rem;

    line-height:2;

    color:var(--text-muted);
}



/*
|--------------------------------------------------------------------------
| NEWS GRID
|--------------------------------------------------------------------------
*/

.news-grid{

    display:grid;

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

    gap:2rem;
}



/*
|--------------------------------------------------------------------------
| FEATURED NEWS
|--------------------------------------------------------------------------
*/

.featured-news{

    grid-column:span 2;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    min-height:420px;
}



/*
|--------------------------------------------------------------------------
| NEWS CARD
|--------------------------------------------------------------------------
*/

.news-card{

    background:white;

    border-radius:14px;

    overflow:hidden;

    border:
        1px solid rgba(0,0,0,.05);

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

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

.news-card:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 24px 50px rgba(0,0,0,.08);
}



/*
|--------------------------------------------------------------------------
| NEWS IMAGE
|--------------------------------------------------------------------------
*/

.news-image{

    position:relative;

    overflow:hidden;

    min-height:240px;
}

.news-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .7s ease;
}

.news-card:hover img{

    transform:scale(1.05);
}



/*
|--------------------------------------------------------------------------
| NEWS CONTENT
|--------------------------------------------------------------------------
*/

.news-content{

    padding:2rem;

    display:flex;

    flex-direction:column;
}



/*
|--------------------------------------------------------------------------
| NEWS META
|--------------------------------------------------------------------------
*/

.news-meta{

    color:var(--palm-gold);

    font-size:.75rem;

    letter-spacing:.16em;

    text-transform:uppercase;

    margin-bottom:1rem;
}



/*
|--------------------------------------------------------------------------
| NEWS TITLE
|--------------------------------------------------------------------------
*/

.news-content h3{

    font-family:
        'Playfair Display',
        serif;

    font-size:1.8rem;

    line-height:1.3;

    color:var(--palm-dark);

    margin-bottom:1rem;
}



/*
|--------------------------------------------------------------------------
| NEWS EXCERPT
|--------------------------------------------------------------------------
*/

.news-content p{

    color:var(--text-muted);

    line-height:1.9;

    margin-bottom:2rem;

    flex:1;
}



/*
|--------------------------------------------------------------------------
| NEWS LINK
|--------------------------------------------------------------------------
*/

.news-content a{

    color:var(--palm-green);

    font-weight:600;

    transition:.2s ease;
}

.news-content a:hover{

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



/*
|--------------------------------------------------------------------------
| LEGAL GRID
|--------------------------------------------------------------------------
*/

.legal-grid{

    display:grid;

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

    gap:1.5rem;
}



/*
|--------------------------------------------------------------------------
| LEGAL CARD
|--------------------------------------------------------------------------
*/

.legal-card{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:12px;

    padding:2rem;

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    box-shadow:
        0 12px 30px rgba(0,0,0,.04);

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



/*
|--------------------------------------------------------------------------
| LEGAL CARD HOVER
|--------------------------------------------------------------------------
*/

.legal-card:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(196,146,42,.25);

    box-shadow:
        0 20px 40px rgba(0,0,0,.06);
}



/*
|--------------------------------------------------------------------------
| LEGAL TITLE
|--------------------------------------------------------------------------
*/

.legal-card h3{

    font-family:
        'Playfair Display',
        serif;

    font-size:1.45rem;

    line-height:1.3;

    color:var(--palm-dark);

    margin-bottom:1rem;
}



/*
|--------------------------------------------------------------------------
| LEGAL DESCRIPTION
|--------------------------------------------------------------------------
*/

.legal-card p{

    color:var(--text-muted);

    line-height:1.8;

    font-size:.98rem;
}



/*
|--------------------------------------------------------------------------
| LEGAL CARD INDICATOR
|--------------------------------------------------------------------------
*/

.legal-card::after{

    content:"↗";

    margin-top:1.5rem;

    color:var(--palm-gold);

    font-size:1rem;

    transition:
        transform .25s ease;
}

.legal-card:hover::after{

    transform:
        translateX(4px)
        translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| LEGAL DOCUMENT LAYOUT
|--------------------------------------------------------------------------
*/

.legal-layout{

    display:grid;

    grid-template-columns:
        280px 1fr;

    gap:5rem;

    align-items:start;
}



/*
|--------------------------------------------------------------------------
| LEGAL SIDEBAR
|--------------------------------------------------------------------------
*/

.legal-sidebar{

    position:sticky;

    top:120px;

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:12px;

    padding:2rem;

    box-shadow:
        0 12px 30px rgba(0,0,0,.04);
}



/*
|--------------------------------------------------------------------------
| LEGAL SIDEBAR TITLE
|--------------------------------------------------------------------------
*/

.legal-sidebar h4{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.14em;

    color:var(--palm-gold);

    margin-bottom:1.5rem;
}



/*
|--------------------------------------------------------------------------
| LEGAL SIDEBAR LINKS
|--------------------------------------------------------------------------
*/

.legal-sidebar ul{

    display:flex;

    flex-direction:column;

    gap:1rem;
}

.legal-sidebar a{

    color:var(--text-muted);

    line-height:1.5;

    transition:.2s ease;
}

.legal-sidebar a:hover{

    color:var(--palm-green);
}



/*
|--------------------------------------------------------------------------
| LEGAL CONTENT
|--------------------------------------------------------------------------
*/

.legal-content{

    background:white;

    border:
        1px solid rgba(0,0,0,.05);

    border-radius:14px;

    padding:4rem;

    box-shadow:
        0 20px 40px rgba(0,0,0,.04);
}



/*
|--------------------------------------------------------------------------
| LEGAL SECTION
|--------------------------------------------------------------------------
*/

.legal-section{

    padding-bottom:4rem;

    margin-bottom:4rem;

    border-bottom:
        1px solid rgba(0,0,0,.06);
}

.legal-section:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-bottom:none;
}



/*
|--------------------------------------------------------------------------
| LEGAL HEADINGS
|--------------------------------------------------------------------------
*/

.legal-section h2{

    font-family:
        'Playfair Display',
        serif;

    font-size:2rem;

    color:var(--palm-dark);

    margin-bottom:1.5rem;
}



/*
|--------------------------------------------------------------------------
| LEGAL PARAGRAPHS
|--------------------------------------------------------------------------
*/

.legal-section p{

    color:var(--text-muted);

    line-height:2;

    margin-bottom:1.5rem;
}



/*
|--------------------------------------------------------------------------
| LEGAL LISTS
|--------------------------------------------------------------------------
*/

.legal-section ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:1.5rem;
}

.legal-section li{

    position:relative;

    padding-left:1.75rem;

    color:var(--text-muted);

    line-height:1.8;
}

.legal-section li::before{

    content:"";

    position:absolute;

    left:0;

    top:.72rem;

    width:8px;

    height:8px;

    border-radius:50%;

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



/*
|--------------------------------------------------------------------------
| LEGAL UPDATED
|--------------------------------------------------------------------------
*/

.legal-updated{

    margin-top:3rem;

    font-size:.9rem;

    color:rgba(0,0,0,.45);
}