/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}

/* ================= THEME (Royal Purple + Neon Teal) ================= */
:root{
  --topH:34px;          /* JS will overwrite with real top header height */
  --headH:76px;

  --topbar-bg: linear-gradient(90deg,#2a0f55,#3b1675,#4b22a3,#3b1675,#2a0f55);
  --nav-bg: linear-gradient(180deg,#0b0616 0%, #070411 55%, #05030d 100%);
  --nav-glow: rgba(0, 229, 255, .14);

  --accent:#00e5ff;
  --accent-2:#7c4dff;

  --text:#f6f4ff;
  --muted:rgba(246,244,255,.72);

  --border: rgba(0,229,255,.18);
  --shadow: rgba(0,0,0,.65);
}

/* ✅ Page offset accounts for both headers */
body{
  padding-top:calc(var(--topH) + var(--headH));
}

/* ✅ CRITICAL FIX: when top header is hidden, lower header moves to top */
body.top-hidden{
  --topH: 0px;
}

/* ================= TOP HEADER ================= */
.top-header{
  position:fixed;top:0;left:0;width:100%;
  z-index:10010;
  background:var(--topbar-bg);
  color:var(--text);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(0);
  transition:transform .28s ease;
}

.top-header-wrap{
  max-width:1200px;margin:auto;
  padding:6px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Desktop (static message) */
.top-trust{
  font-size:15px;
  line-height:1.4;
  font-weight:650;
  letter-spacing:0.2px;
  text-align:center;
}

/* Mobile marquee (hidden on desktop) */
.top-marquee{
  display:none;
  width:100%;
  overflow:hidden;
  position:relative;
  mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%);
}

.top-marquee-track{
  display:flex;
  gap:28px;
  width:max-content;
  will-change: transform;
}

.top-marquee-item{
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--text);
  opacity:.95;
}

/* ================= HEADER ================= */
.site-header{
  position:fixed;
  top:var(--topH);
  left:0;width:100%;
  height:var(--headH);
  z-index:10009;
  background:
    radial-gradient(750px 140px at 50% -35%, var(--nav-glow), transparent 70%),
    var(--nav-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px var(--shadow);
  transition:top .28s ease;
}

/* ================= WRAP / GRID ================= */
.header-wrap{
  max-width:1400px;margin:auto;
  height:var(--headH);
  padding:0 18px;
}

.header-3col{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
}

/* ================= BRAND ================= */
.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
  min-width:220px;
}

.brand img{
  width:54px;height:54px;border-radius:50%;
  background:#0f0f0f;
  border:1px solid rgba(0,229,255,.35);
  box-shadow:0 12px 26px rgba(0,0,0,.65);
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}

.brand-name{
  color:var(--text);
  font-weight:950;
  font-size:18px;
  letter-spacing:.2px;
}

.brand-sub{
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  margin-top:2px;
}

/* ================= CENTER PILL NAV (DESKTOP) ================= */
.nav-pill{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.50);
  backdrop-filter: blur(10px);
  max-width:100%;
}

.nav-pill a,
.nav-pill .dropdown-toggle{
  background:none;border:none;
  color:var(--text);
  font-size:15px;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  opacity:.95;
  transition:.22s ease;
  white-space:nowrap;
}

.nav-pill a:hover,
.nav-pill .dropdown-toggle:hover{
  color:var(--accent);
  opacity:1;
}

/* ================= DROPDOWN (desktop hover) ================= */
.dropdown{position:relative;}

.dropdown-menu{
  position:absolute;top:110%;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#0f0820,#070312);
  border-radius:16px;
  padding:18px;
  opacity:0;visibility:hidden;
  transition:.22s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.80);
  border:1px solid rgba(0,229,255,.18);
  z-index:10020;
}

.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;}

.dropdown-grid{display:grid;gap:10px;}

.states-grid{
  grid-template-columns:repeat(5,1fr);
  width:760px;
  max-width:calc(100vw - 32px);
}

.dropdown-grid a{
  color:var(--muted);
  padding:10px 14px;border-radius:10px;
  text-decoration:none;
  font-weight:750;
  transition:.18s ease;
}

.dropdown-grid a:hover{
  background:rgba(0,229,255,.10);
  color:var(--accent);
  transform:translateY(-1px);
}

/* ================= RIGHT ACTIONS ================= */
.actions-right{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  position:relative;
  min-width:0;
}

/* Call pill */
.btn-call{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(0,229,255,.18);
  color:var(--text);
  text-decoration:none;
  font-weight:950;
  box-shadow:0 14px 30px rgba(0,0,0,.40);
  transition:.18s ease;
  white-space:nowrap;
}

