/* ============================================================
   WAFRA ABOUT PAGE
   Scoped only to .wf-about
============================================================ */

.wf-about{
    --wf-green:#155b36;
    --wf-green-dark:#10482b;
    --wf-soft:#f4f8f4;
    --wf-line:#dfe9e2;
    --wf-text:#183528;
    --wf-muted:#6f7d74;

    background:#fff;
    color:var(--wf-text);
}


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


/* HERO */

.wf-about-hero{
    padding:95px 0 90px;
    background:
        linear-gradient(
            135deg,
            var(--wf-green-dark),
            var(--wf-green)
        );
    color:#fff;
    text-align:center;
}


.wf-about-kicker,
.wf-about-label{
    display:block;
    margin-bottom:12px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
}


.wf-about-hero .wf-about-kicker{
    color:rgba(255,255,255,.72);
}


.wf-about-hero h1{
    max-width:800px;
    margin:0 auto;
    font-size:clamp(36px,5vw,64px);
    line-height:1.15;
    font-weight:800;
}


.wf-about-hero p{
    max-width:640px;
    margin:20px auto 0;
    font-size:15px;
    line-height:1.9;
    color:rgba(255,255,255,.78);
}


/* STORY */

.wf-about-story{
    padding:95px 0;
    background:#fff;
}


.wf-about-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
    gap:80px;
    align-items:center;
}


.wf-about-label{
    color:var(--wf-green);
}


.wf-about-copy h2{
    max-width:680px;
    margin:0 0 24px;
    font-size:clamp(30px,4vw,48px);
    line-height:1.35;
    font-weight:800;
    color:var(--wf-text);
}


.wf-about-text{
    max-width:720px;
    color:var(--wf-muted);
    font-size:15px;
    line-height:2;
}


.wf-about-text p:last-child{
    margin-bottom:0;
}


/* VALUES */

.wf-about-values{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:34px;
}


.wf-about-values > div{
    padding:18px;
    border:1px solid var(--wf-line);
    border-radius:14px;
    background:#fff;
}


.wf-about-values strong{
    display:block;
    margin-bottom:7px;
    color:var(--wf-green-dark);
    font-size:13px;
    font-weight:800;
}


.wf-about-values span{
    display:block;
    color:var(--wf-muted);
    font-size:11px;
    line-height:1.8;
}


/* CTA */

.wf-about-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin-top:30px;
    padding:14px 22px;

    border-radius:10px;

    background:var(--wf-green);
    color:#fff !important;

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

    text-decoration:none !important;
    transition:.2s ease;
}


.wf-about-cta:hover{
    background:var(--wf-green-dark);
    transform:translateY(-1px);
}


/* IMAGE */

.wf-about-media{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:480px;
    padding:42px;

    border:1px solid var(--wf-line);
    border-radius:22px;

    background:var(--wf-soft);
}


.wf-about-media img{
    display:block;

    width:100%;
    max-width:430px;
    max-height:430px;

    object-fit:contain;

    border-radius:16px;
}


.wf-about-media-empty{
    display:flex;
    align-items:center;
    justify-content:center;

    width:260px;
    aspect-ratio:1;

    border-radius:50%;

    background:var(--wf-green);
    color:#fff;

    font-size:64px;
    font-weight:800;
}


/* PROMISE */

.wf-about-promise{
    padding:0 0 95px;
    background:#fff;
}


.wf-about-promise-inner{
    padding:52px;

    border-radius:22px;

    background:var(--wf-soft);

    text-align:center;
}


.wf-about-promise-inner span{
    display:block;

    margin-bottom:12px;

    color:var(--wf-green);

    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
}


.wf-about-promise-inner h2{
    max-width:850px;

    margin:0 auto;

    color:var(--wf-green-dark);

    font-size:clamp(24px,3vw,36px);
    line-height:1.6;

    font-weight:800;
}


/* TABLET */

@media(max-width:991px){

    .wf-about-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .wf-about-media{
        min-height:auto;
    }

}


/* MOBILE */

@media(max-width:767px){

    .wf-about-container{
        width:calc(100% - 30px);
    }

    .wf-about-hero{
        padding:65px 0 60px;
    }

    .wf-about-hero h1{
        font-size:36px;
    }

    .wf-about-story{
        padding:58px 0;
    }

    .wf-about-copy h2{
        font-size:30px;
    }

    .wf-about-values{
        grid-template-columns:1fr;
    }

    .wf-about-media{
        padding:25px;
        border-radius:16px;
    }

    .wf-about-media img{
        max-height:320px;
    }

    .wf-about-promise{
        padding-bottom:60px;
    }

    .wf-about-promise-inner{
        padding:34px 20px;
        border-radius:16px;
    }

}