/* ==========================================
   VPAC PROJECTS PAGE
========================================== */

.projects-hero{
    min-height:560px;
    display:flex;
    align-items:center;
    color:#fff;
    background:
        linear-gradient(90deg, rgba(5,32,18,.72) 0%, rgba(5,32,18,.48) 45%, rgba(5,32,18,.18) 100%),
        url("../images/projects-banner.jpg") center center/cover no-repeat;
}

.projects-hero .hero-content{ max-width:850px; }

.projects-hero h1,
.projects-hero .hero-intro{
    color:#fff;
    text-shadow:0 4px 18px rgba(0,0,0,.45);
}

.project-case-study{
    background:#fff;
    padding-top:34px;
}

.project-wide{
    width:min(1480px, calc(100% - 48px));
    margin:0 auto;
}

.project-main-grid{
    display:grid;
    grid-template-columns:1.16fr .84fr;
    gap:48px;
    align-items:start;
}

.project-map-card img{
    width:100%;
    display:block;
    border-radius:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.project-text-card{ padding:6px 0 0; }

.project-text-card .eyebrow{
    color:var(--green-dark);
    border-bottom:2px solid rgba(15,95,45,.45);
    padding-bottom:14px;
    margin-bottom:20px;
}

.project-text-card h2{
    color:var(--green-dark);
    font-size:clamp(38px, 4vw, 62px);
    line-height:1.02;
    letter-spacing:-.04em;
    margin-bottom:26px;
    font-weight:800;
}

.project-text-card p{
    color:#1d1d1d;
    font-size:18px;
    line-height:1.72;
    margin-bottom:22px;
}

.project-text-card h3{
    color:var(--green-dark);
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding-top:24px;
    border-top:1px solid rgba(15,95,45,.25);
    margin:28px 0 22px;
}

.program-highlights{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 34px;
}

.program-highlight{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:14px;
    align-items:center;
}

.program-highlight i{
    color:var(--green-dark);
    font-size:34px;
    line-height:1;
    text-align:center;
}

.program-highlight span{
    color:#1f2921;
    font-size:17px;
    line-height:1.35;
    font-weight:600;
}

.project-lower-panel{
    margin-top:80px;
    background:#f3f4ee;
    border-radius:14px;
    display:grid;
    grid-template-columns:1.05fr 1.15fr;
    gap:0;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.client-confidentiality{
    display:grid;
    grid-template-columns:80px 1fr;
    gap:22px;
    padding:34px 38px;
    border-right:1px solid rgba(15,95,45,.22);
    align-items:start;
}

.confidentiality-icon{
    width:64px;
    height:78px;
    background:var(--green-dark);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    clip-path:polygon(50% 0%, 92% 16%, 92% 62%, 50% 100%, 8% 62%, 8% 16%);
}

.confidentiality-icon i{ font-size:28px; }

.project-lower-panel h3{
    color:var(--green-dark);
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:14px;
}

.client-confidentiality p{
    color:#202820;
    font-size:15px;
    line-height:1.62;
    margin-bottom:12px;
}

.experience-panel{ padding:34px 38px 22px; }

.experience-icons{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
    align-items:start;
    margin-top:22px;
}

.experience-icons div{ text-align:center; }

.experience-icons i{
    display:block;
    color:var(--green-dark);
    font-size:38px;
    margin-bottom:12px;
}

.experience-icons span{
    display:block;
    color:#1f2921;
    font-weight:700;
    font-size:15px;
    line-height:1.25;
}

.disclosure-note{
    text-align:center;
    color:#444;
    font-style:italic;
    margin-top:24px;
    font-size:14px;
}

.projects-cta{
    background:#fff;
    padding-top:42px;
}

@media(max-width:980px){
    .project-main-grid,
    .project-lower-panel{ grid-template-columns:1fr; }

    .client-confidentiality{
        border-right:none;
        border-bottom:1px solid rgba(15,95,45,.22);
    }

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

@media(max-width:620px){
    .project-wide{ width:min(100% - 24px, 1480px); }
    .project-case-study{ padding-top:24px; }
    .program-highlights{ grid-template-columns:1fr; }
    .client-confidentiality{ grid-template-columns:1fr; }
    .experience-icons{ grid-template-columns:repeat(2,1fr); }
}

.experience-section{
    background:#fff;
}

.experience-heading{
    text-align:center;
    max-width:1000px;
    margin:0 auto 65px;
}

.experience-heading h2{
    color:var(--green-dark);
    font-size:clamp(40px,5vw,68px);
    line-height:1.05;
    margin-bottom:20px;
    font-weight:800;
    letter-spacing:-.04em;
}

.experience-heading p{
    color:#333;
    font-size:21px;
    line-height:1.6;
}

.deer-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    margin:20px 0 28px;
}

.deer-divider span{
    width:155px;
    height:1px;
    background:#a9b1a5;
}

.deer-divider i{
    color:var(--green-dark);
    font-size:25px;
}

.experience-icons-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:46px;
    text-align:center;
    margin-bottom:75px;
}

.experience-icon-item{
    padding:0 10px;
}

.icon-circle{
    width:98px;
    height:98px;
    border-radius:50%;
    background:#e9f0e6;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 28px;
}

.icon-circle i{
    color:var(--green-dark);
    font-size:46px;
}

.experience-icon-item h3{
    color:var(--green-dark);
    font-size:26px;
    line-height:1.12;
    margin-bottom:18px;
    font-weight:800;
}

.small-line{
    width:52px;
    height:2px;
    background:var(--green);
    margin:0 auto 28px;
}

.experience-icon-item p{
    color:#333;
    font-size:18px;
    line-height:1.55;
}

.principles-banner{
    background:linear-gradient(135deg,#003916,#063f22);
    border-radius:16px;
    padding:46px 70px;
    color:#fff;
    box-shadow:0 16px 35px rgba(0,0,0,.16);
}

.principles-banner h3{
    color:#fff;
    text-align:center;
    font-size:34px;
    margin-bottom:34px;
    font-weight:800;
}

.principles-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 80px;
    max-width:900px;
    margin:0 auto;
}

.principles-list div{
    color:#fff;
    font-size:18px;
    font-weight:700;
}

@media(max-width:900px){
    .experience-icons-row{
        grid-template-columns:1fr 1fr;
    }

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

@media(max-width:600px){
    .experience-icons-row{
        grid-template-columns:1fr;
    }

    .principles-banner{
        padding:34px 26px;
    }

    .deer-divider span{
        width:80px;
    }
}