/* =========================================================
   MAHALAXMI TRADERS  –  MANUFACTURING PAGE
   File : css/manufacturing.css   (loaded after style.css)
   Every class starts with "mf-" so nothing here can clash
   with the rest of the site.
   ========================================================= */

.manufacturing-page {
    --mf-green: #0f3d2e;
    --mf-green-deep: #0b2f23;
    --mf-gold: #c99a44;
    --mf-gold-soft: #d9a94f;
    --mf-page: #fcfaf5;
    --mf-card: #f7f3e9;
    --mf-card-line: #ebe4d4;
    --mf-ink: #1b221e;
    --mf-mute: #4d564f;
    --mf-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --mf-script: "Caveat", "Segoe Script", "Brush Script MT", cursive;

    background: var(--mf-page);
    color: var(--mf-ink);
}

/* style.css gives every <section> 80px of vertical padding – reset it here */
.manufacturing-page main > section { padding-block: 0; }

.mf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.manufacturing-page svg { display: block; }

/* style.css makes every <img> full-width block – opt out inside our cards */
.manufacturing-page main img { max-width: 100%; }

.mf-wrap { width: min(1360px, 94.5%); margin-inline: auto; }

.manufacturing-page h1,
.manufacturing-page h2,
.manufacturing-page h3 {
    font-family: var(--mf-serif);
    color: var(--mf-green);
    font-weight: 700;
    line-height: 1.15;
}

.manufacturing-page main a:focus-visible {
    outline: 2px solid var(--mf-gold);
    outline-offset: 3px;
}

/* shared card look */
.mf-card {
    border: 1px solid var(--mf-card-line);
    border-radius: 8px;
    background: linear-gradient(180deg, #faf7ee, var(--mf-card));
    box-shadow: 0 6px 22px rgba(23, 63, 53, .05);
}

.mf-swash { width: 100%; height: .4em; }

/* buttons */
.mf-btn,
.mf-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.mf-btn svg,
.mf-btn-light svg { width: 17px; height: 17px; }

.mf-btn {
    min-height: 46px;
    padding: 0 16px;
    font-size: clamp(13.5px, 1.05vw, 15px);
    white-space: nowrap;
    color: #fff;
    background: var(--mf-green);
}

.mf-btn:hover { background: #0a3024; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 61, 46, .25); }


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

.mf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 14.3vw, 210px);
    background: var(--mf-page);
}

.mf-hero-main {
    position: relative;
    overflow: hidden;
    min-height: clamp(340px, 28.5vw, 410px);
}

.mf-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    background: url("../assets/images/hero-bg.jpg") 68% center / auto 100% no-repeat;
}

.mf-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fcfaf5 0%, rgba(252, 250, 245, .9) 12%, rgba(252, 250, 245, .35) 36%, rgba(252, 250, 245, 0) 58%);
}

.mf-hero-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 1180px);
    padding: 26px 0 30px clamp(28px, 5.9vw, 100px);
}

.mf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mf-green);
}

.mf-breadcrumb a:hover { text-decoration: underline; }

.mf-hero h1 {
    margin-top: clamp(20px, 2.6vw, 38px);
    font-size: clamp(34px, 3.3vw, 48px);
    letter-spacing: -.01em;
}

.mf-hero-sub {
    margin-top: 8px;
    font-family: var(--mf-serif);
    font-weight: 700;
    font-size: clamp(19px, 1.85vw, 26px);
    color: var(--mf-gold);
}

.mf-hero-text {
    max-width: clamp(320px, 44vw, 640px);
    margin-top: 10px;
    font-size: clamp(14.5px, 1.25vw, 17.5px);
    line-height: 1.7;
    color: #232a26;
}

.mf-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px clamp(14px, 1.9vw, 28px);
    margin-top: clamp(18px, 2vw, 28px);
}

.mf-badges li {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 190px;
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.3;
    color: var(--mf-green);
}

.mf-badge-ico {
    flex: none;
    width: clamp(40px, 3.3vw, 48px);
    height: clamp(40px, 3.3vw, 48px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mf-green);
    color: var(--mf-gold-soft);
}

.mf-badge-ico svg { width: 52%; height: 52%; }

