@media (max-width: 900px) {
  html.js nav.site .wrap {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    justify-content: initial;
    gap: 12px;
  }

  html.js .menu-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    z-index: 3;
  }

  /* brand sits in the flow, hard against the menu button (not centred) */
  html.js nav.site .brand {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    z-index: 2;
    transform: none;
    margin: 0;
    gap: 8px;
    white-space: nowrap;
  }

  /* "Home" appears only inside the mobile drawer */
  html.js .navlinks .nav-home {
    display: flex;
  }

  html.js nav.site .nav-cta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    z-index: 3;
  }

  html.js .navlinks {
    position: absolute;
    left: calc(-1 * var(--gutter));
    right: auto;
    top: 100%;
    width: min(88vw, 360px);
    min-height: calc(100dvh - 66px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 28px;
    background: rgba(8, 10, 14, 0.985);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-right: 1px solid var(--line-2);
    box-shadow: 30px 0 70px -34px rgba(0, 0, 0, 0.95);
    opacity: 1;
    visibility: hidden;
    transform: translateX(calc(-100% - 2px));
    transition:
      transform 0.34s cubic-bezier(0.19, 1, 0.22, 1),
      visibility 0.34s;
  }

  html.js.nav-open {
    overflow: hidden;
  }

  html.js.nav-open .navlinks {
    visibility: visible;
    transform: none;
  }

  html.js .navlinks a {
    display: flex;
    min-height: 56px;
    align-items: center;
    padding: 18px 2px;
    border-bottom: 1px solid var(--hair);
    font-size: 1.02rem;
  }

  html.js .navlinks a::after {
    display: none;
  }

  html.js .navlinks a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  html.js nav.site .wrap {
    gap: 10px;
  }
}



/* Narrow screens: scale the navbar down — never drop the VIOBE wordmark */
@media (max-width:400px){
nav.site .wrap{gap:8px;padding-inline:14px;min-height:62px}
html.js .menu-toggle{width:40px;height:40px;border-radius:11px}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{width:15px}
.logo-mark{width:30px;height:22px}
nav.site .wrap .brand{gap:7px}
nav.site .brand .wm{display:inline-block;font-size:13px;letter-spacing:.2em;padding-left:.2em}
nav.site .nav-cta .btn-primary{padding:10px 12px;font-size:9px;letter-spacing:.08em;gap:5px}
}
@media (max-width:340px){
nav.site .wrap{gap:6px;padding-inline:11px;min-height:58px}
html.js .menu-toggle{width:37px;height:37px;border-radius:10px}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{width:14px}
.logo-mark{width:26px;height:19px}
nav.site .wrap .brand{gap:6px}
nav.site .brand .wm{font-size:11.5px;letter-spacing:.15em;padding-left:.15em}
nav.site .nav-cta .btn-primary{padding:9px 10px;font-size:8.5px;letter-spacing:.05em;gap:4px}
nav.site .nav-cta .btn-primary .arr{font-size:10px}
}
@media (max-width:300px){
nav.site .wrap{gap:5px;padding-inline:9px;min-height:54px}
html.js .menu-toggle{width:36px;height:36px}
.logo-mark{width:24px;height:17px}
nav.site .brand .wm{font-size:10.5px;letter-spacing:.1em;padding-left:.1em}
nav.site .nav-cta .btn-primary{padding:8px 9px;font-size:8px;letter-spacing:.03em}
}