/* ==========================================================================
   RESPONSIVE — All @media breakpoints
   Mobile-first approach. Breakpoints:
     320px  — Small mobile
     640px  — Large mobile
     767px  — Tablet portrait
     991px  — Tablet landscape
     1024px — Small laptop
     1080px — Laptop
     1200px — Large desktop
   ========================================================================== */

/* ── Brand / Logo sizes ────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .brand {
    width: 12%;
  }
}

@media (max-width: 1024px) {
  .brand {
    width: 20%;
  }
}

@media (max-width: 767px) {
  .brand {
    width: 50%;
  }

  .nav-cta {
    display: none;
  }
}

/* ── Section padding ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .section-pad {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .section-pad {
    padding: 50px 0;
  }
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }

  .nav-burger {
    display: block;
  }

  .sect-head {
    gap: 20px;
  }

  .sect-head,
  .svc-feature {
    grid-template-columns: 1fr;
  }

  .svc-feature-media {
    min-height: 320px;
  }
}

/* ── Services section ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .services-sticky-stage {
    min-height: auto;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .services-stage-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .services-nav-list {
    margin-top: 8px;
    gap: 8px;
  }

  .svc-nav-item {
    padding: 10px 14px;
  }

  .svc-stage-media {
    max-height: 280px;
  }
}

/* ── Coverage V2 ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .coverage-v2 {
    /* Remove bg-image at tablet — show solid color instead */
    background-image: none;
    background-color: var(--charcoal);
  }

  .coverage-v2.section-pad {
    padding-top: 0;
  }

  .coverage-v2::before {
    display: none;
  }

  .coverage-v2-grid {
    flex-direction: column;
    justify-content: flex-start;
  }

  .coverage-v2-copy {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    order: 2;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .coverage-v2-image {
    display: block;
    width: 100vw;
    order: 1;
  }

  .coverage-v2-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ── About grid ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-media {
    min-height: 380px;
  }
}

/* ── How It Works ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .how-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── Quote / Reviews ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {

  .quote-inner,
  .rev-grid {
    grid-template-columns: 1fr;
  }

  .quote-inner {
    gap: 44px;
  }
}

/* ── Footer nav ─────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .footer-nav {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .footer-nav .break {
    display: block;
    width: 100%;
    height: 0;
  }

  .footer-nav a:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .footer-nav {
    flex-direction: column;
    gap: 16px;
  }

  .footer-nav a {
    padding: 0;
  }

  /* Specificity bump instead of !important */
  .footer-nav.footer-nav a::after {
    display: none;
  }

  .footer-nav .break {
    display: none;
  }
}

/* ── Foot grid ──────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

/* ── Hero Mobile & Tablet (<= 768px) ────────────────────────────────────────── */
/* ── Hero Mobile & Tablet (<= 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(100px, 15vh, 135px);
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(14, 26, 20, 0.7) 0%,
        rgba(14, 26, 20, 0.45) 30%,
        rgba(14, 26, 20, 0.75) 85%,
        rgba(14, 26, 20, 0.95) 100%),
      linear-gradient(78deg,
        rgba(14, 26, 20, 0.92) 0%,
        rgba(14, 26, 20, 0.7) 60%,
        rgba(14, 26, 20, 0.4) 100%);
  }

  .hero-content {
    height: auto;
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .scroll-cue {
    margin-top: 28px;
    align-self: flex-start;
  }
}

/* ── Misc breakpoints ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero h1 {
    max-width: 13ch;
  }

  .about-checklist {
    grid-template-columns: 1fr;
  }

  .about-stats {
    flex-direction: column;
    gap: 20px;
  }

  .about-stats .stat+.stat {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }

  .q-row,
  .q-row:nth-child(2n) {
    flex-direction: column;
    gap: 10px;
  }

  .q-row:nth-child(2n) .q-body,
  .q-row:nth-child(2n) .q-body p,
  .q-row:nth-child(2n) .q-num {
    text-align: left;
    margin-left: 0;
  }

  .foot-grid,
  .qform-grid {
    grid-template-columns: 1fr;
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .svc-price-badge {
    top: 12px;
    right: 12px;
    min-height: 32px;
    padding: 7px 10px;
    font-size: 10px;
  }
}

/* ── Service detail pages ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .svc-detail-grid {
    grid-template-columns: 1fr;
  }

  .svc-detail-side {
    position: static;
  }

  .coverage-grid {
    grid-template-columns: 1fr;
  }

  .svc-mosaic {
    grid-template-columns: repeat(6, 1fr);
  }

  .svc-c1,
  .svc-c2 {
    grid-column: 1/7;
    grid-row: auto;
  }

  .svc-c2 {
    min-height: 360px;
  }

  .svc-c3 {
    grid-column: 1/4;
    grid-row: auto;
  }

  .svc-c4 {
    grid-column: 4/7;
    grid-row: auto;
  }

  .timeline-steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 640px) {
  .svc-detail-hero-content {
    padding-top: 120px;
  }

  .svc-faq-item summary {
    font-size: 14.5px;
    gap: 14px;
  }
}

/* ── Hero Mobile (<= 425px) ───────────────────────────────────────────────── */
@media (max-width: 426px) {
  .hero {
    padding-top: 0;
  }

  .hero-content {
    min-height: auto;
    padding-top: calc(99px + 9.2vw);
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(30px, 8.5vw, 38px);
    max-width: 100%;
    line-height: 0.95;
  }

  .hero h1 .word {
    max-width: 100%;
  }

  .hero-sub {
    font-size: 15px;
    max-width: 100%;
  }

  .hero-trust {
    gap: 8px;
    font-size: 11.5px;
  }
}