/* ============================================================
   Header / Navigation
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:color-mix(in srgb, var(--paper) 60%, transparent);
  backdrop-filter: blur(32px) saturate(2.25);
  -webkit-backdrop-filter: blur(32px) saturate(2.25);
  border-bottom:1px solid var(--line);
  transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), background-color var(--dur-med) var(--ease);
}
.site-header.is-scrolled{
  box-shadow: var(--shadow-float);
  border-color:transparent;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-6);
  height:84px;
}

.brand{
  display:flex;
  align-items:center;
  flex:none;
}
.brand-logo{
  display:block;
  height:34px;
  width:auto;
}

.main-nav{
  display:none;
}
.main-nav ul{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
}
.main-nav a{
  position:relative;
  display:inline-block;
  padding:8px 1px;
  font-size:13.5px;
  font-weight:600;
  color:var(--slate);
  letter-spacing:.01em;
  transition:color var(--dur-fast) var(--ease);
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:2px;
  height:2px;
  background:var(--jodhpur-500);
  transition:right var(--dur-med) var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ right:0; }
.main-nav a[aria-current="page"]{ color:var(--ink); }
.main-nav a[aria-current="page"]::after{ right:0; }

.header-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex:none;
}
.header-cta{ display:none; }
.hamburger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:5px;
  width:34px; height:34px;
  flex:none;
}
.hamburger span{
  display:block;
  height:2px;
  background:var(--black-950);
  transition: all var(--dur-med) var(--ease);
}
.hamburger span:nth-child(1){ width:100%; }
.hamburger span:nth-child(2){ width:70%; }
.hamburger span:nth-child(3){ width:100%; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:100%; }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:100%; }

/* Mobile nav panel */
.mobile-nav{
  position:fixed;
  inset:0 0 0 auto;
  width:min(400px, 100%);
  height:100dvh;
  background:color-mix(in srgb, var(--black-950) 62%, transparent);
  backdrop-filter: blur(34px) saturate(2.15);
  -webkit-backdrop-filter: blur(34px) saturate(2.15);
  border-left:1px solid var(--line-on-black);
  color:var(--on-black);
  z-index:900;
  padding:var(--sp-6) var(--sp-6) var(--sp-7);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--sp-7);
}
.mobile-nav-top .brand-logo{ height:36px; }
.mobile-nav ul{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  margin-bottom:auto;
}
.mobile-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 2px;
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:600;
  border-bottom:1px solid var(--line-on-black);
  color:var(--on-black);
}
.mobile-nav a svg{ width:18px; height:18px; opacity:.5; }
.mobile-nav a[aria-current="page"]{ color:var(--jodhpur-300); }
.mobile-nav-foot{
  padding-top:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.mobile-nav-contacts{
  display:flex;
  gap:var(--sp-3);
}
.mobile-nav-contacts a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px;
  border:1px solid var(--line-on-black-strong);
  font-size:var(--fs-xs);
  font-weight:700;
}
.mobile-nav-contacts a svg{ width:16px;height:16px; }

.nav-scrim{
  position:fixed; inset:0;
  background:rgba(3,3,4,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:850;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease);
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }

body.nav-open{ overflow:hidden; }

@media (min-width: 1180px){
  .main-nav{ display:block; }
  .header-cta{ display:inline-flex; }
  .hamburger{ display:none; }
}