/* ==========================================================================
   Responsive overrides, mobile-first.
   Base styles in style.css target 375px+. Below adds tablet and desktop.
   ========================================================================== */

@media (min-width: 768px) {
  .container { padding-inline: var(--container-pad-desktop); }
  .section { padding-block: calc(var(--space-3xl)); }

  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.125rem; }

  .topbar { display: block; }

  /* Cards into 2 columns at tablet */
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .why-list { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }

  /* Hero, side-by-side */
  .hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; padding-block: var(--space-3xl); }
  .hero-photo { aspect-ratio: 4/3; }
  .hero-trust { grid-template-columns: repeat(4, auto); justify-content: flex-start; }

  .stats-strip-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2xl); }

  .areas { grid-template-columns: repeat(3, 1fr); }

  .reassure { grid-template-columns: repeat(3, 1fr); }

  .contact-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .form-row.split { grid-template-columns: 1fr 1fr; }

  /* Buttons sit inline */
  .btn { width: auto; }
  .btn-group { flex-direction: row; }
  .cta-banner .btn-group { max-width: none; justify-content: center; }
  .hero .btn-group { flex-direction: row; }

  /* Footer in single row */
  .footer-row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    text-align: left;
    padding: var(--space-md) 0;
  }
  .footer-brand { flex-direction: row; align-items: center; gap: var(--space-md); }
  .footer-nav { justify-content: center; }
  .footer-contact { flex-direction: row; align-items: center; gap: var(--space-md); }
  .footer-sub { padding: var(--space-xs) 0; }
}

@media (min-width: 1024px) {
  .section { padding-block: var(--section-pad-desktop); }

  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  .lead { font-size: var(--fs-lead-desktop); }

  /* Show desktop nav */
  .nav-desktop {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
  }
  .nav-desktop a {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text);
    padding: 0.5rem 0;
    position: relative;
    transition: color var(--transition-fast);
  }
  .nav-desktop a:hover { color: var(--color-primary); }
  .nav-desktop a[aria-current="page"]::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--color-accent);
  }
  .nav-cta { display: inline-flex; align-items: center; gap: var(--space-md); }
  .nav-cta .nav-phone {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    font-weight: 600; font-size: 0.9375rem;
  }
  .nav-cta .nav-phone svg { width: 16px; height: 16px; color: var(--color-primary); }
  .nav-cta .btn { padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
  .nav-toggle { display: none; }
  .header-bar { height: 80px; }
  .logo img { height: 44px; }

  /* Three column rows */
  .cards { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid.three { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid.four { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .why-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .areas { grid-template-columns: repeat(4, 1fr); }

  .stat-num { font-size: var(--fs-stat); }

  .fab-wa { right: 24px; bottom: 24px; width: 56px; height: 56px; }
  .fab-wa svg { width: 28px; height: 28px; }
}

@media (min-width: 1200px) {
  .hero-grid { gap: var(--space-3xl); }
}