/* ============================================================================
   Mobile navigation — show EVERY top option on phones/tablets (like desktop)
   Loaded LAST in <head> so these rules win over each page's inline styles
   and over site-chrome.css. Only applies at <=1000px; desktop is untouched.
   ==========================================================================*/
@media (max-width:1000px){
  /* Header becomes part of the page (not a floating overlay) so the taller
     two-row bar never covers the hero on small screens. */
  .top{position:static;background:linear-gradient(180deg,rgba(5,9,13,.96),rgba(5,9,13,.88))}
  .nav{height:auto;flex-wrap:wrap;align-items:center;padding:12px 0 0;gap:12px 16px}

  /* Un-hide the menu and lay every option out across the top, wrapping onto
     as many rows as needed so nothing is lost on a narrow screen. */
  .links{display:flex;order:3;width:100%;flex-wrap:wrap;gap:11px 18px;padding:12px 0 16px;font-size:10px;line-height:1.25}
  .links a{white-space:nowrap}

  /* Remove the empty gap each page reserved for the old floating header. */
  .hero,.hero-content{padding-top:24px}
}

@media (max-width:650px){
  /* Keep the "360° View" pill visible on phones too (it was hidden). */
  .nav-right .pill:not(.gold){display:inline-flex}
  .links{gap:9px 14px;font-size:9.5px}
  .logo-img{width:72px}
  .nav{padding-top:10px}
}