/* =========================================================
   Manufacturing page only (resources/views/manufacturing.blade.php)
   Every rule is scoped to .brx-mf. Section titles use the home
   page's .section-title-8-wrapper from style.css.
   ========================================================= */

.brx-mf {
    --mf-teal: var(--secondary, #2F6662);
    --mf-deep: #0f2423;
    --mf-lime: var(--green, #85EE00);
    --mf-ink: #151515;
    --mf-muted: #5d6270;
    --mf-line: rgba(19, 19, 46, .1);
    --mf-soft: #f1f4f3;
    font-family: var(--font_dmsans, "DM Sans", sans-serif);
}

.brx-mf * {
    box-sizing: border-box;
}

.brx-mf section {
    position: relative;
    padding: 110px 0;
}

.brx-mf__wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- shared ---------- */
.brx-mf .section-title-8-wrapper .title {
    margin-bottom: 0;
}

.brx-mf__head-row {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 56px;
}

.brx-mf__lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--mf-muted);
}

.brx-mf.has-js .brx-mf__reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf.has-js .brx-mf__reveal.is-in {
    opacity: 1;
    transform: none;
}

.brx-mf__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mf-teal);
    text-decoration: none;
    border-bottom: 2px solid var(--mf-lime);
    padding-bottom: 4px;
    transition: gap .25s ease;
}

.brx-mf__link:hover {
    gap: 16px;
    color: var(--mf-ink);
}

.brx-mf a:focus-visible,
.brx-mf button:focus-visible {
    outline: 3px solid var(--mf-lime);
    outline-offset: 4px;
}

.brx-mf .title mark {
    background: linear-gradient(transparent 62%, var(--mf-lime) 62%, var(--mf-lime) 92%, transparent 92%);
    color: inherit;
    padding: 0 4px;
}

/* =========================================================
   0. Plant
   ========================================================= */
.brx-mf__plant {
    background: #fff;
    overflow: hidden;
}

.brx-mf__plant-media {
    position: relative;
    margin: 0;
    border-radius: 36px;
    overflow: hidden;
    aspect-ratio: 1920 / 760;
    box-shadow: 0 40px 90px rgba(19, 19, 46, .16);
}

.brx-mf__plant-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf__plant-media:hover > img {
    transform: scale(1.04);
}

.brx-mf__plant-chip {
    position: absolute;
    left: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(19, 19, 46, .18);
}

.brx-mf__plant-chip strong {
    display: block;
    font-family: var(--font_outfit, sans-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--mf-ink);
}

.brx-mf__plant-chip small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--mf-muted);
}

.brx-mf__live {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mf-lime);
}

.brx-mf__live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mf-lime);
    animation: brx-mf-ping 1.8s ease-out infinite;
}

.brx-mf__seal {
    position: absolute;
    right: 40px;
    top: 40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--mf-teal);
    box-shadow: 0 22px 50px rgba(15, 36, 35, .45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brx-mf__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: brx-mf-spin 22s linear infinite;
}

.brx-mf__seal text {
    font-family: var(--font_outfit, sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    fill: #fff;
}

.brx-mf__seal img {
    position: relative;
    width: 58px;
    height: 58px;
    padding: 10px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
}

@keyframes brx-mf-ping {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(3); opacity: 0; }
}

@keyframes brx-mf-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   1. Powder to slab
   ========================================================= */
/* stage visual: one frame per step, photo where available, animated tile otherwise */
.brx-mf__frames {
    position: relative;
    height: min(600px, calc(100vh - 220px));
    aspect-ratio: 4 / 5;
    max-width: 100%;
    margin: 0 auto;
}

.brx-mf__frame {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, #fff, rgba(255, 255, 255, 0) 70%),
        #e7ecea;
    box-shadow: 0 30px 70px rgba(19, 19, 46, .14);
    opacity: 0;
    transform: scale(.96);
    transition: opacity .6s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf__frame.is-on {
    opacity: 1;
    transform: none;
}

.brx-mf__frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf__frame.is-on > img {
    transform: none;
}

.brx-mf__frame .brx-mf__tile {
    width: 64%;
}

.brx-mf__frame figcaption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 8px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .94);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mf-ink);
    box-shadow: 0 14px 34px rgba(19, 19, 46, .18);
}

