/* ============================================================
   HirePunk Landing — responsive header + mobile menu
   Extracted verbatim from the "Landing For Technical Recruiters"
   design handoff (was an inline <style> block on that mockup) so
   both / and /recruiters/ share one source.
   Layered on hp-landing-v3(.b).css.
   ============================================================ */

.menu-btn { display: none; }
.m-nav { display: none; }

@media (max-width: 1080px) {
  .header { padding: 14px 24px; gap: 16px; }
  .nav { gap: 18px; }
  .nav a { font-size: 11px; }
}

@media (max-width: 900px) {
  .header-cta .btn-ghost-light { display: none; }
  .nav { gap: 14px; }
}

@media (max-width: 760px) {
  .menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; padding: 0 9px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
    cursor: pointer; flex: none;
  }
  .menu-btn i {
    display: block; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .header-stack.menu-open .menu-btn i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header-stack.menu-open .menu-btn i:nth-child(2) { opacity: 0; }
  .header-stack.menu-open .menu-btn i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .m-nav {
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(243, 247, 251, 0.96); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(15, 19, 32, 0.08);
    padding: 6px 20px 14px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .header-stack.menu-open .m-nav { opacity: 1; transform: none; visibility: visible; }
  .m-nav a {
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    padding: 13px 4px; border-bottom: 1px dashed var(--line);
  }
  .m-nav a:last-child { border-bottom: 0; }
  .m-nav a:hover { color: var(--acid-ink); }
}

@media (max-width: 430px) {
  .header-cta .btn-sm { padding: 9px 12px; font-size: 10.5px; }
}