/* =========================================================
   5M BIOTECH — PARTNERSHIP PAGE
   Modern B2B pharmaceutical authority
   ========================================================= */

:root {

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

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

    --pt-brass:#A9854E;

    --pt-ink:#192932;
    --pt-muted:#66767A;

    --pt-line:#DAE4E3;

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


.m5partner-page {

    color:var(--pt-ink);

    background:var(--pt-warm);

    overflow:hidden;
}


.m5partner-shell {

    width:calc(100% - 80px);

    max-width:1360px;

    margin:0 auto;
}


.m5partner-kicker {

    margin:0 0 9px;

    color:var(--pt-teal);

    font-size:9px;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.m5partner-kicker.light {

    color:#A9D0C5;
}


.m5partner-copy-slot {

    color:var(--pt-muted);

    font-size:14px;

    line-height:1.72;
}


.light-copy {

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


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

.m5partner-hero-wrap {

    padding:32px 0 56px;

    background:
        linear-gradient(
            180deg,
            #F4F8F7,
            var(--pt-warm)
        );
}


.m5partner-hero {

    display:grid;

    grid-template-columns:.92fr 1.08fr;

    gap:58px;

    min-height:550px;

    padding:60px;

    background:#fff;

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

    border-radius:34px;

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


.m5partner-hero-copy {

    align-self:center;

    max-width:630px;
}


.m5partner-hero h1 {

    margin:0;

    color:var(--pt-navy);

    font-size:clamp(44px,4.5vw,62px);

    line-height:.99;

    letter-spacing:-.05em;
}


.m5partner-hero-copy h2 {

    max-width:590px;

    margin:17px 0 0;

    color:#52656A;

    font-size:19px;

    line-height:1.45;

    font-weight:500;
}


.m5partner-hero-actions {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:17px;

    margin-top:27px;
}


.m5partner-main-button {

    display:inline-flex;

    align-items:center;

    gap:26px;

    min-height:46px;

    padding:0 18px;

    color:#fff;

    background:var(--pt-green);

    border-radius:14px;

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5partner-main-button span {

    font-size:15px;
}


.m5partner-text-button {

    color:var(--pt-navy);

    font-size:10px;

    font-weight:700;

    text-decoration:none;
}


.m5partner-pills {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:29px;
}


.m5partner-pills span {

    padding:8px 12px;

    color:#49635D;

    background:#F0F5F3;

    border:1px solid #DFE9E5;

    border-radius:999px;

    font-size:8px;

    font-weight:650;
}


/* hero visual */

.m5partner-hero-visual {

    position:relative;

    min-height:420px;

    overflow:hidden;

    border-radius:
        88px 26px 88px 26px;

    background:
        linear-gradient(
            145deg,
            #E7F0ED,
            #F1F6F4
        );
}


.m5partner-visual-circle {

    position:absolute;

    left:50%;

    top:50%;

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

    border-radius:50%;

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


.circle-a {

    width:260px;

    height:260px;
}


.circle-b {

    width:360px;

    height:360px;
}


.m5partner-partner-node {

    position:absolute;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:145px;

    height:145px;

    border-radius:50%;

    text-align:center;

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


.node-left {

    left:16%;

    top:50%;

    transform:translateY(-50%);

    color:var(--pt-navy);

    background:#fff;
}


.node-right {

    right:16%;

    top:50%;

    transform:translateY(-50%);

    color:#fff;

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


.m5partner-partner-node span {

    font-size:8px;

    font-weight:800;

    letter-spacing:.12em;
}


.m5partner-partner-node strong {

    margin-top:5px;

    max-width:105px;

    font-size:12px;

    line-height:1.25;
}


.m5partner-hero-visual > svg {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;
}


.m5partner-connection {

    fill:none;

    stroke:rgba(39,105,87,.28);

    stroke-width:1.2;
}


.m5partner-dot {

    fill:#78A89A;
}


.m5partner-visual-caption {

    position:absolute;

    left:22px;

    bottom:16px;
}


.m5partner-visual-caption span {

    display:block;

    color:#738781;

    font-size:7px;

    font-weight:750;

    letter-spacing:.11em;
}


.m5partner-visual-caption strong {

    display:block;

    margin-top:3px;

    color:var(--pt-navy);

    font-size:8px;
}


/* =========================================================
   WHO WE WORK WITH
   ========================================================= */

.m5partner-audience {

    padding:70px 0 77px;

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


.m5partner-section-heading {

    display:grid;

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

    gap:60px;

    align-items:end;

    margin-bottom:29px;
}


.m5partner-section-heading h2 {

    margin:0;

    color:var(--pt-navy);

    font-size:37px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5partner-section-heading > p {

    max-width:470px;

    margin:0;

    color:var(--pt-muted);

    font-size:13px;

    line-height:1.65;
}


.m5partner-audience-flow {

    display:grid;

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

    gap:14px;
}


.m5partner-audience-item {

    min-height:190px;

    padding:24px;

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

    background:#fff;
}


.m5partner-audience-item:nth-child(1) {

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


.m5partner-audience-item:nth-child(2) {

    margin-top:24px;

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


.m5partner-audience-item:nth-child(3) {

    margin-top:48px;

    background:var(--pt-mist);

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


.m5partner-audience-item:nth-child(4) {

    margin-top:72px;

    background:var(--pt-blue);

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


.m5partner-audience-item > span {

    display:block;

    margin-bottom:42px;

    color:var(--pt-brass);

    font-size:9px;

    font-weight:800;
}


.m5partner-audience-item h3 {

    margin:0 0 8px;

    color:var(--pt-navy);

    font-size:19px;
}


.m5partner-audience-item p {

    margin:0;

    color:var(--pt-muted);

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   SCOPE
   ========================================================= */

.m5partner-scope {

    padding:70px 0;

    background:
        linear-gradient(
            180deg,
            #EFF5F2,
            #EAF2EF
        );
}


.m5partner-scope-grid {

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:70px;

    align-items:center;
}


.m5partner-scope-copy {

    max-width:530px;
}


.m5partner-scope-copy h2 {

    margin:0;

    color:var(--pt-navy);

    font-size:37px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5partner-scope-shapes {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}


.m5partner-scope-card {

    min-height:155px;

    padding:22px;

    background:#fff;
}


.scope-one {

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


.scope-two {

    margin-top:25px;

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


.scope-three {

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


.scope-four {

    margin-top:25px;

    background:#DDEAE5;

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


.m5partner-scope-card > span {

    display:block;

    margin-bottom:33px;

    color:var(--pt-brass);

    font-size:8px;

    font-weight:800;
}


.m5partner-scope-card strong {

    display:block;

    color:var(--pt-navy);

    font-size:14px;
}


.m5partner-scope-card small {

    display:block;

    margin-top:6px;

    color:#73827D;

    font-size:9px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.m5partner-process {

    padding:67px 0 73px;

    background:#fff;
}


.m5partner-process-intro {

    max-width:660px;

    margin-bottom:31px;
}


.m5partner-process-intro h2 {

    margin:0;

    color:var(--pt-navy);

    font-size:36px;

    letter-spacing:-.03em;
}


.m5partner-process-track {

    position:relative;

    display:grid;

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

    gap:18px;
}


.m5partner-process-line {

    position:absolute;

    left:7%;

    right:7%;

    top:33px;

    height:1px;

    background:#C6D5D0;
}


.m5partner-process-step {

    position:relative;

    z-index:2;

    padding:17px 5px 0;
}


.m5partner-step-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    margin-bottom:21px;

    border-radius:50%;

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


.m5partner-step-icon svg {

    width:18px;

    height:18px;

    fill:none;

    stroke:#fff;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.m5partner-process-step > span {

    display:block;

    margin-bottom:5px;

    color:var(--pt-brass);

    font-size:8px;

    font-weight:800;
}


.m5partner-process-step > strong {

    display:block;

    color:var(--pt-navy);

    font-size:14px;
}


.m5partner-process-step > small {

    display:block;

    margin-top:7px;

    max-width:190px;

    color:#75847F;

    font-size:9px;

    line-height:1.5;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.m5partner-support {

    padding:72px 0;

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


.m5partner-support-panel {

    display:grid;

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

    gap:65px;

    align-items:center;

    padding:48px;

    background:#fff;

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

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


.m5partner-support-copy {

    max-width:520px;
}


.m5partner-support-copy h2 {

    margin:0;

    color:var(--pt-navy);

    font-size:35px;

    line-height:1.13;

    letter-spacing:-.03em;
}


.m5partner-support-links {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:22px;
}


.m5partner-support-links a {

    color:var(--pt-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* documentation visual */

.m5partner-support-visual {

    position:relative;

    min-height:320px;
}


.m5partner-doc {

    position:absolute;

    background:#fff;

    border:1px solid #CFDDDA;

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


.doc-back {

    left:12%;

    top:12%;

    width:60%;

    height:74%;

    transform:rotate(-5deg);

    background:#E9F2EF;
}


.doc-main {

    left:26%;

    top:3%;

    width:62%;

    height:82%;

    padding:24px;
}


.doc-main > span {

    display:block;

    color:var(--pt-teal);

    font-size:7px;

    font-weight:800;
}


.doc-main > strong {

    display:block;

    margin-top:5px;

    max-width:200px;

    color:var(--pt-navy);

    font-size:16px;

    line-height:1.2;
}


.m5partner-doc-lines {

    margin-top:23px;
}


.m5partner-doc-lines i {

    display:block;

    width:85%;

    height:6px;

    margin-top:10px;

    border-radius:999px;

    background:#D8E4E0;
}


.m5partner-doc-lines i:nth-child(2) {

    width:65%;
}


.m5partner-doc-lines i:nth-child(3) {

    width:45%;
}


.m5partner-doc-boxes {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:21px;
}


.m5partner-doc-boxes b {

    height:40px;

    background:#EEF4F2;

    border-radius:8px;
}


.m5partner-doc-seal {

    position:absolute;

    right:1%;

    bottom:6%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:92px;

    height:92px;

    border-radius:50%;

    color:#fff;

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


.m5partner-doc-seal span {

    font-size:9px;

    font-weight:800;
}


.m5partner-doc-seal strong {

    margin-top:3px;

    font-size:9px;
}


/* =========================================================
   EXPECTATIONS
   ========================================================= */

.m5partner-expectations {

    padding:72px 0;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            var(--pt-navy),
            #12424E 50%,
            var(--pt-green)
        );
}


.m5partner-expectation-grid {

    display:grid;

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

    gap:70px;

    align-items:center;
}


.m5partner-expectation-copy {

    max-width:520px;
}


.m5partner-expectation-copy h2 {

    margin:0;

    color:#fff;

    font-size:38px;

    line-height:1.11;

    letter-spacing:-.03em;
}


.m5partner-expectation-orbit {

    position:relative;

    min-height:320px;
}


.m5partner-exp-ring {

    position:absolute;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:
        1px solid
        rgba(222,241,235,.19);
}


.ring-one {

    width:220px;

    height:220px;
}


.ring-two {

    width:300px;

    height:300px;
}


.m5partner-exp-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;
}


.m5partner-exp-core span {

    color:#ABD0C5;

    font-size:8px;

    font-weight:800;
}


.m5partner-exp-core strong {

    margin-top:4px;

    font-size:12px;
}


.m5partner-exp-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;
}


.exp1 { left:5%; top:17%; }
.exp2 { right:2%; top:23%; }
.exp3 { left:8%; bottom:18%; }
.exp4 { right:5%; bottom:14%; }


/* =========================================================
   REASONS
   ========================================================= */

.m5partner-reasons {

    padding:68px 0 72px;

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


.m5partner-reason-ribbon {

    display:grid;

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

    gap:10px;
}


.m5partner-reason-ribbon > div {

    min-height:105px;

    padding:18px;

    background:#EFF4F2;
}


.m5partner-reason-ribbon > div:nth-child(1) {

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


.m5partner-reason-ribbon > div:nth-child(2) {

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


.m5partner-reason-ribbon > div:nth-child(3) {

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


.m5partner-reason-ribbon > div:nth-child(4) {

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

    color:#fff;

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


.m5partner-reason-ribbon span {

    display:block;

    margin-bottom:29px;

    color:var(--pt-brass);

    font-size:8px;

    font-weight:800;
}


.m5partner-reason-ribbon strong {

    color:inherit;

    font-size:12px;
}


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

.m5partner-final-wrap {

    padding:0 0 54px;

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


.m5partner-final {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:45px;

    min-height:190px;

    padding:42px 48px;

    color:#fff;

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

    border-radius:30px;
}


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

    display:block;

    margin-bottom:5px;

    color:#B6CCCA;

    font-size:8px;

    font-weight:800;

    letter-spacing:.12em;
}


.m5partner-final h2 {

    margin:0;

    color:#fff;

    font-size:29px;
}


.m5partner-final p {

    margin:7px 0 0;

    color:rgba(255,255,255,.67);

    font-size:11px;
}


.m5partner-final-actions {

    display:flex;

    align-items:center;

    gap:18px;
}


.m5partner-final-main {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 18px;

    color:var(--pt-navy);

    background:#fff;

    border-radius:13px;

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

    font-size:10px;

    font-weight:750;

    text-decoration:none;
}


.m5partner-final-link {

    color:#fff;

    font-size:10px;

    font-weight:650;

    text-decoration:none;
}


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

@media (max-width:1000px) {

    .m5partner-shell {

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


    .m5partner-hero {

        grid-template-columns:1fr;

        padding:44px;
    }


    .m5partner-audience-flow {

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


    .m5partner-audience-item:nth-child(3),
    .m5partner-audience-item:nth-child(4) {

        margin-top:20px;
    }


    .m5partner-scope-grid,
    .m5partner-support-panel,
    .m5partner-expectation-grid {

        grid-template-columns:1fr;

        gap:40px;
    }


    .m5partner-process-track,
    .m5partner-reason-ribbon {

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


    .m5partner-process-line {

        display:none;
    }

}


@media (max-width:720px) {

    .m5partner-shell {

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


    .m5partner-hero {

        padding:30px;

        border-radius:24px;
    }


    .m5partner-section-heading {

        grid-template-columns:1fr;

        gap:13px;
    }


    .m5partner-audience-flow,
    .m5partner-scope-shapes,
    .m5partner-process-track,
    .m5partner-reason-ribbon {

        grid-template-columns:1fr;
    }


    .m5partner-audience-item {

        margin-top:0 !important;
    }


    .m5partner-support-panel {

        padding:30px;

        border-radius:24px;
    }


    .m5partner-final {

        display:block;

        padding:31px;

        border-radius:24px;
    }


    .m5partner-final-actions {

        margin-top:18px;

        flex-wrap:wrap;
    }

}