/* ============================================================
   Peak Performance — Responsive overrides
   Components use inline styles, so breakpoint rules use
   !important to win. Mobile-first additions only — desktop
   layout is untouched above the largest breakpoint.
   ============================================================ */

/* ---------- Header: collapse nav into hamburger ---------- */
@media (max-width: 880px) {
  .pp-head-nav { display: none !important; }
  .pp-head-phone { display: none !important; }
  .pp-head-book { display: none !important; }
  .pp-head-burger { display: inline-flex !important; }
}
@media (max-width: 400px) {
  .pp-head-wm { font-size: 16px !important; }
}

/* ---------- Hero (home) ---------- */
@media (max-width: 900px) {
  .pp-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 58px 24px 64px !important;
    text-align: center;
  }
  .pp-hero-inner > div { align-items: center !important; }
  .pp-hero-right { order: -1 !important; }
  .pp-hero-right img { max-width: 300px !important; }
}
.pp-hero-h1 { font-size: clamp(42px, 11vw, 78px) !important; }

/* ---------- Page hero titles (Detailing / Pressure / FAQ) ---------- */
.pp-page-hero-title { font-size: clamp(34px, 9vw, 60px) !important; }

/* ---------- Footer CTA headline ---------- */
.pp-foot-cta-h { font-size: clamp(28px, 8vw, 46px) !important; }

/* ---------- Generic grids ---------- */
/* 4-up rows (steps, vehicles, why-us, pressure tiles) */
@media (max-width: 920px) {
  .pp-grid-4, .pp-why-grid, .pp-pwsec-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
  .pp-grid-4, .pp-why-grid, .pp-pwsec-grid { grid-template-columns: 1fr !important; }
}

/* 3-up service rows (home services, pressure-washing services) */
@media (max-width: 960px) {
  .pp-svc-grid, .pp-pwp-svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .pp-svc-grid, .pp-pwp-svc-grid { grid-template-columns: 1fr !important; }
}

/* Detailing package cards — stack early, they're tall */
@media (max-width: 980px) {
  .pp-det-pkg-grid { grid-template-columns: 1fr !important; max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Addon rows */
@media (max-width: 900px) {
  .pp-grid-3 { grid-template-columns: 1fr !important; }
}

/* Service-area split (text + map) */
@media (max-width: 900px) {
  .pp-area-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ---------- Booking page ---------- */
@media (max-width: 960px) {
  .pp-bk-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
  .pp-bk-rail { position: static !important; top: auto !important; }
}
.pp-bk-h1 { font-size: clamp(34px, 9vw, 52px) !important; }
@media (max-width: 560px) {
  .pp-bk-form-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 460px) {
  .pp-bk-svc-grid { grid-template-columns: 1fr !important; }
}