/* responsive.css — breakpoint overrides (768 / 1024 / 1280) */

@media (min-width: 1280px) {
  .container {
    padding: 0 var(--s-32);
  }
}

@media (max-width: 1023px) {
  .section { padding: var(--s-64) 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  body { font-size: 1rem; }
  h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 1.875rem); }
  h3 { font-size: 1.125rem; }

  .section { padding: var(--s-48) 0; }

  .btn-primary {
    padding: var(--s-12) var(--s-16) var(--s-12) var(--s-16);
  }

  .footer-cols { grid-template-columns: 1fr; }

  .hero--era-spine { padding: var(--s-32) 0; }
  .hero__text h1 { margin-bottom: var(--s-16); }
  .hero__cta-wrap { gap: var(--s-16); }
}

@media (max-width: 480px) {
  .ec-filters { gap: var(--s-8); }
  .ec-filter + .ec-filter { margin-left: 0; padding-left: 0; border-left: none; }
  .pull-quote { padding-left: var(--s-16); margin: var(--s-24) 0; }
}