/* =========================================================
   5M BIOTECH ABOUT V2
   Connected / designed / non-assembled
   ========================================================= */

:root {

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

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

    --a2-brass:#A9854E;

    --a2-ink:#182832;
    --a2-muted:#65747A;

    --a2-line:#DCE5E4;

    --a2-white:#FFFFFF;
    --a2-warm:#FCFCF9;

    --a2-radius:30px;
    --a2-radius-small:21px;
}


.m5a2-page {

    color:var(--a2-ink);

    background:var(--a2-warm);

    overflow:hidden;
}


.m5a2-shell {

    width:calc(100% - 80px);

    max-width:1360px;

    margin:0 auto;
}


.m5a2-kicker {

    margin:0 0 10px;

    color:var(--a2-teal);

    font-size:9px;

    line-height:1;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.m5a2-kicker.light {

    color:#A8D0C4;
}


.m5a2-copy-slot {

    color:var(--a2-muted);

    font-size:15px;

    line-height:1.75;
}


.light-copy {

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


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

.m5a2-hero-wrap {

    padding:32px 0 54px;

    background:
        linear-gradient(
            180deg,
            #F5F9F7 0%,
            #FCFCF9 100%
        );
}


.m5a2-hero {

    position:relative;

    display:grid;

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

    gap:58px;

    min-height:560px;

    padding:62px;

    overflow:hidden;

    background:#fff;

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

    border-radius:36px;

    box-shadow:
        0 24px 70px
        rgba(17,55,45,.06);
}


.m5a2-hero::before {

    content:"";

    position:absolute;

    left:-80px;

    bottom:-110px;

    width:300px;

    height:300px;

    border-radius:50%;

    background:#F0F5F2;
}


.m5a2-hero-copy {

    position:relative;

    z-index:2;

    align-self:center;
}


.m5a2-hero h1 {

    margin:0;

    color:var(--a2-navy);

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

    line-height:.98;

    letter-spacing:-.052em;
}


.m5a2-hero-copy h2 {

    max-width:570px;

    margin:18px 0 0;

    color:#4A5C61;

    font-size:21px;

    line-height:1.4;

    font-weight:500;

    letter-spacing:-.015em;
}


.m5a2-hero-actions {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:17px;

    margin-top:28px;
}


.m5a2-btn-main {

    display:inline-flex;

    align-items:center;

    gap:25px;

    min-height:47px;

    padding:0 19px;

    color:#fff;

    background:var(--a2-green);

    border-radius:14px;

    font-size:11px;

    font-weight:750;

    text-decoration:none;
}


.m5a2-btn-main span {

    font-size:15px;
}


.m5a2-btn-text {

    color:var(--a2-navy);

    font-size:11px;

    font-weight:700;

    text-decoration:none;
}


.m5a2-trust-pills {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:31px;
}


.m5a2-trust-pills span {

    display:inline-flex;

    align-items:center;

    min-height:31px;

    padding:0 13px;

    color:#49635D;

    background:#F0F5F3;

    border:1px solid #DFE9E5;

    border-radius:999px;

    font-size:9px;

    font-weight:650;
}


/* hero art */

.m5a2-hero-art {

    position:relative;

    min-height:430px;

    overflow:hidden;

    border-radius:
        90px 28px 90px 28px;

    background:
        radial-gradient(
            circle at 55% 45%,
            #F8FBFA 0,
            #E7F0ED 70%
        );
}


.m5a2-hero-orbit {

    position:absolute;

    border:1px solid rgba(20,88,70,.16);

    border-radius:50%;
}


.orbit-one {

    width:340px;

    height:340px;

    left:50%;

    top:50%;

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


.orbit-two {

    width:480px;

    height:480px;

    left:50%;

    top:50%;

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


.m5a2-brand-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;

    border-radius:50%;

    color:#fff;

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

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


.m5a2-brand-core small {

    color:#BAD2CD;

    font-size:9px;

    font-weight:800;

    letter-spacing:.13em;
}


.m5a2-brand-core strong {

    margin-top:4px;

    font-size:18px;
}


.m5a2-brand-core > span {

    margin-top:2px;

    color:#D2E1DE;

    font-size:8px;

    letter-spacing:.15em;
}


.m5a2-product-float {

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    width:128px;

    height:150px;

    padding:10px;

    overflow:hidden;

    background:#fff;

    border-radius:
        26px 26px 46px 26px;

    box-shadow:
        0 15px 35px
        rgba(20,62,51,.09);
}


.m5a2-product-float img {

    width:90%;

    height:90%;

    object-fit:contain;
}


.product-float-one {

    left:8%;

    top:16%;
}


.product-float-two {

    right:8%;

    bottom:15%;

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


.m5a2-hero-art-label {

    position:absolute;

    left:22px;

    bottom:17px;
}


.m5a2-hero-art-label span {

    display:block;

    color:#6E817B;

    font-size:7px;

    font-weight:750;

    letter-spacing:.11em;
}


.m5a2-hero-art-label strong {

    display:block;

    margin-top:3px;

    color:var(--a2-navy);

    font-size:8px;
}


/* =========================================================
   STORY
   ========================================================= */

.m5a2-story {

    padding:70px 0 80px;

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


.m5a2-story-grid {

    display:grid;

    grid-template-columns:320px 1fr;

    gap:95px;
}


.m5a2-story-title {

    position:relative;
}


.m5a2-number {

    display:block;

    margin-bottom:28px;

    color:var(--a2-brass);

    font-size:11px;

    font-weight:800;
}


.m5a2-story-title h2 {

    margin:0;

    color:var(--a2-navy);

    font-size:40px;

    letter-spacing:-.035em;
}


.m5a2-story-copy {

    position:relative;

    max-width:800px;
}


.m5a2-story-rule {

    position:absolute;

    left:-34px;

    top:3px;

    width:3px;

    height:82px;

    border-radius:20px;

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


.m5a2-richtext {

    color:#46585D;

    font-size:16px;

    line-height:1.82;
}


.m5a2-richtext p {

    margin:0 0 18px;
}


.m5a2-story-tags {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:26px;
}


.m5a2-story-tags span {

    padding:8px 12px;

    color:#426158;

    background:#EFF4F2;

    border-radius:999px;

    font-size:9px;

    font-weight:650;
}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.m5a2-principles {

    padding:18px 0 85px;

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


.m5a2-section-intro {

    max-width:640px;

    margin-bottom:30px;
}


.m5a2-section-intro h2 {

    margin:0;

    color:var(--a2-navy);

    font-size:38px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5a2-principle-flow {

    display:grid;

    grid-template-columns:
        1.12fr .9fr .82fr;

    gap:18px;

    align-items:start;
}


.m5a2-principle {

    padding:29px;

    min-height:235px;

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


.m5a2-principle.purpose {

    background:#fff;

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


.m5a2-principle.approach {

    margin-top:30px;

    background:var(--a2-mist);

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


.m5a2-principle.values {

    margin-top:60px;

    background:var(--a2-blue);

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


.m5a2-principle-index {

    margin-bottom:58px;

    color:var(--a2-brass);

    font-size:9px;

    font-weight:800;
}


.m5a2-principle h3 {

    margin:0;

    color:var(--a2-navy);

    font-size:22px;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.m5a2-capabilities {

    padding:74px 0;

    background:
        linear-gradient(
            180deg,
            #F2F7F5 0%,
            #EAF2EF 100%
        );
}


.m5a2-capability-heading {

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:29px;
}


.m5a2-capability-heading h2 {

    margin:0;

    color:var(--a2-navy);

    font-size:38px;

    letter-spacing:-.03em;
}


.m5a2-capability-heading > a {

    color:var(--a2-green);

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


.m5a2-capability-ribbon {

    display:grid;

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

    gap:12px;
}


.m5a2-capability {

    position:relative;

    display:grid;

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

    align-items:center;

    gap:12px;

    min-height:112px;

    padding:18px;

    color:inherit;

    text-decoration:none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.m5a2-capability:hover {

    transform:translateY(-4px);
}


.m5a2-capability > span {

    color:var(--a2-brass);

    font-size:9px;

    font-weight:800;
}


.m5a2-capability small {

    display:block;

    margin-bottom:4px;

    color:#70847D;

    font-size:7px;

    font-weight:750;

    letter-spacing:.1em;
}


.m5a2-capability strong {

    color:var(--a2-navy);

    font-size:13px;
}


.m5a2-capability em {

    color:var(--a2-green);

    font-style:normal;
}


.cap-product {

    background:#fff;

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


.cap-global {

    background:#E4EEEA;

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


.cap-partner {

    background:#fff;

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


.cap-support {

    background:#DCE9E5;

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


/* =========================================================
   QUALITY + GLOBAL CONNECTED AUTHORITY ZONE
   ========================================================= */

.m5a2-authority-zone {

    position:relative;

    padding:78px 0 88px;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            #0D2942 0%,
            #103849 44%,
            #145846 100%
        );
}


.m5a2-authority-zone::before {

    content:"";

    position:absolute;

    left:0;

    top:-30px;

    width:100%;

    height:60px;

    background:#EAF2EF;

    border-radius:
        0 0 50% 50%;
}


/* Quality */

.m5a2-quality {

    display:grid;

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

    gap:70px;

    align-items:center;

    padding-bottom:66px;

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


.m5a2-quality-copy {

    max-width:520px;
}


.m5a2-quality h2 {

    margin:0;

    color:#fff;

    font-size:39px;

    line-height:1.1;

    letter-spacing:-.032em;
}


.m5a2-quality-copy > a {

    display:inline-flex;

    margin-top:22px;

    color:#fff;

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


.m5a2-quality-system {

    position:relative;

    min-height:330px;
}


.m5a2-quality-ring {

    position:absolute;

    left:50%;

    top:50%;

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

    border:
        1px solid rgba(219,239,233,.19);

    border-radius:50%;
}


.ring-a {

    width:230px;

    height:230px;
}


.ring-b {

    width:310px;

    height:310px;
}


.m5a2-quality-centre {

    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;

    border-radius:50%;

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

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

    text-align:center;
}


.m5a2-quality-centre span {

    color:#A8D0C4;

    font-size:9px;

    font-weight:800;
}


.m5a2-quality-centre strong {

    margin-top:3px;

    font-size:14px;
}


.m5a2-quality-centre small {

    margin-top:2px;

    color:#BDD3CD;

    font-size:7px;
}


.m5a2-quality-chip {

    position:absolute;

    padding:9px 13px;

    color:#fff;

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

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

    border-radius:999px;

    font-size:9px;

    font-weight:600;
}


.qc-1 { left:5%; top:15%; }
.qc-2 { right:2%; top:22%; }
.qc-3 { left:6%; bottom:18%; }
.qc-4 { right:0; bottom:14%; }


/* Global */

.m5a2-global {

    display:grid;

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

    gap:65px;

    align-items:center;

    padding-top:66px;
}


.m5a2-global-copy {

    max-width:520px;
}


.m5a2-global h2 {

    margin:0;

    color:#fff;

    font-size:39px;

    letter-spacing:-.032em;
}


.m5a2-global h3 {

    margin:10px 0 0;

    color:#C9D9D6;

    font-size:17px;

    line-height:1.4;

    font-weight:500;
}


.m5a2-global-actions {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:23px;
}


.m5a2-global-main {

    display:inline-flex;

    align-items:center;

    min-height:41px;

    padding:0 17px;

    color:var(--a2-navy);

    background:#fff;

    border-radius:13px;

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5a2-global-link {

    color:#fff;

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


.m5a2-global-network {

    position:relative;

    min-height:340px;

    overflow:hidden;

    border-radius:
        70px 24px 70px 24px;

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

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


.m5a2-global-network > svg {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;
}


.m5a2-network-paths path {

    fill:none;

    stroke:
        rgba(214,238,231,.25);

    stroke-width:1.3;
}


.m5a2-network-dots circle {

    fill:#D2E7E1;
}


.m5a2-network-core {

    position:absolute;

    left:50%;

    top:50%;

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

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:140px;

    height:140px;

    border-radius:50%;

    background:
        rgba(7,38,31,.74);

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

    text-align:center;
}


.m5a2-network-core span {

    color:#A9D1C5;

    font-size:9px;

    font-weight:800;
}


.m5a2-network-core strong {

    margin-top:3px;

    font-size:13px;
}


.m5a2-network-core small {

    margin-top:3px;

    color:#C0D7D1;

    font-size:7px;
}


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

.m5a2-journey {

    position:relative;

    margin-top:-35px;

    padding-bottom:75px;

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


.m5a2-journey-panel {

    position:relative;

    z-index:5;

    padding:36px 40px;

    background:#fff;

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

    border-radius:28px;

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


.m5a2-journey-heading {

    margin-bottom:27px;
}


.m5a2-journey-heading h2 {

    margin:0;

    color:var(--a2-navy);

    font-size:32px;

    letter-spacing:-.028em;
}


.m5a2-timeline {

    position:relative;

    display:grid;

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

    gap:22px;
}


.m5a2-timeline::before {

    content:"";

    position:absolute;

    left:5%;

    right:5%;

    top:17px;

    height:1px;

    background:#CEDAD6;
}


.m5a2-milestone {

    position:relative;

    z-index:2;
}


.m5a2-milestone > span {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    margin-bottom:16px;

    border-radius:50%;

    color:#fff;

    background:var(--a2-green);

    font-size:8px;

    font-weight:800;
}


.m5a2-milestone strong {

    display:block;

    color:var(--a2-navy);

    font-size:12px;
}


.m5a2-milestone small {

    display:block;

    margin-top:7px;

    color:#7C8A86;

    font-size:8px;

    line-height:1.45;
}


/* =========================================================
   VALUES
   ========================================================= */

.m5a2-values {

    padding:5px 0 75px;

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


.m5a2-values-grid {

    display:grid;

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

    gap:75px;

    align-items:center;
}


.m5a2-values h2 {

    margin:0;

    color:var(--a2-navy);

    font-size:37px;

    letter-spacing:-.03em;
}


.m5a2-value-cloud {

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;
}


.m5a2-value-cloud span {

    display:inline-flex;

    align-items:center;

    min-height:54px;

    padding:0 23px;

    color:#29483F;

    background:#EEF4F1;

    border-radius:999px;

    font-size:12px;

    font-weight:650;
}


.m5a2-value-cloud span:nth-child(2) {

    background:#EAF3F5;
}


.m5a2-value-cloud span:nth-child(3) {

    background:#fff;

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


.m5a2-value-cloud span:nth-child(4) {

    color:#fff;

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


/* =========================================================
   BUSINESS IDENTITY
   ========================================================= */

.m5a2-business {

    padding:0 0 66px;

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


.m5a2-business-panel {

    display:grid;

    grid-template-columns:.72fr 1.28fr;

    gap:45px;

    padding:38px;

    background:#fff;

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

    border-radius:28px;
}


.m5a2-business-copy h2 {

    margin:0;

    color:var(--a2-navy);

    font-size:30px;
}


.m5a2-business-copy > p:not(
    .m5a2-kicker
) {

    max-width:330px;

    color:#73817D;

    font-size:12px;

    line-height:1.6;
}


.m5a2-business-links {

    display:grid;

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

    gap:10px;
}


.m5a2-business-links a {

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:92px;

    padding:18px;

    color:inherit;

    background:#F4F7F5;

    border-radius:17px;

    text-decoration:none;
}


.m5a2-business-links small {

    color:#72847E;

    font-size:7px;

    font-weight:750;

    letter-spacing:.1em;
}


.m5a2-business-links strong {

    margin-top:6px;

    color:var(--a2-navy);

    font-size:12px;
}


.m5a2-business-links span {

    position:absolute;

    right:16px;

    bottom:14px;

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


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

.m5a2-final-wrap {

    padding:0 0 52px;

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


.m5a2-final {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:180px;

    padding:42px 48px;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            var(--a2-navy),
            #124250 50%,
            var(--a2-green)
        );

    border-radius:30px;
}


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

    display:block;

    margin-bottom:5px;

    color:#B7CBCB;

    font-size:8px;

    font-weight:800;

    letter-spacing:.12em;
}


.m5a2-final h2 {

    margin:0;

    color:#fff;

    font-size:30px;
}


.m5a2-final-actions {

    display:flex;

    align-items:center;

    gap:18px;
}


.m5a2-final-main {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 18px;

    color:var(--a2-navy);

    background:#fff;

    border-radius:13px;

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

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5a2-final-link {

    color:#fff;

    font-size:10px;

    font-weight:650;

    text-decoration:none;
}


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

@media (max-width:1050px) {

    .m5a2-shell {

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


    .m5a2-hero {

        grid-template-columns:1fr;

        padding:45px;
    }


    .m5a2-story-grid {

        grid-template-columns:250px 1fr;

        gap:60px;
    }


    .m5a2-capability-ribbon {

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


    .m5a2-quality,
    .m5a2-global,
    .m5a2-values-grid {

        grid-template-columns:1fr;

        gap:42px;
    }


    .m5a2-business-panel {

        grid-template-columns:1fr;
    }

}


@media (max-width:760px) {

    .m5a2-shell {

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


    .m5a2-hero-wrap {

        padding-top:15px;
    }


    .m5a2-hero {

        padding:31px;

        border-radius:25px;
    }


    .m5a2-story-grid {

        grid-template-columns:1fr;

        gap:25px;
    }


    .m5a2-story-rule {

        display:none;
    }


    .m5a2-principle-flow {

        grid-template-columns:1fr;
    }


    .m5a2-principle.approach,
    .m5a2-principle.values {

        margin-top:0;
    }


    .m5a2-capability-ribbon {

        grid-template-columns:1fr;
    }


    .m5a2-timeline {

        grid-template-columns:1fr;

        gap:20px;
    }


    .m5a2-timeline::before {

        display:none;
    }


    .m5a2-business-links {

        grid-template-columns:1fr;
    }


    .m5a2-final {

        display:block;

        padding:32px;

        border-radius:24px;
    }


    .m5a2-final-actions {

        margin-top:20px;

        flex-wrap:wrap;
    }

}


/* === 5M ABOUT OUTER BACKGROUND FIX START === */

/*
 * About page should sit on a clean white canvas.
 * Keep the designed pale-green artwork inside the hero unchanged.
 */

body.page-id-11,
body.page-id-11 .site,
body.page-id-11 #wrapper,
body.page-id-11 #inner-wrap,
body.page-id-11 .content-area,
body.page-id-11 .content-container,
body.page-id-11 .site-main,
body.page-id-11 .m5a2-page {
    background:#ffffff !important;
}

/* === 5M ABOUT OUTER BACKGROUND FIX END === */