.mobile-menu-toggle { display: none; }

@media (max-width: 767px) {
  html.is-mobile-menu-open,
  html.is-mobile-menu-open body { overflow: hidden; }

  .site-header.has-mobile-menu {
    --menu-top: max(var(--header-inset), env(safe-area-inset-top));
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 0;
    max-width: none;
    transform: none;
    pointer-events: none;
  }

  .site-header.has-mobile-menu::before {
    content: "";
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    background: #282b2f;
    clip-path: inset(var(--menu-top) calc(50% - 24px) calc(100% - var(--menu-top) - 48px) calc(50% - 24px));
    transition: clip-path .65s cubic-bezier(.76, 0, .24, 1);
  }

  .site-header.has-mobile-menu .mobile-menu-toggle {
    position: fixed;
    z-index: 2;
    top: var(--menu-top);
    left: calc(50% - 24px);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #fff;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .mobile-menu-toggle > span {
    grid-area: 1 / 1;
    width: 22px;
    height: 2px;
    background: currentColor;
    transform: translateY(-4px);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-menu-toggle > span + span { transform: translateY(4px); }
  .is-menu-open .mobile-menu-toggle > span { transform: rotate(45deg); }
  .is-menu-open .mobile-menu-toggle > span + span { transform: rotate(-45deg); }
  .site-header.has-mobile-menu.is-menu-open::before { clip-path: inset(0); }

  .site-header.has-mobile-menu nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3.5vh, 28px);
    height: 100vh;
    height: 100dvh;
    padding: calc(var(--menu-top) + 72px) max(32px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transition: visibility 0s .65s;
  }

  .site-header.has-mobile-menu nav a {
    justify-content: center;
    flex-shrink: 0;
    min-height: 56px;
    padding: 4px 0;
    font-size: clamp(32px, 9vw, 48px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .18s, transform .35s cubic-bezier(.22, 1, .36, 1), color .2s;
  }
  .site-header.has-mobile-menu nav a::after { display: none; }
  .site-header.has-mobile-menu .nav-label { height: 1.25em; }
  .site-header.has-mobile-menu .nav-label > span { transform: none; }
  .site-header.has-mobile-menu .nav-label > [aria-hidden] { display: none; }
  .site-header.has-mobile-menu nav a:focus-visible { color: var(--color-accenttext); }

  .site-header.has-mobile-menu.is-menu-open nav {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .site-header.has-mobile-menu.is-menu-open nav a {
    opacity: 1;
    transform: none;
    transition-duration: .4s, .65s, .2s;
    transition-delay: .22s;
  }
  .site-header.has-mobile-menu.is-menu-open nav a:nth-child(2) { transition-delay: .27s; }
  .site-header.has-mobile-menu.is-menu-open nav a:nth-child(3) { transition-delay: .32s; }
  .site-header.has-mobile-menu.is-menu-open nav a:nth-child(4) { transition-delay: .37s; }

  @media (max-height: 480px) {
    .site-header.has-mobile-menu nav { justify-content: flex-start; gap: 8px; }
    .site-header.has-mobile-menu nav a { min-height: 44px; font-size: 30px; }
  }
}