/* ==========================================================================
   utilities.css — helpers + responsive layout escalation (mobile-first)
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.muted { color: var(--c-muted); }
.accent { color: var(--c-accent); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.flow-lg { --flow: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.hide-mobile { display: none; }

/* ---------- 480px ---------- */
@media (min-width: 480px) {
  .field--row { grid-template-columns: 1fr 1fr; }
}

/* ---------- 600px ---------- */
@media (min-width: 600px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- 768px ---------- */
@media (min-width: 768px) {
  :root { --header-h: 80px; }
  .nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
  .header-cta { display: inline-flex; }
  .hide-mobile { display: revert; }

  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .cta-band__inner { grid-template-columns: 1.3fr auto; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 1024px ---------- */
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* hero media: cap height on large screens so it stays elegant */
@media (min-width: 768px) {
  .hero__media .frame { aspect-ratio: 4 / 5; max-height: 620px; }
}

/* hide decorative trace on small screens (no overflow risk) */
@media (max-width: 600px) {
  .hero__trace { display: none; }
}