@media (max-width: 850px) {
      .nav {
        position: relative;
        padding: 14px 20px;
      }

      .menu-toggle {
        display: inline-flex !important;
      }

      .site-nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 20px;
        right: 20px;
        display: grid;
        gap: 4px;
        justify-items: center;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(15,17,21,.96);
        box-shadow: 0 18px 45px rgba(0,0,0,.32);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        visibility: hidden;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
      }

      .nav-toggle:checked ~ .site-nav {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
      }

      .site-nav a {
        justify-content: center;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 10px;
        text-align: center;
        width: 100%;
      }

      .site-nav a:hover {
        background: rgba(255,255,255,.05);
      }

      .site-nav a.nav-cta {
        justify-content: center;
        margin-top: 6px;
      }

      section { padding: 76px 20px; }
      .grid,
      .grid4,
      .split,
      .media-grid {
        grid-template-columns: 1fr;
      }
      .timeline-item {
        grid-template-columns: 1fr;
      }
    }