/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */

/* Tablet */
@media (max-width: 960px) {
  section { padding: 80px 24px; }

  .services-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-section .about-content {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-img img { height: 360px; }

  .final-cta__card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 50px 36px;
    text-align: center;
  }
  .final-cta__text p { margin: 0 auto; }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 720px) {
  section { padding: 70px 20px; }

  /* --- Mobile Nav --- */
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px 24px;
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-link {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
    font-size: 1rem;
  }
  .nav-link::after { display: none; }
  .nav-link.active { color: var(--accent); }

  .nav-cta {
    margin: 16px 4px 0;
    text-align: center;
    padding: 14px 20px;
    font-size: 1rem;
  }

  /* --- Hero --- */
  .hero-header { min-height: 88vh; }
  .hero-tagline { margin-bottom: 28px; }

  /* --- Intro strip --- */
  .intro-strip { padding: 70px 20px 60px; }
  .btn-group { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
  .btn-group .btn { width: 100%; }

  /* --- Services --- */
  .service-thumb { width: 200px; height: 280px; }

  /* --- Gallery --- */
  .gallery-grid { grid-template-columns: 1fr; }
  .carousel { height: 240px; }

  /* --- Final CTA --- */
  .final-cta { padding: 60px 20px 80px; }
  .final-cta__card { padding: 40px 24px; }
  .final-cta__phone { font-size: 1.25rem; }

  /* --- Footer --- */
  .site-footer { padding: 60px 24px 24px; }
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px;
  }
  .site-footer__bottom { flex-direction: column; text-align: center; gap: 6px; }

  /* --- Modal --- */
  .modal__panel { padding: 32px 24px 24px; }
  .modal__form .field-row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }
  .modal__form .field-row .field { margin-bottom: 18px; }
}

@media (max-width: 420px) {
  .hero-header h1 { font-size: 2.4rem; }
  .intro-label { font-size: 0.7rem; letter-spacing: 0.3em; }
  .testimonials-overlay { padding: 70px 20px; }
}