/* Final responsive layer. Loaded after page-specific styles on every page. */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }
body { min-width: 0; overflow-wrap: break-word; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* Allow grid and flex children to shrink instead of forcing page overflow. */
main, section, article, aside, header, footer,
.container, .site-header, .main-nav, .dropdown,
.hero-grid > *, .page-hero-grid > *, .case-row > *, .case-card > *,
.case-study-hero-grid > *, .case-split-grid > *, .case-detail-grid > *,
.contact-layout > *, .footer-grid > *, .svc-hero-grid > *, .svc-panel,
.service-grid > *, .project-grid > *, .testimonial-grid > * { min-width: 0; }

input, select, textarea, button { max-width: 100%; font: inherit; }
textarea { resize: vertical; }

.site-footer .footer-primary-link {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
}
.site-footer .footer-primary-link:hover { background: transparent; color: #fff; }

@media (max-width: 900px) {
  /* Two-column case cards become cramped before the main mobile breakpoint. */
  .case-row { grid-template-columns: 1fr !important; }
  .case-card { width: 100%; }

  .cta-band { gap: 20px; }
  .cta-band .btn { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .site-header { width: 100%; }
  .main-nav { width: 100%; }
  .main-nav.is-open { overscroll-behavior: contain; }
  .main-nav a, .nav-parent { white-space: normal; }

  .dropdown { padding-left: 0 !important; }
  .company-menu-panels, .services-menu-panels { width: 100%; }
  .company-panel, .services-panel, .portfolio-work-panel,
  .portfolio-testimonial-panel article { width: 100%; }

  h1, h2, h3, p, a, strong, small, li { overflow-wrap: anywhere; }
  .hero-copy h1, .page-hero h1, .case-study-copy h1, .svc-copy h1 {
    font-size: clamp(2rem, 10vw, 2.625rem) !important;
    line-height: 1.08;
  }

  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .case-card { padding: 18px; }
  .case-card img, .case-card figure { width: 100%; }
  .contact-map iframe { width: 100%; }
  .footer-grid { gap: 28px; }

  table { display: block; max-width: 100%; overflow-x: auto; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .container { width: calc(100% - 24px) !important; }
  .client-logo-cloud, .client-logo-grid { gap: 8px; }
  .client-logo-cloud span, .client-logo-grid span { padding: 9px; }
  .cta-band, .dark-panel, .svc-panel, .contact-info-panel, .form-card { padding: 20px 16px; }
}