/* =========================================================
   MORIPE HOLDINGS
   ABOUT PAGE
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");


/* =========================================================
   ROOT
========================================================= */

:root {
    --navy: #08273D;
    --red: #ff0808;
    --white: #ffffff;
    --black: #111111;
    --light: #f5f5f5;
    --grey: #666666;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif;

    background: var(--white);
    color: var(--black);

    line-height: 1.7;

    overflow-x: hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;

    font-weight: 700;
    line-height: 1.1;
}


p {
    color: var(--grey);
}


.main-container {
    width: 100%;
    overflow: visible;
}


/* =========================================================
   STICKY NAVBAR SAFETY
========================================================= */

/*
   Do not add overflow:hidden or overflow-x:hidden to
   .main-container or another wrapper around .nav-bar.
   That can prevent position: sticky from behaving correctly.
*/




/* =========================================================
   NAVIGATION
   MATCHES SERVICES + ENQUIRIES
========================================================= */

.nav-bar {
    position: sticky;
    top: 0;

    z-index: 1000;

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

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

    padding: 0 6%;

    background: var(--navy);

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

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.10);
}


.nav-bar > a {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


.nav-bar .logo {
    width: auto;
    height: 67px;

    object-fit: contain;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.nav-bar ul {
    display: flex;
    align-items: center;

    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nav-bar ul li {
    position: relative;
}


.nav-bar ul li a {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 13px 0;

    color: var(--white);

    font-size: 14px;
    font-weight: 600;

    transition: 0.3s ease;
}


.nav-bar ul li a i {
    font-size: 13px;
}


.nav-bar ul li a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 5px;

    width: 0;
    height: 2px;

    background: var(--red);

    transition: width 0.3s ease;
}


.nav-bar ul li a:hover,
.nav-bar ul li a.active {
    color: var(--red);
}


.nav-bar ul li a:hover::after,
.nav-bar ul li a.active::after {
    width: 100%;
}


/* =========================================================
   HAMBURGER
========================================================= */

.hamburger {
    display: none;

    padding: 4px;

    background: transparent;

    border: none;

    color: var(--white);

    font-size: 27px;

    line-height: 1;

    cursor: pointer;

    z-index: 1001;
}


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

.about-hero {
    position: relative;

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

    display: flex;
    align-items: center;

    padding: 90px 7%;

    background: var(--white);

    overflow: hidden;
}


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

.about-hero h1 {
    position: relative;

    z-index: 2;

    width: 62%;
    max-width: 820px;

    margin: 0;

    color: var(--navy);

    font-size:
        clamp(58px, 7vw, 92px);

    font-weight: 700;

    line-height: 0.96;

    letter-spacing: -4px;

    text-align: left;
}


/* RED EYEBROW */

.about-hero h1::before {
    content: "MORIPE HOLDINGS";

    display: block;

    margin-bottom: 20px;

    font-family: "Inter", sans-serif;

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

    line-height: 1;

    letter-spacing: 2.5px;
}


/* SMALL RED LINE */

.about-hero h1::after {
    content: "";

    display: block;

    width: 65px;
    height: 4px;

    margin-top: 30px;

    background: var(--red);
}


/* =========================================================
   ABOUT OVERVIEW
========================================================= */

.about-section {
    position: relative;

    width: 100%;

    padding: 115px 7%;

    background: var(--white);
}


/* =========================================================
   ABOUT GRID
========================================================= */

.about-section .section-content.row {
    width: min(90%, 1200px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 85px;

    align-items: center;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-section .image-box {
    position: relative;

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

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* =========================================================
   ABOUT PARAGRAPH
========================================================= */

.about-section .section-content.row > p {
    position: relative;

    max-width: 630px;

    margin: 0;

    padding-left: 35px;

    color: var(--grey);

    font-size: 16px;

    line-height: 1.95;
}


/* RED VERTICAL LINE */

.about-section .section-content.row > p::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 0;

    width: 4px;
    height: 90px;
}


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

.vision_mission-section {
    position: relative;

    width: 100%;

    padding: 120px 7%;

    overflow: hidden;
}


/* BACKGROUND WORD */

.vision_mission-section::before {
    content: "PURPOSE";

    position: absolute;

    top: -35px;
    right: -25px;

    color:
        rgba(8, 39, 61, 0.035);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(120px, 18vw, 250px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -12px;

    pointer-events: none;
}


/* RED SIDE ACCENT */

.vision_mission-section::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 7px;
    height: 100%;

}


/* =========================================================
   VISION SECTION TITLE
========================================================= */

.vision_mission-section > h2 {
    position: relative;

    z-index: 2;

    width: min(90%, 1200px);

    margin:
        0 auto
        65px;

    color: var(--navy);

    font-size:
        clamp(48px, 5vw, 68px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -2.5px;

    text-align: left;
}


.vision_mission-section > h2::before {
    content: "WHAT GUIDES US";

    display: block;

    margin-bottom: 16px;

    color: var(--red);

    font-family: "Inter", sans-serif;

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

    letter-spacing: 2.4px;
}


.vision_mission-section > h2::after {
    content: "";

    display: block;

    width: 60px;
    height: 3px;

    margin-top: 24px;

    background: var(--red);
}


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

.vision_mission-section .section-content.row {
    position: relative;

    z-index: 2;

    width: min(90%, 1200px);

    margin: 0 auto;
}


/*
   YOUR CURRENT HTML HAS:
   OUTER DIV
       INNER DIV = VISION
       H3 = MISSION
       P  = MISSION TEXT
*/

.vision_mission-section
.section-content.row
> div {
    display: grid;

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

    grid-template-rows:
        auto 1fr;

    column-gap: 28px;
}


/* =========================================================
   VISION PANEL
========================================================= */

.vision_mission-section
.section-content.row
> div
> div {
    position: relative;

    grid-column: 1;
    grid-row: 1 / 3;

    min-height: 330px;

    padding:
        50px
        45px;

    background: var(--navy);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* NUMBER 01 */

.vision_mission-section
.section-content.row
> div
> div::before {
    content: "01";

    position: absolute;

    top: 10px;
    right: 22px;

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

    font-family: "Manrope", sans-serif;

    font-size: 120px;
    font-weight: 800;

    line-height: 1;
}


/* RED BOTTOM LINE */

.vision_mission-section
.section-content.row
> div
> div::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 105px;
    height: 5px;

    background: var(--red);
}


/* =========================================================
   VISION HEADING
========================================================= */

.vision_mission-section
.section-content.row
> div
> div
h3 {
    position: relative;

    z-index: 2;

    margin-bottom: 22px;

    color: var(--white);

    font-size: 32px;
}


/* =========================================================
   VISION TEXT
========================================================= */

.vision_mission-section
.section-content.row
> div
> div
p {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.9;

    text-align: left;
}


/* =========================================================
   MISSION HEADING
========================================================= */

.vision_mission-section
.section-content.row
> div
> h3 {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    margin: 0;

    padding:
        50px
        45px
        15px;

    background: var(--white);

    color: var(--navy);

    font-size: 32px;

    overflow: hidden;
}


/* NUMBER 02 */

.vision_mission-section
.section-content.row
> div
> h3::after {
    content: "02";

    position: absolute;

    top: 10px;
    right: 22px;

    color:
        rgba(8, 39, 61, 0.05);

    font-family: "Manrope", sans-serif;

    font-size: 120px;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   MISSION TEXT
========================================================= */

.vision_mission-section
.section-content.row
> div
> p {
    position: relative;

    grid-column: 2;
    grid-row: 2;

    min-height: 230px;

    margin: 0;

    padding:
        0
        45px
        50px;

    background: var(--white);

    color: var(--grey);

    font-size: 15px;

    line-height: 1.9;

    text-align: left;
}


/* RED MISSION LINE */

.vision_mission-section
.section-content.row
> div
> p::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 105px;
    height: 5px;

    background: var(--red);
}


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

.vision_mission-section
.section-content.row
> div
> div:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px
        rgba(8, 39, 61, 0.16);
}


/* =========================================================
   CORE VALUES
   LEAVING THIS DESIGN AS REQUESTED
========================================================= */

.about-section > h2 {
    width: min(90%, 1200px);

    margin:
        0 auto
        50px;

    color: var(--navy);

    font-size:
        clamp(44px, 5vw, 62px);

    font-weight: 700;

    letter-spacing: -2px;

    text-align: center;
}


.about-section > h2::after {
    content: "";

    display: block;

    width: 52px;
    height: 3px;

    margin:
        20px auto 0;

    background: var(--red);
}


.core-values-grid {
    width: min(90%, 1200px);

    margin: 0 auto;

    display: grid;

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

    gap: 24px;
}


.value-card {
    position: relative;

    min-height: 220px;

    padding:
        32px
        28px;

    background: var(--navy);

    color: var(--white);

    border-top:
        4px solid var(--red);

    text-align: left;

    box-shadow:
        0 12px 28px
        rgba(8, 39, 61, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.value-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(8, 39, 61, 0.16);
}


.value-card h3 {
    margin-bottom: 14px;

    color: var(--white);

    font-size: 21px;
}


.value-card h3::after {
    content: "";

    display: block;

    width: 30px;
    height: 2px;

    margin-top: 10px;

    background: var(--red);
}


.value-card p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    width: 100%;

    background: var(--navy);

    color: var(--white);
}


/* =========================================================
   FOOTER GRID
========================================================= */

.footer-columns {
    width: min(92%, 1300px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        1.45fr
        0.75fr;

    gap: 45px;

    align-items: start;

    padding: 70px 0 55px;
}

.footer-columns > .col-1,
.footer-columns > .col-2,
.footer-columns > .col-3,
.footer-columns > .col-4 {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   FOOTER HEADINGS
========================================================= */

.footer-columns h4 {
    margin: 0 0 22px;

    color: var(--white);

    font-family: "Manrope", sans-serif;

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

    line-height: 1.3;
}

.footer-columns h4::after {
    content: "";

    display: block;

    width: 32px;
    height: 2px;

    margin-top: 9px;

    background: var(--red);
}


/* =========================================================
   FOOTER LOGO
========================================================= */

.footer-logo-link {
    display: inline-block;

    margin-bottom: 18px;
}

.footer-logo {
    width: auto;
    height: auto;

    max-width: 180px;
    max-height: 85px;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.footer-logo-link:hover .footer-logo {
    transform: scale(1.03);

    opacity: 0.90;
}


/* =========================================================
   FOOTER DEDICATION
========================================================= */

.footer-columns .col-1 p {
    max-width: 280px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.footer-contact-link {
    display: flex;

    align-items: center;

    gap: 11px;

    width: fit-content;

    margin-bottom: 15px;

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

    font-size: 14px;

    line-height: 1.5;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.footer-contact-link i {
    width: 18px;

    flex-shrink: 0;

    color: var(--red);

    font-size: 15px;

    text-align: center;
}

.footer-contact-link span {
    word-break: break-word;
}

.footer-contact-link:hover {
    color: var(--white);

    transform: translateX(4px);
}


/* =========================================================
   FOOTER LOCATIONS
========================================================= */

.footer-location {
    width: 100%;

    margin-bottom: 19px;
}

.footer-location:last-child {
    margin-bottom: 0;
}

.location-label {
    display: block;

    margin-bottom: 6px;

    color: var(--white);

    font-size: 14px;
    font-weight: 700;
}

.location-link {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    width: fit-content;

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

    font-size: 13px;

    line-height: 1.65;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.location-link i {
    flex-shrink: 0;

    margin-top: 5px;

    color: var(--red);

    font-size: 13px;
}

.location-link span {
    display: block;
}

.location-link:hover {
    color: var(--white);

    transform: translateX(4px);
}


/* =========================================================
   FOOTER SOCIALS
========================================================= */

.social-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.social-links li {
    margin: 0 0 14px;
    padding: 0;

    list-style: none;
}

.social-link a {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    white-space: nowrap;

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

    font-size: 14px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.social-link a i {
    width: 18px;

    flex-shrink: 0;

    color: var(--red);

    font-size: 16px;

    text-align: center;
}

.social-link a:hover {
    color: var(--white);

    transform: translateX(4px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    width: min(92%, 1300px);

    margin: 0 auto;

    padding: 21px 0;

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

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

    font-size: 12px;

    text-align: center;
}


/* =========================================================
   SCROLL TO TOP
========================================================= */

.scroll-top-btn {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 999;

    width: 46px;
    height: 46px;

    display: none;

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

    padding: 0;

    background: var(--red);

    border: none;

    border-radius: 50%;

    color: var(--white);

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(255, 8, 8, 0.24);

    transition: 0.3s ease;
}

.scroll-top-btn:hover {
    background: var(--navy);

    transform: translateY(-3px);
}

/* =========================================================
   LARGE TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1050px) {

    .nav-bar {
        padding:
            0
            4%;
    }


    .nav-bar ul {
        gap: 19px;
    }


    .nav-bar ul li a {
        font-size: 13px;
    }


    .about-section .section-content.row {
        gap: 55px;
    }


    .core-values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* FOOTER */

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

        gap: 40px;
    }


    .footer-columns > .col-1,
    .footer-columns > .col-2,
    .footer-columns > .col-3,
    .footer-columns > .col-4 {
        grid-column: auto;

        justify-self: start;

        width: 100%;
        max-width: none;
    }
}


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

@media (max-width: 900px) {

    /* NAVBAR */

    .nav-bar {
        min-height: 76px;

        padding: 0 24px;

        flex-wrap: wrap;
    }


    .nav-bar .logo {
        height: 58px;
    }


    .hamburger {
        display: block;
    }


    .nav-bar ul {
        width: 100%;

        max-height: 0;

        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        overflow: hidden;

        background: var(--navy);

        transition:
            max-height 0.4s ease,
            padding 0.4s ease;
    }


    .nav-bar ul.active {
        max-height: 550px;

        padding:
            12px
            0
            22px;
    }


    .nav-bar ul li {
        width: 100%;
    }


    .nav-bar ul li a {
        width: 100%;

        padding:
            13px
            0;
    }


    /* HERO */

    .about-hero {
        min-height: 470px;

        padding:
            70px
            6%;
    }


    .about-hero::before {
        width: 39%;
    }


    .about-hero h1 {
        width: 72%;

        font-size:
            clamp(52px, 9vw, 76px);
    }


    /* ABOUT */

    .about-section {
        padding:
            85px
            5%;
    }


    .about-section .section-content.row {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .about-section .image-box {
        width:
            calc(100% - 22px);

        min-height: 430px;
    }


    /* VISION MISSION */

    .vision_mission-section {
        padding:
            85px
            5%;
    }


    .vision_mission-section > h2,
    .vision_mission-section .section-content.row {
        width: 90%;
    }


    .vision_mission-section
    .section-content.row
    > div {
        grid-template-columns: 1fr;

        grid-template-rows: auto;
    }


    .vision_mission-section
    .section-content.row
    > div
    > div {
        grid-column: 1;
        grid-row: auto;

        margin-bottom: 25px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > h3 {
        grid-column: 1;
        grid-row: auto;

        padding-top: 45px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > p {
        grid-column: 1;
        grid-row: auto;

        min-height: 170px;
    }
}


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

@media (max-width: 700px) {

    /* HERO */

    .about-hero {
        min-height: 410px;

        align-items: flex-end;

        padding:
            65px
            22px;
    }


    .about-hero::before {
        width: 55%;

        opacity: 0.10;
    }


    .about-hero::after {
        width: 85px;
        height: 85px;
    }


    .about-hero h1 {
        width: 100%;

        font-size: 48px;

        letter-spacing: -2.2px;
    }


    /* ABOUT */

    .about-section {
        padding:
            70px
            20px;
    }


    .about-section .section-content.row {
        width: 100%;
    }


    .about-section .image-box {
        width:
            calc(100% - 14px);

        min-height: 350px;

        box-shadow:
            14px
            14px
            0
            var(--navy);
    }


    .about-section .section-content.row > p {
        padding-left: 22px;

        font-size: 15px;
    }


    .about-section
    .section-content.row
    > p::before {
        height: 65px;
    }


    /* VISION */

    .vision_mission-section {
        padding:
            70px
            20px;
    }


    .vision_mission-section > h2,
    .vision_mission-section .section-content.row {
        width: 100%;
    }


    .vision_mission-section > h2 {
        margin-bottom: 40px;

        font-size: 43px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > div {
        min-height: auto;

        padding:
            38px
            28px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > h3 {
        padding:
            38px
            28px
            12px;

        font-size: 28px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > p {
        padding:
            0
            28px
            38px;

        min-height: 150px;
    }


    /* CORE VALUES */

    .core-values-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .about-section > h2 {
        width: 100%;

        font-size: 42px;
    }


    .value-card {
        min-height: auto;

        padding:
            27px
            24px;
    }


    /* FOOTER */

    .footer-columns {
        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 560px) {

    /* NAVBAR */

    .nav-bar {
        min-height: 70px;

        padding:
            0
            18px;
    }


    .nav-bar .logo {
        height: 52px;
    }


    .hamburger {
        font-size: 24px;
    }


    /* HERO */

    .about-hero {
        min-height: 380px;

        padding:
            60px
            20px;
    }


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


    .about-hero h1::before {
        margin-bottom: 14px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .about-hero h1::after {
        width: 52px;

        margin-top: 23px;
    }


    /* ABOUT */

    .about-section {
        padding:
            60px
            20px;
    }


    .about-section .image-box {
        min-height: 300px;
    }


    /* VISION */

    .vision_mission-section {
        padding:
            60px
            20px;
    }


    .vision_mission-section > h2 {
        font-size: 38px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > div {
        padding:
            32px
            24px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > h3 {
        padding:
            32px
            24px
            10px;

        font-size: 26px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > p {
        padding:
            0
            24px
            32px;

        font-size: 14px;
    }


    /* CORE VALUES */

    .about-section > h2 {
        font-size: 38px;
    }


    .value-card {
        padding:
            24px
            22px;
    }


    .value-card h3 {
        font-size: 19px;
    }


    .value-card p {
        font-size: 13px;
    }


    /* FOOTER */

    .footer-columns {
        width: 90%;

        padding:
            55px
            0
            42px;

        gap: 35px;
    }


    .footer-bottom {
        width: 90%;
    }


    /* SCROLL BUTTON */

    .scroll-top-btn {
        right: 17px;
        bottom: 17px;

        width: 42px;
        height: 42px;
    }
}


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

@media (max-width: 380px) {

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


    .vision_mission-section > h2,
    .about-section > h2 {
        font-size: 34px;
    }
}/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
    position: relative;

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

    display: flex;
    align-items: center;

    padding: 55px 7%;

    background: var(--white);

    overflow: hidden;
}


/* NAVY SHAPE */

.about-hero::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;

    background: var(--navy);

    clip-path:
        polygon(
            23% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}


/* RED ACCENT */

.about-hero::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 100px;
    height: 100px;

    background: var(--red);

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 100%
        );
}


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

.about-hero h1 {
    position: relative;

    z-index: 2;

    width: 64%;
    max-width: 820px;

    margin: 0;

    color: var(--navy);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(52px, 6vw, 78px);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -3px;

    text-align: left;
}


.about-hero h1::before {
    content: "MORIPE HOLDINGS";

    display: block;

    margin-bottom: 15px;

    color: var(--red);

    font-family: "Inter", sans-serif;

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

    line-height: 1;

    letter-spacing: 2.5px;
}


.about-hero h1::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-top: 22px;

    background: var(--red);
}


/* =========================================================
   ABOUT OVERVIEW SECTION
========================================================= */

.about-section {
    position: relative;

    width: 100%;

    background: var(--white);
}


/* FIRST ABOUT SECTION ONLY */

.main-container > .about-section:first-of-type {
    padding:
        65px
        7%
        72px;
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.main-container
> .about-section:first-of-type
.section-content.row {
    width: min(90%, 1200px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 55px;

    align-items: center;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.main-container
> .about-section:first-of-type
.image-box {
    position: relative;

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

    background-color: var(--light);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    box-shadow:
        16px
        16px
        0
        var(--navy);
}


/* RED CORNER */

.main-container
> .about-section:first-of-type
.image-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 75px;
    height: 75px;

    background: var(--red);

    clip-path:
        polygon(
            0 0,
            100% 0,
            0 100%
        );

    z-index: 2;
}


/* IMAGE OVERLAY */

.main-container
> .about-section:first-of-type
.image-box::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(8, 39, 61, 0.22) 100%
        );

    pointer-events: none;
}


/* =========================================================
   ABOUT TEXT
========================================================= */

.main-container
> .about-section:first-of-type
.section-content.row
> p {
    position: relative;

    max-width: 630px;

    margin: 0;

    padding-left: 27px;

    color: var(--grey);

    font-size: 15px;

    line-height: 1.8;
}


/* RED TEXT ACCENT */

.main-container
> .about-section:first-of-type
.section-content.row
> p::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 0;

    width: 4px;
    height: 68px;

    background: var(--red);
}


/* =========================================================
   VISION & MISSION SECTION
========================================================= */

.vision_mission-section {
    position: relative;

    width: 100%;

    padding:
        60px
        7%
        65px;

    background: var(--light);

    overflow: hidden;
}


/* SUBTLE BACKGROUND WORD */

.vision_mission-section::before {
    content: "PURPOSE";

    position: absolute;

    top: -20px;
    right: -20px;

    color:
        rgba(8, 39, 61, 0.03);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(100px, 16vw, 200px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -8px;

    pointer-events: none;
}


/* LEFT RED LINE */

.vision_mission-section::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: var(--red);
}


/* =========================================================
   VISION & MISSION HEADING
========================================================= */

.vision_mission-section > h2 {
    position: relative;

    z-index: 2;

    width: min(90%, 1200px);

    margin:
        0 auto
        32px;

    color: var(--navy);

    font-family: "Manrope", sans-serif;

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

    font-weight: 700;

    line-height: 1;

    letter-spacing: -2px;

    text-align: left;
}


.vision_mission-section > h2::before {
    content: "WHAT GUIDES US";

    display: block;

    margin-bottom: 11px;

    color: var(--red);

    font-family: "Inter", sans-serif;

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

    letter-spacing: 2.3px;
}


.vision_mission-section > h2::after {
    content: "";

    display: block;

    width: 50px;
    height: 3px;

    margin-top: 17px;

    background: var(--red);
}


/* =========================================================
   VISION & MISSION WRAPPER
========================================================= */

.vision_mission-section .section-content.row {
    position: relative;

    z-index: 2;

    width: min(90%, 1200px);

    margin: 0 auto;
}


.vision_mission-section
.section-content.row
> div {
    display: grid;

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

    grid-template-rows:
        auto
        1fr;

    gap: 0 18px;

    align-items: stretch;
}


/* =========================================================
   OUR VISION
========================================================= */

.vision_mission-section
.section-content.row
> div
> div {
    position: relative;

    grid-column: 1;
    grid-row: 1 / 3;

    min-height: 250px;

    padding:
        35px
        35px;

    background: var(--navy);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* VISION NUMBER */

.vision_mission-section
.section-content.row
> div
> div::before {
    content: "01";

    position: absolute;

    top: -3px;
    right: 15px;

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

    font-family: "Manrope", sans-serif;

    font-size: 95px;
    font-weight: 800;

    line-height: 1;
}


/* RED BOTTOM */

.vision_mission-section
.section-content.row
> div
> div::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 85px;
    height: 4px;

    background: var(--red);
}


/* VISION HEADING */

.vision_mission-section
.section-content.row
> div
> div
h3 {
    position: relative;

    z-index: 2;

    margin:
        0
        0
        15px;

    color: var(--white);

    font-size: 28px;
}


/* VISION TEXT */

.vision_mission-section
.section-content.row
> div
> div
p {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.75;

    text-align: left;
}


/* =========================================================
   OUR MISSION
   LIGHT PANEL
========================================================= */

.vision_mission-section
.section-content.row
> div
> h3 {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    margin: 0;

    padding:
        35px
        35px
        10px;

    background: #e8ecef;

    color: var(--navy);

    font-size: 28px;

    overflow: hidden;
}


/* MISSION NUMBER */

.vision_mission-section
.section-content.row
> div
> h3::after {
    content: "02";

    position: absolute;

    top: -3px;
    right: 15px;

    color:
        rgba(8, 39, 61, 0.055);

    font-family: "Manrope", sans-serif;

    font-size: 95px;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}


/* MISSION TEXT */

.vision_mission-section
.section-content.row
> div
> p {
    position: relative;

    grid-column: 2;
    grid-row: 2;

    min-height: 170px;

    margin: 0;

    padding:
        0
        35px
        35px;

    background: #e8ecef;

    color: var(--grey);

    font-size: 14px;

    line-height: 1.75;

    text-align: left;
}


/* MISSION RED LINE */

.vision_mission-section
.section-content.row
> div
> p::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 85px;
    height: 4px;

    background: var(--red);
}


/* =========================================================
   VISION HOVER
========================================================= */

.vision_mission-section
.section-content.row
> div
> div:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 34px
        rgba(8, 39, 61, 0.14);
}


/* =========================================================
   CORE VALUES SECTION
   DESIGN LEFT UNCHANGED
========================================================= */

.main-container
> .about-section:nth-of-type(3) {
    padding:
        58px
        7%
        68px;

    background: var(--white);
}


.about-section > h2 {
    width: min(90%, 1200px);

    margin:
        0 auto
        32px;

    color: var(--navy);

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(40px, 5vw, 56px);

    font-weight: 700;

    letter-spacing: -2px;

    text-align: center;
}


.about-section > h2::after {
    content: "";

    display: block;

    width: 50px;
    height: 3px;

    margin:
        16px auto 0;

    background: var(--red);
}


/* =========================================================
   CORE VALUES
   ORIGINAL DESIGN
========================================================= */

.core-values-grid {
    width: min(90%, 1200px);

    margin: 0 auto;

    display: grid;

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

    gap: 24px;
}


.value-card {
    position: relative;

    min-height: 220px;

    padding:
        32px
        28px;

    background: var(--navy);

    color: var(--white);

    border-top:
        4px solid var(--red);

    text-align: left;

    box-shadow:
        0 12px 28px
        rgba(8, 39, 61, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.value-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(8, 39, 61, 0.16);
}


.value-card h3 {
    margin-bottom: 14px;

    color: var(--white);

    font-size: 21px;
}


.value-card h3::after {
    content: "";

    display: block;

    width: 30px;
    height: 2px;

    margin-top: 10px;

    background: var(--red);
}


.value-card p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    /* HERO */

    .about-hero {
        min-height: 330px;

        padding:
            50px
            6%;
    }


    .about-hero::before {
        width: 38%;
    }


    .about-hero h1 {
        width: 72%;

        font-size:
            clamp(48px, 8vw, 68px);
    }


    /* ABOUT */

    .main-container
    > .about-section:first-of-type {
        padding:
            55px
            5%
            60px;
    }


    .main-container
    > .about-section:first-of-type
    .section-content.row {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 34px;
    }


    .main-container
    > .about-section:first-of-type
    .image-box {
        min-height: 370px;
    }


    /* VISION */

    .vision_mission-section {
        padding:
            55px
            5%
            60px;
    }


    .vision_mission-section > h2,
    .vision_mission-section .section-content.row {
        width: 90%;
    }


    .vision_mission-section
    .section-content.row
    > div {
        grid-template-columns: 1fr;

        grid-template-rows: auto;

        gap: 16px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > div {
        grid-column: 1;
        grid-row: auto;

        min-height: auto;
    }


    .vision_mission-section
    .section-content.row
    > div
    > h3 {
        grid-column: 1;
        grid-row: auto;

        padding-bottom: 8px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > p {
        grid-column: 1;
        grid-row: auto;

        min-height: auto;
    }


    /* CORE */

    .main-container
    > .about-section:nth-of-type(3) {
        padding:
            55px
            5%
            60px;
    }


    .core-values-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


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

@media (max-width: 700px) {

    /* HERO */

    .about-hero {
        min-height: 300px;

        align-items: flex-end;

        padding:
            45px
            20px;
    }


    .about-hero::before {
        width: 52%;

        opacity: 0.10;
    }


    .about-hero::after {
        width: 60px;
        height: 60px;
    }


    .about-hero h1 {
        width: 100%;

        font-size: 43px;

        letter-spacing: -2px;
    }


    .about-hero h1::before {
        margin-bottom: 10px;
    }


    .about-hero h1::after {
        margin-top: 18px;
    }


    /* ABOUT */

    .main-container
    > .about-section:first-of-type {
        padding:
            45px
            20px
            50px;
    }


    .main-container
    > .about-section:first-of-type
    .section-content.row {
        width: 100%;

        gap: 30px;
    }


    .main-container
    > .about-section:first-of-type
    .image-box {
        width:
            calc(100% - 12px);

        min-height: 320px;

        box-shadow:
            12px
            12px
            0
            var(--navy);
    }


    .main-container
    > .about-section:first-of-type
    .section-content.row
    > p {
        padding-left: 20px;

        font-size: 14px;

        line-height: 1.75;
    }


    /* VISION */

    .vision_mission-section {
        padding:
            45px
            20px
            50px;
    }


    .vision_mission-section > h2,
    .vision_mission-section .section-content.row {
        width: 100%;
    }


    .vision_mission-section > h2 {
        margin-bottom: 26px;

        font-size: 38px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > div {
        padding:
            30px
            25px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > h3 {
        padding:
            30px
            25px
            8px;

        font-size: 25px;
    }


    .vision_mission-section
    .section-content.row
    > div
    > p {
        padding:
            0
            25px
            30px;

        font-size: 14px;
    }


    /* CORE */

    .main-container
    > .about-section:nth-of-type(3) {
        padding:
            45px
            20px
            50px;
    }


    .about-section > h2 {
        margin-bottom: 27px;

        font-size: 36px;
    }


    .core-values-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .value-card {
        min-height: auto;
    }
}


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

@media (max-width: 480px) {

    .about-hero {
        min-height: 280px;

        padding:
            40px
            18px;
    }


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


    .main-container
    > .about-section:first-of-type {
        padding:
            40px
            18px
            45px;
    }


    .main-container
    > .about-section:first-of-type
    .image-box {
        min-height: 270px;
    }


    .vision_mission-section {
        padding:
            40px
            18px
            45px;
    }


    .vision_mission-section > h2 {
        font-size: 34px;
    }


    .main-container
    > .about-section:nth-of-type(3) {
        padding:
            40px
            18px
            45px;
    }


    .about-section > h2 {
        font-size: 33px;
    }


    .value-card {
        padding:
            24px
            22px;
    }
}


/* =========================================================
   MSA-INSPIRED MORIPE HOLDINGS ABOUT HERO
   Requires:
   <section class="about-hero">
       <div class="about-hero-content">
           <span class="about-eyebrow">MORIPE HOLDINGS</span>
           <h1>About Us</h1>
           <p>...</p>
       </div>
       <div class="about-hero-image">
           <img src="images/moripe-about.jpg" alt="Moripe Holdings team">
       </div>
   </section>
========================================================= */

.about-hero {
    position: relative;
    isolation: isolate;

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

    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    align-items: stretch;

    padding: 0;

    background: var(--white);

    overflow: hidden;
}

/* remove the older decorative hero shapes */
.about-hero::before,
.about-hero::after {
    content: none;
}

/* LEFT CONTENT */
.about-hero-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        85px
        7%
        85px
        max(7%, calc((100vw - 1200px) / 2));

    background: var(--white);
}

/* subtle decorative word */
.about-hero-content::after {
    content: "ABOUT";

    position: absolute;

    left: 7%;
    bottom: 22px;

    color: rgba(8, 39, 61, 0.035);

    font-family: "Manrope", sans-serif;
    font-size: clamp(90px, 11vw, 165px);
    font-weight: 800;

    line-height: 0.8;
    letter-spacing: -8px;

    pointer-events: none;
}

.about-eyebrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 23px;

    color: var(--red);

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

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

.about-eyebrow::before {
    content: "";

    width: 38px;
    height: 3px;

    margin-right: 12px;

    background: var(--red);
}

.about-hero .about-hero-content h1 {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 650px;

    margin: 0 0 28px;

    color: var(--navy);

    font-family: "Manrope", sans-serif;
    font-size: clamp(60px, 6vw, 86px);
    font-weight: 800;

    line-height: 0.96;
    letter-spacing: -4px;
}

.about-hero .about-hero-content h1::before,
.about-hero .about-hero-content h1::after {
    content: none;
}

.about-hero-content p {
    position: relative;
    z-index: 2;

    max-width: 545px;

    margin: 0;

    color: var(--grey);

    font-size: 16px;
    line-height: 1.85;
}

/* RIGHT IMAGE */
.about-hero-image {
    position: relative;

    min-height: 610px;

    overflow: hidden;

    background: var(--navy);
}

.about-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter: saturate(0.92) contrast(1.02);

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.about-hero-image:hover img {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.03);
}

/* Navy overlay */
.about-hero-image::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 39, 61, 0.52) 0%,
            rgba(8, 39, 61, 0.15) 36%,
            rgba(8, 39, 61, 0.04) 100%
        );

    pointer-events: none;
}

/* Red MSA-style geometric accent */
.about-hero-image::after {
    content: "";

    position: absolute;
    z-index: 2;

    left: 0;
    bottom: 0;

    width: 150px;
    height: 150px;

    background: var(--red);

    clip-path:
        polygon(
            0 35%,
            100% 100%,
            0 100%
        );

    pointer-events: none;
}


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

@media (max-width: 1050px) {

    .about-hero {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(360px, 1.05fr);

        min-height: 550px;
    }

    .about-hero-content {
        padding:
            75px
            6%;
    }

    .about-hero-image {
        min-height: 550px;
    }

    .about-hero .about-hero-content h1 {
        font-size:
            clamp(54px, 6vw, 72px);
    }
}


@media (max-width: 850px) {

    .about-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .about-hero-content {
        min-height: 430px;

        padding:
            70px
            7%;
    }

    .about-hero-image {
        min-height: 420px;
    }

    .about-hero-image::before {
        background:
            linear-gradient(
                180deg,
                rgba(8, 39, 61, 0.10) 0%,
                rgba(8, 39, 61, 0.30) 100%
            );
    }

    .about-hero-image::after {
        width: 110px;
        height: 110px;
    }

    .about-hero-content::after {
        left: 7%;
        font-size: 120px;
    }
}


@media (max-width: 600px) {

    .about-hero-content {
        min-height: 360px;

        padding:
            58px
            20px;
    }

    .about-eyebrow {
        margin-bottom: 18px;

        font-size: 10px;
        letter-spacing: 2px;
    }

    .about-eyebrow::before {
        width: 28px;
    }

    .about-hero .about-hero-content h1 {
        margin-bottom: 22px;

        font-size: 46px;

        letter-spacing: -2.5px;
    }

    .about-hero-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .about-hero-image {
        min-height: 310px;
    }

    .about-hero-image::after {
        width: 82px;
        height: 82px;
    }

    .about-hero-content::after {
        bottom: 14px;

        font-size: 85px;
        letter-spacing: -5px;
    }
}


@media (max-width: 380px) {

    .about-hero-content {
        padding:
            50px
            18px;
    }

    .about-hero .about-hero-content h1 {
        font-size: 41px;
    }

    .about-hero-image {
        min-height: 270px;
    }
}


/* =========================================================
   ABOUT PAGE CONTENT EXPANSION
   Added sections: Story, What We Do, Impact, Approach,
   Ecosystem, Looking Ahead and CTA
========================================================= */

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    color: var(--red);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.section-kicker::before {
    content: "";
    width: 34px;
    height: 3px;
    background: var(--red);
}

.section-kicker.light {
    color: var(--white);
}

.section-heading {
    max-width: 760px;
}

.section-heading.centered {
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading.centered .section-kicker {
    justify-content: center;
}

.section-heading h2,
.story-heading h2,
.impact-heading h2,
.future-copy h2,
.about-cta-container h2 {
    margin: 0;
    color: var(--navy);
    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 4.7vw, 62px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2.2px;
}

.section-heading p {
    max-width: 660px;
    margin: 20px 0 0;
    color: var(--grey);
    font-size: 15px;
    line-height: 1.8;
}

.section-heading.centered p {
    margin-left: auto;
    margin-right: auto;
}

/* OUR STORY */
.story-section {
    position: relative;
    padding: 95px 7%;
    background: var(--light);
    overflow: hidden;
}

.story-section::after {
    content: "STORY";
    position: absolute;
    right: -25px;
    bottom: -28px;
    color: rgba(8, 39, 61, 0.035);
    font-family: "Manrope", sans-serif;
    font-size: clamp(100px, 15vw, 220px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -10px;
    pointer-events: none;
}

.story-container {
    position: relative;
    z-index: 2;
    width: min(90%, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.story-copy {
    padding-left: 30px;
    border-left: 4px solid var(--red);
}

.story-copy p {
    margin: 0;
    color: var(--grey);
    font-size: 15px;
    line-height: 1.9;
}

.story-copy p + p {
    margin-top: 24px;
}

/* WHAT WE DO */
.what-we-do-section {
    padding: 100px 7%;
    background: var(--white);
}

.what-we-do-container {
    width: min(90%, 1200px);
    margin: 0 auto;
}

.what-we-do-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.service-focus-card {
    position: relative;
    min-height: 320px;
    padding: 34px 28px 30px;
    background: var(--white);
    border: 1px solid rgba(8, 39, 61, 0.10);
    box-shadow: 0 12px 30px rgba(8, 39, 61, 0.07);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.service-focus-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 4px;
    background: var(--red);
    transition: width 0.3s ease;
}

.service-focus-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(8, 39, 61, 0.12);
}

.service-focus-card:hover::after {
    width: 100%;
}

.service-focus-card .focus-number {
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(8, 39, 61, 0.06);
    font-family: "Manrope", sans-serif;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
}

.service-focus-card > i {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    background: var(--navy);
    color: var(--white);
    font-size: 18px;
}

.service-focus-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 15px;
    color: var(--navy);
    font-size: 20px;
}

.service-focus-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--grey);
    font-size: 14px;
    line-height: 1.8;
}

/* IMPACT */
.impact-section {
    position: relative;
    padding: 100px 7%;
    background: var(--navy);
    overflow: hidden;
}

.impact-section::before {
    content: "IMPACT";
    position: absolute;
    top: -25px;
    right: -10px;
    color: rgba(255, 255, 255, 0.035);
    font-family: "Manrope", sans-serif;
    font-size: clamp(100px, 15vw, 220px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -10px;
}

.impact-container {
    position: relative;
    z-index: 2;
    width: min(90%, 1200px);
    margin: 0 auto;
}

.impact-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.impact-heading h2 {
    color: var(--white);
}

.impact-heading p {
    max-width: 650px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.8;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.impact-item {
    min-height: 185px;
    padding: 22px 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.impact-item:first-child {
    padding-left: 0;
}

.impact-item:last-child {
    border-right: none;
}

.impact-item i {
    display: block;
    margin-bottom: 26px;
    color: var(--red);
    font-size: 25px;
}

.impact-item strong {
    display: block;
    margin-bottom: 10px;
    color: var(--white);
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    line-height: 1.25;
}

.impact-item span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.6;
}

.impact-note {
    margin: 42px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.50);
    font-size: 12px;
    font-style: italic;
}

/* OUR APPROACH */
.approach-section {
    padding: 100px 7%;
    background: var(--white);
}

.approach-container {
    width: min(90%, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 85px;
    align-items: start;
}

.approach-steps {
    border-top: 1px solid rgba(8, 39, 61, 0.12);
}

.approach-step {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 24px;
    padding: 27px 0;
    border-bottom: 1px solid rgba(8, 39, 61, 0.12);
}

.approach-step > span {
    color: var(--red);
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
}

.approach-step h3 {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 20px;
}

.approach-step p {
    margin: 0;
    color: var(--grey);
    font-size: 14px;
    line-height: 1.75;
}

/* CORE VALUES - explicit hook after new sections were added */
.main-container > .core-values-section {
    padding: 95px 7%;
    background: var(--light);
}

/* ECOSYSTEM */
.ecosystem-section {
    padding: 100px 7%;
    background: var(--white);
}

.ecosystem-container {
    width: min(90%, 1200px);
    margin: 0 auto;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ecosystem-card {
    position: relative;
    min-height: 270px;
    padding: 34px 30px;
    background: var(--navy);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ecosystem-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    border: 25px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
}

.ecosystem-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(8, 39, 61, 0.18);
}

.ecosystem-tag {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ecosystem-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
    color: var(--white);
    font-size: 24px;
    line-height: 1.2;
}

.ecosystem-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 14px;
    line-height: 1.8;
}

/* LOOKING AHEAD */
.future-section {
    position: relative;
    padding: 100px 7%;
    background: var(--navy);
    overflow: hidden;
}

.future-section::after {
    content: "FUTURE";
    position: absolute;
    left: -25px;
    bottom: -40px;
    color: rgba(255, 255, 255, 0.03);
    font-family: "Manrope", sans-serif;
    font-size: clamp(100px, 16vw, 230px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -10px;
}

.future-container {
    position: relative;
    z-index: 2;
    width: min(90%, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 90px;
    align-items: center;
}

.future-copy h2 {
    color: var(--white);
}

.future-copy p {
    max-width: 650px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 1.85;
}

.future-priorities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.future-priorities div {
    min-height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.035);
}

.future-priorities i {
    color: var(--red);
    font-size: 21px;
}

.future-priorities span {
    color: var(--white);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

/* FINAL CTA */
.about-cta-section {
    padding: 90px 7%;
    background: var(--white);
}

.about-cta-container {
    position: relative;
    width: min(90%, 1200px);
    margin: 0 auto;
    padding: 65px 70px;
    background: var(--light);
    border-left: 6px solid var(--red);
    overflow: hidden;
}

.about-cta-container::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 230px;
    height: 230px;
    background: var(--navy);
    opacity: 0.06;
    transform: rotate(45deg);
}

.about-cta-container h2 {
    position: relative;
    z-index: 2;
    max-width: 850px;
    font-size: clamp(38px, 4.5vw, 58px);
}

.about-cta-container p {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: 20px 0 30px;
    color: var(--grey);
    font-size: 15px;
    line-height: 1.8;
}

.about-cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.about-cta-primary,
.about-cta-secondary {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s ease;
}

.about-cta-primary {
    background: var(--red);
    color: var(--white);
}

.about-cta-primary:hover {
    background: var(--navy);
    transform: translateY(-2px);
}

.about-cta-secondary {
    border: 1px solid var(--navy);
    color: var(--navy);
}

.about-cta-secondary:hover {
    background: var(--navy);
    color: var(--white);
    transform: translateY(-2px);
}

/* =========================================================
   CONTENT EXPANSION RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .what-we-do-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .impact-item:nth-child(2) {
        border-right: none;
    }

    .impact-item:nth-child(3),
    .impact-item:nth-child(4) {
        margin-top: 32px;
    }

    .impact-item:nth-child(3) {
        padding-left: 0;
    }

    .approach-container,
    .future-container {
        gap: 55px;
    }
}

@media (max-width: 850px) {
    .story-container,
    .approach-container,
    .future-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .story-copy {
        padding-left: 24px;
    }

    .ecosystem-grid {
        grid-template-columns: 1fr;
    }

    .ecosystem-card {
        min-height: auto;
    }

    .about-cta-container {
        padding: 55px 45px;
    }
}

@media (max-width: 650px) {
    .story-section,
    .what-we-do-section,
    .impact-section,
    .approach-section,
    .main-container > .core-values-section,
    .ecosystem-section,
    .future-section,
    .about-cta-section {
        padding: 65px 20px;
    }

    .story-container,
    .what-we-do-container,
    .impact-container,
    .approach-container,
    .ecosystem-container,
    .future-container,
    .about-cta-container {
        width: 100%;
    }

    .section-heading h2,
    .story-heading h2,
    .impact-heading h2,
    .future-copy h2,
    .about-cta-container h2 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .what-we-do-grid,
    .impact-grid,
    .future-priorities {
        grid-template-columns: 1fr;
    }

    .service-focus-card {
        min-height: auto;
    }

    .impact-item,
    .impact-item:first-child,
    .impact-item:nth-child(3) {
        min-height: auto;
        margin: 0;
        padding: 26px 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .impact-item:last-child {
        border-bottom: none;
    }

    .approach-step {
        grid-template-columns: 55px 1fr;
        gap: 15px;
    }

    .about-cta-container {
        padding: 42px 28px;
    }

    .about-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-cta-primary,
    .about-cta-secondary {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .story-section,
    .what-we-do-section,
    .impact-section,
    .approach-section,
    .main-container > .core-values-section,
    .ecosystem-section,
    .future-section,
    .about-cta-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-heading h2,
    .story-heading h2,
    .impact-heading h2,
    .future-copy h2,
    .about-cta-container h2 {
        font-size: 33px;
    }

    .story-copy {
        padding-left: 18px;
    }

    .about-cta-container {
        padding: 36px 22px;
    }
}
.impact-number {
    display: block;

    margin: 18px 0 10px;

    color: var(--white);

    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;
}

.impact-number::after {
    content: "";

    display: block;

    width: 36px;
    height: 3px;

    margin: 14px auto 0;

    background: var(--red);
}