.form-group.has-error .help-block {
    color: #dd4b39;
}
.form-group.has-error .form-control, .form-group.has-error .input-group-addon {
    border: 1px solid #dd4b39!important;
}
.help-block {
    bottom: -18px;
    left: 0;
    width: 100%;
    font-size: 12px;
}
#getaquotepop .grecaptcha-badge{
    visibility: hidden;
}
.landing-page .mainblock {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url('../images/landingbg.jpg?v=2') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.sl-nav li ul li span:hover,
.sl-nav li ul li span.active {
    color: #c8a96a !important;
}

.about-page .companylist {
    padding-bottom: 90px;
}


/* ============================================================
   MG GROUP BRANDS  (landing page – 5-card grid)
   ============================================================ */
.mg-brands {
    background: #f7f5f1;
    padding: 0 0 0px;
}
.mg-brands .mgb-header {
    margin-bottom: 45px;
}
.mg-brands .mgb-title {
    color: #2c2c2c;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 8px;
    position: relative;
    display: inline-block;
}
.mg-brands .mgb-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #c8a96a;
    margin: 14px auto 0;
    border-radius: 2px;
}
.mg-brands .mgb-subtitle {
    color: #777;
    font-size: 15px;
    letter-spacing: 1px;
    margin: 0;
}
.mg-brands .mgb-grid {
    margin-top: 15px;
}
.mg-brands .mgb-col {
    margin-bottom: 28px;
    display: flex;
}
.mg-brands .mgb-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    text-decoration: none !important;
    color: inherit;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border-top: 3px solid transparent;
}
.mg-brands .mgb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    border-top-color: #c8a96a;
    text-decoration: none;
    color: inherit;
}
.mg-brands .mgb-card--coming {
    opacity: 0.92;
}
.mg-brands .mgb-card--coming:hover {
    transform: translateY(-2px);
}
/* Wide rectangular variant — image left, text right, fills the row */
.mg-brands .mgb-card--row {
    flex-direction: row;
    align-items: stretch;
    min-height: 165px;
}
.mg-brands .mgb-card--row .mgb-media {
    flex: 0 0 44%;
    max-width: 44%;
    height: auto;
}
.mg-brands .mgb-card--row .mgb-body {
    justify-content: center;
}
.mg-brands .mgb-media {
    background: linear-gradient(135deg, #fdfaf4 0%, #efe6d3 100%);
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mg-brands .mgb-img {
    max-height: 118px;
    width: auto;
    object-fit: contain;
}
.mg-brands .mgb-icon {
    font-size: 56px;
    color: #c8a96a;
    opacity: 0.85;
    transition: transform 0.3s ease;
}
.mg-brands .mgb-card:hover .mgb-icon {
    transform: scale(1.08);
    color: #8a6d3b;
}
.mg-brands .mgb-body {
    padding: 26px 28px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mg-brands .mgb-name {
    font-size: 24px;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0 0 7px;
    line-height: 1.25;
}
.mg-brands .mgb-tagline {
    color: #6c6c6c;
    font-size: 15px;
    margin: 0 0 18px;
    flex: 1;
}
.mg-brands .mgb-cta {
    color: #8a6d3b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mg-brands .mgb-card--coming .mgb-cta {
    color: #a8a8a8;
    font-style: italic;
    letter-spacing: 1px;
}

/* ============================================================
   BRAND BANNERS — colored, image-rich, 2 per row (old-site style)
   ============================================================ */
.mgb-banner-grid { margin-top: 0; margin-left: 0; margin-right: 0; }
.mgb-banner-grid > [class*="col-"] { padding: 0; }   /* flush, no gutters */
.mgb-banner-col { display: flex; }
.mgb-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 240px;
    overflow: hidden;
    text-decoration: none !important;
    color: #ffffff;
    transition: filter 0.3s ease;
}
.mgb-banner:hover { color: #ffffff; text-decoration: none; filter: brightness(1.05); }
.mgb-banner-content {
    position: relative;
    z-index: 2;
    flex: 1 1 58%;
    padding: 38px 28px 38px 44px;
}
/* CSS wordmark — "MG" with an underline bar + spaced sub-label */
.mgb-logo { margin-bottom: 18px; }
.mgb-logo-mark {
    display: inline-block;
    font-size: 46px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 1px;
    line-height: 1;
}
.mgb-logo-sub {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 2px solid rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}
/* Real brand logo image (e.g. MG Distribution) — replaces the CSS text wordmark.
   Sized to sit in the same visual slot as the "MG / SUBLABEL" lockup. */
.mgb-logo-img {
    display: block;
    height: 120px;          /* bumped from 74px — bigger MG Distribution logo */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);   /* force logo to clean white on the colored banner */
}
/* Natural-color variant — for logos that are already designed with their
   own colors (e.g. BCC, Casalux) and should NOT be forced to white. */
.mgb-logo-img--natural {
    filter: none;
}
/* Compact variant — for taller/square logos (e.g. MG Food landing-logo2)
   that need to sit at the same visual weight as the wider MG Distribution mark. */
.mgb-logo-img--compact {
    height: 70px;
}
.mgb-banner--rtl .mgb-logo-img { margin-left: auto; }
.mgb-banner-desc {
    max-width: 360px;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.95);
}
.mgb-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.mgb-banner-cta i { transition: transform 0.3s ease; }
.mgb-banner:hover .mgb-banner-cta i { transform: translateX(4px); }
.mgb-banner--coming .mgb-banner-cta { opacity: 0.85; font-style: italic; letter-spacing: 1px; }

/* Right-side art */
.mgb-banner-art {
    position: relative;
    z-index: 1;
    flex: 1 1 42%;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.mgb-banner-img {
    max-height: 205px;
    width: auto;
    object-fit: contain;
}
.mgb-banner-watermark {
    align-self: center;
    font-size: 110px;
    color: rgba(255, 255, 255, 0.16);
    margin-bottom: 18px;
}

/* ─── PHOTO variant ───────────────────────────────────────────
   Used by brands flagged with 'style' => 'photo' in the view.
   Right column = full-bleed cover photo (edge-to-edge),
   instead of a contained PNG floating in the corner.
   ──────────────────────────────────────────────────────────── */
.mgb-banner--photo {
    min-height: 300px;             /* photo needs room to read well */
    align-items: stretch;          /* art column fills full banner height */
}
.mgb-banner--photo .mgb-banner-content {
    align-self: center;            /* keep text vertically centered */
}
.mgb-banner--photo .mgb-banner-art {
    padding: 0;                    /* kill any cream-gradient padding */
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}
.mgb-banner--photo .mgb-banner-photo {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mgb-banner--photo:hover .mgb-banner-photo {
    transform: scale(1.03);        /* subtle zoom on hover */
}

/* Arabic / RTL — flip sides + right-align */
.mgb-banner--rtl { flex-direction: row-reverse; text-align: right; }
.mgb-banner--rtl .mgb-banner-content { padding: 38px 44px 38px 28px; }
.mgb-banner--rtl .mgb-logo-sub { margin-left: auto; letter-spacing: 2px; }
.mgb-banner--rtl .mgb-banner-desc { margin-left: auto; }

/* Responsive */
@media (max-width: 991px) {
    .mgb-banner { min-height: 220px; }
    .mgb-banner-content { padding: 30px 22px; }
    .mgb-logo-mark { font-size: 40px; }
    .mgb-banner-img { max-height: 175px; }
    .mgb-banner-watermark { font-size: 90px; }
    /* Photo variant on tablet — slightly shorter, photo still full-bleed */
    .mgb-banner--photo { min-height: 260px; }
}
@media (max-width: 575px) {
    .mgb-banner, .mgb-banner--rtl { flex-direction: column; align-items: stretch; min-height: 0; }
    .mgb-banner-content,
    .mgb-banner--rtl .mgb-banner-content { padding: 22px 22px 10px; }   /* tight bottom — pulls the photo up */
    .mgb-banner-desc { max-width: none; margin-bottom: 12px; }           /* tighter desc → CTA gap */
    .mgb-banner-art { padding: 0 22px 24px; }
    .mgb-banner-img { max-height: 150px; }

    /* Shrink centered banner typography on phones so descriptions
       don't feel oversized on small screens */
    .mgb-logo { margin-bottom: 12px; }
    .mgb-logo-mark { font-size: 32px; letter-spacing: 0.5px; }
    .mgb-logo-sub  { font-size: 11px; letter-spacing: 3px; margin-top: 6px; padding-top: 4px; }
    /* Real logo images: DO NOT shrink on mobile — bump them up instead so
       the brand mark reads clearly at phone widths. */
    .mgb-logo-img          { height: 140px; }
    .mgb-logo-img--compact { height: 90px; }
    .mgb-banner-desc { font-size: 13px; line-height: 1.5; }
    .mgb-banner-cta  { font-size: 12px; letter-spacing: 1.2px; gap: 6px; }
    /* Photo variant on phones — text on top, smaller photo block below.
       Source photos are PORTRAIT (~0.76:1) — at 340px the bottom-anchored
       cover crops ~35% off the top, but the subject (which sits in the
       lower-middle of these product shots) stays in frame. */
    .mgb-banner--photo .mgb-banner-art { padding: 0; }
    .mgb-banner--photo .mgb-banner-photo {
        height: 340px;
        background-size: cover;
        background-position: center bottom;
    }
    /* Keep the brand icon visible on phones — just smaller and a bit more opaque */
    .mgb-banner-watermark {
        display: block;
        align-self: center;
        font-size: 72px;
        color: rgba(255, 255, 255, 0.35);
        margin: 0;
    }
}

/* ============================================================
   MG RETAIL — 5th FULL-BLEED banner with BCC + Casalux INSIDE
   (left: wordmark + copy | middle: SVG branches | right: child cards)
   ============================================================ */
/* Vertical TREE layout — MG RETAIL on top, branches down, BCC + Casalux below */
.mgb-banner--retail {
    position: relative;                     /* anchor for the ::before overlay */
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 42px 44px 38px;
    /* Real photo background + neutral dark overlay so the white text + gold
       branches stay readable on top of the image. */
    background:
        linear-gradient(rgba(40, 32, 26, 0.62), rgba(40, 32, 26, 0.72)),
        url('../images/mg_retails.png') center center / cover no-repeat,
        #7a6a5d;                            /* fallback if the image fails */
}
/* Keep direct children above the background overlay */
.mgb-banner--retail > * { position: relative; z-index: 1; }
.mgb-banner--retail .mgb-banner-content {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 0;
    align-items: center;
    text-align: center;
}
.mgb-banner--retail .mgb-logo {
    display: inline-block;
    margin-bottom: 14px;
}
/* Gild the MG wordmark so the section title reads as a gold accent
   instead of plain white — same gold family used across the site. */
.mgb-banner--retail .mgb-logo-mark {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #e8cd8a 0%, #c8a96a 50%, #a98648 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);   /* keeps legibility on light spots */
}
.mgb-banner--retail .mgb-logo-sub {
    margin: 8px auto 0;
    color: #e8cd8a;                                /* warm gold to match the mark */
    border-top-color: #c8a96a;                     /* override the white underline */
}
.mgb-banner--retail .mgb-banner-desc {
    margin: 0 auto;
    max-width: 580px;
    text-align: center;
}

/* The tree connector — straight lines: vertical → T → two drops */
.mgb-retail-branches {
    position: static;
    width: 100%;
    max-width: 1100px;
    height: 78px;
    margin: 6px auto 14px;
    flex: 0 0 auto;
    top: auto; right: auto; bottom: auto; left: auto;
    transform: none;
    z-index: auto;
    pointer-events: none;
}
.mgb-retail-branches svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.mgb-retail-branches path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: mgrDraw 0.9s ease-out forwards;
}
.mgb-retail-branches path:nth-of-type(2) { animation-delay: 0.25s; }
.mgb-retail-branches path:nth-of-type(3) { animation-delay: 0.5s; }
.mgb-retail-branches path:nth-of-type(4) { animation-delay: 0.5s; }

/* Children row — BCC + Casalux SIDE BY SIDE under the tree */
.mgb-retail-children {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1100px;
    display: flex;                  /* ← without this, flex-direction does nothing */
    flex-direction: row;
    gap: 24px;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
}
.mgb-retail-children .mgr-child {
    flex: 1 1 0;
    max-width: 540px;
    padding-left: 22px;
    padding-right: 22px;
}
/* New mini-banner child cards (BCC, Casalux) sit as flex items too */
.mgb-retail-children .mgb-banner--child {
    flex: 1 1 0;
    max-width: 540px;
}

/* ─── Mini brand banner (used inside .mgb-retail-children) ────
   Reuses .mgb-banner + .mgb-banner--photo, but smaller wordmark
   and tighter padding so BCC / Casalux fit the narrower column.
   ──────────────────────────────────────────────────────────── */
.mgb-banner--child {
    min-height: 220px;
    border-radius: 6px;             /* subtle rounding distinguishes children from main banners */
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
.mgb-banner--child .mgb-banner-content {
    flex: 1 1 56%;
    padding: 26px 20px 26px 30px;
}
.mgb-banner--child .mgb-banner-art {
    flex: 1 1 44%;
}
.mgb-banner--child .mgb-logo { margin-bottom: 14px; }
.mgb-banner--child .mgb-logo-mark {
    font-size: 30px;                /* smaller — fits BCC / CASALUX neatly */
    font-style: normal;             /* drop italic for the brand wordmark */
    font-weight: 800;
    letter-spacing: 2px;
}
.mgb-banner--child .mgb-logo-sub {
    font-size: 11px;
    letter-spacing: 3px;
    padding-top: 5px;
}
.mgb-banner--child .mgb-banner-desc {
    font-size: 13px;
    line-height: 1.5;
    max-width: 280px;
    margin-bottom: 14px;
}
.mgb-banner--child .mgb-banner-cta {
    font-size: 12px;
    letter-spacing: 1.2px;
}
/* RTL flip for the child banners */
.mgb-banner--child.mgb-banner--rtl .mgb-banner-content {
    padding: 26px 30px 26px 20px;
}

.mgb-banner--child .mgb-logo-img {
    height: auto;
    width: 100%;
    max-width: 240px;
}

/* Reset the inherited gold gradient on child wordmarks back to plain white.
   The .mgb-banner--retail .mgb-logo-mark rule above gilds the parent title
   but cascades into BCC / Casalux too, which we don't want — they should
   read as their own white-on-color brand banners. */
.mgb-banner--retail .mgb-banner--child .mgb-logo-mark {
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-text-fill-color: #ffffff;
            color: #ffffff;
    text-shadow: none;
}
.mgb-banner--retail .mgb-banner--child .mgb-logo-sub {
    margin: 8px 0 0;                                        /* left-aligned, not centered */
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.85);
}

/* RTL — tree stays vertical, just reverse the card order at the bottom */
.mgb-banner--retail.mgb-banner--rtl {
    flex-direction: column;
    align-items: center;
}
.mgb-banner--retail.mgb-banner--rtl .mgb-banner-content { padding: 0; }
.mgb-banner--retail.mgb-banner--rtl .mgb-retail-branches {
    right: auto; left: auto;
    transform: none;
}
.mgb-banner--retail.mgb-banner--rtl .mgb-retail-children {
    flex-direction: row-reverse;
    padding: 0;
}
.mgb-banner--retail.mgb-banner--rtl .mgb-retail-children .mgr-child {
    padding-left: 22px;
    padding-right: 22px;
}

/* Tablet & below — keep the tree, just tighten */
@media (max-width: 991px) {
    .mgb-banner--retail,
    .mgb-banner--retail.mgb-banner--rtl {
        flex-direction: column;
        align-items: center;
        padding: 32px 22px 28px;
        min-height: 0;
    }
    .mgb-banner--retail .mgb-banner-content,
    .mgb-banner--retail.mgb-banner--rtl .mgb-banner-content {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 0;
    }
    .mgb-retail-branches { display: block; height: 60px; }
    .mgb-retail-children,
    .mgb-banner--retail.mgb-banner--rtl .mgb-retail-children {
        flex-direction: row;
        gap: 14px;
        padding: 0;
    }
    .mgb-retail-children .mgr-child {
        flex: 1 1 50%;
        min-height: 0;
        max-width: none;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Mini-banner children: scale down padding + wordmark for tablet */
    .mgb-retail-children .mgb-banner--child {
        flex: 1 1 50%;
        max-width: none;
        min-height: 200px;
    }
    .mgb-banner--child .mgb-banner-content,
    .mgb-banner--child.mgb-banner--rtl .mgb-banner-content {
        padding: 22px 16px 22px 20px;
    }
    .mgb-banner--child .mgb-logo-mark { font-size: 26px; }
    .mgb-banner--child .mgb-banner-desc { font-size: 12px; }
}
@media (max-width: 575px) {
    .mgb-retail-branches { height: 48px; }
    .mgb-retail-children { gap: 10px; }
    /* Keep BCC + Casalux SIDE BY SIDE on phones (don't stack on top).
       Each card splits its own text/photo internally so it stays readable
       even in a narrow half-screen column. */
    .mgb-retail-children,
    .mgb-banner--retail.mgb-banner--rtl .mgb-retail-children {
        flex-direction: row;
        gap: 10px;
    }
    .mgb-retail-children .mgb-banner--child {
        flex: 1 1 50%;
        max-width: none;
        min-height: 0;
        align-self: stretch;                /* force BOTH cards to equal height */
    }
    /* Inside each narrow child card: tighter text + a balanced photo block */
    .mgb-banner--child .mgb-banner-content,
    .mgb-banner--child.mgb-banner--rtl .mgb-banner-content {
        padding: 16px 12px 14px 14px;
        flex: 1 1 auto;                     /* text fills any extra space */
    }
    .mgb-banner--child .mgb-logo { margin-bottom: 10px; }
    .mgb-banner--child .mgb-logo-mark { font-size: 20px; letter-spacing: 1.5px; }
    .mgb-banner--child .mgb-logo-sub  { font-size: 9px; letter-spacing: 2px; padding-top: 4px; }
    .mgb-banner--child .mgb-banner-desc {
        font-size: 11px;
        line-height: 1.4;
        margin-bottom: 10px;
        max-width: none;
    }
    .mgb-banner--child .mgb-banner-cta { font-size: 10px; letter-spacing: 1px; gap: 4px; }
    /* Photo block — IDENTICAL across BCC + Casalux: same width (flex 50%),
       same height (180px fixed), same cover+bottom positioning. */
    .mgb-banner--child .mgb-banner-art {
        flex: 0 0 180px;                    /* photo column is exactly 180px tall — never grows */
    }
    .mgb-banner--child .mgb-banner-photo {
        height: 180px;
        background-size: cover;
        background-position: center bottom;
    }
}

/* ============================================================
   MG RETAIL — parent card centered alone, SVG branches flow
   down into BCC + Casalux sub-brand cards
   ============================================================ */
/* Horizontal tree: MG Retail (left) → BCC + Casalux (right) */
.mgr-tree {
    display: flex;
    align-items: center;
    margin-top: 45px;
}
.mgr-tree-left {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
}
.mgr-tree-branches {
    flex: 0 0 90px;
    align-self: stretch;
    min-height: 160px;
    position: relative;
}
.mgr-tree-branches svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.mgr-tree-branches path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: mgrDraw 1.4s ease-out forwards;
}
.mgr-tree-branches path:nth-of-type(2) { animation-delay: 0.12s; }
.mgr-tree-branches circle {
    opacity: 0;
    animation: mgrFadeIn 0.4s ease-out forwards;
    animation-delay: 1.2s;
}
.mgr-tree-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* The centered MG Retail card uses the normal .mgb-card style + a gold
   "parent" accent so it visually anchors the tree below */
.mg-brands .mgb-card--parent {
    border-top-color: #c8a96a;
    border-top-width: 4px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    pointer-events: none; /* no link, it's just the source of the branches */
}
.mg-brands .mgb-card--parent .mgb-body {
    padding-bottom: 22px;
}

/* SVG branch connector */
@keyframes mgrDraw  { to { stroke-dashoffset: 0; } }
@keyframes mgrFadeIn { to { opacity: 1; } }

/* Sub-brand cards (BCC, Casalux) — rectangular, stacked on the right */
.mgr-tree-right .mgr-child {
    flex: 1;
    min-height: 96px;
}
.mgr-child {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 10px;
    padding: 18px 22px;
    width: 100%;
    text-decoration: none !important;
    color: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-left: 3px solid #c8a96a;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mgr-child:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    color: inherit;
    text-decoration: none;
}
.mgr-child--coming {
    opacity: 0.92;
    border-left-color: #d8d8d8;
}
.mgr-child--coming:hover {
    transform: translateY(-2px);
}
.mgr-child-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fdfaf4 0%, #efe6d3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a6d3b;
    font-size: 24px;
    transition: transform 0.3s ease;
}
.mgr-child:hover .mgr-child-icon {
    transform: scale(1.08);
}
.mgr-child-body { flex: 1; }
.mgr-child-name {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    color: #2c2c2c;
}
.mgr-child-tagline {
    margin: 0 0 8px;
    font-size: 13px;
    color: #6c6c6c;
}
.mgr-child-cta {
    color: #8a6d3b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mgr-child--coming .mgr-child-cta {
    color: #a8a8a8;
    font-style: italic;
    letter-spacing: 1px;
}

/* Tablet/below: stack the tree — MG Retail on top, branches hidden,
   BCC + Casalux side-by-side underneath */
@media (max-width: 991px) {
    .mgr-tree { flex-direction: column; align-items: stretch; }
    .mgr-tree-left { flex: 0 0 auto; max-width: 100%; }
    .mgr-tree-branches { display: none; }
    .mgr-tree-right {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 14px;
        margin-top: 18px;
    }
    .mgr-tree-right .mgr-child { flex: 1 1 50%; min-height: 0; }
}
@media (max-width: 767px) {
    .mgr-child { padding: 14px 16px; }
    .mgr-child-icon { flex: 0 0 48px; width: 48px; height: 48px; font-size: 20px; }
}

/* Phones (<576px): brand cards stack (image on top), and BCC + Casalux
   switch to icon-on-top so the narrow cards stay readable. */
@media (max-width: 575px) {
    .mg-brands .mgb-card--row { flex-direction: column; align-items: stretch; min-height: 0; }
    .mg-brands .mgb-card--row .mgb-media { flex: none; max-width: 100%; width: 100%; height: 140px; }
    .mgr-tree-right { gap: 10px; }
    .mgr-child {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 16px 10px;
        border-left: none;
        border-top: 3px solid #c8a96a;
    }
    .mgr-child--coming { border-top-color: #d8d8d8; }
    .mgr-child-icon { flex: 0 0 44px; width: 44px; height: 44px; font-size: 18px; }
    .mgr-child-body,
    .mgr-child-body.text-right { width: 100%; text-align: center !important; }
    .mgr-child-name { font-size: 15px; }
    .mgr-child-tagline { font-size: 11px; line-height: 1.35; margin-bottom: 6px; }
    .mgr-child-cta { font-size: 10px; letter-spacing: 1px; }
}

/* Mobile tweaks */
@media (max-width: 767px) {
    .mg-brands { padding: 0 0 50px; }
    .mg-brands .mgb-title { font-size: 26px; }
    .mg-brands .mgb-media { height: 120px; }
    .mg-brands .mgb-icon { font-size: 40px; }
}

/* ============================================================
   OFFICIAL PARTNER  (Al Raqi) — premium showcase
   ─────────────────────────────────────────────────────────────
   Layout: centered eyebrow → showcase card (logo | divider | text)
           → closing endorsement quote
   Palette: cream gradient + gold accents (#c8a96a / #8a6d3b)
   Spacing: 8px system  ·  Easing: cubic-bezier(0.2, 0.8, 0.2, 1)
   ============================================================ */
.official-partner {
    position: relative;
    background: linear-gradient(180deg, #fdfaf4 0%, #f4ede0 100%);
    padding: 96px 0 112px;
    border-top: 1px solid rgba(138, 109, 59, 0.08);
    overflow: hidden;
}
/* Subtle marble-veining atmosphere (~4% opacity) */
.official-partner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 60% 50% at 18% 28%, rgba(138, 109, 59, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 82% 72%, rgba(200, 169, 106, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(138, 109, 59, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.official-partner .container { position: relative; z-index: 1; }

/* ─── Eyebrow badge ──────────────────────────────────────────── */
.op-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 64px;
}
.op-eyebrow-rule {
    flex: 0 0 96px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(138, 109, 59, 0.45) 50%, transparent);
}
.op-eyebrow-text {
    color: #8a6d3b;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* ─── Showcase card ──────────────────────────────────────────── */
.op-showcase {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(138, 109, 59, 0.18);
    border-radius: 4px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(138, 109, 59, 0.07);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Animated gold accent strip on top */
.op-showcase::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #c8a96a 25%, #c8a96a 75%, transparent);
    transform: scaleX(0.4);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    opacity: 0.75;
    z-index: 2;
}
.op-showcase:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 24px 56px rgba(138, 109, 59, 0.16);
}
.op-showcase:hover::before {
    transform: scaleX(1);
    opacity: 1;
}

.op-showcase-inner {
    display: flex;
    align-items: stretch;
}

/* Logo column */
.op-showcase-logo {
    flex: 0 0 42%;
    padding: 56px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fdfaf4 0%, #f7f0e2 100%);
}
.op-logo-frame {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No frame — the logo sits directly on the cream column, presenting itself */
    overflow: hidden;
}
.op-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;             /* show the full logo, never crop */
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.op-showcase:hover .op-logo-img {
    transform: scale(1.04);
}

/* Hairline vertical divider */
.op-showcase-divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 32px 0;
    background: linear-gradient(to bottom,
        transparent,
        rgba(138, 109, 59, 0.22) 20%,
        rgba(138, 109, 59, 0.22) 80%,
        transparent);
}

/* Text column */
.op-showcase-text {
    flex: 1;
    padding: 56px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.op-showcase-text--rtl {
    text-align: right;
}
.op-intro {
    color: #8a6d3b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.op-name {
    color: #1f1f1f;
    font-size: 44px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin: 0 0 24px;
}
.op-rule {
    width: 40px;
    height: 2px;
    background: #c8a96a;
    margin: 0 0 24px;
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.op-showcase-text--rtl .op-rule { margin-left: auto; margin-right: 0; }
.op-showcase:hover .op-rule { width: 64px; }
.op-tagline {
    color: #555555;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    max-width: 360px;
}
.op-showcase-text--rtl .op-tagline { margin-left: auto; }

/* ─── Closing endorsement quote ──────────────────────────────── */
.op-endorsement {
    max-width: 720px;
    margin: 64px auto 0;
    padding: 0 16px;
    text-align: center;
    color: #6e6e6e;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
    letter-spacing: 0.3px;
}

/* ─── Distributor credential (Vortex) ────────────────────────
   Refined "credential line" — soft card, quiet typography, and a
   simple gold arrow-icon on the right (no button, no circle) as
   the click affordance. Whole card is the link.
   ─────────────────────────────────────────────────────────── */
.op-credential {
    display: inline-flex;
    align-items: center;
    gap: 56px;               /* more breathing room around logo */
    margin: 48px auto 0;
    padding: 48px 72px;      /* scale padding up with the wider container */
    background: #ffffff;
    border: 1px solid rgba(138, 109, 59, 0.18);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    box-shadow: 0 1px 3px rgba(138, 109, 59, 0.05);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}
/* Center the inline-flex chip inside its centered parent — match Al Raqi showcase width */
.official-partner .op-credential {
    display: flex;
    width: 100%;
    max-width: 1080px;
}
/* Let the text block absorb the free space so content fills the card
   instead of clustering on one side */
.op-credential-body { flex: 1 1 auto; }
/* Subtle gold left-edge accent that fills on hover */
.op-credential::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 100%;
    background: linear-gradient(to bottom, #c8a96a, #8a6d3b);
    transform: scaleY(0.4);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 4px 0 0 4px;
    opacity: 0.7;
}
.op-credential:hover,
.op-credential:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(138, 109, 59, 0.4);
    box-shadow: 0 10px 24px rgba(138, 109, 59, 0.14);
    text-decoration: none;
    color: inherit;
}
.op-credential:hover::after,
.op-credential:focus-visible::after { transform: scaleY(1); opacity: 1; }

/* Wax-seal dot on the left — smaller, less shouty */
.op-credential-seal {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, #d9be86 0%, #c8a96a 45%, #8a6d3b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35),
                0 1px 3px rgba(138, 109, 59, 0.20);
}
.op-credential-seal-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}

/* Logo variant — larger, clean white framed chip that carries the Vortex mark */
.op-credential-seal--logo {
    width: 180px;            /* scaled up with the wider card */
    height: 180px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(138, 109, 59, 0.18);
    padding: 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
                0 2px 6px rgba(138, 109, 59, 0.12);
}
.op-credential-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Text block — refined credential typography */
.op-credential-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    text-align: left;
}
.op-credential-label {
    color: #8a6d3b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 1.35;
}
.op-credential-brand {
    color: #1f1f1f;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
}
.op-credential-category {
    color: #7a7a7a;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.6px;
}

/* ── Plain gold arrow icon — no circle, no background ─────── */
.op-credential-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    color: #8a6d3b;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.3s ease;
}
.op-credential-cta-arrow {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    /* Font stack that reliably contains ↗ (U+2197) as a crisp glyph */
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
                 "DejaVu Sans", "Arial Unicode MS", sans-serif;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.op-credential:hover .op-credential-cta,
.op-credential:focus-visible .op-credential-cta { color: #c8a96a; }
.op-credential:hover .op-credential-cta-arrow,
.op-credential:focus-visible .op-credential-cta-arrow {
    transform: translate(4px, -4px);
}

/* RTL — mirror everything */
.op-credential--rtl { direction: rtl; }
.op-credential--rtl::after { left: auto; right: 0; border-radius: 0 4px 4px 0; }
.op-credential--rtl .op-credential-body {
    align-items: flex-end;
    text-align: right;
}
.op-credential--rtl .op-credential-cta { margin-left: 0; margin-right: 10px; }
.op-credential--rtl:hover .op-credential-cta-icon,
.op-credential--rtl:focus-visible .op-credential-cta-icon {
    transform: translate(-3px, -3px);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet ≤ 991px — keep horizontal card, scale down */
@media (max-width: 991px) {
    .official-partner { padding: 80px 0 96px; }
    .op-eyebrow { margin-bottom: 48px; }
    .op-eyebrow-rule { flex: 0 0 72px; }
    .op-eyebrow-text { font-size: 17px; letter-spacing: 4.5px; }
    .op-showcase-logo { padding: 48px 28px; flex: 0 0 42%; }
    .op-logo-frame { max-width: 300px; padding: 0; }
    .op-showcase-text { padding: 48px 40px; }
    .op-name { font-size: 36px; }
    .op-endorsement { margin-top: 48px; font-size: 14px; }
}

/* Mobile ≤ 767px — stack vertical, center everything */
@media (max-width: 767px) {
    .official-partner { padding: 64px 0 80px; }

    .op-eyebrow { margin-bottom: 40px; gap: 12px; }
    .op-eyebrow-rule { flex: 0 0 48px; }
    .op-eyebrow-text { font-size: 14px; letter-spacing: 3.5px; }

    .op-showcase-inner { flex-direction: column; }

    .op-showcase-logo {
        flex: 0 0 auto;
        padding: 40px 32px 28px;
    }
    .op-logo-frame { max-width: 260px; }

    /* Divider rotates to horizontal between logo and text */
    .op-showcase-divider {
        flex: 0 0 1px;
        width: 64px;
        height: 1px;
        margin: 0 auto;
        background: linear-gradient(to right,
            transparent,
            rgba(138, 109, 59, 0.35),
            transparent);
        align-self: center;
    }

    .op-showcase-text,
    .op-showcase-text--rtl {
        padding: 28px 32px 40px;
        align-items: center;
        text-align: center;
    }
    .op-name { font-size: 32px; }
    .op-rule,
    .op-showcase-text--rtl .op-rule { margin: 0 auto 20px; }
    .op-tagline,
    .op-showcase-text--rtl .op-tagline { margin: 0 auto; }

    .op-endorsement { margin-top: 40px; font-size: 13px; }
}

/* Small phones ≤ 480px — tighter still */
@media (max-width: 480px) {
    .official-partner { padding: 56px 0 64px; }
    .op-name { font-size: 28px; }
    .op-logo-frame { max-width: 220px; padding: 0; }
    .op-showcase-logo { padding: 32px 24px 24px; }
    .op-showcase-text,
    .op-showcase-text--rtl { padding: 24px 24px 32px; }
}

/* Credential chip — responsive */
@media (max-width: 767px) {
    .op-credential {
        margin-top: 32px;
        gap: 16px;
        padding: 16px 18px;
        max-width: calc(100% - 32px);
    }
    /* Kill the gold left-edge accent on mobile — it clashes with the
       stacked/compact layout and reads as a stray line. */
    .op-credential::after,
    .op-credential--rtl::after { display: none; }
    .op-credential-label { font-size: 9.5px; letter-spacing: 2.2px; margin-bottom: 7px; }
    .op-credential-brand { font-size: 20px; letter-spacing: 0.8px; }
    .op-credential-category { font-size: 11px; }
    .op-credential-seal { width: 28px; height: 28px; }
    /* Logo chip (Vortex) must NOT shrink to 28x28 — that hid the image.
       Keep it a proper image chip even on mobile. */
    .op-credential-seal--logo {
        width: 96px;
        height: 96px;
        padding: 10px;
        border-radius: 10px;
    }
    .op-credential-cta-arrow { font-size: 20px; }
}

/* Small phones ≤ 480px — stack vertical, icon centered under text */
@media (max-width: 480px) {
    .op-credential {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 18px 18px;
        text-align: center;
    }
    .op-credential-body {
        align-items: center;
        text-align: center;
    }
    .op-credential-cta { margin: 4px 0 0; }
    .op-credential-brand { font-size: 20px; }
    /* Logo chip on very small phones — a bit smaller but still visible */
    .op-credential-seal--logo {
        width: 88px;
        height: 88px;
        padding: 10px;
    }

    /* RTL small phone — everything centered */
    .op-credential--rtl .op-credential-body {
        align-items: center;
        text-align: center;
    }
    .op-credential--rtl .op-credential-cta { margin: 4px 0 0; }
}

/* ============================================================
   MG FINISHING — sub-brand homepage
   ─────────────────────────────────────────────────────────────
   Structure mirrors MG Food's /home (banner · about · products
   · directors+partners+clients). Same Bootstrap classes, themed
   by scoping under `.mg-finishing`. Rust-orange palette.

   Palette:
     --mgf-primary:        #c06b43   rust
     --mgf-primary-dark:   #a55736
     --mgf-gold:           #c8a96a
     --mgf-cream:          #fdfaf4
     --mgf-warm:           #f7f0e2
     --mgf-graphite:       #1f1f1f
   ============================================================ */
.mg-finishing {
    --mgf-primary: #c06b43;
    --mgf-primary-dark: #a55736;
    --mgf-gold: #c8a96a;
    --mgf-cream: #fdfaf4;
    --mgf-warm: #f7f0e2;
    --mgf-graphite: #1f1f1f;
    --mgf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─── 1. BANNER ─────────────────────────────────────────────────
   Override MG Food's green .mainbanner with a rust gradient + a
   subtle building photo backdrop. No floating product PNGs — the
   MG/FINISHING wordmark inside the banner is the focal point.
   ────────────────────────────────────────────────────────────── */
.mg-finishing .mainbanner.mainbanner--finishing {
    background:
        linear-gradient(135deg, rgba(192, 107, 67, 0.92) 0%, rgba(120, 60, 40, 0.88) 100%),
        url('../images/mg-building.png') center center / cover no-repeat,
        #c06b43;
    height: 600px;
    position: relative;
    overflow: hidden;
}
/* Subtle warm glow + edge vignette for depth */
.mg-finishing .mainbanner.mainbanner--finishing::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 25% 35%, rgba(255, 220, 180, 0.10), transparent 60%),
        radial-gradient(ellipse 80% 60% at 80% 90%, rgba(0, 0, 0, 0.25), transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.mg-finishing .mainbanner.mainbanner--finishing .container-fluid {
    position: relative;
    z-index: 2;
}

/* Wordmark — reuses the .mgb-logo* classes from the brand banners.
   Inside the Finishing banner we scale up and place above the headline. */
.mg-finishing .mgb-logo--banner {
    margin: 0 0 28px;
    padding-left: 35px;
}
.mg-finishing .mgb-logo--banner .mgb-logo-mark {
    color: #ffffff;
    font-size: 72px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.mg-finishing .mgb-logo--banner .mgb-logo-sub {
    color: var(--mgf-gold);
    border-top-color: var(--mgf-gold);
    font-size: 18px;
    letter-spacing: 6px;
    margin-top: 12px;
    padding-top: 10px;
}
/* RTL — flip wordmark padding */
.mg-finishing[dir="rtl"] .mgb-logo--banner,
html[dir="rtl"] .mg-finishing .mgb-logo--banner {
    padding-left: 0;
    padding-right: 35px;
}
.mg-finishing[dir="rtl"] .mgb-logo--banner .mgb-logo-sub,
html[dir="rtl"] .mg-finishing .mgb-logo--banner .mgb-logo-sub {
    margin-left: auto;
    margin-right: 0;
}

/* Headline */
.mg-finishing .mainbanner.mainbanner--finishing h2 {
    color: #ffffff;
    font-weight: 300;
}
.mg-finishing .mainbanner.mainbanner--finishing h2 b {
    color: var(--mgf-gold);
    font-weight: 600;
}

/* ─── 2. ABOUT ──────────────────────────────────────────────────
   Override MG Food's wheat-field aboutbg with a clean cream block.
   Same internal layout (centered h2 + p + arrow link).
   ────────────────────────────────────────────────────────────── */
.mg-finishing .about.about--finishing {
    background: linear-gradient(180deg, #ffffff 0%, var(--mgf-cream) 100%);
    background-image: none;
    padding-top: 110px;
    padding-bottom: 110px;
    position: relative;
}
/* Subtle rust accent rule above the heading */
.mg-finishing .about.about--finishing::before {
    content: "";
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--mgf-primary);
}
.mg-finishing .about.about--finishing .about-block h2 {
    color: var(--mgf-graphite);
    font-size: 48px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}
.mg-finishing .about.about--finishing .about-block p {
    color: #555555;
    font-size: 18px;
    line-height: 1.7;
    max-width: 760px;
    margin: 30px auto 20px;
    padding: 0 16px;
}
/* "View Details" link — rust on hover (replaces green) */
.mg-finishing .about.about--finishing .about-block a,
.mg-finishing .about.about--finishing .about-block:hover a:hover {
    color: var(--mgf-primary);
}

/* ─── 3. OUR SERVICES (products) ────────────────────────────────
   Override MG Food's leaf-decorated bg + green hover.
   ────────────────────────────────────────────────────────────── */
.mg-finishing .ourproducts.ourproducts--finishing {
    background: var(--mgf-warm);
    background-image: none;
}
/* Hide MG Food's leaf decorations — they're food-specific */
.mg-finishing .ourproducts.ourproducts--finishing .pro-leaf1,
.mg-finishing .ourproducts.ourproducts--finishing .pro-leaf2 {
    display: none;
}
.mg-finishing .ourproducts.ourproducts--finishing h2.sectitle {
    color: var(--mgf-graphite);
    position: relative;
    padding-bottom: 90px;
}
.mg-finishing .ourproducts.ourproducts--finishing h2.sectitle b {
    color: var(--mgf-primary);
}
.mg-finishing .ourproducts.ourproducts--finishing h2.sectitle::after {
    content: "";
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--mgf-primary);
}
/* Service cards — give them a subtle white panel for depth on warm bg */
.mg-finishing .ourproducts.ourproducts--finishing .opblock {
    background: #ffffff;
    padding: 32px 28px 28px;
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s var(--mgf-ease), box-shadow 0.4s var(--mgf-ease);
    height: 100%;
}
.mg-finishing .ourproducts.ourproducts--finishing .opblock:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(192, 107, 67, 0.14);
}
.mg-finishing .ourproducts.ourproducts--finishing .opblock h2 {
    color: var(--mgf-graphite);
    font-size: 28px;
    margin-top: 18px;
}
.mg-finishing .ourproducts.ourproducts--finishing .opblock p {
    color: #6e6e6e;
}
.mg-finishing .ourproducts.ourproducts--finishing .opblock a,
.mg-finishing .ourproducts.ourproducts--finishing .opblock:hover a {
    color: var(--mgf-primary);
}

/* ─── 4. DIRECTORS + PARTNERS + CLIENTS ─────────────────────────
   Override MG Food's directorsbg + green hover.
   ────────────────────────────────────────────────────────────── */
.mg-finishing .directors.directors--finishing {
    background: #ffffff;
    background-image: none;
    padding-top: 100px;
    padding-bottom: 100px;
}
.mg-finishing .directors.directors--finishing .dirtitle {
    color: var(--mgf-graphite);
    position: relative;
    padding-bottom: 90px;
}
.mg-finishing .directors.directors--finishing .dirtitle::after {
    content: "";
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--mgf-primary);
}
.mg-finishing .directors.directors--finishing .dirblock {
    text-align: center;
}
.mg-finishing .directors.directors--finishing .dirblock h3 {
    color: var(--mgf-graphite);
    font-weight: 600;
}
.mg-finishing .directors.directors--finishing .dirblock h3 span {
    color: #888888;
}
/* Partner / Client titles + hover — rust instead of green */
.mg-finishing .directors.directors--finishing .dirbottomdiv fieldset .opblock-title {
    background-color: #ffffff;
    color: var(--mgf-graphite);
}
.mg-finishing .directors.directors--finishing .dirbottomdiv fieldset .opblock-title:hover {
    color: var(--mgf-primary);
}
/* Cream-tinted fieldset borders so they read on a white bg */
.mg-finishing .directors.directors--finishing .dirbottomdiv .opartners fieldset,
.mg-finishing .directors.directors--finishing .dirbottomdiv .oclients fieldset {
    border-color: rgba(192, 107, 67, 0.18);
}

/* ─── RESPONSIVE — Finishing banner only (other sections inherit MG Food's responsive rules) ── */
@media (max-width: 991px) {
    .mg-finishing .mainbanner.mainbanner--finishing { height: 520px; }
    .mg-finishing .mgb-logo--banner .mgb-logo-mark { font-size: 58px; }
    .mg-finishing .mgb-logo--banner .mgb-logo-sub  { font-size: 16px; letter-spacing: 5px; }
    .mg-finishing .about.about--finishing .about-block h2 { font-size: 40px; }
    .mg-finishing .ourproducts.ourproducts--finishing .opblock h2 { font-size: 24px; }
}
@media (max-width: 767px) {
    .mg-finishing .mainbanner.mainbanner--finishing { height: 460px; }
    .mg-finishing .mgb-logo--banner { margin-bottom: 22px; padding-left: 20px; }
    .mg-finishing .mgb-logo--banner .mgb-logo-mark { font-size: 46px; }
    .mg-finishing .mgb-logo--banner .mgb-logo-sub  { font-size: 14px; letter-spacing: 4px; padding-top: 8px; margin-top: 10px; }
    .mg-finishing .about.about--finishing { padding-top: 80px; padding-bottom: 80px; }
    .mg-finishing .about.about--finishing::before { top: 40px; }
    .mg-finishing .about.about--finishing .about-block h2 { font-size: 30px; }
    .mg-finishing .about.about--finishing .about-block p  { font-size: 16px; line-height: 1.6; }
    .mg-finishing .ourproducts.ourproducts--finishing .opblock { margin-bottom: 24px; }
}
@media (max-width: 480px) {
    .mg-finishing .mainbanner.mainbanner--finishing { height: 420px; }
    .mg-finishing .mgb-logo--banner .mgb-logo-mark { font-size: 38px; }
    .mg-finishing .mgb-logo--banner .mgb-logo-sub  { font-size: 12px; letter-spacing: 3px; }
}


/* ============================================================
   MG FINISHING — INNER PAGES  (/finishing/references, etc.)
   ─────────────────────────────────────────────────────────────
   These styles are scoped under `.mg-finishing-page` (NOT the
   homepage scope above). The inner-page banner has a rust hero
   strip at the top, then content blocks below.
   ============================================================ */
.mg-finishing-page {
    --mgf-primary: #c06b43;
    --mgf-primary-dark: #a55736;
    --mgf-cream: #fdfaf4;
    --mgf-warm: #f7f0e2;
    --mgf-graphite: #1f1f1f;
    --mgf-text: #555555;
    --mgf-muted: #888888;
    --mgf-gold: #c8a96a;
    --mgf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    color: var(--mgf-text);
}
.mg-finishing-page.rtl { direction: rtl; text-align: right; }

/* Shared section header (centered variant) */
.mg-finishing-page .mgf-section-header { margin-bottom: 48px; }
.mg-finishing-page .mgf-section-header--center {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.mg-finishing-page .mgf-section-eyebrow {
    display: inline-block;
    color: var(--mgf-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.mg-finishing-page .mgf-section-title {
    color: var(--mgf-graphite);
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}
.mgf-section-rule {
    width: 56px;
    height: 2px;
    background: var(--mgf-primary);
    margin: 18px auto 0;
}

/* Buttons */
.mg-finishing-page .mgf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    transition: all 0.4s var(--mgf-ease);
    border: 2px solid transparent;
    cursor: pointer;
}
.mg-finishing-page .mgf-btn i { transition: transform 0.3s var(--mgf-ease); }
.mg-finishing-page .mgf-btn:hover i { transform: translateX(4px); }
.mg-finishing-page .mgf-btn--white {
    background: #ffffff;
    color: var(--mgf-primary);
    border-color: #ffffff;
}
.mg-finishing-page .mgf-btn--white:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.mg-finishing-page .mgf-btn--ghost {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}
.mg-finishing-page .mgf-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

/* Inner-page banner (rust strip with wordmark + page title + crumb) */
.mgf-inner-banner {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
}
.mgf-inner-banner-bg {
    position: absolute; inset: 0;
    background-image: url('../images/mg-building.png');
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    z-index: 0;
}
.mgf-inner-banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(165, 87, 54, 0.92) 0%, rgba(192, 107, 67, 0.85) 50%, rgba(165, 87, 54, 0.92) 100%);
    z-index: 1;
}
.mgf-inner-banner-inner {
    position: relative;
    z-index: 2;
    padding: 72px 0 64px;
}
.mgf-inner-banner-content { max-width: 760px; }
.mgf-inner-banner-title {
    color: #ffffff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 18px;
}

/* Inner-page wordmark (smaller variant of homepage wordmark) */
.mgf-hero-wordmark {
    display: inline-block;
    margin-bottom: 22px;
    line-height: 1;
}
.mgf-hero-wordmark-mark {
    display: block;
    color: #ffffff;
    font-size: 48px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.mgf-hero-wordmark-sub {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 2px solid var(--mgf-gold);
    color: var(--mgf-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* Breadcrumb */
.mgf-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.mgf-crumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.3s ease; }
.mgf-crumb a:hover { color: var(--mgf-gold); }
.mgf-crumb-sep     { color: var(--mgf-gold); opacity: 0.75; }
.mgf-crumb-current { color: #ffffff; opacity: 0.7; }

/* References/Partners/Clients grid (used by /finishing/references) */
.mgf-refpage-block {
    padding: 96px 0;
    background: #ffffff;
}
.mgf-refpage-block--alt {
    background: var(--mgf-cream);
    border-top: 1px solid rgba(192, 107, 67, 0.08);
    border-bottom: 1px solid rgba(192, 107, 67, 0.08);
}
.mgf-refpage-grid { margin: 0 -10px; justify-content: center; }
.mgf-refpage-cell { padding: 0 10px; margin-bottom: 24px; display: flex; }
.mgf-refpage-card {
    width: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid rgba(192, 107, 67, 0.12);
    border-radius: 4px;
    transition: transform 0.4s var(--mgf-ease), box-shadow 0.4s var(--mgf-ease), border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}
.mgf-refpage-card::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--mgf-gold);
    transition: width 0.4s var(--mgf-ease);
}
.mgf-refpage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(192, 107, 67, 0.14);
    border-color: rgba(192, 107, 67, 0.28);
}
.mgf-refpage-card:hover::before { width: 100%; }
.mgf-refpage-logo-img {
    max-height: 90px;
    max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.4s ease, opacity 0.4s ease;
}
.mgf-refpage-card:hover .mgf-refpage-logo-img {
    filter: grayscale(0%);
    opacity: 1;
}
.mgf-refpage-card-fallback {
    color: var(--mgf-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-align: center;
}
.mg-finishing-page.rtl .mgf-refpage-card::before { left: auto; right: 0; }

/* Contact CTA (used at the bottom of every inner page) */
.mgf-cta {
    padding: 96px 0;
    background: linear-gradient(135deg, var(--mgf-primary) 0%, var(--mgf-primary-dark) 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.mgf-cta::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 50% 40% at 20% 20%, rgba(255, 255, 255, 0.08), transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255, 255, 255, 0.06), transparent 60%);
    pointer-events: none;
}
.mgf-cta > .container { position: relative; z-index: 1; }
.mgf-cta-title {
    color: #ffffff;
    font-size: 44px;
    font-weight: 200;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}
.mgf-cta-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 540px;
}
.mgf-cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ─── Wrapper mode: hide the corporate `.inner-banner` when a corporate
   view (about.php, contact-us.php, news.php, products.php, references.php)
   is included INSIDE `.mg-finishing-page`. We already emitted our own
   rust-themed `.mgf-inner-banner`, so hiding the corporate one prevents
   a double banner. Corporate pages viewed directly are unaffected. */
.mg-finishing-page .inner-banner {
    display: none !important;
}

/* Re-tint the corporate section titles (used by about/products/news) from
   green/black to the Finishing rust when they appear inside our wrapper. */
.mg-finishing-page .sectiontitle,
.mg-finishing-page .page-title {
    color: var(--mgf-graphite);
}
.mg-finishing-page .sectiontitle::before,
.mg-finishing-page .sectiontitle::after,
.mg-finishing-page .page-title::before,
.mg-finishing-page .page-title::after {
    background: var(--mgf-primary);
}
/* Corporate link accents (green → rust) */
.mg-finishing-page a { color: var(--mgf-primary); }
.mg-finishing-page a:hover { color: var(--mgf-primary-dark); }
/* Buttons on corporate forms (Contact, Product Enquiry) — rust primary */
.mg-finishing-page .btn-mgnav,
.mg-finishing-page .btn-submit,
.mg-finishing-page button[type="submit"],
.mg-finishing-page input[type="submit"] {
    background-color: var(--mgf-primary) !important;
    border-color: var(--mgf-primary) !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.mg-finishing-page .btn-mgnav:hover,
.mg-finishing-page .btn-submit:hover,
.mg-finishing-page button[type="submit"]:hover,
.mg-finishing-page input[type="submit"]:hover {
    background-color: var(--mgf-primary-dark) !important;
    border-color: var(--mgf-primary-dark) !important;
}
/* Corporate "opblock-title" clickable header (partner/client titles) */
.mg-finishing-page .opblock-title:hover { color: var(--mgf-primary) !important; }

/* Responsive — inner pages */
@media (max-width: 991px) {
    .mgf-inner-banner { min-height: 320px; }
    .mgf-inner-banner-inner { padding: 60px 0 52px; }
    .mgf-inner-banner-title { font-size: 38px; }
    .mgf-refpage-block { padding: 72px 0; }
    .mg-finishing-page .mgf-section-title { font-size: 32px; }
    .mgf-cta { padding: 72px 0; }
    .mgf-cta-title { font-size: 34px; }
}
@media (max-width: 767px) {
    .mgf-inner-banner { min-height: 280px; }
    .mgf-inner-banner-inner { padding: 48px 0 40px; }
    .mgf-inner-banner-title { font-size: 30px; }
    .mgf-hero-wordmark-mark { font-size: 38px; }
    .mgf-hero-wordmark-sub  { font-size: 12px; letter-spacing: 4px; }
    .mgf-crumb { font-size: 11px; letter-spacing: 1.2px; gap: 8px; }
    .mgf-refpage-block { padding: 56px 0; }
    .mgf-refpage-card { min-height: 110px; padding: 18px 16px; }
    .mgf-refpage-logo-img { max-height: 70px; }
    .mgf-cta { padding: 56px 0; }
    .mgf-cta-title { font-size: 28px; }
    .mgf-cta-actions { flex-direction: column; align-items: stretch; }
    .mgf-cta-actions .mgf-btn { justify-content: center; }
}

/* ============================================================
   MG FINISHING — NAVBAR (header) overrides
   ─────────────────────────────────────────────────────────────
   Applied whenever the visitor is anywhere under /finishing.
   header.php adds the `.navbar--finishing` class to the <nav>
   AND swaps the logo image for an inline MG/FINISHING wordmark.

   Two things change vs. the default header:
     1. Menu hover / active pill colour: green (#76870c) → rust
     2. Language switcher button hover: green → rust
   The wordmark itself uses .navbar-brand--wordmark styles below.

   Add another brand later (e.g. .navbar--distribution) by
   duplicating this block and swapping the colour values.
   ============================================================ */

/* Hover + active pill — rust on Finishing pages */
.navbar.navbar-dark.navbar--finishing .navbar-nav .active > .nav-link,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link.active,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link.show,
.navbar.navbar-dark.navbar--finishing .navbar-nav .show > .nav-link,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link:focus,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: #c06b43;
    border-radius: 50px;
    transition: background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Language switcher "ENG / ARB" pill — also rust on hover */
.navbar--finishing .btn-mgnav:hover,
.navbar--finishing .btn-mgnav:focus,
.navbar--finishing .btn-mgnav:hover li > span {
    background-color: #c06b43;
    border-color: #c06b43 !important;
    color: #ffffff;
}

/* ─── Wordmark brand (replaces <img> logo on Finishing pages) ─── */
.navbar-brand--wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: #ffffff !important;
    line-height: 1;
    padding: 0 5px;
}
.navbar-brand--wordmark:hover { color: #ffffff !important; text-decoration: none !important; }

/* Mark = big italic "MG" — slightly smaller than the in-page hero wordmark
   so it fits comfortably in the navbar without pushing the menu down. */
.navbar-brand--wordmark .navbar-wordmark-mark {
    display: block;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
/* Sub = gold "FINISHING" — separated by the gold rule on top */
.navbar-brand--wordmark .navbar-wordmark-sub {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1.5px solid #c8a96a;
    color: #c8a96a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

/* Desktop variant (.navbar-brand-two) inherits the centered MG Food top
   padding (115px) so the wordmark drops into the same visual position as
   the regular logo image — keeps the layout stable across brands. */
.navbar-brand-two.navbar-brand--wordmark {
    margin-top: 115px;
    padding-left: 5px;
    padding-right: 5px;
}
.navbar-brand-two.navbar-brand--wordmark .navbar-wordmark-mark { font-size: 56px; }
.navbar-brand-two.navbar-brand--wordmark .navbar-wordmark-sub  {
    margin-top: 10px;
    padding-top: 8px;
    border-top-width: 2px;
    font-size: 13px;
    letter-spacing: 5px;
}

/* Mobile variant (.navbar-brand-one) is left-aligned, smaller */
.navbar-brand-one.navbar-brand--wordmark {
    padding-left: 20px;
    align-items: flex-start;
}
.navbar-brand-one.navbar-brand--wordmark .navbar-wordmark-mark { font-size: 26px; }
.navbar-brand-one.navbar-brand--wordmark .navbar-wordmark-sub  { font-size: 9px; letter-spacing: 3px; }

/* RTL — align mobile wordmark to the right */
html[dir="rtl"] .navbar-brand-one.navbar-brand--wordmark,
[dir="rtl"] .navbar-brand-one.navbar-brand--wordmark {
    padding-left: 0;
    padding-right: 20px;
    align-items: flex-end;
}

/* Responsive — scale the desktop wordmark down on smaller screens
   to match how the .navbar-brand-two img is treated. */
@media (max-width: 1199px) {
    .navbar-brand-two.navbar-brand--wordmark .navbar-wordmark-mark { font-size: 48px; }
    .navbar-brand-two.navbar-brand--wordmark .navbar-wordmark-sub  { font-size: 12px; letter-spacing: 4px; }
}


/* ═══════════════════════════════════════════════════════════════════
   MG FINISHING — COMPANY PROFILE  (5-section homepage)
   ────────────────────────────────────────────────────────────────
   Sections: HERO · FOUNDERS · VISION+MISSION · CORE VALUES · PROCESS
   Palette:  inherited from `.mg-finishing` custom-properties
             --mgf-primary #c06b43 · --mgf-gold #c8a96a
             --mgf-cream #fdfaf4  · --mgf-warm #f7f0e2
             --mgf-graphite #1f1f1f
   Motion:   --mgf-ease  (already defined on .mg-finishing)
   =================================================================== */

/* ── Section shell ─────────────────────────────────────────── */
.mg-finishing .mgf-section {
    position: relative;
    padding: 96px 0;
    background: #ffffff;
}
.mg-finishing .mgf-section--alt {
    background: var(--mgf-cream);
}

.mg-finishing .mgf-section-head {
    max-width: 720px;
    margin: 0 0 56px;
}
.mg-finishing .mgf-section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.mg-finishing .mgf-section-kicker {
    display: inline-block;
    color: var(--mgf-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.mg-finishing .mgf-section-title {
    color: var(--mgf-graphite);
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.15;
    margin: 0 0 20px;
}
.mg-finishing .mgf-section-title b,
.mg-finishing .mgf-section-title strong {
    font-weight: 600;
}
.mg-finishing .mgf-section-rule {
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--mgf-primary), var(--mgf-gold));
    border-radius: 2px;
}
.mg-finishing .mgf-section-head--center .mgf-section-rule {
    margin: 0 auto;
}

/* ── 1. HERO — Company Profile cover ─────────────────────── */
.mg-finishing .mgf-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 100px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #2a1a12 0%, #4a2a1a 50%, #6b3a24 100%);
    overflow: hidden;
    isolation: isolate;
}
.mg-finishing .mgf-hero::before {
    /* Subtle radial glow — adds depth without a photo */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 30% 30%, rgba(192, 107, 67, 0.30), transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 80%, rgba(200, 169, 106, 0.20), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.mg-finishing .mgf-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.02) 0 2px,
            transparent 2px 40px
        );
    pointer-events: none;
    z-index: -1;
}
.mg-finishing .mgf-hero-inner {
    text-align: center;
    max-width: 860px;
}
.mg-finishing .mgf-hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}
.mg-finishing .mgf-hero-eyebrow-rule {
    flex: 0 0 72px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--mgf-gold) 50%, transparent);
}
.mg-finishing .mgf-hero-eyebrow-text {
    color: var(--mgf-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
}
.mg-finishing .mgf-hero-wordmark {
    display: inline-block;
    margin: 0 auto 40px;
    text-align: center;
    color: #ffffff;
}
.mg-finishing .mgf-hero-wordmark .mgb-logo-mark { font-size: 88px; }
.mg-finishing .mgf-hero-wordmark .mgb-logo-sub {
    margin: 12px auto 0;
    padding-top: 8px;
    border-top-color: var(--mgf-gold);
    font-size: 15px;
    letter-spacing: 8px;
}
.mg-finishing .mgf-hero-title {
    font-size: 52px;
    font-weight: 200;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: 0.5px;
}
.mg-finishing .mgf-hero-title b {
    font-weight: 600;
    color: var(--mgf-gold);
}
.mg-finishing .mgf-hero-sub {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
    margin: 0 auto 48px;
}
.mg-finishing .mgf-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.4s var(--mgf-ease),
                border-color 0.4s ease,
                background 0.4s ease;
    animation: mgfBob 2.4s ease-in-out infinite;
}
.mg-finishing .mgf-hero-cta:hover,
.mg-finishing .mgf-hero-cta:focus-visible {
    color: #ffffff;
    border-color: var(--mgf-gold);
    background: rgba(200, 169, 106, 0.15);
    transform: translateY(2px);
}
@keyframes mgfBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ── 2. FOUNDERS & VISION ────────────────────────────────── */
.mg-finishing .mgf-founder-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mg-finishing .mgf-founder {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid rgba(192, 107, 67, 0.15);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(31, 31, 31, 0.04);
    transition: transform 0.4s var(--mgf-ease),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}
