/* ============================================================
   BLESSINGS NGO
   OUR IMPACT PAGE
   File: css/impact.css

   Designed specifically for:
       <main id="impact-page">

   Controls ONLY page content inside #impact-page.

   Shared elements controlled by styles.css:
       - Topbar
       - Header
       - Navigation
       - Container
       - CTA
       - Footer
       - WhatsApp

   ============================================================ */


/* ============================================================
   PAGE BASE
   ============================================================ */

#impact-page{
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
    color:#263746;
}

#impact-page *,
#impact-page *::before,
#impact-page *::after{
    box-sizing:border-box;
}

#impact-page img{
    display:block;
    max-width:100%;
    height:auto;
}

#impact-page a{
    text-decoration:none;
}


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

#impact-page .impact-hero{
    position:relative;

    width:100%;
    min-height:400px;

    display:flex;
    align-items:center;

    margin:0;
    padding:95px 0 105px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(245,130,32,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(21,155,155,.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #002e51 0%,
            #005b91 100%
        );

    color:#fff;
}


/* Decorative floating circle */

#impact-page .impact-hero::before{
    content:"";

    position:absolute;

    width:230px;
    height:230px;

    left:-100px;
    top:25px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;

    pointer-events:none;

    animation:
        impactFloat 7s ease-in-out infinite;
}


/* White curved bottom */

#impact-page .impact-hero::after{
    content:"";

    position:absolute;

    left:-5%;
    right:-5%;
    bottom:-38px;

    height:75px;

    border-radius:50% 50% 0 0;

    background:#fff;

    pointer-events:none;
}


/* ============================================================
   HERO INNER
   ============================================================ */

#impact-page .impact-hero-inner{
    position:relative;
    z-index:2;

    width:100%;
}

#impact-page .impact-hero-content{
    width:100%;
    max-width:850px;

    margin:0 auto;

    text-align:center;

    animation:
        impactHeroFade .9s ease both;
}


/* ============================================================
   GENERAL EYEBROW
   ============================================================ */

#impact-page .impact-eyebrow{
    display:inline-flex;

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

    gap:8px;

    margin:0 0 18px;
    padding:8px 15px;

    border-radius:50px;

    font-family:"DM Sans",sans-serif;
    font-size:12px;
    line-height:1.25;
    font-weight:800;

    letter-spacing:1.4px;
    text-transform:uppercase;
}


/* Hero eyebrow */

#impact-page .impact-hero .impact-eyebrow{
    border:1px solid rgba(255,255,255,.25);

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

    color:#fff;

    animation:
        impactEyebrow .7s ease .15s both;
}


/* Non-hero eyebrow */

#impact-page .impact-section .impact-eyebrow,
#impact-page .impact-stories-card .impact-eyebrow{
    padding:0;

    border:0;
    border-radius:0;

    background:transparent;

    color:#f58220;
}


/* ============================================================
   HERO TITLE
   ============================================================ */

#impact-page .impact-hero h1{
    margin:0 0 20px;
    padding:0;

    color:#fff;

    font-family:"Playfair Display",serif;
    font-size:clamp(40px,5vw,64px);
    line-height:1.08;
    font-weight:700;

    letter-spacing:-1.5px;

    animation:
        impactTitle .8s ease .25s both;
}


/* ============================================================
   HERO TEXT
   ============================================================ */

#impact-page .impact-hero p{
    max-width:760px;

    margin:0 auto;
    padding:0;

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

    font-family:"DM Sans",sans-serif;
    font-size:18px;
    line-height:1.8;
    font-weight:400;

    animation:
        impactHeroText .8s ease .4s both;
}


/* ============================================================
   HERO ANIMATIONS
   ============================================================ */

@keyframes impactHeroFade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes impactEyebrow{

    from{
        opacity:0;
        transform:translateY(-12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes impactTitle{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes impactHeroText{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes impactFloat{

    0%,
    100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(20px,15px);
    }

}


/* ============================================================
   COMMON SECTION
   ============================================================ */

#impact-page .impact-section{
    position:relative;

    width:100%;

    margin:0;
    padding:85px 0;

    background:#fff;
}

#impact-page .impact-section-soft{
    background:#f7fafc;
}


/* ============================================================
   TWO COLUMN INTRO
   ============================================================ */

#impact-page .impact-two-col{
    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(280px,.75fr);

    gap:60px;

    align-items:center;
}


/* ============================================================
   INTRO COPY
   ============================================================ */

#impact-page .impact-intro-copy{
    min-width:0;
}

