/* ============================================================
   responsive.css — media-query overrides
   ============================================================ */

@media(max-width:600px){
  .about-grid{ grid-template-columns:1fr; }
}

@media(max-width:768px){
  .hero{ flex-direction:column; }
  .hero-left{ flex:none; width:100%; padding:3rem 1.5rem 2rem; }
  .hero-right{ flex:none; width:100%; height:280px; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .feature:nth-child(2){ border-right:none; }

  /* Keep the brand lockup within the viewport so the nav row never overflows
     horizontally (the wordmark's intrinsic width exceeds a phone screen at the
     configured height). Constrain the brand and let the mark/wordmark scale. */
  nav{ padding:0 1.25rem; }
  .nav-brand{ min-width:0; flex-shrink:1; overflow:hidden; }
  #asset-wordmark{ max-width:100%; height:auto !important; max-height:34px; }
  #asset-mark{ flex-shrink:0; }

  /* Reveal the hamburger; collapse nav links into a dropdown panel.
     Fixed to the viewport (nav is pinned to top) so the panel spans full
     width regardless of the nav's flex layout. */
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    display:none; position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--nav-bg); border-bottom:1px solid var(--border);
    padding:.5rem 1.5rem 1rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; padding:.85rem 0; font-size:.9rem; }
  .nav-links a.active::after{ display:none; }
}