@media (max-width: 768px) {
  #site-navigation {
    flex: 0 0 auto;
    width: 0;
    min-width: 0;
  }

  .mobile-toggle {
    position: relative;
    z-index: 120;
    margin-left: auto;
  }

  html.menu-open,
  body.menu-open {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    gap: 0;
    height: 100dvh;
    padding:
      calc(var(--header-height-mobile, 68px) + 18px + env(safe-area-inset-top, 0px))
      var(--space-6, 24px)
      calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .28s ease, opacity .2s ease;
  }

  .nav-links.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .nav-links > li {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
  }

  .nav-links > li:last-child {
    border-bottom: 0;
  }

  .nav-links a {
    width: 100%;
    padding: 14px 0;
    font-size: 1rem;
    color: var(--wr-text-secondary, #4b5563);
  }

  .nav-links .btn {
    margin-top: var(--space-3, 12px);
    justify-content: center;
  }

  .nav-links > li > a:not(.btn)::after {
    display: none;
  }

  html.menu-open .site-header .nav-links a,
  html.menu-open .site-header .nav-links a:visited,
  body.menu-open .site-header .nav-links a,
  body.menu-open .site-header .nav-links a:visited {
    color: var(--wr-text, #1c1f26);
    opacity: 1;
  }

  html.menu-open .site-header .nav-links a:not(.btn):hover,
  html.menu-open .site-header .nav-links a.active,
  body.menu-open .site-header .nav-links a:not(.btn):hover,
  body.menu-open .site-header .nav-links a.active {
    color: var(--wr-text, #1c1f26);
    background: rgba(15, 23, 42, .05);
  }

  html.menu-open .site-header .nav-links .btn--outline-primary,
  html.menu-open .site-header .nav-links .btn--outline-primary:visited,
  body.menu-open .site-header .nav-links .btn--outline-primary,
  body.menu-open .site-header .nav-links .btn--outline-primary:visited {
    background: #fff;
    color: var(--wr-primary, #f58634);
    border-color: rgba(245, 134, 52, .45);
  }

  html.menu-open .site-header .nav-links .btn--primary,
  html.menu-open .site-header .nav-links .btn--primary:visited,
  body.menu-open .site-header .nav-links .btn--primary,
  body.menu-open .site-header .nav-links .btn--primary:visited {
    color: #fff;
  }

  html.menu-open .mobile-toggle span,
  body.menu-open .mobile-toggle span,
  html.menu-open .site-header .mobile-toggle span,
  body.menu-open .site-header .mobile-toggle span {
    background: var(--wr-text, #1c1f26);
  }

  html.menu-open .mobile-toggle span:nth-child(1),
  body.menu-open .mobile-toggle span:nth-child(1),
  html.menu-open .site-header .mobile-toggle span:nth-child(1),
  body.menu-open .site-header .mobile-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  html.menu-open .mobile-toggle span:nth-child(2),
  body.menu-open .mobile-toggle span:nth-child(2),
  html.menu-open .site-header .mobile-toggle span:nth-child(2),
  body.menu-open .site-header .mobile-toggle span:nth-child(2) {
    opacity: 0;
  }

  html.menu-open .mobile-toggle span:nth-child(3),
  body.menu-open .mobile-toggle span:nth-child(3),
  html.menu-open .site-header .mobile-toggle span:nth-child(3),
  body.menu-open .site-header .mobile-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}