/* =========================================================
   5M PRODUCT V5
   HIGH-END FIRST TWO FOLDS
   ========================================================= */

:root {

    --v5-navy:#0D2942;
    --v5-green:#145846;
    --v5-teal:#33786C;

    --v5-blue:#EAF3F5;

    --v5-brass:#A9854E;

    --v5-ink:#172630;
    --v5-muted:#627279;

    --v5-line:#D8E3E3;

    --v5-ivory:#FCFCF9;
    --v5-white:#FFFFFF;
}


/* =========================================================
   FOLD 1 — PRODUCT STAGE
   ========================================================= */

.m5v5-hero {

    position:relative;

    padding:34px 0 40px;

    background:
        linear-gradient(
            90deg,
            #FCFCFA 0%,
            #FCFCFA 55%,
            #F1F7F8 55%,
            #F1F7F8 100%
        );

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


.m5v5-stage {

    display:grid;

    grid-template-columns:
        minmax(360px,.77fr)
        minmax(0,1.23fr);

    align-items:center;

    gap:clamp(48px,5vw,82px);
}


/* PRODUCT IMAGE */

.m5v5-visual {

    display:grid;

    grid-template-columns:42px 1fr;

    grid-template-rows:1fr 36px;

    min-height:440px;

    background:#fff;

    border:1px solid #D7E1E1;

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


.m5v5-visual-rail {

    grid-row:1 / span 2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:space-between;

    padding:17px 0;

    color:#fff;

    background:var(--v5-navy);
}


.m5v5-visual-rail span {

    font-size:13px;

    font-weight:800;

    letter-spacing:.08em;
}


.m5v5-visual-rail small {

    writing-mode:vertical-rl;

    transform:rotate(180deg);

    font-size:7px;

    font-weight:700;

    letter-spacing:.18em;

    opacity:.7;
}


.m5v5-image {

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:#fff;
}


.m5v5-image img {

    width:88%;

    height:88%;

    object-fit:contain;
}


.m5v5-no-image {

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:125px;

    height:125px;

    border-radius:50%;

    background:var(--v5-blue);

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


.m5v5-image-footer {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 15px;

    border-top:1px solid #E2E9E8;
}


.m5v5-image-footer span {

    color:#819093;

    font-size:7px;

    font-weight:750;

    letter-spacing:.11em;
}


.m5v5-image-footer strong {

    color:#506A67;

    font-size:8px;

    letter-spacing:.07em;
}


/* IDENTITY */

.m5v5-identity {

    max-width:800px;
}


.m5v5-kicker {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:11px;

    margin-bottom:13px;

    border-bottom:1px solid #CDDADB;
}


.m5v5-kicker a {

    color:var(--v5-green);

    font-size:9px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    text-decoration:none;
}


.m5v5-kicker > span {

    color:#7A8A8D;

    font-size:7px;

    font-weight:700;

    letter-spacing:.1em;
}


.m5v5-identity h1 {

    margin:0;

    max-width:800px;

    color:var(--v5-navy);

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

    line-height:.98;

    letter-spacing:-.05em;
}


.m5v5-composition {

    margin:12px 0 18px;

    color:#56686E;

    font-size:17px;

    line-height:1.45;
}


/* SPECS — NATURAL WIDTH, NOT STRETCHED */

.m5v5-spec-row {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:6px;
}


.m5v5-spec-row > div {

    flex:0 1 210px;

    min-width:145px;

    padding:12px 14px;

    background:#fff;

    border:1px solid #CFDCDD;
}


.m5v5-spec-row span {

    display:block;

    margin-bottom:4px;

    color:#77878B;

    font-size:7px;

    font-weight:800;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.m5v5-spec-row strong {

    display:block;

    color:#23383D;

    font-size:12px;

    line-height:1.35;

    font-weight:650;
}


/* ACTIONS */

.m5v5-actions {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;
}


.m5v5-primary {

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    min-height:45px;

    padding:0 17px;

    color:#fff;

    background:var(--v5-green);

    box-shadow:
        0 8px 22px
        rgba(20,88,70,.13);

    font-size:11px;

    font-weight:750;

    text-decoration:none;
}


.m5v5-primary b {

    font-size:16px;
}


.m5v5-secondary {

    display:inline-flex;

    align-items:center;

    min-height:45px;

    padding:0 17px;

    color:var(--v5-navy);

    background:#fff;

    border:1px solid #D2DEDF;

    font-size:11px;

    font-weight:700;

    text-decoration:none;
}


/* TRUST LINE */

.m5v5-trust-line {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:28px;

    margin-top:19px;

    padding-top:13px;

    border-top:1px solid #CFDCDD;
}


.m5v5-trust-line span {

    display:block;

    color:#7B8B8E;

    font-size:7px;

    font-weight:750;

    text-transform:uppercase;
}


.m5v5-trust-line strong {

    display:block;

    margin-top:2px;

    color:#3A4B4F;

    font-size:9px;

    font-weight:650;
}


.m5v5-trust-line > a {

    margin-left:auto;

    color:var(--v5-green);

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   FOLD 2 — EDITORIAL ARTICLE
   ========================================================= */

.m5v5-editorial {

    padding:47px 0 52px;

    background:#fff;

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


.m5v5-editorial-grid {

    display:grid;

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

    gap:66px;

    align-items:start;
}


.m5v5-article {

    max-width:860px;
}


.m5v5-article-header {

    padding-bottom:19px;

    margin-bottom:22px;

    border-bottom:1px solid #DDE5E5;
}


.m5v5-article-header > span {

    display:block;

    margin-bottom:5px;

    color:var(--v5-teal);

    font-size:8px;

    font-weight:800;

    letter-spacing:.13em;
}


.m5v5-article-header h2 {

    margin:0;

    color:var(--v5-navy);

    font-size:32px;

    line-height:1.12;

    letter-spacing:-.03em;
}


.m5v5-article-header p {

    margin:7px 0 0;

    color:#7A898C;

    font-size:11px;
}


.m5v5-article-body {

    color:#3E5055;

    font-size:15px;

    line-height:1.75;
}


.m5v5-article-body p {

    margin:0 0 16px;
}


.m5v5-article-body h2 {

    margin:31px 0 10px;

    color:var(--v5-navy);

    font-size:23px;

    line-height:1.2;
}


.m5v5-article-body h3 {

    margin:25px 0 8px;

    color:var(--v5-green);

    font-size:18px;
}


.m5v5-article-body ul,
.m5v5-article-body ol {

    margin:0 0 18px 21px;
}


/* SLIM EVIDENCE RAIL */

.m5v5-rail {

    position:sticky;

    top:88px;

    border:1px solid #DCE5E4;

    background:#FAFBFA;
}


.m5v5-rail-top {

    padding:15px;

    color:#fff;

    background:var(--v5-navy);
}


.m5v5-rail-top span {

    display:block;

    margin-bottom:4px;

    color:#B7CAD0;

    font-size:7px;

    font-weight:750;

    letter-spacing:.11em;
}


.m5v5-rail-top strong {

    display:block;

    font-size:13px;
}


.m5v5-rail-meta {

    padding:0 15px;
}


.m5v5-rail-meta > div {

    padding:11px 0;

    border-bottom:1px solid #E3EAE9;
}


.m5v5-rail-meta span {

    display:block;

    color:#7F8E90;

    font-size:7px;

    text-transform:uppercase;
}


.m5v5-rail-meta strong {

    display:block;

    margin-top:3px;

    color:#2D4144;

    font-size:9px;

    line-height:1.4;
}


.m5v5-rail-enquiry {

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:42px;

    margin:14px;

    padding:0 12px;

    color:#fff;

    background:var(--v5-green);

    font-size:9px;

    font-weight:750;

    text-decoration:none;
}


.m5v5-rail-enquiry span {

    font-size:13px;
}


.m5v5-rail-links {

    border-top:1px solid #E0E8E7;
}


.m5v5-rail-links a {

    display:block;

    padding:10px 14px;

    color:#43585A;

    border-bottom:1px solid #E6ECEB;

    font-size:9px;

    text-decoration:none;
}


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

@media (max-width:950px) {

    .m5v5-stage {

        grid-template-columns:
            minmax(300px,.85fr)
            minmax(0,1.15fr);

        gap:38px;
    }


    .m5v5-visual {

        min-height:390px;
    }


    .m5v5-editorial-grid {

        grid-template-columns:1fr;
    }


    .m5v5-rail {

        position:static;

        display:grid;

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


    .m5v5-rail-top,
    .m5v5-rail-meta,
    .m5v5-rail-links {

        grid-column:auto;
    }

}


@media (max-width:720px) {

    .m5v5-hero {

        background:#fff;
    }


    .m5v5-stage {

        grid-template-columns:1fr;
    }


    .m5v5-visual {

        min-height:340px;
    }


    .m5v5-identity h1 {

        font-size:38px;
    }


    .m5v5-trust-line > a {

        width:100%;

        margin-left:0;
    }


    .m5v5-rail {

        display:block;
    }

}