/* handwritten "From Nature to Nutrition" */
.mf-hero-script {
    position: absolute;
    z-index: 2;
    left: 57%;
    top: clamp(26px, 3.2vw, 46px);
    font-family: var(--mf-script);
    font-weight: 500;
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.1;
    color: #171c19;
    transform: rotate(-11deg);
    transform-origin: left bottom;
    pointer-events: none;
}

.mf-hero-script span { display: block; }
.mf-hero-script span:nth-child(2) { margin-left: .3em; }
.mf-hero-script span:nth-child(3) { margin-left: .6em; }
.mf-hero-script .mf-swash { width: 5.6em; height: .42em; margin: .3em 0 0 .4em; }

/* right-hand dark panel */
.mf-values {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 18px 10px;
    background: linear-gradient(180deg, #0f3d2e, #0b3126);
    color: #fff;
}

.mf-values li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.35;
}

.mf-values svg {
    width: clamp(30px, 2.6vw, 38px);
    height: clamp(30px, 2.6vw, 38px);
    color: var(--mf-gold-soft);
}


/* =========================================================
   FARMERS  /  MACHINE-VS-TRADITIONAL  /  QUOTE
   ========================================================= */

.manufacturing-page main > .mf-split { padding-block: clamp(10px, 1vw, 14px) 0; }

.mf-split-grid {
    display: grid;
    grid-template-columns: 2.6fr 2.25fr 1fr;
    gap: clamp(10px, 1.1vw, 16px);
}

.mf-farmers {
    position: relative;
    display: grid;
    grid-template-columns: 56% 1fr;
    overflow: hidden;
    min-height: clamp(240px, 19.5vw, 285px);
}

.mf-farmers-photo {
    background: url("../assets/manufacturing/farmers-lotus.jpg") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
}

.mf-farmers-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 20px 22px 20px 4px;
    margin-left: -12px;
}

.mf-farmers h2 { font-size: clamp(19px, 1.6vw, 23px); }

.mf-farmers p {
    font-size: clamp(13.5px, 1.05vw, 15.5px);
    line-height: 1.65;
    color: #2e3630;
}

.mf-farmers .mf-btn { align-self: stretch; margin-top: 4px; }

/* 70–80 / 20–30 */
.mf-mix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: clamp(18px, 1.9vw, 28px) clamp(16px, 2vw, 30px);
}

.mf-mix-col { padding-inline: clamp(6px, 1.2vw, 18px); }
.mf-mix-col + .mf-mix-col { border-left: 1px solid #e3dccb; }

.mf-big {
    font-family: var(--mf-serif);
    font-weight: 700;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1;
    color: var(--mf-green);
    white-space: nowrap;
}

.mf-mix h3 {
    margin-top: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 600;
}

.mf-bar {
    height: 10px;
    margin: 12px 0 16px;
    border-radius: 99px;
    background: #e6dfd0;
    overflow: hidden;
}

.mf-bar span {
    display: block;
    width: var(--to);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b3126, #1a5a44);
}

.mf-mix-col > p:last-child {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.65;
    color: var(--mf-mute);
}

/* quote card */
.mf-blend {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(16px, 1.7vw, 24px) 12px 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, #f8ecd8 0%, #f6e9d3 46%, rgba(246, 233, 211, 0) 66%),
        url("../assets/manufacturing/hands-makhana.jpg") center bottom / 100% auto no-repeat,
        #f3e6d0;
}

.mf-script-quote {
    font-family: var(--mf-script);
    font-weight: 500;
    font-size: clamp(17px, 1.55vw, 23px);
    line-height: 1.2;
    text-align: center;
    color: #1d2320;
}

.mf-blend .mf-swash { width: 5em; height: .32em; margin-top: .2em; font-size: clamp(18px, 1.7vw, 24px); }


/* =========================================================
   FROM FARM TO YOUR TABLE
   ========================================================= */

.manufacturing-page main > .mf-process { padding-block: clamp(20px, 2.2vw, 30px) 0; }

.mf-process-head { text-align: center; }

.mf-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mf-gold);
}

.mf-eyebrow span { width: 40px; height: 1.5px; background: var(--mf-gold); }

.mf-process-head h2 {
    margin-top: 2px;
    font-size: clamp(28px, 2.55vw, 37px);
}

.mf-process-head > p:last-child {
    margin-top: 6px;
    font-size: clamp(14.5px, 1.2vw, 17px);
    color: #2a312d;
}

.mf-steps {
    list-style: none;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: clamp(16px, 1.8vw, 24px);
}

