/* ============================================================
   CANONICAL SITE NAV — single source of truth
   ------------------------------------------------------------
   Every page links this file LAST in <head>, so it wins over
   whatever that page declares inline. Pages had genuinely
   drifted: index/terms/privacy carried no full .ncta rule, so
   "Book a Call" rendered in the body serif at mixed case while
   every other page showed uppercase Syne; link size disagreed
   (.84rem/.08em vs .82rem/.1em) and the logo weight was 600 on
   some pages and bold on others.

   !important is deliberate here. It is the only way one shared
   file can override twelve pages of inline styles without
   rewriting all of them.

   To change the nav, change THIS FILE. Do not add nav rules to
   a page.
   ============================================================ */

/* ---- the bar ---- */
nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1.5rem !important;
  padding:1.1rem 2.5rem !important;
  background:#0c1c2c !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
}

/* ---- wordmark ---- */
nav .logo{
  font-family:'Syne',system-ui,sans-serif !important;
  font-size:.95rem !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  color:#f5f2ee !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
nav .logo span{color:#c07481 !important}

/* ---- links ---- */
nav .nl{
  display:flex !important;
  align-items:center !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:1.6rem !important;
}
nav .nl li{margin:0 !important;padding:0 !important;list-style:none !important}
nav .nl a{
  font-family:'Syne',system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:400 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.5) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  position:relative !important;
  transition:color .2s ease !important;
}
nav .nl a:hover{color:#f5f2ee !important}
nav .nl a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:-4px !important;
  height:1.5px !important;
  width:0 !important;
  background:#c07481 !important;
  transition:width .3s ease !important;
}
nav .nl a:hover::after{width:100% !important}

/* ---- call-to-action ---- */
nav .ncta{
  background:#000 !important;
  color:#f5f2ee !important;
  padding:.55rem 1.4rem !important;
  font-family:'Syne',system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:400 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  border:none !important;
  border-radius:0 !important;
  display:inline-block !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  transition:transform .2s ease,box-shadow .25s ease,background .2s ease,color .2s ease !important;
}
nav .ncta:hover{
  background:#f5f2ee !important;
  color:#0c1c2c !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45) !important;
}

/* ---- hamburger ---- */
nav .menu-toggle{
  display:none !important;
  background:none !important;
  border:none !important;
  cursor:pointer !important;
  padding:.3rem !important;
}
nav .menu-toggle span{
  display:block !important;
  width:22px !important;
  height:2px !important;
  margin:4px 0 !important;
  background:#f5f2ee !important;
  transition:transform .25s ease,opacity .25s ease !important;
}

/* ---- page shell: line the bar up with page content on wide screens ---- */
@media(min-width:1200px){
  body > nav{
    padding-left:calc((100% - 1100px) / 2) !important;
    padding-right:calc((100% - 1100px) / 2) !important;
  }
}

/* ---- tighten before it breaks ---- */
@media(max-width:1180px){
  nav .nl{gap:1.05rem !important}
  nav .nl a{letter-spacing:.06em !important}
}

/* ---- below 940px there is no room for six links plus the CTA ---- */
@media(max-width:940px){
  nav .nl{display:none !important}
  nav .menu-toggle{display:block !important}
  nav .nl.open{
    display:flex !important;
    flex-direction:column !important;
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    background:#0c1c2c !important;
    z-index:200 !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1.5rem !important;
  }
  nav .nl.open a{
    color:#f5f2ee !important;
    font-size:1.1rem !important;
    letter-spacing:.1em !important;
  }
  nav .nl.open a:hover{color:#c07481 !important}
  nav .menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px) !important}
  nav .menu-toggle.open span:nth-child(2){opacity:0 !important}
  nav .menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px) !important}
}

@media(prefers-reduced-motion:reduce){
  nav .ncta:hover{transform:none !important;box-shadow:none !important}
  nav .nl a::after{transition:none !important}
}