/* ==========================================================================
   Responsive — Instant Maintenance Services
   Mobile-first breakpoints: 360, 375, 390, 480, 576, 768, 992, 1024, 1200, 1366, 1440
   ========================================================================== */

@media (min-width: 768px) {
  .emergency-banner__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (min-width: 576px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__btn {
    flex: 0 0 auto;
  }

  .page-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cta__actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  :root {
    --section-py: 5rem;
  }

  .hero {
    padding: 6rem 0;
  }

  .hero__stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  .site-nav-desktop {
    display: flex !important;
  }

  .site-nav-toggle {
    display: none;
  }

  .site-navbar .site-container {
    flex-wrap: nowrap;
  }

  .site-nav-desktop {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-nav-list {
    gap: 1.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 100%;
  }

  .site-nav-list .nav-item:last-child {
    flex-shrink: 0;
  }

  .site-navbar .site-container,
  .site-header .site-container,
  .emergency-banner .site-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .hero {
    padding: 8rem 0;
  }

  .page-hero--tall {
    padding: 6rem 0;
  }

  .property-managers .row {
    gap: 4rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-nav-list {
    gap: 1rem;
  }

  .site-nav-list .nav-link:not(.site-btn-quote) {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1024px) {
  .section-header__title {
    font-size: 3rem;
  }

  .hero__title {
    font-size: 3.75rem;
  }
}

@media (min-width: 1200px) {
  .container.site-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1366px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1440px) {
  :root {
    --container-width: 80rem;
  }
}

@media (max-width: 991.98px) {
  .site-nav-desktop {
    display: none !important;
  }
}

/* Bootstrap g-5 gutters (3rem) exceed default container padding below xl — causes horizontal scroll */
@media (max-width: 1199.98px) {
  .container.site-container .row.g-5 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .trusted-by__list {
    gap: 0.75rem 1.25rem;
  }

  .trusted-by__item {
    font-size: 0.8125rem;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }

  .section-header__desc {
    font-size: 1.0625rem;
  }

  .services__grid .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .hero {
    padding: 4.5rem 0;
  }

  .hero__stats {
    gap: 1rem;
  }

  .hero__stat-number {
    font-size: 1.5rem;
  }

  .service-card {
    padding: 1.5rem;
  }

  .how-it-works {
    padding: 1.5rem;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 390px) {
  .hero__title {
    font-size: 2rem;
  }

  .hero__subtitle {
    font-size: 1.0625rem;
  }

  .site-btn-lg,
  .hero__btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }
}

@media (max-width: 360px) {
  .trusted-by__label {
    width: 100%;
    text-align: center;
  }

  .area-card__name {
    font-size: 0.8125rem;
  }
}
