
/* =========================================================
   5M CONTACT V2
   Editorial / restrained / non-assembled
   ========================================================= */

:root {

    --c2-navy:#0D2942;
    --c2-green:#145846;
    --c2-teal:#34776B;

    --c2-mist:#EEF4F1;
    --c2-blue:#EAF3F5;

    --c2-brass:#A9854E;

    --c2-ink:#192932;
    --c2-muted:#65757A;

    --c2-line:#DCE5E4;

    --c2-warm:#FCFCF9;
    --c2-white:#FFFFFF;
}


.m5ct2-page {

    color:var(--c2-ink);

    background:var(--c2-warm);

    overflow:hidden;
}


.m5ct2-shell {

    width:calc(100% - 80px);

    max-width:1360px;

    margin:0 auto;
}


.m5ct2-kicker {

    margin:0 0 9px;

    color:var(--c2-teal);

    font-size:9px;

    line-height:1;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


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

.m5ct2-hero {

    padding:62px 0 72px;

    background:
        linear-gradient(
            180deg,
            #F3F8F6 0%,
            var(--c2-warm) 100%
        );
}


.m5ct2-hero-grid {

    display:grid;

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

    gap:90px;

    align-items:center;
}


.m5ct2-hero-copy {

    max-width:640px;
}


.m5ct2-hero h1 {

    margin:0;

    color:var(--c2-navy);

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

    line-height:.97;

    letter-spacing:-.055em;
}


.m5ct2-hero-text {

    max-width:560px;

    margin:17px 0 0;

    color:#5E7075;

    font-size:17px;

    line-height:1.65;
}


.m5ct2-hero-actions {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:29px;
}


.m5ct2-main-action {

    display:inline-flex;

    align-items:center;

    gap:28px;

    min-height:47px;

    padding:0 19px;

    color:#fff;

    background:var(--c2-green);

    border-radius:14px;

    font-size:11px;

    font-weight:750;

    text-decoration:none;
}


.m5ct2-main-action span {

    font-size:15px;
}


.m5ct2-text-action {

    color:var(--c2-navy);

    font-size:11px;

    font-weight:700;

    text-decoration:none;
}


/* Hero reassurance, not another card */

.m5ct2-hero-side {

    display:grid;

    grid-template-columns:68px 1fr;

    gap:20px;

    align-items:center;

    max-width:450px;

    padding-left:34px;

    border-left:
        1px solid #CBD9D5;
}


.m5ct2-email-symbol {

    display:flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    border-radius:
        18px 18px 32px 18px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            var(--c2-navy),
            var(--c2-green)
        );
}


.m5ct2-email-symbol svg {

    width:27px;

    height:27px;

    fill:none;

    stroke:#fff;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.m5ct2-hero-side span {

    display:block;

    color:#71857E;

    font-size:8px;

    font-weight:800;

    letter-spacing:.11em;
}


.m5ct2-hero-side strong {

    display:block;

    margin-top:5px;

    color:var(--c2-navy);

    font-size:16px;

    line-height:1.35;
}


.m5ct2-hero-side p {

    margin:6px 0 0;

    color:#788781;

    font-size:11px;

    line-height:1.5;
}


/* =========================================================
   DIRECT CONTACT — OPEN TYPOGRAPHIC ROW
   ========================================================= */

