/* =========================================================
   5M CUSTOMER SUPPORT
   Service-oriented / connected / soft authority
   ========================================================= */

:root {

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

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

    --sp-brass:#A9854E;

    --sp-ink:#192932;
    --sp-muted:#66767A;

    --sp-line:#DAE4E3;

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


.m5support-page {

    color:var(--sp-ink);

    background:var(--sp-warm);

    overflow:hidden;
}


.m5support-shell {

    width:calc(100% - 80px);

    max-width:1360px;

    margin:0 auto;
}


.m5support-kicker {

    margin:0 0 9px;

    color:var(--sp-teal);

    font-size:9px;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.m5support-kicker.light {

    color:#AAD0C5;
}


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

.m5support-hero {

    padding:55px 0 66px;

    background:
        linear-gradient(
            180deg,
            #F3F8F6,
            var(--sp-warm)
        );
}


.m5support-hero-grid {

    display:grid;

    grid-template-columns:.92fr 1.08fr;

    gap:70px;

    align-items:center;
}


.m5support-hero-copy {

    max-width:620px;
}


.m5support-hero h1 {

    margin:0;

    color:var(--sp-navy);

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

    line-height:.98;

    letter-spacing:-.052em;
}


.m5support-hero-text {

    max-width:570px;

    margin:17px 0 0;

    color:#5D7074;

    font-size:16px;

    line-height:1.65;
}


.m5support-hero-actions {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:27px;
}


.m5support-primary {

    display:inline-flex;

    align-items:center;

    gap:25px;

    min-height:46px;

    padding:0 18px;

    color:#fff;

    background:var(--sp-green);

    border-radius:14px;

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5support-primary span {

    font-size:15px;
}


.m5support-secondary {

    color:var(--sp-navy);

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


.m5support-email-note {

    display:flex;

    align-items:center;

    gap:11px;

    max-width:420px;

    margin-top:28px;

    padding-top:17px;

    border-top:
        1px solid #D7E2DE;
}


.m5support-email-note > svg {

    flex:0 0 32px;

    width:32px;

    height:32px;

    padding:7px;

    border-radius:10px;

    fill:none;

    stroke:#fff;

    stroke-width:1.5;

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


.m5support-email-note strong {

    display:block;

    color:#30483F;

    font-size:10px;
}


.m5support-email-note span {

    display:block;

    margin-top:2px;

    color:#74837E;

    font-size:9px;
}


/* hero visual */

.m5support-hero-visual {

    position:relative;

    min-height:390px;

    overflow:hidden;

    border-radius:
        80px 25px 80px 25px;

    background:
        linear-gradient(
            145deg,
            #E7F1EE,
            #F4F8F6
        );
}


.m5support-visual-label {

    position:absolute;

    left:22px;

    top:19px;

    z-index:3;
}


.m5support-visual-label span {

    display:block;

    color:#71857E;

    font-size:7px;

    font-weight:800;

    letter-spacing:.11em;
}


.m5support-visual-label strong {

    display:block;

    margin-top:3px;

    color:var(--sp-navy);

    font-size:8px;
}


.m5support-hero-visual > svg {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;
}


.m5support-route {

    fill:none;

    stroke:
        rgba(52,119,107,.28);

    stroke-width:1.2;
}


.m5support-route.secondary {

    stroke:
        rgba(13,41,66,.15);
}


.m5support-dot {

    fill:#34776B;
}


.m5support-visual-core {

    position:absolute;

    left:50%;

    top:50%;

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

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:135px;

    height:135px;

    color:#fff;

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

    border-radius:50%;

    text-align:center;

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


.m5support-visual-core span {

    color:#B4D0C8;

    font-size:8px;

    font-weight:800;
}


.m5support-visual-core strong {

    margin-top:3px;

    font-size:14px;
}


.m5support-visual-core small {

    margin-top:3px;

    color:#C6D9D4;

    font-size:6px;
}


.m5support-visual-chip {

    position:absolute;

    padding:8px 11px;

    color:#38554C;

    background:#fff;

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

    border-radius:999px;

    font-size:8px;

    font-weight:650;

    box-shadow:
        0 8px 22px
        rgba(20,62,51,.05);
}


.chip-a {

    left:7%;

    top:21%;
}


.chip-b {

    right:5%;

    top:25%;
}


.chip-c {

    left:9%;

    bottom:19%;
}


.chip-d {

    right:8%;

    bottom:16%;
}


/* =========================================================
   SUPPORT NEEDS
   ========================================================= */

.m5support-needs {

    padding:69px 0 78px;

    background:#fff;
}


.m5support-section-heading {

    display:grid;

    grid-template-columns:1fr .8fr;

    gap:60px;

    align-items:end;

    margin-bottom:29px;
}


.m5support-section-heading h2 {

    margin:0;

    color:var(--sp-navy);

    font-size:37px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5support-section-heading > p {

    max-width:450px;

    justify-self:end;

    margin:0;

    color:var(--sp-muted);

    font-size:12px;

    line-height:1.6;
}


.m5support-needs-flow {

    display:grid;

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

    gap:14px;
}


.m5support-need {

    position:relative;

    min-height:210px;

    padding:24px;

    color:inherit;

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

    text-decoration:none;
}


.need-one {

    border-radius:
        24px 24px 56px 24px;

    background:#fff;
}


.need-two {

    margin-top:20px;

    border-radius:
        50px 22px 22px 22px;

    background:#F3F7F5;
}


.need-three {

    margin-top:40px;

    border-radius:
        22px 52px 22px 22px;

    background:var(--sp-mist);
}


.need-four {

    margin-top:60px;

    border-radius:
        22px 22px 22px 52px;

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


.m5support-need > span {

    display:block;

    margin-bottom:38px;

    color:var(--sp-brass);

    font-size:9px;

    font-weight:800;
}


.m5support-need small {

    display:block;

    margin-bottom:5px;

    color:#71857D;

    font-size:7px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5support-need strong {

    color:var(--sp-navy);

    font-size:16px;
}


.m5support-need p {

    margin:8px 0 0;

    color:#6E7E79;

    font-size:10px;

    line-height:1.55;
}


.m5support-need em {

    position:absolute;

    right:18px;

    bottom:16px;

    color:var(--sp-green);

    font-style:normal;
}


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

.m5support-journey {

    padding:72px 0;

    background:
        linear-gradient(
            180deg,
            #EFF5F2,
            #EAF2EF
        );
}


.m5support-journey-grid {

    display:grid;

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

    gap:78px;

    align-items:center;
}


.m5support-journey-copy {

    max-width:470px;
}


.m5support-journey-copy h2 {

    margin:0;

    color:var(--sp-navy);

    font-size:36px;

    line-height:1.13;

    letter-spacing:-.03em;
}


.m5support-journey-copy > p:not(
    .m5support-kicker
) {

    margin:14px 0 0;

    color:var(--sp-muted);

    font-size:13px;

    line-height:1.7;
}


.m5support-journey-copy > a {

    display:inline-flex;

    margin-top:22px;

    color:var(--sp-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* vertical-light journey */

.m5support-journey-art {

    position:relative;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px 30px;

    min-height:365px;
}


.m5support-journey-line {

    position:absolute;

    left:50%;

    top:20px;

    bottom:20px;

    width:1px;

    background:
        linear-gradient(
            180deg,
            #AFC8BE,
            #D0DED9,
            #8FB3A6
        );
}


.m5support-step {

    position:relative;

    z-index:2;

    min-height:145px;

    padding:21px;

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

    border:
        1px solid #D5E2DE;
}


.support-step-1 {

    border-radius:
        24px 24px 55px 24px;
}


.support-step-2 {

    margin-top:30px;

    border-radius:
        50px 22px 22px 22px;
}


.support-step-3 {

    border-radius:
        22px 50px 22px 22px;
}


.support-step-4 {

    margin-top:30px;

    border-radius:
        22px 22px 22px 50px;
}


.m5support-step > span {

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    margin-bottom:18px;

    color:#fff;

    background:var(--sp-green);

    border-radius:50%;

    font-size:8px;

    font-weight:800;
}


.m5support-step strong {

    display:block;

    color:var(--sp-navy);

    font-size:13px;
}


.m5support-step small {

    display:block;

    margin-top:6px;

    color:#71817B;

    font-size:9px;

    line-height:1.5;
}


/* =========================================================
   EMAIL ZONE
   ========================================================= */

.m5support-email-zone {

    padding:75px 0;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            var(--sp-navy),
            #11414D 50%,
            var(--sp-green)
        );
}


.m5support-email-panel {

    display:grid;

    grid-template-columns:.88fr 1.12fr;

    gap:70px;

    align-items:center;
}


.m5support-email-copy {

    max-width:520px;
}


.m5support-email-copy h2 {

    margin:0;

    color:#fff;

    font-size:38px;

    line-height:1.11;

    letter-spacing:-.03em;
}


.m5support-email-points {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:22px;
}


.m5support-email-points span {

    padding:8px 11px;

    color:#fff;

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

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:999px;

    font-size:8px;
}


/* mail graphic */

.m5support-mail-art {

    position:relative;

    min-height:330px;
}


.m5support-mail-sheet {

    position:absolute;

    background:#fff;

    border:
        1px solid
        rgba(255,255,255,.25);

    box-shadow:
        0 18px 38px
        rgba(0,0,0,.09);
}


.sheet-back {

    left:10%;

    top:11%;

    width:62%;

    height:74%;

    transform:rotate(-5deg);

    background:#DCEAE5;
}


.sheet-front {

    left:25%;

    top:3%;

    width:63%;

    height:82%;

    padding:24px;
}


.m5support-mail-head span {

    display:block;

    color:var(--sp-teal);

    font-size:8px;

    font-weight:800;
}


.m5support-mail-head strong {

    display:block;

    margin-top:4px;

    color:var(--sp-navy);

    font-size:16px;
}


.m5support-mail-line {

    width:70%;

    height:6px;

    margin-top:14px;

    border-radius:999px;

    background:#D9E5E1;
}


.m5support-mail-line.line-long {

    width:88%;
}


.m5support-mail-line.line-short {

    width:47%;
}


.m5support-mail-status {

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:28px;
}


.m5support-mail-status span {

    color:#627A71;

    font-size:7px;

    font-weight:800;
}


.m5support-mail-status i {

    width:23px;

    height:1px;

    background:#B7CBC4;
}


.m5support-mail-icon {

    position:absolute;

    right:1%;

    bottom:7%;

    display:flex;

    align-items:center;

    justify-content:center;

    width:92px;

    height:92px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #0D2942,
            #17604D
        );

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


.m5support-mail-icon svg {

    width:32px;

    height:32px;

    fill:none;

    stroke:#fff;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;
}


/* =========================================================
   FOLLOW-UP
   ========================================================= */

.m5support-followup {

    padding:68px 0 72px;

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


.m5support-followup-intro {

    max-width:670px;

    margin-bottom:29px;
}


.m5support-followup-intro h2 {

    margin:0;

    color:var(--sp-navy);

    font-size:35px;

    letter-spacing:-.03em;
}


.m5support-followup-intro > p:not(
    .m5support-kicker
) {

    margin:11px 0 0;

    color:var(--sp-muted);

    font-size:13px;

    line-height:1.65;
}


.m5support-followup-flow {

    display:grid;

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

    border-top:
        1px solid #CBD9D5;
}


.m5support-followup-flow > div {

    min-height:140px;

    padding:22px 25px 15px 0;

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


.m5support-followup-flow > div:not(:last-child) {

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

    padding-left:22px;
}


.m5support-followup-flow > div:first-child {

    padding-left:0;
}


.m5support-followup-flow span {

    display:block;

    margin-bottom:28px;

    color:var(--sp-brass);

    font-size:8px;

    font-weight:800;
}


.m5support-followup-flow strong {

    color:var(--sp-navy);

    font-size:13px;
}


.m5support-followup-flow small {

    display:block;

    margin-top:6px;

    color:#74827D;

    font-size:9px;

    line-height:1.5;
}


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

.m5support-links {

    padding:0 0 65px;

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


.m5support-links-heading {

    margin-bottom:20px;
}


.m5support-links-heading h2 {

    margin:0;

    color:var(--sp-navy);

    font-size:31px;

    letter-spacing:-.025em;
}


.m5support-link-flow {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:
        18px 21px;

    background:#EFF4F2;

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

    border-radius:28px;
}


.m5support-link-flow a {

    position:relative;

    flex:1;

    min-height:75px;

    padding:13px 32px 10px 13px;

    color:inherit;

    text-decoration:none;
}


.m5support-link-flow a:not(:last-child) {

    border-right:
        1px solid #CCDAD5;
}


.m5support-link-flow span {

    display:block;

    margin-bottom:6px;

    color:#71847D;

    font-size:7px;

    font-weight:800;
}


.m5support-link-flow strong {

    color:var(--sp-navy);

    font-size:11px;
}


.m5support-link-flow em {

    position:absolute;

    right:12px;

    bottom:13px;

    color:var(--sp-green);

    font-style:normal;
}


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

.m5support-final-wrap {

    padding:0 0 54px;

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


.m5support-final {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:170px;

    padding:39px 45px;

    color:#fff;

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

    border-radius:29px;
}


.m5support-final > div > span {

    display:block;

    margin-bottom:4px;

    color:#B7CDCB;

    font-size:8px;

    font-weight:800;

    letter-spacing:.11em;
}


.m5support-final h2 {

    margin:0;

    color:#fff;

    font-size:28px;
}


.m5support-final p {

    max-width:550px;

    margin:6px 0 0;

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

    font-size:10px;

    line-height:1.5;
}


.m5support-final > a {

    display:inline-flex;

    align-items:center;

    gap:22px;

    min-height:42px;

    padding:0 17px;

    color:var(--sp-navy);

    background:#fff;

    border-radius:13px;

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

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


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

@media (max-width:1000px) {

    .m5support-shell {

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


    .m5support-hero-grid,
    .m5support-journey-grid,
    .m5support-email-panel {

        grid-template-columns:1fr;

        gap:40px;
    }


    .m5support-needs-flow {

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


    .m5support-need {

        margin-top:0 !important;
    }


    .m5support-link-flow {

        display:grid;

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


    .m5support-link-flow a {

        border-right:0 !important;
    }

}


@media (max-width:700px) {

    .m5support-shell {

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


    .m5support-hero h1 {

        font-size:41px;
    }


    .m5support-section-heading {

        grid-template-columns:1fr;

        gap:10px;
    }


    .m5support-section-heading > p {

        justify-self:start;
    }


    .m5support-needs-flow,
    .m5support-journey-art,
    .m5support-followup-flow,
    .m5support-link-flow {

        grid-template-columns:1fr;
    }


    .m5support-journey-line {

        display:none;
    }


    .m5support-followup-flow > div {

        border-right:0 !important;

        padding-left:0 !important;
    }


    .m5support-link-flow {

        border-radius:22px;
    }


    .m5support-link-flow a {

        border-bottom:
            1px solid #CCDAD5;
    }


    .m5support-final {

        display:block;

        padding:30px;

        border-radius:23px;
    }


    .m5support-final > a {

        margin-top:17px;
    }

}



/* =========================================================
   CUSTOMER SUPPORT HERO — PURPOSE-DRIVEN VISUAL
   ========================================================= */

.m5support-purpose-visual {

    position:relative;

    padding:27px;

    background:
        linear-gradient(
            155deg,
            #EFF6F3 0%,
            #F8FAF9 100%
        );

    border:
        1px solid #D8E5E0;

    border-radius:
        30px 30px 68px 30px;

    box-shadow:
        0 17px 45px
        rgba(20,62,51,.055);
}


/* Heading */

.m5support-purpose-head {

    max-width:510px;

    margin-bottom:20px;
}


.m5support-purpose-head > span {

    display:block;

    margin-bottom:6px;

    color:#34776B;

    font-size:7px;

    font-weight:800;

    letter-spacing:.13em;
}


.m5support-purpose-head > strong {

    display:block;

    color:#0D2942;

    font-size:20px;

    line-height:1.25;
}


.m5support-purpose-head > p {

    margin:7px 0 0;

    color:#65777A;

    font-size:11px;

    line-height:1.55;
}


/* Vertical support journey */

.m5support-purpose-journey {

    position:relative;

    display:grid;

    gap:9px;

    padding-left:5px;
}


.m5support-purpose-line {

    position:absolute;

    left:25px;

    top:25px;

    bottom:25px;

    width:1px;

    overflow:hidden;

    background:
        #BED2CA;
}


.m5support-purpose-line::after {

    content:"";

    position:absolute;

    left:0;

    top:-70px;

    width:100%;

    height:72px;

    background:
        linear-gradient(
            180deg,
            transparent,
            #34776B,
            transparent
        );

    animation:
        m5SupportPurposeFlow
        4.2s linear
        infinite;
}


@keyframes m5SupportPurposeFlow {

    from {
        transform:translateY(0);
    }

    to {
        transform:translateY(390px);
    }

}


.m5support-purpose-item {

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        42px 1fr;

    gap:12px;

    align-items:center;

    min-height:72px;

    padding:9px 12px 9px 4px;

    border-radius:15px;

    transition:
        background .18s ease;
}


.m5support-purpose-item:hover {

    background:
        rgba(255,255,255,.72);
}


.m5support-purpose-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    color:#fff;

    background:#145846;

    border-radius:
        12px 12px 18px 12px;

    box-shadow:
        0 7px 17px
        rgba(20,88,70,.11);
}


.m5support-purpose-icon svg {

    width:18px;

    height:18px;

    fill:none;

    stroke:#fff;

    stroke-width:1.45;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.m5support-purpose-item small {

    display:block;

    margin-bottom:2px;

    color:#72857E;

    font-size:6px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5support-purpose-item strong {

    display:block;

    color:#193B33;

    font-size:11px;

    line-height:1.3;
}


.m5support-purpose-item span {

    display:block;

    max-width:420px;

    margin-top:3px;

    color:#6F807A;

    font-size:8px;

    line-height:1.45;
}


/* Customer Support vs Contact */

.m5support-purpose-difference {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;

    margin-top:18px;
}


.m5support-purpose-difference > div {

    min-height:112px;

    padding:14px 15px;

    border-radius:17px;
}


.m5support-purpose-support {

    background:#fff;

    border:
        1px solid #D4E2DD;
}


.m5support-purpose-contact {

    color:#fff;

    background:
        linear-gradient(
            140deg,
            #0D2942,
            #145846
        );
}


.m5support-purpose-difference span {

    display:block;

    margin-bottom:6px;

    color:#678078;

    font-size:6px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5support-purpose-contact span {

    color:#B4CEC7;
}


.m5support-purpose-difference strong {

    display:block;

    color:#173F34;

    font-size:11px;

    line-height:1.3;
}


.m5support-purpose-contact strong {

    color:#fff;
}


.m5support-purpose-difference small {

    display:block;

    margin-top:5px;

    color:#73837D;

    font-size:7px;

    line-height:1.45;
}


.m5support-purpose-contact small {

    color:
        rgba(255,255,255,.65);
}


.m5support-purpose-contact a {

    display:inline-flex;

    margin-top:9px;

    color:#fff;

    font-size:7px;

    font-weight:750;

    text-decoration:none;
}


/* Completely suppress old abstract hero system */

.m5support-hero-visual {

    display:none !important;
}


/* reduced-motion accessibility */

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

    .m5support-purpose-line::after {

        animation:none;
    }

}


/* mobile */

@media (max-width:700px) {

    .m5support-purpose-visual {

        padding:20px;

        border-radius:
            23px 23px 45px 23px;
    }


    .m5support-purpose-difference {

        grid-template-columns:1fr;
    }


    .m5support-purpose-item span {

        font-size:9px;
    }

}