/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Inter, Arial, sans-serif;
}

:root{
  --primary:#6b46c1;
  --primary2:#9f7aea;

  --text:#1f1f24;
  --muted:#667085;
  --border:#ececf2;

  --radius:16px;
  --radius2:20px;

  --shadow:0 18px 40px rgba(0,0,0,0.10);
  --shadow2:0 14px 26px rgba(107,70,193,0.16);
}

html{ scroll-behavior:smooth; }

/* ✅ FIX: prevents blank sideways screen on mobile */
html, body{
  overflow-x:hidden;
}

body{
  color:var(--text);
  background:#fff;
}

/* ================= HEADER ================= */
.main-header{
  background:rgba(255,255,255,0.90);
  position:relative;
  z-index:1000;
  border-bottom:1px solid var(--border);
  transition:all 0.25s ease;
  backdrop-filter:saturate(150%) blur(10px);
}

.main-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, rgba(107,70,193,0), rgba(107,70,193,.35), rgba(159,122,234,.35), rgba(107,70,193,0));
  pointer-events:none;
  opacity:.9;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:0 10px;
}

/* ================= TOP BAR ================= */
.topbar{
  transition:transform .22s ease, opacity .22s ease, height .22s ease;
}

.header-flex{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
  height:78px;
}

/* ================= LOGO ================= */
.logo{
  display:flex;
  align-items:center;
  height:100%;
  flex-shrink:0;
  max-width:300px;
  overflow:visible;
  padding-right:4px;
}

.logo img{
  height:180%;
  width:auto;
  max-height:none;
  max-width:100%;
  object-fit:contain;
  display:block;
  transform:translateY(2px) scale(1.12);
  transform-origin:left center;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.12));
}

/* ================= SEARCH ================= */
.search-box{
  flex:1;
  display:flex;
  border:1.5px solid rgba(107,70,193,0.35);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.95);
  min-width:240px;
  box-shadow:0 10px 22px rgba(107,70,193,0.08);
}

.search-box select{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  border:none;
  padding:0 14px;
  outline:none;
  cursor:pointer;
  font-weight:700;
}

.search-box input{
  flex:1;
  min-width:0;
  border:none;
  padding:12px 14px;
  outline:none;
  font-size:14px;
  color:var(--text);
}

.search-box button{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  border:none;
  padding:0 18px;
  cursor:pointer;
}

/* ================= CALL NOW ================= */
.call-now-wrapper{ margin-left:auto; }

.call-now-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  padding:11px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 12px 26px rgba(107,70,193,0.22);
  border:1px solid rgba(255,255,255,.35);
}

/* ================= HAMBURGER ================= */
.hamburger{
  display:none;
  font-size:22px;
  cursor:pointer;
  padding:10px 12px;
  border-radius:14px;
}

/* ================= NAVBAR ================= */
.navbar{
  background:rgba(255,255,255,0.92);
  border-top:1px solid var(--border);
  backdrop-filter:saturate(150%) blur(10px);
  width:100%;
}

.navbar ul{
  display:flex;
  list-style:none;
  gap:26px;
  padding:14px 0;
  align-items:center;
  flex-wrap:wrap;
}

.navbar a{
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:15px;
  position:relative;
  padding:8px 2px;
}

.navbar a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  transition:width .2s ease;
  border-radius:99px;
}
.navbar a:hover::after{ width:100%; }

/* ================= DROPDOWNS ================= */
.dropdown{ position:relative; }

/* ✅ FIX: prevent mega menu from causing horizontal overflow */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  width:min(780px, calc(100vw - 20px));
  max-width:calc(100vw - 20px);

  background:rgba(255,255,255,0.92);
  border-radius:var(--radius2);
  padding:22px;
  box-shadow:0 22px 48px rgba(0,0,0,0.14);
  margin-top:12px;
  border:1px solid rgba(0,0,0,0.06);
  backdrop-filter:saturate(150%) blur(14px);

  opacity:0;
  transform:translateY(12px) scale(.99);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1;
  transform:translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;
}

