/* =====================================================================
   ACE Ventures — shared mobile / responsive layer
   Loaded LAST on every page so it wins over the per-page <style> blocks.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }

img, video, canvas, iframe, svg { max-width: 100%; }
video, iframe { height: auto; }
iframe[src*="google.com/maps"], iframe[src*="maps"] { width: 100%; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
h1, h2, h3, h4, p, li, a, span, small, strong, label { overflow-wrap: break-word; }
input, select, textarea, button { max-width: 100%; font-size: 16px; } /* 16px stops iOS zoom-on-focus */

body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------
   HEADER  (index / about / services / industries / quality / gallery / careers)
   ------------------------------------------------------------------ */
@media (max-width: 960px) {
    /* backdrop-filter turns the header into the containing block of the
       fixed slide-in menu, which pushed the page to 2x width. Remove it. */
    .site-header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #ffffff !important;
    }

    .site-header .navbar { min-height: 64px; gap: 12px; padding-top: 8px; padding-bottom: 8px; }

    .site-header .brand {
        flex: 1 1 auto !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        gap: 10px !important;
        white-space: normal !important;
    }
    .site-header .site-logo {
        width: 40px !important; height: 40px !important;
        max-width: 40px !important; max-height: 40px !important;
        flex: 0 0 auto;
    }
    .site-header .brand-copy {
        white-space: normal !important;
        flex-wrap: wrap !important;
        min-width: 0;
        line-height: 1.15 !important;
        gap: 4px !important;
    }
    .site-header .brand-copy strong { font-size: 1rem !important; }
    .site-header .brand-copy small {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        display: block !important;
        letter-spacing: 0 !important;
    }

    .menu-toggle { flex: 0 0 44px; display: block !important; position: relative; z-index: 1002; }

    .site-header .navlinks {
        position: fixed !important;
        top: 0 !important; right: 0 !important; left: auto !important; bottom: 0;
        width: min(86vw, 360px) !important;
        height: auto !important;
        max-width: 100%;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001 !important;
    }
    .site-header .navlinks.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s !important;
    }
    .site-header .navlinks > a { white-space: normal; }
    .site-header .nav-cta { text-align: center; }
}

@media (max-width: 380px) {
    .site-header .brand-copy small { font-size: 0.7rem !important; }
    .site-header .site-logo { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; }
}

/* ------------------------------------------------------------------
   HOME HERO — trust cards were absolutely positioned and overlapped the buttons
   ------------------------------------------------------------------ */
@media (max-width: 960px) {
    .hero { display: flex !important; flex-direction: column; justify-content: center; min-height: 0 !important; align-items: stretch !important; }
    .hero .hero-content { padding-top: 56px !important; padding-bottom: 32px !important; }
    .hero .hero-trust {
        position: relative !important;
        left: auto !important; bottom: auto !important;
        transform: none !important;
        width: calc(100% - 28px) !important;
        margin: 0 auto 28px !important;
    }
}
@media (max-width: 400px) {
    .hero .hero-trust { grid-template-columns: 1fr !important; }
    .hero .trust-item { border-right: 0 !important; border-bottom: 1px solid rgba(10,25,47,.08); min-height: 0 !important; }
    .hero .trust-item:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------------
   FOOTERS
   ------------------------------------------------------------------ */
@media (max-width: 960px) {
    .footer-main, .footer-grid, .footergrid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }
    .footer-main > .footer-brand-column, .footer-main > :first-child,
    .footer-grid > :first-child, .footergrid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .footer-main, .footer-grid, .footergrid { grid-template-columns: 1fr !important; }
    .footer-bottom, .footbottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        text-align: left;
    }
    .footer-bottom span, .footbottom span { white-space: normal !important; }
}

@media (max-width: 600px) {
    .footer .footer-brand, .footer .footer-brand-copy { flex-wrap: wrap !important; white-space: normal !important; min-width: 0; }
    .footer .footer-brand-copy small { white-space: normal !important; }
}

/* ------------------------------------------------------------------
   LEGACY PAGES (blog / order / recipes / investors / privacy / terms) — assets/style.css
   ------------------------------------------------------------------ */
@media (max-width: 950px) {
    .hero-grid > *, .split > *, .contact-grid > *, .cards > *, .product-grid > *,
    .recipe-grid > *, .benefits > *, .process > *, .testimonials > * { min-width: 0; }
}
@media (max-width: 700px) {
    .container { width: calc(100% - 28px) !important; }
    .hero { padding: 44px 0 !important; }
    .pagehero { padding: 48px 0 40px !important; }
    .hero h1, .pagehero h1 { font-size: clamp(34px, 11vw, 48px) !important; letter-spacing: -1.5px !important; line-height: 1.05 !important; }
    .hero p, .pagehero p { font-size: 16px !important; }
    .section-head h2, .split h2 { font-size: clamp(28px, 8vw, 40px) !important; }
    .hero-art { min-height: 340px !important; border-radius: 24px !important; }
    .photo-card { min-height: 0 !important; padding: 28px 0; border-radius: 24px !important; }
    .plate { width: min(300px, 78vw) !important; height: min(300px, 78vw) !important; font-size: clamp(56px, 22vw, 100px) !important; border-width: 10px !important; }
    .pack { width: min(240px, 70vw) !important; height: auto !important; min-height: 300px; }
    .brandword { font-size: 34px !important; }
    .hero-stats { flex-wrap: wrap; gap: 18px 26px !important; }
    .btn { white-space: normal; text-align: center; }
    .cta h2 { font-size: clamp(28px, 8.5vw, 38px) !important; }
    .contact-box { padding: 22px !important; }
    .card-body, .product-info, .recipe-body { padding: 20px !important; }
    .actions { flex-direction: column; align-items: stretch; }
    .logo { font-size: 22px !important; }
    .menu { font-size: 28px; padding: 6px 10px; }
    .header .navlinks.open { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* Menu open: keep the top strip under the panel and dim the page behind it */
@media (max-width: 960px) {
    body.menu-open .topbar { z-index: 1 !important; }
    .site-header .navlinks.open { box-shadow: -20px 0 50px rgba(5,16,30,.18), 0 0 0 100vmax rgba(5,16,30,.45) !important; }
}