/* =========================================================
   5M BIOTECH PRODUCT V4
   Modern pharmaceutical authority
   ========================================================= */

:root {

    --v4-navy: #0E2942;
    --v4-green: #145C49;
    --v4-teal: #2C7568;

    --v4-blue: #EAF2F6;

    --v4-brass: #A68752;

    --v4-ink: #182630;
    --v4-muted: #637178;

    --v4-line: #D8E3E4;

    --v4-warm: #FCFCFA;
    --v4-white: #FFFFFF;

}


.m5v4-page {

    color: var(--v4-ink);

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


.m5v4-shell {

    width: calc(100% - 72px);

    max-width: 1420px;

    margin: 0 auto;
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.m5v4-breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 43px;

    color: #839096;

    font-size: 10px;
}


.m5v4-breadcrumb a {

    color: #55726D;

    text-decoration: none;
}


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

.m5v4-hero {

    position: relative;

    padding: 32px 0 38px;

    background: #fff;

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

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

    overflow: hidden;
}


.m5v4-hero::after {

    content: "";

    position: absolute;

    z-index: 0;

    top: 0;

    right: 0;

    width: 41%;

    height: 100%;

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


.m5v4-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(330px,.78fr)
        minmax(0,1.22fr);

    gap:
        clamp(48px,5vw,78px);

    align-items: stretch;
}


/* image intelligence card */

.m5v4-visual {

    display: grid;

    grid-template-rows:
        36px 1fr 34px;

    min-height: 440px;

    background: #fff;

    border:
        1px solid #D8E2E1;

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


.m5v4-visual-top,
.m5v4-visual-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 16px;
}


.m5v4-visual-top {

    color: #496E67;

    background: #F2F7F5;

    border-bottom:
        1px solid #E0E8E5;
}


.m5v4-visual-top span {

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}


.m5v4-visual-top small {

    font-size: 8px;

    letter-spacing: .09em;
}


.m5v4-image-stage {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 22px;

    background: #fff;
}


.m5v4-image-stage img {

    width: 88%;

    height: 88%;

    object-fit: contain;
}


.m5v4-image-missing {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 125px;

    height: 125px;

    border-radius: 50%;

    background: var(--v4-blue);

    color: var(--v4-navy);
}


.m5v4-visual-bottom {

    color: #7C8D90;

    border-top:
        1px solid #E4EBEA;
}


.m5v4-visual-bottom span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .1em;
}


.m5v4-visual-bottom strong {

    color: var(--v4-navy);

    font-size: 10px;
}


/* Identity */

.m5v4-identity {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 19px 0;
}


.m5v4-identity-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;
}


.m5v4-category {

    color: var(--v4-green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;

    text-decoration: none;
}


.m5v4-record-number {

    color: #718589;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .1em;
}


.m5v4-identity h1 {

    margin: 0;

    max-width: 800px;

    color: var(--v4-navy);

    font-size:
        clamp(42px,4vw,58px);

    line-height: 1;

    letter-spacing: -.047em;
}


.m5v4-composition {

    margin: 10px 0 18px;

    color: #596A71;

    font-size: 16px;

    line-height: 1.45;
}


/* specifications */

.m5v4-specs {

    display: grid;

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

    margin-top: 3px;

    border-top:
        1px solid #CBD9DB;

    border-left:
        1px solid #CBD9DB;
}


.m5v4-specs > div {

    min-height: 70px;

    padding: 13px 14px;

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

    border-right:
        1px solid #CBD9DB;

    border-bottom:
        1px solid #CBD9DB;
}


.m5v4-specs span {

    display: block;

    margin-bottom: 5px;

    color: #76888C;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.m5v4-specs strong {

    display: block;

    color: #20343A;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 650;

    overflow-wrap: anywhere;
}


/* CTA */

.m5v4-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 17px;
}


.m5v4-enquire {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    min-height: 43px;

    padding: 0 17px;

    color: #fff;

    background: var(--v4-green);

    box-shadow:
        0 7px 18px
        rgba(20,92,73,.13);

    font-size: 11px;

    font-weight: 750;

    text-decoration: none;
}


.m5v4-enquire span {

    font-size: 15px;
}


.m5v4-back {

    display: inline-flex;

    align-items: center;

    min-height: 43px;

    padding: 0 17px;

    color: var(--v4-navy);

    background: #fff;

    border:
        1px solid #D5E0E1;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;
}


/* publisher */

