/* =========================================
   VP RWANDA — ABOUT PAGE
========================================= */


/* =========================================
   PAGE HERO
========================================= */

.page-hero {

    position: relative;

    min-height: 590px;

    margin-top: 86px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            120deg,
            #0a294d,
            #1455b8 55%,
            #21764b
        );

    color: white;

    overflow: hidden;
}


.page-hero::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -220px;
    top: -250px;

    border-radius: 50%;

    border: 100px solid rgba(100,215,25,.14);

}


.page-hero::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: 17%;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(244,106,0,.2);

}


.page-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(255,255,255,.08),
            transparent 35%
        );

}


.page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.page-hero .eyebrow {

    color: var(--green);

}


.page-hero h1 {

    font-size: clamp(50px, 7vw, 85px);

    line-height: .98;

    letter-spacing: -3px;

    margin-bottom: 28px;

}


.page-hero h1 span {

    color: var(--green);

}


.page-hero p {

    max-width: 650px;

    font-size: 19px;

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

}


/* =========================================
   ABOUT INTRO
========================================= */

.about-intro {

    background: white;

}


.about-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

}


.about-intro h2 {

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1;

    max-width: 520px;

}


.about-intro-text {

    max-width: 650px;

}


.about-intro-text p {

    color: var(--text);

    margin-bottom: 20px;

}


.about-intro-text .lead {

    font-size: 21px;

    line-height: 1.5;

    color: var(--dark);

}


/* =========================================
   STORY
========================================= */

.story-section {

    background: #f5f6f3;

    padding: 110px 0;

}


.story-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 85px;

    align-items: center;

}


.story-image {

    height: 650px;

    overflow: hidden;

}


.story-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.story-content h2 {

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1;

    margin-bottom: 28px;

}


.story-content p {

    color: var(--text);

    margin-bottom: 18px;

}


.story-highlight {

    margin-top: 35px;

    padding: 28px;

    background: white;

    border-left: 5px solid var(--orange);

}


.story-highlight strong {

    display: block;

    color: var(--blue);

    letter-spacing: 1px;

    margin-bottom: 7px;

}


.story-highlight span {

    display: block;

    color: var(--light-text);

    font-size: 14px;

}


/* =========================================
   MISSION / VISION
========================================= */

.mission-section {

    background: white;

}


.mission-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


.mission-card {

    position: relative;

    padding: 55px;

    min-height: 410px;

    overflow: hidden;

}


.mission-card.mission {

    background: #edf7e9;

}


.mission-card.vision {

    background: #eef3fb;

}


.card-number {

    position: absolute;

    right: 35px;
    top: 30px;

    font-size: 12px;

    font-weight: 800;

    color: var(--light-text);

}


.mission-card h2 {

    max-width: 480px;

    font-size: 37px;

    line-height: 1.05;

    margin-bottom: 25px;

}


.mission-card p {

    max-width: 540px;

    color: var(--text);

}


/* =========================================
   VALUES
========================================= */

.values-section {

    background: #111827;

    color: white;

}


.values-heading {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}


.values-heading h2 {

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1;

    letter-spacing: -2px;

}


.values-heading p {

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

    max-width: 450px;

}


.values-heading .section-label {

    grid-column: 1 / -1;

    margin-bottom: -60px;

}


.values-cards {

    display: grid;

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

    border-top: 1px solid rgba(255,255,255,.15);

}


.about-value {

    padding: 38px 30px;

    min-height: 260px;

    border-right: 1px solid rgba(255,255,255,.15);

    border-bottom: 1px solid rgba(255,255,255,.15);

}


.about-value:nth-child(3n + 1) {

    border-left: 1px solid rgba(255,255,255,.15);

}


.about-value span {

    color: var(--green);

    font-size: 12px;

    font-weight: 800;

}


.about-value h3 {

    font-size: 25px;

    margin: 18px 0 12px;

}


.about-value p {

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

    font-size: 14px;

}


/* =========================================
   APPROACH
========================================= */

.approach-section {

    padding: 120px 0;

    background: white;

}


