/* ==========================================================
   IBIMA CBO
   ABOUT US PAGE
   ==========================================================

   Page-specific styling only.
   Global header, navbar, buttons and footer remain
   controlled by the master stylesheet.
========================================================== */

/* ==========================================================
   01. ABOUT HERO
   IBIMA CBO ABOUT PAGE
========================================================== */

.about-hero {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: center;

    overflow: hidden;

    /*
       LEFT:
       Deep IBIMA blue

       RIGHT:
       Community photograph
    */

    background:

        linear-gradient(
            90deg,

            rgba(3, 25, 77, 0.99) 0%,

            rgba(3, 25, 77, 0.97) 30%,

            rgba(3, 25, 77, 0.86) 42%,

            rgba(3, 25, 77, 0.55) 57%,

            rgba(3, 25, 77, 0.18) 73%,

            rgba(3, 25, 77, 0.02) 100%
        ),

        url("../images/about-hero.jpg")
        center center /
        cover no-repeat;

}


/* ==========================================================
   SUBTLE DECORATIVE PATTERN
========================================================== */

.about-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: 0.08;

    background-image:

        radial-gradient(
            circle,
            rgba(255,255,255,0.35) 1px,
            transparent 1px
        );

    background-size: 18px 18px;

    pointer-events: none;
}


/* ==========================================================
   GREEN CURVED DIVIDER
========================================================== */

.about-hero::after {

    content: "";

    position: absolute;

    left: -5%;

    bottom: -52px;

    width: 110%;

    height: 92px;

    z-index: 4;

    background: #ffffff;

    border-radius:
        50% 50% 0 0 /
        75% 75% 0 0;

    border-top:
        7px solid var(--ibima-green);

}


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

.about-hero .container {

    position: relative;

    z-index: 3;
}


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

.about-hero-content {

    width: 53%;

    max-width: 600px;

    padding: 62px 0 78px;
}


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

.about-hero-content h1 {

    margin: 0;

    color: #ffffff;

    font-size: 46px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -0.6px;
}


/* ==========================================================
   GREEN TITLE LINE
========================================================== */

.about-hero-line {

    width: 78px;

    height: 4px;

    margin:
        13px 0 18px;

    border-radius: 10px;

    background: var(--ibima-green);
}


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

.about-hero-content p {

    max-width: 575px;

    margin: 0;

    color:
        rgba(255,255,255,0.95);

    font-size: 16px;

    line-height: 1.72;

}


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

@media (max-width: 992px) {

    .about-hero {

        min-height: 320px;

        background:

            linear-gradient(
                90deg,
                rgba(3,25,77,0.99) 0%,
                rgba(3,25,77,0.94) 42%,
                rgba(3,25,77,0.60) 65%,
                rgba(3,25,77,0.15) 100%
            ),

            url("../images/about-hero.jpg")
            center center /
            cover no-repeat;
    }


    .about-hero-content {

        width: 58%;

        padding:
            55px 0
            70px;
    }


    .about-hero-content h1 {

        font-size: 40px;
    }


    .about-hero-content p {

        font-size: 15px;

        line-height: 1.7;
    }

}


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

