/* =========================================================
   5M INSIGHTS & KNOWLEDGE CENTRE
   Editorial / knowledge-library design
   ========================================================= */

.m5in-page {
    --navy:#072f3d;
    --ink:#133b48;
    --muted:#687f87;
    --green:#08715c;
    --green2:#288c78;
    --blue:#287f97;
    --line:#d7e4e0;
    --soft:#f6faf8;

    overflow:hidden;

    background:#fff;

    color:var(--ink);
}


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

    margin:0 auto;
}


.m5in-page h1,
.m5in-page h2,
.m5in-page h3 {
    margin:0;

    color:var(--navy);
}


.m5in-page h1,
.m5in-page h2 {
    letter-spacing:-.04em;
}


.m5in-page p {
    color:var(--muted);
}


.m5in-eyebrow,
.m5in-section-no {
    margin:0 0 17px;

    color:#59747d;

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

    letter-spacing:.15em;
}


.m5in-primary {
    display:inline-flex;

    min-height:49px;

    padding:11px 24px;

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

    border-radius:999px;

    background:var(--green);

    color:#fff !important;

    font-size:13px;
    font-weight:850;

    text-decoration:none;
}


.m5in-text-link {
    color:var(--navy) !important;

    font-size:13px;
    font-weight:850;

    text-decoration:none;
}


.m5in-text-link span {
    margin-left:6px;
}



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

.m5in-hero {
    padding:
        32px 0 0;

    background:
        linear-gradient(
            180deg,
            #fbfdfc,
            #fff
        );
}


