/* ================================================================
   RESPONSIVE — device-class tuning layer. Loaded last so it can
   correct component defaults without !important.

   Breakpoints match real device classes rather than round numbers:
     1200  small laptop / large tablet landscape
     1024  tablet landscape (iPad Pro)
      834  tablet portrait (iPad Air/Pro 11")
      768  small tablet portrait (iPad mini)
      600  large phone landscape / phablet
      480  standard phone (iPhone 14/15, Pixel)
      380  small phone (iPhone SE, Galaxy S-mini)
   ================================================================ */

/* ---------- Universal safety: nothing may cause horizontal scroll ----------
   `clip`, not `hidden`: overflow-x:hidden makes html/body a scroll container,
   which silently disables every `position: sticky` descendant (it was killing
   the service sidebar). `clip` prevents the same horizontal scroll without
   establishing that container, so sticky keeps working. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, figure, table { max-width: 100%; }
/* Long unbroken strings (emails, URLs) must wrap rather than widen the page. */
p, li, a, h1, h2, h3, h4, td { overflow-wrap: break-word; }

/* ================= ≤1200px — small laptop ================= */
@media (max-width: 1200px) {
  :root { --frame-gap: 28px; --container-pad: 20px; }
  .split { gap: var(--space-8); }
  .site-nav__list { gap: var(--space-5); }
}

