/* Dedicated responsive overrides, loaded after the desktop stylesheet. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .section { padding-left: 24px; padding-right: 24px; }
  .work-top { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 28px; }
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
  .work-card { min-width: 0; width: 100%; }
  .work-image { width: 100%; height: clamp(220px, 68vw, 360px); }
  .work-copy { padding: 18px; }
  .work-copy h3, .work-copy p { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; }
  .work-copy p { line-height: 1.65; }
  .contact { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 480px) {
  h1 { letter-spacing: -2.2px; }
  h2 { letter-spacing: -1.8px; }
  .hero-content { left: 24px; }
  .stats { gap: 9px; }
  .stats div { padding-right: 4px; }
  .contact-links { flex-direction: column; gap: 14px; }
  .process-list { grid-template-columns: 1fr; }
}