.mg-finishing .mgf-founder:hover {
    transform: translateY(-3px);
    border-color: var(--mgf-primary);
    box-shadow: 0 12px 24px rgba(192, 107, 67, 0.14);
}
.mg-finishing .mgf-founder-photo {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mgf-warm);
    border: 2px solid var(--mgf-gold);
}
.mg-finishing .mgf-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mg-finishing .mgf-founder-body { flex: 1; }
.mg-finishing .mgf-founder-name {
    color: var(--mgf-graphite);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.2;
}
.mg-finishing .mgf-founder-role {
    display: inline-block;
    color: var(--mgf-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.mg-finishing .mgf-founders-copy {
    color: #444;
    font-size: 16px;
    line-height: 1.75;
    padding-left: 20px;
    border-left: 3px solid var(--mgf-gold);
}
.mg-finishing[dir="rtl"] .mgf-founders-copy,
[dir="rtl"] .mg-finishing .mgf-founders-copy {
    padding-left: 0;
    padding-right: 20px;
    border-left: none;
    border-right: 3px solid var(--mgf-gold);
}

/* ── 3. VISION & MISSION ─────────────────────────────────── */
.mg-finishing .mgf-vm-grid { row-gap: 24px; }
.mg-finishing .mgf-vm-card {
    height: 100%;
    padding: 40px 32px;
    background: #ffffff;
    border: 1px solid rgba(192, 107, 67, 0.18);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s var(--mgf-ease),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}
.mg-finishing .mgf-vm-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--mgf-primary), var(--mgf-gold));
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: transform 0.5s var(--mgf-ease);
    z-index: 1;
}
.mg-finishing .mgf-vm-card:hover {
    transform: translateY(-4px);
    border-color: var(--mgf-primary);
    box-shadow: 0 20px 40px rgba(192, 107, 67, 0.12);
}
.mg-finishing .mgf-vm-card:hover::before { transform: scaleX(1); }
.mg-finishing .mgf-vm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mgf-warm), var(--mgf-cream));
    color: var(--mgf-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8),
                0 2px 6px rgba(192, 107, 67, 0.12);
}
.mg-finishing .mgf-vm-title {
    color: var(--mgf-graphite);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
}
.mg-finishing .mgf-vm-body {
    color: #555;
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}