.brx-mf__frame figcaption b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mf-teal);
    color: var(--mf-lime);
    font-size: 12px;
    letter-spacing: 0;
}

.brx-mf__step-photo {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 18px;
    object-fit: cover;
}
.brx-mf__journey {
    padding-bottom: 0 !important;
    background: var(--mf-soft);
}

.brx-mf__stage {
    display: none;
    position: relative;
    padding: 60px 0;
    background:
        linear-gradient(rgba(47, 102, 98, .06) 1px, transparent 1px) 0 0 / 60px 60px,
        linear-gradient(90deg, rgba(47, 102, 98, .06) 1px, transparent 1px) 0 0 / 60px 60px,
        var(--mf-soft);
}

.brx-mf.has-pin .brx-mf__stage {
    display: block;
}

.brx-mf.has-pin .brx-mf__steps-m {
    display: none;
}

.brx-mf__stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    align-items: center;
    gap: 40px;
}

/* copy */
.brx-mf__stage-copy {
    position: relative;
    min-height: 260px;
}

.brx-mf__stage-text {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}

.brx-mf__stage-text.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.brx-mf__stage-num {
    display: block;
    font-family: var(--font_outfit, sans-serif);
    font-size: 84px;
    line-height: 1;
    font-weight: 600;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--mf-teal);
}

.brx-mf__stage-num small {
    margin-left: 6px;
    font-size: 22px;
    -webkit-text-stroke: 0;
    color: var(--mf-muted);
}

.brx-mf__journey h3 {
    margin: 18px 0 0;
    font-family: var(--font_outfit, sans-serif);
    font-size: 36px;
    line-height: 1.15;
    font-weight: 600;
    color: var(--mf-ink);
}

.brx-mf__journey p {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--mf-muted);
}

/* rail */
.brx-mf__rail {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
}

.brx-mf__rail::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: rgba(47, 102, 98, .18);
}

.brx-mf__rail li {
    position: relative;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(21, 21, 21, .4);
    transition: color .3s ease;
}

.brx-mf__rail li span {
    display: inline-block;
    width: 34px;
    font-size: 12px;
    letter-spacing: .1em;
}

.brx-mf__rail li::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--mf-soft);
    border: 2px solid rgba(47, 102, 98, .35);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.brx-mf__rail li.is-on {
    color: var(--mf-ink);
}

.brx-mf__rail li.is-on::before {
    background: var(--mf-lime);
    border-color: var(--mf-teal);
    transform: scale(1.35);
}

/* the tile: isometric view, layers switch per stage */
.brx-mf__tile-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    perspective: 1400px;
}

.brx-mf__tile {
    --edge: #b3a68f;
    position: relative;
    width: min(360px, 30vw);
    aspect-ratio: 1;
    border-radius: 4px;
    transform: rotateX(56deg) rotateZ(-42deg);
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1), box-shadow .8s ease;
    /* thickness: loose material is thick, pressed body is thin */
    box-shadow:
        1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge),
        5px 5px 0 var(--edge), 6px 6px 0 var(--edge), 7px 7px 0 var(--edge), 8px 8px 0 var(--edge),
        9px 9px 0 var(--edge), 10px 10px 0 var(--edge), 11px 11px 0 var(--edge), 12px 12px 0 var(--edge),
        13px 13px 0 var(--edge), 14px 14px 0 var(--edge), 15px 15px 0 var(--edge), 16px 16px 0 var(--edge),
        17px 17px 0 var(--edge), 18px 18px 0 var(--edge);
}