.m5in-hero-top {
    display:flex;

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

    padding:
        16px 0 19px;

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


.m5in-hero-top
.m5in-eyebrow {
    margin:0;
}


.m5in-hero-top > span {
    color:#899ca1;

    font-size:7px;
    font-weight:850;

    letter-spacing:.1em;
}


.m5in-hero-grid {
    display:grid;

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

    gap:105px;

    align-items:end;

    padding:
        66px 0 58px;
}


.m5in-hero h1 {
    max-width:700px;

    font-size:
        clamp(52px,5.4vw,75px);

    line-height:.99;
}


.m5in-hero-intro {
    padding-bottom:4px;
}


.m5in-hero-intro p {
    max-width:570px;

    margin:
        0 0 15px;

    font-size:15px;
    line-height:1.75;
}


.m5in-actions {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:22px;

    margin-top:27px;
}



/* editorial principles */

.m5in-editorial-line {
    display:grid;

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

    border-top:
        1px solid
        #aacac2;

    border-bottom:
        1px solid
        #d5e3df;
}


.m5in-editorial-line > div {
    min-height:120px;

    padding:
        22px 23px;

    border-right:
        1px solid
        #d5e3df;
}


.m5in-editorial-line > div:last-child {
    border-right:0;
}


.m5in-editorial-line span {
    display:block;

    margin-bottom:16px;

    color:#9aadb1;

    font-size:8px;
}


.m5in-editorial-line strong {
    display:block;

    color:var(--navy);

    font-size:12px;
}


.m5in-editorial-line small {
    display:block;

    max-width:195px;

    margin-top:5px;

    color:#768c92;

    font-size:8px;
    line-height:1.45;
}



/* =========================================================
   KNOWLEDGE THEMES
   ========================================================= */

.m5in-themes {
    padding:
        70px 0;
}


.m5in-themes-heading {
    display:grid;

    grid-template-columns:
        .78fr
        1.22fr;

    column-gap:90px;

    align-items:end;

    margin-bottom:39px;
}


.m5in-themes-heading
.m5in-section-no {
    grid-column:1/-1;
}


.m5in-themes-heading h2,
.m5in-library-header h2,
.m5in-standard h2,
.m5in-commercial h2 {
    max-width:590px;

    font-size:
        clamp(38px,4vw,55px);

    line-height:1.055;
}


.m5in-themes-heading > p:last-child {
    max-width:580px;

    margin:0;

    font-size:14px;
    line-height:1.7;
}



/* themes as editorial register, not cards */

.m5in-theme-register {
    border-top:
        1px solid
        #aac8c1;
}


.m5in-theme {
    display:grid;

    grid-template-columns:
        42px
        1fr
        31px;

    gap:20px;

    align-items:center;

    min-height:112px;

    padding:
        18px 6px;

    border-bottom:
        1px solid
        #dbe6e3;

    color:inherit;

    text-decoration:none;

    transition:
        padding .2s ease,
        background .2s ease;
}


.m5in-theme:hover {
    padding-left:17px;

    background:
        linear-gradient(
            90deg,
            rgba(8,113,92,.035),
            transparent
        );
}


.m5in-theme-number {
    color:#9badb0;

    font-size:10px;
}


.m5in-theme small {
    display:block;

    margin-bottom:5px;

    color:#7e9398;

    font-size:7px;
    font-weight:900;

    letter-spacing:.11em;
}


.m5in-theme strong {
    display:block;

    color:var(--navy);

    font-size:17px;

    letter-spacing:-.015em;
}


.m5in-theme p {
    max-width:690px;

    margin:
        7px 0 0;

    font-size:10px;
    line-height:1.55;
}


.m5in-theme i {
    color:var(--green);

    font-size:14px;

    font-style:normal;

    text-align:right;
}



/* =========================================================
   ARTICLE LIBRARY
   ========================================================= */

.m5in-library {
    padding:
        68px 0;

    background:
        #f6f9f8;
}


.m5in-library-header {
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:50px;

    margin-bottom:40px;
}


.m5in-library-status {
    padding-left:22px;

    border-left:
        2px solid
        #9bc4ba;
}


.m5in-library-status span {
    display:block;

    color:#80959a;

    font-size:7px;
    font-weight:900;

    letter-spacing:.1em;
}


.m5in-library-status strong {
    display:block;

    margin-top:5px;

    color:var(--green);

    font-size:11px;
}



/* published article rows */

.m5in-article-list {
    border-top:
        1px solid
        #a9c7c0;
}


.m5in-article {
    display:grid;

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

    gap:21px;

    align-items:start;

    padding:
        26px 4px;

    border-bottom:
        1px solid
        #d9e4e1;
}


.m5in-article-index {
    color:#9caeb1;

    font-size:10px;
}


.m5in-article-meta {
    display:flex;

    gap:17px;

    margin-bottom:8px;
}


.m5in-article-meta span {
    color:#80959a;

    font-size:7px;
    font-weight:850;

    text-transform:uppercase;

    letter-spacing:.08em;
}


.m5in-article-main h3 {
    max-width:720px;

    font-size:23px;

    line-height:1.15;

    letter-spacing:-.02em;
}


.m5in-article-main h3 a {
    color:inherit;

    text-decoration:none;
}


.m5in-article-main > p {
    max-width:760px;

    margin:
        10px 0 0;

    font-size:10px;
    line-height:1.6;
}


.m5in-read {
    justify-self:end;

    color:var(--green);

    font-size:9px;
    font-weight:850;

    text-decoration:none;
}


.m5in-read span {
    margin-left:4px;
}



/* honest empty library */

.m5in-empty-library {
    display:grid;

    grid-template-columns:
        70px
        1fr
        150px;

    gap:30px;

    align-items:center;

    min-height:245px;

    padding:
        36px 38px;

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

    background:#fff;
}


.m5in-empty-index {
    color:#a1b2b5;

    font-size:35px;

    font-weight:300;
}


.m5in-empty-library
> div:nth-child(2) > span {
    display:block;

    margin-bottom:8px;

    color:#80959a;

    font-size:7px;
    font-weight:900;

    letter-spacing:.11em;
}


.m5in-empty-library h3 {
    max-width:500px;

    font-size:31px;

    line-height:1.08;

    letter-spacing:-.03em;
}


.m5in-empty-library p {
    max-width:600px;

    margin:
        13px 0 0;

    font-size:11px;
    line-height:1.65;
}


.m5in-empty-library > a {
    justify-self:end;

    color:var(--green);

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

    text-decoration:none;
}


.m5in-empty-library > a span {
    margin-left:5px;
}



/* =========================================================
   EDITORIAL STANDARD
   ========================================================= */

.m5in-standard {
    padding:
        70px 0;
}


.m5in-standard-grid {
    display:grid;

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

    gap:92px;
}


.m5in-standard-copy > p:last-child {
    max-width:570px;

    margin:
        20px 0 0;

    font-size:14px;
    line-height:1.72;
}


.m5in-standard-register {
    border-top:
        1px solid
        #9fc3bb;
}


.m5in-standard-row {
    display:grid;

    grid-template-columns:
        36px
        1fr;

    gap:18px;

    padding:
        19px 0;

    border-bottom:
        1px solid
        #dce7e4;
}


.m5in-standard-row > span {
    color:#95a8ac;

    font-size:10px;
}


.m5in-standard-row strong {
    display:block;

    color:var(--navy);

    font-size:12px;
}


.m5in-standard-row p {
    max-width:600px;

    margin:
        5px 0 0;

    font-size:9px;
    line-height:1.55;
}



/* =========================================================
   COMMERCIAL BRIDGE
   ========================================================= */

.m5in-commercial {
    padding:
        67px 0;

    background:
        var(--navy);

    color:#fff;
}


.m5in-commercial-grid {
    display:grid;

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

    gap:90px;

    align-items:center;
}


.m5in-commercial
.m5in-section-no {
    color:#83a79f;
}


.m5in-commercial h2 {
    color:#fff;
}


.m5in-commercial-grid
> div:first-child
> p:last-child {
    max-width:560px;

    margin:
        19px 0 0;

    color:#aec3c6;

    font-size:14px;
    line-height:1.7;
}


.m5in-commercial-path {
    display:grid;

    grid-template-columns:
        1fr 35px
        1fr 35px
        1fr;

    align-items:center;
}


.m5in-commercial-path > div {
    min-height:125px;

    padding:
        18px 13px;

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


.m5in-commercial-path > div > span {
    display:block;

    margin-bottom:24px;

    color:#6ea89b;

    font-size:9px;
}


.m5in-commercial-path small {
    display:block;

    color:#75989a;

    font-size:6px;
    font-weight:900;

    letter-spacing:.11em;
}


.m5in-commercial-path strong {
    display:block;

    margin-top:5px;

    color:#e2ecea;

    font-size:10px;
}


.m5in-commercial-path > i {
    height:1px;

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



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

.m5in-final {
    padding:
        76px 0 88px;
}


.m5in-final-grid {
    display:grid;

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

    gap:80px;

    align-items:end;
}


.m5in-final h2 {
    max-width:680px;

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

    line-height:1.03;
}


.m5in-final p:not(.m5in-eyebrow) {
    max-width:590px;

    margin:
        19px 0 0;

    font-size:14px;
    line-height:1.7;
}


.m5in-final-actions {
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:17px;

    padding-left:31px;

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



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

@media (max-width:980px) {

    .m5in-hero-grid,
    .m5in-standard-grid,
    .m5in-commercial-grid,
    .m5in-final-grid {
        grid-template-columns:1fr;
    }


    .m5in-editorial-line {
        grid-template-columns:
            1fr 1fr;
    }


    .m5in-themes-heading {
        grid-template-columns:1fr;

        gap:18px;
    }


    .m5in-themes-heading
    .m5in-section-no {
        grid-column:auto;
    }


    .m5in-final-actions {
        padding-left:0;

        border-left:0;
    }

}


@media (max-width:680px) {

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


    .m5in-hero-top {
        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }


    .m5in-hero-grid {
        gap:32px;

        padding:
            49px 0 43px;
    }


    .m5in-hero h1 {
        font-size:45px;
    }


    .m5in-editorial-line {
        grid-template-columns:1fr;
    }


    .m5in-editorial-line > div {
        min-height:95px;

        border-right:0;

        border-bottom:
            1px solid
            #d5e3df;
    }


    .m5in-themes,
    .m5in-library,
    .m5in-standard,
    .m5in-commercial {
        padding:
            52px 0;
    }


    .m5in-theme {
        grid-template-columns:
            31px
            1fr
            20px;
    }


    .m5in-theme strong {
        font-size:15px;
    }


    .m5in-library-header {
        align-items:flex-start;

        flex-direction:column;
    }


    .m5in-empty-library {
        grid-template-columns:1fr;

        gap:18px;

        padding:
            28px 24px;
    }


    .m5in-empty-library > a {
        justify-self:start;
    }


    .m5in-article {
        grid-template-columns:
            30px
            1fr;
    }


    .m5in-read {
        grid-column:2;

        justify-self:start;
    }


    .m5in-commercial-path {
        grid-template-columns:1fr;
    }


    .m5in-commercial-path > i {
        display:none;
    }


    .m5in-commercial-path > div {
        min-height:90px;
    }


    .m5in-final {
        padding:
            60px 0 70px;
    }

}