/* =========================================================
   MRBLD MEAT CO
   Global Website Design System
   Monteio Africa
========================================================= */


/* -------------------------
   BRAND VARIABLES
------------------------- */

:root {
    --mrbld-red: #A92327;
    --mrbld-red-dark: #7F171B;

    --mrbld-charcoal: #171515;
    --mrbld-brown: #3B2118;

    --mrbld-cream: #F5EFE3;
    --mrbld-cream-light: #FAF6EE;

    --mrbld-kraft: #A9825B;

    --mrbld-grey: #8C857D;
    --mrbld-white: #FFFFFF;

    --mrbld-max-width: 1320px;
}


/* -------------------------
   BASIC GLOBAL SETTINGS
------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--mrbld-cream);
    color: var(--mrbld-charcoal);
}


/* -------------------------
   MRBLD PAGE WRAPPER
------------------------- */

.mrbld-page {
    width: 100%;
    overflow: hidden;
}


/* -------------------------
   STANDARD CONTAINER
------------------------- */

.mrbld-container {
    width: min(90%, var(--mrbld-max-width));
    margin-inline: auto;
}


/* -------------------------
   FOOTER
------------------------- */

.mrbld-footer-statement {
    color: var(--mrbld-cream);
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
}

.mrbld-footer-statement span,
.mrbld-footer-statement strong {
    display: block;
}

.mrbld-footer-statement span {
    font-size: clamp(18px, 1.7vw, 26px);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.mrbld-footer-statement strong {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 600;
    color: var(--mrbld-red);
    margin-top: 3px;
}


.mrbld-footer-column h4 {
    color: var(--mrbld-cream) !important;
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.mrbld-footer-column p {
    color: var(--mrbld-cream);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.mrbld-footer-column a {
    display: block;
    color: var(--mrbld-cream);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    margin-bottom: 7px;
    transition: color 0.25s ease;
}

.mrbld-footer-column a:hover {
    color: var(--mrbld-red);
}


/* Mobile Footer */

@media (max-width: 767px) {

    .mrbld-footer-statement span {
        font-size: 18px;
    }

    .mrbld-footer-statement strong {
        font-size: 22px;
    }

    .mrbld-footer-column {
        margin-bottom: 22px;
    }

}
/* =========================================================
   MRBLD — GLOBAL MOBILE TYPOGRAPHY FIX
   Applies across all custom MRBLD pages
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       GLOBAL MOBILE HEADINGS
    ----------------------------------------- */

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h1 {
        font-size: 38px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.5px !important;
    }


    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h2 {
        font-size: 31px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.2px !important;
    }


    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h3 {
        font-size: 23px !important;
        line-height: 1.1 !important;
    }


    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) p {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
    }


    /* -----------------------------------------
       SMALL LABELS / EYEBROWS
    ----------------------------------------- */

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) small,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .mc-kicker,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .ma-kicker,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .mra-kicker,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .ms-kicker,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .mh-kicker,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .mh-home-kicker,

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) .mc-contact-kicker {
        font-size: 9px !important;
        letter-spacing: 1.4px !important;
    }


    /* -----------------------------------------
       HERO TEXT
    ----------------------------------------- */

    .mh-home-hero h1,
    .ma-hero h1,
    .mc-hero h1,
    .mra-hero h1,
    .ms-hero h1,
    .mh-hero h1,
    .mc-contact-hero h1 {
        font-size: 38px !important;
        line-height: 1.02 !important;
        max-width: 95% !important;
    }


    /* -----------------------------------------
       HERO HEIGHTS
    ----------------------------------------- */

    .mh-home-hero,
    .ma-hero,
    .mc-hero,
    .mra-hero,
    .ms-hero,
    .mh-hero,
    .mc-contact-hero {
        min-height: 520px !important;
    }


    /* -----------------------------------------
       HERO PADDING
    ----------------------------------------- */

    .mh-home-hero-content,
    .ma-hero-grid,
    .mc-hero-inner,
    .mra-hero-inner,
    .ms-hero-inner,
    .mh-hero-inner,
    .mc-contact-hero-inner {
        padding-top: 75px !important;
        padding-bottom: 55px !important;
    }


    /* -----------------------------------------
       SECTION SPACING
    ----------------------------------------- */

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) section {
        scroll-margin-top: 70px;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .mh-home-collection-card,
    .mc-value-card,
    .mc-more-card,
    .mh-client-card,
    .ms-cold-card,
    .ma-pillar,
    .mra-step,
    .ms-pillar,
    .mh-home-standard {
        min-height: auto !important;
    }


    /* -----------------------------------------
       CARD HEADINGS
    ----------------------------------------- */

    .mh-home-card-copy h3,
    .mc-value-card h3,
    .mc-more-copy h3,
    .mh-client-card h3,
    .ms-cold-card h3,
    .ma-pillar h3,
    .mra-step h3,
    .ms-pillar h3,
    .mh-home-standard h3 {
        font-size: 22px !important;
    }


    /* -----------------------------------------
       BUTTONS
    ----------------------------------------- */

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) a[class*="btn"],

    :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) button {
        font-size: 9px !important;
        letter-spacing: 1.1px !important;
    }


    /* -----------------------------------------
       FULL WIDTH BUTTONS ONLY WHERE USEFUL
    ----------------------------------------- */

    .mh-home-hero-actions {
        align-items: flex-start !important;
        gap: 12px !important;
    }


    /* -----------------------------------------
       REMOVE OVERLY LARGE DECORATIVE WORDS
       ON MOBILE
    ----------------------------------------- */

    .ma-hero-word,
    .mra-time::after,
    .ms-halal::after,
    .mh-home-aging::after {
        display: none !important;
    }