[data-stage="3"] .brx-mf__tile,
[data-stage="4"] .brx-mf__tile,
[data-stage="5"] .brx-mf__tile,
[data-stage="6"] .brx-mf__tile,
.brx-mf__tile--mini[data-stage="3"],
.brx-mf__tile--mini[data-stage="4"],
.brx-mf__tile--mini[data-stage="5"],
.brx-mf__tile--mini[data-stage="6"] {
    --edge: #a99b84;
    box-shadow:
        1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge),
        5px 5px 0 var(--edge), 6px 6px 0 var(--edge), 7px 7px 0 var(--edge), 8px 8px 0 var(--edge);
}

[data-stage="5"] .brx-mf__tile {
    transform: rotateX(56deg) rotateZ(-42deg) scale(.95);
    box-shadow:
        1px 1px 0 #c0703c, 2px 2px 0 #c0703c, 3px 3px 0 #c0703c, 4px 4px 0 #c0703c,
        5px 5px 0 #c0703c, 6px 6px 0 #c0703c, 7px 7px 0 #c0703c, 8px 8px 0 #c0703c,
        0 0 90px 20px rgba(255, 120, 30, .45);
}

[data-stage="6"] .brx-mf__tile {
    transform: rotateX(56deg) rotateZ(-42deg) scale(.95);
}

.brx-mf__tile-shadow {
    position: absolute;
    left: 50%;
    bottom: 14%;
    width: 62%;
    height: 40px;
    margin-left: -31%;
    border-radius: 50%;
    background: radial-gradient(rgba(15, 36, 35, .25), transparent 70%);
    filter: blur(6px);
}

.brx-mf__l {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .7s ease, clip-path 1.3s cubic-bezier(.65, 0, .35, 1), top 1.3s cubic-bezier(.65, 0, .35, 1);
}

