/* ================= 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 (Dark Cinematic + Warm Gold + Red CTA) ================= */
:root{
  --topH:34px;     /* JS overwrites */
  --headH:76px;

  /* Top strip */
  --topbar-bg: linear-gradient(90deg,#0b0b12,#141423,#1b1b2d,#141423,#0b0b12);

  /* Header background */
  --nav-bg: linear-gradient(180deg,#07070c 0%, #050509 60%, #040406 100%);
  --nav-glow: rgba(255, 196, 89, .18);     /* warm gold glow */

  /* Accents */
  --accent:#ffc459;     /* warm gold */
  --accent-2:#ff3b3b;   /* red for CTA/energy */

  /* Text */
  --text:#f7f3ea;
  --muted:rgba(247,243,234,.72);

  /* Borders / shadow */
  --border: rgba(255,196,89,.18);
  --shadow: rgba(0,0,0,.72);
}

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

/* ✅ when top header hidden */
body.top-hidden{ --topH:0px; }

/* ================= TOP HEADER ================= */
.top-header{
  position:fixed;top:0;left:0;width:100%;
  z-index:10010;
  color:var(--text);
  background:var(--topbar-bg);
  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:7px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

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

/* Mobile marquee */
.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:850;
  letter-spacing:.2px;
  color:var(--text);
  opacity:.96;
}

/* ================= HEADER ================= */
.site-header{
  position:fixed;
  top:var(--topH);
  left:0;width:100%;
  height:var(--headH);
  z-index:10009;

  background:
    radial-gradient(900px 160px at 50% -30%, var(--nav-glow), transparent 70%),
    radial-gradient(700px 140px at 12% 10%, rgba(255,59,59,.10), transparent 70%),
    var(--nav-bg);

  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow:0 14px 40px 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(255,196,89,.35);
  box-shadow:0 14px 32px rgba(0,0,0,.70);
  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,.04);
  border:1px solid rgba(255,196,89,.18);
  box-shadow:0 20px 55px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  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:.92;
  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%);
  border-radius:16px;
  padding:16px;

  background:linear-gradient(180deg, rgba(15,15,24,.98), rgba(7,7,12,.98));
  border:1px solid rgba(255,196,89,.18);
  box-shadow:0 30px 90px rgba(0,0,0,.85);
  backdrop-filter: blur(12px);

  opacity:0;visibility:hidden;
  transition:.22s ease;
  z-index:10020;
  overflow:hidden;
}

/* subtle gold+red glow */
.dropdown-menu::before{
  content:"";
  position:absolute; inset:-40% -40%;
  background:
    radial-gradient(520px 260px at 25% 20%, rgba(255,196,89,.16), transparent 62%),
    radial-gradient(520px 260px at 85% 35%, rgba(255,59,59,.10), transparent 65%);
  filter:blur(18px);
  opacity:.9;
  pointer-events:none;
}

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

.dropdown-grid{position:relative;z-index:1;display:grid;gap:10px;}
.states-grid{
  grid-template-columns:repeat(5,1fr);
  width:760px;
  max-width:calc(100vw - 32px);
}

.dropdown-grid a{
  color:rgba(247,243,234,.78);
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:.18s ease;
}

.dropdown-grid a:hover{
  background:rgba(255,196,89,.08);
  border-color:rgba(255,196,89,.18);
  color:var(--text);
  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,.04);
  border:1px solid rgba(255,196,89,.18);
  color:var(--text);
  text-decoration:none;
  font-weight:950;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  transition:.18s ease;
  white-space:nowrap;
}
.btn-call:hover{
  transform:translateY(-1px);
  border-color:rgba(255,196,89,.32);
  color:var(--accent);
}

/* Book now (Red conversion CTA) */
.btn-book{
  padding:10px 18px;
  border-radius:999px;

  background:linear-gradient(180deg,#ff3b3b 0%, #e40000 55%, #b80000 100%);
  color:#fff !important;
  font-weight:950;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 30px rgba(255,59,59,.18);
  text-decoration:none;
  transition:.18s ease;
  white-space:nowrap;
}
.btn-book:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 18px 40px rgba(255,59,59,.22);
}

/* ================= 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 */
  .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;}
  }

  .header-3col{
    grid-template-columns: 1fr auto;
    gap:10px;
  }

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

  .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 */
  .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,.04);
    border:1px solid rgba(255,196,89,.22);
    border-radius:14px;
    cursor:pointer;
    padding:0;
    z-index:10050;
    box-shadow:0 14px 30px rgba(0,0,0,.45);
  }
  .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:
      radial-gradient(900px 520px at 18% 12%, rgba(255,196,89,.10), transparent 62%),
      radial-gradient(900px 520px at 85% 25%, rgba(255,59,59,.08), transparent 65%),
      linear-gradient(180deg,#0b0b12,#07070c);

    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(255,196,89,.16);
  }
  .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(255,196,89,.18);
    background:rgba(255,255,255,.04);
    display:grid;
    place-items:center;
    color:var(--accent);
    cursor:pointer;
    z-index:10006;
    box-shadow:0 14px 34px rgba(0,0,0,.50);
    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:16px;

    border:1px solid rgba(255,196,89,.16);
    box-shadow:none;
    background:rgba(255,255,255,.03);
    overflow:hidden;
  }

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

  /* ✅ each service separate line */
  .nav-mobile .dropdown-menu a{
    display:block;
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
  }
  .nav-mobile .dropdown-menu a:hover{
    background:rgba(255,196,89,.08);
    border-color:rgba(255,196,89,.18);
    color:var(--text);
  }

  /* keep if still used anywhere */
  .nav-mobile .states-grid{
    grid-template-columns: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;}
}