/* ── 4. CORE VALUES ──────────────────────────────────────── */
.mg-finishing .mgf-values-grid { row-gap: 24px; }
.mg-finishing .mgf-value-card {
    position: relative;
    height: 100%;
    padding: 36px 28px 28px;
    background: #ffffff;
    border: 1px solid rgba(31, 31, 31, 0.08);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.4s var(--mgf-ease),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}
.mg-finishing .mgf-value-card:hover {
    transform: translateY(-4px);
    border-color: var(--mgf-primary);
    box-shadow: 0 16px 32px rgba(31, 31, 31, 0.08);
}
.mg-finishing .mgf-value-number {
    position: absolute;
    top: 12px; right: 16px;
    font-size: 44px;
    font-weight: 800;
    color: var(--mgf-warm);
    letter-spacing: -1px;
    line-height: 1;
    z-index: 0;
    transition: color 0.4s ease;
}
.mg-finishing .mgf-value-card:hover .mgf-value-number {
    color: rgba(200, 169, 106, 0.35);
}
.mg-finishing .mgf-value-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mgf-primary), var(--mgf-gold));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 10px rgba(192, 107, 67, 0.25);
}
.mg-finishing .mgf-value-title {
    color: var(--mgf-graphite);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
}
.mg-finishing .mgf-value-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ── 5. OUR WORKING PROCESS ──────────────────────────────── */
.mg-finishing .mgf-process-track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    counter-reset: mgfProcess;
    position: relative;
}
/* Horizontal connector line behind the nodes (desktop) */
.mg-finishing .mgf-process-track::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 16.6%;
    right: 16.6%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--mgf-gold) 0 8px,
        transparent 8px 16px
    );
    z-index: 0;
}
.mg-finishing .mgf-process-step {
    position: relative;
    text-align: center;
    padding: 0 8px;
    z-index: 1;
}
.mg-finishing .mgf-process-node {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--mgf-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mgf-primary);
    font-size: 28px;
    box-shadow: 0 6px 16px rgba(192, 107, 67, 0.14);
    transition: transform 0.4s var(--mgf-ease),
                background 0.4s ease,
                color 0.4s ease,
                box-shadow 0.4s ease;
}
.mg-finishing .mgf-process-step:hover .mgf-process-node {
    background: linear-gradient(135deg, var(--mgf-primary), var(--mgf-gold));
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 28px rgba(192, 107, 67, 0.28);
}
.mg-finishing .mgf-process-num {
    position: absolute;
    top: -8px; right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mgf-gold);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(138, 109, 59, 0.3);
}
.mg-finishing .mgf-process-title {
    color: var(--mgf-graphite);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0 0 10px;
}
.mg-finishing .mgf-process-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   =================================================================== */
@media (max-width: 991px) {
    .mg-finishing .mgf-section { padding: 72px 0; }
    .mg-finishing .mgf-section-head { margin-bottom: 44px; }
    .mg-finishing .mgf-section-title { font-size: 32px; }

    .mg-finishing .mgf-hero { min-height: 80vh; padding: 100px 0 80px; }
    .mg-finishing .mgf-hero-wordmark .mgb-logo-mark { font-size: 68px; }
    .mg-finishing .mgf-hero-title { font-size: 40px; }
    .mg-finishing .mgf-hero-sub { font-size: 15px; }

    /* Founders paragraph moves below cards on tablet */
    .mg-finishing .mgf-founders-copy {
        margin-top: 32px;
        padding-left: 16px;
    }

    /* Process — 2 columns, hide the horizontal dashed rail */
    .mg-finishing .mgf-process-track {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }
    .mg-finishing .mgf-process-track::before { display: none; }
}