#impact-page .impact-intro-copy .impact-eyebrow{
    margin-bottom:12px;
}

#impact-page .impact-intro-copy h2{
    margin:0 0 20px;
    padding:0;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:clamp(32px,4vw,46px);
    line-height:1.18;
    font-weight:700;
}

#impact-page .impact-intro-copy p{
    margin:0 0 17px;
    padding:0;

    color:#263746;

    font-family:"DM Sans",sans-serif;
    font-size:16px;
    line-height:1.85;
}

#impact-page .impact-intro-copy p:last-child{
    margin-bottom:0;
}


/* ============================================================
   YEAR CARD
   ============================================================ */

#impact-page .impact-year-card{
    position:relative;

    min-width:0;

    padding:38px 30px;

    overflow:hidden;

    border:1px solid #e2eaf0;
    border-radius:22px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 15px 40px rgba(0,61,104,.10);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

#impact-page .impact-year-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            #005b91,
            #f58220
        );
}

#impact-page .impact-year-card::after{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    right:-55px;
    bottom:-55px;

    border-radius:50%;

    background:rgba(245,130,32,.07);

    pointer-events:none;
}

#impact-page .impact-year-card:hover{
    transform:translateY(-7px);

    border-color:rgba(0,91,145,.18);

    box-shadow:
        0 22px 50px rgba(0,61,104,.14);
}


/* ============================================================
   YEAR ICON
   ============================================================ */

#impact-page .impact-year-icon{
    width:58px;
    height:58px;

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

    margin:0 auto 18px;

    border-radius:16px;

    background:#eaf7fb;
    color:#005b91;

    font-size:23px;

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

#impact-page .impact-year-card:hover .impact-year-icon{
    transform:scale(1.08) rotate(-4deg);

    background:#005b91;
    color:#fff;
}


/* ============================================================
   YEAR LABEL
   ============================================================ */

#impact-page .impact-year-label{
    display:block;

    margin:0 0 8px;

    color:#f58220;

    font-family:"DM Sans",sans-serif;
    font-size:11px;
    line-height:1.3;
    font-weight:800;

    letter-spacing:1.5px;
}


/* ============================================================
   YEAR
   ============================================================ */

#impact-page .impact-year-card strong{
    display:block;

    margin:0 0 13px;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:58px;
    line-height:1;
    font-weight:700;
}


/* ============================================================
   YEAR DESCRIPTION
   ============================================================ */

#impact-page .impact-year-card p{
    position:relative;
    z-index:2;

    max-width:310px;

    margin:0 auto;
    padding:0;

    color:#667786;

    font-family:"DM Sans",sans-serif;
    font-size:14px;
    line-height:1.7;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

#impact-page .impact-section-heading{
    width:100%;
    max-width:800px;

    margin:0 auto 48px;

    text-align:center;
}

#impact-page .impact-section-heading .impact-eyebrow{
    margin-bottom:10px;
}

#impact-page .impact-section-heading h2{
    margin:0 0 16px;
    padding:0;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:clamp(30px,4vw,44px);
    line-height:1.18;
    font-weight:700;

    transition:color .3s ease;
}

#impact-page .impact-section-heading:hover h2{
    color:#005b91;
}

#impact-page .impact-section-heading p{
    margin:0;
    padding:0;

    color:#667786;

    font-family:"DM Sans",sans-serif;
    font-size:16px;
    line-height:1.8;
}


/* ============================================================
   IMPACT STATS GRID
   ============================================================ */

#impact-page .impact-stats-grid{
    width:100%;

    display:grid;

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

    gap:22px;
}


/* ============================================================
   IMPACT STAT CARD
   ============================================================ */

#impact-page .impact-stat-card{
    position:relative;

    width:100%;
    min-width:0;

    min-height:275px;

    margin:0;
    padding:28px;

    overflow:hidden;

    border:1px solid #e2eaf0;
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 12px 35px rgba(0,61,104,.08);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Top colour line */

#impact-page .impact-stat-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:#005b91;
}

#impact-page .impact-stat-card:nth-child(2)::before{
    background:#42a64b;
}

#impact-page .impact-stat-card:nth-child(3)::before{
    background:#f58220;
}

