.m5about2-page {
    --navy:#072f3d;
    --green:#08715c;
    --muted:#687f87;
    --line:#d7e4e0;
    --soft:#f6faf8;

    background:#fff;
}


.m5about2-shell {
    width:min(
        1180px,
        calc(100% - 48px)
    );

    margin:0 auto;
}


.m5about2-page h1,
.m5about2-page h2,
.m5about2-page h3 {
    color:var(--navy);
}


.m5about2-eyebrow,
.m5about2-index {
    margin:0 0 16px;

    color:#627b83;

    font-size:10px;

    font-weight:850;

    letter-spacing:.15em;
}



/* HERO */

.m5about2-hero {
    padding:
        87px 0 78px;

    background:
        linear-gradient(
            135deg,
            #fbfdfc,
            #edf6f2
        );
}


.m5about2-hero h1 {
    max-width:900px;

    margin:0;

    font-size:
        clamp(
            50px,
            5.3vw,
            72px
        );

    line-height:1;

    letter-spacing:-.045em;
}



/* GENERAL */

.m5about2-section {
    padding:
        70px 0;
}


.m5about2-soft {
    background:var(--soft);
}


.m5about2-two {
    display:grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap:90px;
}


.m5about2-section h2,
.m5about2-landmark h2,
.m5about2-recognition h2,
.m5about2-final h2 {
    margin:0;

    font-size:
        clamp(
            36px,
            3.9vw,
            53px
        );

    line-height:1.06;

    letter-spacing:-.04em;
}


.m5about2-copy p {
    max-width:760px;

    margin:
        0 0 18px;

    color:var(--muted);

    font-size:15px;

    line-height:1.75;
}


.m5about2-copy h3 {
    margin:
        0 0 16px;

    font-size:22px;
}



/* PURPOSE */

.m5about2-purpose {
    padding:
        72px 0;

    background:var(--navy);
}


.m5about2-purpose
.m5about2-eyebrow {
    color:#79a99e;
}


.m5about2-purpose > .m5about2-shell > h2 {
    max-width:890px;

    margin:0;

    color:#fff;

    font-size:
        clamp(
            40px,
            4.6vw,
            61px
        );

    line-height:1.04;

    letter-spacing:-.04em;
}


.m5about2-purpose-lead {
    max-width:830px;

    margin:
        24px 0 0;

    color:#bacbce;

    font-size:15px;

    line-height:1.75;
}


.m5about2-purpose-grid {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    margin-top:47px;

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


.m5about2-purpose-grid article {
    padding:
        30px 34px 8px 0;
}


.m5about2-purpose-grid article + article {
    padding-left:35px;

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


.m5about2-purpose-grid span {
    display:block;

    margin-bottom:14px;

    color:#76a79c;

    font-size:9px;

    letter-spacing:.13em;
}


.m5about2-purpose-grid h3 {
    margin:
        0 0 14px;

    color:#fff;

    font-size:23px;
}


.m5about2-purpose-grid p {
    margin:0;

    color:#b7c9cc;

    font-size:13px;

    line-height:1.7;
}



/* VALUES */

.m5about2-values {
    display:grid;

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

    margin-top:39px;

    border-top:
        1px solid
        #9fc1b9;
}


.m5about2-values article {
    min-height:230px;

    padding:
        27px 21px;

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


.m5about2-values article:last-child {
    border-right:0;
}


.m5about2-values span {
    display:block;

    margin-bottom:27px;

    color:#98aaae;

    font-size:9px;
}


.m5about2-values h3 {
    margin:
        0 0 12px;

    font-size:18px;
}


.m5about2-values p {
    margin:0;

    color:var(--muted);

    font-size:11px;

    line-height:1.65;
}



/* WHAT WE DO */

.m5about2-what {
    display:grid;

    grid-template-columns:
        .7fr
        1.3fr;

    gap:70px;

    margin-top:29px;

    padding:
        27px 0 34px;

    border-top:
        1px solid
        #9fc1b9;
}


.m5about2-what h3 {
    margin:0;

    font-size:25px;
}


.m5about2-what p {
    max-width:720px;

    margin:0;

    color:var(--muted);

    font-size:14px;

    line-height:1.73;
}



/* SERVICES */

.m5about2-services {
    border-top:
        1px solid
        var(--line);
}


.m5about2-services article {
    display:grid;

    grid-template-columns:
        80px
        1fr;

    gap:28px;

    padding:
        31px 0;

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


.m5about2-services article > span {
    color:#98aaae;

    font-size:10px;
}


.m5about2-services h3 {
    margin:
        0 0 12px;

    font-size:22px;
}


.m5about2-services p {
    max-width:790px;

    margin:0;

    color:var(--muted);

    font-size:13px;

    line-height:1.72;
}



/* LANDMARK */

.m5about2-landmark {
    padding:
        69px 0;

    background:#eef5f2;
}


.m5about2-landmark-grid,
.m5about2-recognition-grid,
.m5about2-final-grid {
    display:grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:90px;

    align-items:center;
}


.m5about2-landmark-grid > p {
    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.73;
}



/* REGULATORY */

.m5about2-recognition {
    padding:
        70px 0;

    background:var(--navy);
}


.m5about2-recognition
.m5about2-eyebrow {
    color:#79a99e;
}


.m5about2-recognition h2 {
    color:#fff;
}


.m5about2-recognition-grid > p {
    margin:0;

    color:#bacbce;

    font-size:15px;

    line-height:1.73;
}



/* FINAL */

.m5about2-final {
    padding:
        72px 0 79px;

    background:#f4f8f6;
}


.m5about2-final-grid > p {
    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.73;
}



/* RESPONSIVE */

@media (max-width:950px) {

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


    .m5about2-values article {
        border-bottom:
            1px solid
            var(--line);
    }

}


@media (max-width:820px) {

    .m5about2-two,
    .m5about2-what,
    .m5about2-landmark-grid,
    .m5about2-recognition-grid,
    .m5about2-final-grid {
        grid-template-columns:1fr;

        gap:26px;
    }


    .m5about2-purpose-grid {
        grid-template-columns:1fr;
    }


    .m5about2-purpose-grid article + article {
        padding-left:0;

        border-left:0;

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

}


@media (max-width:620px) {

    .m5about2-shell {
        width:min(
            100% - 32px,
            1180px
        );
    }


    .m5about2-hero {
        padding:
            58px 0 53px;
    }


    .m5about2-hero h1 {
        font-size:43px;
    }


    .m5about2-section,
    .m5about2-purpose,
    .m5about2-landmark,
    .m5about2-recognition,
    .m5about2-final {
        padding:
            52px 0;
    }


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


    .m5about2-values article {
        min-height:0;

        border-right:0;
    }


    .m5about2-services article {
        grid-template-columns:1fr;

        gap:11px;
    }

}