@media (max-width: 575px) {
    .mg-finishing .mgf-section { padding: 56px 0; }
    .mg-finishing .mgf-section-title { font-size: 26px; }
    .mg-finishing .mgf-section-kicker { font-size: 11px; letter-spacing: 2.4px; }

    .mg-finishing .mgf-hero { min-height: 70vh; padding: 80px 0 64px; }
    .mg-finishing .mgf-hero-eyebrow { margin-bottom: 32px; gap: 10px; }
    .mg-finishing .mgf-hero-eyebrow-rule { flex: 0 0 40px; }
    .mg-finishing .mgf-hero-eyebrow-text { font-size: 11px; letter-spacing: 4px; }
    .mg-finishing .mgf-hero-wordmark { margin-bottom: 28px; }
    .mg-finishing .mgf-hero-wordmark .mgb-logo-mark { font-size: 52px; }
    .mg-finishing .mgf-hero-wordmark .mgb-logo-sub  { font-size: 12px; letter-spacing: 5px; }
    .mg-finishing .mgf-hero-title { font-size: 28px; }
    .mg-finishing .mgf-hero-sub   { font-size: 14px; margin-bottom: 32px; }

    .mg-finishing .mgf-founder { padding: 14px; gap: 14px; }
    .mg-finishing .mgf-founder-photo { width: 72px; height: 72px; }
    .mg-finishing .mgf-founder-name  { font-size: 16px; }
    .mg-finishing .mgf-founder-role  { font-size: 11px; letter-spacing: 1.2px; }

    .mg-finishing .mgf-vm-card { padding: 32px 24px; }
    .mg-finishing .mgf-vm-icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 16px; }
    .mg-finishing .mgf-vm-title { font-size: 20px; }
    .mg-finishing .mgf-vm-body  { font-size: 14px; }

    .mg-finishing .mgf-value-card   { padding: 28px 22px 22px; }
    .mg-finishing .mgf-value-number { font-size: 36px; }
    .mg-finishing .mgf-value-icon   { width: 44px; height: 44px; font-size: 18px; }

    /* Process — 1 column */
    .mg-finishing .mgf-process-track { grid-template-columns: 1fr; row-gap: 32px; }
    .mg-finishing .mgf-process-node  { width: 72px; height: 72px; font-size: 24px; }
}



/* ═══════════════════════════════════════════════════════════════════
   MG DISTRIBUTION — sub-brand (teal theme)
   ────────────────────────────────────────────────────────────────
   Mirrors the .mg-finishing / .mg-finishing-page / navbar--finishing
   blocks above one-for-one, re-scoped under `.mg-distribution` and
   `.mg-distribution-page`, and swaps the rust palette for a teal one.

   Palette:
     --mgd-primary:      #4f7d8a   teal
     --mgd-primary-dark: #3a5f6a
     --mgd-gold:         #c8a96a   shared gold accent
     --mgd-cream:        #f5f9fb
     --mgd-warm:         #e6eef2
     --mgd-graphite:     #1f1f1f
   =================================================================== */
.mg-distribution,
.mg-distribution-page {
    --mgd-primary:      #4f7d8a;
    --mgd-primary-dark: #3a5f6a;
    --mgd-gold:         #c8a96a;
    --mgd-cream:        #f5f9fb;
    --mgd-warm:         #e6eef2;
    --mgd-graphite:     #1f1f1f;
    --mgd-ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mg-distribution-page { color: #555555; }
.mg-distribution-page.rtl { direction: rtl; text-align: right; }

/* ── Section shell ─────────────────────────────────────────── */
.mg-distribution .mgd-section {
    position: relative;
    padding: 96px 0;
    background: #ffffff;
}
.mg-distribution .mgd-section--alt { background: var(--mgd-cream); }

.mg-distribution .mgd-section-head { max-width: 720px; margin: 0 0 56px; }
.mg-distribution .mgd-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.mg-distribution .mgd-section-kicker,
.mg-distribution-page .mgd-section-eyebrow {
    display: inline-block;
    color: var(--mgd-primary);
    font-size: 12px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px;
}
.mg-distribution-page .mgd-section-eyebrow { font-weight: 700; letter-spacing: 4px; margin-bottom: 12px; }
.mg-distribution .mgd-section-title,
.mg-distribution-page .mgd-section-title {
    color: var(--mgd-graphite);
    font-size: 40px; font-weight: 300;
    letter-spacing: 0.5px; line-height: 1.15;
    margin: 0 0 20px;
}
.mg-distribution .mgd-section-title b,
.mg-distribution .mgd-section-title strong { font-weight: 600; }
.mg-distribution .mgd-section-rule,
.mg-distribution-page .mgd-section-rule {
    width: 56px; height: 3px;
    background: linear-gradient(90deg, var(--mgd-primary), var(--mgd-gold));
    border-radius: 2px;
}
.mg-distribution .mgd-section-head--center .mgd-section-rule,
.mg-distribution-page .mgd-section-header--center .mgd-section-rule { margin: 18px auto 0; }

.mg-distribution-page .mgd-section-header { margin-bottom: 48px; }
.mg-distribution-page .mgd-section-header--center {
    text-align: center; max-width: 640px;
    margin-left: auto; margin-right: auto;
}

/* Buttons */
.mg-distribution-page .mgd-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    transition: all 0.4s var(--mgd-ease);
    border: 2px solid transparent;
    cursor: pointer;
}
.mg-distribution-page .mgd-btn i { transition: transform 0.3s var(--mgd-ease); }
.mg-distribution-page .mgd-btn:hover i { transform: translateX(4px); }
.mg-distribution-page .mgd-btn--white {
    background: #ffffff; color: var(--mgd-primary); border-color: #ffffff;
}
.mg-distribution-page .mgd-btn--white:hover {
    background: transparent; color: #ffffff; border-color: #ffffff;
}
.mg-distribution-page .mgd-btn--ghost {
    background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.55);
}
.mg-distribution-page .mgd-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1); border-color: #ffffff; color: #ffffff;
}

/* ── 1. HERO ─────────────────────────────────────────────── */
.mg-distribution .mgd-hero {
    position: relative;
    min-height: 92vh;
    display: flex; align-items: center; justify-content: center;
    padding: 120px 0 100px;
    color: #ffffff;
    background: linear-gradient(135deg, #14262b 0%, #26454e 50%, #3a6572 100%);
    overflow: hidden; isolation: isolate;
}
.mg-distribution .mgd-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 30% 30%, rgba(79, 125, 138, 0.30), transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 80%, rgba(200, 169, 106, 0.18), transparent 60%);
    pointer-events: none; z-index: -1;
}
.mg-distribution .mgd-hero-overlay {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 40px);
    pointer-events: none; z-index: -1;
}
.mg-distribution .mgd-hero-inner { text-align: center; max-width: 860px; }
.mg-distribution .mgd-hero-eyebrow {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-bottom: 48px;
}
.mg-distribution .mgd-hero-eyebrow-rule {
    flex: 0 0 72px; height: 1px;
    background: linear-gradient(to right, transparent, var(--mgd-gold) 50%, transparent);
}
.mg-distribution .mgd-hero-eyebrow-text {
    color: var(--mgd-gold);
    font-size: 13px; font-weight: 600;
    letter-spacing: 6px; text-transform: uppercase;
}
.mg-distribution .mgd-hero-wordmark {
    display: inline-block; margin: 0 auto 40px; text-align: center; color: #ffffff;
}
.mg-distribution .mgd-hero-wordmark .mgb-logo-mark { font-size: 88px; }
.mg-distribution .mgd-hero-wordmark .mgb-logo-sub {
    margin: 12px auto 0; padding-top: 8px;
    border-top-color: var(--mgd-gold);
    color: var(--mgd-gold);
    font-size: 15px; letter-spacing: 8px;
}
.mg-distribution .mgd-hero-title {
    font-size: 52px; font-weight: 200; line-height: 1.15;
    margin: 0 0 20px; letter-spacing: 0.5px;
}
.mg-distribution .mgd-hero-title b { font-weight: 600; color: var(--mgd-gold); }
.mg-distribution .mgd-hero-sub {
    font-size: 17px; font-weight: 300; line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px; margin: 0 auto 48px;
}
.mg-distribution .mgd-hero-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff; text-decoration: none;
    transition: transform 0.4s var(--mgd-ease), border-color 0.4s ease, background 0.4s ease;
    animation: mgdBob 2.4s ease-in-out infinite;
}
.mg-distribution .mgd-hero-cta:hover,
.mg-distribution .mgd-hero-cta:focus-visible {
    color: #ffffff; border-color: var(--mgd-gold);
    background: rgba(200, 169, 106, 0.15);
    transform: translateY(2px);
}
@keyframes mgdBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ── 2. FOUNDERS ──────────────────────────────────────────── */
.mg-distribution .mgd-founder-list { display: flex; flex-direction: column; gap: 20px; }
.mg-distribution .mgd-founder {
    display: flex; align-items: center; gap: 20px;
    padding: 18px; background: #ffffff;
    border: 1px solid rgba(79, 125, 138, 0.18);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(31,31,31,0.04);
    transition: transform 0.4s var(--mgd-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-distribution .mgd-founder:hover {
    transform: translateY(-3px); border-color: var(--mgd-primary);
    box-shadow: 0 12px 24px rgba(79, 125, 138, 0.16);
}
.mg-distribution .mgd-founder-photo {
    flex: 0 0 auto; width: 96px; height: 96px;
    border-radius: 50%; overflow: hidden;
    background: var(--mgd-warm);
    border: 2px solid var(--mgd-gold);
}
.mg-distribution .mgd-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-distribution .mgd-founder-body { flex: 1; }
.mg-distribution .mgd-founder-name {
    color: var(--mgd-graphite);
    font-size: 18px; font-weight: 600;
    margin: 0 0 6px; line-height: 1.2;
}
.mg-distribution .mgd-founder-role {
    display: inline-block;
    color: var(--mgd-primary);
    font-size: 12px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.mg-distribution .mgd-founders-copy {
    color: #444;
    font-size: 16px; line-height: 1.75;
    padding-left: 20px;
    border-left: 3px solid var(--mgd-gold);
}
.mg-distribution[dir="rtl"] .mgd-founders-copy,
[dir="rtl"] .mg-distribution .mgd-founders-copy {
    padding-left: 0; padding-right: 20px;
    border-left: none; border-right: 3px solid var(--mgd-gold);
}

/* ── 3. VISION & MISSION ─────────────────────────────────── */
.mg-distribution .mgd-vm-grid { row-gap: 24px; }
.mg-distribution .mgd-vm-card {
    height: 100%; padding: 40px 32px;
    background: #ffffff;
    border: 1px solid rgba(79, 125, 138, 0.20);
    border-radius: 8px;
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform 0.4s var(--mgd-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-distribution .mgd-vm-card::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--mgd-primary), var(--mgd-gold));
    transform: scaleX(0.3); transform-origin: left center;
    transition: transform 0.5s var(--mgd-ease);
    z-index: 1;
}
.mg-distribution .mgd-vm-card:hover {
    transform: translateY(-4px); border-color: var(--mgd-primary);
    box-shadow: 0 20px 40px rgba(79, 125, 138, 0.14);
}
.mg-distribution .mgd-vm-card:hover::before { transform: scaleX(1); }
.mg-distribution .mgd-vm-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mgd-warm), var(--mgd-cream));
    color: var(--mgd-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 2px 6px rgba(79, 125, 138, 0.14);
}
.mg-distribution .mgd-vm-title {
    color: var(--mgd-graphite);
    font-size: 24px; font-weight: 600;
    letter-spacing: 0.5px; margin: 0 0 14px;
}
.mg-distribution .mgd-vm-body { color: #555; font-size: 15px; line-height: 1.75; margin: 0; }

/* ── 4. CORE VALUES ──────────────────────────────────────── */
.mg-distribution .mgd-values-grid { row-gap: 24px; }
.mg-distribution .mgd-value-card {
    position: relative; height: 100%;
    padding: 36px 28px 28px;
    background: #ffffff;
    border: 1px solid rgba(31, 31, 31, 0.08);
    border-radius: 6px; overflow: hidden;
    transition: transform 0.4s var(--mgd-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-distribution .mgd-value-card:hover {
    transform: translateY(-4px); border-color: var(--mgd-primary);
    box-shadow: 0 16px 32px rgba(31, 31, 31, 0.08);
}
.mg-distribution .mgd-value-number {
    position: absolute; top: 12px; right: 16px;
    font-size: 44px; font-weight: 800;
    color: var(--mgd-warm); letter-spacing: -1px;
    line-height: 1; z-index: 0;
    transition: color 0.4s ease;
}
.mg-distribution .mgd-value-card:hover .mgd-value-number { color: rgba(200,169,106,0.4); }
.mg-distribution .mgd-value-icon {
    position: relative; z-index: 1;
    width: 52px; height: 52px; border-radius: 12px;
    background: linear-gradient(135deg, var(--mgd-primary), var(--mgd-gold));
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 18px;
    box-shadow: 0 4px 10px rgba(79, 125, 138, 0.28);
}
.mg-distribution .mgd-value-title {
    color: var(--mgd-graphite);
    font-size: 18px; font-weight: 600;
    margin: 0 0 10px;
    position: relative; z-index: 1;
}
.mg-distribution .mgd-value-desc {
    color: #666; font-size: 14px; line-height: 1.65;
    margin: 0; position: relative; z-index: 1;
}

/* ── 5. PROJECTS SHOWCASE — horizontal scroll-snap slider ── */
.mg-distribution .mgd-showcase-wrap { position: relative; }
.mg-distribution .mgd-showcase-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, calc((100% - 48px) / 3));
    gap: 24px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 12px 4px 24px;
    -webkit-overflow-scrolling: touch;
}
.mg-distribution .mgd-showcase-track::-webkit-scrollbar { display: none; }
.mg-distribution .mgd-showcase-card {
    scroll-snap-align: start;
    background: #ffffff;
    border: 1px solid rgba(79, 125, 138, 0.14);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 14px rgba(31,31,31,0.06);
    transition: transform 0.4s var(--mgd-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-distribution .mgd-showcase-card:hover {
    transform: translateY(-4px); border-color: var(--mgd-primary);
    box-shadow: 0 18px 34px rgba(79, 125, 138, 0.18);
}
.mg-distribution .mgd-showcase-media {
    height: 220px;
    background-size: cover; background-position: center;
    background-color: var(--mgd-warm);
    position: relative;
}
.mg-distribution .mgd-showcase-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 38, 43, 0) 55%, rgba(20, 38, 43, 0.55) 100%);
}
.mg-distribution .mgd-showcase-body { padding: 22px 24px 26px; }
.mg-distribution .mgd-showcase-tag {
    display: inline-block;
    color: var(--mgd-primary);
    background: rgba(79, 125, 138, 0.10);
    padding: 4px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 12px;
}
.mg-distribution .mgd-showcase-title {
    color: var(--mgd-graphite);
    font-size: 20px; font-weight: 600;
    margin: 0 0 10px; line-height: 1.3;
}
.mg-distribution .mgd-showcase-desc {
    color: #666; font-size: 14px;
    line-height: 1.65; margin: 0;
}
.mg-distribution .mgd-showcase-nav {
    position: absolute;
    top: 110px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--mgd-primary);
    border: 1px solid rgba(79, 125, 138, 0.24);
    box-shadow: 0 6px 16px rgba(31,31,31,0.12);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.3s var(--mgd-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.mg-distribution .mgd-showcase-nav:hover,
.mg-distribution .mgd-showcase-nav:focus-visible {
    background: var(--mgd-primary); color: #ffffff;
    border-color: var(--mgd-primary);
    transform: scale(1.05); outline: none;
}
.mg-distribution .mgd-showcase-nav--prev { left: -22px; }
.mg-distribution .mgd-showcase-nav--next { right: -22px; }
.mg-distribution[dir="rtl"] .mgd-showcase-nav--prev { left: auto; right: -22px; }
.mg-distribution[dir="rtl"] .mgd-showcase-nav--next { right: auto; left: -22px; }
.mg-distribution .mgd-showcase-dots {
    display: flex; justify-content: center; gap: 10px; margin-top: 20px;
}
.mg-distribution .mgd-showcase-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(79, 125, 138, 0.28);
    border: 0; padding: 0; cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, width 0.3s ease;
}
.mg-distribution .mgd-showcase-dot:hover { background: var(--mgd-primary); }
.mg-distribution .mgd-showcase-dot.is-active {
    background: var(--mgd-primary);
    width: 26px; border-radius: 100px;
}

/* ── 6. WORKING PROCESS ──────────────────────────────────── */
.mg-distribution .mgd-process-track {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px; position: relative;
}
.mg-distribution .mgd-process-track::before {
    content: ""; position: absolute; top: 42px; left: 16.6%; right: 16.6%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--mgd-gold) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.mg-distribution .mgd-process-step { position: relative; text-align: center; padding: 0 8px; z-index: 1; }
.mg-distribution .mgd-process-node {
    position: relative;
    width: 84px; height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--mgd-primary);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mgd-primary); font-size: 28px;
    box-shadow: 0 6px 16px rgba(79, 125, 138, 0.16);
    transition: transform 0.4s var(--mgd-ease), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.mg-distribution .mgd-process-step:hover .mgd-process-node {
    background: linear-gradient(135deg, var(--mgd-primary), var(--mgd-gold));
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 28px rgba(79, 125, 138, 0.32);
}
.mg-distribution .mgd-process-num {
    position: absolute; top: -8px; right: -8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--mgd-gold); color: #ffffff;
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(138, 109, 59, 0.3);
}
.mg-distribution .mgd-process-title {
    color: var(--mgd-graphite);
    font-size: 17px; font-weight: 600;
    letter-spacing: 0.3px; margin: 0 0 10px;
}
.mg-distribution .mgd-process-desc { color: #666; font-size: 14px; line-height: 1.6; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   MG DISTRIBUTION — INNER PAGES (banner + refs grid + CTA)
   =================================================================== */
.mgd-inner-banner {
    position: relative;
    min-height: 360px;
    display: flex; align-items: center;
    color: #ffffff;
    overflow: hidden; isolation: isolate;
}
.mgd-inner-banner-bg {
    position: absolute; inset: 0;
    background-image: url('../images/mg-building.png');
    background-size: cover; background-position: center;
    transform: scale(1.05); z-index: 0;
}
.mgd-inner-banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(58, 95, 106, 0.92) 0%, rgba(79, 125, 138, 0.85) 50%, rgba(58, 95, 106, 0.92) 100%);
    z-index: 1;
}
.mgd-inner-banner-inner { position: relative; z-index: 2; padding: 72px 0 64px; }
.mgd-inner-banner-content { max-width: 760px; }
.mgd-inner-banner-title {
    color: #ffffff;
    font-size: 48px; font-weight: 800;
    line-height: 1.1; letter-spacing: -0.5px;
    margin: 0 0 18px;
}

.mgd-hero-wordmark {
    display: inline-block; margin-bottom: 22px; line-height: 1;
}
.mgd-hero-wordmark-mark {
    display: block; color: #ffffff;
    font-size: 48px; font-weight: 800;
    font-style: italic; letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.mgd-hero-wordmark-sub {
    display: block;
    width: max-content; max-width: 100%;
    margin-top: 10px; padding-top: 8px;
    border-top: 2px solid var(--mgd-gold);
    color: var(--mgd-gold);
    font-size: 14px; font-weight: 700;
    letter-spacing: 5px; text-transform: uppercase;
}

.mgd-crumb {
    display: inline-flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 13px; letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 600;
}
.mgd-crumb a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.3s ease; }
.mgd-crumb a:hover { color: var(--mgd-gold); }
.mgd-crumb-sep     { color: var(--mgd-gold); opacity: 0.75; }
.mgd-crumb-current { color: #ffffff; opacity: 0.7; }

.mgd-refpage-block { padding: 96px 0; background: #ffffff; }
.mgd-refpage-block--alt {
    background: var(--mgd-cream);
    border-top: 1px solid rgba(79, 125, 138, 0.10);
    border-bottom: 1px solid rgba(79, 125, 138, 0.10);
}
.mgd-refpage-grid { margin: 0 -10px; justify-content: center; }
.mgd-refpage-cell { padding: 0 10px; margin-bottom: 24px; display: flex; }
.mgd-refpage-card {
    width: 100%; min-height: 140px;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid rgba(79, 125, 138, 0.14);
    border-radius: 4px;
    transition: transform 0.4s var(--mgd-ease), box-shadow 0.4s var(--mgd-ease), border-color 0.4s ease;
    position: relative; overflow: hidden;
}
.mgd-refpage-card::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--mgd-gold);
    transition: width 0.4s var(--mgd-ease);
}
.mgd-refpage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(79, 125, 138, 0.16);
    border-color: rgba(79, 125, 138, 0.30);
}
.mgd-refpage-card:hover::before { width: 100%; }
.mgd-refpage-logo-img {
    max-height: 90px; max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(100%); opacity: 0.75;
    transition: filter 0.4s ease, opacity 0.4s ease;
}
.mgd-refpage-card:hover .mgd-refpage-logo-img { filter: grayscale(0%); opacity: 1; }
.mgd-refpage-card-fallback {
    color: #888888;
    font-size: 14px; font-weight: 600;
    letter-spacing: 1.5px; text-align: center;
}
.mg-distribution-page.rtl .mgd-refpage-card::before { left: auto; right: 0; }

