.nav__menu-button,
.nav__mobile {
  display: none;
}

@media (max-width: 900px) {
  .nav__cta {
    display: none !important;
  }

  .nav__menu-button {
    width: 42px;
    height: 42px;
    margin-left: auto;
    display: grid;
    place-content: center;
    gap: 7px;
    border: 1px solid rgba(151, 194, 248, .34);
    background: rgba(255, 255, 255, .04);
    color: var(--paper);
    cursor: pointer;
  }

  .nav__menu-button span {
    width: 18px;
    height: 1px;
    display: block;
    background: currentColor;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
  }

  .nav__menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .nav__menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav__mobile {
    position: fixed;
    inset: 64px 0 auto;
    z-index: 59;
    padding: 18px;
    display: grid;
    background: rgba(0, 9, 31, .98);
    border-bottom: 1px solid rgba(151, 194, 248, .2);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .28);
  }

  .nav__mobile[hidden] {
    display: none !important;
  }

  .nav__mobile a {
    padding: 15px 4px;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(151, 194, 248, .12);
  }

  .nav__mobile-cta {
    margin-top: 12px;
    padding: 14px 16px !important;
    display: flex;
    justify-content: space-between;
    background: var(--sky);
    color: var(--navy);
    border: 0 !important;
    font-weight: 700 !important;
  }

  body.nav-open {
    overflow: hidden;
  }
}