.brx-mf__l--raw {
    background:
        radial-gradient(circle, #8f7f69 0 5px, transparent 6px) 0 0 / 34px 34px,
        radial-gradient(circle, #6f655a 0 4px, transparent 5px) 12px 18px / 41px 41px,
        radial-gradient(circle, #d2c2a6 0 7px, transparent 8px) 22px 6px / 52px 52px,
        radial-gradient(circle, #ece4d6 0 3px, transparent 4px) 5px 25px / 23px 23px,
        radial-gradient(circle, #a39074 0 9px, transparent 10px) 30px 40px / 67px 67px,
        #b9a98f;
}

.brx-mf__l--powder {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.6px) 0 0 / 6px 6px,
        radial-gradient(circle, rgba(120, 100, 80, .35) 0 1px, transparent 1.6px) 3px 3px / 7px 7px,
        radial-gradient(circle, rgba(140, 120, 95, .25) 0 1.5px, transparent 2px) 1px 4px / 11px 11px,
        #ddd2bf;
}

.brx-mf__l--body {
    background:
        radial-gradient(circle, rgba(120, 100, 80, .08) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
        linear-gradient(135deg, #e6ddce, #d3c7b3);
}

.brx-mf__l--design {
    background-size: 500% auto;
    background-position: 47% 7%;
    clip-path: inset(0 0 100% 0);
}

.brx-mf__l--head {
    top: -8%;
    bottom: auto;
    height: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, #13132E, #2a2a4a);
    box-shadow: 0 8px 0 -4px var(--mf-lime), 0 10px 22px rgba(0, 0, 0, .3);
}

.brx-mf__l--fire {
    background: radial-gradient(circle at 50% 50%, rgba(255, 170, 60, .65), rgba(255, 90, 20, .45) 55%, rgba(200, 50, 0, .35));
    mix-blend-mode: multiply;
}

.brx-mf__l--gloss {
    background:
        linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 47%, transparent 58%) 0 0 / 300% 100% no-repeat,
        linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 45%);
}

/* layer visibility per stage */
[data-stage="1"] .brx-mf__l--raw { opacity: 1; }
[data-stage="2"] .brx-mf__l--powder { opacity: 1; }
[data-stage="3"] .brx-mf__l--body,
[data-stage="4"] .brx-mf__l--body,
[data-stage="5"] .brx-mf__l--body,
[data-stage="6"] .brx-mf__l--body { opacity: 1; }

[data-stage="4"] .brx-mf__l--design,
[data-stage="5"] .brx-mf__l--design,
[data-stage="6"] .brx-mf__l--design {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

[data-stage="4"] .brx-mf__l--head {
    animation: brx-mf-print 1.4s cubic-bezier(.65, 0, .35, 1) forwards;
}

[data-stage="5"] .brx-mf__l--fire { opacity: 1; }

[data-stage="6"] .brx-mf__l--gloss {
    opacity: 1;
    animation: brx-mf-sheen 2.6s ease-in-out infinite;
}

[data-stage="3"] .brx-mf__stage .brx-mf__tile,
.brx-mf__stage[data-stage="3"] .brx-mf__tile {
    animation: brx-mf-press .7s cubic-bezier(.22, .61, .36, 1);
}

/* small-screen journey list */
.brx-mf__steps-m {
    list-style: none;
    margin: 0;
    padding: 0 0 110px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.brx-mf__steps-m li {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 26px;
    border-radius: 22px;
    background: #fff;
}

.brx-mf__tile--mini {
    flex: 0 0 auto;
    width: 92px;
    margin: 10px 14px 18px 4px;
    animation: none !important;
}

.brx-mf__steps-m .brx-mf__stage-num {
    font-size: 40px;
}

.brx-mf__steps-m .brx-mf__stage-num small {
    font-size: 14px;
}

.brx-mf__steps-m h3 {
    margin-top: 8px;
    font-size: 22px;
}

.brx-mf__steps-m p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.6;
}

/* =========================================================
   2. Format explorer
   ========================================================= */
.brx-mf__formats {
    background: #fff;
}

.brx-mf__fx {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 40px;
    align-items: stretch;
}

.brx-mf__fx-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, .7fr)) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid var(--mf-line);
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--mf-ink);
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.brx-mf__fx-row:hover {
    background: var(--mf-soft);
}

.brx-mf__fx-row.is-on {
    border-radius: 16px;
    border-bottom-color: transparent;
    background: var(--mf-teal);
    color: #fff;
}

.brx-mf__fx-row--head {
    padding-top: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mf-muted);
    cursor: default;
}

.brx-mf__fx-row--head:hover {
    background: transparent;
}

.brx-mf__fx-row--head span:not(:first-child) {
    text-align: center;
}

.brx-mf__fx-size {
    font-family: var(--font_outfit, sans-serif);
    font-size: 19px;
    font-weight: 600;
}

.brx-mf__fx-dot {
    justify-self: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(19, 19, 46, .15);
}

.brx-mf__fx-dot.is-yes {
    border-color: var(--mf-teal);
    background: var(--mf-teal);
}

.brx-mf__fx-row.is-on .brx-mf__fx-dot {
    border-color: rgba(255, 255, 255, .3);
}

.brx-mf__fx-row.is-on .brx-mf__fx-dot.is-yes {
    border-color: var(--mf-lime);
    background: var(--mf-lime);
}

.brx-mf__fx-count {
    text-align: center;
    font-weight: 700;
}

.brx-mf__fx-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0 20px;
    font-size: 13px;
    color: var(--mf-muted);
}

.brx-mf__fx-note .brx-mf__fx-dot {
    display: inline-block;
}

.brx-mf__fx-view {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 28px;
    background: var(--mf-soft);
    overflow: hidden;
}

.brx-mf__scale {
    --k: .15px; /* px per mm */
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
    flex: 1;
    min-height: calc(3500 * var(--k) + 40px);
    padding: 0 30px 0 70px;
    background:
        linear-gradient(rgba(47, 102, 98, .07) 1px, transparent 1px) 0 0 / 100% calc(500 * var(--k));
}

.brx-mf__scale-ruler {
    position: absolute;
    left: 24px;
    bottom: 0;
    height: calc(3200 * var(--k));
    width: 2px;
    background: rgba(47, 102, 98, .3);
}