@media (max-width: 768px) {

    .about-hero {

        min-height: 350px;

        display: flex;

        align-items: flex-start;

        background:

            linear-gradient(
                180deg,

                rgba(3,25,77,0.98) 0%,

                rgba(3,25,77,0.95) 35%,

                rgba(3,25,77,0.76) 55%,

                rgba(3,25,77,0.35) 75%,

                rgba(3,25,77,0.12) 100%
            ),

            url("../images/about-hero.jpg")
            center center /
            cover no-repeat;
    }


    /* ------------------------------------------------------
       MOBILE PATTERN
    ------------------------------------------------------ */

    .about-hero::before {

        opacity: 0.06;

        background-size: 16px 16px;
    }


    /* ------------------------------------------------------
       MOBILE CURVE
    ------------------------------------------------------ */

    .about-hero::after {

        left: -10%;

        bottom: -34px;

        width: 120%;

        height: 62px;

        border-top-width: 5px;

        border-radius:
            50% 50% 0 0 /
            75% 75% 0 0;
    }


    /* ------------------------------------------------------
       MOBILE CONTAINER
    ------------------------------------------------------ */

    .about-hero .container {

        width: 90%;
    }


    /* ------------------------------------------------------
       MOBILE CONTENT
    ------------------------------------------------------ */

    .about-hero-content {

        width: 100%;

        max-width: 100%;

        padding:
            38px 0
            75px;
    }


    /* ------------------------------------------------------
       MOBILE TITLE
    ------------------------------------------------------ */

    .about-hero-content h1 {

        font-size: 31px;

        line-height: 1.18;

        letter-spacing: -0.3px;
    }


    /* ------------------------------------------------------
       MOBILE GREEN LINE
    ------------------------------------------------------ */

    .about-hero-line {

        width: 58px;

        height: 3px;

        margin:
            10px 0
            14px;
    }


    /* ------------------------------------------------------
       MOBILE DESCRIPTION
    ------------------------------------------------------ */

    .about-hero-content p {

        max-width: 100%;

        font-size: 13.5px;

        line-height: 1.65;

        color:
            rgba(255,255,255,0.96);
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 480px) {

    .about-hero {

        min-height: 340px;

        background:

            linear-gradient(
                180deg,

                rgba(3,25,77,0.99) 0%,

                rgba(3,25,77,0.94) 38%,

                rgba(3,25,77,0.68) 60%,

                rgba(3,25,77,0.25) 82%,

                rgba(3,25,77,0.10) 100%
            ),

            url("../images/about-hero.jpg")
            center center /
            cover no-repeat;
    }


    .about-hero-content {

        padding:
            32px 0
            68px;
    }


    .about-hero-content h1 {

        font-size: 28px;

        line-height: 1.18;
    }


    .about-hero-line {

        width: 52px;

        height: 3px;

        margin:
            9px 0
            13px;
    }


    .about-hero-content p {

        font-size: 13px;

        line-height: 1.62;
    }


    .about-hero::after {

        bottom: -30px;

        height: 55px;

        border-top-width: 5px;
    }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 360px) {

    .about-hero {

        min-height: 330px;
    }


    .about-hero-content {

        padding:
            29px 0
            65px;
    }


    .about-hero-content h1 {

        font-size: 26px;
    }


    .about-hero-content p {

        font-size: 12.5px;
    }

}


/* ==========================================================
   03. FOUNDATION SECTION
========================================================== */

.about-foundation {

    padding: 45px 0 65px;

    background: #ffffff;
}


.foundation-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.1fr;

    gap: 0;
}


.foundation-card {

    padding: 18px 30px;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    border-right: 1px solid var(--border-color);
}


.foundation-card:last-child {

    border-right: none;
}


.foundation-icon {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 27px;

    background: var(--ibima-green);
}


.mission-card .foundation-icon {

    background: var(--ibima-blue);
}


.goals-card .foundation-icon {

    background: #14743e;
}


.foundation-content {

    flex: 1;
}


.foundation-content h2 {

    margin: 3px 0 12px;

    color: var(--ibima-blue);

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;
}


.vision-card .foundation-content h2,
.goals-card .foundation-content h2 {

    color: var(--ibima-green);
}