/* ================= ≤1024px — tablet landscape ================= */
@media (max-width: 1024px) {
  :root { --frame-gap: 24px; --radius-shell: 26px; }
  .section { padding-block: var(--space-8); }
  .hero { min-height: 560px; }
  .hero__content { max-width: 560px; }

  /* Trust strip stops overlapping the hero and becomes its own block.
     It stays a centred column here — only the overlap offset changes. */
  .trust-strip {
    margin-top: var(--space-6);
    gap: var(--space-5);
  }
  .trust-strip__lead { max-width: none; }
  .trust-strip__items { gap: var(--space-6); }

  .glass-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

/* Five across needs more room than four: drop to three before the shared
   tablet breakpoint, or each step card lands under 160px. */
@media (max-width: 1150px) {
  .process-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

/* ================= ≤834px — tablet portrait ================= */
@media (max-width: 834px) {
  :root { --frame-gap: 18px; --radius-shell: 24px; }

  .section { padding-block: var(--space-7); }
  .section-head { margin-bottom: var(--space-7); }

  /* Every 2-up split stacks; visuals lead so the page opens on an image. */
  .split, .split--wide-right, .quote-band, .testimonial, .contact-grid { grid-template-columns: 1fr; }
  .testimonial .media-with-card, .split .collage-grid { order: -1; }

  .collage { padding-left: var(--space-7); padding-bottom: var(--space-7); max-width: 560px; }
  .collage-grid { grid-template-columns: 1fr 1fr; }
  .collage-grid > :first-child { grid-row: auto; }

  .pest-strip { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .process-grid, .process-grid--5 { grid-template-columns: repeat(2, 1fr); }

  .cta-band h2 { max-width: none; }
}

/* ================= ≤768px — small tablet ================= */
@media (max-width: 768px) {
  .hero { min-height: 0; }
  .hero__content { padding-top: calc(var(--header-h) + var(--space-6)); padding-bottom: var(--space-7); max-width: none; }
  .hero__features { gap: var(--space-5); }
  .hero__feature { max-width: none; flex: 1 1 100%; }

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

  /* Floating cards detach and sit inline — they overlap content when the
     media box gets short. */
  .floating-card { position: static; margin-top: var(--space-4); min-width: 0; }

}

/* ================= ≤600px — phablet / large phone landscape ================= */
@media (max-width: 600px) {
  :root { --frame-gap: 12px; --radius-shell: 20px; --container-pad: 16px; }

  .section { padding-block: var(--space-7); }
  .card-grid, .card-grid--3, .glass-grid, .media-grid, .trust-cards { grid-template-columns: 1fr; }
  .process-grid, .process-grid--5 { grid-template-columns: 1fr; }
  .feature-pair { grid-template-columns: 1fr; gap: var(--space-5); }
  .pest-strip { grid-template-columns: repeat(2, 1fr); }
  .facts-row { grid-template-columns: 1fr; gap: var(--space-5); }

  .collage { padding-left: var(--space-6); padding-bottom: var(--space-6); }
  .collage-grid { grid-template-columns: 1fr; }

  /* Buttons go full-width so they're comfortable thumb targets. */
  .hero__actions { gap: var(--space-5); }
  .hero__actions .btn, .cta-band .btn, .section .btn--accent { width: 100%; }
  .cta-band { flex-direction: column; align-items: stretch; text-align: left; }
  .cta-band > div { display: flex; flex-direction: column; gap: var(--space-3) !important; width: 100%; }

  .trust-strip { padding: var(--space-5); }
  /* Single column, not 2×2: at phone widths a two-up grid left only ~101px for
     the label after the 38px icon + gap, so "10 Treatments", "Free Inspection"
     and "100% Documented" each wrapped onto two lines. Full width gives every
     label a single clean line. min-width:0 keeps grid items from forcing their
     min-content width and overflowing the card. */
  .trust-strip__items { display: grid; grid-template-columns: 1fr; gap: var(--space-4); width: 100%; }
  .trust-strip__item { min-width: 0; align-items: center; }
  .trust-strip__item > div { min-width: 0; }
  .trust-strip__item strong { font-size: var(--fs-body); }

  .assurance-row, .assure-row { gap: var(--space-4) var(--space-6); }
  .rating-row__lead { flex-direction: column; gap: var(--space-2); }

  .faq-item summary { padding: var(--space-4) var(--space-5); gap: var(--space-3); }
  .faq-item p { padding: 0 var(--space-5) var(--space-4); }

  .contact-form { padding: var(--space-5); }
  .page-header { padding-top: calc(var(--header-h) + var(--space-5)); padding-bottom: var(--space-7); }
}

/* ================= ≤480px — standard phone ================= */
@media (max-width: 480px) {
  .site-header__inner { padding-block: var(--space-4); }
  .site-header.is-stuck .site-header__inner { padding-block: var(--space-2); }
  /* Same rest/shrink-on-scroll behaviour as desktop, scaled down for the
     phone header — width stays auto (see base rule in layout.css) so the
     logo's own aspect ratio drives it, no distortion. */
  .site-header__logo { height: 84px; }
  .site-header.is-stuck .site-header__logo { height: 50px; }

  .hero__feature { gap: var(--space-3); font-size: var(--fs-small); }
  .hero__feature .icon-badge { width: 48px; height: 48px; }
  .hero__feature .icon-badge svg { width: 22px; height: 22px; }

  .service-card { padding: var(--space-5) var(--space-4) var(--space-4); }
  .service-card__media { width: 118px; }

  .about-card__stat { font-size: 2.25rem; }
  .stat-card strong { font-size: 1.9rem; }

  .pest-chip__media { max-width: 128px; }

  .site-footer { padding-top: var(--space-8); }
}

/* ================= ≤380px — small phone (iPhone SE) ================= */
@media (max-width: 380px) {
  :root { --frame-gap: 8px; --container-pad: 14px; }
  .pest-strip { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .icon-badge { width: 52px; height: 52px; }
  .icon-badge svg { width: 24px; height: 24px; }
  .btn { padding: 15px 20px; }
  .btn--accent { padding-right: 54px; }
}

/* ---------- Touch targets ≥44×44 (WCAG 2.5.5) ----------
   Applied at all widths where the mobile chrome is active, not gated behind
   (hover:none) — desktop browsers resized to phone widths still need them,
   and that's how most responsive QA is actually done. */
@media (max-width: 1100px) {
  /* Tablet-tier rest/shrink sizing — between the full desktop size and the
     phone size set at the ≤480px breakpoint below. */
  .site-header__inner { padding-block: var(--space-5); }
  .site-header.is-stuck .site-header__inner { padding-block: var(--space-2); }
  .site-header__logo { height: 100px; }
  .site-header.is-stuck .site-header__logo { height: 56px; }

  .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .site-nav__list > li > a, .dropdown li a { min-height: 44px; display: flex; align-items: center; }
  .site-footer__col a { display: inline-flex; align-items: center; min-height: 40px; }
  .rating-row__lead a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Touch devices: hover-only affordances must not stick ---------- */
@media (hover: none) {
  .service-card:hover, .btn--accent:hover, .pest-chip:hover { transform: none; }
}

/* ---------- Landscape phones: reclaim vertical space ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__content { padding-top: calc(var(--header-h) + var(--space-5)); padding-bottom: var(--space-6); }
  .section { padding-block: var(--space-7); }
}

/* The global `img { max-width: 100% }` above lives in this file and therefore
   loads after components.css — restate the bleed here so it wins. */
@media (max-width: 900px) {
  .cta-band__art { max-width: none; width: calc(100% + var(--cta-pad) * 2); }
}