/* A filtered header becomes the containing block for fixed descendants in Safari.
   Keep the mobile header unfiltered so the menu covers the actual viewport. */
@media (max-width: 760px) {
  .site-header {
    background: #161616;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-nav {
    position: fixed;
    inset: var(--header) 0 auto;
    width: 100%;
    height: calc(100vh - var(--header));
    height: calc(100dvh - var(--header));
    padding: 24px 24px calc(32px + env(safe-area-inset-bottom, 0px));
    background: #111;
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .25s ease, visibility .25s;
  }
  .site-nav.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
  .site-nav a { flex-shrink: 0; color: #fff; }
  .site-nav .nav-cta { margin-top: 24px; border: 1px solid var(--yellow); }
  .site-nav a:focus-visible, .menu-toggle:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 4px;
  }
  html.mobile-menu-open, html.mobile-menu-open body { overflow: hidden; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .menu-toggle span { transition: none; }
}