/* ═══════════════════════════════════════
       NAVBAR
    ═══════════════════════════════════════ */
    .va-nav {
      position: sticky; top: 0; z-index: 999;
      background: var(--navy);
      box-shadow: 0 2px 24px rgba(0,0,0,.35);
    }
    .va-nav__inner {
      max-width: 1380px; margin: 0 auto;
      padding: 0 28px;
      height: 76px;
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }

    /* Brand */
    .va-nav__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
    .va-nav__logo  {
      width: 80px;
    height: 60px; border-radius: 10px;
      background: var(--white);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .va-nav__logo-text { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--navy); }
    .va-nav__name h1  { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .5px; color: #fff; }
    .va-nav__name p   { font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .3px; }

    /* Desktop links */
    .va-nav__links {
      display: flex; align-items: center; gap: 6px;
      list-style: none; height: 76px;
    }
    .va-nav__links > li { height: 100%; display: flex; align-items: center; position: relative; }
    .va-nav__links a,
    .va-nav__links button {
      background: none; border: none; cursor: pointer;
      color: rgba(255,255,255,.8);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; font-weight: 500;
      letter-spacing: .4px; text-transform: uppercase;
      text-decoration: none;
      padding: 6px 10px;
      display: flex; align-items: center; gap: 4px;
      transition: color .2s;
      position: relative;
    }
    .va-nav__links a::after,
    .va-nav__links button::after {
      content: ''; position: absolute; left: 10px; bottom: -2px;
      width: 0; height: 2px; background: var(--gold); transition: width .3s;
    }
    .va-nav__links a:hover,
    .va-nav__links button:hover { color: var(--gold); }
    .va-nav__links a:hover::after,
    .va-nav__links button:hover::after { width: calc(100% - 20px); }
    .va-nav__links a.active { color: var(--gold); }
    .va-nav__links svg { width: 13px; height: 13px; }

    /* Phone CTA */
    .va-nav__phone {
      display: flex; align-items: center; gap: 8px;
      background: var(--gold); color: var(--navy) !important;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; font-weight: 700;
      padding: 9px 18px; border-radius: 8px;
      text-decoration: none; white-space: nowrap; flex-shrink: 0;
      transition: background .2s;
    }
    .va-nav__phone svg { width: 15px; height: 15px; }
    .va-nav__phone:hover { background: var(--gold-lt); }

    /* Hamburger */
    .va-nav__burger {
      display: none; background: none; border: none; cursor: pointer;
      color: white; padding: 4px; flex-shrink: 0;
    }
    .va-nav__burger svg { width: 26px; height: 26px; }

    /* ── MEGA DROPDOWN ── */
    .va-nav__services { position: static !important; }
    .va-mega {
      display: none;
      position: fixed; left: 0; right: 0; top: 76px;
      background: #fff;
      border-top: 3px solid var(--gold);
      box-shadow: 0 12px 48px rgba(0,0,0,.15);
      z-index: 9999;
    }
    .va-nav__services:hover .va-mega { display: block; }

    .va-mega__heads {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      background: var(--navy-dark);
    }
    .va-mega__head {
      padding: 12px 22px;
      font-family: 'DM Sans', sans-serif;
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .1em;
      color: var(--gold);
    }
    .va-mega__head:not(:last-child) { border-right: 1px solid rgba(255,255,255,.12); }

    .va-mega__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .va-mega__col  { padding: 16px 0; }
    .va-mega__col:not(:last-child) { border-right: 1px solid #eef0f5; }
    .va-mega__col a {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 20px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; color: #374151;
      text-decoration: none;
      transition: background .15s, color .15s, padding-left .15s;
    }
    .va-mega__col a::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: #c0cce0; flex-shrink: 0; transition: background .15s;
    }
    .va-mega__col a:hover { background: #f0f5ff; color: var(--navy); padding-left: 26px; }
    .va-mega__col a:hover::before { background: var(--gold); }

    .va-mega__footer {
      padding: 10px 22px; background: #f8f9fc;
      border-top: 1px solid #eef0f5;
      display: flex; justify-content: space-between; align-items: center;
    }
    .va-mega__footer span { font-size: 12px; color: var(--muted); }
    .va-mega__footer a    { color: var(--navy); font-weight: 600; font-size: 12px; text-decoration: none; }
    .va-mega__view-btn {
      background: #dbeafe; padding: 6px 16px;
      border-radius: 6px; transition: background .15s;
    }
    .va-mega__view-btn:hover { background: #bfdbfe; }

    /* ── MOBILE MENU ── */
    .va-mobile {
      display: none;
      background: var(--navy-dark);
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .va-mobile.open { display: block; }
    .va-mobile__list {
      list-style: none;
      padding: 16px 24px 20px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .va-mobile__list > li { border-bottom: 1px solid rgba(255,255,255,.08); }
    .va-mobile__list > li:last-child { border: none; }
    .va-mobile__list a {
      display: block; padding: 11px 0;
      color: rgba(255,255,255,.82); text-decoration: none;
      font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
      transition: color .2s;
    }
    .va-mobile__list a:hover { color: var(--gold); }

    .va-mobile__acc-btn {
      width: 100%; background: none; border: none; cursor: pointer;
      color: rgba(255,255,255,.82);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
      padding: 11px 0;
      display: flex; justify-content: space-between; align-items: center;
    }
    .va-mobile__acc-btn svg { width: 16px; height: 16px; transition: transform .28s; }
    .va-mobile__acc-btn.open svg { transform: rotate(180deg); }

    .va-mobile__acc-content { display: none; padding: 6px 0 10px 14px; }
    .va-mobile__acc-content.open { display: block; }
    .va-mobile__acc-content h4 {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--gold);
      font-family: 'DM Sans', sans-serif;
      margin: 12px 0 4px;
    }
    .va-mobile__acc-content ul { list-style: none; }
    .va-mobile__acc-content ul li { font-size: 12px; color: rgba(255,255,255,.65); padding: 3px 0; }

    .va-mobile__phone {
      display: block; width: 100%;
      background: var(--gold); color: var(--navy) !important;
      font-size: 13px; font-weight: 700;
      text-align: center; padding: 12px;
      border-radius: 8px; text-decoration: none;
      margin-top: 8px;
    }


    /* ================================================
   NAVBAR TOGGLE CSS — add these to your index.css
   ================================================ */

/* Hide mobile menu by default */
.va-mobile {
  display: none;
}

/* Show it when burger is clicked (JS adds .open) */
.va-mobile.open {
  display: block;
}

/* Hide services accordion by default */
.va-mobile__acc-content {
  display: none;
  overflow: hidden;
}

/* Show accordion when Services button is clicked (JS adds .open) */
.va-mobile__acc-content.open {
  display: block;
}

/* Rotate the chevron arrow when accordion is open */
.va-mobile__acc-btn svg {
  transition: transform 0.3s ease;
}
.va-mobile__acc-btn.open svg {
  transform: rotate(180deg);
}