.mf-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(8px, .9vw, 13px) clamp(8px, .9vw, 12px);
    text-align: center;
    border: 1px solid var(--mf-card-line);
    border-radius: 7px;
    background: linear-gradient(180deg, #fbf9f3, #f8f4ea);
    box-shadow: 0 4px 16px rgba(23, 63, 53, .04);
}

.mf-num {
    display: grid;
    place-items: center;
    width: clamp(28px, 2.35vw, 34px);
    height: clamp(28px, 2.35vw, 34px);
    margin-top: clamp(10px, 1vw, 14px);
    border-radius: 50%;
    font-size: clamp(12px, 1vw, 14.5px);
    font-weight: 700;
    color: #fff;
    background: var(--mf-gold);
}

.mf-step-ico {
    width: clamp(30px, 2.7vw, 40px);
    height: clamp(30px, 2.7vw, 40px);
    margin-top: clamp(8px, .9vw, 12px);
    color: var(--mf-green);
}

.mf-step h3 {
    margin-top: 12px;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(15px, 1.2vw, 17.5px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mf-green);
}

.mf-step p {
    margin: 7px 0 14px;
    font-size: clamp(12.5px, .98vw, 14.5px);
    line-height: 1.55;
    color: #2c342f;
}

.mf-step img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / .98;
    margin-top: auto;
    object-fit: cover;
    border-radius: 5px;
}

.mf-arrow {
    flex: none;
    width: clamp(20px, 1.9vw, 28px);
    display: grid;
    place-items: center;
    align-self: center;
    margin-top: -6%;
    color: var(--mf-gold);
}

.mf-arrow svg { width: 22px; height: 22px; }


/* =========================================================
   HYGIENE  +  WHY CHOOSE
   ========================================================= */

.manufacturing-page main > .mf-why { padding-block: clamp(14px, 1.6vw, 22px) 0; }

.mf-why-grid {
    display: grid;
    grid-template-columns: 1fr 1.02fr;
    gap: clamp(12px, 1.2vw, 18px);
}

.mf-hygiene {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    min-height: clamp(210px, 18.6vw, 268px);
    background: linear-gradient(90deg, #f6f0e2, #f9f5ea);
}

.mf-hygiene-body {
    position: relative;
    z-index: 1;
    padding: clamp(18px, 2vw, 30px) 0 clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "badge title"
        "rule  rule"
        "text  text";
    align-content: center;
    column-gap: 14px;
}

.mf-gold-badge {
    grid-area: badge;
    align-self: center;
    width: clamp(38px, 3.3vw, 48px);
    height: clamp(38px, 3.3vw, 48px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mf-gold);
    color: #fff;
}

.mf-gold-badge svg { width: 55%; height: 55%; }

.mf-hygiene h2 { grid-area: title; font-size: clamp(18px, 1.6vw, 23px); }

.mf-rule {
    grid-area: rule;
    width: 64px;
    height: 2px;
    margin: 12px 0 14px;
    background: var(--mf-gold);
}

.mf-hygiene-body p {
    grid-area: text;
    max-width: 320px;
    font-size: clamp(13.5px, 1.08vw, 15.5px);
    line-height: 1.7;
    color: #2b332e;
}

.mf-hygiene-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    background: url("../assets/manufacturing/hygiene-line.jpg") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

.mf-choose {
    padding: clamp(18px, 1.9vw, 28px) clamp(18px, 2vw, 30px);
    border-radius: 8px;
    color: #fff;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(30, 90, 68, .55), transparent 60%),
        linear-gradient(180deg, #0f3d2e, #0b3126);
}

.mf-choose h2 {
    font-size: clamp(21px, 1.95vw, 28px);
    color: #fff;
}

.mf-choose ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: clamp(14px, 1.5vw, 22px) clamp(14px, 1.8vw, 26px);
    margin-top: clamp(14px, 1.6vw, 22px);
}

.mf-choose li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mf-gold-ico {
    flex: none;
    width: clamp(40px, 3.4vw, 50px);
    height: clamp(40px, 3.4vw, 50px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #d6a850, #bd8d3a);
    color: #fff;
}

.mf-gold-ico svg { width: 52%; height: 52%; }

.mf-choose strong {
    display: block;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
}

.mf-choose li div > span {
    display: block;
    margin-top: 2px;
    font-size: clamp(12.5px, .95vw, 14px);
    line-height: 1.4;
    color: #d6e2da;
}


/* =========================================================
   NUMBERS  +  QUOTE
   ========================================================= */

.manufacturing-page main > .mf-numbers { padding-block: clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 28px); }

.mf-numbers-grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: clamp(12px, 1.2vw, 18px);
}

