/* --- Hamburger base (hidden on desktop) --- */
.hamburger{
  display:none; position:relative; width:42px; height:36px;
  border:1px solid #222; border-radius:10px; background:#0b0d12;
}
.hamburger span{
  position:absolute; left:9px; right:9px; height:2px; background:#e5e7eb;
  transform-origin: center; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger span:nth-child(1){ top:11px; }
.hamburger span:nth-child(2){ top:17px; }
.hamburger span:nth-child(3){ top:23px; }

/* when menu is open: animate into an X */
.hamburger[aria-expanded="true"] span:nth-child(1){ top:17px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:17px; transform:rotate(-45deg); }

/* --- Mobile menu panel --- */
@media (max-width: 840px){
  .menu{
    position: fixed;
    top: 56px;               /* just below your sticky header (~44-56px tall) */
    left: 0; right: 0;
    background: rgba(15,17,21,.98);
    border-top: 1px solid #222;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    display: none;           /* closed by default */
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 18px;
    z-index: 1000;
  }
  .menu.is-open{ display: flex; }

  .menu a, .menu .pill, .menu .btn{
    display:block;
    width:100%;
  }
  .menu a{ padding:12px 12px; border-radius:10px; }
  .menu .btn{ text-align:center; }

  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .nav{ gap:10px; }
}