/* ==========================================================
   KOKO Enterprise
   Approach
   ========================================================== */

/*--------------------------------------------------------------
# Approach Section
--------------------------------------------------------------*/

.pillars-section{
    padding:120px 0;
    background:#f8f8f8;
}

/*--------------------------------------------------------------
# Section Heading
--------------------------------------------------------------*/

.section-heading{
    max-width:760px;
    margin:0 auto 4.5rem;
    text-align:center;
}

.section-heading h2{
    margin:0;
    color:var(--color-primary);
    font-family:var(--font-heading);
    font-size:clamp(2.6rem,5vw,4rem);
    font-weight:500;
    line-height:1.1;
    letter-spacing:-.025em;
}

.section-kicker{
    display:block;
    margin-bottom:1.25rem;
    color:var(--color-accent);
    font-size:.8rem;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.3em;
    text-transform:uppercase;
}

/*--------------------------------------------------------------
# Pillars Grid
--------------------------------------------------------------*/

.pillars-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2.5rem;
    align-items:stretch;
}

/*--------------------------------------------------------------
# Pillar Card
--------------------------------------------------------------*/

.pillar-card{
    display:flex;
    flex-direction:column;
    height:100%;
    padding:2.75rem;

    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:16px;

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

.pillar-card:hover{
    transform:translateY(-6px);
    border-color:rgba(0,0,0,.08);
    box-shadow:
        0 18px 45px rgba(0,0,0,.07);
}

/*--------------------------------------------------------------
# Pillar Title
--------------------------------------------------------------*/

.pillar-card h3{
    margin:0 0 1.25rem;
    color:var(--color-primary);
    font-family:var(--font-heading);
    font-size:1.65rem;
    font-weight:600;
    line-height:1.25;
}

/*--------------------------------------------------------------
# Pillar Text
--------------------------------------------------------------*/

.pillar-card p{
    margin:0;
    color:var(--color-text-light);
    font-size:1rem;
    line-height:1.85;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.pillar-card:focus-within{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width:992px){

    .pillars-section{
        padding:100px 0;
    }

    .section-heading{
        margin-bottom:3.5rem;
    }

    .pillars-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }

}

@media (max-width:576px){

    .pillars-section{
        padding:80px 0;
    }

    .section-heading{
        margin-bottom:3rem;
        text-align:left;
    }

    .section-heading h2{
        font-size:clamp(2.25rem,9vw,3.25rem);
    }

    .pillar-card{
        padding:2rem;
        border-radius:12px;
    }

    .pillar-card h3{
        font-size:1.45rem;
    }

}