/* =========================================================
   5M CAREERS V2
   Lean / modern / useful
   ========================================================= */

:root {

    --cr2-navy:#102A43;
    --cr2-green:#285D50;

    --cr2-blue:#EAF2F5;
    --cr2-sage:#EEF3EF;

    --cr2-warm:#FCFBF8;

    --cr2-brass:#A88650;

    --cr2-ink:#1B2B34;
    --cr2-muted:#66767A;

    --cr2-line:#DEE5E2;
}


.m5career2-page {

    color:var(--cr2-ink);

    background:var(--cr2-warm);

    overflow:hidden;
}


.m5career2-shell {

    width:calc(100% - 80px);

    max-width:1360px;

    margin:0 auto;
}


.m5career2-kicker {

    margin:0 0 9px;

    color:#59786F;

    font-size:9px;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


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

.m5career2-hero {

    padding:55px 0 66px;

    background:
        linear-gradient(
            180deg,
            #F5F8F6,
            var(--cr2-warm)
        );
}


.m5career2-hero-grid {

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    gap:75px;

    align-items:center;
}


.m5career2-hero-copy {

    max-width:620px;
}


.m5career2-hero h1 {

    margin:0;

    color:var(--cr2-navy);

    font-size:
        clamp(46px,5vw,66px);

    line-height:.99;

    letter-spacing:-.05em;
}


.m5career2-hero-copy > p:not(
    .m5career2-kicker
) {

    max-width:560px;

    margin:16px 0 0;

    color:#607176;

    font-size:16px;

    line-height:1.65;
}


.m5career2-actions {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:26px;
}


.m5career2-primary {

    display:inline-flex;

    align-items:center;

    min-height:45px;

    padding:0 18px;

    color:#fff;

    background:var(--cr2-green);

    border-radius:14px;

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5career2-secondary {

    color:var(--cr2-navy);

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


/* people visual */

.m5career2-hero-visual {

    position:relative;

    min-height:390px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #EEF4F2,
            #F7F3EC
        );

    border-radius:
        80px 26px 80px 26px;
}


.m5career2-people-shape {

    position:absolute;

    border-radius:50%;
}


.shape-a {

    width:270px;

    height:270px;

    right:-70px;

    top:-70px;

    background:
        rgba(40,93,80,.07);
}


.shape-b {

    width:190px;

    height:190px;

    left:-45px;

    bottom:-50px;

    background:
        rgba(16,42,67,.05);
}


.m5career2-people-main {

    position:absolute;

    left:50%;

    top:50%;

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

    width:330px;
}


.m5career2-people-main svg {

    width:100%;

    height:auto;

    fill:
        rgba(40,93,80,.06);

    stroke:#496F64;

    stroke-width:1.2;
}


.m5career2-hero-label {

    position:absolute;

    left:21px;

    bottom:17px;
}


.m5career2-hero-label span {

    display:block;

    color:#72857D;

    font-size:7px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5career2-hero-label strong {

    display:block;

    margin-top:3px;

    color:var(--cr2-navy);

    font-size:8px;
}


/* =========================================================
   WORKING AT 5M
   ========================================================= */

.m5career2-working {

    padding:68px 0 75px;

    background:#fff;
}


.m5career2-working-grid {

    display:grid;

    grid-template-columns:330px 1fr;

    gap:90px;
}


.m5career2-working h2 {

    margin:0;

    color:var(--cr2-navy);

    font-size:37px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5career2-working-copy {

    max-width:800px;

    margin:0;

    color:#46595E;

    font-size:15px;

    line-height:1.78;
}


.m5career2-principles {

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:24px;
}


.m5career2-principles span {

    padding:9px 14px;

    color:#49645C;

    background:#EFF4F1;

    border-radius:999px;

    font-size:9px;

    font-weight:650;
}


/* =========================================================
   OPENINGS
   ========================================================= */

.m5career2-openings {

    padding:62px 0 70px;

    background:
        linear-gradient(
            180deg,
            #F2F5F2,
            #EEF2EF
        );
}


.m5career2-section-head {

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:25px;
}


.m5career2-section-head h2 {

    margin:0;

    color:var(--cr2-navy);

    font-size:35px;

    letter-spacing:-.03em;
}


.m5career2-section-head > p {

    max-width:410px;

    margin:0;

    color:var(--cr2-muted);

    font-size:11px;

    line-height:1.5;
}


.m5career2-no-openings {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:130px;

    padding:29px 34px;

    background:#fff;

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

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


.m5career2-no-openings span {

    display:block;

    color:#70847D;

    font-size:7px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5career2-no-openings strong {

    display:block;

    margin-top:6px;

    color:var(--cr2-navy);

    font-size:16px;
}


.m5career2-no-openings p {

    margin:5px 0 0;

    color:#72817C;

    font-size:10px;
}


.m5career2-no-openings > a {

    color:var(--cr2-green);

    font-size:10px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;
}


/* =========================================================
   APPLICATION
   ========================================================= */

.m5career2-apply {

    padding:70px 0 78px;

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


.m5career2-apply-grid {

    display:grid;

    grid-template-columns:.68fr 1.32fr;

    gap:65px;

    align-items:start;
}


.m5career2-apply-intro {

    max-width:410px;
}


.m5career2-apply-intro h2 {

    margin:0;

    color:var(--cr2-navy);

    font-size:39px;
}


.m5career2-apply-intro > p:not(
    .m5career2-kicker
) {

    margin:13px 0 0;

    color:var(--cr2-muted);

    font-size:13px;

    line-height:1.7;
}


.m5career2-privacy-note {

    margin-top:26px;

    padding-top:17px;

    border-top:
        1px solid #D4DEDA;
}


.m5career2-privacy-note strong {

    display:block;

    color:var(--cr2-green);

    font-size:10px;
}


.m5career2-privacy-note span {

    display:block;

    margin-top:5px;

    color:#71817C;

    font-size:10px;

    line-height:1.5;
}


/* form */

.m5career2-form-panel {

    padding:30px;

    background:#fff;

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

    border-radius:
        28px 28px 58px 28px;

    box-shadow:
        0 16px 48px
        rgba(16,42,67,.05);
}


.m5career2-success,
.m5career2-error {

    margin-bottom:18px;

    padding:14px 16px;

    border-radius:14px;

    font-size:10px;
}


.m5career2-success {

    color:#28564A;

    background:#EAF3EF;

    border:
        1px solid #CCDCD5;
}


.m5career2-success strong,
.m5career2-success span {

    display:block;
}


.m5career2-success span {

    margin-top:2px;
}


.m5career2-error {

    color:#704B33;

    background:#FBF2E9;

    border:
        1px solid #E7CDB8;
}


.m5career2-honeypot {

    position:absolute;

    left:-99999px;
}


.m5career2-fields {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:16px;
}


.m5career2-fields label {

    display:block;
}


.m5career2-fields label > span {

    display:block;

    margin:0 0 7px 2px;

    color:#536B63;

    font-size:10px;

    font-weight:700;
}


.m5career2-fields input,
.m5career2-fields select,
.m5career2-fields textarea {

    width:100%;

    color:#293C41;

    background:#FBFCFB;

    border:
        1px solid #D2DEDA;

    border-radius:13px;

    outline:0;

    font-family:inherit;

    font-size:14px;
}


.m5career2-fields input,
.m5career2-fields select {

    min-height:51px;

    padding:0 13px;
}


.m5career2-fields textarea {

    padding:13px;

    resize:vertical;
}


.m5career2-fields input:focus,
.m5career2-fields select:focus,
.m5career2-fields textarea:focus {

    background:#fff;

    border-color:#789E92;

    box-shadow:
        0 0 0 4px
        rgba(40,93,80,.09);
}


.m5career2-message,
.m5career2-cv,
.m5career2-consent {

    grid-column:1 / -1;
}


.m5career2-cv {

    padding:15px;

    background:#F3F6F4;

    border-radius:15px;
}


.m5career2-cv input {

    min-height:auto;

    padding:0;

    border:0;

    background:none;
}


.m5career2-cv small {

    display:block;

    margin-top:6px;

    color:#77857F;

    font-size:9px;
}


.m5career2-consent {

    display:grid !important;

    grid-template-columns:20px 1fr;

    gap:9px;

    align-items:start;
}


.m5career2-consent input {

    width:18px;

    min-height:18px;

    margin-top:2px;
}


.m5career2-consent span {

    margin:0 !important;

    color:#687A73 !important;

    font-size:10px !important;

    line-height:1.55;
}


.m5career2-submit {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:22px;

    padding-top:19px;

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


.m5career2-submit p {

    max-width:390px;

    margin:0;

    color:#7C8984;

    font-size:9px;

    line-height:1.5;
}


.m5career2-submit button {

    display:inline-flex;

    align-items:center;

    gap:21px;

    min-height:46px;

    padding:0 17px;

    color:#fff;

    background:var(--cr2-green);

    border:0;

    border-radius:13px;

    font-size:10px;

    font-weight:750;

    cursor:pointer;
}


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

@media (max-width:1000px) {

    .m5career2-shell {

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


    .m5career2-hero-grid {

        grid-template-columns:1fr;

        gap:35px;
    }


    .m5career2-working-grid {

        grid-template-columns:250px 1fr;

        gap:55px;
    }


    .m5career2-apply-grid {

        grid-template-columns:1fr;

        gap:36px;
    }

}


@media (max-width:700px) {

    .m5career2-shell {

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


    .m5career2-hero h1 {

        font-size:41px;
    }


    .m5career2-working-grid {

        grid-template-columns:1fr;

        gap:20px;
    }


    .m5career2-section-head {

        display:block;
    }


    .m5career2-section-head > p {

        margin-top:8px;
    }


    .m5career2-no-openings {

        display:block;

        padding:24px;

        border-radius:22px;
    }


    .m5career2-no-openings > a {

        display:inline-block;

        margin-top:14px;
    }


    .m5career2-fields {

        grid-template-columns:1fr;
    }


    .m5career2-message,
    .m5career2-cv,
    .m5career2-consent {

        grid-column:auto;
    }


    .m5career2-submit {

        display:block;
    }


    .m5career2-submit button {

        width:100%;

        margin-top:15px;

        justify-content:center;
    }

}