/* HirePunk — Companies landing: header responsive fixes.
   Loaded AFTER hp-companies.css + hp-companies-b.css, which are kept byte-identical
   to the design bundle so future handoffs diff cleanly. Both rules below are ported
   verbatim from the design's own export sheet (hp-companies-x.css in
   "HirePunk (17).zip"), which is otherwise not deployed because the rest of it styles
   a different page variant.

   Why they are needed — measured on the un-fixed page:
     761–812px (iPad portrait 768): .header-cta is pinned at min-content and its right
       edge lands at x=813, so the "Book a briefing call" button is clipped by up to
       45px while .nav is still shown (bundle breakpoint was 760px).
     ≤400px (iPhone SE/12/13 mini 375, most Androids 360): .menu-btn sits at x=364..402,
       so only 11px of it is on screen at 375px and 0px at 360px. html/body are
       overflow-x:clip, so it cannot be scrolled to — and with .nav hidden that leaves
       the page with no header navigation at all.

   Fix 1: move the desktop-nav → hamburger switch from 760px up to 960px.
   Fix 2: drop the header CTA below 560px (the same CTA is in the hero and the footer). */

@media (max-width: 960px) {
  .nav { display: none; }
  .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, .96); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(15, 19, 32, .08);
    padding: 6px 40px 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-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; }
}

/* below 760px the page gutter narrows to 20px — keep the drawer aligned to it
   (this restores the bundle's own ≤760 value, which the 960 block above would shadow) */
@media (max-width: 760px) {
  .m-nav { padding: 6px 20px 14px; }
}

@media (max-width: 560px) {
  .header-cta .btn { display: none; }
}