/* =========================================================
   VISASECTOR NAVBAR — RELoca-style wide floating navigation
   Uses one official client-supplied round logo.
   ========================================================= */
:root{
  --vs-orange:#f39a0b;
  --vs-orange-deep:#e98a00;
  --vs-teal:#07566b;
  --vs-green:#173f35;
  --vs-cream:#fbfaf7;
}

/* One official logo only. */
.logo,
.footer-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  flex:0 0 auto;
}
.logo-full,
.footer-logo .logo-full{
  display:block !important;
  width:72px !important;
  height:72px !important;
  max-width:none !important;
  object-fit:contain;
  margin:0;
}
.logo-round,
.footer-logo .logo-round{display:none !important;}

/*
   Wide floating header, matching the original Reloca composition:
   wide from left to right, with modest rounded corners rather than a pill.
*/
.site-header{
  position:fixed !important;
  top:20px !important;
  left:48px !important;
  right:48px !important;
  width:auto !important;
  max-width:none !important;
  transform:none !important;
  padding:0 !important;
  background:transparent !important;
  z-index:1000;
}
.site-header .container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.navbar{
  width:100%;
  min-height:78px;
  padding:6px 14px 6px 16px;
  border:1px solid rgba(7,86,107,.09);
  border-radius:28px;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 42px rgba(10,42,48,.12),0 3px 10px rgba(10,42,48,.05);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.navbar:hover{
  box-shadow:0 18px 46px rgba(10,42,48,.14),0 3px 10px rgba(10,42,48,.05);
}
.logo-full{
  flex:0 0 72px;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
  margin-left:auto;
}
.nav>a,
.nav summary{
  padding:10px 12px;
  font-size:13px;
  line-height:1;
  font-weight:650;
  color:#26312f;
  white-space:nowrap;
  border-radius:12px;
}
.nav>a:hover,
.nav summary:hover,
.nav>a:focus-visible,
.nav summary:focus-visible{
  background:#f3f7f5;
  color:var(--vs-teal);
}
.nav-contact{
  margin-left:6px;
  padding:13px 17px !important;
  border-radius:12px !important;
  background:var(--vs-green) !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(23,63,53,.18);
}
.nav-contact:hover{background:#0f332b !important;transform:translateY(-1px)}
.all-pages-menu{flex:0 0 auto}
.dropdown.all-pages-dropdown{
  top:47px;
  min-width:210px;
  padding:7px;
  border:1px solid rgba(7,86,107,.10);
  box-shadow:0 18px 45px rgba(10,42,48,.14);
}

.home-page .hero-v2{padding-top:126px;}
.eyebrow-dot{background:var(--vs-orange) !important}
.stars{color:var(--vs-orange) !important}
.text-link{color:var(--vs-teal) !important}
.text-link:after{color:var(--vs-orange)}
.btn-primary{background:var(--vs-green) !important;border-color:var(--vs-green) !important}
.btn-primary:hover{background:#0f332b !important;border-color:#0f332b !important}
.tag{border-color:rgba(7,86,107,.14)}

/* Tablet: retain the wide desktop composition until the nav needs to collapse. */
@media (max-width:1180px) and (min-width:1101px){
  .site-header{left:28px !important;right:28px !important}
  .logo-full{width:62px !important;height:62px !important;flex-basis:62px}
  .nav>a,.nav summary{font-size:11px;padding-inline:8px}
  .nav-contact{padding:11px 13px !important}
}

/* Mobile menu before horizontal crowding occurs. */
@media (max-width:1100px){
  .site-header{
    left:14px !important;
    right:14px !important;
    width:auto !important;
    max-width:none !important;
    top:12px !important;
  }
  .nav{display:none !important}
  .mobile-toggle{display:flex !important;align-items:center;justify-content:center}
  .navbar{min-height:64px;padding:6px 8px 6px 12px;border-radius:22px}
  .logo-full{width:58px !important;height:58px !important;flex-basis:58px}
}

@media (max-width:767px){
  .site-header{left:9px !important;right:9px !important;top:8px !important}
  .navbar{min-height:54px;border-radius:18px;padding:5px 7px 5px 9px}
  .logo-full{width:48px !important;height:48px !important;flex-basis:48px}
  .mobile-toggle{width:40px !important;height:40px !important;border-radius:12px !important}
  .home-page .hero-v2{padding-top:78px}
}

@media (prefers-reduced-motion:reduce){
  .navbar,.nav-contact{transition:none !important}
}