.brx-mf__scale-ruler b {
    position: absolute;
    left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mf-teal);
    white-space: nowrap;
    transform: translateY(50%);
}

.brx-mf__scale-ruler b:nth-child(1) { bottom: calc(3200 * var(--k)); }
.brx-mf__scale-ruler b:nth-child(2) { bottom: calc(2000 * var(--k)); }
.brx-mf__scale-ruler b:nth-child(3) { bottom: calc(1000 * var(--k)); }

.brx-mf__person {
    flex: 0 0 auto;
    width: calc(600 * var(--k));
    height: calc(1750 * var(--k));
    fill: #9aa7a3;
}

.brx-mf__door {
    position: relative;
    flex: 0 0 auto;
    width: calc(900 * var(--k));
    height: calc(2100 * var(--k));
    border: 3px solid #9aa7a3;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.brx-mf__door::after {
    content: "";
    position: absolute;
    right: 14%;
    top: 52%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9aa7a3;
}

.brx-mf__slab {
    flex: 0 0 auto;
    width: calc(var(--w) * var(--k));
    height: calc(var(--h) * var(--k));
    border-radius: 3px;
    background-size: auto 250%;
    background-position: 47% 5%;
    box-shadow: 8px 0 0 -2px #c9c2b6, 0 20px 40px rgba(19, 19, 46, .2);
    transition: width .7s cubic-bezier(.22, .61, .36, 1), height .7s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf__floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--mf-ink);
}

.brx-mf__fx-info {
    margin-top: 22px;
    padding: 26px 30px 28px;
    border-radius: 22px;
    background: var(--mf-soft);
}

.brx-mf__fx-title {
    display: block;
    font-family: var(--font_outfit, sans-serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--mf-ink);
}

.brx-mf__fx-meta {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brx-mf__fx-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 100px;
    background: var(--mf-soft);
    font-size: 14px;
    font-weight: 600;
    color: var(--mf-ink);
}

.brx-mf__fx-meta i {
    color: var(--mf-teal);
}

.brx-mf__fx-info p {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--mf-muted);
}

.brx-mf__fx-info .brx-mf__fx-list {
    margin-top: 10px;
    font-size: 14px;
    color: var(--mf-teal);
}

/* =========================================================
   3. Machines
   ========================================================= */
.brx-mf__kit {
    background: var(--mf-soft);
}

.brx-mf__kit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}

.brx-mf__kit-card {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: #fff;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.brx-mf.has-js .brx-mf__kit-card.is-in:hover,
.brx-mf__kit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(19, 19, 46, .12);
}

.brx-mf__kit-media {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

.brx-mf__kit-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf__kit-card:hover .brx-mf__kit-media img {
    transform: scale(1.06);
}

.brx-mf__kit-tag {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .94);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mf-ink);
}

.brx-mf__kit-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
    gap: 10px;
}

.brx-mf__kit-does,
.brx-mf__kit-gets {
    position: relative;
    padding: 18px 20px;
    border-radius: 16px;
    font-size: 15.5px;
    line-height: 1.6;
}

.brx-mf__kit-does {
    background: var(--mf-soft);
    color: var(--mf-muted);
}

.brx-mf__kit-gets {
    flex: 1;
    background: var(--mf-teal);
    color: #fff;
    font-weight: 500;
}

.brx-mf__kit-gets::before {
    content: "\f063";
    position: absolute;
    left: 50%;
    top: -20px;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--mf-lime);
    color: var(--mf-ink);
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    font-weight: 900;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
}

.brx-mf__kit-does small,
.brx-mf__kit-gets small {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brx-mf__kit-does small {
    color: var(--mf-teal);
}

.brx-mf__kit-gets small {
    color: var(--mf-lime);
}

/* =========================================================
   4. Lab results
   ========================================================= */
/* ---------- 3b. plant gallery (continues the machinery section's background) ---------- */
.brx-mf .brx-mf__gallery-sec {
    padding-top: 0;
    background: var(--mf-soft);
}

.brx-mf__gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 230px;
    gap: 18px;
    margin-top: 56px;
}