.btn-call:hover{
  transform:translateY(-1px);
  border-color:rgba(0,229,255,.35);
  color:var(--accent);
}

/* Book now */
.btn-book{
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#00e5ff 0%, #2bd6ff 45%, #7c4dff 100%);
  color:#061018 !important;
  font-weight:950;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.38);
  text-decoration:none;
  transition:.18s ease;
  white-space:nowrap;
}

.btn-book:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 12px 26px rgba(0,0,0,.50);
}

/* ================= BURGER (DESKTOP OFF) ================= */
.burger{display:none;}

/* ================= MOBILE MENU (hidden desktop) ================= */
.nav-mobile{display:none;}

/* ================= SCROLL HIDE TOP HEADER ================= */
body.top-hidden .top-header{transform:translateY(-110%);}

/* ================= MOBILE ================= */
@media (max-width:900px){
  :root{--headH:64px;}

  /* ✅ marquee ON in small screens */
  .top-trust{display:none;}
  .top-marquee{display:block;}
  .top-header-wrap{padding:6px 10px;}

  @keyframes topMarqueeScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-33.333%);}
  }
  .top-marquee-track{animation:topMarqueeScroll 14s linear infinite;}
  .top-header:hover .top-marquee-track{animation-play-state:paused;}
  @media (prefers-reduced-motion: reduce){
    .top-marquee-track{animation:none;}
  }

  /* stable grid: brand | actions */
  .header-3col{
    grid-template-columns: 1fr auto;
    gap:10px;
  }

  .nav-pill{display:none;}
  .btn-call{display:none;}
  .brand-sub{display:none;}

  /* brand never pushes burger */
  .brand{min-width:0;overflow:hidden;}
  .brand-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:52vw;
  }

  .actions-right{gap:10px;}

  .btn-book{
    padding:9px 12px;
    font-size:14px;
    line-height:1;
  }

  /* ✅ burger always visible */
  .burger{
    display:flex !important;
    position:relative;
    flex:0 0 auto;
    width:42px;
    height:42px;

    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(0,229,255,.35);
    border-radius:14px;

    cursor:pointer;
    padding:0;
    z-index:10050;

    box-shadow:0 14px 30px rgba(0,0,0,.40);
  }

  .burger span{
    display:block;
    width:22px;
    height:2.5px;
    margin:3px 0;
    background:var(--accent);
    border-radius:2px;
  }

  /* MOBILE MENU */
  .nav-mobile{
    display:flex;
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    height:100vh;
    background:linear-gradient(180deg,#0f0820,#070312);
    flex-direction:column;
    padding: calc(var(--topH) + 86px) 24px 26px;
    gap:18px;
    transition:left .35s ease;
    z-index:10005;
    overflow-y:auto;
    border-right:1px solid rgba(0,229,255,.14);
  }

  .nav-mobile.active{left:0;}

  .nav-mobile a,
  .nav-mobile button{
    color:var(--text);
    font-weight:900;
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-size:16px;
  }

  .nav-mobile a:hover,
  .nav-mobile button:hover{color:var(--accent);}

  .mobile-close{
    position:fixed;
    top:14px;
    right:14px;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(0,229,255,.28);
    background:rgba(255,255,255,.06);
    display:grid;
    place-items:center;
    color:var(--accent);
    cursor:pointer;
    z-index:10006;
    box-shadow:0 14px 34px rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:.22s ease;
  }

  .nav-mobile.active .mobile-close{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  /* mobile dropdown */
  .nav-mobile .dropdown{position:static;}

  .nav-mobile .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    padding:12px;
    margin-top:8px;
    border-radius:14px;
    border:1px solid rgba(0,229,255,.18);
    box-shadow:none;
    background:rgba(255,255,255,.04);
  }

  .nav-mobile .dropdown-menu.active{display:block !important;}

  .nav-mobile .states-grid{
    grid-template-columns:repeat(2,1fr);
    width:100%;
    max-width:100%;
  }
}

/* Small phones */
@media (max-width:520px){
  .btn-book{padding:8px 10px;font-size:13px;}
  .burger{width:40px;height:40px;}
  .brand img{width:44px;height:44px;}
  .brand-name{max-width:48vw;}
  .nav-mobile{padding-left:18px;padding-right:18px;}
}

/* Extra small phones */
@media (max-width:380px){
  .btn-book{display:none;}
  .brand-name{max-width:66vw;}
}