.site-header{
  position:sticky; top:0; z-index:1000;
  transition:box-shadow .3s ease;
  isolation:isolate;
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(245,251,250,0.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  pointer-events:none;
}
/* .site-header.scrolled{ box-shadow:0 8px 24px -18px rgba(6,34,43,0.35); } */
.site-header,
.site-header.scrolled{
  border-bottom:0 !important;
  box-shadow:none !important;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;  height: 100px;   
  gap:16px; padding-block:12px;
}
.brand{
  display:flex; align-items:center; gap:10px; min-width:0;
  font-family:var(--font-display);
  font-weight:700; font-size:1.2rem; color:var(--ink);
}
.brand-mark{
  width:82px; height:82px;
  border-radius:12px;
  flex-shrink:0;
  object-fit:contain;
  transition:transform .25s ease;
}
.brand-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nav-desktop{ display:flex; align-items:center; gap:32px; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{
  position:relative; padding:4px 0;
  font-size:.95rem; font-weight:500; color:var(--ink-soft);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--primary);
  transition:width .25s ease;
}
.nav-cta{ display:flex; align-items:center; gap:14px; }

@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-mark{ transform:rotate(-6deg) scale(1.05); }
  .nav-links a:hover::after{ width:100%; }
}

.nav-toggle{
  display:none;
  width:44px; height:44px; flex-shrink:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface, #fff);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); }

.mm-backdrop{
  position:fixed; inset:0; z-index:1100;
  background:rgba(6,34,43,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.mm{
  position:fixed; top:0; right:0; bottom:0; z-index:1101;
  width:min(86vw, 360px);
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  padding:0 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background:var(--surface, #fff);
  box-shadow:-20px 0 40px -20px rgba(6,34,43,.35);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.8,.3,1), visibility 0s linear .3s;
}
body.nav-open{ overflow:hidden; }
body.nav-open .mm-backdrop{ opacity:1; visibility:visible; transition:opacity .3s ease; }
body.nav-open .mm{ transform:none; visibility:visible; transition:transform .3s cubic-bezier(.22,.8,.3,1); }

.mm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 0 16px;
  border-bottom:1px solid var(--border);
}
.mm-title{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink); }
.mm-close{
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.mm-links{ display:flex; flex-direction:column; padding:8px 0; }
.mm-links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px;
  font-size:1.1rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--border);
  -webkit-tap-highlight-color:transparent;
}
.mm-links a svg{ color:var(--primary); flex-shrink:0; }
.mm-links a:active{ color:var(--primary); }

.mm-cta{ display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:24px; }
.mm-cta .btn{ width:100%; justify-content:center; text-align:center; }

@media (max-width:880px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:flex; }
  .brand{ font-size:1.15rem; }
  .nav{height: 70px;}
  .brand-mark{ width:62px; height:62px; }
}
@media (min-width:881px){
  .mm, .mm-backdrop{ display:none; }
}
@media (max-width:380px){
  .brand-mark{ width:80px; height:80px; }
  .brand-text{ font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){
  .mm, .mm-backdrop{ transition:none; }
}