.m5ct2-channels {

    padding:55px 0 66px;

    background:#fff;

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

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


.m5ct2-section-heading {

    margin-bottom:30px;
}


.m5ct2-section-heading h2 {

    margin:0;

    color:var(--c2-navy);

    font-size:36px;

    letter-spacing:-.03em;
}


.m5ct2-channel-row {

    display:grid;

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

    border-top:
        1px solid #CBD9D5;
}


.m5ct2-channel {

    min-height:120px;

    padding:23px 28px 12px 0;

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


.m5ct2-channel:not(:last-child) {

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

    padding-left:23px;
}


.m5ct2-channel:first-child {

    padding-left:0;
}


.m5ct2-channel > span {

    display:block;

    margin-bottom:17px;

    color:#6C827A;

    font-size:8px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5ct2-channel strong,
.m5ct2-channel a {

    color:var(--c2-navy);

    font-size:17px;

    line-height:1.4;

    font-weight:650;

    text-decoration:none;
}


/* =========================================================
   ROUTING — EDITORIAL LIST
   ========================================================= */

.m5ct2-routing {

    padding:72px 0 79px;

    background:var(--c2-warm);
}


.m5ct2-routing-grid {

    display:grid;

    grid-template-columns:
        340px 1fr;

    gap:95px;

    align-items:start;
}


.m5ct2-routing-heading h2 {

    margin:0;

    color:var(--c2-navy);

    font-size:36px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5ct2-routing-heading > p:not(
    .m5ct2-kicker
) {

    margin:13px 0 0;

    color:var(--c2-muted);

    font-size:13px;

    line-height:1.65;
}


.m5ct2-routing-list {

    border-top:
        1px solid #CBD8D4;
}


.m5ct2-routing-list a {

    display:grid;

    grid-template-columns:
        48px 1fr auto;

    align-items:center;

    gap:19px;

    min-height:82px;

    color:inherit;

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

    text-decoration:none;

    transition:
        padding-left .18s ease,
        background .18s ease;
}


.m5ct2-routing-list a:hover {

    padding-left:13px;

    background:
        linear-gradient(
            90deg,
            #F1F6F4,
            transparent
        );
}


.m5ct2-routing-list > a > span {

    color:var(--c2-brass);

    font-size:9px;

    font-weight:800;
}


.m5ct2-routing-list small {

    display:block;

    color:#71837C;

    font-size:7px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5ct2-routing-list strong {

    display:block;

    margin-top:3px;

    color:var(--c2-navy);

    font-size:14px;
}


.m5ct2-routing-list em {

    color:var(--c2-green);

    font-size:17px;

    font-style:normal;
}


/* =========================================================
   BUSINESS IDENTITY — ONLY MAJOR PANEL
   ========================================================= */

.m5ct2-identity {

    padding:0 0 78px;

    background:var(--c2-warm);
}


.m5ct2-identity-panel {

    display:grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap:65px;

    align-items:center;

    padding:46px;

    overflow:hidden;

    background:#fff;

    border:
        1px solid var(--c2-line);

    border-radius:
        30px 78px 30px 30px;
}


.m5ct2-identity-copy {

    max-width:520px;
}


.m5ct2-identity-copy h2 {

    margin:0;

    color:var(--c2-navy);

    font-size:35px;

    letter-spacing:-.03em;
}


.m5ct2-identity-copy > p,
.m5ct2-identity-copy address {

    margin:14px 0 0;

    color:var(--c2-muted);

    font-size:13px;

    line-height:1.7;

    font-style:normal;
}


.m5ct2-identity-links {

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:22px;
}


.m5ct2-identity-links a {

    color:var(--c2-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* abstract location field */

.m5ct2-location-field {

    position:relative;

    min-height:310px;

    overflow:hidden;

    border-radius:
        58px 22px 58px 22px;

    background:
        linear-gradient(
            145deg,
            #E8F2EF,
            #F6F9F8
        );
}


.m5ct2-location-line {

    position:absolute;

    left:-10%;

    width:120%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #A9C6BB,
            transparent
        );

    transform-origin:center;
}


.line-one {

    top:40%;

    transform:
        rotate(-11deg);
}


.line-two {

    top:61%;

    transform:
        rotate(8deg);
}


.m5ct2-location-pin {

    position:absolute;

    left:53%;

    top:48%;

    transform:
        translate(-50%,-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:92px;

    height:92px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            var(--c2-navy),
            var(--c2-green)
        );

    border-radius:50%;

    box-shadow:
        0 15px 32px
        rgba(13,41,66,.13);
}


.m5ct2-location-pin svg {

    width:23px;

    height:23px;

    fill:none;

    stroke:#fff;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.m5ct2-location-pin span {

    margin-top:3px;

    font-size:8px;

    font-weight:800;
}


.m5ct2-location-label {

    position:absolute;

    left:19px;

    bottom:16px;
}


.m5ct2-location-label strong {

    display:block;

    color:var(--c2-navy);

    font-size:8px;
}


.m5ct2-location-label span {

    display:block;

    margin-top:2px;

    color:#74877F;

    font-size:7px;
}


/* =========================================================
   SIMPLE TRUST NAV
   ========================================================= */

.m5ct2-trust {

    padding:0 0 60px;

    background:var(--c2-warm);

    text-align:center;
}


.m5ct2-trust-heading {

    margin-bottom:15px;
}


.m5ct2-trust-nav {

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;
}


.m5ct2-trust-nav a {

    color:#46625A;

    font-size:11px;

    font-weight:650;

    text-decoration:none;
}


.m5ct2-trust-nav span {

    color:#A1B0AA;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.m5ct2-final-wrap {

    padding:0 0 54px;

    background:var(--c2-warm);
}


.m5ct2-final {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:165px;

    padding:38px 45px;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            var(--c2-navy),
            #123E4B 50%,
            var(--c2-green)
        );

    border-radius:28px;
}


.m5ct2-final > div > span {

    display:block;

    margin-bottom:4px;

    color:#B8CDCB;

    font-size:8px;

    font-weight:800;

    letter-spacing:.11em;
}


.m5ct2-final h2 {

    margin:0;

    color:#fff;

    font-size:28px;
}


.m5ct2-final > a {

    display:inline-flex;

    align-items:center;

    gap:24px;

    min-height:42px;

    padding:0 17px;

    color:var(--c2-navy);

    background:#fff;

    border-radius:13px;

    border-bottom:
        2px solid var(--c2-brass);

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


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

@media (max-width:1000px) {

    .m5ct2-shell {

        width:calc(100% - 46px);
    }


    .m5ct2-hero-grid {

        grid-template-columns:1fr;

        gap:35px;
    }


    .m5ct2-hero-side {

        border-left:0;

        border-top:
            1px solid #CBD9D5;

        padding:
            22px 0 0;
    }


    .m5ct2-routing-grid {

        grid-template-columns:260px 1fr;

        gap:55px;
    }


    .m5ct2-identity-panel {

        grid-template-columns:1fr;

        gap:35px;
    }

}


@media (max-width:700px) {

    .m5ct2-shell {

        width:calc(100% - 28px);
    }


    .m5ct2-hero {

        padding:
            42px 0 50px;
    }


    .m5ct2-hero h1 {

        font-size:42px;
    }


    .m5ct2-channel-row {

        grid-template-columns:1fr;
    }


    .m5ct2-channel {

        border-right:0 !important;

        padding-left:0 !important;

        margin-right:0 !important;
    }


    .m5ct2-routing-grid {

        grid-template-columns:1fr;

        gap:28px;
    }


    .m5ct2-identity-panel {

        padding:30px;

        border-radius:24px;
    }


    .m5ct2-final {

        display:block;

        padding:30px;

        border-radius:23px;
    }


    .m5ct2-final > a {

        margin-top:17px;
    }

}