#impact-page .impact-stat-card:nth-child(4)::before{
    background:#7745a8;
}

#impact-page .impact-stat-card:nth-child(5)::before{
    background:#d83b79;
}

#impact-page .impact-stat-card:nth-child(6)::before{
    background:#159b9b;
}


/* Decorative circle */

#impact-page .impact-stat-card::after{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-65px;
    bottom:-65px;

    border-radius:50%;

    background:rgba(0,91,145,.035);

    pointer-events:none;

    transition:
        transform .4s ease;
}

#impact-page .impact-stat-card:hover::after{
    transform:scale(1.3);
}


/* Hover */

#impact-page .impact-stat-card:hover{
    transform:translateY(-9px);

    border-color:rgba(0,91,145,.20);

    box-shadow:
        0 22px 48px rgba(0,61,104,.14);
}


/* ============================================================
   STAT ICON
   ============================================================ */

#impact-page .impact-stat-icon{
    position:relative;
    z-index:2;

    width:50px;
    height:50px;

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

    margin:0 0 18px;

    border-radius:14px;

    background:#eaf7fb;
    color:#005b91;

    font-size:20px;

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

#impact-page .impact-stat-card:nth-child(2) .impact-stat-icon{
    background:#edf8ee;
    color:#42a64b;
}

#impact-page .impact-stat-card:nth-child(3) .impact-stat-icon{
    background:#fff3e7;
    color:#f58220;
}

#impact-page .impact-stat-card:nth-child(4) .impact-stat-icon{
    background:#f3edf8;
    color:#7745a8;
}

#impact-page .impact-stat-card:nth-child(5) .impact-stat-icon{
    background:#fcecf3;
    color:#d83b79;
}

#impact-page .impact-stat-card:nth-child(6) .impact-stat-icon{
    background:#e8f7f7;
    color:#159b9b;
}

#impact-page .impact-stat-card:hover .impact-stat-icon{
    transform:scale(1.08) rotate(-4deg);
    background:#005b91;
    color:#fff;
}


/* ============================================================
   STAT NUMBER
   ============================================================ */

#impact-page .impact-stat-card > strong{
    position:relative;
    z-index:2;

    display:block;

    margin:0 0 8px;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:40px;
    line-height:1;
    font-weight:700;

    transition:
        transform .3s ease,
        color .3s ease;
}

#impact-page .impact-stat-card:hover > strong{
    transform:translateX(3px);
    color:#f58220;
}


/* ============================================================
   STAT TITLE
   ============================================================ */

#impact-page .impact-stat-card h3{
    position:relative;
    z-index:2;

    margin:0 0 12px;
    padding:0;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:20px;
    line-height:1.35;
    font-weight:700;

    transition:color .3s ease;
}

#impact-page .impact-stat-card:hover h3{
    color:#005b91;
}


/* ============================================================
   STAT DESCRIPTION
   ============================================================ */

#impact-page .impact-stat-card p{
    position:relative;
    z-index:2;

    margin:0;
    padding:0;

    color:#667786;

    font-family:"DM Sans",sans-serif;
    font-size:14px;
    line-height:1.7;
}


/* ============================================================
   AREA GRID
   ============================================================ */

#impact-page .impact-area-grid{
    width:100%;

    display:grid;

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

    gap:22px;
}


/* ============================================================
   AREA CARD
   ============================================================ */

#impact-page .impact-area-card{
    position:relative;

    width:100%;
    min-width:0;

    min-height:300px;

    display:flex;
    flex-direction:column;

    margin:0;
    padding:28px;

    overflow:hidden;

    border:1px solid #e2eaf0;
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(0,61,104,.07);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

#impact-page .impact-area-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:#005b91;

    transform:scaleX(0);
    transform-origin:left;

    transition:
        transform .35s ease;
}

#impact-page .impact-area-card:nth-child(2)::before{
    background:#d83b79;
}

#impact-page .impact-area-card:nth-child(3)::before{
    background:#f58220;
}

#impact-page .impact-area-card:nth-child(4)::before{
    background:#7745a8;
}

#impact-page .impact-area-card:nth-child(5)::before{
    background:#159b9b;
}

#impact-page .impact-area-card:nth-child(6)::before{
    background:#42a64b;
}

#impact-page .impact-area-card:hover{
    transform:translateY(-8px);

    border-color:rgba(0,91,145,.18);

    box-shadow:
        0 20px 42px rgba(0,61,104,.13);
}