.mf-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: clamp(14px, 1.5vw, 22px) 6px;
}

.mf-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    text-align: center;
}

.mf-stats li + li { border-left: 1px solid #e3dccb; }

.mf-stats svg {
    width: clamp(28px, 2.6vw, 38px);
    height: clamp(28px, 2.6vw, 38px);
    margin-bottom: 4px;
    color: #cf9a3f;
}

.mf-stats strong {
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 700;
    color: #131916;
}

.mf-stats li > span {
    font-size: clamp(12px, .95vw, 14px);
    color: #2f3731;
}

.mf-pure {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(16px, 2vw, 28px) clamp(18px, 2.6vw, 38px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(250, 244, 232, .8) 0%, rgba(250, 244, 232, .45) 55%, rgba(250, 244, 232, .1) 100%),
        url("../assets/manufacturing/pile-soft.jpg") center / cover no-repeat,
        #f3ead9;
}

.mf-pure .mf-script-quote {
    text-align: left;
    font-size: clamp(22px, 2.35vw, 33px);
}

.mf-pure .mf-swash {
    width: 5.2em;
    height: .32em;
    margin: .3em 0 0 .3em;
    font-size: clamp(18px, 1.9vw, 27px);
}


/* =========================================================
   LET'S GROW TOGETHER
   ========================================================= */

.mf-cta {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg,
            rgba(9, 44, 31, 0) 0%,
            rgba(9, 44, 31, 0) 26%,
            rgba(9, 44, 31, .46) 44%,
            rgba(9, 44, 31, .62) 100%),
        url("../assets/manufacturing/cta-bowl.jpg") center / cover no-repeat,
        #123a2b;
}

.mf-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) auto minmax(90px, .55fr);
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    min-height: clamp(190px, 15.5vw, 224px);
    padding: 26px 0;
}

.mf-cta h2 { font-size: clamp(27px, 2.6vw, 38px); color: #fff; }

.mf-cta-rule { display: block; width: 42px; height: 3px; margin: 14px 0 16px; background: var(--mf-gold); }

.mf-cta-copy p {
    max-width: 440px;
    font-size: clamp(14.5px, 1.2vw, 17px);
    line-height: 1.7;
    color: #f0f3ee;
}

.mf-btn-light {
    min-height: 54px;
    padding: 0 40px;
    font-size: 16px;
    color: #12241c;
    background: #fcfaf5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.mf-btn-light:hover { background: #fff; transform: translateY(-2px); }

.mf-cta-script {
    justify-self: end;
    font-family: var(--mf-script);
    font-weight: 500;
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: 1.02;
    color: #fff;
    transform: rotate(-6deg);
    pointer-events: none;
}

.mf-cta-script span { display: block; }
.mf-cta-script span:nth-child(2) { margin-left: .5em; }
.mf-cta-script span:nth-child(3) { margin-left: .2em; }
.mf-cta-script span:nth-child(4) { margin-left: .9em; }
.mf-cta-script .mf-swash { width: 3.4em; height: .32em; margin: .2em 0 0 .3em; }


/* =========================================================
   MOTION  (only when JS is running and motion is allowed)
   One orchestrated moment: the process steps arrive left → right,
   each arrow follows its step; bars fill and numbers count up.
   ========================================================= */

.mf-anim .mf-step {
    opacity: 0;
    transform: translateY(22px);
}

.mf-anim .mf-arrow { opacity: 0; transform: translateX(-8px); }

.mf-anim .mf-process.is-in .mf-step {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i) * 140ms);
}

.mf-anim .mf-process.is-in .mf-arrow {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease, transform .4s ease;
    transition-delay: calc(var(--i) * 140ms + 260ms);
}

.mf-anim .mf-num { transform: scale(.6); }

.mf-anim .mf-process.is-in .mf-num {
    transform: scale(1);
    transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
    transition-delay: calc(var(--i) * 140ms + 200ms);
}

.mf-anim .mf-bar span { width: 0; }

