/* =========================================================
   5M BIOTECH — KNOW HOW & DEVELOPMENT
   Technical connected authority design
   ========================================================= */

:root {

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

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

    --r-brass:#A9854E;

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

    --r-line:#DAE4E3;

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


.m5rnd-page {

    color:var(--r-ink);

    background:var(--r-warm);

    overflow:hidden;
}


.m5rnd-shell {

    width:calc(100% - 80px);

    max-width:1360px;

    margin:0 auto;
}


.m5rnd-kicker {

    margin:0 0 9px;

    color:var(--r-teal);

    font-size:9px;

    line-height:1;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.m5rnd-kicker.light {

    color:#ABD0C5;
}


.m5rnd-copy-slot {

    color:var(--r-muted);

    font-size:14px;

    line-height:1.72;
}


.light-copy {

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


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

.m5rnd-hero-wrap {

    padding:32px 0 55px;

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


.m5rnd-hero {

    display:grid;

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

    gap:60px;

    min-height:550px;

    padding:60px;

    background:#fff;

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

    border-radius:34px;

    box-shadow:
        0 24px 65px
        rgba(13,41,66,.06);
}


.m5rnd-hero-copy {

    align-self:center;

    max-width:610px;
}


.m5rnd-hero h1 {

    margin:0;

    color:var(--r-navy);

    font-size:clamp(45px,4.8vw,65px);

    line-height:.99;

    letter-spacing:-.05em;
}


.m5rnd-hero-copy h2 {

    max-width:580px;

    margin:17px 0 0;

    color:#526469;

    font-size:20px;

    line-height:1.42;

    font-weight:500;

    letter-spacing:-.015em;
}


.m5rnd-hero-actions {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:17px;

    margin-top:27px;
}


.m5rnd-main-button {

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:27px;

    min-height:46px;

    padding:0 18px;

    color:#fff;

    background:var(--r-green);

    border-radius:14px;

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5rnd-main-button span {

    font-size:15px;
}


.m5rnd-text-button {

    color:var(--r-navy);

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


.m5rnd-hero-pills {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:29px;
}


.m5rnd-hero-pills span {

    padding:8px 12px;

    color:#49635D;

    background:#F0F5F3;

    border:1px solid #DFE9E5;

    border-radius:999px;

    font-size:8px;

    font-weight:650;
}


/* hero tech visual */

.m5rnd-hero-graphic {

    position:relative;

    min-height:425px;

    overflow:hidden;

    border-radius:
        82px 25px 82px 25px;

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


.m5rnd-tech-grid {

    position:absolute;

    inset:0;

    opacity:.32;

    background-image:

        linear-gradient(
            rgba(20,88,70,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(20,88,70,.08) 1px,
            transparent 1px
        );

    background-size:42px 42px;
}


.m5rnd-hero-graphic > svg {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;
}


.m5rnd-hero-lines path,
.m5rnd-hero-lines circle {

    fill:none;

    stroke:rgba(35,103,84,.25);

    stroke-width:1.1;
}


.m5rnd-core {

    position:absolute;

    left:50%;

    top:50%;

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

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:145px;

    height:145px;

    color:#fff;

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

    border-radius:50%;

    text-align:center;

    box-shadow:
        0 18px 40px
        rgba(13,41,66,.14);
}


.m5rnd-core small {

    color:#B7D2CB;

    font-size:8px;

    font-weight:800;

    letter-spacing:.12em;
}


.m5rnd-core strong {

    margin-top:4px;

    font-size:15px;
}


.m5rnd-core span {

    margin-top:2px;

    color:#C5D9D4;

    font-size:7px;

    letter-spacing:.12em;
}


.m5rnd-node {

    position:absolute;

    min-width:125px;

    padding:10px 12px;

    color:var(--r-navy);

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

    border:1px solid #D4E1DD;

    border-radius:999px;

    backdrop-filter:blur(5px);
}


.m5rnd-node span {

    display:block;

    color:var(--r-teal);

    font-size:7px;

    font-weight:800;
}


.m5rnd-node strong {

    display:block;

    margin-top:2px;

    font-size:10px;
}


.node-a {

    left:7%;

    top:17%;
}


.node-b {

    right:7%;

    top:17%;
}


.node-c {

    left:8%;

    bottom:17%;
}


.node-d {

    right:8%;

    bottom:17%;
}


/* =========================================================
   EDITORIAL OVERVIEW
   ========================================================= */

.m5rnd-overview {

    padding:70px 0 82px;

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


.m5rnd-overview-grid {

    display:grid;

    grid-template-columns:310px 1fr;

    gap:90px;
}


.m5rnd-section-number {

    display:block;

    margin-bottom:27px;

    color:var(--r-brass);

    font-size:10px;

    font-weight:800;
}


.m5rnd-overview-heading h2 {

    margin:0;

    color:var(--r-navy);

    font-size:37px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5rnd-editorial {

    position:relative;

    max-width:810px;
}


.m5rnd-editorial-rule {

    position:absolute;

    left:-31px;

    top:4px;

    width:3px;

    height:88px;

    border-radius:10px;

    background:var(--r-brass);
}


.m5rnd-richtext {

    color:#45585D;

    font-size:16px;

    line-height:1.82;
}


.m5rnd-richtext p {

    margin:0 0 18px;
}


.m5rnd-editorial-foot {

    display:flex;

    flex-wrap:wrap;

    gap:22px;

    margin-top:27px;

    padding-top:18px;

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


.m5rnd-editorial-foot a {

    color:var(--r-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   DEVELOPMENT PATHWAY
   ========================================================= */

.m5rnd-pathway {

    padding:64px 0 70px;

    background:
        linear-gradient(
            180deg,
            #EEF4F1,
            #E8F1EE
        );
}


.m5rnd-section-heading {

    margin-bottom:31px;
}


.m5rnd-section-heading h2 {

    margin:0;

    color:var(--r-navy);

    font-size:36px;

    letter-spacing:-.03em;
}


.m5rnd-path {

    position:relative;

    display:grid;

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

    gap:18px;
}


.m5rnd-path-line {

    position:absolute;

    left:7%;

    right:7%;

    top:37px;

    height:1px;

    background:#BFD0CA;
}


.m5rnd-path-step {

    position:relative;

    z-index:2;

    min-height:175px;

    padding:20px;

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

    border:1px solid #D6E2DE;
}


.m5rnd-path-step:nth-child(2) {

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


.m5rnd-path-step:nth-child(3) {

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


.m5rnd-path-step:nth-child(4) {

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


.m5rnd-path-step:nth-child(5) {

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


.m5rnd-path-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    margin-bottom:28px;

    border-radius:50%;

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


.m5rnd-path-icon svg {

    width:19px;

    height:19px;

    fill:none;

    stroke:#fff;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.m5rnd-path-step > span {

    display:block;

    margin-bottom:4px;

    color:var(--r-brass);

    font-size:8px;

    font-weight:800;
}


.m5rnd-path-step > strong {

    color:var(--r-navy);

    font-size:13px;
}


/* =========================================================
   KNOWLEDGE / DOCUMENTATION
   ========================================================= */

.m5rnd-knowledge {

    padding:74px 0;

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


.m5rnd-knowledge-shape {

    display:grid;

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

    gap:65px;

    align-items:center;

    padding:50px;

    overflow:hidden;

    background:#fff;

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

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


.m5rnd-knowledge-copy {

    max-width:520px;
}


.m5rnd-knowledge-copy h2 {

    margin:0;

    color:var(--r-navy);

    font-size:36px;

    line-height:1.13;

    letter-spacing:-.03em;
}


.m5rnd-knowledge-copy > a {

    display:inline-flex;

    margin-top:22px;

    color:var(--r-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* document graphic */

.m5rnd-document-visual {

    position:relative;

    min-height:340px;
}


.m5rnd-doc-sheet {

    position:absolute;

    background:#fff;

    border:1px solid #CFDDDA;

    box-shadow:
        0 15px 35px
        rgba(17,55,45,.07);
}


.sheet-back {

    left:13%;

    top:10%;

    width:58%;

    height:75%;

    transform:rotate(-6deg);

    background:#EAF3F0;
}


.sheet-back span {

    position:absolute;

    right:18px;

    bottom:15px;

    color:#739087;

    font-size:12px;

    font-weight:800;
}


.sheet-main {

    left:26%;

    top:4%;

    width:61%;

    height:82%;

    padding:25px;
}


.m5rnd-doc-head span {

    display:block;

    color:var(--r-teal);

    font-size:7px;

    font-weight:800;
}


.m5rnd-doc-head strong {

    display:block;

    margin-top:4px;

    color:var(--r-navy);

    font-size:17px;
}


.m5rnd-doc-line {

    width:70%;

    height:6px;

    margin-top:16px;

    border-radius:999px;

    background:#D7E3DF;
}


.line-wide {

    width:90%;
}


.line-short {

    width:47%;
}


.m5rnd-doc-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:24px;
}


.m5rnd-doc-grid span {

    height:46px;

    background:#EEF4F2;

    border-radius:8px;
}


.m5rnd-doc-badge {

    position:absolute;

    right:2%;

    bottom:5%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:95px;

    height:95px;

    border-radius:50%;

    color:#fff;

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

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


.m5rnd-doc-badge span {

    font-size:9px;

    font-weight:800;
}


.m5rnd-doc-badge strong {

    margin-top:3px;

    font-size:10px;
}


/* =========================================================
   QUALITY
   ========================================================= */

.m5rnd-quality-zone {

    padding:75px 0 0;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            var(--r-navy),
            #103C49 48%,
            var(--r-green)
        );
}


.m5rnd-quality-panel {

    display:grid;

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

    gap:70px;

    align-items:center;

    padding-bottom:64px;
}


.m5rnd-quality-copy {

    max-width:520px;
}


.m5rnd-quality-copy h2 {

    margin:0;

    color:#fff;

    font-size:38px;

    line-height:1.11;

    letter-spacing:-.03em;
}


.m5rnd-quality-copy > a {

    display:inline-flex;

    margin-top:22px;

    color:#fff;

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* quality orbit */

.m5rnd-quality-orbit {

    position:relative;

    min-height:320px;
}


.m5rnd-q-ring {

    position:absolute;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:
        1px solid
        rgba(220,240,234,.2);
}


.qring-one {

    width:220px;

    height:220px;
}


.qring-two {

    width:300px;

    height:300px;
}


.m5rnd-q-core {

    position:absolute;

    left:50%;

    top:50%;

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

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:130px;

    height:130px;

    border-radius:50%;

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

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

    text-align:center;
}


.m5rnd-q-core span {

    color:#ABD0C5;

    font-size:8px;

    font-weight:800;
}


.m5rnd-q-core strong {

    margin-top:3px;

    font-size:13px;
}


.m5rnd-q-core small {

    margin-top:3px;

    color:#BCD3CD;

    font-size:7px;
}


.m5rnd-q-pill {

    position:absolute;

    padding:9px 13px;

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

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

    border-radius:999px;

    font-size:8px;
}


.qp1 { left:5%; top:16%; }
.qp2 { right:0; top:22%; }
.qp3 { left:7%; bottom:18%; }
.qp4 { right:7%; bottom:15%; }


/* evidence bridge */

.m5rnd-evidence-bridge {

    display:grid;

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

    gap:50px;

    align-items:center;

    padding:23px 28px;

    color:var(--r-ink);

    background:#fff;

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


.m5rnd-evidence-bridge > div:first-child > span {

    display:block;

    margin-bottom:4px;

    color:var(--r-teal);

    font-size:7px;

    font-weight:800;

    letter-spacing:.11em;
}


.m5rnd-evidence-bridge > div:first-child > strong {

    color:var(--r-navy);

    font-size:11px;
}


.m5rnd-evidence-links {

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:18px;
}


.m5rnd-evidence-links a {

    color:var(--r-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


.m5rnd-evidence-links span {

    margin-left:5px;
}


/* =========================================================
   RELATED NAVIGATION
   ========================================================= */

.m5rnd-navigation {

    padding:70px 0;

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


.m5rnd-navigation-intro {

    max-width:620px;

    margin-bottom:27px;
}


.m5rnd-navigation-intro h2 {

    margin:0;

    color:var(--r-navy);

    font-size:35px;

    line-height:1.14;

    letter-spacing:-.03em;
}


.m5rnd-navigation-flow {

    display:grid;

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

    gap:10px;
}


.m5rnd-nav-item {

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:105px;

    padding:17px;

    color:inherit;

    background:#EFF4F2;

    text-decoration:none;
}


.m5rnd-nav-item:nth-child(1) {

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


.m5rnd-nav-item:nth-child(2) {

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


.m5rnd-nav-item:nth-child(3) {

    border-radius:
        20px 48px 20px 20px;
}


.m5rnd-nav-item:nth-child(4) {

    border-radius:
        20px 20px 20px 48px;
}


.m5rnd-nav-item small {

    color:#6D827A;

    font-size:7px;

    font-weight:800;

    letter-spacing:.1em;
}


.m5rnd-nav-item strong {

    margin-top:6px;

    color:var(--r-navy);

    font-size:12px;
}


.m5rnd-nav-item > span {

    position:absolute;

    right:16px;

    bottom:14px;

    color:var(--r-green);
}


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

.m5rnd-final-wrap {

    padding:0 0 52px;

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


.m5rnd-final {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:175px;

    padding:40px 46px;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            var(--r-navy),
            #12414E 50%,
            var(--r-green)
        );

    border-radius:30px;
}


.m5rnd-final > div:first-child > span {

    display:block;

    margin-bottom:4px;

    color:#B5CBCB;

    font-size:7px;

    font-weight:800;

    letter-spacing:.12em;
}


.m5rnd-final h2 {

    margin:0;

    color:#fff;

    font-size:29px;
}


.m5rnd-final-actions {

    display:flex;

    align-items:center;

    gap:18px;
}


.m5rnd-final-main {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:41px;

    padding:0 17px;

    color:var(--r-navy);

    background:#fff;

    border-radius:13px;

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

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5rnd-final-link {

    color:#fff;

    font-size:10px;

    font-weight:650;

    text-decoration:none;
}


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

@media (max-width:1000px) {

    .m5rnd-shell {

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


    .m5rnd-hero {

        grid-template-columns:1fr;

        padding:44px;
    }


    .m5rnd-overview-grid {

        grid-template-columns:245px 1fr;

        gap:55px;
    }


    .m5rnd-path {

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


    .m5rnd-path-line {

        display:none;
    }


    .m5rnd-knowledge-shape,
    .m5rnd-quality-panel {

        grid-template-columns:1fr;

        gap:38px;
    }


    .m5rnd-navigation-flow {

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

}


@media (max-width:720px) {

    .m5rnd-shell {

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


    .m5rnd-hero {

        padding:30px;

        border-radius:24px;
    }


    .m5rnd-overview-grid {

        grid-template-columns:1fr;

        gap:25px;
    }


    .m5rnd-editorial-rule {

        display:none;
    }


    .m5rnd-path {

        grid-template-columns:1fr;
    }


    .m5rnd-knowledge-shape {

        padding:30px;

        border-radius:24px;
    }


    .m5rnd-quality-zone {

        padding-top:55px;
    }


    .m5rnd-evidence-bridge {

        grid-template-columns:1fr;

        border-radius:20px 20px 0 0;
    }


    .m5rnd-evidence-links {

        justify-content:flex-start;
    }


    .m5rnd-navigation-flow {

        grid-template-columns:1fr;
    }


    .m5rnd-final {

        display:block;

        padding:31px;

        border-radius:24px;
    }


    .m5rnd-final-actions {

        margin-top:18px;

        flex-wrap:wrap;
    }

}