.topbar { background:var(--ink-deep); color:#dbe2e9; font-size:.78rem; }
.topbar-inner { min-height:38px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.topbar-left,.topbar-right { display:flex; gap:19px; align-items:center; }
.topbar a:hover { color:var(--gold-soft); }
.header { height:84px; background:#1e2a38; position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(255,255,255,.09); }
.nav { height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.header .brand { width:226px; height:66px; flex:0 0 auto; color:#e1e5eb; gap:4px; }
.header .brand-emblem{ width:75px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:8px;}
.header .brand-emblem img{ width:100%; height:auto; display:block; }
.footer .brand-emblem{ width:130px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.footer .brand-emblem img{ width:100%; height:auto; display:block; }
.brand-wordmark { display: flex; flex-direction: column; align-items: flex-start; color: #c8cdd4; font-family: "DM Sans", sans-serif; font-size: 1.36rem; font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.brand-wordmark strong { color: #f0f2f5; font-weight: 500; }
.brand-wordmark small { display: block; width: 100%; color: #8da1ba; font-size: .68rem; line-height: 1.2; letter-spacing: .14em; font-weight: 700; margin-top: 6px; text-transform: uppercase; white-space: nowrap; text-align: left;}
.brand-mark { width:36px; height:43px; position:relative; border:2px solid var(--ink); border-radius:20px 20px 4px 20px; transform:rotate(45deg); }
.brand-mark::after { content:""; position:absolute; width:2px; height:48px; background:var(--gold); left:14px; top:-9px; transform:rotate(-45deg); }
.brand-name { font-family:"Playfair Display",serif; font-size:1.38rem; line-height:.9; font-weight:700; letter-spacing:-.04em; }
.brand-sub { display:block; font-family:"DM Sans",sans-serif; font-size:.48rem; text-transform:uppercase; font-weight:700; letter-spacing:.15em; margin-top:5px; }
.nav-links { display:flex; align-items:center; gap:24px; color:#e2e6ec; font-size:.82rem; font-weight:600; }
.nav-links a { position:relative; }
.nav-links a::after { content:""; height:2px; width:0; left:0; bottom:-7px; position:absolute; background:var(--gold); transition:.2s; }
.nav-links a:hover::after { width:100%; }
.nav-cta { padding:10px 16px; background:var(--gold); color:var(--white); border-radius:2px; font-size:.78rem; font-weight:700; }
.menu-toggle { display:none; border:0; background:none; padding:7px; color:var(--white); font-size:1.5rem; }
/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media (max-width: 760px) {

    /* Prevent horizontal overflow */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* =========================
       TOP CONTACT BAR
       ========================= */

    .topbar {
        font-size: 0.65rem;
    }

    .topbar-inner {
        min-height: 32px;
        width: 100%;
        padding: 0 12px;
        justify-content: center;
    }

    .topbar-left {
        display: none;
    }

    .topbar-right {
        width: 100%;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        text-align: center;
    }

    /* =========================
       MAIN HEADER
       ========================= */

    .header {
        height: 68px;
    }

    .nav {
        width: 100%;
        height: 68px;
        padding: 0 14px;
        gap: 8px;
    }

    /* =========================
       LOGO / BRAND
       ========================= */

    .header .brand {
        width: auto;
        height: 58px;
        flex: 1 1 auto;
        min-width: 0;
        gap: 4px;
    }

    .header .brand-emblem {
        width: 55px;
        margin-right: 4px;
    }

    .brand-wordmark {
        font-size: 1.05rem;
        line-height: 1;
    }

    .brand-wordmark small {
        font-size: 0.43rem;
        letter-spacing: 0.10em;
        margin-top: 4px;
    }

    /* =========================
       HAMBURGER
       ========================= */

    .menu-toggle {
        display: block;
        flex: 0 0 auto;
        padding: 8px;
        font-size: 1.7rem;
        line-height: 1;
        color: #ffffff;
    }

    /* =========================
       MOBILE NAVIGATION
       ========================= */

    .nav-links {
        display: none;

        position: absolute;
        top: 68px;
        left: 0;
        right: 0;

        width: 100%;

        background: #1e2a38;

        padding: 10px 20px 18px;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.12);

        box-shadow: 0 12px 25px rgba(0,0,0,.20);
    }

    /* JavaScript already adds/removes .open */
    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        display: block;
        width: 100%;

        padding: 12px 4px;

        color: #ffffff;

        font-size: 0.9rem;

        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* Remove desktop underline animation on mobile */
    .nav-links a::after {
        display: none;
    }

    /* Hide desktop quote button */
    .nav-cta {
        display: none;
    }
}

/* =========================================================
   MOBILE CONTENT LAYOUT FIXES
   ========================================================= */

@media (max-width: 760px) {

    /* -----------------------------------------
       GENERAL SAFETY
       ----------------------------------------- */

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

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 32px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* -----------------------------------------
       MISSION & VISION
       ----------------------------------------- */

    .mv-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 24px;
        margin-top: 35px;
    }

    .mv-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 28px;
    }

    .mv-card h3 {
        font-size: 1.8rem;
    }

    /* -----------------------------------------
       VALUE / WHY PARTNER SECTIONS
       ----------------------------------------- */

    .value-list {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .value-item {
        width: 100%;
        min-width: 0;
    }

    /* -----------------------------------------
       COMMON GRIDS
       ----------------------------------------- */

    .intro-grid,
    .services-grid,
    .quality-grid,
    .market-grid,
    .faq-layout,
    .contact-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* -----------------------------------------
       PRODUCT GRID
       ----------------------------------------- */

    .product-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* -----------------------------------------
       AUDIENCE / SUPPLIER / BUYER CARDS
       ----------------------------------------- */

    .audience-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

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

    .footer-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 30px;
    }

    .footer-grid > * {
        min-width: 0;
        max-width: 100%;
    }

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

    .hero-actions,
    .form-actions {
        width: 100%;
    }

    .hero-actions .button,
    .form-actions .button {
        max-width: 100%;
    }

    /* -----------------------------------------
       IMAGES
       ----------------------------------------- */

    img {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   FINAL MOBILE FIXES
   ========================================================= */

@media (max-width: 760px) {

    /* -----------------------------------------
       MOBILE MENU
       ----------------------------------------- */

    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .nav {
        position: relative;
    }

    .menu-toggle {
        position: relative;
        z-index: 1002;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        cursor: pointer;
        pointer-events: auto;
    }

    .nav-links {
        z-index: 1001;
    }

    .nav-links.open {
        display: flex !important;
    }


    /* -----------------------------------------
       WHY PARTNER WITH US
       ----------------------------------------- */

    .audience-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 24px !important;
    }

    .audience {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0;
        box-sizing: border-box;
    }


    /* -----------------------------------------
       WHATSAPP FLOATING BUTTON
       ----------------------------------------- */

    @media (max-width: 760px) {

    .whatsapp {
        position: fixed !important;
        z-index: 2000 !important;
        bottom: 80px !important;
        right: 30px !important;
    }

}
}

/* =========================================================
   MOBILE — WHY PARTNER WITH US
   ========================================================= */

@media (max-width: 760px) {

    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}