:root{
  --edge-pad: 48px;   /* fixed edge spacing */
  --top-pad: 18px;    /* fixed top spacing */
}

/* NAV overlay (sticky) */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10000;
  padding: var(--top-pad) 0;

  /* gradient fade into hero */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,0) 100%
  );

  /* let clicks pass through except on the nav cluster */
  pointer-events: none;
}

/* ✅ nav cluster pinned TOP-RIGHT */
.header-right{
  position: fixed;
  top: var(--top-pad);
  right: var(--edge-pad);
  z-index: 10020;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  pointer-events: auto; /* clickable */
}

/* NAV pill */
.nav-pill{
  display: inline-flex;
  align-items: center;

  gap: clamp(6px, 0.6vw, 12px);
  padding: clamp(6px, 0.6vw, 12px) clamp(10px, 1vw, 16px);

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.42);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 45px rgba(0,0,0,.35);

  white-space: nowrap;
}

.nav-link{
  color: rgba(255,255,255,.84);
  font-weight: 750;
  font-size: clamp(.84rem, 0.85vw, 1.02rem);
  padding: clamp(7px, 0.7vw, 12px) clamp(10px, 0.9vw, 16px);

  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .96);
  border-color: rgba(18, 192, 138, .55);

  box-shadow:
    inset 0 0 0 1px rgba(18, 192, 138, .28),
    0 0 0 1px rgba(18, 192, 138, .60),
    0 0 22px rgba(18, 192, 138, .35);

  transform: translateY(-1px);
}

.nav-link.is-active {
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .98);
  border-color: rgba(18, 192, 138, .72);

  box-shadow:
    inset 0 0 0 1px rgba(18, 192, 138, .34),
    0 0 0 1px rgba(18, 192, 138, .78),
    0 0 28px rgba(18, 192, 138, .42);

  transform: translateY(-1px);
}

.nav-btn{
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

.chev{ opacity:.75; transform: translateY(-1px); }

/* Dropdown */
.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropdown-menu{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);

  min-width: 290px;
  padding: 10px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,10,10,.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);

  opacity: 0;
  pointer-events: none;
  translate: 0 -6px;
  transition: opacity .14s ease, translate .14s ease;
}

.dropdown-menu a{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.86);
  font-weight: 760;
  border: 1px solid transparent;
}

.dropdown-menu a:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.98);
}

@media (hover:hover){
  .dropdown:hover .dropdown-menu{
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
  }
}

.dropdown:focus-within .dropdown-menu{
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
}

/* CTA */
.header-actions{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.book-cta{
  border-radius: 999px;
  padding: clamp(10px, .8vw, 13px) clamp(14px, 1.1vw, 18px);
  font-size: clamp(.9rem, .85vw, 1.02rem);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}