.foundation-content p {

    margin: 0;

    color: var(--text-color);

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================================
   04. GOALS
========================================================== */

.goals-list {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.goals-list li {

    display: flex;

    align-items: flex-start;

    gap: 9px;
}


.goals-list li span {

    width: 19px;

    height: 19px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1px;

    border-radius: 50%;

    background: #e8f5ed;

    color: var(--ibima-green);

    font-size: 10px;

    font-weight: 800;
}


.goals-list li p {

    margin: 0;

    color: var(--text-color);

    font-size: 11px;

    line-height: 1.45;
}



/* ==========================================================
   05. CORE VALUES
========================================================== */

.values-section {

    padding: 65px 0 70px;

    background: #ffffff;

    border-top: 1px solid #edf0f4;
}


.about-section-heading {

    margin-bottom: 32px;

    text-align: center;
}


.about-section-heading h2 {

    margin: 0;

    color: var(--ibima-blue);

    font-size: 32px;

    line-height: 1.2;

    font-weight: 800;
}


.about-section-heading span {

    display: block;

    width: 55px;

    height: 3px;

    margin: 10px auto 0;

    border-radius: 10px;

    background: var(--ibima-green);
}


/* ==========================================================
   06. VALUES GRID
========================================================== */

.values-grid {

    display: grid;

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

    gap: 10px;
}


.value-card {

    min-height: 185px;

    padding: 18px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

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

    border-radius: 9px;

    background: #ffffff;

    box-shadow: var(--shadow-small);

    transition: var(--transition);
}


.value-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-medium);
}


/* ==========================================================
   07. VALUE ICON
========================================================== */

.value-icon {

    width: 57px;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 11px;

    border-radius: 50%;

    font-size: 29px;
}


.value-card h3 {

    margin: 0 0 8px;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 800;
}


.value-card p {

    margin: 0;

    color: var(--text-color);

    font-size: 10px;

    line-height: 1.55;
}


/* ==========================================================
   08. VALUE COLORS
========================================================== */

.value-green .value-icon {

    background: #e8f6ee;

    color: var(--ibima-green);
}


.value-green h3 {

    color: var(--ibima-green);
}


.value-blue .value-icon {

    background: #edf3ff;

    color: #1655aa;
}


.value-blue h3 {

    color: #1655aa;
}


.value-orange .value-icon {

    background: #fff0e5;

    color: var(--ibima-orange);
}


.value-orange h3 {

    color: var(--ibima-orange);
}


.value-purple .value-icon {

    background: #f2ecff;

    color: var(--ibima-purple);
}


.value-purple h3 {

    color: var(--ibima-purple);
}


.value-teal .value-icon {

    background: #e8f7f8;

    color: var(--ibima-teal);
}


.value-teal h3 {

    color: var(--ibima-teal);
}


.value-navy .value-icon {

    background: #edf2ff;

    color: var(--ibima-blue);
}


.value-navy h3 {

    color: var(--ibima-blue);
}



/* ==========================================================
   09. MOTTO
========================================================== */

.about-motto {

    padding: 0 0 55px;

    background: #ffffff;
}


.motto-box {

    min-height: 105px;

    padding: 22px 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    border: 1px solid #dfe9e3;

    border-radius: 10px;

    background:

        linear-gradient(
            90deg,
            #f5faf7,
            #ffffff,
            #f5faf7
        );

    box-shadow: var(--shadow-small);
}


.motto-content {

    text-align: center;
}


.motto-content span {

    display: block;

    margin-bottom: 3px;

    color: var(--ibima-green);

    font-size: 14px;

    font-weight: 800;
}


.motto-content h2 {

    margin: 0;

    color: var(--ibima-blue);

    font-size: 22px;

    line-height: 1.35;

    font-weight: 800;
}


.motto-quote {

    color: var(--ibima-green);

    font-size: 30px;
}


.motto-quote-right {

    align-self: flex-end;
}



/* ==========================================================
   10. ABOUT CTA
========================================================== */

.about-cta {

    padding: 55px 0;

    background:

        linear-gradient(
            110deg,
            var(--ibima-blue-dark),
            var(--ibima-blue)
        );

    color: #ffffff;
}


.about-cta-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.about-cta-content > div:first-child {

    flex: 1;
}


.about-cta-content span {

    display: block;

    margin-bottom: 6px;

    color: #7dd6a9;

    font-size: 14px;

    font-weight: 800;
}


.about-cta-content h2 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;
}


.about-cta-content p {

    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,0.85);

    font-size: 15px;

    line-height: 1.7;
}