/* first photo large (2 x 2), last one wide (2 columns) */
.brx-mf__gal-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: #e3e8e7;
}

.brx-mf__gal-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.brx-mf__gal-item:last-child {
    grid-column: span 2;
}

.brx-mf__gal-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.brx-mf__gal-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 36, 35, .45));
    opacity: 0;
    transition: opacity .4s ease;
}

.brx-mf__gal-zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    font-size: 18px;
    color: var(--mf-teal);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
}

.brx-mf__gal-item:hover img {
    transform: scale(1.06);
}

.brx-mf__gal-item:hover::after,
.brx-mf__gal-item:hover .brx-mf__gal-zoom,
.brx-mf__gal-item:focus-visible .brx-mf__gal-zoom {
    opacity: 1;
    transform: none;
}

@media (max-width: 991px) {
    .brx-mf__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 200px;
        gap: 14px;
        margin-top: 40px;
    }
}

@media (max-width: 575px) {
    .brx-mf__gallery {
        grid-auto-rows: 150px;
        gap: 10px;
    }

    .brx-mf__gal-item {
        border-radius: 14px;
    }

    .brx-mf__gal-zoom {
        opacity: 1;
        transform: none;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

.brx-mf__lab {
    background: #fff;
}

.brx-mf__lab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.brx-mf__test {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--mf-line);
    border-radius: 22px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.brx-mf__test:hover {
    border-color: transparent;
    box-shadow: 0 24px 60px rgba(19, 19, 46, .1);
}

.brx-mf__test header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.brx-mf__test h3 {
    margin: 0;
    font-family: var(--font_outfit, sans-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--mf-ink);
}

.brx-mf__test header span {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--mf-soft);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mf-teal);
    white-space: nowrap;
}

.brx-mf__bars2 {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.brx-mf__bar2 {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}

.brx-mf__bar2-k {
    grid-row: 1 / span 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mf-muted);
}

.brx-mf__bar2-track {
    height: 10px;
    border-radius: 10px;
    background: var(--mf-soft);
    overflow: hidden;
}

.brx-mf__bar2-track i {
    display: block;
    height: 100%;
    width: var(--v);
    border-radius: 10px;
    background: #b9c4c1;
    transition: width 1.2s cubic-bezier(.22, .61, .36, 1) .2s;
}

.brx-mf.has-js .brx-mf__test:not(.is-in) .brx-mf__bar2-track i {
    width: 0;
}

.brx-mf__bar2-v {
    margin-top: 4px;
    font-size: 13px;
    color: var(--mf-muted);
}

.brx-mf__bar2--us .brx-mf__bar2-k {
    color: var(--mf-teal);
}

.brx-mf__bar2--us .brx-mf__bar2-track i {
    background: linear-gradient(90deg, var(--mf-teal), var(--mf-lime));
}

.brx-mf__bar2--us .brx-mf__bar2-v {
    font-weight: 700;
    color: var(--mf-ink);
}

.brx-mf__better {
    align-self: flex-start;
    margin-top: 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mf-teal);
}

.brx-mf__test p {
    margin: 10px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--mf-line);
    font-size: 15px;
    line-height: 1.65;
    color: var(--mf-muted);
}

.brx-mf__lab-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
    padding: 20px 26px;
    border-radius: 16px;
    background: var(--mf-soft);
}

.brx-mf__lab-foot p {
    margin: 0;
    font-size: 14px;
    color: var(--mf-muted);
}

/* =========================================================
   5. CTA
   ========================================================= */
.brx-mf__cta {
    /* light grey band (same as the footer area below); normal top spacing so the teal box sits inside it */
    background: #f1f1f1;
}

.brx-mf__cta-box {
    position: relative;
    padding: 64px 60px 70px;
    border-radius: 32px;
    background: var(--mf-teal);
    text-align: center;
    overflow: hidden;
}