.mgd-cta {
    padding: 96px 0;
    background: linear-gradient(135deg, var(--mgd-primary) 0%, var(--mgd-primary-dark) 100%);
    color: #ffffff;
    position: relative; overflow: hidden; text-align: center;
}
.mgd-cta::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 50% 40% at 20% 20%, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255,255,255,0.06), transparent 60%);
    pointer-events: none;
}
.mgd-cta > .container { position: relative; z-index: 1; }
.mgd-cta-title { color: #ffffff; font-size: 44px; font-weight: 200; margin: 0 0 16px; letter-spacing: -0.5px; }
.mgd-cta-text { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.6; margin: 0 auto 36px; max-width: 540px; }
.mgd-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* Wrapper mode — hide the corporate inner-banner and re-tint corporate accents */
.mg-distribution-page .inner-banner { display: none !important; }
.mg-distribution-page .sectiontitle,
.mg-distribution-page .page-title { color: var(--mgd-graphite); }
.mg-distribution-page .sectiontitle::before,
.mg-distribution-page .sectiontitle::after,
.mg-distribution-page .page-title::before,
.mg-distribution-page .page-title::after { background: var(--mgd-primary); }
.mg-distribution-page a { color: var(--mgd-primary); }
.mg-distribution-page a:hover { color: var(--mgd-primary-dark); }
.mg-distribution-page .btn-mgnav,
.mg-distribution-page .btn-submit,
.mg-distribution-page button[type="submit"],
.mg-distribution-page input[type="submit"] {
    background-color: var(--mgd-primary) !important;
    border-color: var(--mgd-primary) !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.mg-distribution-page .btn-mgnav:hover,
.mg-distribution-page .btn-submit:hover,
.mg-distribution-page button[type="submit"]:hover,
.mg-distribution-page input[type="submit"]:hover {
    background-color: var(--mgd-primary-dark) !important;
    border-color: var(--mgd-primary-dark) !important;
}
.mg-distribution-page .opblock-title:hover { color: var(--mgd-primary) !important; }

/* Navbar overrides — teal on Distribution pages */
.navbar.navbar-dark.navbar--distribution .navbar-nav .active > .nav-link,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link.active,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link.show,
.navbar.navbar-dark.navbar--distribution .navbar-nav .show > .nav-link,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link:focus,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: #4f7d8a;
    border-radius: 50px;
    transition: background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.navbar--distribution .btn-mgnav:hover,
.navbar--distribution .btn-mgnav:focus,
.navbar--distribution .btn-mgnav:hover li > span {
    background-color: #4f7d8a;
    border-color: #4f7d8a !important;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 991px) {
    .mg-distribution .mgd-section { padding: 72px 0; }
    .mg-distribution .mgd-section-head { margin-bottom: 44px; }
    .mg-distribution .mgd-section-title { font-size: 32px; }

    .mg-distribution .mgd-hero { min-height: 80vh; padding: 100px 0 80px; }
    .mg-distribution .mgd-hero-wordmark .mgb-logo-mark { font-size: 68px; }
    .mg-distribution .mgd-hero-title { font-size: 40px; }
    .mg-distribution .mgd-hero-sub { font-size: 15px; }

    .mg-distribution .mgd-founders-copy { margin-top: 32px; padding-left: 16px; }

    .mg-distribution .mgd-showcase-track { grid-auto-columns: minmax(0, calc((100% - 24px) / 2)); }

    .mg-distribution .mgd-process-track { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .mg-distribution .mgd-process-track::before { display: none; }

    .mgd-inner-banner { min-height: 320px; }
    .mgd-inner-banner-inner { padding: 60px 0 52px; }
    .mgd-inner-banner-title { font-size: 38px; }
    .mgd-refpage-block { padding: 72px 0; }
    .mg-distribution-page .mgd-section-title { font-size: 32px; }
    .mgd-cta { padding: 72px 0; }
    .mgd-cta-title { font-size: 34px; }
}
@media (max-width: 767px) {
    .mgd-inner-banner { min-height: 280px; }
    .mgd-inner-banner-inner { padding: 48px 0 40px; }
    .mgd-inner-banner-title { font-size: 30px; }
    .mgd-hero-wordmark-mark { font-size: 38px; }
    .mgd-hero-wordmark-sub  { font-size: 12px; letter-spacing: 4px; }
    .mgd-crumb { font-size: 11px; letter-spacing: 1.2px; gap: 8px; }
    .mgd-refpage-block { padding: 56px 0; }
    .mgd-refpage-card { min-height: 110px; padding: 18px 16px; }
    .mgd-refpage-logo-img { max-height: 70px; }
    .mgd-cta { padding: 56px 0; }
    .mgd-cta-title { font-size: 28px; }
    .mgd-cta-actions { flex-direction: column; align-items: stretch; }
    .mgd-cta-actions .mgd-btn { justify-content: center; }
}
@media (max-width: 575px) {
    .mg-distribution .mgd-section { padding: 56px 0; }
    .mg-distribution .mgd-section-title { font-size: 26px; }
    .mg-distribution .mgd-section-kicker { font-size: 11px; letter-spacing: 2.4px; }

    .mg-distribution .mgd-hero { min-height: 70vh; padding: 80px 0 64px; }
    .mg-distribution .mgd-hero-eyebrow { margin-bottom: 32px; gap: 10px; }
    .mg-distribution .mgd-hero-eyebrow-rule { flex: 0 0 40px; }
    .mg-distribution .mgd-hero-eyebrow-text { font-size: 11px; letter-spacing: 4px; }
    .mg-distribution .mgd-hero-wordmark { margin-bottom: 28px; }
    .mg-distribution .mgd-hero-wordmark .mgb-logo-mark { font-size: 52px; }
    .mg-distribution .mgd-hero-wordmark .mgb-logo-sub  { font-size: 12px; letter-spacing: 5px; }
    .mg-distribution .mgd-hero-title { font-size: 28px; }
    .mg-distribution .mgd-hero-sub   { font-size: 14px; margin-bottom: 32px; }

    .mg-distribution .mgd-founder { padding: 14px; gap: 14px; }
    .mg-distribution .mgd-founder-photo { width: 72px; height: 72px; }
    .mg-distribution .mgd-founder-name  { font-size: 16px; }
    .mg-distribution .mgd-founder-role  { font-size: 11px; letter-spacing: 1.2px; }

    .mg-distribution .mgd-vm-card { padding: 32px 24px; }
    .mg-distribution .mgd-vm-icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 16px; }
    .mg-distribution .mgd-vm-title { font-size: 20px; }
    .mg-distribution .mgd-vm-body  { font-size: 14px; }

    .mg-distribution .mgd-value-card   { padding: 28px 22px 22px; }
    .mg-distribution .mgd-value-number { font-size: 36px; }
    .mg-distribution .mgd-value-icon   { width: 44px; height: 44px; font-size: 18px; }

    .mg-distribution .mgd-showcase-track { grid-auto-columns: minmax(0, 100%); gap: 16px; }
    .mg-distribution .mgd-showcase-media { height: 180px; }
    .mg-distribution .mgd-showcase-nav { display: none; }

    .mg-distribution .mgd-process-track { grid-template-columns: 1fr; row-gap: 32px; }
    .mg-distribution .mgd-process-node  { width: 72px; height: 72px; font-size: 24px; }
}

/* ============================================================
   MG DISTRIBUTION — Wholesale positioning additions
   (founders copy enhancements, stats strip, projects gallery)
   ============================================================ */

/* Wholesale eyebrow + lead sentence above the founders paragraph */
.mg-distribution .mgd-founders-eyebrow {
    display: inline-block;
    color: var(--mgd-primary, #4f7d8a);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mgd-gold, #c8a96a);
}
.mg-distribution .mgd-founders-lead {
    color: #1f1f1f;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 18px;
    letter-spacing: -0.2px;
}
.mg-distribution .mgd-founders-copy p {
    color: #555;
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 14px;
}
.mg-distribution .mgd-founders-copy p b {
    color: var(--mgd-primary, #4f7d8a);
    font-weight: 700;
}
.mg-distribution .mgd-founders-bullets {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}
.mg-distribution .mgd-founders-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}
.mg-distribution .mgd-founders-bullets li i {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(79, 125, 138, 0.12);
    color: var(--mgd-primary, #4f7d8a);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* Stats strip — full-width band below the founders row */
.mg-distribution .mgd-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
    padding: 32px 24px;
    background: linear-gradient(135deg, #4f7d8a 0%, #3d626d 100%);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(79, 125, 138, 0.18);
}
.mg-distribution .mgd-stat {
    text-align: center;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.15);
    padding: 4px 8px;
}
.mg-distribution .mgd-stat:last-child { border-right: none; }
.mg-distribution .mgd-stat-num {
    display: block;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--mgd-gold, #c8a96a);
    line-height: 1;
    margin-bottom: 6px;
}
.mg-distribution .mgd-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}

/* ─── PROJECTS GALLERY — image + title only, no cards ──────── */
.mg-distribution .mgd-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.mg-distribution .mgd-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    margin: 0;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.mg-distribution .mgd-gallery-media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mg-distribution .mgd-gallery-item:hover .mgd-gallery-media { transform: scale(1.06); }
.mg-distribution .mgd-gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 40px 20px 18px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%);
    color: #fff;
    z-index: 2;
}
.mg-distribution .mgd-gallery-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.35;
    color: #fff;
}
.mg-distribution .mgd-gallery-item::after {
    content: "";
    position: absolute;
    left: 20px; bottom: 12px;
    width: 32px; height: 2px;
    background: var(--mgd-gold, #c8a96a);
    transform: scaleX(0.5);
    transform-origin: left center;
    transition: transform 0.4s ease;
    z-index: 3;
}
.mg-distribution .mgd-gallery-item:hover::after { transform: scaleX(1.6); }

@media (max-width: 991px) {
    .mg-distribution .mgd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .mg-distribution .mgd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mg-distribution .mgd-stat:nth-child(2) { border-right: none; }
    .mg-distribution .mgd-founders-lead { font-size: 22px; }
}
@media (max-width: 575px) {
    .mg-distribution .mgd-gallery { grid-template-columns: 1fr; }
    .mg-distribution .mgd-founders-bullets { grid-template-columns: 1fr; }
    .mg-distribution .mgd-stats { grid-template-columns: 1fr; padding: 24px 16px; gap: 18px; }
    .mg-distribution .mgd-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 14px; }
    .mg-distribution .mgd-stat:last-child { border-bottom: none; padding-bottom: 4px; }
    .mg-distribution .mgd-stat-num { font-size: 32px; }
    .mg-distribution .mgd-founders-lead { font-size: 20px; }
}
/* ============================================================
   MG DISTRIBUTION — About Us section (text + image slider)
   ============================================================ */
.mg-distribution .mgd-about { padding-top: 90px; padding-bottom: 90px; }
.mg-distribution .mgd-about-grid { row-gap: 40px; }
.mg-distribution .mgd-about-copy .mgd-section-kicker,
.mg-distribution .mgd-about-copy .mgd-section-title,
.mg-distribution .mgd-about-copy .mgd-section-rule { text-align: left; margin-left: 0; }
.mg-distribution .mgd-about-copy .mgd-section-title { margin-bottom: 14px; }
.mg-distribution .mgd-about-copy .mgd-section-rule { margin: 0 0 22px; }
.mg-distribution .mgd-about-copy .mgd-founders-eyebrow { margin-top: 6px; }

/* Stats — card variant (2x2 grid inside About Us left column) */
.mg-distribution .mgd-stats--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
    padding: 24px 20px;
    gap: 18px;
}
.mg-distribution .mgd-stats--card .mgd-stat { border-right: none; position: relative; }
.mg-distribution .mgd-stats--card .mgd-stat:nth-child(odd)::after {
    content: ""; position: absolute; right: -9px; top: 15%; bottom: 15%;
    width: 1px; background: rgba(255,255,255,0.18);
}
.mg-distribution .mgd-stats--card .mgd-stat-num { font-size: 32px; }
.mg-distribution .mgd-stats--card .mgd-stat-label { font-size: 11px; letter-spacing: 1.6px; }

/* ─── Right-side image slider ─────────────────────────────── */
.mg-distribution .mgd-about-slider {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    aspect-ratio: 4 / 5;
    background: #1f1f1f;
}
.mg-distribution .mgd-about-slider-viewport {
    position: absolute; inset: 0;
}
.mg-distribution .mgd-about-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease, transform 6s ease;
    z-index: 1;
}
.mg-distribution .mgd-about-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}
.mg-distribution .mgd-about-slider-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
    z-index: 3;
    pointer-events: none;
}
/* Prev / next arrows */
.mg-distribution .mgd-about-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    color: var(--mgd-primary, #4f7d8a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 16px rgba(0,0,0,0.20);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.mg-distribution .mgd-about-slider-nav:hover {
    background: var(--mgd-gold, #c8a96a);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.mg-distribution .mgd-about-slider-nav--prev { left: 14px; }
.mg-distribution .mgd-about-slider-nav--next { right: 14px; }

/* Dots */
.mg-distribution .mgd-about-slider-dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.mg-distribution .mgd-about-slider-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.85);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.mg-distribution .mgd-about-slider-dot.is-active {
    background: var(--mgd-gold, #c8a96a);
    border-color: var(--mgd-gold, #c8a96a);
    width: 24px;
    border-radius: 5px;
}

@media (max-width: 991px) {
    .mg-distribution .mgd-about-slider { aspect-ratio: 16 / 10; }
    .mg-distribution .mgd-about-copy .mgd-section-kicker,
    .mg-distribution .mgd-about-copy .mgd-section-title { text-align: left; }
}
@media (max-width: 575px) {
    .mg-distribution .mgd-about { padding-top: 60px; padding-bottom: 60px; }
    .mg-distribution .mgd-about-slider { aspect-ratio: 4 / 3; }
    .mg-distribution .mgd-about-slider-nav { width: 36px; height: 36px; }
    .mg-distribution .mgd-stats--card { grid-template-columns: 1fr; }
    .mg-distribution .mgd-stats--card .mgd-stat:nth-child(odd)::after { display: none; }
}
/* ============================================================
   MG DISTRIBUTION — Our Partners logo grid
   ============================================================ */
.mg-distribution .mgd-partners { }
.mg-distribution .mgd-section-lead {
    max-width: 640px;
    margin: 18px auto 0;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}
.mg-distribution .mgd-partners-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.mg-distribution .mgd-partner-tile {
    aspect-ratio: 3 / 2;
    background: #ffffff;
    border: 1px solid rgba(79, 125, 138, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.mg-distribution .mgd-partner-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(79, 125, 138, 0.14);
    border-color: var(--mgd-gold, #c8a96a);
}
.mg-distribution .mgd-partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.35s ease, opacity 0.35s ease;
}
.mg-distribution .mgd-partner-tile:hover .mgd-partner-logo {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 991px) {
    .mg-distribution .mgd-partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .mg-distribution .mgd-partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .mg-distribution .mgd-partner-tile { padding: 14px; }
}/* =====================================================================
   MG Distribution — UI/UX v2 (July 2026)
   Corporate refinements: hero CTA, transparent sticky navbar, counter
   animation, larger founder cards, richer core values, gallery hover
   overlay, partner marquee, business process timeline.
   All rules scoped to .mg-distribution or .mg-distribution-page.
   ===================================================================== */

/* ---------- 1. NAVBAR (transparent + blur, wider spacing, better hover) --- */
.navbar--distribution {
    background: transparent !important;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background 0.35s ease, backdrop-filter 0.35s ease,
                box-shadow 0.35s ease, padding 0.35s ease;
}
.navbar--distribution.is-scrolled {
    background: rgba(20, 32, 40, 0.72) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.navbar--distribution .navbar-nav .nav-item { margin: 0 6px; }
.navbar--distribution .navbar-nav .nav-link {
    position: relative;
    padding: 10px 6px !important;
    letter-spacing: 1.4px;
    transition: color 0.3s ease;
}
.navbar--distribution .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--mgd-gold, #c8a96a);
    transition: width 0.35s ease, left 0.35s ease;
}
.navbar--distribution .navbar-nav .nav-link:hover,
.navbar--distribution .navbar-nav .nav-item.active .nav-link {
    color: var(--mgd-gold, #c8a96a) !important;
}
.navbar--distribution .navbar-nav .nav-link:hover::after,
.navbar--distribution .navbar-nav .nav-item.active .nav-link::after {
    width: calc(100% - 12px);
    left: 6px;
}

/* ---------- 2. HERO — elegant primary CTA -------------------------- */
.mg-distribution .mgd-hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 36px 0 48px;
}
.mg-distribution .mgd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease,
                background 0.35s ease, color 0.35s ease;
    isolation: isolate;
}
.mg-distribution .mgd-btn--primary {
    background: var(--mgd-gold, #c8a96a);
    color: #1b2a33;
    box-shadow: 0 10px 26px rgba(200, 169, 106, 0.28);
}
.mg-distribution .mgd-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #d9bb7d, #c8a96a 45%, #b18d4d);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}
.mg-distribution .mgd-btn--primary:hover,
.mg-distribution .mgd-btn--primary:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(200, 169, 106, 0.42);
    color: #1b2a33;
    text-decoration: none;
}
.mg-distribution .mgd-btn--primary:hover::before { opacity: 1; }
.mg-distribution .mgd-btn-icon { transition: transform 0.35s ease; }
.mg-distribution .mgd-btn:hover .mgd-btn-icon { transform: translateX(6px); }

.mg-distribution .mgd-hero-scroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    animation: mgdBounce 2.2s ease-in-out infinite;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    text-decoration: none;
}
.mg-distribution .mgd-hero-scroll:hover {
    color: var(--mgd-gold, #c8a96a);
    border-color: var(--mgd-gold, #c8a96a);
    background: rgba(200, 169, 106, 0.08);
}
@keyframes mgdBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ---------- 3. ABOUT — highlighted words ---------------------- */
.mg-distribution .mgd-about-copy p b,
.mg-distribution .mgd-founders-copy p b,
.mg-distribution .mgd-founders-lead b {
    color: var(--mgd-gold, #c8a96a);
    font-weight: 600;
}
.mg-distribution .mgd-about-copy p {
    font-size: 16px;
    line-height: 1.85;
    color: #4a5560;
}

/* ---------- 4. STATS — counter numbers ----------------------- */
.mg-distribution .mgd-stat-num {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1ch;
}

/* ---------- 5. FOUNDERS — richer cards ------------------------ */
.mg-distribution .mgd-founders-grid--rich { row-gap: 28px; }
.mg-distribution .mgd-founder--rich {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 28px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(79, 125, 138, 0.10);
    box-shadow: 0 10px 30px rgba(20, 32, 40, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    height: 100%;
    overflow: hidden;
}
.mg-distribution .mgd-founder--rich::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mgd-gold, #c8a96a), var(--mgd-primary, #4f7d8a));
    transform: scaleY(0.25);
    transform-origin: top;
    transition: transform 0.4s ease;
}
.mg-distribution .mgd-founder--rich:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 106, 0.35);
    box-shadow: 0 22px 46px rgba(20, 32, 40, 0.12);
}
.mg-distribution .mgd-founder--rich:hover::before { transform: scaleY(1); }
.mg-distribution .mgd-founder--rich .mgd-founder-photo {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(20, 32, 40, 0.15);
}
.mg-distribution .mgd-founder--rich .mgd-founder-body { flex: 1; min-width: 0; }
.mg-distribution .mgd-founder--rich .mgd-founder-name {
    font-size: 20px;
    margin: 0 0 4px;
    color: #1b2a33;
}
.mg-distribution .mgd-founder--rich .mgd-founder-role {
    display: block;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mgd-primary, #4f7d8a);
    margin-bottom: 12px;
}
.mg-distribution .mgd-founder-bio {
    font-size: 14.5px;
    line-height: 1.7;
    color: #5a6773;
    margin: 0 0 18px;
}
.mg-distribution .mgd-founder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(79, 125, 138, 0.12);
}
.mg-distribution .mgd-founder-meta-item { display: flex; flex-direction: column; gap: 6px; }
.mg-distribution .mgd-founder-meta-item--tags { flex: 1; min-width: 180px; }
.mg-distribution .mgd-founder-meta-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--mgd-gold, #c8a96a);
    line-height: 1;
}
.mg-distribution .mgd-founder-meta-label {
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8a95a1;
}
.mg-distribution .mgd-founder-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-distribution .mgd-founder-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--mgd-primary-dark, #3a5f6a);
    background: rgba(79, 125, 138, 0.08);
    border-radius: 999px;
}
.mg-distribution .mgd-founder-linkedin {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(79, 125, 138, 0.10);
    color: var(--mgd-primary, #4f7d8a);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.mg-distribution .mgd-founder-linkedin:hover {
    background: var(--mgd-primary, #4f7d8a);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.mg-distribution .mgd-founders-copy--center {
    max-width: 780px;
    margin: 40px auto 0;
    text-align: center;
    padding-left: 0;
    border-left: none;
}
.mg-distribution .mgd-founders-copy--center p { font-size: 16px; color: #4a5560; }

/* ---------- 6. CORE VALUES — bigger icons, brighter numbers, equal height --- */
.mg-distribution .mgd-values-grid--3 { align-items: stretch; }
.mg-distribution .mgd-values-grid--3 > [class*="col-"] { display: flex; }
.mg-distribution .mgd-values-grid--3 .mgd-value-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 44px 32px 34px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-distribution .mgd-value-card .mgd-value-number {
    font-size: 92px;
    line-height: 1;
    color: rgba(200, 169, 106, 0.28);
    font-weight: 800;
    transition: color 0.4s ease, transform 0.4s ease;
}
.mg-distribution .mgd-value-card:hover .mgd-value-number {
    color: rgba(200, 169, 106, 0.55);
    transform: translateY(-4px);
}
.mg-distribution .mgd-value-card .mgd-value-icon {
    width: 68px;
    height: 68px;
    font-size: 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mgd-primary, #4f7d8a), var(--mgd-primary-dark, #3a5f6a));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(79, 125, 138, 0.28);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mg-distribution .mgd-value-card:hover .mgd-value-icon {
    transform: translateY(-4px) rotate(-4deg);
    box-shadow: 0 16px 30px rgba(79, 125, 138, 0.38);
}
.mg-distribution .mgd-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(20, 32, 40, 0.10);
    border-color: rgba(200, 169, 106, 0.35);
}
.mg-distribution .mgd-value-title { font-size: 20px; margin-top: 20px; }
.mg-distribution .mgd-value-desc { font-size: 15px; line-height: 1.75; color: #5a6773; margin-top: auto; }

/* ---------- 7. GALLERY — dark overlay + zoom + smooth transition --------- */
.mg-distribution .mgd-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.mg-distribution .mgd-gallery-media {
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mg-distribution .mgd-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 32, 40, 0.05) 0%,
        rgba(20, 32, 40, 0.25) 55%,
        rgba(20, 32, 40, 0.78) 100%);
    opacity: 0.85;
    transition: opacity 0.5s ease, background 0.5s ease;
    pointer-events: none;
}
.mg-distribution .mgd-gallery-item:hover .mgd-gallery-overlay {
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(20, 32, 40, 0.35) 0%,
        rgba(20, 32, 40, 0.55) 55%,
        rgba(20, 32, 40, 0.88) 100%);
}
.mg-distribution .mgd-gallery-item:hover .mgd-gallery-media {
    transform: scale(1.10);
}
.mg-distribution .mgd-gallery-caption { z-index: 2; }
.mg-distribution .mgd-gallery-title {
    transition: transform 0.4s ease, color 0.4s ease;
}
.mg-distribution .mgd-gallery-item:hover .mgd-gallery-title {
    color: var(--mgd-gold, #c8a96a);
    transform: translateY(-3px);
}

/* ---------- 8. PARTNERS — auto-scrolling marquee, larger logos ----- */
.mg-distribution .mgd-partners-marquee {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    margin-top: 12px;
    mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.mg-distribution .mgd-partners-track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: mgdMarquee 35s linear infinite;
}
.mg-distribution .mgd-partners-marquee:hover .mgd-partners-track { animation-play-state: paused; }
@keyframes mgdMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mg-finishing .mgf-partners-marquee,
.mg-finishing .mgf-partners-track,
.mg-distribution .mgd-partners-marquee,
.mg-distribution .mgd-partners-track {
    direction: ltr;
}

.mg-distribution .mgd-partner-tile {
    flex: 0 0 auto;
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(79, 125, 138, 0.10);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.mg-distribution .mgd-partner-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 106, 0.45);
    box-shadow: 0 14px 32px rgba(20, 32, 40, 0.10);
}
.mg-distribution .mgd-partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.mg-distribution .mgd-partner-tile:hover .mgd-partner-logo {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* ---------- 9. BUSINESS PROCESS TIMELINE ------------------------- */
.mg-distribution .mgd-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr) ;
    gap: 0;
    align-items: start;
    margin-top: 20px;
}
.mg-distribution .mgd-timeline-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 18px;
}
.mg-distribution .mgd-timeline-marker {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    border: 2px dashed rgba(200, 169, 106, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-distribution .mgd-timeline-step:hover .mgd-timeline-marker {
    transform: translateY(-4px) rotate(4deg);
    border-color: var(--mgd-gold, #c8a96a);
    box-shadow: 0 18px 32px rgba(20, 32, 40, 0.10);
}
.mg-distribution .mgd-timeline-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mgd-primary, #4f7d8a), var(--mgd-primary-dark, #3a5f6a));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 18px rgba(79, 125, 138, 0.28);
}
.mg-distribution .mgd-timeline-num {
    position: absolute;
    top: -10px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mgd-gold, #c8a96a);
    color: #1b2a33;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(200, 169, 106, 0.4);
}
.mg-distribution .mgd-timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #1b2a33;
    margin: 0 0 8px;
    letter-spacing: 0.4px;
}
.mg-distribution .mgd-timeline-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #5a6773;
    margin: 0;
}
.mg-distribution .mgd-timeline-connector {
    position: absolute;
    top: 48px;
    right: -12px;
    color: rgba(79, 125, 138, 0.45);
    font-size: 20px;
}
.mg-distribution .mgd-timeline-arrow--v { display: none; }