.mf-anim .mf-split.is-in .mf-bar span {
    width: var(--to);
    transition: width 1.3s cubic-bezier(.3, .7, .2, 1) .25s;
}

/* card hover: the photo eases in, nothing else moves */
.mf-step img { transition: transform .5s ease; }
.mf-step { overflow: visible; }
.mf-step:hover img { transform: scale(1.03); }


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

@media (max-width: 1180px) {
    .mf-split-grid { grid-template-columns: 1fr 1fr; }
    .mf-badges { max-width: 56%; }

    .mf-blend {
        grid-column: 1 / -1;
        align-items: flex-start;
        justify-content: center;
        min-height: 190px;
        padding: 26px 46% 26px 34px;
        background:
            linear-gradient(90deg, #f8ecd8 0%, #f6e9d3 52%, rgba(246, 233, 211, 0) 82%),
            url("../assets/manufacturing/hands-makhana.jpg") right center / auto 100% no-repeat,
            #f3e6d0;
    }
    .mf-blend .mf-script-quote { text-align: left; font-size: clamp(22px, 2.6vw, 28px); }

    .mf-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 26px 14px;
    }
    .mf-arrow { display: none; }
    
    .mf-why-grid { grid-template-columns: 1fr; }
    .mf-numbers-grid { grid-template-columns: 1fr; }
    .mf-pure { min-height: 170px; }
}

@media (max-width: 900px) {
    .mf-badges { max-width: none; }
    .mf-hero { grid-template-columns: 1fr; }
    .mf-values {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 14px;
        padding: 18px 12px;
    }
    .mf-values li { flex: 1 1 120px; }

    .mf-hero-photo { width: 100%; opacity: .55; }
    .mf-hero-photo::before {
        background: linear-gradient(180deg, rgba(252, 250, 245, .95), rgba(252, 250, 245, .7) 60%, rgba(252, 250, 245, .5));
    }
    .mf-hero-script { display: none; }
    .mf-hero-inner { padding-inline: 5%; }

    .mf-split-grid { grid-template-columns: 1fr; }
    .mf-steps { grid-template-columns: repeat(2, 1fr); }
    .mf-stats { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
    .mf-stats li:nth-child(4) { border-left: 0; }

    .mf-cta-inner { grid-template-columns: 1fr; justify-items: start; padding: 34px 0 38px; }
    .mf-cta-space,
    .mf-cta-script { display: none; }
    .mf-cta {
        background:
            linear-gradient(90deg, rgba(9, 44, 31, .78), rgba(9, 44, 31, .82)),
            url("../assets/manufacturing/cta-bowl.jpg") 0% 50% / cover no-repeat,
            #123a2b;
    }
}

@media (max-width: 640px) {
    .mf-blend {
        align-items: center;
        justify-content: flex-start;
        min-height: 310px;
        padding: 22px 16px 0;
        background:
            linear-gradient(180deg, #f8ecd8 0%, #f6e9d3 44%, rgba(246, 233, 211, 0) 64%),
            url("../assets/manufacturing/hands-makhana.jpg") center bottom / 100% auto no-repeat,
            #f3e6d0;
    }
    .mf-blend .mf-script-quote { text-align: center; font-size: 24px; }

    .mf-farmers { grid-template-columns: 1fr; }
    .mf-farmers-photo { height: 190px; -webkit-mask-image: none; mask-image: none; }
    .mf-farmers-body { margin-left: 0; padding: 18px; }

    .mf-mix { grid-template-columns: 1fr; gap: 20px; }
    .mf-mix-col + .mf-mix-col { border-left: 0; border-top: 1px solid #e3dccb; padding-top: 20px; }

    .mf-hygiene { grid-template-columns: 1fr; min-height: 0; }
    .mf-hygiene-photo {
        position: relative;
        width: 100%;
        height: 190px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    }
    .mf-hygiene-body { padding: 20px 18px 0; }

    .mf-choose ul { grid-template-columns: 1fr; }
    .mf-stats { grid-template-columns: repeat(2, 1fr); }
    .mf-stats li { border-left: 0 !important; }
    .mf-btn-light { width: 100%; }
}

@media (max-width: 460px) {
    .mf-steps { grid-template-columns: 1fr; }
    .mf-badges li { max-width: none; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .manufacturing-page * { transition: none !important; animation: none !important; }
}