.brx-mf__cta-box::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}

.brx-mf__cta-box > * {
    position: relative;
}

.brx-mf__route {
    list-style: none;
    margin: 0 auto 44px;
    padding: 0;
    max-width: 820px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brx-mf__route li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.brx-mf__route li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    left: calc(50% + 36px);
    right: calc(-50% + 36px);
    border-top: 2px dashed rgba(255, 255, 255, .35);
}

.brx-mf__route i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--mf-lime);
    font-size: 22px;
}

.brx-mf__route li:last-child i {
    background: var(--mf-lime);
    color: var(--mf-ink);
}

.brx-mf__cta-box h2 {
    margin: 0;
    font-family: var(--font_outfit, sans-serif);
    font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.1;
    font-weight: 600;
    color: #fff;
}

.brx-mf__cta-box p {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

.brx-mf__cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.brx-mf__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.brx-mf__btn:hover {
    transform: translateY(-3px);
}

.brx-mf__btn--lime {
    background: var(--mf-lime);
    color: #13132E;
}

.brx-mf__btn--lime:hover {
    background: #fff;
    color: #13132E;
}

.brx-mf__btn--ghost {
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.brx-mf__btn--ghost:hover {
    background: #fff;
    color: var(--mf-teal);
}

/* ---------- keyframes ---------- */
@keyframes brx-mf-print {
    0% { top: -8%; opacity: 1; }
    88% { top: 100%; opacity: 1; }
    100% { top: 104%; opacity: 0; }
}

@keyframes brx-mf-sheen {
    0% { background-position: 120% 0, 0 0; }
    100% { background-position: -40% 0, 0 0; }
}

@keyframes brx-mf-press {
    0% { transform: rotateX(56deg) rotateZ(-42deg) translateZ(0); }
    40% { transform: rotateX(56deg) rotateZ(-42deg) translateZ(-26px) scale(1.02); }
    100% { transform: rotateX(56deg) rotateZ(-42deg) translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
    .brx-mf.has-js .brx-mf__reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .brx-mf__l,
    .brx-mf__tile,
    .brx-mf__slab,
    .brx-mf__bar2-track i {
        transition: none;
        animation: none !important;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .brx-mf section {
        padding: 90px 0;
    }

    .brx-mf__stage-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
        gap: 28px;
    }

    .brx-mf__fx {
        grid-template-columns: 1fr;
    }

    .brx-mf__scale {
        --k: .108px;
    }

    .brx-mf__kit-body {
        padding: 18px;
    }
}

@media (max-width: 991px) {
    .brx-mf__head-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .brx-mf__steps-m {
        padding-bottom: 90px;
    }

    .brx-mf__kit-grid,
    .brx-mf__lab-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brx-mf__kit-grid .brx-mf__kit-card:last-child {
        grid-column: 1 / -1;
    }

    .brx-mf__lab-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .brx-mf__cta-box {
        padding: 50px 30px 56px;
    }
}

@media (max-width: 767px) {
    .brx-mf__steps-m {
        grid-template-columns: 1fr;
    }

    .brx-mf__kit-grid,
    .brx-mf__lab-grid {
        grid-template-columns: 1fr;
    }

    .brx-mf__scale {
        --k: .074px;
        gap: 14px;
        padding: 0 16px 0 54px;
    }

    .brx-mf__route {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 26px;
    }

    .brx-mf__route li:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 575px) {
    .brx-mf section {
        padding: 70px 0;
    }

    .brx-mf__wrap {
        padding: 0 16px;
    }

    .brx-mf__steps-m {
        padding-bottom: 70px;
    }

    .brx-mf__steps-m li {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 22px 20px 24px;
    }

    .brx-mf__tile--mini {
        width: 84px;
        margin: 6px 0 22px 34px;
    }

    .brx-mf__fx-row {
        padding: 14px 12px;
    }

    .brx-mf__fx-size {
        font-size: 16px;
    }

    .brx-mf__fx-info {
        padding: 22px 20px 24px;
    }

    .brx-mf__fx-title {
        font-size: 24px;
    }

    .brx-mf__test {
        padding: 22px;
    }

    .brx-mf__cta-box {
        padding: 44px 20px 48px;
        border-radius: 24px;
    }

    .brx-mf__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- responsive: plant + journey photos ---------- */
@media (max-width: 1199px) {
    .brx-mf__stage-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
    }
}

@media (max-width: 991px) {
    .brx-mf__plant-media {
        aspect-ratio: 16 / 10;
    }

    .brx-mf__seal {
        width: 120px;
        height: 120px;
        right: 20px;
        top: 20px;
    }

    .brx-mf__seal text {
        font-size: 14px;
    }

    .brx-mf__seal img {
        width: 46px;
        height: 46px;
        padding: 8px;
    }
}

@media (max-width: 575px) {
    .brx-mf__plant-media {
        aspect-ratio: 4 / 5;
        border-radius: 24px;
    }

    .brx-mf__plant-media > img {
        object-position: 38% 50%;
    }

    .brx-mf__plant-chip {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 12px 16px;
    }

    .brx-mf__seal {
        width: 100px;
        height: 100px;
        right: 14px;
        top: 14px;
    }

    .brx-mf__seal text {
        font-size: 13px;
    }

    .brx-mf__seal img {
        width: 38px;
        height: 38px;
        padding: 6px;
    }

    .brx-mf__step-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brx-mf__live::after,
    .brx-mf__seal svg {
        animation: none;
    }

    .brx-mf__frame,
    .brx-mf__frame > img {
        transition: none;
    }
}
/* formats: caption on the scale view, chips on the grey info card */
.brx-mf__fx-cap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 26px 0 0 28px;
    padding: 8px 14px;
    border-radius: 100px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--mf-teal);
}

.brx-mf__fx-cap + .brx-mf__scale {
    margin-top: auto;
}

.brx-mf__fx-info .brx-mf__fx-meta li {
    background: #fff;
}
/* ---------- Formats section: compact on laptops (1200-1599px) ----------
   Below 1200px the section already stacks; 1600px+ is unchanged. */
@media (min-width: 1200px) and (max-width: 1599px) {
    /* 1. smaller to-scale drawing (everything in it is sized from --k, so it stays to scale) */
    .brx-mf__formats .brx-mf__scale {
        --k: .11px;
    }

    .brx-mf__formats .brx-mf__fx-cap {
        margin: 20px 0 0 22px;
    }

    /* 2. tighter table */
    .brx-mf__formats .brx-mf__fx-row {
        padding: 11px 18px;
    }

    .brx-mf__formats .brx-mf__fx-row--head {
        padding-top: 0;
        font-size: 11px;
    }

    .brx-mf__formats .brx-mf__fx-size {
        font-size: 16px;
    }

    .brx-mf__formats .brx-mf__fx-dot {
        width: 10px;
        height: 10px;
    }

    .brx-mf__formats .brx-mf__fx-note {
        margin-top: 12px;
        font-size: 12px;
    }

    /* 3. compact detail card */
    .brx-mf__formats .brx-mf__fx-info {
        margin-top: 14px;
        padding: 18px 22px 20px;
        border-radius: 18px;
    }

    .brx-mf__formats .brx-mf__fx-title {
        font-size: 22px;
    }

    .brx-mf__formats .brx-mf__fx-meta {
        margin-top: 10px;
        gap: 8px;
    }

    .brx-mf__formats .brx-mf__fx-meta li {
        padding: 6px 12px;
        font-size: 13px;
    }

    .brx-mf__formats .brx-mf__fx-info p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.6;
    }

    .brx-mf__formats .brx-mf__fx-info .brx-mf__fx-list {
        margin-top: 6px;
        font-size: 13px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .brx-mf__formats .brx-mf__scale {
        --k: .10px;
    }
}