.about-cta-buttons {

    display: flex;

    gap: 12px;

    flex-shrink: 0;
}


.about-cta-buttons .btn-primary {

    min-width: 145px;
}


.about-cta-buttons .btn-outline {

    min-width: 145px;
}



/* ==========================================================
   11. LARGE TABLETS
========================================================== */

@media (max-width: 1200px) {

    .foundation-card {

        padding: 18px 20px;
    }


    .values-grid {

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

        gap: 15px;
    }


    .value-card {

        min-height: 190px;
    }

}



/* ==========================================================
   12. TABLET
========================================================== */

@media (max-width: 992px) {

    .about-hero {

        min-height: 320px;
    }


    .about-hero-content {

        width: 58%;
    }


    .about-hero-content h1 {

        font-size: 40px;
    }


    .foundation-grid {

        grid-template-columns:
            1fr
            1fr;
    }


    .foundation-card {

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


    .foundation-card:nth-child(2) {

        border-right: none;
    }


    .foundation-card:last-child {

        grid-column: 1 / -1;

        border-right: none;

        border-bottom: none;
    }


    .values-grid {

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


    .about-cta-content {

        align-items: flex-start;

        flex-direction: column;
    }


    .about-cta-buttons {

        width: 100%;
    }

}



/* ==========================================================
   13. MOBILE
========================================================== */

@media (max-width: 768px) {


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

    .about-hero {

        min-height: 300px;

        align-items: flex-end;

        background:

            linear-gradient(
                180deg,
                rgba(3,25,77,0.25) 0%,
                rgba(3,25,77,0.78) 48%,
                rgba(3,25,77,0.98) 100%
            ),

            url("../images/about-hero.jpg")
            center center /
            cover no-repeat;
    }


    .about-hero::after {

        bottom: -38px;

        height: 65px;

        border-top-width: 6px;
    }


    .about-hero-content {

        width: 100%;

        padding: 50px 0 65px;
    }


    .about-hero-content h1 {

        font-size: 32px;

        line-height: 1.15;
    }


    .about-hero-line {

        width: 55px;

        height: 3px;

        margin: 9px 0 13px;
    }


    .about-hero-content p {

        max-width: 100%;

        font-size: 13px;

        line-height: 1.65;
    }



    /* ------------------------------------------------------
       FOUNDATION
    ------------------------------------------------------ */

    .about-foundation {

        padding: 30px 0 45px;
    }


    .foundation-grid {

        display: flex;

        flex-direction: column;

        gap: 0;
    }


    .foundation-card {

        padding: 22px 0;

        border-right: none;

        border-bottom: 1px solid #e8ebf0;
    }


    .foundation-card:last-child {

        border-bottom: none;
    }


    .foundation-icon {

        width: 52px;

        height: 52px;

        font-size: 24px;
    }


    .foundation-content h2 {

        margin-top: 2px;

        margin-bottom: 8px;

        font-size: 20px;
    }


    .foundation-content p {

        font-size: 13px;

        line-height: 1.65;
    }


    /* ------------------------------------------------------
       GOALS
    ------------------------------------------------------ */

    .goals-card {

        position: relative;
    }


    .goals-card::after {

        content: "+";

        position: absolute;

        right: 3px;

        top: 25px;

        color: var(--ibima-blue);

        font-size: 25px;

        font-weight: 400;
    }


    .goals-list {

        gap: 9px;
    }


    .goals-list li p {

        font-size: 12px;

        line-height: 1.45;
    }



    /* ------------------------------------------------------
       VALUES
    ------------------------------------------------------ */

    .values-section {

        padding: 48px 0 50px;
    }


    .about-section-heading {

        margin-bottom: 25px;
    }


    .about-section-heading h2 {

        font-size: 27px;
    }


    .values-grid {

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

        gap: 10px;
    }


    .value-card {

        min-height: 185px;

        padding: 19px 12px;
    }


    .value-icon {

        width: 53px;

        height: 53px;

        font-size: 27px;

        margin-bottom: 10px;
    }


    .value-card h3 {

        font-size: 13px;
    }


    .value-card p {

        font-size: 10px;

        line-height: 1.55;
    }


    /* ------------------------------------------------------
       MOTTO
    ------------------------------------------------------ */

    .about-motto {

        padding: 0 0 45px;
    }


    .motto-box {

        min-height: 130px;

        padding: 22px 15px;

        gap: 12px;
    }


    .motto-content span {

        font-size: 13px;
    }


    .motto-content h2 {

        font-size: 17px;

        line-height: 1.45;
    }


    .motto-quote {

        font-size: 22px;
    }



    /* ------------------------------------------------------
       CTA
    ------------------------------------------------------ */

    .about-cta {

        padding: 45px 0;
    }


    .about-cta-content {

        text-align: center;

        align-items: center;

        gap: 25px;
    }


    .about-cta-content span {

        font-size: 13px;
    }


    .about-cta-content h2 {

        font-size: 24px;

        line-height: 1.3;
    }


    .about-cta-content p {

        font-size: 13px;

        line-height: 1.65;
    }


    .about-cta-buttons {

        width: 100%;

        flex-direction: column;

        gap: 10px;
    }


    .about-cta-buttons a {

        width: 100%;
    }

}



/* ==========================================================
   14. SMALL PHONES
========================================================== */

@media (max-width: 480px) {


    .about-hero {

        min-height: 285px;
    }


    .about-hero-content {

        padding-bottom: 58px;
    }


    .about-hero-content h1 {

        font-size: 28px;
    }


    .about-hero-content p {

        font-size: 12px;

        line-height: 1.6;
    }


    .foundation-icon {

        width: 48px;

        height: 48px;

        font-size: 22px;
    }


    .foundation-content h2 {

        font-size: 18px;
    }


    .foundation-content p {

        font-size: 12px;
    }


    .values-grid {

        gap: 8px;
    }


    .value-card {

        min-height: 175px;

        padding: 16px 9px;
    }


    .value-icon {

        width: 48px;

        height: 48px;

        font-size: 24px;
    }


    .value-card h3 {

        font-size: 12px;
    }


    .value-card p {

        font-size: 9px;
    }


    .motto-content h2 {

        font-size: 15px;
    }


    .motto-quote {

        font-size: 18px;
    }


    .about-cta-content h2 {

        font-size: 21px;
    }

}



/* ==========================================================
   15. VERY SMALL PHONES
========================================================== */

@media (max-width: 360px) {

    .about-hero-content h1 {

        font-size: 25px;
    }


    .values-grid {

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


    .value-card {

        min-height: 165px;
    }


    .value-card p {

        font-size: 8.5px;
    }

}
/* PREMIUM ABOUT VISUAL POLISH */
.about-page{background:#f7faf8;overflow:hidden}
.about-foundation{position:relative;padding:96px 0 105px;background:radial-gradient(circle at 8% 12%,rgba(20,132,90,.10),transparent 26%),radial-gradient(circle at 92% 88%,rgba(232,137,18,.09),transparent 24%),#f7faf8}
.about-foundation:before{content:"";position:absolute;left:-120px;top:100px;width:330px;height:330px;border-radius:50%;background:url('../images/about-community.jpg') center/cover no-repeat;opacity:.055;filter:saturate(.7);pointer-events:none}
.foundation-grid{position:relative;z-index:1;gap:24px;grid-template-columns:repeat(3,1fr)}
.foundation-card{position:relative;min-height:300px;padding:34px 31px 31px;display:block;overflow:hidden;border:1px solid rgba(11,107,58,.10);border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 20px 55px rgba(5,55,31,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.foundation-card:before{content:"";position:absolute;right:-45px;top:-45px;width:145px;height:145px;border-radius:50%;background:var(--ibima-green);opacity:.06}
.foundation-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--ibima-green),var(--ibima-orange));transform:scaleX(.35);transform-origin:left;transition:transform .35s ease}
.foundation-card:hover{transform:translateY(-10px);box-shadow:0 30px 70px rgba(5,55,31,.13);border-color:rgba(11,107,58,.20)}
.foundation-card:hover:after{transform:scaleX(1)}
.foundation-icon{width:64px;height:64px;border-radius:20px;margin-bottom:25px;font-size:27px;box-shadow:0 10px 25px rgba(5,55,31,.10)}
.foundation-content h2{font-size:25px;margin:0 0 13px}
.foundation-content p{font-size:14px;line-height:1.8;color:#5f6f66}
.goals-list{gap:11px}.goals-list li{padding:7px 0;border-bottom:1px dashed #dce8e1}.goals-list li:last-child{border-bottom:0}.goals-list li span{width:25px;height:25px;font-size:11px}.goals-list li p{font-size:12px;line-height:1.5}
.values-section{position:relative;padding:105px 0;background:#fff}.values-section:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,107,58,.025),transparent 42%,rgba(232,137,18,.025));pointer-events:none}
.about-section-heading{position:relative;z-index:1;margin-bottom:45px}.about-section-heading:before{content:"WHO WE ARE";display:block;margin-bottom:8px;color:var(--ibima-green);font-size:10px;font-weight:900;letter-spacing:.18em}.about-section-heading h2{font-size:clamp(35px,4vw,52px);letter-spacing:-.04em}.about-section-heading span{width:75px;height:4px;margin-top:14px}
.values-grid{position:relative;z-index:1;grid-template-columns:repeat(4,1fr);gap:18px}.value-card{position:relative;min-height:215px;padding:28px 22px 25px;border:1px solid #e6eee9;border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(5,55,31,.055);overflow:hidden}.value-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--ibima-green),var(--ibima-orange));transform:scaleX(.18);transform-origin:left;transition:transform .3s ease}.value-card:hover:before{transform:scaleX(1)}.value-card:hover{transform:translateY(-7px);box-shadow:0 22px 45px rgba(5,55,31,.10)}.value-icon{width:58px;height:58px;border-radius:18px;margin-bottom:17px}.value-card h3{font-size:17px;margin-bottom:8px}.value-card p{font-size:12px;line-height:1.65}
.about-motto{padding:25px 0 85px;background:#fff}.motto-box{position:relative;min-height:190px;padding:42px 70px;border:0;border-radius:30px;background:linear-gradient(135deg,#eff9f2,#fff9ee);box-shadow:0 22px 60px rgba(5,55,31,.08);overflow:hidden}.motto-box:before,.motto-box:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.motto-box:before{width:210px;height:210px;left:-105px;bottom:-130px;background:rgba(11,107,58,.10)}.motto-box:after{width:180px;height:180px;right:-90px;top:-100px;background:rgba(232,137,18,.10)}.motto-content{position:relative;z-index:1;max-width:800px}.motto-content span{font-size:11px;letter-spacing:.16em;text-transform:uppercase}.motto-content h2{font-size:clamp(24px,3vw,37px);letter-spacing:-.025em}
.about-cta{position:relative;overflow:hidden;padding:80px 0;background:linear-gradient(120deg,#032f1c,#0b6b3a 58%,#0d8150)}.about-cta:before{content:"";position:absolute;width:460px;height:460px;right:-160px;top:-220px;border-radius:50%;border:70px solid rgba(255,255,255,.05)}
@media(max-width:992px){.foundation-grid{grid-template-columns:1fr 1fr}.foundation-card:last-child{grid-column:1/-1}.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.about-foundation{padding:75px 0}.foundation-grid{grid-template-columns:1fr}.foundation-card:last-child{grid-column:auto}.values-section{padding:75px 0}.values-grid{grid-template-columns:1fr 1fr}.motto-box{padding:35px 25px}.motto-quote{display:none}}
@media(max-width:480px){.values-grid{grid-template-columns:1fr}.foundation-card{min-height:0}.about-section-heading h2{font-size:35px}}