/* Shared nav + hamburger drawer. Baseline is the always-solid treatment
   (previously about.html's simpler version) — the homepage layers a small
   page-specific override on top for the transparent-over-hero effect
   (see the <style> block in index.html). Everything else here — the drawer,
   the menu button, the reveal-free entrance choreography — is identical
   across every page and was previously duplicated verbatim. */

nav{
  position:sticky;top:0;z-index:300;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;height:70px;padding:0 30px;
}
.nav-logo{display:flex;align-items:center;text-decoration:none;position:relative;z-index:2}
/* Two logo variants are always in the markup (nav.njk) for the homepage's
   light/dark swap-on-scroll. The dark mark is the layout-defining, always-solid
   baseline every other page needs; the light one stacks on top via inset:0 and
   stays hidden unless a page opts into the swap (see index.html's override). */
.nav-logo .logo-light{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.nav-logo .logo-dark{transition:opacity .3s ease}

/* Menu pill + animated overlay */
.menu-btn{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 20px 11px 17px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);
  cursor:pointer;position:relative;z-index:2;transition:box-shadow .2s,transform .15s}
.menu-btn:hover{box-shadow:0 6px 20px rgba(18,32,29,0.1);transform:translateY(-1px)}
.menu-ico{position:relative;width:18px;height:12px;flex-shrink:0}
.menu-ico i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .34s cubic-bezier(.2,.7,.2,1),top .34s cubic-bezier(.2,.7,.2,1)}
.menu-ico i:nth-child(1){top:2px}
.menu-ico i:nth-child(2){top:8px}
body.menu-open .menu-ico i:nth-child(1){top:5px;transform:rotate(45deg)}
body.menu-open .menu-ico i:nth-child(2){top:5px;transform:rotate(-45deg)}
.menu-overlay{position:fixed;inset:0;z-index:200;
  background:rgba(12,23,20,0.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;justify-content:flex-end;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-drawer{position:relative;width:min(400px,86vw);height:100%;overflow-y:auto;
  background:radial-gradient(140% 100% at 100% 0%, #E1F4F1 0%, #F1F7F6 46%, #FFFFFF 100%);
  box-shadow:-30px 0 60px rgba(18,32,29,0.14);
  padding:110px 40px 40px;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.menu-overlay.open .menu-drawer{transform:translateX(0)}
.menu-panel{position:static;height:auto;margin:0;display:flex;flex-direction:column}
.menu-link{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:22px;font-weight:500;letter-spacing:-0.02em;
  color:var(--ink);text-decoration:none;padding:15px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(18px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),color .2s}
.menu-panel .menu-link:last-child{border-bottom:none}
.menu-overlay.open .menu-link{opacity:1;transform:none}
.menu-link:hover{color:var(--accent-deep)}
.menu-link .mo{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;transition:border-color .2s}
.menu-link:hover .mo{border-color:var(--accent)}
.menu-overlay.open .menu-link:nth-child(1){transition-delay:.08s}
.menu-overlay.open .menu-link:nth-child(2){transition-delay:.13s}
.menu-overlay.open .menu-link:nth-child(3){transition-delay:.18s}
.menu-overlay.open .menu-link:nth-child(4){transition-delay:.23s}
.menu-overlay.open .menu-link:nth-child(5){transition-delay:.28s}
.menu-cta-btn{margin-top:28px;justify-content:center;
  opacity:0;transition:opacity .5s ease .3s}
.menu-overlay.open .menu-cta-btn{opacity:1}
.menu-foot{margin-top:auto;padding-top:24px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--muted);
  opacity:0;transition:opacity .5s ease .34s}
.menu-overlay.open .menu-foot{opacity:1}

@media (prefers-reduced-motion: reduce){
  .menu-overlay,.menu-drawer,.menu-link,.menu-cta-btn,.menu-foot,.menu-ico i{transition:none!important}
  .menu-overlay.open .menu-link{opacity:1;transform:none}
}

@media(max-width:600px){
  nav{padding:0 20px}
  .nav-link.hide-m{display:none}
}