/* === NAV === */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:62px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  background:rgba(255,255,255,0.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--br);
  transition:box-shadow .3s;
}
#nav.scrolled{box-shadow:0 2px 20px rgba(26,10,8,.08)}
.nav-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-box{
  width:38px;height:38px;background:var(--c);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-box img{width:28px;height:28px;object-fit:contain;filter:invert(1);pointer-events:none}
.nav-name{line-height:1}
.nav-name .w{font-family:var(--S);font-size:17px;font-weight:400;letter-spacing:3px;display:block}
.nav-name .t{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--tr);margin-top:3px;display:block}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#888;transition:color .25s;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--c)}
.cta{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:500;
  color:var(--wh);background:var(--c);padding:10px 22px;white-space:nowrap;
  transition:background .25s;display:inline-block;
}
.cta:hover{background:var(--cd)}

/* === HAMBURGER === */
.ham{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:9px;flex-shrink:0;
  background:none;border:none;cursor:pointer;
}
.ham span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .28s ease,opacity .28s ease}
.ham.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ham.on span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* === MOBILE MENU === */
#menu{
  position:fixed;top:62px;left:0;right:0;bottom:0;
  background:var(--wh);z-index:850;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .3s ease;
  visibility:hidden;
}
#menu.on{transform:translateX(0);visibility:visible}
.menu-links{display:flex;flex-direction:column}
.menu-links a{
  display:block;padding:18px 28px;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  border-bottom:1px solid var(--br);color:var(--ink);
  transition:background .2s,color .2s;
}
.menu-links a:active{background:var(--of)}
.menu-links a:last-child{border-bottom:none}
.menu-cta{
  margin:24px 28px 32px;display:block;text-align:center;
  background:var(--c);color:var(--wh);padding:16px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;
}