/* Responsive: timeline goes vertical on tablet/mobile */
@media (max-width: 991.98px) {
    .mg-distribution .mgd-timeline { grid-template-columns: 1fr; gap: 28px; }
    .mg-distribution .mgd-timeline-step {
        flex-direction: row;
        text-align: left;
        gap: 22px;
        padding: 0;
    }
    .mg-distribution .mgd-timeline-marker { flex: 0 0 96px; margin-bottom: 0; }
    .mg-distribution .mgd-timeline-body { flex: 1; padding-top: 8px; }
    .mg-distribution .mgd-timeline-connector {
        position: absolute;
        top: auto;
        right: auto;
        left: 47px;
        bottom: -22px;
    }
    .mg-distribution .mgd-timeline-arrow--h { display: none; }
    .mg-distribution .mgd-timeline-arrow--v { display: inline-block; }
}
[dir="rtl"] .mg-distribution .mgd-timeline-connector { right: auto; left: -12px; transform: scaleX(-1); }

/* ---------- 10. FOUNDER RTL --------------------------------- */
[dir="rtl"] .mg-distribution .mgd-founder-linkedin { right: auto; left: 20px; }
[dir="rtl"] .mg-distribution .mgd-founder--rich::before { left: auto; right: 0; }

/* ---------- 11. MOBILE FINE-TUNES --------------------------- */
@media (max-width: 767.98px) {
    .mg-distribution .mgd-founder--rich { flex-direction: column; text-align: center; }
    .mg-distribution .mgd-founder--rich .mgd-founder-photo { margin: 0 auto; }
    .mg-distribution .mgd-founder-tags { justify-content: center; }
    .mg-distribution .mgd-founder-meta { justify-content: center; }
    .mg-distribution .mgd-founder-linkedin { position: static; margin-top: 12px; }
    .mg-distribution .mgd-partner-tile { width: 160px; height: 100px; padding: 14px 18px; }
    .mg-distribution .mgd-value-card .mgd-value-number { font-size: 72px; }
    .mg-distribution .mgd-value-card .mgd-value-icon { width: 58px; height: 58px; font-size: 24px; }
}

/* =====================================================================
   MG Distribution — Projects Carousel (July 2026)
   Middle-of-gallery auto-rotating slider, 3 slides visible on desktop.
   ===================================================================== */