#impact-page .impact-area-card:hover::before{
    transform:scaleX(1);
}


/* ============================================================
   AREA ICON
   ============================================================ */

#impact-page .impact-area-icon{
    width:52px;
    height:52px;

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

    margin:0 0 19px;

    border-radius:14px;

    background:#eaf7fb;
    color:#005b91;

    font-size:21px;

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

#impact-page .impact-area-card:nth-child(2) .impact-area-icon{
    background:#fcecf3;
    color:#d83b79;
}

#impact-page .impact-area-card:nth-child(3) .impact-area-icon{
    background:#fff3e7;
    color:#f58220;
}

#impact-page .impact-area-card:nth-child(4) .impact-area-icon{
    background:#f3edf8;
    color:#7745a8;
}

#impact-page .impact-area-card:nth-child(5) .impact-area-icon{
    background:#e8f7f7;
    color:#159b9b;
}

#impact-page .impact-area-card:nth-child(6) .impact-area-icon{
    background:#edf8ee;
    color:#42a64b;
}

#impact-page .impact-area-card:hover .impact-area-icon{
    transform:scale(1.08) rotate(-4deg);

    background:#005b91;
    color:#fff;
}


/* ============================================================
   AREA TITLE
   ============================================================ */

#impact-page .impact-area-card h3{
    margin:0 0 12px;
    padding:0;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:21px;
    line-height:1.35;
    font-weight:700;

    transition:color .3s ease;
}

#impact-page .impact-area-card:hover h3{
    color:#005b91;
}


/* ============================================================
   AREA TEXT
   ============================================================ */

#impact-page .impact-area-card p{
    margin:0 0 20px;
    padding:0;

    color:#667786;

    font-family:"DM Sans",sans-serif;
    font-size:14px;
    line-height:1.7;
}


/* ============================================================
   AREA LINK
   ============================================================ */

#impact-page .impact-area-card a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:auto;

    color:#005b91;

    font-family:"DM Sans",sans-serif;
    font-size:13px;
    line-height:1.4;
    font-weight:800;

    transition:
        color .25s ease,
        gap .25s ease;
}

#impact-page .impact-area-card a i{
    font-size:11px;

    transition:
        transform .25s ease;
}

#impact-page .impact-area-card a:hover{
    color:#f58220;
    gap:11px;
}

#impact-page .impact-area-card a:hover i{
    transform:translateX(3px);
}


/* ============================================================
   IMPACT JOURNEY
   ============================================================ */

#impact-page .impact-journey-grid{
    width:100%;

    display:grid;

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

    gap:18px;
}


/* ============================================================
   JOURNEY CARD
   ============================================================ */

#impact-page .impact-journey-card{
    position:relative;

    width:100%;
    min-width:0;

    padding:28px 20px;

    border:1px solid rgba(0,91,145,.10);
    border-radius:18px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 9px 28px rgba(0,61,104,.07);

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

#impact-page .impact-journey-card:hover{
    transform:translateY(-8px);

    border-color:rgba(0,91,145,.20);

    box-shadow:
        0 18px 38px rgba(0,61,104,.12);
}


/* ============================================================
   JOURNEY NUMBER
   ============================================================ */

#impact-page .impact-journey-card > span{
    position:absolute;

    top:15px;
    right:17px;

    color:#e8eff3;

    font-family:"DM Sans",sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:900;

    transition:
        color .3s ease;
}

#impact-page .impact-journey-card:hover > span{
    color:#cfe3ec;
}


/* ============================================================
   JOURNEY ICON
   ============================================================ */

#impact-page .impact-journey-card > i{
    width:50px;
    height:50px;

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

    margin:0 auto 17px;

    border-radius:14px;

    background:#eaf7fb;
    color:#005b91;

    font-size:20px;

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

#impact-page .impact-journey-card:nth-child(2) > i{
    background:#fff3e7;
    color:#f58220;
}

#impact-page .impact-journey-card:nth-child(3) > i{
    background:#edf8ee;
    color:#42a64b;
}

#impact-page .impact-journey-card:nth-child(4) > i{
    background:#f3edf8;
    color:#7745a8;
}

#impact-page .impact-journey-card:hover > i{
    transform:scale(1.08) rotate(-4deg);

    background:#005b91;
    color:#fff;
}


