/* Mobile hamburger + panel. Desktop nav is unchanged above 920px. */
.nav-toggle{
  display:none;
  flex:none;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:none;
  border-radius:7px;
  background:rgba(255,255,255,.1);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle:hover{background:rgba(255,255,255,.16)}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:1px;
}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,
.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}

.nav-mobile{
  display:none;
  background:var(--dark);
  border-top:1px solid rgba(255,255,255,.1);
}
.nav-mobile .nav-mobile-inner{
  display:flex;
  flex-direction:column;
  /* Keep .wrap horizontal gutters (32px, 20px below 560px) so text aligns with the logo. */
  padding-top:8px;
  padding-bottom:18px;
}
.nav-mobile a{
  display:flex;
  align-items:center;
  min-height:44px;
  color:rgba(255,255,255,.9);
  font-weight:500;
  font-size:16px;
  line-height:1.3;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a:hover,
.nav-mobile a:focus-visible{color:var(--teal)}
.nav-mobile a.active{color:var(--teal)}

@media(max-width:920px){
  .nav-links{gap:12px}
  .nav-toggle{display:inline-flex}
  .nav-mobile.is-open{display:block}
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{transition:none}
}