.mg-distribution .mgd-carousel {
    position: relative;
    margin: 40px 0;
    padding: 0 56px;
}
.mg-distribution .mgd-carousel-viewport {
    overflow: hidden;
    border-radius: 6px;
}
.mg-distribution .mgd-carousel-track {
    display: flex;
    gap: 0;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.mg-distribution .mgd-carousel-slide {
    flex: 0 0 33.3333%;
    padding: 0 10px;
    box-sizing: border-box;
}
.mg-distribution .mgd-gallery-item--slim {
    height: 260px;
}
.mg-distribution .mgd-gallery-item--slim .mgd-gallery-media {
    height: 100%;
}
.mg-distribution .mgd-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(79, 125, 138, 0.20);
    color: var(--mgd-primary, #4f7d8a);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(20, 32, 40, 0.10);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    z-index: 3;
}
.mg-distribution .mgd-carousel-nav:hover {
    background: var(--mgd-gold, #c8a96a);
    color: #1b2a33;
    border-color: var(--mgd-gold, #c8a96a);
    transform: translateY(-50%) scale(1.06);
}
.mg-distribution .mgd-carousel-nav--prev { left: 4px; }
.mg-distribution .mgd-carousel-nav--next { right: 4px; }
[dir="rtl"] .mg-distribution .mgd-carousel-nav--prev { left: auto; right: 4px; }
[dir="rtl"] .mg-distribution .mgd-carousel-nav--next { right: auto; left: 4px; }

@media (max-width: 991.98px) {
    .mg-distribution .mgd-carousel { padding: 0 44px; }
    .mg-distribution .mgd-carousel-slide { flex: 0 0 50%; }
    .mg-distribution .mgd-gallery-item--slim { height: 220px; }
}
@media (max-width: 575.98px) {
    .mg-distribution .mgd-carousel { padding: 0 40px; }
    .mg-distribution .mgd-carousel-slide { flex: 0 0 100%; }
    .mg-distribution .mgd-gallery-item--slim { height: 200px; }
    .mg-distribution .mgd-carousel-nav { width: 36px; height: 36px; font-size: 13px; }
}

/* =====================================================================
   MG Distribution — RTL fixes (July 2026)
   Keep decorative numbers, icons and connectors positioned exactly as
   the LTR layout in Arabic mode. Only text content flips direction —
   the visual composition of the cards / timeline stays the same so
   the number never collides with the icon.
   ===================================================================== */

/* ── Core Values: number badge stays top-right in both directions ── */
[dir="rtl"] .mg-distribution .mgd-value-card {
    text-align: right;
}
[dir="rtl"] .mg-distribution .mgd-value-number {
    right: 16px;
    left: auto;
}
/* If a downstream override placed it on the left in RTL, undo it. */
[dir="rtl"] .mg-distribution .mgd-values-grid--3 .mgd-value-card {
    text-align: right;
}

/* ── Business Process timeline: keep num badge on top-right corner ── */
[dir="rtl"] .mg-distribution .mgd-timeline-num {
    right: -6px;
    left: auto;
}
/* Horizontal connector arrow stays pointing forward in reading direction:
   in RTL the flow goes right → left, so mirror the chevron only, not
   the position. Timeline steps are laid out with grid so the flow order
   naturally reverses; the arrow at each step's edge stays visually
   consistent with that flow. */
[dir="rtl"] .mg-distribution .mgd-timeline-connector {
    right: auto;
    left: -12px;
}
[dir="rtl"] .mg-distribution .mgd-timeline-arrow--h {
    transform: scaleX(-1);
}
/* Mobile vertical timeline connector: reset the RTL offset override
   because the vertical arrow sits under the marker, not to the side. */
@media (max-width: 991.98px) {
    [dir="rtl"] .mg-distribution .mgd-timeline-connector {
        left: 47px;
        right: auto;
        bottom: -22px;
        top: auto;
    }
    [dir="rtl"] .mg-distribution .mgd-timeline-arrow--h { display: none; }
    [dir="rtl"] .mg-distribution .mgd-timeline-arrow--v { transform: none; }
    /* Mobile RTL: swap row direction so marker sits on the right of text. */
    [dir="rtl"] .mg-distribution .mgd-timeline-step { flex-direction: row-reverse; }
    [dir="rtl"] .mg-distribution .mgd-timeline-body { text-align: right; }
}

/* ── RTL text alignment for card bodies ── */
[dir="rtl"] .mg-distribution .mgd-value-title,
[dir="rtl"] .mg-distribution .mgd-value-desc,
[dir="rtl"] .mg-distribution .mgd-timeline-title,
[dir="rtl"] .mg-distribution .mgd-timeline-desc {
    text-align: inherit;
}

/* =====================================================================
   MG Distribution — Projects paged slider (July 2026)
   Each page = one full-width slide containing a 3×2 responsive grid
   of 6 project images. Pagination via prev/next + dots.
   ===================================================================== */
.mg-distribution .mgd-carousel--pages {
    position: relative;
    padding: 0 56px;
    margin-top: 8px;
}
.mg-distribution .mgd-carousel--pages .mgd-carousel-viewport {
    overflow: hidden;
    border-radius: 6px;
}
.mg-distribution .mgd-carousel--pages .mgd-carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.mg-distribution .mgd-carousel-page {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 4px;
    box-sizing: border-box;
}
.mg-distribution .mgd-carousel-page .mgd-gallery-item--slim {
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.mg-distribution .mgd-carousel-page .mgd-gallery-media {
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mg-distribution .mgd-carousel-page .mgd-gallery-item--slim:hover .mgd-gallery-media {
    transform: scale(1.08);
}

/* Dots pagination under the slider. */
.mg-distribution .mgd-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.mg-distribution .mgd-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    background: rgba(79, 125, 138, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.mg-distribution .mgd-carousel-dot.is-active {
    background: var(--mgd-gold, #c8a96a);
    width: 24px;
    border-radius: 4px;
}
.mg-distribution .mgd-carousel-dot:hover { background: var(--mgd-primary, #4f7d8a); }

/* Responsive: tablet → 2 cols, mobile → 1 col. */
@media (max-width: 991.98px) {
    .mg-distribution .mgd-carousel--pages { padding: 0 44px; }
    .mg-distribution .mgd-carousel-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .mg-distribution .mgd-carousel-page .mgd-gallery-item--slim { height: 200px; }
}
@media (max-width: 575.98px) {
    .mg-distribution .mgd-carousel--pages { padding: 0 40px; }
    .mg-distribution .mgd-carousel-page { grid-template-columns: 1fr; gap: 14px; }
    .mg-distribution .mgd-carousel-page .mgd-gallery-item--slim { height: 200px; }
}

/* =====================================================================
   MG Distribution — Header polish (July 2026)
   Kill the "active" underline / pill on Distribution nav links; keep
   the subtle hover effect only.
   ===================================================================== */
.navbar--distribution .navbar-nav .nav-item.active .nav-link {
    /* Reset active-state colours to normal — no gold pill.
       NOTE: `width: 0` must NEVER be applied here - it collapsed the active
       <a> to zero width so the active label overlapped the next item. */
    color: inherit !important;
    background: transparent !important;
}
.navbar--distribution .navbar-nav .nav-item.active .nav-link::after {
    /* Only the underline pseudo-element gets zeroed out. */
    width: 0 !important;
    background: transparent !important;
}
.navbar--distribution .navbar-nav .nav-item.active .nav-link:hover::after {
    /* Restore the hover underline so hovering an "active" link still animates. */
    width: calc(100% - 12px) !important;
    left: 6px;
    background: var(--mgd-gold, #c8a96a) !important;
}
.navbar--distribution .navbar-nav .nav-item.active .nav-link:hover {
    color: var(--mgd-gold, #c8a96a) !important;
}

/* MG Distribution — Nav spacing fix + gold-only hover (July 2026). */

/* Ensure left-hand nav items have room to breathe on desktop. */
.navbar--distribution .navbar-nav { align-items: center; }
.navbar--distribution .navbar-nav .nav-item { margin: 0 4px; }
.navbar--distribution .navbar-nav .nav-link {
    padding: 10px 16px !important;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Simple gold-text hover — no underline, no shadow, no circle. */
.navbar--distribution .navbar-nav .nav-link::after,
.navbar--distribution .navbar-nav .nav-link::before {
    content: none !important;
    display: none !important;
}
.navbar--distribution .navbar-nav .nav-link:hover,
.navbar--distribution .navbar-nav .nav-link:focus,
.navbar--distribution .navbar-nav .nav-link:focus-visible {
    color: var(--mgd-gold, #c8a96a) !important;
    background: transparent !important;
    outline: none;
}
/* Active state — no gold, no pill, just inherit. */
.navbar--distribution .navbar-nav .nav-item.active .nav-link {
    color: inherit !important;
    background: transparent !important;
}
.navbar--distribution .navbar-nav .nav-item.active .nav-link:hover {
    color: var(--mgd-gold, #c8a96a) !important;
}

/* =====================================================================
   MG Distribution — Mobile fixes v3 (July 2026)
   1. Cap header logo height on mobile so the img doesn't blow up.
   2. Kill the left-border pseudo on the founder card.
   3. Projects slider: on mobile flatten every image into its own page
      (JS handles this at runtime — the mobile CSS below just tightens
      the visual so a single-image page fills the viewport cleanly).
   ===================================================================== */

/* ── 1. Mobile header brand image ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .navbar .navbar-brand-one img { max-height: 40px; width: auto; }
    .navbar--distribution .navbar-brand-one img { max-height: 70px; }
}
@media (max-width: 575.98px) {
    .navbar .navbar-brand-one img { max-height: 34px; }
    .navbar--distribution .navbar-brand-one img { max-height: 70px; }
}

/* ── 2. Founder cards — remove the vertical rule on hover ────────── */
.mg-distribution .mgd-founder--rich::before { content: none !important; display: none !important; }
[dir="rtl"] .mg-distribution .mgd-founder--rich::before { content: none !important; display: none !important; }

/* ── 3. Projects slider on mobile ─────────────────────────────────
   When JS flattens each item into its own single-item page, the page
   only has 1 slim tile. Make sure the tile fills the viewport nicely. */
@media (max-width: 575.98px) {
    .mg-distribution .mgd-carousel-page { grid-template-columns: 1fr; }
    .mg-distribution .mgd-carousel-page .mgd-gallery-item--slim { height: 240px; }
    .mg-distribution .mgd-carousel-dots { flex-wrap: wrap; row-gap: 6px; max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* MG Distribution — Language pill: kill the teal background (July 2026).
   The lang switcher should stay transparent with the white ENG/ARB text,
   and simply change text color to gold on hover — matching the nav links. */
.navbar--distribution .btn-mgnav,
.mg-distribution-page .btn-mgnav {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
}
.navbar--distribution .btn-mgnav:hover,
.navbar--distribution .btn-mgnav:focus,
.navbar--distribution .btn-mgnav:hover li > span,
.mg-distribution-page .btn-mgnav:hover,
.mg-distribution-page .btn-mgnav:focus {
    background-color: transparent !important;
    border-color: var(--mgd-gold, #c8a96a) !important;
    color: var(--mgd-gold, #c8a96a) !important;
}
.navbar--distribution .btn-mgnav li > span,
.mg-distribution-page .btn-mgnav li > span { color: inherit !important; }

/* MG Distribution — Nav hover FINAL (July 2026)
   The base override at line 3143 uses .navbar.navbar-dark.navbar--distribution
   which beats my earlier .navbar--distribution rules on specificity — that's
   why HOME kept its blue pill (widening it and pushing ABOUT into overlap)
   and why hover never went gold. Match the specificity here and win. */

.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-item { margin: 0 6px !important; }
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link {
    padding: 10px 14px !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    transition: color 0.3s ease !important;
    box-shadow: none !important;
}
/* Kill any residual pseudo-element underlines / pills. */
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link::before,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}
/* Active state — no pill, no gold. */
.navbar.navbar-dark.navbar--distribution .navbar-nav .active > .nav-link,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link.active,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link.show,
.navbar.navbar-dark.navbar--distribution .navbar-nav .show > .nav-link {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: var(--mgd-gold, #c8a96a) !important;
}
/* Only hover/focus/active-hover turn the text gold — nothing else. */
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link:hover,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link:focus,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link:focus-visible,
.navbar.navbar-dark.navbar--distribution .navbar-nav .active > .nav-link:hover,
.navbar.navbar-dark.navbar--distribution .navbar-nav .nav-link.active:hover {
    color: var(--mgd-gold, #c8a96a) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    outline: none;
}

/* =====================================================================
   MG Finishing — UI/UX v2 mirror (August 2026)
   Auto-cloned from the MG Distribution v2 block. Same structure,
   different palette (rust vs teal). Any style edit you want to keep
   in sync between the two brands should live above this block.
   ===================================================================== */


/* MG Finishing - v2 mirror cloned from Distribution. */
/* =====================================================================
   MG Finishing — UI/UX v2 (July 2026)
   Corporate refinements: hero CTA, transparent sticky navbar, counter
   animation, larger founder cards, richer core values, gallery hover
   overlay, partner marquee, business process timeline.
   All rules scoped to .mg-finishing or .mg-finishing-page.
   ===================================================================== */

/* ---------- 1. NAVBAR (transparent + blur, wider spacing, better hover) --- */
.navbar--finishing {
    background: transparent !important;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background 0.35s ease, backdrop-filter 0.35s ease,
                box-shadow 0.35s ease, padding 0.35s ease;
}
.navbar--finishing.is-scrolled {
    background: rgba(20, 32, 40, 0.72) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.navbar--finishing .navbar-nav .nav-item { margin: 0 6px; }
.navbar--finishing .navbar-nav .nav-link {
    position: relative;
    padding: 10px 6px !important;
    letter-spacing: 1.4px;
    transition: color 0.3s ease;
}
.navbar--finishing .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--mgf-gold, #c8a96a);
    transition: width 0.35s ease, left 0.35s ease;
}
.navbar--finishing .navbar-nav .nav-link:hover,
.navbar--finishing .navbar-nav .nav-item.active .nav-link {
    color: var(--mgf-gold, #c8a96a) !important;
}
.navbar--finishing .navbar-nav .nav-link:hover::after,
.navbar--finishing .navbar-nav .nav-item.active .nav-link::after {
    width: calc(100% - 12px);
    left: 6px;
}

/* ---------- 2. HERO — elegant primary CTA -------------------------- */
.mg-finishing .mgf-hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 36px 0 48px;
}
.mg-finishing .mgf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease,
                background 0.35s ease, color 0.35s ease;
    isolation: isolate;
}
.mg-finishing .mgf-btn--primary {
    background: var(--mgf-gold, #c8a96a);
    color: #1b2a33;
    box-shadow: 0 10px 26px rgba(200, 169, 106, 0.28);
}
.mg-finishing .mgf-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #d9bb7d, #c8a96a 45%, #b18d4d);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}
.mg-finishing .mgf-btn--primary:hover,
.mg-finishing .mgf-btn--primary:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(200, 169, 106, 0.42);
    color: #1b2a33;
    text-decoration: none;
}
.mg-finishing .mgf-btn--primary:hover::before { opacity: 1; }
.mg-finishing .mgf-btn-icon { transition: transform 0.35s ease; }
.mg-finishing .mgf-btn:hover .mgf-btn-icon { transform: translateX(6px); }

.mg-finishing .mgf-hero-scroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    animation: mgdBounce 2.2s ease-in-out infinite;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    text-decoration: none;
}
.mg-finishing .mgf-hero-scroll:hover {
    color: var(--mgf-gold, #c8a96a);
    border-color: var(--mgf-gold, #c8a96a);
    background: rgba(200, 169, 106, 0.08);
}
@keyframes mgdBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ---------- 3. ABOUT — highlighted words ---------------------- */
.mg-finishing .mgf-about-copy p b,
.mg-finishing .mgf-founders-copy p b,
.mg-finishing .mgf-founders-lead b {
    color: var(--mgf-gold, #c8a96a);
    font-weight: 600;
}
.mg-finishing .mgf-about-copy p {
    font-size: 16px;
    line-height: 1.85;
    color: #4a5560;
}

/* ---------- 4. STATS — counter numbers ----------------------- */
.mg-finishing .mgf-stat-num {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1ch;
}

/* ---------- 5. FOUNDERS — richer cards ------------------------ */
.mg-finishing .mgf-founders-grid--rich { row-gap: 28px; }
.mg-finishing .mgf-founder--rich {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 28px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(79, 125, 138, 0.10);
    box-shadow: 0 10px 30px rgba(20, 32, 40, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    height: 100%;
    overflow: hidden;
}
.mg-finishing .mgf-founder--rich::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mgf-gold, #c8a96a), var(--mgf-primary, #4f7d8a));
    transform: scaleY(0.25);
    transform-origin: top;
    transition: transform 0.4s ease;
}
.mg-finishing .mgf-founder--rich:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 106, 0.35);
    box-shadow: 0 22px 46px rgba(20, 32, 40, 0.12);
}
.mg-finishing .mgf-founder--rich:hover::before { transform: scaleY(1); }
.mg-finishing .mgf-founder--rich .mgf-founder-photo {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(20, 32, 40, 0.15);
}
.mg-finishing .mgf-founder--rich .mgf-founder-body { flex: 1; min-width: 0; }
.mg-finishing .mgf-founder--rich .mgf-founder-name {
    font-size: 20px;
    margin: 0 0 4px;
    color: #1b2a33;
}
.mg-finishing .mgf-founder--rich .mgf-founder-role {
    display: block;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mgf-primary, #4f7d8a);
    margin-bottom: 12px;
}
.mg-finishing .mgf-founder-bio {
    font-size: 14.5px;
    line-height: 1.7;
    color: #5a6773;
    margin: 0 0 18px;
}
.mg-finishing .mgf-founder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(79, 125, 138, 0.12);
}
.mg-finishing .mgf-founder-meta-item { display: flex; flex-direction: column; gap: 6px; }
.mg-finishing .mgf-founder-meta-item--tags { flex: 1; min-width: 180px; }
.mg-finishing .mgf-founder-meta-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--mgf-gold, #c8a96a);
    line-height: 1;
}
.mg-finishing .mgf-founder-meta-label {
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8a95a1;
}
.mg-finishing .mgf-founder-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-finishing .mgf-founder-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--mgf-primary-dark, #3a5f6a);
    background: rgba(79, 125, 138, 0.08);
    border-radius: 999px;
}
.mg-finishing .mgf-founder-linkedin {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(79, 125, 138, 0.10);
    color: var(--mgf-primary, #4f7d8a);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.mg-finishing .mgf-founder-linkedin:hover {
    background: var(--mgf-primary, #4f7d8a);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.mg-finishing .mgf-founders-copy--center {
    max-width: 780px;
    margin: 40px auto 0;
    text-align: center;
    padding-left: 0;
    border-left: none;
}
.mg-finishing .mgf-founders-copy--center p { font-size: 16px; color: #4a5560; }

/* ---------- 6. CORE VALUES — bigger icons, brighter numbers, equal height --- */
.mg-finishing .mgf-values-grid--3 { align-items: stretch; }
.mg-finishing .mgf-values-grid--3 > [class*="col-"] { display: flex; }
.mg-finishing .mgf-values-grid--3 .mgf-value-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 44px 32px 34px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-finishing .mgf-value-card .mgf-value-number {
    font-size: 92px;
    line-height: 1;
    color: rgba(200, 169, 106, 0.28);
    font-weight: 800;
    transition: color 0.4s ease, transform 0.4s ease;
}
.mg-finishing .mgf-value-card:hover .mgf-value-number {
    color: rgba(200, 169, 106, 0.55);
    transform: translateY(-4px);
}
.mg-finishing .mgf-value-card .mgf-value-icon {
    width: 68px;
    height: 68px;
    font-size: 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mgf-primary, #4f7d8a), var(--mgf-primary-dark, #3a5f6a));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(79, 125, 138, 0.28);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mg-finishing .mgf-value-card:hover .mgf-value-icon {
    transform: translateY(-4px) rotate(-4deg);
    box-shadow: 0 16px 30px rgba(79, 125, 138, 0.38);
}
.mg-finishing .mgf-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(20, 32, 40, 0.10);
    border-color: rgba(200, 169, 106, 0.35);
}
.mg-finishing .mgf-value-title { font-size: 20px; margin-top: 20px; }
.mg-finishing .mgf-value-desc { font-size: 15px; line-height: 1.75; color: #5a6773; margin-top: auto; }

/* ---------- 7. GALLERY — dark overlay + zoom + smooth transition --------- */
.mg-finishing .mgf-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.mg-finishing .mgf-gallery-media {
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mg-finishing .mgf-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 32, 40, 0.05) 0%,
        rgba(20, 32, 40, 0.25) 55%,
        rgba(20, 32, 40, 0.78) 100%);
    opacity: 0.85;
    transition: opacity 0.5s ease, background 0.5s ease;
    pointer-events: none;
}
.mg-finishing .mgf-gallery-item:hover .mgf-gallery-overlay {
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(20, 32, 40, 0.35) 0%,
        rgba(20, 32, 40, 0.55) 55%,
        rgba(20, 32, 40, 0.88) 100%);
}
.mg-finishing .mgf-gallery-item:hover .mgf-gallery-media {
    transform: scale(1.10);
}
.mg-finishing .mgf-gallery-caption { z-index: 2; }
.mg-finishing .mgf-gallery-title {
    transition: transform 0.4s ease, color 0.4s ease;
}
.mg-finishing .mgf-gallery-item:hover .mgf-gallery-title {
    color: var(--mgf-gold, #c8a96a);
    transform: translateY(-3px);
}

/* ---------- 8. PARTNERS — auto-scrolling marquee, larger logos ----- */
.mg-finishing .mgf-partners-marquee {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    margin-top: 12px;
    mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.mg-finishing .mgf-partners-track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: mgdMarquee 35s linear infinite;
}
.mg-finishing .mgf-partners-marquee:hover .mgf-partners-track { animation-play-state: paused; }
@keyframes mgdMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mg-finishing .mgf-partner-tile {
    flex: 0 0 auto;
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(79, 125, 138, 0.10);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.mg-finishing .mgf-partner-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 106, 0.45);
    box-shadow: 0 14px 32px rgba(20, 32, 40, 0.10);
}
.mg-finishing .mgf-partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.mg-finishing .mgf-partner-tile:hover .mgf-partner-logo {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* ---------- 9. BUSINESS PROCESS TIMELINE ------------------------- */
.mg-finishing .mgf-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr) ;
    gap: 0;
    align-items: start;
    margin-top: 20px;
}
.mg-finishing .mgf-timeline-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 18px;
}
.mg-finishing .mgf-timeline-marker {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    border: 2px dashed rgba(200, 169, 106, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.mg-finishing .mgf-timeline-step:hover .mgf-timeline-marker {
    transform: translateY(-4px) rotate(4deg);
    border-color: var(--mgf-gold, #c8a96a);
    box-shadow: 0 18px 32px rgba(20, 32, 40, 0.10);
}
.mg-finishing .mgf-timeline-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mgf-primary, #4f7d8a), var(--mgf-primary-dark, #3a5f6a));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 18px rgba(79, 125, 138, 0.28);
}
.mg-finishing .mgf-timeline-num {
    position: absolute;
    top: -10px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mgf-gold, #c8a96a);
    color: #1b2a33;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(200, 169, 106, 0.4);
}
.mg-finishing .mgf-timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #1b2a33;
    margin: 0 0 8px;
    letter-spacing: 0.4px;
}
.mg-finishing .mgf-timeline-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #5a6773;
    margin: 0;
}
.mg-finishing .mgf-timeline-connector {
    position: absolute;
    top: 48px;
    right: -12px;
    color: rgba(79, 125, 138, 0.45);
    font-size: 20px;
}
.mg-finishing .mgf-timeline-arrow--v { display: none; }

/* Responsive: timeline goes vertical on tablet/mobile */
@media (max-width: 991.98px) {
    .mg-finishing .mgf-timeline { grid-template-columns: 1fr; gap: 28px; }
    .mg-finishing .mgf-timeline-step {
        flex-direction: row;
        text-align: left;
        gap: 22px;
        padding: 0;
    }
    .mg-finishing .mgf-timeline-marker { flex: 0 0 96px; margin-bottom: 0; }
    .mg-finishing .mgf-timeline-body { flex: 1; padding-top: 8px; }
    .mg-finishing .mgf-timeline-connector {
        position: absolute;
        top: auto;
        right: auto;
        left: 47px;
        bottom: -22px;
    }
    .mg-finishing .mgf-timeline-arrow--h { display: none; }
    .mg-finishing .mgf-timeline-arrow--v { display: inline-block; }
}
[dir="rtl"] .mg-finishing .mgf-timeline-connector { right: auto; left: -12px; transform: scaleX(-1); }

/* ---------- 10. FOUNDER RTL --------------------------------- */
[dir="rtl"] .mg-finishing .mgf-founder-linkedin { right: auto; left: 20px; }
[dir="rtl"] .mg-finishing .mgf-founder--rich::before { left: auto; right: 0; }

/* ---------- 11. MOBILE FINE-TUNES --------------------------- */
@media (max-width: 767.98px) {
    .mg-finishing .mgf-founder--rich { flex-direction: column; text-align: center; }
    .mg-finishing .mgf-founder--rich .mgf-founder-photo { margin: 0 auto; }
    .mg-finishing .mgf-founder-tags { justify-content: center; }
    .mg-finishing .mgf-founder-meta { justify-content: center; }
    .mg-finishing .mgf-founder-linkedin { position: static; margin-top: 12px; }
    .mg-finishing .mgf-partner-tile { width: 160px; height: 100px; padding: 14px 18px; }
    .mg-finishing .mgf-value-card .mgf-value-number { font-size: 72px; }
    .mg-finishing .mgf-value-card .mgf-value-icon { width: 58px; height: 58px; font-size: 24px; }
}

/* =====================================================================
   MG Finishing — Projects Carousel (July 2026)
   Middle-of-gallery auto-rotating slider, 3 slides visible on desktop.
   ===================================================================== */
.mg-finishing .mgf-carousel {
    position: relative;
    margin: 40px 0;
    padding: 0 56px;
}
.mg-finishing .mgf-carousel-viewport {
    overflow: hidden;
    border-radius: 6px;
}
.mg-finishing .mgf-carousel-track {
    display: flex;
    gap: 0;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.mg-finishing .mgf-carousel-slide {
    flex: 0 0 33.3333%;
    padding: 0 10px;
    box-sizing: border-box;
}
.mg-finishing .mgf-gallery-item--slim {
    height: 260px;
}
.mg-finishing .mgf-gallery-item--slim .mgf-gallery-media {
    height: 100%;
}
.mg-finishing .mgf-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(79, 125, 138, 0.20);
    color: var(--mgf-primary, #4f7d8a);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(20, 32, 40, 0.10);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    z-index: 3;
}
.mg-finishing .mgf-carousel-nav:hover {
    background: var(--mgf-gold, #c8a96a);
    color: #1b2a33;
    border-color: var(--mgf-gold, #c8a96a);
    transform: translateY(-50%) scale(1.06);
}
.mg-finishing .mgf-carousel-nav--prev { left: 4px; }
.mg-finishing .mgf-carousel-nav--next { right: 4px; }
[dir="rtl"] .mg-finishing .mgf-carousel-nav--prev { left: auto; right: 4px; }
[dir="rtl"] .mg-finishing .mgf-carousel-nav--next { right: auto; left: 4px; }

@media (max-width: 991.98px) {
    .mg-finishing .mgf-carousel { padding: 0 44px; }
    .mg-finishing .mgf-carousel-slide { flex: 0 0 50%; }
    .mg-finishing .mgf-gallery-item--slim { height: 220px; }
}
@media (max-width: 575.98px) {
    .mg-finishing .mgf-carousel { padding: 0 40px; }
    .mg-finishing .mgf-carousel-slide { flex: 0 0 100%; }
    .mg-finishing .mgf-gallery-item--slim { height: 200px; }
    .mg-finishing .mgf-carousel-nav { width: 36px; height: 36px; font-size: 13px; }
}

/* =====================================================================
   MG Finishing — RTL fixes (July 2026)
   Keep decorative numbers, icons and connectors positioned exactly as
   the LTR layout in Arabic mode. Only text content flips direction —
   the visual composition of the cards / timeline stays the same so
   the number never collides with the icon.
   ===================================================================== */

/* ── Core Values: number badge stays top-right in both directions ── */
[dir="rtl"] .mg-finishing .mgf-value-card {
    text-align: right;
}
[dir="rtl"] .mg-finishing .mgf-value-number {
    right: 16px;
    left: auto;
}
/* If a downstream override placed it on the left in RTL, undo it. */
[dir="rtl"] .mg-finishing .mgf-values-grid--3 .mgf-value-card {
    text-align: right;
}

/* ── Business Process timeline: keep num badge on top-right corner ── */
[dir="rtl"] .mg-finishing .mgf-timeline-num {
    right: -6px;
    left: auto;
}
/* Horizontal connector arrow stays pointing forward in reading direction:
   in RTL the flow goes right → left, so mirror the chevron only, not
   the position. Timeline steps are laid out with grid so the flow order
   naturally reverses; the arrow at each step's edge stays visually
   consistent with that flow. */
[dir="rtl"] .mg-finishing .mgf-timeline-connector {
    right: auto;
    left: -12px;
}
[dir="rtl"] .mg-finishing .mgf-timeline-arrow--h {
    transform: scaleX(-1);
}
/* Mobile vertical timeline connector: reset the RTL offset override
   because the vertical arrow sits under the marker, not to the side. */
@media (max-width: 991.98px) {
    [dir="rtl"] .mg-finishing .mgf-timeline-connector {
        left: 47px;
        right: auto;
        bottom: -22px;
        top: auto;
    }
    [dir="rtl"] .mg-finishing .mgf-timeline-arrow--h { display: none; }
    [dir="rtl"] .mg-finishing .mgf-timeline-arrow--v { transform: none; }
    /* Mobile RTL: swap row direction so marker sits on the right of text. */
    [dir="rtl"] .mg-finishing .mgf-timeline-step { flex-direction: row-reverse; }
    [dir="rtl"] .mg-finishing .mgf-timeline-body { text-align: right; }
}

/* ── RTL text alignment for card bodies ── */
[dir="rtl"] .mg-finishing .mgf-value-title,
[dir="rtl"] .mg-finishing .mgf-value-desc,
[dir="rtl"] .mg-finishing .mgf-timeline-title,
[dir="rtl"] .mg-finishing .mgf-timeline-desc {
    text-align: inherit;
}

/* =====================================================================
   MG Finishing — Projects paged slider (July 2026)
   Each page = one full-width slide containing a 3×2 responsive grid
   of 6 project images. Pagination via prev/next + dots.
   ===================================================================== */
.mg-finishing .mgf-carousel--pages {
    position: relative;
    padding: 0 56px;
    margin-top: 8px;
}
.mg-finishing .mgf-carousel--pages .mgf-carousel-viewport {
    overflow: hidden;
    border-radius: 6px;
}
.mg-finishing .mgf-carousel--pages .mgf-carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.mg-finishing .mgf-carousel-page {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 4px;
    box-sizing: border-box;
}
.mg-finishing .mgf-carousel-page .mgf-gallery-item--slim {
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.mg-finishing .mgf-carousel-page .mgf-gallery-media {
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mg-finishing .mgf-carousel-page .mgf-gallery-item--slim:hover .mgf-gallery-media {
    transform: scale(1.08);
}

/* Dots pagination under the slider. */
.mg-finishing .mgf-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.mg-finishing .mgf-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    background: rgba(79, 125, 138, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.mg-finishing .mgf-carousel-dot.is-active {
    background: var(--mgf-gold, #c8a96a);
    width: 24px;
    border-radius: 4px;
}
.mg-finishing .mgf-carousel-dot:hover { background: var(--mgf-primary, #4f7d8a); }

/* Responsive: tablet → 2 cols, mobile → 1 col. */
@media (max-width: 991.98px) {
    .mg-finishing .mgf-carousel--pages { padding: 0 44px; }
    .mg-finishing .mgf-carousel-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .mg-finishing .mgf-carousel-page .mgf-gallery-item--slim { height: 200px; }
}
@media (max-width: 575.98px) {
    .mg-finishing .mgf-carousel--pages { padding: 0 40px; }
    .mg-finishing .mgf-carousel-page { grid-template-columns: 1fr; gap: 14px; }
    .mg-finishing .mgf-carousel-page .mgf-gallery-item--slim { height: 200px; }
}

/* =====================================================================
   MG Finishing — Header polish (July 2026)
   Kill the "active" underline / pill on Distribution nav links; keep
   the subtle hover effect only.
   ===================================================================== */
.navbar--finishing .navbar-nav .nav-item.active .nav-link {
    /* Reset active-state colours to normal — no gold pill.
       NOTE: `width: 0` must NEVER be applied here (it used to be, via a
       shared selector list with `::after`) - it collapsed the active <a>
       to zero width so "ABOUT" overlapped the next item. */
    color: inherit !important;
    background: transparent !important;
}
.navbar--finishing .navbar-nav .nav-item.active .nav-link::after {
    /* Only the underline pseudo-element gets zeroed out. */
    width: 0 !important;
    background: transparent !important;
}
.navbar--finishing .navbar-nav .nav-item.active .nav-link:hover::after {
    /* Restore the hover underline so hovering an "active" link still animates. */
    width: calc(100% - 12px) !important;
    left: 6px;
    background: var(--mgf-gold, #c8a96a) !important;
}
.navbar--finishing .navbar-nav .nav-item.active .nav-link:hover {
    color: var(--mgf-gold, #c8a96a) !important;
}

/* MG Finishing — Nav spacing fix + gold-only hover (July 2026). */

/* Ensure left-hand nav items have room to breathe on desktop. */
.navbar--finishing .navbar-nav { align-items: center; }
.navbar--finishing .navbar-nav .nav-item { margin: 0 4px; }
.navbar--finishing .navbar-nav .nav-link {
    padding: 10px 16px !important;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Simple gold-text hover — no underline, no shadow, no circle. */
.navbar--finishing .navbar-nav .nav-link::after,
.navbar--finishing .navbar-nav .nav-link::before {
    content: none !important;
    display: none !important;
}
.navbar--finishing .navbar-nav .nav-link:hover,
.navbar--finishing .navbar-nav .nav-link:focus,
.navbar--finishing .navbar-nav .nav-link:focus-visible {
    color: var(--mgf-gold, #c8a96a) !important;
    background: transparent !important;
    outline: none;
}
/* Active state — no gold, no pill, just inherit. */
.navbar--finishing .navbar-nav .nav-item.active .nav-link {
    color: inherit !important;
    background: transparent !important;
}
.navbar--finishing .navbar-nav .nav-item.active .nav-link:hover {
    color: var(--mgf-gold, #c8a96a) !important;
}

/* =====================================================================
   MG Finishing — Mobile fixes v3 (July 2026)
   1. Cap header logo height on mobile so the img doesn't blow up.
   2. Kill the left-border pseudo on the founder card.
   3. Projects slider: on mobile flatten every image into its own page
      (JS handles this at runtime — the mobile CSS below just tightens
      the visual so a single-image page fills the viewport cleanly).
   ===================================================================== */

/* ── 1. Mobile header brand image ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .navbar .navbar-brand-one img { max-height: 40px; width: auto; }
    .navbar--finishing .navbar-brand-one img { max-height: 38px; }
}
@media (max-width: 575.98px) {
    .navbar .navbar-brand-one img { max-height: 34px; }
    .navbar--finishing .navbar-brand-one img { max-height: 32px; }
}

/* ── 2. Founder cards — remove the vertical rule on hover ────────── */
.mg-finishing .mgf-founder--rich::before { content: none !important; display: none !important; }
[dir="rtl"] .mg-finishing .mgf-founder--rich::before { content: none !important; display: none !important; }

/* ── 3. Projects slider on mobile ─────────────────────────────────
   When JS flattens each item into its own single-item page, the page
   only has 1 slim tile. Make sure the tile fills the viewport nicely. */
@media (max-width: 575.98px) {
    .mg-finishing .mgf-carousel-page { grid-template-columns: 1fr; }
    .mg-finishing .mgf-carousel-page .mgf-gallery-item--slim { height: 240px; }
    .mg-finishing .mgf-carousel-dots { flex-wrap: wrap; row-gap: 6px; max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* MG Finishing — Language pill: kill the teal background (July 2026).
   The lang switcher should stay transparent with the white ENG/ARB text,
   and simply change text color to gold on hover — matching the nav links. */
.navbar--finishing .btn-mgnav,
.mg-finishing-page .btn-mgnav {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
}
.navbar--finishing .btn-mgnav:hover,
.navbar--finishing .btn-mgnav:focus,
.navbar--finishing .btn-mgnav:hover li > span,
.mg-finishing-page .btn-mgnav:hover,
.mg-finishing-page .btn-mgnav:focus {
    background-color: transparent !important;
    border-color: var(--mgf-gold, #c8a96a) !important;
    color: var(--mgf-gold, #c8a96a) !important;
}
.navbar--finishing .btn-mgnav li > span,
.mg-finishing-page .btn-mgnav li > span { color: inherit !important; }

/* MG Finishing — Nav hover FINAL (July 2026)
   The base override at line 3143 uses .navbar.navbar-dark.navbar--finishing
   which beats my earlier .navbar--finishing rules on specificity — that's
   why HOME kept its blue pill (widening it and pushing ABOUT into overlap)
   and why hover never went gold. Match the specificity here and win. */

.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-item { margin: 0 6px !important; }
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link {
    padding: 10px 14px !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    transition: color 0.3s ease !important;
    box-shadow: none !important;
}
/* Kill any residual pseudo-element underlines / pills. */
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link::before,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}
/* Active state — no pill, no gold. */
.navbar.navbar-dark.navbar--finishing .navbar-nav .active > .nav-link,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link.active,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link.show,
.navbar.navbar-dark.navbar--finishing .navbar-nav .show > .nav-link {
    background-color: transparent !important;
    border-radius: 0 !important;
    color: var(--mgf-gold, #c8a96a) !important;
}
/* Only hover/focus/active-hover turn the text gold — nothing else. */
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link:hover,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link:focus,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link:focus-visible,
.navbar.navbar-dark.navbar--finishing .navbar-nav .active > .nav-link:hover,
.navbar.navbar-dark.navbar--finishing .navbar-nav .nav-link.active:hover {
    color: var(--mgf-gold, #c8a96a) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    outline: none;
}

/* =====================================================================
   MG Finishing — UI/UX v2 mirror (August 2026)
   Auto-cloned from the MG Finishing v2 block. Same structure,
   different palette (rust vs teal). Any style edit you want to keep
   in sync between the two brands should live above this block.
   ===================================================================== */

/* ============================================================
   MG FINISHING - About Us right-side image slider
   (cloned from .mg-distribution .mgd-about-slider)
   ============================================================ */
.mg-finishing .mgf-about-slider {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    aspect-ratio: 4 / 5;
    background: #1f1f1f;
}
.mg-finishing .mgf-about-slider-viewport { position: absolute; inset: 0; }
.mg-finishing .mgf-about-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease, transform 6s ease;
    z-index: 1;
}
.mg-finishing .mgf-about-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}
.mg-finishing .mgf-about-slider-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
    z-index: 3;
    pointer-events: none;
}
.mg-finishing .mgf-about-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    color: var(--mgf-primary, #c06b43);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 16px rgba(0,0,0,0.20);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.mg-finishing .mgf-about-slider-nav:hover {
    background: var(--mgf-gold, #c8a96a);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.mg-finishing .mgf-about-slider-nav--prev { left: 14px; }
.mg-finishing .mgf-about-slider-nav--next { right: 14px; }
.mg-finishing .mgf-about-slider-dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.mg-finishing .mgf-about-slider-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.85);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.mg-finishing .mgf-about-slider-dot.is-active {
    background: var(--mgf-gold, #c8a96a);
    border-color: var(--mgf-gold, #c8a96a);
    width: 24px;
    border-radius: 5px;
}
@media (max-width: 991px) {
    .mg-finishing .mgf-about-slider { aspect-ratio: 16 / 10; }
    .mg-finishing .mgf-about-copy .mgf-section-kicker,
    .mg-finishing .mgf-about-copy .mgf-section-title { text-align: left; }
}
@media (max-width: 575px) {
    .mg-finishing .mgf-about { padding-top: 60px; padding-bottom: 60px; }
    .mg-finishing .mgf-about-slider { aspect-ratio: 4 / 3; }
    .mg-finishing .mgf-about-slider-nav { width: 36px; height: 36px; }
    .mg-finishing .mgf-stats--card { grid-template-columns: 1fr; }
    .mg-finishing .mgf-stats--card .mgf-stat:nth-child(odd)::after { display: none; }
}

/* ============================================================
   MG FINISHING - Stats strip (base + card variant)
   (cloned from .mg-distribution .mgd-stats)
   ============================================================ */
.mg-finishing .mgf-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
    padding: 32px 24px;
    background: linear-gradient(135deg, #c06b43 0%, #a55736 100%);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(192, 107, 67, 0.20);
}
.mg-finishing .mgf-stat {
    text-align: center;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.15);
    padding: 4px 8px;
}
.mg-finishing .mgf-stat:last-child { border-right: none; }
.mg-finishing .mgf-stat-num {
    display: block;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--mgf-gold, #c8a96a);
    line-height: 1;
    margin-bottom: 6px;
}
.mg-finishing .mgf-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}
/* Card variant - 2x2 grid inside About Us left column */
.mg-finishing .mgf-stats--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
    padding: 24px 20px;
    gap: 18px;
}
.mg-finishing .mgf-stats--card .mgf-stat { border-right: none; position: relative; }
.mg-finishing .mgf-stats--card .mgf-stat:nth-child(odd)::after {
    content: ""; position: absolute; right: -9px; top: 15%; bottom: 15%;
    width: 1px; background: rgba(255,255,255,0.18);
}
.mg-finishing .mgf-stats--card .mgf-stat-num { font-size: 32px; }
.mg-finishing .mgf-stats--card .mgf-stat-label { font-size: 11px; letter-spacing: 1.6px; }
@media (max-width: 991px) {
    .mg-finishing .mgf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .mg-finishing .mgf-stats { grid-template-columns: 1fr; padding: 24px 16px; gap: 18px; }
    .mg-finishing .mgf-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 14px; }
    .mg-finishing .mgf-stat:last-child { border-bottom: none; padding-bottom: 4px; }
    .mg-finishing .mgf-stats .mgf-stat-num { font-size: 32px; }
}

/* ============================================================
   MG FINISHING - Text wordmark (used in navbar when no logo image)
   ============================================================ */
.navbar--finishing .navbar-brand--text {
    padding: 6px 0;
    line-height: 1;
}
.navbar--finishing .mgf-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    line-height: 1;
}
.navbar--finishing .mgf-wordmark-mg {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    line-height: 1;
}
.navbar--finishing .mgf-wordmark-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--mgf-gold, #c8a96a);
    text-transform: uppercase;
    padding-top: 3px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    line-height: 1;
}
.navbar--finishing.is-scrolled .mgf-wordmark-mg,
.navbar--finishing.is-solid .mgf-wordmark-mg {
    color: #1f1f1f;
}
.navbar--finishing.is-scrolled .mgf-wordmark-sub,
.navbar--finishing.is-solid .mgf-wordmark-sub {
    border-top-color: rgba(31, 31, 31, 0.25);
}
@media (max-width: 991px) {
    .navbar--finishing .mgf-wordmark-mg  { font-size: 22px; }
    .navbar--finishing .mgf-wordmark-sub { font-size: 9px; letter-spacing: 2.5px; }
}

/* MG FINISHING — navbar brand logo image (mg-finishing.png).
   Sized to match MG Distribution's header logo exactly. */
.navbar-brand.navbar-brand--finishing {
    padding-top: 4px;
    padding-bottom: 4px;
}
.navbar-brand.navbar-brand-two.navbar-brand--finishing img {
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Mobile / tablet — same cap as .navbar--distribution (70px). */
@media (max-width: 991.98px) {
    .navbar--finishing .navbar-brand-one img { max-height: 70px; width: auto; }
}
@media (max-width: 575.98px) {
    .navbar--finishing .navbar-brand-one img { max-height: 70px; }
}

/* ============================================================================
   MG SHARED — brand-neutral pages (News / References / Contact)
   Belongs to no brand; used under every MG sub-brand navbar.
   Palette: deep graphite hero + gold accent + off-white body.
   ============================================================================ */
.mg-shared {
    --mgs-primary:      #1e2a33;
    --mgs-primary-dark: #12181d;
    --mgs-gold:         #c8a96a;
    --mgs-gold-dark:    #a78849;
    --mgs-ink:          #1f2933;
    --mgs-muted:        #6a7480;
    --mgs-line:         rgba(30, 42, 51, 0.10);
    --mgs-bg:           #fbfaf7;
    --mgs-card:         #ffffff;
    --mgs-radius:       10px;
    --mgs-ease:         cubic-bezier(0.2, 0.8, 0.2, 1);

    display: block;
    background: var(--mgs-bg);
    color: var(--mgs-ink);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ─── HERO band ───────────────────────────────────────────────────────────── */
.mg-shared .mg-shared-hero {
    position: relative;
    padding: 110px 0 90px;
    background:
        radial-gradient(circle at 15% 20%, rgba(200,169,106,0.10), transparent 60%),
        linear-gradient(135deg, #1e2a33 0%, #12181d 100%);
    color: #fff;
    overflow: hidden;
}
.mg-shared .mg-shared-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--mgs-gold) 30%, var(--mgs-gold) 70%, transparent);
    opacity: 0.85;
}
.mg-shared .mg-shared-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--mgs-gold);
    margin-bottom: 18px;
}
.mg-shared .mg-shared-title {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
    margin: 0 0 22px;
    line-height: 1.05;
}
.mg-shared .mg-shared-rule {
    width: 64px; height: 3px;
    background: var(--mgs-gold);
    border-radius: 2px;
    margin: 0 0 22px;
}
.mg-shared .mg-shared-rule.mg-shared-rule--sm {
    width: 44px; height: 2px;
}
.mg-shared .mg-shared-sub {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,0.78);
    margin: 0;
}

/* ─── Content block wrapper ───────────────────────────────────────────────── */
.mg-shared .mg-shared-block {
    padding: 80px 0;
}
.mg-shared .mg-shared-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mgs-gold-dark);
    margin-bottom: 10px;
}
.mg-shared .mg-shared-section-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--mgs-ink);
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}

/* ─── NEWS grid ───────────────────────────────────────────────────────────── */
.mg-shared .mg-shared-news-grid { row-gap: 32px; }
.mg-shared .mg-shared-news-card {
    background: var(--mgs-card);
    border: 1px solid var(--mgs-line);
    border-radius: var(--mgs-radius);
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s var(--mgs-ease), box-shadow 0.35s var(--mgs-ease), border-color 0.35s var(--mgs-ease);
}
.mg-shared .mg-shared-news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(20,32,40,0.10);
    border-color: rgba(200,169,106,0.35);
}
.mg-shared .mg-shared-news-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eee;
}
.mg-shared .mg-shared-news-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--mgs-ease);
}
.mg-shared .mg-shared-news-card:hover .mg-shared-news-media img {
    transform: scale(1.06);
}
.mg-shared .mg-shared-news-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.mg-shared .mg-shared-news-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mgs-gold-dark);
    margin-bottom: 10px;
}
.mg-shared .mg-shared-news-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mgs-ink);
    line-height: 1.35;
    margin: 0 0 12px;
}
.mg-shared .mg-shared-news-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--mgs-muted);
    margin: 0 0 18px;
    flex: 1 1 auto;
}
.mg-shared .mg-shared-news-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mgs-ink);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1.5px solid var(--mgs-gold);
    width: fit-content;
    transition: color 0.25s var(--mgs-ease), gap 0.25s var(--mgs-ease);
}
.mg-shared .mg-shared-news-link i { font-size: 11px; }
.mg-shared .mg-shared-news-link:hover {
    color: var(--mgs-gold-dark);
    gap: 12px;
    text-decoration: none;
}

/* ─── REFERENCES grid ─────────────────────────────────────────────────────── */
.mg-shared .mg-shared-refs-head { margin-bottom: 36px; margin-top: 20px; text-align: center; }
.mg-shared .mg-shared-refs-head .mg-shared-rule { margin-left: auto; margin-right: auto; }
.mg-shared .mg-shared-refs-grid { row-gap: 24px; margin-bottom: 40px; }
.mg-shared .mg-shared-logo-tile {
    background: var(--mgs-card);
    border: 1px solid var(--mgs-line);
    border-radius: var(--mgs-radius);
    padding: 22px 18px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--mgs-ease), box-shadow 0.3s var(--mgs-ease), border-color 0.3s var(--mgs-ease);
}
.mg-shared .mg-shared-logo-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(20,32,40,0.08);
    border-color: rgba(200,169,106,0.4);
}
.mg-shared .mg-shared-logo-tile img {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(0.6);
    opacity: 0.85;
    transition: filter 0.3s var(--mgs-ease), opacity 0.3s var(--mgs-ease);
}
.mg-shared .mg-shared-logo-tile:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ─── CONTACT form ─────────────────────────────────────────────────────────── */
.mg-shared .mg-shared-form-card {
    background: var(--mgs-card);
    border: 1px solid var(--mgs-line);
    border-radius: var(--mgs-radius);
    padding: 44px 40px;
    box-shadow: 0 20px 50px rgba(20,32,40,0.06);
}
.mg-shared .mg-shared-form-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mgs-ink);
    letter-spacing: -0.2px;
    margin: 0 0 8px;
}
.mg-shared .mg-shared-form-sub {
    font-size: 14px;
    color: var(--mgs-muted);
    margin: 0 0 26px;
}
.mg-shared .mg-shared-form-card .form-control,
.mg-shared .mg-shared-form-card input.form-control,
.mg-shared .mg-shared-form-card textarea.form-control {
    background: #fff;
    border: 1px solid var(--mgs-line);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--mgs-ink);
    box-shadow: none;
    transition: border-color 0.25s var(--mgs-ease), box-shadow 0.25s var(--mgs-ease);
}
.mg-shared .mg-shared-form-card .form-control:focus {
    border-color: var(--mgs-gold);
    box-shadow: 0 0 0 3px rgba(200,169,106,0.18);
    outline: none;
}
.mg-shared .mg-shared-form-card .form-group { margin-bottom: 16px; }
.mg-shared .mg-shared-form-card textarea.form-control { min-height: 130px; resize: vertical; }
.mg-shared .mg-shared-btn,
.mg-shared .mg-shared-form-card .btn.btn-contactbtn {
    background: var(--mgs-ink);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: background 0.25s var(--mgs-ease), transform 0.25s var(--mgs-ease), box-shadow 0.25s var(--mgs-ease);
    margin-top: 10px;
}
.mg-shared .mg-shared-btn:hover,
.mg-shared .mg-shared-form-card .btn.btn-contactbtn:hover {
    background: var(--mgs-gold-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(200,169,106,0.28);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .mg-shared .mg-shared-hero { padding: 90px 0 70px; }
    .mg-shared .mg-shared-title { font-size: 40px; }
    .mg-shared .mg-shared-block { padding: 60px 0; }
}
@media (max-width: 575px) {
    .mg-shared .mg-shared-hero { padding: 70px 0 55px; }
    .mg-shared .mg-shared-title { font-size: 30px; }
    .mg-shared .mg-shared-sub { font-size: 14px; }
    .mg-shared .mg-shared-block { padding: 45px 0; }
    .mg-shared .mg-shared-form-card { padding: 30px 22px; }
    .mg-shared .mg-shared-logo-tile { height: 100px; padding: 16px 12px; }
    .mg-shared .mg-shared-logo-tile img { max-height: 60px; }
}

/* ─── RTL tweaks ───────────────────────────────────────────────────────────── */
[dir="rtl"] .mg-shared .mg-shared-news-link i { transform: rotate(180deg); }

/* ============================================================================
   MG FINISHING - Wordmark hang fix
   The MG Food centered logo <img> uses `margin-top: 115px` (style.css line 48)
   to drop below the nav row so menu items don't collide. Text wordmarks don't
   inherit that rule -> apply the equivalent offset directly so the wordmark
   hangs below the row exactly like the image would.
   ============================================================================ */
.navbar-brand.navbar-brand-two.navbar-brand--text .mgf-wordmark {
    margin-top: 90px;   /* matches the image's `margin-top: 115px` minus the
                           wordmark's own height so it visually aligns */
    padding-left: 5px;
    padding-right: 5px;
    transition: all 0.5s;
}

/* ============================================================================
   FOOTER - Use the same Sultan Haitham City hero background as the homepage
   mainblock (see style.css `.landing-page .mainblock`) so footer visually
   ties back to the hero. Dark overlay preserves text legibility.
   ============================================================================ */
footer {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url('../images/landingbg.jpg?v=2') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ----------------------------------------------------------------------------
   Footer link hover - group gold, not MG Food lime
   ----------------------------------------------------------------------------
   style.css hovers footer links to `#bdce4a` (the MG Food lime, lines 521 and
   579). The footer is now group-level (Sultan Haitham City backdrop, shared
   across every brand), so use the shared gold accent `#c8a96a` that the
   homepage / brand pages use instead.
   -------------------------------------------------------------------------- */
footer .fdetails .fcontact a:hover,
footer .copyright a:hover,
footer a:hover {
    color: #c8a96a !important;
}

/* Icons sitting next to the phone / email links pick up the accent too. */
footer .fdetails .fcontact a:hover i {
    color: #c8a96a !important;
}

/* ============================================================================
   INNER HERO BANNERS - clear the overlaid nav + drop the breadcrumbs
   ---------------------------------------------------------------------------
   `nav` is `position: absolute; top: 0` (style.css line 14) so it floats ON TOP
   of the first section. The inner banners only had 72px of top padding, so the
   wordmark / breadcrumb collided with the menu row. Push the banner content
   down past the nav and hide the breadcrumbs (redundant - the wordmark + page
   title already say where you are).
   ============================================================================ */
.mgf-crumb,
.mgd-crumb {
    display: none !important;
}

.mgf-inner-banner-inner,
.mgd-inner-banner-inner {
    padding-top: 150px;
    padding-bottom: 64px;
}

.mgf-inner-banner,
.mgd-inner-banner {
    min-height: 380px;
}

@media (max-width: 991px) {
    .mgf-inner-banner-inner,
    .mgd-inner-banner-inner {
        padding-top: 130px;
        padding-bottom: 52px;
    }
    .mgf-inner-banner,
    .mgd-inner-banner { min-height: 330px; }
}

@media (max-width: 575px) {
    .mgf-inner-banner-inner,
    .mgd-inner-banner-inner {
        padding-top: 110px;
        padding-bottom: 40px;
    }
    .mgf-inner-banner,
    .mgd-inner-banner { min-height: 290px; }
}

/* Corporate inner banner (about / contact / products) - same nav clearance */
.inner-banner .row {
    height: auto;
    min-height: 396px;
    padding-top: 120px;
}

/* ============================================================================
   SCROLLBAR JUMP - stop the centered nav from shifting between pages
   ---------------------------------------------------------------------------
   `nav` is absolutely positioned full-width and the menu is centered with
   `.navbar-collapse.justify-content-center`. Tall pages (Home, News) show a
   vertical scrollbar and therefore have ~15px less usable width than short
   pages (About, Contact) - so the centered menu re-centred ~7px to the right
   on those pages. Reserving the scrollbar gutter on every page keeps the
   viewport width constant, so the header never moves.
   ============================================================================ */
html {
    scrollbar-gutter: stable;
}

/* Fallback for browsers without `scrollbar-gutter` (older Safari): always
   render the vertical scrollbar track. */
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

/* ============================================================================
   NAV ACTIVE ITEM - never collapse
   ---------------------------------------------------------------------------
   Safety net. An older rule zeroed the width of the ACTIVE `.nav-link` itself
   (the `width: 0` was meant for its `::after` underline but the two selectors
   shared a declaration block), which made the current page's menu label shrink
   to 0px and overlap the item next to it. The active link must always size
   itself exactly like an inactive one.
   ============================================================================ */
.navbar .navbar-nav .nav-item.active > .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .active > .nav-link,
.navbar .navbar-nav .nav-link.active {
    width: auto !important;
    min-width: 0;
    display: inline-block;
    white-space: nowrap;
}

/* ============================================================================
   ABOUT US - brand re-theme for MG Distribution
   ---------------------------------------------------------------------------
   `about.php` renders the shared "Founders & Vision" block inside a
   `.mg-finishing` scope wrapper (the mgf-* styles are scoped to it). When that
   same view is rendered inside `distribution-about.php` we just re-point the
   mgf-* custom properties at the Distribution teal palette, so the markup and
   content stay identical while the accent colours match the brand.
   ============================================================================ */
.mg-distribution-page .mg-finishing {
    --mgf-primary:      #4f7d8a;   /* teal          (was rust  #c06b43) */
    --mgf-primary-dark: #3a5f6a;   /* deep teal     (was      #a55736) */
    --mgf-gold:         #c8a96a;   /* shared gold accent - unchanged */
    --mgf-cream:        #f5f9fb;   /* cool off-white (was     #fdfaf4) */
    --mgf-warm:         #e6eef2;   /* cool tint      (was     #f7f0e2) */
    --mgf-graphite:     #1f1f1f;
}

/* ============================================================================
   MOBILE NAV - readable dropdown panel
   ---------------------------------------------------------------------------
   `nav` is transparent and absolutely positioned over the hero, and every
   nav link is `color: #fff !important` (style.css line 41). On mobile the
   expanded hamburger panel drops down over the PAGE BODY, which is white -
   so the white links vanished. Give the expanded panel a solid dark surface
   (matching each brand) so the white text stays legible everywhere.
   ============================================================================ */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse.collapse.show,
    .navbar .navbar-collapse.collapsing {
        background: #1f1f1f;
        border-radius: 0 0 14px 14px;
        margin: 8px -12px 0;
        padding: 12px 16px 18px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    }

    /* Brand-tinted panels */
    .navbar--finishing .navbar-collapse.collapse.show,
    .navbar--finishing .navbar-collapse.collapsing {
        background: #a55736;   /* MG Finishing rust */
    }
    .navbar--distribution .navbar-collapse.collapse.show,
    .navbar--distribution .navbar-collapse.collapsing {
        background: #3a5f6a;   /* MG Distribution teal */
    }

    /* Stack the links full width and separate them with hairlines. */
    .navbar .navbar-collapse .navbar-nav { width: 100%; }
    .navbar .navbar-collapse .navbar-nav .nav-item {
        margin: 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .navbar .navbar-collapse .navbar-nav .nav-item:last-child { border-bottom: none; }
    .navbar .navbar-collapse .navbar-nav .nav-link {
        display: block;
        width: 100%;
        color: #ffffff !important;
        padding: 12px 8px !important;
    }

    /* The centered desktop brand image is hidden below lg - make sure its
       115px top offset doesn't leave a gap inside the dropdown. */
    .navbar .navbar-collapse .navbar-brand-two { margin-top: 0; }

    /* Hamburger bars: always white so they read against the hero image. */
    .navbar-toggler.x .icon-bar { background-color: #ffffff !important; }

    /* Mobile brand (left of the hamburger) - keep it off the screen edge.
       `.navbar-brand-one` only had 20px in style.css and the text-wordmark
       variant used on MG Finishing had none at all. */
    .navbar .navbar-brand-one,
    .navbar .navbar-brand-one.navbar-brand--text {
        padding-left: 18px;
        padding-right: 12px;
    }

    /* RTL: mirror the gutter so the logo isn't flush against the right edge. */
    [dir="rtl"] .navbar .navbar-brand-one,
    [dir="rtl"] .navbar .navbar-brand-one.navbar-brand--text {
        padding-left: 12px;
        padding-right: 18px;
    }

    /* Matching gutter on the opposite side for the toggler / language pill. */
    .navbar .navbar-toggler.x { margin-right: 14px; }
    [dir="rtl"] .navbar .navbar-toggler.x { margin-right: 0; margin-left: 14px; }
}

/* ============================================================================
   INNER BANNER - mobile cleanup (About / Contact / Products, both brands)
   ---------------------------------------------------------------------------
   1. The big "MG / FINISHING" (or "MG / DISTRIBUTION") wordmark inside the
      banner duplicates the brand wordmark already shown in the header - drop
      it at ALL widths so the page title is the only headline.
   2. `.container` only gives 15px of side gutter on mobile, which pushed
      "About Us" right up against the left edge. Widen the breathing room.
   ============================================================================ */

/* 1. Kill the duplicated wordmark above the page title - desktop + mobile. */
.mgf-inner-banner .mgf-hero-wordmark,
.mgd-inner-banner .mgd-hero-wordmark {
    display: none !important;
}

@media (max-width: 767.98px) {
    /* 2. Comfortable side padding for the banner copy. */
    .mgf-inner-banner-inner,
    .mgd-inner-banner-inner {
        padding-left: 28px;
        padding-right: 28px;
    }

    /* Same gutter for the corporate banner used on MG Food pages. */
    .inner-banner .container {
        padding-left: 28px;
        padding-right: 28px;
    }

    /* RTL keeps the mirrored gutter automatically, but be explicit so the
       Arabic layout never ends up flush against the right edge. */
    .mg-finishing-page.rtl .mgf-inner-banner-inner,
    .mg-distribution-page.rtl .mgd-inner-banner-inner,
    [dir="rtl"] .mgf-inner-banner-inner,
    [dir="rtl"] .mgd-inner-banner-inner {
        padding-left: 28px;
        padding-right: 28px;
    }
}