/* ==========================================================================
   Responsive overrides
   Loaded after every component stylesheet so these rules win the cascade.
   ========================================================================== */
@media (max-width: 1100px){
  .hero__inner{ grid-template-columns: 1fr; text-align: center; }
  .hero__lead{ margin-inline: auto; }
  .hero__ctas, .hero__stats{ justify-content: center; }
  .hero__visual{ margin-top: 20px; }
  .about__grid{ grid-template-columns: 1fr; }
  .about__media{ order: -1; aspect-ratio: 16/9; max-width: 620px; margin-inline: auto; width: 100%; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .nav-links, .nav-cta .btn-ghost{ display: none; }
  .hamburger{ display: flex; }
  .utility-item.hide-tablet{ display: none; }
}

@media (max-width: 640px){
  :root{ --header-h: 96px; }
  .utility-bar{ display: none; }
  .nav-cta .icon-btn{ display: none; }
  .brand__subtitle{ display: none; }
  .brand__title{ font-size: 1.2rem; }
  .brand__mark{ width: 36px; height: 36px; }
  .brand__mark svg{ width: 18px; height: 18px; }
  .nav-bar__inner{ gap: 12px; }
  .hero{ padding-top: 40px; }
  .hero__visual{ height: 320px; }
  .p-grid{ grid-template-columns: 1fr; }
  .tabs{ width: 100%; justify-content: space-between; }
  .tab{ flex: 1; text-align: center; padding: 12px 10px; font-size: .82rem; }
}