/* MENU fix (header, <=980px). Cause: .nav is flex + space-between with THREE items in the row — brand, .menu button, and the
   <nav> wrapper (its <ul> is display:none but the <nav> box itself still counts), so the button lands in the middle.
   Fix: put <nav> on its own full-width row (it only has height when the list is open) and drop the row gap. */
@media (max-width:980px){
  .nav{row-gap:0}
  .nav > nav{order:3;flex-basis:100%}
}