/* ============================================================
   JOURNEY TITLE
   ============================================================ */

#impact-page .impact-journey-card h3{
    margin:0 0 10px;
    padding:0;

    color:#003d68;

    font-family:"Playfair Display",serif;
    font-size:20px;
    line-height:1.3;
    font-weight:700;

    transition:color .3s ease;
}

#impact-page .impact-journey-card:hover h3{
    color:#005b91;
}


/* ============================================================
   JOURNEY DESCRIPTION
   ============================================================ */

#impact-page .impact-journey-card p{
    margin:0;
    padding:0;

    color:#667786;

    font-family:"DM Sans",sans-serif;
    font-size:13px;
    line-height:1.7;
}


/* ============================================================
   BEYOND THE NUMBERS
   ============================================================ */

#impact-page .impact-stories-card{
    position:relative;

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:45px;

    align-items:center;

    margin:0;
    padding:42px 45px;

    overflow:hidden;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #002e51 0%,
            #005b91 100%
        );

    box-shadow:
        0 18px 45px rgba(0,61,104,.15);
}

#impact-page .impact-stories-card::before{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    top:-95px;
    right:-65px;

    border-radius:50%;

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

    pointer-events:none;
}

#impact-page .impact-stories-card::after{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    bottom:-90px;
    left:-50px;

    border-radius:50%;

    background:rgba(245,130,32,.10);

    pointer-events:none;
}


/* ============================================================
   STORIES CARD TEXT
   ============================================================ */

#impact-page .impact-stories-card > div:first-child{
    position:relative;
    z-index:2;
}

#impact-page .impact-stories-card .impact-eyebrow{
    color:#ffd29d;
}

#impact-page .impact-stories-card h2{
    margin:0 0 16px;
    padding:0;

    color:#fff;

    font-family:"Playfair Display",serif;
    font-size:clamp(30px,4vw,43px);
    line-height:1.18;
    font-weight:700;
}

#impact-page .impact-stories-card p{
    max-width:760px;

    margin:0 0 14px;
    padding:0;

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

    font-family:"DM Sans",sans-serif;
    font-size:15px;
    line-height:1.8;
}

#impact-page .impact-stories-card p:last-child{
    margin-bottom:0;
}


/* ============================================================
   STORIES ACTION
   ============================================================ */

#impact-page .impact-stories-action{
    position:relative;
    z-index:2;

    flex:0 0 auto;
}


/*
   Only layout/positioning for the page-specific button.
   Actual .btn / .btn-blue styling remains in styles.css.
*/

#impact-page .impact-action-btn{
    white-space:nowrap;

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

