/* ================================================
   Responsive — mobile & wide screens
   ================================================ */

/* Wider monitors: use more horizontal space */
@media (min-width: 1400px) {
  .container {
    padding-inline: clamp(var(--sp-6), 4vw, var(--sp-12));
  }
}

@media (min-width: 1800px) {
}

/* ---- Tablet & mobile (768px and below) ---- */
@media (max-width: 768px) {
  .hero-layout {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }

  .hero-main,
  .hero-stats--aside,
  .hero-cta-row {
    grid-column: unset;
    grid-row: unset;
    order: unset;
    width: 100%;
  }

  .hero-main {
    order: 1;
    text-align: center;
  }

  .hero-stats--aside {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .hero-cta-row {
    order: 3;
    width: 100%;
    padding-top: var(--sp-4);
  }

  .hero-cta-row .btn {
    width: 100%;
    max-width: 360px;
  }

  .hero-stat {
    text-align: center;
    padding: var(--sp-4);
  }

  .page-header {
    padding-top: calc(var(--nav-height) + var(--sp-8));
    padding-bottom: var(--sp-8);
  }

  .page-header h1,
  .page-header p {
    max-width: 100%;
  }

  .service-feature,
  .service-feature--reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .service-feature--reverse .service-feature__image,
  .service-feature--reverse .service-feature__content {
    order: unset;
  }

  .service-feature__image {
    max-height: 280px;
    object-fit: cover;
  }

  .home-intro {
    gap: var(--sp-8);
  }

  .home-intro__image {
    order: -1;
  }

  .footer-grid {
    gap: var(--sp-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  .cta-banner .flex-center {
    flex-direction: column;
    width: 100%;
  }

  .cta-banner .btn {
    width: 100%;
    max-width: 360px;
  }


  .blog-filter {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--sp-4);
  }

  .hero h1 {
    font-size: var(--text-2xl);
  }

  .hero-stat .number {
    font-size: var(--text-3xl);
  }

  .nav-logo-name {
    max-width: 95px;
    height: 30px;
  }

  .practice-row .card {
    padding: var(--sp-5);
  }
}