.nav-toggle, .nav-panel { display: none; }

  @media (max-width: 1024px) {
    .nav-toggle {
      display: grid; align-content: center; justify-items: center; gap: 5px; flex: 0 0 44px;
      width: 44px; height: 44px; padding: 0; cursor: pointer; position: relative; z-index: 2;
      background: transparent; border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); color: #fff;
      transition: box-shadow .2s, color .2s;
    }
    .nav-toggle:hover, .nav.is-open .nav-toggle { box-shadow: inset 0 0 0 2px #ffd100; color: #ffd100; }
    .nav-toggle:focus-visible { outline: 2px solid #ffd100; outline-offset: 3px; }
    .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s; }
    .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav > .brand, .nav > .btn, .nav > .nav-actions { position: relative; z-index: 2; }
    .nav > .btn, .nav > .nav-actions { margin-left: auto; transition: opacity .2s, visibility 0s; }
    .nav.is-open > .btn, .nav.is-open > .nav-actions { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }

    .nav-panel {
      display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1; overflow-y: auto;
      padding: 104px clamp(20px, 4vw, 56px) 40px;
      background:
        radial-gradient(700px 420px at 85% 10%, rgba(19,74,128,.6), transparent 65%),
        linear-gradient(160deg, #0c3560, #04121f 60%);
      opacity: 0; visibility: hidden; transform: translateY(-12px);
      transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s .4s;
    }
    .nav.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
    .nav-panel ol { list-style: none; border-top: 1px solid rgba(255,255,255,.12); }
    .nav-panel li { border-bottom: 1px solid rgba(255,255,255,.12); }
    .nav-panel ol a {
      display: flex; align-items: baseline; gap: 18px; padding: 18px 0;
      font: 400 clamp(34px, 9vw, 52px)/1 "Anton", Impact, sans-serif; letter-spacing: .01em; text-transform: uppercase;
      color: #fff; opacity: 1; transition: color .2s, padding-left .25s;
    }
    .nav-panel ol a:hover, .nav-panel ol a:focus-visible { color: #ffd100; padding-left: 6px; outline: none; }
    .nav-panel ol small { flex: none; width: 2ch; font: 600 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .2em; color: #ffd100; }
    .nav-panel li { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
    .nav.is-open .nav-panel li { opacity: 1; transform: none; }
    .nav.is-open .nav-panel li:nth-child(2) { transition-delay: .05s; }
    .nav.is-open .nav-panel li:nth-child(3) { transition-delay: .1s; }
    .nav.is-open .nav-panel li:nth-child(4) { transition-delay: .15s; }
    .nav.is-open .nav-panel li:nth-child(5) { transition-delay: .2s; }
    .nav-panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
    .nav .nav-panel-actions .btn { padding: 14px 20px; font-size: 14px; }
    .nav .nav-panel-actions .btn span { display: inline; }

    html.nav-locked { overflow: hidden; }
    html.nav-locked body { overflow: hidden; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle span, .nav-panel, .nav-panel li { transition: none !important; }
  }