@media (max-width: 1080px) {
  .footer-grid,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .slider-track {
    min-height: 420px;
  }
}

@media (max-width: 960px) {
  .hero-grid,
  .page-grid,
  .grid-3,
  .grid-2,
  .contact-grid,
  .content-card-grid,
  .inline-link-grid,
  .field-row,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .header-shell {
    position: relative;
    border-radius: 26px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
  }

  .main-nav.is-open {
    display: flex;
  }

  .header-actions {
    margin-left: auto;
  }

  .button-phone {
    display: none;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  :root {
    --container: min(100% - 20px, 1180px);
  }

  .hero-copy,
  .hero-panel,
  .hero-callout,
  .page-hero,
  .card,
  .process-step,
  .faq-item,
  .contact-card,
  .form-card,
  .cta-banner,
  .footer-card,
  .sidebar-card {
    padding: 24px;
    border-radius: 24px;
  }

  .brand {
    max-width: calc(100% - 64px);
  }

  h1 {
    font-size: clamp(2.1rem, 12vw, 3.3rem);
  }

  .hero-visual-primary,
  .hero-visual-secondary,
  .featured-repair-media {
    min-height: 220px;
  }

  .slider-track {
    min-height: 240px;
  }

  .slider-overlay {
    inset: auto 12px 12px 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .slider-badge {
    justify-content: center;
    min-height: 42px;
    font-size: 0.9rem;
  }

  .slider-controls {
    justify-content: center;
  }

  .button,
  .call-fab {
    width: 100%;
  }

  .button-row {
    display: grid;
  }

  .call-fab {
    right: 10px;
    left: 10px;
    bottom: 10px;
  }
}