.m5v4-publisher {

    display: flex;

    flex-wrap: wrap;

    gap: 26px;

    margin-top: 17px;

    padding-top: 12px;

    border-top:
        1px solid #D9E3E3;
}


.m5v4-publisher span {

    display: block;

    color: #78898D;

    font-size: 7px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.m5v4-publisher strong {

    display: block;

    margin-top: 2px;

    color: #394B50;

    font-size: 9px;

    font-weight: 650;
}


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

.m5v4-article-section {

    padding: 48px 0 53px;

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


.m5v4-article-layout {

    display: grid;

    grid-template-columns:
        minmax(0,1fr) 300px;

    gap: 70px;

    align-items: start;
}


.m5v4-article {

    max-width: 880px;
}


.m5v4-article-heading {

    margin-bottom: 21px;
}


.m5v4-article-heading span {

    display: block;

    margin-bottom: 5px;

    color: var(--v4-teal);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}


.m5v4-article-heading h2 {

    margin: 0;

    color: var(--v4-navy);

    font-size: 31px;

    line-height: 1.15;

    letter-spacing: -.025em;
}


.m5v4-article-content {

    color: #3F5056;

    font-size: 15px;

    line-height: 1.78;
}


.m5v4-article-content h2 {

    margin:
        34px 0 10px;

    color: var(--v4-navy);

    font-size: 24px;
}


.m5v4-article-content h3 {

    margin:
        27px 0 8px;

    color: var(--v4-green);

    font-size: 19px;
}


.m5v4-article-content p {

    margin:
        0 0 16px;
}


.m5v4-article-content ul {

    margin:
        0 0 18px 20px;
}


/* editorial rail */

.m5v4-article-rail {

    position: sticky;

    top: 88px;
}


.m5v4-rail-card,
.m5v4-rail-links {

    margin-bottom: 16px;

    background: #fff;

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


.m5v4-rail-label {

    display: block;

    padding: 13px 15px;

    color: #59736D;

    background: #F1F6F4;

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}


.m5v4-rail-fact {

    padding: 12px 15px;

    border-bottom:
        1px solid #E8EEEE;
}


.m5v4-rail-fact:last-child {

    border-bottom: 0;
}


.m5v4-rail-fact span {

    display: block;

    color: #7C8B8F;

    font-size: 7px;

    text-transform: uppercase;
}


.m5v4-rail-fact strong {

    display: block;

    margin-top: 3px;

    color: #2A3B40;

    font-size: 10px;

    line-height: 1.4;
}


.m5v4-rail-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 43px;

    padding: 0 15px;

    color: #34494A;

    border-bottom:
        1px solid #E8EEEE;

    font-size: 10px;

    text-decoration: none;
}


.m5v4-rail-links a:last-child {

    border-bottom: 0;
}


.m5v4-rail-links b {

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


/* =========================================================
   REFERENCES
   ========================================================= */

.m5v4-evidence {

    padding: 34px 0;

    background: var(--v4-blue);

    border-top:
        1px solid #D6E3E7;

    border-bottom:
        1px solid #D6E3E7;
}


.m5v4-evidence-grid {

    display: grid;

    grid-template-columns:
        300px 1fr;

    gap: 50px;
}


.m5v4-evidence span {

    color: var(--v4-teal);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}


.m5v4-evidence h2 {

    margin:
        5px 0 0;

    color: var(--v4-navy);

    font-size: 24px;
}


.m5v4-reference-copy {

    color: #50646A;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   AUTHORITY BAND
   ========================================================= */

.m5v4-authority {

    padding: 26px 0;

    background: #fff;

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


.m5v4-authority-meta {

    display: grid;

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

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

    border-bottom: 0;
}


.m5v4-authority-meta > div {

    min-height: 60px;

    padding: 11px 14px;

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


.m5v4-authority-meta > div:last-child {

    border-right: 0;
}


.m5v4-authority-meta span {

    display: block;

    color: #7D8B8E;

    font-size: 7px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.m5v4-authority-meta strong {

    display: block;

    margin-top: 4px;

    color: #273B40;

    font-size: 10px;
}


.m5v4-authority-nav {

    display: grid;

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

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


.m5v4-authority-nav a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 43px;

    padding: 0 14px;

    color: #405358;

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

    font-size: 9px;

    font-weight: 650;

    text-decoration: none;
}


.m5v4-authority-nav a:last-child {

    border-right: 0;
}


.m5v4-authority-nav span {

    color: var(--v4-green);

    font-size: 13px;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.m5v4-disclaimer {

    padding: 18px 0;

    background: #F2F6F4;
}


.m5v4-disclaimer-inner {

    display: grid;

    grid-template-columns:
        210px 1fr;

    gap: 35px;
}


.m5v4-disclaimer strong {

    color: var(--v4-navy);

    font-size: 11px;
}


.m5v4-disclaimer div {

    color: #6A797E;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   RELATED PRODUCT RAIL
   ========================================================= */

.m5v4-related {

    padding: 36px 0 41px;

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


.m5v4-related-header {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;
}


.m5v4-related-header span {

    display: block;

    margin-bottom: 4px;

    color: var(--v4-teal);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}


.m5v4-related-header h2 {

    margin: 0;

    color: var(--v4-navy);

    font-size: 27px;

    letter-spacing: -.025em;
}


.m5v4-related-header > a {

    color: var(--v4-green);

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;
}


.m5v4-related-track {

    display: grid;

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

    gap: 17px;
}


.m5v4-related-card {

    display: grid;

    grid-template-columns:
        120px 1fr;

    min-height: 145px;

    background: #fff;

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


.m5v4-related-image {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    background: #F2F6F5;

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


.m5v4-related-image img {

    width: 88%;

    height: 88%;

    object-fit: contain;
}


.m5v4-related-copy {

    padding: 14px;
}


.m5v4-related-copy > span {

    display: block;

    margin-bottom: 5px;

    color: var(--v4-teal);

    font-size: 7px;

    font-weight: 750;

    text-transform: uppercase;
}


.m5v4-related-card h3 {

    margin: 0 0 5px;

    font-size: 12px;

    line-height: 1.35;
}


.m5v4-related-card h3 a {

    color: var(--v4-navy);

    text-decoration: none;
}


.m5v4-related-card p {

    margin: 0 0 8px;

    color: #78888C;

    font-size: 9px;
}


.m5v4-related-open {

    color: var(--v4-green);

    font-size: 9px;

    font-weight: 700;

    text-decoration: none;
}


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

.m5v4-final {

    padding: 31px 0;

    color: #fff;

    background:
        linear-gradient(
            105deg,
            var(--v4-navy) 0%,
            #153C4A 46%,
            var(--v4-green) 100%
        );
}


.m5v4-final-grid {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


.m5v4-final span {

    display: block;

    margin-bottom: 3px;

    color: #C2D0D2;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .12em;
}


.m5v4-final h2 {

    margin: 0;

    color: #fff;

    font-size: 23px;
}


.m5v4-final-actions {

    display: flex;

    align-items: center;

    gap: 18px;
}


.m5v4-final-main {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 18px;

    color: var(--v4-navy);

    background: #fff;

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

    font-size: 10px;

    font-weight: 750;

    text-decoration: none;
}


.m5v4-final-secondary {

    color: #fff;

    font-size: 10px;

    font-weight: 650;

    text-decoration: none;
}


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

@media (max-width: 1050px) {

    .m5v4-shell {

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


    .m5v4-hero::after {

        width: 48%;
    }


    .m5v4-hero-grid {

        grid-template-columns:
            minmax(300px,.8fr)
            minmax(0,1.2fr);

        gap: 40px;
    }


    .m5v4-related-track {

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

}


@media (max-width: 850px) {

    .m5v4-hero::after {

        display: none;
    }


    .m5v4-hero-grid,
    .m5v4-article-layout,
    .m5v4-evidence-grid {

        grid-template-columns:
            1fr;
    }


    .m5v4-article-rail {

        position: static;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 14px;
    }


    .m5v4-authority-meta,
    .m5v4-authority-nav {

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

}


@media (max-width: 600px) {

    .m5v4-shell {

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


    .m5v4-visual {

        min-height: 360px;
    }


    .m5v4-identity h1 {

        font-size: 37px;
    }


    .m5v4-specs {

        grid-template-columns:
            1fr;
    }


    .m5v4-article-rail {

        grid-template-columns:
            1fr;
    }


    .m5v4-related-track {

        grid-template-columns:
            1fr;
    }


    .m5v4-related-card {

        grid-template-columns:
            105px 1fr;
    }


    .m5v4-final-grid {

        display: block;
    }


    .m5v4-final-actions {

        margin-top: 14px;

        flex-wrap: wrap;
    }

}