/* =========================================================
   MRBLD — FINAL MOBILE SCALE OVERRIDE
   Compact premium mobile layout
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GENERAL TYPOGRAPHY
    ===================================================== */

    body :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h1 {
        font-size: 32px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.3px !important;
    }


    body :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h2 {
        font-size: 26px !important;
        line-height: 1.07 !important;
        letter-spacing: -0.2px !important;
    }


    body :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h3 {
        font-size: 20px !important;
        line-height: 1.12 !important;
    }


    body :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) p {
        font-size: 12.5px !important;
        line-height: 1.65 !important;
    }


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

    body .mh-home-hero h1,
    body .ma-hero h1,
    body .mc-hero h1,
    body .mra-hero h1,
    body .ms-hero h1,
    body .mh-hero h1,
    body .mc-contact-hero h1 {
        font-size: 34px !important;
        line-height: 1 !important;
        max-width: 92% !important;
    }


    /* =====================================================
       BIG EDITORIAL / CLOSING STATEMENTS
    ===================================================== */

    body .mh-home-hospitality h2,
    body .mh-home-final h2,
    body .ma-editorial h2,
    body .ma-cta h2,
    body .mra-statement h2,
    body .mra-cta h2,
    body .ms-statement h2,
    body .ms-cta h2,
    body .mh-statement h2,
    body .mh-cta h2,
    body .mc-contact-business h2,
    body .mc-contact-final h2,
    body .mc-cta h2 {
        font-size: 28px !important;
        line-height: 1.05 !important;
        max-width: 100% !important;
    }


    /* =====================================================
       SMALL LABELS
    ===================================================== */

    body :is(
        .mh-home-hero-overline,
        .ma-hero-tag,
        .mc-hero-small,
        .mra-hero-overline,
        .ms-hero-small,
        .mh-hero-small,
        .mc-contact-overline,
        .mh-home-kicker,
        .ma-kicker,
        .mc-kicker,
        .mra-kicker,
        .ms-kicker,
        .mh-kicker,
        .mc-contact-kicker
    ) {
        font-size: 8px !important;
        line-height: 1.5 !important;
        letter-spacing: 1.5px !important;
    }


    /* =====================================================
       SECTION SPACING
    ===================================================== */

    body .mh-home-intro,
    body .mh-home-collections,
    body .mh-home-aging,
    body .mh-home-standards,
    body .mh-home-visit,

    body .ma-story,
    body .ma-roots,
    body .ma-philosophy,
    body .ma-leadership,

    body .mc-intro,
    body .mc-prime,
    body .mc-aged,
    body .mc-value,
    body .mc-more,

    body .mra-intro,
    body .mra-time,
    body .mra-process,
    body .mra-why,
    body .mra-detail,

    body .ms-intro,
    body .ms-pillars,
    body .ms-source,
    body .ms-quality,
    body .ms-halal,
    body .ms-pack,
    body .ms-cold,

    body .mh-intro,
    body .mh-clients,
    body .mh-kitchen,
    body .mh-supply,
    body .mh-custom,
    body .mh-reliable,
    body .mh-delivery,

    body .mc-contact-details,
    body .mc-contact-visit,
    body .mc-contact-enquiry,
    body .mc-contact-business {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }


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

    body .mh-home-hero,
    body .mc-hero,
    body .mra-hero,
    body .ms-hero,
    body .mh-hero,
    body .mc-contact-hero {
        min-height: 470px !important;
    }


    body .ma-hero {
        min-height: auto !important;
    }


    /* =====================================================
       IMAGE HEIGHTS
    ===================================================== */

    body .mh-home-aging-image,
    body .mh-home-visit-image,
    body .ma-roots-image,
    body .mra-time-image,
    body .mra-detail-image,
    body .ms-source-image,
    body .ms-pack-image,
    body .mh-kitchen-image,
    body .mh-custom-image,
    body .mc-prime-image,
    body .mc-aged-image {
        height: 350px !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    body .mh-home-collection-card,
    body .mc-value-card {
        min-height: 330px !important;
    }


    body .mc-more-img {
        height: 240px !important;
    }


    body .mh-client-card,
    body .ms-cold-card,
    body .mh-delivery-card {
        min-height: 190px !important;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    body :is(
        .mh-home-btn-primary,
        .mh-home-btn-secondary,
        .mh-home-final-btn,
        .ma-cta-btn,
        .mc-cta-btn,
        .mra-cta-btn,
        .ms-cta-btn,
        .mh-hero-btn,
        .mh-cta-btn,
        .mc-contact-business-btn,
        .mc-wa-submit
    ) {
        padding: 12px 16px !important;

        font-size: 8px !important;
        line-height: 1.3 !important;
        letter-spacing: 1.1px !important;
    }


    /* =====================================================
       LARGE STATEMENT SECTIONS
    ===================================================== */

    body .ma-editorial,
    body .mra-statement,
    body .ms-statement,
    body .mh-statement,
    body .mc-contact-final,
    body .mh-home-hospitality {
        min-height: 400px !important;
    }


    /* =====================================================
       CTA SECTIONS
    ===================================================== */

    body .mh-home-final,
    body .ma-cta,
    body .mc-cta,
    body .mra-cta,
    body .ms-cta,
    body .mh-cta,
    body .mc-contact-business {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    body :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h1 {
        font-size: 30px !important;
    }


    body :is(
        .mrbld-homepage,
        .mrbld-about-page,
        .mrbld-collections-page,
        .mrbld-aging-page,
        .mrbld-standards-page,
        .mrbld-hospitality-page,
        .mrbld-contact-page
    ) h2 {
        font-size: 24px !important;
    }


    body .mh-home-hospitality h2,
    body .mh-home-final h2,
    body .ma-editorial h2,
    body .mra-statement h2,
    body .ms-statement h2,
    body .mh-statement h2,
    body .mc-contact-business h2,
    body .mc-contact-final h2 {
        font-size: 26px !important;
    }

}