#impact-page .impact-action-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1100px){

    #impact-page .impact-two-col{
        grid-template-columns:
            minmax(0,1fr)
            minmax(270px,.7fr);

        gap:40px;
    }

    #impact-page .impact-stats-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    #impact-page .impact-area-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    #impact-page .impact-journey-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media (max-width:900px){

    #impact-page .impact-two-col{
        grid-template-columns:1fr;
        gap:35px;
    }

    #impact-page .impact-year-card{
        max-width:520px;
        width:100%;
        margin:0 auto;
    }

    #impact-page .impact-stories-card{
        grid-template-columns:1fr;
        gap:25px;
    }

    #impact-page .impact-stories-action{
        justify-self:start;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:767px){

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

    #impact-page .impact-hero{
        min-height:340px;

        padding:70px 0 80px;
    }

    #impact-page .impact-hero h1{
        font-size:38px;
        line-height:1.1;
        letter-spacing:-.8px;
    }

    #impact-page .impact-hero p{
        font-size:15px;
        line-height:1.7;
    }


    /* --------------------------------------------------------
       GENERAL SECTION
       -------------------------------------------------------- */

    #impact-page .impact-section{
        padding:65px 0;
    }


    /* --------------------------------------------------------
       INTRO
       -------------------------------------------------------- */

    #impact-page .impact-intro-copy h2{
        font-size:31px;
    }

    #impact-page .impact-intro-copy p{
        font-size:15px;
        line-height:1.8;
    }


    /* --------------------------------------------------------
       YEAR CARD
       -------------------------------------------------------- */

    #impact-page .impact-year-card{
        padding:32px 24px;
    }

    #impact-page .impact-year-card strong{
        font-size:50px;
    }


    /* --------------------------------------------------------
       SECTION HEADING
       -------------------------------------------------------- */

    #impact-page .impact-section-heading{
        margin-bottom:35px;
    }

    #impact-page .impact-section-heading h2{
        font-size:30px;
    }

    #impact-page .impact-section-heading p{
        font-size:15px;
        line-height:1.75;
    }


    /* --------------------------------------------------------
       STATS
       -------------------------------------------------------- */

    #impact-page .impact-stats-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    #impact-page .impact-stat-card{
        min-height:auto;
        padding:25px 22px;
    }

    #impact-page .impact-stat-card > strong{
        font-size:37px;
    }

    #impact-page .impact-stat-card h3{
        font-size:20px;
    }


    /* --------------------------------------------------------
       AREAS
       -------------------------------------------------------- */

    #impact-page .impact-area-grid{
        grid-template-columns:1fr;
        gap:17px;
    }

    #impact-page .impact-area-card{
        min-height:auto;
        padding:25px 22px;
    }


    /* --------------------------------------------------------
       JOURNEY
       -------------------------------------------------------- */

    #impact-page .impact-journey-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:13px;
    }

    #impact-page .impact-journey-card{
        padding:24px 15px;
    }

    #impact-page .impact-journey-card h3{
        font-size:19px;
    }


    /* --------------------------------------------------------
       STORIES
       -------------------------------------------------------- */

    #impact-page .impact-stories-card{
        padding:32px 24px;
        border-radius:18px;
    }

    #impact-page .impact-stories-card h2{
        font-size:30px;
    }

    #impact-page .impact-stories-card p{
        font-size:14px;
        line-height:1.75;
    }

    #impact-page .impact-stories-action{
        width:100%;
    }

    #impact-page .impact-action-btn{
        white-space:normal;
        width:100%;
        justify-content:center;
        text-align:center;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width:480px){

    #impact-page .impact-hero{
        padding:60px 0 70px;
    }

    #impact-page .impact-hero h1{
        font-size:33px;
    }

    #impact-page .impact-hero p{
        font-size:14px;
    }

    #impact-page .impact-hero .impact-eyebrow{
        font-size:10px;
        padding:7px 12px;
    }


    /* --------------------------------------------------------
       SECTIONS
       -------------------------------------------------------- */

    #impact-page .impact-section{
        padding:55px 0;
    }


    /* --------------------------------------------------------
       INTRO
       -------------------------------------------------------- */

    #impact-page .impact-intro-copy h2{
        font-size:29px;
    }

    #impact-page .impact-intro-copy p{
        font-size:14px;
    }


    /* --------------------------------------------------------
       YEAR
       -------------------------------------------------------- */

    #impact-page .impact-year-card{
        padding:28px 20px;
    }

    #impact-page .impact-year-card strong{
        font-size:46px;
    }


    /* --------------------------------------------------------
       SECTION HEADINGS
       -------------------------------------------------------- */

    #impact-page .impact-section-heading h2{
        font-size:28px;
    }

    #impact-page .impact-section-heading p{
        font-size:14px;
    }


    /* --------------------------------------------------------
       STAT CARDS
       -------------------------------------------------------- */

    #impact-page .impact-stat-card{
        padding:23px 19px;
    }

    #impact-page .impact-stat-card > strong{
        font-size:35px;
    }

    #impact-page .impact-stat-card h3{
        font-size:19px;
    }

    #impact-page .impact-stat-card p{
        font-size:13px;
    }


    /* --------------------------------------------------------
       AREA CARDS
       -------------------------------------------------------- */

    #impact-page .impact-area-card{
        padding:23px 19px;
    }

    #impact-page .impact-area-card h3{
        font-size:20px;
    }


    /* --------------------------------------------------------
       JOURNEY
       -------------------------------------------------------- */

    #impact-page .impact-journey-grid{
        grid-template-columns:1fr;
    }

    #impact-page .impact-journey-card{
        padding:24px 20px;
    }


    /* --------------------------------------------------------
       STORIES
       -------------------------------------------------------- */

    #impact-page .impact-stories-card{
        padding:27px 19px;
    }

    #impact-page .impact-stories-card h2{
        font-size:28px;
    }

    #impact-page .impact-stories-card p{
        font-size:13px;
    }

}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){

    #impact-page *,
    #impact-page *::before,
    #impact-page *::after{
        animation:none !important;
        transition:none !important;
    }

}