.approach-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

}


.approach-title h2 {

    font-size: clamp(48px, 6vw, 75px);

    line-height: .95;

    letter-spacing: -3px;

}


.approach-title h2 span {

    color: var(--orange);

}


.approach-content {

    max-width: 650px;

}


.approach-lead {

    font-size: 23px;

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 20px;

}


.approach-content > p:not(.approach-lead) {

    color: var(--text);

}


.approach-steps {

    margin-top: 40px;

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

}


.approach-step {

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 15px;

    padding: 22px 0;

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

}


.approach-step > strong {

    color: var(--orange);

    font-size: 13px;

}


.approach-step h3 {

    font-size: 18px;

    margin-bottom: 3px;

}


.approach-step p {

    color: var(--light-text);

    font-size: 14px;

}


/* =========================================
   CBC
========================================= */

.cbc-section {

    background: #f5f6f3;

}


.cbc-grid {

    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 100px;

    align-items: center;

}


.cbc-content h2 {

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1;

    margin-bottom: 25px;

}


.cbc-content p {

    max-width: 650px;

    color: var(--text);

    margin-bottom: 18px;

}


.cbc-content .lead {

    font-size: 20px;

    color: var(--dark);

}


.cbc-box {

    min-height: 420px;

    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: white;

    border-top: 7px solid var(--orange);

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

}


.cbc-logo-mark {

    width: 90px;
    height: 90px;

    display: flex;

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

    margin-bottom: 30px;

    background: var(--blue);

    color: white;

    font-size: 25px;

    font-weight: 900;

}


.cbc-box h3 {

    font-size: 34px;

    line-height: 1.05;

    margin-bottom: 15px;

}


.cbc-box p {

    color: var(--light-text);

}


/* =========================================
   FOUNDER
========================================= */

.founder-about {

    background: white;

}


.founder-about-grid {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 90px;

    align-items: center;

}


.founder-about-photo {

    height: 600px;

    overflow: hidden;

}


.founder-about-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.founder-about-content h2 {

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1;

    margin-bottom: 8px;

}


.founder-about-content h3 {

    color: var(--orange);

    margin-bottom: 25px;

}


.founder-about-content p {

    color: var(--text);

    margin-bottom: 17px;

    max-width: 650px;

}


/* =========================================
   ABOUT IMPACT
========================================= */

.about-impact {

    padding: 120px 0;

    background:
        linear-gradient(
            120deg,
            #0b3475,
            #1455b8
        );

    color: white;

}


.about-impact-content {

    max-width: 850px;

}


.about-impact .section-label {

    color: var(--green);

}


.about-impact h2 {

    font-size: clamp(45px, 6vw, 75px);

    line-height: .98;

    letter-spacing: -3px;

    margin-bottom: 30px;

}


.about-impact p {

    max-width: 720px;

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

    font-size: 17px;

    margin-bottom: 18px;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .about-intro-grid,
    .story-grid,
    .mission-grid,
    .approach-grid,
    .cbc-grid,
    .founder-about-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .values-heading {

        display: block;

    }


    .values-heading .section-label {

        margin-bottom: 18px;

    }


    .values-cards {

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

    }


    .about-value:nth-child(3n + 1) {

        border-left: none;

    }


    .about-value:nth-child(odd) {

        border-left: 1px solid rgba(255,255,255,.15);

    }

}


@media (max-width: 600px) {

    .page-hero {

        min-height: 550px;

    }


    .page-hero h1 {

        font-size: 48px;

    }


    .page-hero p {

        font-size: 16px;

    }


    .story-image,
    .founder-about-photo {

        height: 430px;

    }


    .mission-card {

        padding: 35px;

    }


    .mission-card h2 {

        font-size: 30px;

    }


    .values-cards {

        grid-template-columns: 1fr;

    }


    .about-value {

        border-left: 1px solid rgba(255,255,255,.15) !important;

    }


    .cbc-box {

        min-height: 350px;

        padding: 35px;

    }


    .about-impact h2 {

        font-size: 48px;

    }

}