/* Mobile menu. The toggle button is added by assets/js/nav.js, which also adds
   .has-menu to the nav, so without JavaScript the links stay visible. */
.menu-toggle{display:none}

@media (max-width:1100px){
  .nav.has-menu .wrap{flex-wrap:wrap;gap:0 12px}
  .nav.has-menu .brand{order:1;min-width:0}
  .nav.has-menu .navbtn{order:2;margin-left:auto}
  .nav.has-menu .menu-toggle{
    order:3;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 11px;margin-right:-11px;
    background:none;border:0;border-radius:10px;cursor:pointer;color:var(--ink);
  }
  .menu-toggle span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .nav.open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .menu-toggle span:nth-child(2){opacity:0}
  .nav.open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav.has-menu .links{
    display:none;order:4;flex-basis:100%;width:100%;margin:14px 0 0;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .nav.has-menu.open .links{display:flex}
  .nav.has-menu .links a{display:block;padding:14px 0;font-size:16px;border-top:1px solid var(--line)}
}

/* Two-line section labels (e.g. "Research & / Development") stay stacked beside the logo. */
.b2{display:inline-block;vertical-align:middle;line-height:1.35}

/* On phones, stack the section label under "REIA" so the menu button keeps its row. */
@media (max-width:560px){
  .nav.has-menu .brand>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .nav.has-menu .b2{margin-left:0;font-size:9.5px;letter-spacing:.16em}
}

@media (max-width:340px){
  .nav.has-menu .b2{display:none}
}