/* ============================================================
   NAV — sticky header, burger, mobile drawer
   ============================================================ */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:150;padding:15px 0;
  border-bottom:1px solid transparent;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),background .4s,
             backdrop-filter .4s,border-color .4s,padding .4s;
}
.nav.hide{transform:translateY(-104%)}
.nav.solid{background:rgba(21,22,22,.9);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-l);padding:9px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:44px;width:auto;transition:height .4s ease}
.nav.solid .brand img{height:36px}
.nav-links{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;font-size:.84rem;align-items:center}
.nav-links a{opacity:.74;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1;color:var(--orange)}
.nav-cta{border:1px solid var(--line-l);padding:.52rem 1.2rem;border-radius:2px;
  opacity:1 !important;font-weight:500;
  transition:background-color .2s,color .2s,border-color .2s}
.nav-cta:hover{background:var(--orange);color:var(--grey) !important;border-color:var(--orange)}

.burger{display:none;width:44px;height:44px;padding:0;cursor:pointer;background:transparent;
  border:1px solid var(--line-l);border-radius:2px;color:var(--paper);
  align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:18px;height:1.6px;background:currentColor;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:1.6px;
  background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mob{position:fixed;inset:0 0 auto 0;z-index:140;background:var(--grey-d);
  padding:calc(var(--navh) + 16px) var(--gut) 30px;
  transform:translateY(-100%);transition:transform .44s cubic-bezier(.7,0,.2,1);
  max-height:100svh;overflow-y:auto;border-bottom:1px solid var(--line-l)}
.mob.open{transform:translateY(0)}
.mob a{display:block;padding:.9rem 0;font-size:1.3rem;font-family:var(--display);
  text-transform:uppercase;letter-spacing:-.035em;border-bottom:1px solid var(--line-l)}
.mob a:last-child{border-bottom:0;margin-top:1.1rem;text-align:center;background:var(--orange);
  color:var(--grey);padding:.85rem 1.3rem;border-radius:2px;font-size:1.05rem}
.mob a:active{color:var(--orange)}
.mob a:last-child:active{background:var(--apricot)}
body.navopen{overflow:hidden}

/* Breakpoint is 1000px, not the usual 820: the five nav items plus the
   CTA stop fitting alongside the logo before the layout breakpoint. */
@media(max-width:1000px){
  .nav-links{display:none}
  .burger{display:flex}
}