.dropdown-title{
  font-size:12px;
  font-weight:900;
  color:var(--primary);
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.states-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px 16px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 20px;
}

/* ================= ✅ DESKTOP SCROLL (TOPBAR HIDE + NAV FIXED) ================= */
@media (min-width: 769px){
  .main-header.scrolled .topbar{
    transform:translateY(-100%);
    opacity:0;
    height:0;
    overflow:hidden;
    pointer-events:none;
  }

  /* ✅ make sure it really becomes fixed even if other css exists */
  .main-header.scrolled .navbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:9999 !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.12);
  }
}

/* ================= RESPONSIVE BREAKPOINTS ================= */
@media(max-width:1200px){
  /* grid can reduce automatically */
}

@media(max-width:992px){
  .header-flex{ gap:12px; }
  .navbar ul{ gap:18px; }

  .logo{ max-width:260px; }
  .logo img{ height:135%; transform:translateY(2px) scale(1.08); }
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  /* sticky mobile header */
  .main-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
  }

  body{ padding-top:70px; }

  .header-flex{
    height:70px;
    padding:10px 0;
    gap:10px;
    justify-content:space-between; /* ✅ keeps hamburger always visible */
  }

  /* hide search on mobile */
  .search-box{ display:none; }

  /* ✅ remove Call Now on mobile */
  .call-now-wrapper{ display:none !important; }

  /* ✅ hamburger ALWAYS visible on mobile */
  .hamburger{
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    background:rgba(107,70,193,0.08);
  }

  /* mobile navbar */
  .navbar{ display:none; }
  .navbar.active{
    display:block;
    border-top:1px solid var(--border);
    box-shadow:0 10px 26px rgba(0,0,0,0.08);
    background:#fff;
  }

  .navbar ul{
    flex-direction:column;
    align-items:flex-start;
    padding:8px 0;
    gap:0;
  }

  .navbar li{
    width:100%;
    border-bottom:1px solid var(--border);
  }

  .navbar a{
    display:block;
    width:100%;
    padding:14px 10px;
    font-size:15px;
  }

  .navbar a::after{ display:none; }

  /* dropdown accordion */
  .dropdown-menu{
    position:static;
    width:100%;
    max-width:100%;
    box-shadow:none;
    border:none;
    margin-top:0;
    padding:10px 10px 14px;
    display:none;
    opacity:1;
    transform:none;
    visibility:visible;
    pointer-events:auto;
    transition:none;
    background:#faf7ff;
    border-radius:0;
  }

  .dropdown.open .dropdown-menu{ display:block; }

  .states-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px 10px;
    max-height:240px;
    overflow-y:auto;
    padding-right:6px;
  }

  .services-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  /* ✅ control logo so it doesn't push hamburger out */
  .logo{ max-width:200px; }
  .logo img{
    height:180%;
    transform:translateY(2px) scale(1.10);
  }
}

@media(max-width:480px){
  body{ padding-top:66px; }
  .header-flex{ height:66px; }
  .logo{ max-width:180px; }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}


/* ================= MOBILE ANNOUNCEMENT BAR ================= */
.mobile-announcement{
  display:none; /* default hidden on desktop */
  width:100%;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  font-weight:800;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,0.25);
  position:fixed;
  left:0;
  z-index:999; /* below header (header is 1000) */
  overflow:hidden;
}

.marquee{
  width:100%;
  overflow:hidden;
  white-space:nowrap;
}

.marquee__track{
  display:inline-flex;
  gap:40px;
  padding:10px 0;
  animation:marqueeMove 18s linear infinite;
}

.marquee__track span{
  display:inline-block;
}

@keyframes marqueeMove{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ✅ Only show on mobile and place below header */
@media(max-width:768px){
  .mobile-announcement{
    display:block;
    top:70px; /* below your fixed header */
  }
}

/* ✅ Small phones */
@media(max-width:480px){
  .mobile-announcement{
    top:66px; /* below your 66px header */
  }
}