/* ===========================
   POOPY POOCHY — styles.css
   =========================== */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Section spacing */
  --pp-section-pad-y:    60px;   /* large vertical padding (default) */
  --pp-section-pad-y-md: 40px;   /* medium */
  --pp-section-pad-y-sm: 30px;   /* small */
  --pp-section-pad-y-xs: 20px;   /* tight */

  /* Card surface */
  --pp-card-radius:    16px;
  --pp-card-radius-sm: 12px;
  --pp-card-bg:        #ffffff;
  --pp-card-border:    2px solid #eef2f7;
  --pp-card-shadow:    0 2px 10px rgba(0,0,0,.04);
  --pp-card-shadow-hover: 0 8px 20px rgba(0,0,0,.08);

  /* Focus ring (used by all interactive elements) */
  --pp-focus-ring: 0 0 0 3px rgba(12, 135, 242,.45);
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Brand color tokens. The customizer (inc/customizer.php) overrides
   --pp-primary / --pp-primary-dark on user customization, and the gradient
   re-derives automatically because it's built from those vars. */
:root {
  --pp-primary: #0C87F2;
  --pp-primary-dark: #0965B6;
  --pp-blue-gradient: linear-gradient(135deg, #1aa0ff 0%, var(--pp-primary) 50%, var(--pp-primary-dark) 100%);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: 'Poppins', sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
  overflow-x: hidden;
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Placeholder images */
.placeholder-img {
  background: #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  overflow: hidden;
}

.placeholder-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 10px;
}

/* ---------- SECTION TITLE ---------- */
.section-title {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #0C87F2;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.section-title .paw-left { margin-right: 10px; color: #0C87F2; font-size: 22px; }
.section-title .paw-right { margin-left: 10px; color: #0C87F2; font-size: 22px; }

/* ========================================
   NAVIGATION
   ======================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  height: 70px;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo img { height: 55px; width: 110px; }

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-link {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background .2s, color .2s;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.nav-link:hover, .nav-link.active { color: #0C87F2; background: #e8f1fc; }

/* ---------- Dropdown submenu (desktop hover) ---------- */
.nav-menu .menu-item-has-children { position: relative; }
.nav-menu .nav-caret {
  font-size: 10px;
  margin-left: 4px;
  transition: transform .2s;
}
.nav-menu .menu-item-has-children:hover > .nav-link .nav-caret,
.nav-menu .menu-item-has-children:focus-within > .nav-link .nav-caret { transform: rotate(180deg); }

.nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(10, 31, 92, .18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 1100;
  list-style: none;
  margin: 0;
}
.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu,
.nav-menu .menu-item-has-children.open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu .sub-menu .nav-link {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pp-blue-gradient);
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  transition: background .2s;
  white-space: nowrap;
}

.nav-phone:hover { background: #0965B6; }

/* Mirrored drawer Call CTA (js/main.js injects this at the top of the menu).
   Hidden by default; visible inside the mobile drawer (see breakpoint below). */
.nav-drawer-call-item { display: none; }

/* Hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #1a1a1a; margin: 5px 0; border-radius: 2px; transition: .3s; }

/* ========================================
   HERO
   ======================================== */
.hero {
  position: relative;
  min-height: var(--pp-hero-h, 450px);
  padding-top: 70px;          /* sit below the fixed navbar — padding so the sky-blue bg extends up behind it (no white gap) */
  overflow: hidden;
  background: #8FD0F5;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Home hero — Blue Water Bridge photo as the desktop background with the
   wrapped truck as a foreground PNG. On tablet/mobile the bg image hides
   and the solid sky-blue section colour takes over (cleaner on narrow
   screens where the bridge would just be cropped to nothing useful). */
.hero > .hero-bg { display: none; }
@media (min-width: 993px) {
  .hero > .hero-bg { display: block; }
  /* Anchor the bridge photo so the most interesting span (the arch +
     the waterline) stays visible at any container height. */
  .hero > .hero-bg img { object-position: center 65%; }
}

/* Subtle white scrim over the bridge bg so the WE SCOOP text card +
   form stay high-contrast without losing the photo entirely. */
@media (min-width: 993px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, .35) 0%,
      rgba(255, 255, 255, .10) 35%,
      rgba(255, 255, 255, 0)   55%
    );
    z-index: 0;
    pointer-events: none;
  }
}
@media (min-width: 1900px) {
  .hero > .hero-bg img { object-position: 50% center; }
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Optional hero background video — layered over the image, which stays as the
   poster + fallback (and the only thing shown on reduced-motion). */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 1;
}
.hero-bg-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.hero-bg-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;        /* 16:9 keyed to width */
  min-width: 177.78vh;    /* …and to height, so it always covers */
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video,
  .hero-bg-embed { display: none; }
}

/* Hide the hero headline/intro card when toggled off (per page or site-wide).
   The hero keeps its 600px min-height + background, so nothing collapses. The
   H1 stays in the DOM (display:none) so hiding the card costs no SEO. */
.pp-hero-no-card .hero-text-card,
.pp-hero-no-card .page-hero-content,
.pp-hero-no-card .pricing-hero-content,
.pp-hero-no-card .city-hero-content,
.pp-hero-no-card .cities-archive-hero-content { display: none; }

/* Per-section width control (Section Layout fields). Default sections keep
   their .container max-width; these opt into full-bleed or a tighter column. */
.pp-sec-full > .container { max-width: 100%; }
.pp-sec-narrow > .container { max-width: 880px; }

/* Hero video reveal: the headline card shows over the poster while the video
   loads, then fades away once the video is actually playing — so the footage
   is unobstructed. If autoplay is blocked, 'playing' never fires and the card
   stays put (graceful fallback). */
.hero-text-card,
.page-hero-content,
.pricing-hero-content,
.city-hero-content,
.cities-archive-hero-content { transition: opacity .6s ease, visibility .6s ease; }
.pp-video-playing .hero-text-card,
.pp-video-playing .page-hero-content,
.pp-video-playing .pricing-hero-content,
.pp-video-playing .city-hero-content,
.pp-video-playing .cities-archive-hero-content { opacity: 0; visibility: hidden; pointer-events: none; }

/* Pause/play control for hero videos (only emitted when a hero video is set). */
.hero-video-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 15px;
  color: #fff;
  background: rgba(10, 31, 92, .55);
  cursor: pointer;
  pointer-events: auto;          /* re-enable clicks inside the pointer-events:none .hero-bg */
  transition: background .15s ease, transform .15s ease;
}
.hero-video-toggle:hover { background: rgba(10, 31, 92, .82); transform: scale(1.06); }
.hero-video-toggle:focus-visible { outline: 3px solid var(--pp-accent, #FFD700); outline-offset: 2px; }
/* Sound button sits to the left of the pause button when both are shown. */
.hero-sound-toggle { right: 70px; }
@media (max-width: 600px) {
  .hero-video-toggle { width: 38px; height: 38px; bottom: 12px; right: 12px; font-size: 13px; }
  .hero-sound-toggle { right: 60px; }
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 14px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.hero-content { flex: 1; max-width: 520px; }

/* Frosted text card — matches the cards on the other hero pages.
   width: fit-content so the card hugs its widest line of text. */
.hero-text-card {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 14px;
  padding: 11px 17px;
  box-shadow: 0 14px 36px rgba(10, 31, 92, .15);
  margin-bottom: 9px;
  width: fit-content;
  max-width: 100%;
}

/* Mobile-only CTA inside the hero card. Reveals the form (which is hidden
   by default on mobile) and scroll-anchors to it via #hero-quote. */
.hero-cta-mobile { display: none; }

/* Mobile-only mascot + wordmark above the hero card. */
.hero-mascot-mobile { display: none; }

.hero-content h1 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.05;
  color: #0a1f5c;
  margin-bottom: 8px;
}

.hero-highlight { color: var(--pp-primary-dark); }

.hero-subtitle {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
}

.hero-bullets {
  margin-bottom: 0;
}

.hero-bullets li {
  color: #1a1a1a;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.hero-bullets li i { color: #2ECC40; margin-right: 8px; }

/* Quote Form */
.quote-form-wrap {
  background: rgba(255,255,255,.95);
  border-radius: 16px;
  overflow: hidden;
  max-width: 420px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.form-header {
  background: var(--pp-blue-gradient);
  color: #FFD700;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
}

.quote-form { padding: 8px 12px 10px; }

.form-row { display: flex; gap: 10px; margin-bottom: 5px; }

.quote-form input,
.quote-form select {
  width: 100%;
  padding: 14px 12px 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
  background: #fff;
}

.quote-form input:focus,
.quote-form select:focus { border-color: #0C87F2; }

/* ---------- Floating labels ----------
   Wrap pattern: <div class="qf-field"><input placeholder=" "><label></label></div>
   The label sits centered over the input until the field is focused or has a
   value (or for selects: a valid choice), then floats up to the border. */
.qf-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.qf-field > label {
  position: absolute;
  left: 10px;
  /* Anchored to the input's top edge — independent of parent height
     so a validation error appearing below the input doesn't drag the
     label out of place. */
  top: 14px;
  padding: 0 4px;
  pointer-events: none;
  color: #5e5e5e;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  line-height: 1;
  transition: top .15s ease, font-size .15s ease, color .15s ease, font-weight .15s ease;
}

/* Float on focus or when filled (input) / when a valid choice is made (select) */
.qf-field > input:focus ~ label,
.qf-field > input:not(:placeholder-shown) ~ label,
.qf-field > select:focus ~ label,
.qf-field > select:valid ~ label {
  top: -6px;
  font-size: 11px;
  font-weight: 700;
  color: #0C87F2;
}

/* Error state turns the floating label red so the field name stays readable */
.qf-field > input.qf-invalid ~ label,
.qf-field > select.qf-invalid ~ label { color: #F20505; }

/* Native select arrow needs explicit room since the label sits at the left */
.qf-field-select > select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                    linear-gradient(135deg, #555 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.btn-cta {
  display: block;
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #2ECC40, #27ae36);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  text-transform: uppercase;
}

.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(46,204,64,.4); }

.btn-cta i { margin-left: 6px; }

.form-note {
  text-align: center;
  font-size: 11px;
  color: #666;
  margin-top: 6px;
}

.form-note i { margin-right: 4px; }

/* Hero Right */
.hero-right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  min-height: 520px;
}


/* Wrapped service truck — bottom-right overlay on the hero. Hidden under
   1200px (form is wider there and the truck has nowhere to land). Position
   & width are admin-controllable via ACF (hero_truck_*); front-page.php
   emits --pp-truck-* inline. */
.hero-truck-desktop {
  display: none;
  position: absolute;
  right: var(--pp-truck-right, -40px);
  bottom: var(--pp-truck-bottom, 40px);
  width: var(--pp-truck-width, 52vw);
  max-width: 900px;
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .28));
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .hero-truck-desktop { display: block; }
}

/* Position is admin-controllable via ACF (hero_badge_top / hero_badge_right);
   front-page.php emits --pp-badge-top / --pp-badge-right inline. */
.price-badge {
  position: absolute;
  top: var(--pp-badge-top, 180px);
  right: var(--pp-badge-right, 24px);
  z-index: 2;
  background: #F20505;
  color: #fff;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(242,5,5,.4);
  transform: rotate(8deg);
  border: 4px solid #fff;
}

.price-badge-label { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.price-badge-amount { font-size: 42px; font-weight: 900; line-height: 1; }
.price-badge-period { font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* ========================================
   TRUST BAR
   ======================================== */
.trust-bar {
  background: #fff;
  padding: 22px 0;
  border-bottom: 2px solid #eee;
}

.trust-items {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-icon {
  width: 56px;
  height: 56px;
  background: var(--pp-blue-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(12,135,242,.25);
}

.trust-text strong {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  color: #0C87F2;
}

.trust-text p { font-size: 12px; color: #555; max-width: 220px; }

/* ========================================
   HOME — "WHAT'S INCLUDED" CHECKLIST
   Quick scannable row of service items shown between the trust bar and
   the service-area / reviews. Each item: pill with circle icon + label.
   ======================================== */
.home-included {
  padding: 38px 0 32px;
  background: #f7faff;
  border-bottom: 1px solid #eaf1fb;
}
.home-included .section-title { margin-bottom: 22px; }
.home-included-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.home-included-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d9e6f7;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(12,135,242,.06);
}
.home-included-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pp-blue-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.home-included-label {
  font-size: 14px;
  font-weight: 700;
  color: #0a1f5c;
  letter-spacing: .2px;
}
@media (max-width: 600px) {
  .home-included { padding: 26px 0 22px; }
  .home-included-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-included-item { padding: 10px 12px; gap: 10px; }
  .home-included-icon { width: 34px; height: 34px; font-size: 14px; }
  .home-included-label { font-size: 13px; }
}

/* ========================================
   SERVICE AREA
   ======================================== */
.service-area {
  background: #f4f9ff;
  padding: 30px 0;
  border-bottom: 3px solid #0C87F2;
}

.service-area-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.service-area-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.service-area-left i {
  font-size: 36px;
  color: #0C87F2;
}

.service-area-left strong {
  font-size: 18px;
  text-transform: uppercase;
  display: block;
}

.service-area-left p { font-size: 15px; color: #555; }

.service-area-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.service-area-img { width: 100px; height: 70px; border-radius: 8px; object-fit: cover; }

.service-area-right p { font-size: 13px; color: #555; }

/* ========================================
   TESTIMONIALS
   ======================================== */
.testimonials {
  padding: 60px 0;
  background-color: #fff;
  /* Subtle tiled paper texture (seamless). multiply keeps the base color showing
     through so the faint specks never compete with the review cards on top. */
  background-image: url('../assets/bg-white.jpg');
  background-size: 480px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.testimonial-card {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.stars { color: #FFD700; font-size: 16px; margin-bottom: 12px; }
.stars i { margin: 0 1px; }

.testimonial-quote {
  font-size: 14px;
  font-style: italic;
  color: #333;
  margin-bottom: 14px;
  line-height: 1.5;
}

.testimonial-author { font-size: 13px; font-weight: 600; }
.testimonial-author span { font-weight: 400; color: #5e5e5e; }

.testimonial-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 10px;
  object-fit: cover;
  border: 3px solid #FFD700;
  display: block;
}

.testimonial-mascot { display: flex; align-items: flex-end; justify-content: center; }
.mascot-testimonial { width: 180px; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.2)); }

/* ========================================
   BEFORE / AFTER
   ======================================== */
.before-after {
  padding: 60px 0;
  background: #f9f9f9;
}

.before-after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.ba-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.ba-img { width: 100%; height: 250px; border-radius: 16px; object-fit: cover; display: block; }

.ba-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  z-index: 2;
  text-transform: uppercase;
}

.ba-before { background: #F20505; }
.ba-after { background: #2ECC40; }

.ba-arrow {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 3;
  color: #0C87F2;
  font-size: 16px;
}

.ba-cta-card {
  background: linear-gradient(135deg, #1aa0ff 0%, #0C87F2 50%, #0965B6 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  border-radius: 16px;
}

.ba-cta-card h3 { font-size: 26px; font-weight: 900; margin-bottom: 14px; }
.ba-cta-card p { font-size: 14px; line-height: 1.6; }

/* ========================================
   VALUE PROPS
   ======================================== */
.value-props {
  padding: 60px 0;
  background: #fff;
}

.value-props-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vp-card {
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  position: relative;
}

.vp-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0C87F2;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.vp-checklist { text-align: left; margin-bottom: 16px; }

.vp-checklist li {
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp-checklist li i { color: #2ECC40; font-size: 16px; flex-shrink: 0; }
.vp-checklist.green li i { color: #2ECC40; }

.vp-mascot-small { width: 90px; height: auto; margin: 12px auto 0; display: block; }

/* Pricing circle */
.vp-pricing { background: var(--pp-blue-gradient); border-color: #0C87F2; color: #fff; }
.vp-pricing h3 { color: #FFD700; }
.vp-pricing .vp-checklist li { color: #fff; }

.price-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F20505, #c01818);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(242,5,5,.35);
}

.pc-label { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.pc-amount { font-size: 52px; font-weight: 900; line-height: 1; }
.pc-period { font-size: 16px; font-weight: 700; }

.vp-paw-list { text-align: left; margin-bottom: 16px; }

.vp-paw-list li {
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp-paw-list li i { color: #F20505; font-size: 14px; }

.vp-unique {
  font-size: 14px;
  color: #0C87F2;
  font-weight: 600;
  margin-top: 10px;
}

/* ========================================
   HOW IT WORKS
   ======================================== */
.how-it-works {
  padding: 60px 0;
  background: #f9f9f9;
  position: relative;
}

.steps-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.step {
  text-align: center;
  max-width: 160px;
  padding: 10px;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pp-blue-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f1fc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: #0C87F2;
  font-size: 24px;
}

.step h3 {
  font-size: 13px;
  font-weight: 800;
  color: #0C87F2;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.step p { font-size: 12px; color: #555; line-height: 1.4; }

.step-arrow {
  display: flex;
  align-items: center;
  padding-top: 50px;
  color: #aaa;
  font-size: 18px;
}

.hiw-sticky-note {
  position: absolute;
  right: 40px;
  bottom: 30px;
  background: #FFF9C4;
  padding: 20px 24px;
  border-radius: 4px;
  transform: rotate(4deg);
  box-shadow: 2px 4px 12px rgba(0,0,0,.12);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  max-width: 180px;
}

.hiw-sticky-note i { display: block; margin-top: 8px; font-size: 22px; color: #333; }

/* ========================================
   EXTRAS
   ======================================== */
.extras {
  padding: 60px 0;
  background: #fff;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.extras-card {
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 16px;
  padding: 28px 22px;
}

.extras-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0C87F2;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-align: center;
}

.extras-subtitle { text-align: center; font-size: 13px; color: #555; margin-bottom: 16px; }

.highlight-green { color: #2ECC40; }

/* Difference Table */
.diff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.diff-table th { padding: 8px; text-align: center; font-weight: 700; color: #0C87F2; border-bottom: 2px solid #dce9f7; }
.diff-table td { padding: 8px; border-bottom: 1px solid #eee; }
.diff-table td:first-child { text-align: left; }
.diff-table td:nth-child(2), .diff-table td:nth-child(3) { text-align: center; }
.diff-table .green { color: #2ECC40; }
.diff-table .red { color: #F20505; }

/* Deodorize */
.deodorize-card { text-align: center; }
.deodorize-price { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.deodorize-img { width: 100px; height: 140px; border-radius: 12px; object-fit: cover; }
.deodorize-badge {
  background: #FFD700;
  color: #1a1a1a;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.deodorize-badge strong { font-size: 28px; font-weight: 900; line-height: 1; }

/* Love Pets */
.love-pets-card { text-align: center; }
.love-pets-card p { font-size: 14px; color: #555; margin-bottom: 16px; }
.love-pets-img { width: 200px; height: 140px; margin: 0 auto; border-radius: 12px; object-fit: cover; display: block; }

/* ========================================
   FAQ
   ======================================== */
.faq {
  padding: 60px 0;
  background-color: #f9f9f9;
  background-image: url('../assets/bg-white.jpg');
  background-size: 480px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

.faq-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.faq-card {
  flex: 1 1 240px;
  max-width: 285px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
}

.faq-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #0C87F2;
  margin-bottom: 10px;
}

.faq-card h3 i { margin-right: 6px; }

.faq-card p { font-size: 13px; color: #555; line-height: 1.5; }

.faq-cta {
  margin-top: 30px;
  background: #fff;
  border: 2px dashed #0C87F2;
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.faq-cta > i {
  font-size: 28px;
  color: #0C87F2;
  flex-shrink: 0;
}

.faq-cta strong {
  display: block;
  color: #0C87F2;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.faq-cta p { font-size: 13px; color: #555; margin: 0; }

.faq-cta-phone {
  background: var(--pp-blue-gradient);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s;
}

.faq-cta-phone:hover { background: #0965B6; }
.faq-cta-phone i { margin-right: 6px; }


/* ========================================
   FOOTER CTA
   ======================================== */
.footer-cta {
  /* Tiled blue confetti texture blended over the brand gradient for depth.
     overlay keeps the specks faint so the white CTA copy stays readable. */
  background-color: #0C87F2;
  background-image: url('../assets/bg-blue.jpg'), linear-gradient(135deg, #0C87F2, #0965B6);
  background-size: 500px, cover;
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  background-blend-mode: overlay, normal;
  color: #fff;
  padding: 30px 0 16px;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-left h2 { font-size: 28px; font-weight: 900; text-transform: uppercase; }
.footer-left p { font-size: 13px; margin-bottom: 8px; opacity: .85; }

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #0C87F2;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 22px;
  font-weight: 800;
  transition: transform .15s;
}

.footer-phone:hover { transform: scale(1.05); }
.footer-phone i { font-size: 18px; }

.footer-right { display: flex; align-items: center; gap: 14px; }

.footer-mascot { width: 130px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.3)); }

.footer-text-us {
  background: #FFD700;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: 30px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  transform: rotate(-4deg);
}

.footer-copyright {
  text-align: center;
  font-size: 12px;
  opacity: .6;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
  .hero-container { flex-direction: column; align-items: center; padding: 40px 20px 30px; }
  .hero-content { margin: 0 auto; }
  .hero-right { width: 100%; justify-content: center; min-height: 0; }

  /* The illustrated hero bg is hidden at this breakpoint; show the
     mascot + wordmark above the card so the hero still has a face. */
  .hero-mascot-mobile {
    display: block;
    text-align: center;
    margin: 0 auto 14px;
    max-width: 280px;
  }
  .hero-mascot-mobile img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(10, 31, 92, .25));
  }
  /* Park the price badge inline at top-right of the hero (no longer floats over the right column at tablet) */
  .price-badge { position: absolute; top: 90px; right: 24px; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .testimonial-mascot { display: none; }
  .before-after-grid { grid-template-columns: 1fr 1fr; }
  .ba-cta-card { grid-column: 1 / -1; }
  .value-props-grid { grid-template-columns: 1fr; }
  .extras-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { gap: 10px; }
  .step-arrow { display: none; }
  .hiw-sticky-note { position: static; transform: rotate(2deg); margin: 20px auto 0; }
}

/* ----- Navigation: drawer + hamburger kick in at tablet-portrait, not phone-only.
   The desktop nav wraps awkwardly between ~769–992px (Cities/About spill onto a
   second row, logo gets squeezed). Switching to the drawer at ≤992px keeps the
   navbar clean across the whole tablet range. */
@media (max-width: 992px) {
  /* Slide-in mobile nav panel */
  .nav-menu {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(82vw, 340px);
    max-height: calc(100vh - 70px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0));
    gap: 4px;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .25s ease-out;
    display: flex;
    z-index: 1001;
  }

  .nav-menu.open { transform: translateX(0); }

  /* Backdrop when nav is open */
  body.nav-open::after {
    content: "";
    position: fixed;
    top: 70px;
    inset: 70px 0 0 0;
    background: rgba(10, 31, 92, .35);
    backdrop-filter: blur(2px);
    z-index: 1000;
    animation: pp-fade .2s ease-out;
  }
  body.nav-open { overflow: hidden; }

  @keyframes pp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .nav-menu li { width: 100%; }

  /* Mirrored Call-CTA injected at the top of the drawer (js/main.js).
     Hidden on desktop; in the drawer it's the most prominent item. */
  .nav-drawer-call-item { display: list-item; margin-bottom: 10px; }
  .nav-drawer-call {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px !important;
    background: #2ECC40;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800;
    text-transform: none;
    letter-spacing: .3px;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(46, 204, 64, .35);
  }
  .nav-drawer-call:hover,
  .nav-drawer-call:focus-visible { background: #27ae36; color: #fff !important; }
  .nav-drawer-call i { font-size: 14px; }

  .nav-menu a, .nav-menu .nav-link {
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 15px;
  }

  /* Submenu becomes an accordion that takes up space (no positioning) */
  .nav-menu .sub-menu {
    position: static;
    box-shadow: none;
    background: #f5f8fc;
    border-radius: 10px;
    padding: 4px 6px;
    margin: 4px 0 8px;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }
  .nav-menu .menu-item-has-children.open > .sub-menu { display: flex; }
  .nav-menu .menu-item-has-children > .nav-link .nav-caret { float: right; margin-top: 6px; }
  .nav-menu .menu-item-has-children.open > .nav-link .nav-caret { transform: rotate(180deg); }
  .nav-menu .sub-menu .nav-link { padding: 10px 14px; font-size: 14px; }

  /* Animated hamburger. Push to the right edge so it lines up with the drawer's
     top-right corner (acts as the close button when active). */
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 1002;
    margin-left: auto;
    order: 99;
  }
  .nav-toggle span { transition: transform .25s, opacity .2s; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* When the drawer is open, hide the navbar's phone-pill so the X has
     room to act as the close affordance and isn't fighting other UI. */
  body.nav-open .nav-phone { display: none; }

  /* Keep the navbar on top of the drawer's backdrop so the close X is always tappable. */
  .navbar { z-index: 1100; }

  .nav-phone { font-size: 12px; padding: 8px 14px; }
}

@media (max-width: 768px) {
  .faq-cta { flex-direction: column; text-align: center; }
  .footer-text-us {
    transform: none;
    font-size: 13px;
    padding: 10px 16px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .footer-mascot { width: 100px; }

  .hero-content h1 { font-size: 36px; }
  .hero-subtitle { font-size: 15px; }
  .quote-form-wrap { max-width: 100%; }
  .form-row { flex-direction: column; }

  /* Trust bar — compact 3-column instead of stacked rows. Icon above text. */
  .trust-bar { padding: 18px 0; }
  .trust-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: start;
  }
  .trust-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .trust-icon { width: 44px; height: 44px; font-size: 18px; }
  .trust-text strong { font-size: 11px; letter-spacing: .3px; }
  .trust-text p { font-size: 11px; line-height: 1.35; max-width: none; }

  /* How It Works — 2-up grid (5 steps wrap to 3 rows) instead of vertical stack. */
  .steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    flex-wrap: initial;
  }
  .step {
    max-width: none;
    padding: 6px;
    /* Last (5th) step centers itself in the 3rd row */
  }
  .step:last-child { grid-column: 1 / -1; max-width: 220px; margin: 0 auto; }
  .step-icon { width: 56px; height: 56px; font-size: 22px; }
  .step h3 { font-size: 12px; }
  .step p { font-size: 12px; }

  /* Mobile hero: reveal full-width CTA inside the card.
     Hide the quote form by default; clicking the CTA targets #hero-quote
     and unhides via :target. The form anchor has scroll-margin so the
     navbar doesn't cover the top when scrolled to. */
  .hero-cta-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #2ECC40, #27ae36);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(46, 204, 64, .35);
    text-decoration: none;
    transition: transform .12s, box-shadow .12s;
  }
  .hero-cta-mobile:active { transform: translateY(1px); }
  .hero-cta-mobile i { font-size: 14px; }

  .quote-form-wrap {
    display: none;
    scroll-margin-top: 90px;
  }
  .quote-form-wrap:target,
  .quote-form-wrap.is-open {
    display: block;
    animation: pp-form-in .25s ease-out;
  }
  @keyframes pp-form-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .price-badge { width: 100px; height: 100px; }
  .price-badge-amount { font-size: 32px; }

  .section-title { font-size: 22px; }

  .before-after-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }

  .footer-content { flex-direction: column; text-align: center; }
  .footer-left h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .hero-content h1 { font-size: 28px; }
  .nav-logo img { height: 40px; width: 80px; }
}

/* ========================================
   ABOUT PAGE
   ======================================== */

/* Red phone variant for About nav */
.nav-phone-red { background: #F20505; }
.nav-phone-red:hover { background: #b71717; }

/* ---------- ABOUT HERO ---------- */
.about-hero {
  position: relative;
  min-height: var(--pp-hero-h, 600px);
  padding: 100px 0 30px;  /* 70 navbar + 30 card breathing room top; 30 bottom */
  overflow: hidden;
  background: #8FD0F5;
}

.about-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.about-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.about-hero-content {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  border-radius: 20px;
  padding: 28px 32px;
  align-self: start;
  max-width: 560px;
}

.about-hero-content h1 {
  font-size: 80px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 18px;
}

.lead-blue,
.lead-red {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
}

.lead-blue { color: var(--pp-primary); }
.lead-red { color: #F20505; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

.lead-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #F20505;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  margin-left: 6px;
}

.about-hero-body {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.55;
  font-weight: 500;
  margin-top: 8px;
}

/* ---------- OUR STORY / OUR MISSION ---------- */
.about-story {
  padding: 60px 0 30px;
  background: #fff;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 28px;
  align-items: center;
}

.story-photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

.story-text { padding: 0 8px; }

.story-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: #0C87F2;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.story-title i { color: #0C87F2; font-size: 20px; margin: 0 10px; }

.story-text p {
  font-size: 14px;
  color: #333;
  line-height: 1.65;
  text-align: left;
}

.mission-card {
  background: #eaf3fc;
  border: 2px solid #cfe2f6;
  border-radius: 18px;
  padding: 24px 22px;
  text-align: left;
}

.mission-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pp-blue-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}

.mission-card h3 {
  color: #0C87F2;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mission-card p {
  font-size: 13px;
  color: #333;
  line-height: 1.55;
}

/* ---------- WHY CHOOSE (6 colored circles) ---------- */
.why-choose {
  padding: 30px 0 60px;
  background: #fff;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 18px;
  padding: 28px 18px;
}

.why-item {
  text-align: center;
  padding: 6px 4px;
}

.why-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  margin: 0 auto 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.why-blue { background: var(--pp-blue-gradient); }
.why-red { background: #F20505; }
.why-green { background: #2ECC40; }
.why-purple { background: #7E57C2; }
.why-orange { background: #FF9800; }

.why-blue-text { color: #0C87F2; }
.why-red-text { color: #F20505; }
.why-green-text { color: #2ECC40; }
.why-purple-text { color: #7E57C2; }
.why-orange-text { color: #FF9800; }

.why-item strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: .3px;
}

.why-item p {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
}

/* ---------- WHO WE ARE / OUR PROMISE ---------- */
.who-we-are {
  padding: 20px 0 60px;
  background: #fff;
}

.who-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.who-card {
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 18px;
  padding: 26px 24px;
}

.who-card h3 {
  font-size: 22px;
  font-weight: 900;
  color: #0a1f5c;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.who-card p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.who-signature {
  margin-top: 16px !important;
  font-family: 'Poppins', cursive;
  font-style: italic;
  font-weight: 600;
  color: #0C87F2;
  font-size: 16px !important;
}

.who-signature i { color: #0C87F2; margin-left: 6px; }

.who-photo img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.promise-card {
  background: #eef8ee;
  border: 2px solid #cfe7cf;
  border-radius: 18px;
  padding: 24px 22px;
}

.promise-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2ECC40;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}

.promise-card h3 {
  color: #2ECC40;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.promise-card p {
  font-size: 13px;
  color: #333;
  line-height: 1.55;
}

/* ---------- ABOUT FOOTER (overrides) ---------- */
.about-footer { padding: 40px 0; }

.about-footer .footer-content {
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.about-footer .footer-left h2 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 6px;
}

.footer-yellow {
  color: #FFD700;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

.footer-divider {
  width: 1px;
  height: 80px;
  background: rgba(255,255,255,.3);
}

.about-footer .footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-chat-icon {
  font-size: 38px;
  color: #fff;
  opacity: .9;
}

/* ---------- BOTTOM TRUST STRIP ---------- */
.trust-strip-bottom {
  background: #fff;
  padding: 18px 0;
  border-top: 1px solid #eee;
}

.strip-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strip-icon {
  font-size: 28px;
  width: 38px;
  text-align: center;
}

.strip-blue { color: #0C87F2; }
.strip-red { color: #F20505; }

.strip-item strong {
  font-size: 12px;
  color: #1a1a1a;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ---------- ABOUT RESPONSIVE ---------- */
@media (max-width: 992px) {
  .about-hero-container { grid-template-columns: 1fr; }
  .about-hero-content { background: rgba(255,255,255,.85); }
  .about-hero-content h1 { font-size: 56px; }

  .story-grid { grid-template-columns: 1fr; }
  .story-photo img { height: 240px; }

  .why-grid { grid-template-columns: repeat(3, 1fr); }

  .who-grid { grid-template-columns: 1fr; }
  .who-photo img { min-height: 220px; }

  .strip-items { gap: 14px; }
}

@media (max-width: 600px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .about-hero-content h1 { font-size: 44px; }
  .lead-blue, .lead-red { font-size: 20px; }
  .strip-items { flex-direction: column; align-items: flex-start; }
  .footer-divider { display: none; }
}

/* ========================================
   POLICIES PAGE
   ======================================== */
.policies-hero {
  position: relative;
  min-height: 460px;
  padding-top: 70px;
  overflow: hidden;
  background: #8FD0F5;
}

.policies-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.policies-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.policies-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.policies-hero-bullets li { justify-content: center; }

.policies-hero-content {
  max-width: 540px;
}

.policies-hero-content h1 {
  font-size: 64px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 1px 2px 4px rgba(255,255,255,.4);
}

.policies-tagline {
  font-size: 28px;
  font-weight: 700;
  color: var(--pp-primary);
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.1;
}

.policies-hero-body {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 18px;
}

.policies-hero-bullets li {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policies-hero-bullets li i {
  color: #0C87F2;
  font-size: 18px;
  flex-shrink: 0;
}

.policies-hero-mascot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.policies-hero-mascot img {
  width: 360px;
  max-width: 90%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* ---------- POLICIES GRID ---------- */
.policies-grid-section {
  padding: 50px 0 60px;
  background: #fff;
}

.policies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  /* Each card sits at its natural height — so opening one doesn't stretch
     the neighbor in the same row to match. */
  align-items: start;
}

.policy-card {
  /* <details> element styled as a card. summary holds icon+title+chevron;
     body is collapsible. open by default at desktop, collapses on mobile. */
  display: block;
  background: #fff;
  border: 2px solid #eef2f7;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  overflow: hidden;
}

.policy-card-summary {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.policy-card-summary::-webkit-details-marker { display: none; }
.policy-card-summary::marker { display: none; }
.policy-card-summary:hover { background: #f8fbff; }
.policy-card-summary:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); border-radius: 14px; }

.policy-chevron {
  color: var(--pp-primary);
  font-size: 14px;
  transition: transform .2s ease-out;
}
.policy-card[open] .policy-chevron { transform: rotate(180deg); }

.policy-card > .policy-body {
  padding: 0 18px 18px 88px; /* align body under the title (left of summary icon + gap) */
}

.policy-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  flex-shrink: 0;
}

.policy-blue { background: var(--pp-blue-gradient); }
.policy-green { background: #2ECC40; }
.policy-purple { background: #7E57C2; }
.policy-orange { background: #FF9800; }
.policy-red { background: #F20505; }
.policy-pink { background: #E91E63; }

.policy-blue-text { color: #0C87F2; }
.policy-green-text { color: #2ECC40; }
.policy-purple-text { color: #7E57C2; }
.policy-orange-text { color: #FF9800; }
.policy-red-text { color: #F20505; }
.policy-pink-text { color: #E91E63; }

.policy-card-summary h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin: 0;
}

.policy-body p {
  font-size: 13.5px;
  color: #333;
  line-height: 1.6;
}

.policy-intro {
  font-size: 13.5px;
  color: #333;
  line-height: 1.55;
  margin-bottom: 8px;
}

.policy-list {
  padding: 0;
  margin: 0;
}

.policy-list li {
  position: relative;
  font-size: 13.5px;
  color: #333;
  line-height: 1.55;
  padding-left: 16px;
  margin-bottom: 6px;
}

.policy-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1a1a;
}

.policy-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 8px;
}

.policy-list-inline li {
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.policy-list-inline li::before { display: none; }

.policy-list-inline li i {
  color: #2ECC40;
  font-size: 14px;
}

.policy-inline-thumb { color: #FFC107; margin-left: 4px; }

.policy-inline-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.policy-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.policy-tag i { color: #0C87F2; font-size: 13px; }

/* ---------- POLICIES FOOTER ---------- */
.policies-footer { padding: 40px 0; }

.policies-footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.policies-footer-mascot img {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.3));
}

.policies-footer .footer-left {
  text-align: center;
  flex: 1;
  min-width: 260px;
}

.policies-footer .footer-left h2 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 6px;
}

.policies-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.footer-text-us-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #0C87F2;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  text-transform: uppercase;
  transition: transform .15s;
}

.footer-text-us-btn:hover { transform: scale(1.05); }
.footer-text-us-btn i { font-size: 22px; }

/* ---------- POLICIES RESPONSIVE ---------- */
@media (max-width: 992px) {
  .policies-hero-container { grid-template-columns: 1fr; text-align: center; }
  .policies-hero-content { margin: 0 auto; }
  .policies-hero-bullets li { justify-content: center; }
  .policies-hero-content h1 { font-size: 48px; }
  .policies-tagline { font-size: 24px; }

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

@media (max-width: 600px) {
  .policies-hero-content h1 { font-size: 38px; }
  .policies-tagline { font-size: 20px; }
  .policy-card-summary { grid-template-columns: 46px 1fr auto; padding: 12px 14px; gap: 12px; }
  .policy-icon { width: 46px; height: 46px; font-size: 18px; }
  .policy-card-summary h3 { font-size: 14px; }
  .policy-card > .policy-body { padding: 0 14px 14px 70px; }
  .policy-card > .policy-body p,
  .policy-card > .policy-body li { font-size: 13px; }
  .policies-footer .footer-left h2 { font-size: 24px; }
}

/* ========================================
   PRICING PAGE
   ======================================== */
.pricing-hero {
  position: relative;
  min-height: var(--pp-hero-h, 600px);
  padding: 100px 0 30px;  /* 70 navbar + 30 card breathing room top; 30 bottom */
  overflow: hidden;
  background: #8FD0F5;
}

.pricing-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pricing-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.pricing-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.pricing-hero-content { max-width: 540px; }

.pricing-hero-content h1 {
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 16px;
}

.pricing-h1-dark,
.pricing-h1-light {
  display: block;
  font-size: 56px;
}

.pricing-h1-dark  { color: #0a1f5c; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 10px rgba(255,255,255,.55); }
.pricing-h1-light { color: var(--pp-primary-dark); }

.pricing-hero-body {
  font-size: 17px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 18px;
}

.pricing-hero-bullets li {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-hero-bullets li i {
  color: #0C87F2;
  font-size: 18px;
  flex-shrink: 0;
}

/* Float the price badge top-right of the hero, mirroring the home page.
   Top: 70(nav) + 60(container pad) + 10 → matches home's badge position. */
.pricing-price-badge {
  position: absolute;
  top: 140px;
  right: 30px;
  z-index: 2;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #F20505;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(242,5,5,.4);
  transform: rotate(8deg);
  border: 4px solid #fff;
  font-weight: 700;
}

.pricing-price-badge span:first-child { font-size: 11px; letter-spacing: .3px; }
.pricing-price-badge strong { font-size: var(--pp-badge-amount, 42px); font-weight: 900; line-height: 1; margin: 2px 0; }
.pricing-price-badge span:last-child { font-size: 12px; }

/* ---------- INFO PILLS ---------- */
.pricing-pills {
  background: #fff;
  padding: 28px 0 10px;
}

.pricing-pills-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

.pricing-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 16px;
  padding: 16px 18px;
}

.pill-tag {
  background: var(--pp-blue-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .3px;
  padding: 14px 16px;
  border-radius: 12px;
  line-height: 1.2;
  flex-shrink: 0;
  min-width: 130px;
}

.pill-body { flex: 1; }
.pill-body strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #0a1f5c;
  margin-bottom: 4px;
}
.pill-body p { font-size: 13px; color: #555; line-height: 1.5; }

.pill-body-help strong {
  color: #0C87F2;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.pill-plus { color: #2ECC40; font-weight: 900; }

.pill-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.pill-icon-blue { background: #4FC3F7; }

/* ---------- WEEKLY SERVICE ---------- */
.weekly-service {
  padding: 40px 0 50px;
  background: #fff;
}

.title-light {
  font-weight: 600;
  color: var(--pp-primary);
  font-size: .8em;
  text-transform: uppercase;
}

.weekly-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.weekly-card {
  position: relative;
  background: #fff;
  border: 2px solid #e3edf8;
  border-radius: 16px;
  padding: 22px 16px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.weekly-popular {
  background: #eaf3fc;
  border-color: #b8d6ef;
  border-width: 2px;
}

.popular-ribbon {
  position: absolute;
  top: -10px;
  left: -8px;
  background: #FFD600;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .3px;
  padding: 5px 10px 5px 14px;
  border-radius: 4px 4px 4px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.popular-ribbon::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  border-left: 8px solid transparent;
  border-top: 6px solid #b39800;
}

.weekly-card h3 {
  font-size: 18px;
  font-weight: 900;
  color: #0C87F2;
  margin-bottom: 8px;
  letter-spacing: .3px;
}

.weekly-dogs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  color: #B97A48;
  font-size: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.weekly-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 14px;
  color: #0C87F2;
  line-height: 1;
}

.weekly-price .dollar { font-size: 26px; font-weight: 800; margin-right: 2px; }
.weekly-price .amount { font-size: 48px; font-weight: 900; letter-spacing: -1px; }
.weekly-price .per { font-size: 12px; font-weight: 700; margin-left: 4px; color: #1a1a1a; }

.weekly-bullets { text-align: left; width: 100%; margin-bottom: 14px; }

.weekly-bullets li {
  font-size: 12.5px;
  color: #333;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.weekly-bullets li i { color: #2ECC40; font-size: 13px; flex-shrink: 0; }

.weekly-btn {
  display: inline-block;
  width: 100%;
  background: #1E88E5;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 11px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
  margin-top: auto;
}

.weekly-btn:hover { background: #1565C0; transform: translateY(-1px); }

/* ---------- OTHER SERVICES (Bi-weekly / Initial / Spring) ---------- */
.other-services {
  padding: 10px 0 40px;
  background: #fff;
}

.other-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.service-card {
  background: #fff;
  border: 2px solid #eef2f7;
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.service-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.service-header-icon { font-size: 22px; flex-shrink: 0; }

.service-header h3 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.15;
}

.service-sub-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
}

.service-purple .service-header-icon,
.service-purple .service-header h3 { color: #7E57C2; }

.service-orange .service-header-icon,
.service-orange .service-header h3 { color: #FF9800; }

.service-green .service-header-icon,
.service-green .service-header h3 { color: #2ECC40; }

.service-subtitle {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 14px;
  text-align: center;
}

.service-pricelist {
  margin-bottom: 16px;
}

.service-pricelist li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0a1f5c;
  padding: 7px 0;
  border-bottom: 1px dashed #e0e6ee;
}

.service-pricelist li:last-child { border-bottom: none; }

.service-pricelist .dots {
  flex: 1;
  border-bottom: 1px dotted #cdd5df;
  margin: 0 4px 4px;
  height: 1px;
  align-self: flex-end;
}

.service-pricelist .price {
  font-weight: 900;
  font-size: 16px;
  white-space: nowrap;
}

.service-pricelist .price em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  margin-left: 2px;
}

.service-purple .service-pricelist .price { color: #7E57C2; }
.service-orange .service-pricelist .price { color: #FF9800; }
.service-green .service-pricelist .price { color: #2ECC40; }

.service-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 12px;
  border-radius: 10px;
  text-transform: uppercase;
  transition: transform .15s, filter .15s;
  margin-top: auto;
}

.service-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.service-btn-purple { background: #fff; color: #7E57C2; border: 2px solid #7E57C2; }
.service-btn-purple:hover { background: #7E57C2; color: #fff; }

.service-btn-orange { background: #FF9800; color: #fff; }
.service-btn-green { background: #2ECC40; color: #fff; }

.service-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: #b71717;
  font-weight: 600;
  margin-top: 12px;
  text-align: left;
  line-height: 1.45;
}

.service-warning i { color: #F20505; font-size: 14px; flex-shrink: 0; margin-top: 2px; }

.service-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 500;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
  text-align: left;
}

.service-note i { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

.service-note-orange {
  background: #FFF6E5;
  border: 1px solid #FFE0A0;
  color: #8a5500;
}
.service-note-orange i { color: #FF9800; }

.service-note-green {
  background: #EEF8EE;
  border: 1px solid #cfe7cf;
  color: #1f6f29;
}
.service-note-green i { color: #2ECC40; }

.service-fineprint {
  font-size: 11.5px;
  color: #555;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 12px;
}

/* ---------- YARD SIZE ADJUSTMENT ---------- */
.yard-size {
  padding: 20px 0 40px;
  background: #fff;
}

.yard-size-card {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 24px;
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 18px;
  padding: 22px;
  align-items: center;
}

.yard-size-photo img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

.yard-size-body h3 {
  font-size: 18px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: .3px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ys-light { color: var(--pp-primary); font-weight: 700; }

.yard-size-sub {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
}

.yard-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.yard-tier {
  background: #fff;
  border: 2px solid #e3edf8;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yard-tier-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  gap: 2px;
}

.yard-tier-check { background: #E8F5E9; color: #2ECC40; }
.yard-tier-tree { background: #F3E8FB; color: #7E57C2; }
.yard-tier-trees { background: #FFF3E0; color: #FF9800; font-size: 12px; }
.yard-tier-trees i { font-size: 11px; }

.yard-tier-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #0a1f5c;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.1;
}

.yard-tier-purple-text { color: #7E57C2 !important; }
.yard-tier-orange-text { color: #FF9800 !important; }

.yard-tier-price {
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 2px;
}

.yard-tier-price em { font-style: normal; font-size: 11px; font-weight: 600; color: #555; }
.yard-tier-green { color: #2ECC40; }

.yard-size-note {
  position: relative;
  background: #FFF59D;
  border-radius: 6px;
  padding: 22px 18px 18px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  transform: rotate(3deg);
  box-shadow: 2px 4px 12px rgba(0,0,0,.12);
}

.yard-size-note i {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  color: #1a1a1a;
}

.yard-size-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5b5b, #b71717);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* ---------- ADD-ON SERVICES ---------- */
.addons {
  padding: 50px 0 40px;
  background: #fff;
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
  gap: 18px;
}

.addon-card {
  background: #fff;
  border: 2px solid #eef2f7;
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  flex-wrap: wrap;
}

.addon-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFE0B2;
  color: #FF9800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.addon-icon-blue { background: #E3F2FD; color: #0C87F2; }
.addon-icon-green { background: #E8F5E9; color: #2ECC40; }

.addon-card h4 {
  font-size: 13px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.addon-card p {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
  margin-bottom: 6px;
  flex-basis: 100%;
}

.addon-card > div:not(.addon-icon) {
  flex: 1;
  min-width: 0;
}

.addon-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #0C87F2;
  font-weight: 900;
  flex-basis: 100%;
}

.addon-price .dollar { font-size: 16px; }
.addon-price .amount { font-size: 26px; line-height: 1; }
.addon-price .per { font-size: 11px; font-weight: 700; color: #1a1a1a; margin-left: 4px; }

/* ---------- PRICING RESPONSIVE ---------- */
@media (max-width: 992px) {
  .pricing-hero-container { text-align: center; }
  .pricing-hero-content { margin: 0 auto; }
  .pricing-hero-bullets li { justify-content: center; }
  .pricing-h1-dark, .pricing-h1-light { font-size: 44px; }
  .pricing-price-badge { top: 130px; right: 16px; width: 110px; height: 110px; }
  .pricing-price-badge strong { font-size: calc(var(--pp-badge-amount, 42px) * 0.75); }

  .pricing-pills-grid { grid-template-columns: 1fr; }

  .weekly-grid { grid-template-columns: repeat(3, 1fr); }
  .other-services-grid { grid-template-columns: 1fr; }

  .yard-size-card { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 16px; }
  .yard-size-photo img { height: 160px; }
  .yard-tiers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .yard-tier { text-align: center; flex-direction: column; padding: 10px 8px; gap: 6px; }
  .yard-tier-title { font-size: 11px; }
  .yard-tier-price { font-size: 12px; }
  .yard-tier-price em { font-size: 10px; }
  .yard-size-note {
    transform: none;
    max-width: 100%;
    margin: 0;
    padding: 14px 16px;
    font-size: 13px;
    border-radius: 12px;
  }
  .yard-size-note i { font-size: 18px; margin-top: 6px; }
  .yard-size-pin { display: none; }

  .addons-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pricing-h1-dark, .pricing-h1-light { font-size: 34px; }
  .weekly-grid { grid-template-columns: 1fr 1fr; }
  .pricing-price-badge { top: 88px; right: 12px; width: 108px; height: 108px; border-width: 3px; }
  .pricing-price-badge strong { font-size: calc(var(--pp-badge-amount, 42px) * 0.55); }
  .pricing-price-badge span { font-size: 9px; }
  .addons-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .addon-card { padding: 14px 12px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .addon-card h4 { font-size: 12px; }
  .addon-card p { font-size: 11px; }
  .pricing-pill { flex-wrap: wrap; }
  .pill-tag { width: 100%; }
}

/* ========================================
   REVIEWS PAGE
   ======================================== */
.reviews-hero {
  position: relative;
  min-height: 480px;
  padding-top: 70px;
  overflow: hidden;
  background: #8FD0F5;
}

.reviews-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.reviews-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.reviews-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.reviews-hero-content .reviews-lead-red { justify-content: center; }

.reviews-hero-content { max-width: 540px; }

.reviews-hero-content h1 {
  font-size: 80px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 16px;
  text-shadow: 1px 2px 4px rgba(255,255,255,.4);
}

.reviews-lead-blue {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--pp-primary);
  margin-bottom: 14px;
  letter-spacing: -.5px;
}

.reviews-lead-red {
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  color: #F20505;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Caveat', 'Poppins', cursive;
  font-weight: 700;
  font-size: 30px;
}

.reviews-heart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #F20505;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(242,5,5,.35);
}

.reviews-hero-body {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.6;
}

.reviews-hero-mascot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.reviews-hero-mascot img {
  width: 380px;
  max-width: 95%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* ---------- TESTIMONIAL GRID ---------- */
.reviews-grid-section {
  padding: 60px 0 40px;
  background: #fff;
}

.reviews-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.reviews-section-title .title-dash {
  display: inline-block;
  width: 38px;
  height: 3px;
  background: var(--pp-primary);
  border-radius: 2px;
  position: relative;
}

.reviews-section-title .title-dash::before,
.reviews-section-title .title-dash::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 3px;
  background: var(--pp-primary);
  border-radius: 2px;
}

.reviews-section-title .title-dash::before { top: -7px; left: 0; }
.reviews-section-title .title-dash::after { top: 7px; left: 0; }

.reviews-stars-row {
  text-align: center;
  color: #FFD600;
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 30px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.review-card {
  position: relative;
  background: #fff;
  border: 2px solid #eef2f7;
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.review-card .stars {
  color: #FFD600;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.review-quote {
  position: absolute;
  top: 18px;
  right: 22px;
  color: var(--pp-primary);
  font-size: 32px;
  opacity: .9;
}

.review-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--pp-primary);
  margin-bottom: 10px;
}

.review-card p {
  font-size: 14px;
  color: #333;
  line-height: 1.55;
  margin-bottom: 10px;
}

.review-author {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px !important;
}

.review-verified {
  font-size: 13px;
  color: var(--pp-primary);
  font-weight: 600;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-verified i { color: var(--pp-primary); font-size: 14px; }

/* "via Google" attribution badge — replaces the generic Verified Customer badge
   for any review whose source is the business's Google Business Profile. */
.review-via-google {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 0 !important;
}
.review-google-mark { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.review-google-mark svg { width: 100%; height: 100%; }

/* "Showing 12 of 60 — read them all on Google" link below the grid */
.reviews-all-link {
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  color: #555;
  font-weight: 500;
}
.reviews-all-link a {
  color: var(--pp-primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--pp-primary);
}
.reviews-all-link a:hover,
.reviews-all-link a:focus-visible {
  color: #0a1f5c;
  border-bottom-color: #0a1f5c;
}

/* "60+ verified reviews" subtext under the 5.0 STAR RATING ON GOOGLE block */
.google-review-count {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  letter-spacing: .3px;
}

/* ---------- GOOGLE CTA ---------- */
.google-cta-section {
  padding: 20px 0 50px;
  background: #fff;
}

.google-cta {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 24px;
  align-items: center;
  background: #eaf3fc;
  border: 2px solid #cfe2f6;
  border-radius: 18px;
  padding: 24px;
}

.google-cta-left {
  text-align: center;
}

.google-g {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

.google-g svg { width: 70px; height: 70px; }

.google-stars {
  color: #FFD600;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.google-rating strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #F20505;
  letter-spacing: .3px;
  line-height: 1.2;
  text-transform: uppercase;
}

.google-cta-center { text-align: center; }

.google-cta-center h3 {
  font-size: 22px;
  font-weight: 900;
  color: #0a1f5c;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.google-cta-center > p {
  font-size: 14px;
  color: #333;
  line-height: 1.55;
  margin-bottom: 18px;
}

.google-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.google-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--pp-primary);
  color: #fff;
  padding: 14px 22px 14px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(12, 135, 242,.3);
  transition: transform .15s, box-shadow .15s;
  text-align: left;
}

.google-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(12, 135, 242,.4); }

.google-btn-g {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.google-btn-g svg { width: 24px; height: 24px; }

.google-btn-sub { font-weight: 800; opacity: .95; }
.google-btn-arrow { font-size: 14px; margin-left: 8px; }

.google-handwritten {
  position: relative;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 22px;
  color: var(--pp-primary);
  line-height: 1.1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}

.google-handwritten i {
  font-size: 24px;
  transform: rotate(-25deg);
}

.google-cta-right img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ---------- REVIEWS RESPONSIVE ---------- */
@media (max-width: 992px) {
  .reviews-hero-container { grid-template-columns: 1fr; text-align: center; }
  .reviews-hero-content { margin: 0 auto; }
  .reviews-hero-content h1 { font-size: 56px; }
  .reviews-lead-blue { font-size: 28px; }
  .reviews-lead-red { justify-content: center; }

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

  .google-cta { grid-template-columns: 1fr; text-align: center; }
  .google-cta-right img { height: 240px; }
}

@media (max-width: 600px) {
  .reviews-hero-content h1 { font-size: 42px; }
  .reviews-lead-blue { font-size: 22px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .google-cta-actions { flex-direction: column; }
  .google-handwritten { justify-content: center; }
}

/* ========================================
   CITY SERVICE PAGE (reusable template)
   ======================================== */
.city-hero {
  position: relative;
  min-height: var(--pp-hero-h, 600px);
  padding: 100px 0 30px;  /* 70 navbar + 30 card breathing room top; 30 bottom */
  overflow: hidden;
  background: #8FD0F5;
}

.city-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.city-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.city-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.city-hero-content { max-width: 540px; }

.city-hero-content h1 {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  color: #0a1f5c;
  letter-spacing: -.5px;
  margin-bottom: 10px;
}

.city-name { color: #0a1f5c; }

.city-zip {
  display: inline-block;
  background: var(--pp-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 4px 14px;
  border-radius: 8px;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 3px 8px rgba(12, 135, 242,.3);
}

.city-tagline {
  font-family: 'Caveat', 'Poppins', cursive;
  font-size: 28px;
  font-weight: 700;
  color: var(--pp-primary);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.city-tagline-paw {
  color: #F20505;
  font-size: 20px;
}

.city-hero-body {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}

.city-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  max-width: 540px;
}

.city-hero-cta {
  display: inline-block;
  background: #F20505;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(242,5,5,.35);
  transition: transform .15s, box-shadow .15s;
  margin-bottom: 14px;
}

.city-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(242,5,5,.45); }

.city-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0a1f5c;
}

.city-phone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pp-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(12, 135, 242,.3);
}

.city-phone-body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.city-phone-body strong {
  font-size: 26px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: -.3px;
}

.city-phone-body em {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--pp-primary);
  margin-top: 2px;
}

.city-hero-mascot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.city-hero-mascot img {
  width: 380px;
  max-width: 95%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* ---------- CITY INFO ROWS ---------- */
.city-row {
  padding: 28px 0;
  background: #fff;
}

.city-row-top { padding-top: 50px; }

.city-row + .city-row { border-top: 1px solid #f0f0f0; }

.city-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.city-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
}

.city-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.city-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.city-icon-blue { background: var(--pp-blue-gradient); }
.city-icon-green { background: #2ECC40; }
.city-icon-red { background: #F20505; }

.city-card-header h2 {
  font-size: 17px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.2;
  padding-top: 4px;
}

.city-card p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
}

.city-checklist { margin-bottom: 14px; }

.city-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1a1a1a;
  padding: 6px 0;
}

.city-checklist li i {
  color: #2ECC40;
  font-size: 18px;
  flex-shrink: 0;
}

.city-pricelist {
  margin-bottom: 14px;
}

.city-pricelist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  padding: 7px 0;
  border-bottom: 1px dashed #e0e6ee;
}

.city-pricelist li:last-child { border-bottom: none; }

.city-pricelist li > i {
  color: #0C87F2;
  font-size: 14px;
  flex-shrink: 0;
}

.city-pricelist .dots {
  flex: 1;
  border-bottom: 1px dotted #cdd5df;
  margin: 0 4px 4px;
  height: 1px;
  align-self: flex-end;
}

.city-pricelist strong {
  font-weight: 900;
  color: #0a1f5c;
  font-size: 16px;
}

.city-script {
  font-family: 'Caveat', 'Poppins', cursive;
  font-weight: 700;
  font-size: 22px;
  color: var(--pp-primary);
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.city-script i { color: #F20505; font-size: 18px; }

.city-script-center {
  justify-content: center;
  width: 100%;
  text-align: center;
  font-size: 26px;
}

.city-script-green { color: #2ECC40; text-align: center; display: block; font-size: 20px; }

.city-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #eef8ee;
  border: 1px solid #cfe7cf;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.city-callout i { color: #2ECC40; font-size: 18px; flex-shrink: 0; margin-top: 2px; }

.city-callout p {
  font-size: 13px;
  color: #1f6f29;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.city-callout-blue {
  background: #eaf3fc;
  border-color: #cfe2f6;
}

.city-callout-blue i { color: #0C87F2; }
.city-callout-blue p { color: #0a1f5c; }

.city-quote-line {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
  line-height: 1.5;
}

.city-quote-line a {
  color: #0C87F2;
  font-weight: 900;
  font-size: 17px;
}

.city-quote-line span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #555;
}

/* Areas card map */
.city-areas-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
}

.city-areas-label {
  font-size: 14px;
  font-weight: 700;
  color: #0a1f5c;
  margin-bottom: 6px !important;
}

.city-map svg {
  width: 96px;
  height: 112px;
  display: block;
}

/* Reviews mini-card */
.city-review {
  background: #f4f9ff;
  border: 1px solid #dce9f7;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.city-review .stars {
  color: #FFD600;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.city-review p {
  font-size: 13px;
  color: #333;
  line-height: 1.45;
  margin-bottom: 4px;
}

.city-review-author {
  font-size: 12px !important;
  color: #555 !important;
  font-weight: 600;
  margin-bottom: 0 !important;
}

/* ---------- HOW IT WORKS (city) ---------- */
.city-hiw {
  padding: 40px 0 60px;
  background: #fff;
  position: relative;
}

.city-hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

.city-hiw-grid::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-image: radial-gradient(circle, #b6c8db 1.5px, transparent 1.5px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  z-index: 0;
}

.city-hiw-step {
  position: relative;
  text-align: center;
  z-index: 1;
}

.city-hiw-icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin: 0 auto 14px;
  box-shadow: 0 6px 16px rgba(12,135,242,.3);
}

.city-hiw-number {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFD600;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.city-hiw-step h4 {
  font-size: 14px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.2;
}

.city-hiw-step p {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  max-width: 220px;
  margin: 0 auto;
}

/* ---------- CITY FOOTER CTA ---------- */
.city-footer-cta {
  background: linear-gradient(135deg, #0C87F2, #0965B6);
  color: #fff;
  padding: 30px 0;
}

.city-footer-grid {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  gap: 24px;
  align-items: center;
}

.city-footer-mascot img {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.3));
}

.city-footer-body {
  text-align: center;
}

.city-footer-body h2 {
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1.1;
}

.city-name-yellow { color: #FFD600; }

.city-footer-sub {
  font-size: 16px;
  font-style: italic;
  color: #FFD600;
  font-weight: 700;
  margin-bottom: 14px;
}

.city-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.city-footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: #0C87F2;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .3px;
  transition: transform .15s;
}

.city-footer-phone:hover { transform: translateY(-2px); }
.city-footer-phone i { font-size: 20px; }

.city-footer-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--pp-primary);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  transition: transform .15s;
}

.city-footer-text:hover { transform: translateY(-2px); }
.city-footer-text i { font-size: 22px; }

/* Satisfaction badge */
.city-footer-badge {
  display: flex;
  justify-content: center;
}

.badge-ring {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #FFD600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #0a1f5c;
  border: 4px dashed #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  padding: 12px 8px;
}

.badge-ring i {
  font-size: 22px;
  color: #0a1f5c;
  margin: 4px 0;
}

.badge-top, .badge-bottom {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.1;
  text-transform: uppercase;
}

/* ---------- CITY RESPONSIVE ---------- */
@media (max-width: 992px) {
  .city-hero-container { text-align: center; }
  .city-hero-content { margin: 0 auto; }
  .city-tagline { justify-content: center; }
  .city-hero-content h1 { font-size: 36px; }
  .city-script, .city-script-center { justify-content: center; }
  .city-script:not(.city-script-center) { text-align: center; width: 100%; }

  .city-row { padding: 14px 0; }
  .city-row-top { padding-top: 28px; }
  .city-row-grid { grid-template-columns: 1fr; gap: 14px; }
  .city-row + .city-row { border-top: none; }

  .city-card { padding: 16px 16px; }
  .city-card-header { gap: 10px; margin-bottom: 10px; }
  .city-card-header h2 { font-size: 14px; padding-top: 2px; }
  .city-icon { width: 44px; height: 44px; font-size: 18px; }
  .city-card p, .city-checklist li, .city-pricelist li { font-size: 13px; }
  .city-checklist li { padding: 4px 0; }
  .city-pricelist li { padding: 6px 0; }

  .city-hiw-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .city-hiw-grid::before { display: none; }

  .city-footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .city-footer-mascot img { width: 130px; margin: 0 auto; }
  .city-footer-body h2 { font-size: 24px; }
}

@media (max-width: 600px) {
  .city-hero-content h1 { font-size: 28px; }
  .city-zip { font-size: 14px; padding: 3px 10px; }
  .city-tagline { font-size: 28px; }
  .city-hero-cta { font-size: 14px; padding: 12px 18px; }
  .city-phone-body strong { font-size: 22px; }
  .city-hiw-grid { grid-template-columns: 1fr; }
  .city-areas-grid { grid-template-columns: 1fr; }
  .city-map { display: flex; justify-content: center; }
}

/* ========================================
   QUOTE FORM — async submit feedback
   ======================================== */
.quote-form-message {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.quote-form-message:empty { display: none; }
.qf-success { background: #e8f6ec; color: #1f6f29; border: 1px solid #cfe7cf; }
.qf-error   { background: #fdecea; color: #b71717; border: 1px solid #f5c6c2; }
.qf-info    { background: #eaf3fc; color: #0a3a6f; border: 1px solid #cfe2f6; }

.pp-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0;
}

/* ========================================
   BEFORE / AFTER SLIDING REVEAL
   ======================================== */
.before-after-reveal {
  padding: 60px 0;
  background: #f9f9f9;
}

.before-after-reveal-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* Slider container */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  /* Branded fallback if images are slow/missing instead of a harsh black box */
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 50%),
    var(--pp-blue-gradient);
  touch-action: none;
}

/* Both images fill the slider */
.ba-slider-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* The clip wraps the BEFORE image and uses clip-path for the reveal —
   width stays at 100% so the underlying image is always full-bleed. */
.ba-slider-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
  will-change: clip-path;
}

.ba-slider-clip .ba-slider-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drag handle */
.ba-slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 100%;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  outline: none;
}

.ba-slider-handle:focus-visible .ba-slider-handle-knob {
  box-shadow: 0 0 0 4px rgba(12,135,242,.4), 0 4px 14px rgba(0,0,0,.25);
}

.ba-slider-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.ba-slider-handle-knob {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #0C87F2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  border: 3px solid #fff;
  transition: transform .15s;
}

.ba-slider.is-dragging { cursor: grabbing; }
.ba-slider.is-dragging .ba-slider-handle-knob { transform: scale(1.08); }

.ba-slider-label {
  position: absolute;
  top: 14px;
  z-index: 2;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  border-radius: 6px;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ba-slider-label-before { left: 14px; background: #F20505; }
.ba-slider-label-after  { right: 14px; background: #1f8a2e; }

/* Reuse the CTA card on the right */
.before-after-reveal .ba-cta-card {
  background: linear-gradient(135deg, #1aa0ff 0%, #0C87F2 50%, #0965B6 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  border-radius: 16px;
}
.before-after-reveal .ba-cta-card h3 { font-size: 26px; font-weight: 900; margin-bottom: 14px; }
.before-after-reveal .ba-cta-card p { font-size: 14px; line-height: 1.6; }

@media (max-width: 992px) {
  .before-after-reveal-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CONTACT PAGE
   ======================================== */
.contact-hero {
  position: relative;
  min-height: 380px;
  padding-top: 70px;
  overflow: hidden;
  background: #8FD0F5;
}

.contact-hero .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

.contact-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 30px;
  text-align: center;
}

.contact-hero-content { max-width: 720px; margin: 0 auto; }

.contact-hero-content h1 {
  font-size: 64px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 1px 2px 4px rgba(255,255,255,.4);
}

.contact-tagline {
  font-family: 'Caveat', 'Poppins', cursive;
  font-size: 32px;
  font-weight: 700;
  color: var(--pp-primary);
  margin-bottom: 12px;
  line-height: 1;
}

.contact-hero-body {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.55;
}

/* Contact method cards */
.contact-methods { padding: 50px 0 30px; background: #fff; }

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.contact-card {
  background: #fff;
  border: 2px solid #eef2f7;
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }

.contact-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.contact-icon-blue  { background: var(--pp-blue-gradient); }
.contact-icon-green { background: #2ECC40; }
.contact-icon-red   { background: #F20505; }

.contact-card h3 {
  font-size: 16px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  margin-bottom: 14px;
}

.contact-card-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .3px;
  word-break: break-word;
}
.contact-link-blue  { color: #0C87F2; }
.contact-link-green { color: #2ECC40; }
.contact-link-red   { color: #F20505; }

/* Form + sidebar */
.contact-form-section { padding: 30px 0 60px; background: #fff; }

.contact-form-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: start;
}

.contact-form-title { margin-bottom: 6px; }
.contact-form-sub {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.quote-form-wrap-wide { max-width: 100%; }

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 88px;
}

.contact-side-card {
  background: #f4f9ff;
  border: 2px solid #dce9f7;
  border-radius: 16px;
  padding: 22px;
}

.contact-side-card h3 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #0a1f5c;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.contact-side-card h3 i { color: #0C87F2; margin-right: 8px; }

.contact-hours { padding: 0; margin: 0; }
.contact-hours li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: #1a1a1a;
  padding: 6px 0;
  border-bottom: 1px dashed #cfdbe8;
}
.contact-hours li:last-child { border-bottom: none; }
.contact-hours .dots {
  flex: 1;
  border-bottom: 1px dotted #cdd5df;
  margin: 0 4px 4px;
  height: 1px;
  align-self: flex-end;
}
.contact-hours strong { color: #0C87F2; font-weight: 700; }

.contact-side-cta {
  background: linear-gradient(135deg, #0C87F2, #0965B6);
  border-color: transparent;
  color: #fff;
}
.contact-side-cta h3 { color: #fff; font-size: 18px; }
.contact-side-cta p { font-size: 14px; opacity: .9; margin-bottom: 14px; }

.contact-side-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #0C87F2;
  padding: 12px 16px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
  transition: transform .15s;
}
.contact-side-phone:hover { transform: translateY(-1px); }

.contact-side-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFD600;
  color: #1a1a1a;
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}
.contact-side-text i { font-size: 16px; }

@media (max-width: 992px) {
  .contact-hero-content h1 { font-size: 48px; }
  .contact-cards-grid { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-side { position: static; }
}

@media (max-width: 600px) {
  .contact-hero-content h1 { font-size: 36px; }
  .contact-tagline { font-size: 24px; }
}

/* ========================================
   STANDARD PAGE HERO
   Used on About, Policies, Reviews, Contact.
   Mirrors .pricing-hero proportions (sized to leave most of the bg visible).
   ======================================== */
.page-hero {
  position: relative;
  min-height: var(--pp-hero-h, 600px);
  padding: 100px 0 30px;  /* 70 navbar + 30 card breathing room top; 30 bottom */
  overflow: hidden;
  background: #8FD0F5;
}
.page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Mobile: hide the hero photo on all inner-page heroes so the section's
   solid sky-blue shows instead — matches the home hero's mobile treatment.
   Applies even when a per-page hero image is set. */
@media (max-width: 992px) {
  .page-hero .hero-bg,
  .about-hero .hero-bg,
  .policies-hero .hero-bg,
  .pricing-hero .hero-bg,
  .reviews-hero .hero-bg,
  .contact-hero .hero-bg,
  .city-hero .hero-bg,
  .cities-archive-hero .hero-bg { display: none; }
}

.page-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-hero-content {
  max-width: 540px;
}

.page-hero-content h1 {
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 18px;
}

.page-h1-dark,
.page-h1-light {
  display: block;
  font-size: 56px;
}

/* Light halo only on dark text — pops edges on busy bg.
   Light-blue line gets no shadow; relies on color + bg veil. */
.page-h1-dark  { color: #0a1f5c; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 10px rgba(255,255,255,.55); }
.page-h1-light { color: var(--pp-primary-dark); }

.page-hero-body {
  font-size: 17px;
  color: #1a1a1a;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 18px;
}

.page-hero-bullets li {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-hero-bullets li i {
  color: #0C87F2;
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .page-hero-container { text-align: center; }
  .page-hero-content { margin: 0 auto; }
  .page-hero-bullets li { justify-content: center; }
  .page-h1-dark, .page-h1-light { font-size: 44px; }
}

@media (max-width: 600px) {
  .page-h1-dark, .page-h1-light { font-size: 32px; }
  .page-hero-body { font-size: 15px; }
}

/* ========================================
   STICKY MOBILE CTA BAR
   ======================================== */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  padding: 8px;
  gap: 8px;
  background: var(--pp-blue-gradient);
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  /* iOS safe-area */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}

.mobile-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  text-transform: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: transform .12s;
}

.mobile-cta-btn i { font-size: 18px; }
.mobile-cta-btn:active { transform: translateY(1px); }

.mobile-cta-call  { background: #2ECC40; }
.mobile-cta-quote { background: #F20505; }

/* Show only on mobile / small tablet */
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; }
  /* Push page content above the fixed bar so nothing is hidden */
  body { padding-bottom: 78px; }
}

/* ========================================
   ACCESSIBILITY HELPERS
   ======================================== */

/* Visually hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-content — invisible until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1100;
  background: var(--pp-blue-gradient);
  color: #fff;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: top .2s;
}
.skip-link:focus {
  top: 12px;
  outline: none;
}

/* Make <main> not show its tabindex outline */
#main:focus { outline: none; }

/* Unified focus-visible style for interactive elements.
   Buttons/links/inputs across the site get a consistent ring.
   :where() keeps specificity at zero so component styles still win on color/bg. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]))
:focus-visible {
  outline: none;
  box-shadow: var(--pp-focus-ring);
  border-radius: 6px;
}

/* Stronger ring on dark backgrounds */
:where(.footer-cta, .city-footer-cta, .mobile-cta-bar) :where(a, button):focus-visible {
  box-shadow: 0 0 0 3px #FFD600;
}

/* Active nav indicator (works with both wp_nav_menu's `current-menu-item`
   and the .active fallback class). */
.current-menu-item > .nav-link,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: #0C87F2;
  background: #e8f1fc;
}

/* ========================================
   UNIFIED CARD BASE
   Pulls drift across .policy-card / .city-card / .review-card / .contact-card /
   .testimonial-card / .faq-card into a shared baseline (border, radius, shadow).
   ======================================== */
.policy-card,
.city-card,
.review-card,
.contact-card,
.testimonial-card,
.faq-card,
.weekly-card,
.service-card,
.addon-card,
.extras-card {
  background: var(--pp-card-bg);
  border: var(--pp-card-border);
  border-radius: var(--pp-card-radius);
  box-shadow: var(--pp-card-shadow);
}

/* ========================================
   FORM POLISH — inline errors, disabled state
   ======================================== */
.quote-form input.qf-invalid,
.quote-form select.qf-invalid {
  border-color: #F20505 !important;
  background: #fff7f7;
}

.qf-field-error {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #b71717;
  margin-top: 4px;
  line-height: 1.3;
  flex-basis: 100%;
}

.btn-cta:disabled,
.btn-cta[disabled] {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Smooth animation in for inline error */
.qf-field-error {
  animation: pp-error-in .2s ease-out;
}
@keyframes pp-error-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   STICKY MOBILE CTA BAR — polish
   ======================================== */
@media (max-width: 768px) {
  .mobile-cta-bar {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
    gap: 6px;
  }

  .mobile-cta-btn {
    padding: 12px 10px;
    font-size: 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    /* Min 44px tap target — matches Apple/Google guidance */
    min-height: 44px;
  }

  /* Hide bar when mobile nav drawer is open (avoids double UI) */
  body.nav-open .mobile-cta-bar { display: none; }

  /* Hide while focused inside a form input (so on-screen keyboard doesn't fight the bar) */
  body.input-focused .mobile-cta-bar {
    transform: translateY(110%);
    transition: transform .2s ease-out;
  }
}

/* ========================================
   IMAGE PLACEHOLDERS — branded empty-state
   Used where the user hasn't uploaded a photo yet.
   ======================================== */
.pp-image-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.4), transparent 50%),
    var(--pp-blue-gradient);
  border-radius: var(--pp-card-radius);
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.pp-image-placeholder::before,
.pp-image-placeholder::after {
  content: "\f1b0";  /* Font Awesome paw */
  font-family: 'Font Awesome 6 Free', sans-serif;
  font-weight: 900;
  position: absolute;
  color: rgba(255,255,255,.10);
  pointer-events: none;
}
.pp-image-placeholder::before { top: 12%;  left: 8%;  font-size: 64px; transform: rotate(-18deg); }
.pp-image-placeholder::after  { bottom: 10%; right: 8%; font-size: 96px; transform: rotate(22deg); }

.pp-image-placeholder .pp-ph-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 2px solid rgba(255,255,255,.4);
  position: relative;
  z-index: 1;
}

.pp-image-placeholder .pp-ph-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .9;
  position: relative;
  z-index: 1;
}

/* Variants for different contexts */
.pp-image-placeholder.is-tall    { min-height: 240px; }
.pp-image-placeholder.is-square  { aspect-ratio: 1 / 1; min-height: 0; }
.pp-image-placeholder.is-wide    { aspect-ratio: 4 / 3; min-height: 0; }

.pp-image-placeholder.is-warm {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.4), transparent 50%),
    linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}
.pp-image-placeholder.is-green {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.4), transparent 50%),
    linear-gradient(135deg, #2ECC40 0%, #1f9d2c 100%);
}

/* Initial-letter avatar for testimonial fallbacks */
.pp-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  border: 3px solid #FFD700;
  background: var(--pp-blue-gradient);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.pp-avatar.is-red    { background: linear-gradient(135deg, #ef4f4f, #c01818); }
.pp-avatar.is-green  { background: linear-gradient(135deg, #58d062, #1f9d2c); }
.pp-avatar.is-purple { background: linear-gradient(135deg, #9c7be0, #5e35b1); }
.pp-avatar.is-orange { background: linear-gradient(135deg, #ffb74d, #e65100); }

/* ========================================
   HOME — ABOUT / WHO WE ARE
   Sits between the Trust Bar and the Service Area. Two-column on desktop
   (text + photo), single-column when no photo is set.
   ======================================== */
.home-about {
  padding: var(--pp-section-pad-y, 60px) 0;
  background: #fff;
  border-top: 1px solid #eef2f7;
}
.home-about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.home-about-grid-text-only {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.home-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #0C87F2;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.home-about-eyebrow i { font-size: 12px; color: #0C87F2; }

.home-about-heading {
  font-size: 32px;
  font-weight: 900;
  color: #0a1f5c;
  margin-bottom: 18px;
  letter-spacing: -.3px;
  text-align: left;
}
.home-about-grid-text-only .home-about-heading { text-align: center; }

.home-about-copy {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}
.home-about-copy p { margin-bottom: 14px; }
.home-about-copy p:last-child { margin-bottom: 0; }

.home-about-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 22px;
  background: #F20505;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(242,5,5, .25);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.home-about-cta:hover {
  background: #c41a1a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242,5,5, .35);
}
.home-about-cta i { font-size: 12px; }

.home-about-photo img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(10, 31, 92, .15);
  display: block;
}

@media (max-width: 768px) {
  .home-about { padding: 40px 0; }
  .home-about-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-about-heading { font-size: 26px; text-align: center; }
  .home-about-eyebrow { justify-content: center; width: 100%; }
  .home-about-copy { text-align: center; font-size: 15px; }
  .home-about-cta {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }
  .home-about-photo { order: -1; }
}

/* ========================================
   HOME — SERVICE AREA SECTION
   Pulls from Site Settings → biz_areas. Cities with a matching CPT entry
   render as clickable chips that link to their city page.
   ======================================== */
.home-service-area {
  padding: var(--pp-section-pad-y, 60px) 0;
  background: #f4f9ff;
  border-top: 1px solid #e3edf8;
  border-bottom: 1px solid #e3edf8;
}

.home-service-area-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 36px;
  align-items: center;
}

.home-service-area-intro .section-title {
  text-align: left;
  margin-bottom: 14px;
}
.home-service-area-intro .section-title .paw-left { margin-right: 10px; }
.home-service-area-intro .section-title .paw-right { margin-left: 10px; }

.home-service-area-intro p {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}
.home-service-area-intro a {
  color: #0C87F2;
  font-weight: 700;
  text-decoration: underline;
}

.service-area-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-area-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #dce9f7;
  border-radius: 12px;
  color: #0a1f5c;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
  cursor: pointer;
}

.service-area-chip:hover,
.service-area-chip:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pp-primary);
  background: #eaf3fc;
  box-shadow: 0 6px 16px rgba(12, 135, 242,.18);
}

.service-area-chip > i:first-child { color: #0C87F2; font-size: 16px; }
.service-area-name { flex: 1; }
.service-area-arrow {
  font-size: 13px;
  color: var(--pp-primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}
.service-area-chip:hover .service-area-arrow,
.service-area-chip:focus-visible .service-area-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* "See all service areas →" link below the chip grid */
.service-area-all {
  margin-top: 18px;
  text-align: center;
  /* The link sits inside the .home-service-area-grid (2-column) on the
     homepage. Span both columns so its centered text is centered to the
     full container, not just the narrow left column. */
  grid-column: 1 / -1;
}
.service-area-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #F20505;
  padding: 6px 4px;
  transition: gap .15s, color .15s;
}
.service-area-all-link:hover,
.service-area-all-link:focus-visible {
  color: #0a1f5c;
  gap: 12px;
}
.service-area-all-link i { font-size: 12px; transition: transform .15s; }
.service-area-all-link:hover i { transform: translateX(3px); }

/* Static chip (no city CPT yet) — looks like a label, not interactive */
.service-area-chip.is-static {
  cursor: default;
  background: transparent;
  border-style: dashed;
  color: #555;
  font-weight: 600;
}
.service-area-chip.is-static:hover {
  transform: none;
  border-color: #dce9f7;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 768px) {
  .home-service-area-grid { grid-template-columns: 1fr; gap: 24px; }
  .home-service-area-intro .section-title { text-align: center; }
  .home-service-area-intro p { text-align: center; }
  .service-area-all { text-align: center; }
}

/* ========================================
   HERO LEGIBILITY — frosted text card
   A translucent panel sits behind the hero text on every hero except home
   (the home hero already has a white form card + white text with shadow).
   Cards share a min-height so they read as the same component across pages.
   ======================================== */
.page-hero-content,
.pricing-hero-content,
.city-hero-content {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 14px 36px rgba(10, 31, 92, .15);
  /* Hug the text — width and height both fit content, capped at 540. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 540px;
}

/* Drop the white halo we added for the previous (no-card) approach —
   the frosted panel provides enough contrast on its own. */
.page-h1-dark,
.pricing-h1-dark,
.city-hero-content h1 {
  text-shadow: none;
}

/* Make the headline scale a touch tighter so it sits in the card nicely. */
.page-hero-content h1,
.pricing-hero-content h1 {
  margin-bottom: 14px;
}

/* Push the body / bullets a hair tighter so the card height stays compact */
.page-hero-body,
.pricing-hero-body,
.city-hero-body {
  margin-bottom: 14px;
}

@media (max-width: 600px) {
  .page-hero-content,
  .pricing-hero-content,
  .city-hero-content,
  .hero-text-card {
    padding: 20px 22px;
    border-radius: 16px;
  }
}

/* ========================================
   SERVICE-AREA MAP (Leaflet)
   ======================================== */
/* ========================================
   CITIES ARCHIVE (/cities/)
   ======================================== */
.cities-archive-hero {
  position: relative;
  min-height: var(--pp-hero-h, 600px);
  padding: 100px 20px 30px;
  overflow: hidden;
  background: #8FD0F5;
}

/* Mobile: let inner heros grow with content so titles never get clipped. */
@media (max-width: 768px) {
  .about-hero, .pricing-hero, .city-hero, .page-hero, .cities-archive-hero {
    height: auto;
    min-height: 420px;
    padding-top: 90px;     /* slightly less top breathing room on phones */
    padding-bottom: 24px;
  }
}
.cities-archive-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cities-archive-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cities-archive-hero-container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.cities-archive-hero-content {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 14px 36px rgba(10, 31, 92, .15);
  text-align: center;
}
.cities-archive-hero-content h1 {
  font-size: 42px;
  font-weight: 900;
  color: #0a1f5c;
  margin-bottom: 14px;
  letter-spacing: -.5px;
}
.cities-archive-hero-body {
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.55;
  margin-bottom: 18px;
}
.cities-archive-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pp-blue-gradient);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
  transition: background .2s, transform .15s;
}
.cities-archive-phone:hover { background: #0a1f5c; transform: translateY(-2px); }

.cities-archive-section {
  padding: 50px 0 70px;
  background: #fff;
}
.cities-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.city-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #eef2f7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  color: inherit;
}
.city-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(10, 31, 92, .15);
  border-color: var(--pp-primary);
}
.city-tile-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #cfe2f6;
}
.city-tile-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--pp-primary);
  background: linear-gradient(135deg, #e8f1fc 0%, #cfe2f6 100%);
}
.city-tile-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.city-tile-body h2 {
  font-size: 20px;
  font-weight: 800;
  color: #0a1f5c;
  margin: 0;
  letter-spacing: -.2px;
}
.city-tile-zip {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-primary);
  margin-left: 4px;
}
.city-tile-cta {
  font-size: 13px;
  font-weight: 700;
  color: #F20505;
  text-transform: uppercase;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.city-tile:hover .city-tile-cta i { transform: translateX(3px); }
.city-tile-cta i { transition: transform .15s; }

.cities-archive-empty {
  text-align: center;
  font-size: 16px;
  color: #555;
  padding: 40px 20px;
}

@media (max-width: 600px) {
  .cities-archive-hero { padding: 90px 16px 40px; }
  .cities-archive-hero-content { padding: 24px 22px; }
  .cities-archive-hero-content h1 { font-size: 30px; }
  .cities-archive-section { padding: 30px 0 50px; }
}

.pp-map {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: var(--pp-card-radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  background: #e9eef4;
}

.pp-map.is-compact { height: 280px; }
.pp-map.is-tall    { height: 460px; }

/* Custom paw marker */
.pp-marker {
  background: transparent !important;
  border: 0 !important;
}
.pp-marker-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pp-blue-gradient);
  color: #fff;
  font-size: 16px;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.pp-marker-pin i {
  transform: rotate(45deg);
}
.pp-marker.is-current .pp-marker-pin {
  width: 44px;
  height: 44px;
  font-size: 20px;
  animation: pp-marker-pulse 1.6s ease-in-out infinite;
}
@keyframes pp-marker-pulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.25), 0 0 0 0 rgba(242,5,5,.45); }
  50%      { box-shadow: 0 4px 10px rgba(0,0,0,.25), 0 0 0 12px rgba(242,5,5,0); }
}

/* Popup tweaks */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.leaflet-popup-content {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  margin: 12px 14px;
}
.leaflet-popup-content strong {
  display: block;
  color: #0C87F2;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.pp-marker-link {
  color: var(--pp-primary);
  font-weight: 700;
  text-decoration: none;
}
.pp-marker-link:hover { text-decoration: underline; }

/* Wrapper section variants used by templates */
.pp-map-section {
  padding: var(--pp-section-pad-y-md) 0;
  background: #fff;
}
.pp-map-section h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  color: #0a1f5c;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pp-map-section .pp-map-sub {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}

/* ========================================
   QUOTE CALCULATOR — FAB + full-screen funnel
   ======================================== */
.pp-quote { position: fixed; z-index: 1200; }

/* Floating action button */
.pp-quote-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: #F20505;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  border: 0;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(242,5,5, .42);
  transition: transform .15s, box-shadow .15s;
}
.pp-quote-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(242,5,5, .5); }
.pp-quote-fab i { font-size: 18px; }
.pp-quote[data-open="true"] .pp-quote-fab { opacity: 0; pointer-events: none; }

/* ---------- Full-screen funnel ---------- */
.pp-funnel[hidden] { display: none; }
.pp-funnel {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: linear-gradient(180deg, #d8effe 0%, #a4d6f4 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: pp-funnel-in .2s ease-out;
}
@keyframes pp-funnel-in { from { opacity: 0; } to { opacity: 1; } }

.pp-funnel-close {
  position: fixed;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #0a1f5c;
  border: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(10, 31, 92, .25);
  z-index: 3;
  transition: transform .15s;
}
.pp-funnel-close:hover { transform: rotate(90deg); }

.pp-funnel-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 20px 80px;
  position: relative;
}

/* Funnel header */
.pp-funnel-head { position: relative; margin-bottom: 14px; min-height: 96px; padding-right: 180px; }
.pp-funnel-logo { height: 52px; width: auto; display: block; margin-bottom: 8px; }
.pp-funnel-head .pp-funnel-h1 {
  margin: 0; font-size: 34px; font-weight: 900; line-height: 1.04;
  color: #0a1f5c; letter-spacing: -.5px;
}
.pp-funnel-head .pp-funnel-h1 .lt { color: var(--pp-primary); }
.pp-funnel-tagline { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: #0a1f5c; line-height: 1.4; }
.pp-funnel-tagline .clean { color: #0C87F2; }
.pp-funnel-tagline .happy { color: #F20505; }
.pp-funnel-mascot {
  position: absolute; right: -6px; top: -6px;
  width: 188px; height: auto;
  filter: drop-shadow(0 8px 14px rgba(10, 31, 92, .25));
  pointer-events: none;
}

/* The white card */
.pp-funnel-card {
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 22px 54px rgba(10, 31, 92, .24);
  padding: 34px 30px 26px;
  position: relative;
}

.pp-step-pill {
  width: max-content;
  margin: 0 auto 20px;
  background: var(--pp-blue-gradient);
  color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .6px;
  padding: 9px 24px;
  border-radius: 30px;
}

/* Stepper */
.pp-stepper { display: flex; margin: 0 0 26px; }
.pp-stepper-node {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  text-align: center;
}
.pp-stepper-node::after {
  content: "";
  position: absolute; top: 20px; left: 50%;
  width: 100%; height: 4px;
  background: #d3dce5; z-index: 0;
}
.pp-stepper-node:last-child::after { display: none; }
.pp-stepper-node.is-done::after { background: var(--pp-blue-gradient); }
.pp-stepper-circle {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: #d3dce5;
  color: #fff; font-size: 16px; font-weight: 800;
  border-radius: 50%;
  position: relative; z-index: 1;
  transition: background .2s;
}
.pp-stepper-node.is-active .pp-stepper-circle,
.pp-stepper-node.is-done .pp-stepper-circle { background: var(--pp-blue-gradient); }
.pp-stepper-icon { font-size: 17px; color: #b3c0d0; margin-top: 7px; transition: color .2s; }
.pp-stepper-node.is-active .pp-stepper-icon,
.pp-stepper-node.is-done .pp-stepper-icon { color: var(--pp-primary); }
.pp-stepper-label {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #9aa7b8; margin-top: 3px; text-transform: uppercase;
}
.pp-stepper-node.is-active .pp-stepper-label { color: #0C87F2; }

/* Steps */
.pp-step { display: none; }
.pp-step.is-active { display: block; animation: pp-step-in .22s ease-out; }
@keyframes pp-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.pp-step-q { font-size: 24px; font-weight: 900; color: #0a1f5c; margin: 0 0 4px; text-align: center; }
.pp-step-sub { font-size: 14px; color: #6b7a90; margin: 0 0 20px; text-align: center; }

/* Choice grids */
.pp-grid { display: grid; gap: 14px; }
.pp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pp-stack { display: flex; flex-direction: column; gap: 12px; }

.pp-choice {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 20px 14px;
  background: #fff;
  border: 2px solid #e3ebf4;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pp-choice:hover { border-color: var(--pp-primary); }
.pp-choice.is-selected { border-color: #0C87F2; background: #eef6ff; box-shadow: 0 6px 16px rgba(12,135,242, .15); }
.pp-choice-icon { font-size: 30px; color: var(--pp-primary); }
.pp-choice-title { font-size: 16px; font-weight: 800; color: #0a1f5c; }
.pp-choice-sub { font-size: 12px; color: #6b7a90; }
.pp-choice-radio {
  width: 22px; height: 22px;
  border: 2px solid #c3d0e0; border-radius: 50%;
  position: relative; flex-shrink: 0;
}
.pp-choice.is-selected .pp-choice-radio { border-color: #0C87F2; }
.pp-choice.is-selected .pp-choice-radio::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--pp-blue-gradient); border-radius: 50%;
}

/* ---------- Visual dog-count tiles (Step 1) ----------
   Mirrors the pricing page's `.weekly-dogs` style — each tile shows a stack
   of dog icons matching the count, in a brand-palette accent color. */
.pp-choice-dogs { padding: 18px 10px 14px; gap: 6px; }

.pp-dogs-stack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 38px;
  margin-bottom: 4px;
  font-size: 26px;
  line-height: 1;
}
.pp-dogs-stack i {
  transition: transform .15s;
}
.pp-choice-dogs:hover .pp-dogs-stack i {
  transform: translateY(-2px);
}

.pp-dogs-plus {
  font-size: 22px;
  font-weight: 900;
  margin-left: 2px;
  align-self: center;
}

/* Brand-palette color hooks per dog count */
.pp-dogs-blue   .pp-dogs-stack i, .pp-dogs-blue   .pp-dogs-plus { color: #0C87F2; }
.pp-dogs-red    .pp-dogs-stack i, .pp-dogs-red    .pp-dogs-plus { color: #F20505; }
.pp-dogs-green  .pp-dogs-stack i, .pp-dogs-green  .pp-dogs-plus { color: #2ECC40; }
.pp-dogs-orange .pp-dogs-stack i, .pp-dogs-orange .pp-dogs-plus { color: #F0A800; }
.pp-dogs-purple .pp-dogs-stack i, .pp-dogs-purple .pp-dogs-plus { color: #8B4ED1; }

/* Match the selected-state accent to the tile's color */
.pp-dogs-blue.is-selected   { border-color: #0C87F2; background: #eef6ff; box-shadow: 0 6px 16px rgba(12,135,242, .18); }
.pp-dogs-red.is-selected    { border-color: #F20505; background: #fff1f1; box-shadow: 0 6px 16px rgba(242,5,5, .15); }
.pp-dogs-green.is-selected  { border-color: #2ECC40; background: #eefdf0; box-shadow: 0 6px 16px rgba(46, 204, 64, .15); }
.pp-dogs-orange.is-selected { border-color: #F0A800; background: #fff8e6; box-shadow: 0 6px 16px rgba(240, 168, 0, .18); }
.pp-dogs-purple.is-selected { border-color: #8B4ED1; background: #f7f0ff; box-shadow: 0 6px 16px rgba(139, 78, 209, .15); }

/* Radio inside the dog tile follows the tile color */
.pp-dogs-blue.is-selected   .pp-choice-radio { border-color: #0C87F2; }
.pp-dogs-blue.is-selected   .pp-choice-radio::after { background: var(--pp-blue-gradient); }
.pp-dogs-red.is-selected    .pp-choice-radio { border-color: #F20505; }
.pp-dogs-red.is-selected    .pp-choice-radio::after { background: #F20505; }
.pp-dogs-green.is-selected  .pp-choice-radio { border-color: #2ECC40; }
.pp-dogs-green.is-selected  .pp-choice-radio::after { background: #2ECC40; }
.pp-dogs-orange.is-selected .pp-choice-radio { border-color: #F0A800; }
.pp-dogs-orange.is-selected .pp-choice-radio::after { background: #F0A800; }
.pp-dogs-purple.is-selected .pp-choice-radio { border-color: #8B4ED1; }
.pp-dogs-purple.is-selected .pp-choice-radio::after { background: #8B4ED1; }

/* ---------- Yard surface tiles (Step 4) ----------
   Photo-card style: a wide cover image on top, label/sub below.
   The radio bullet sits in the top-right corner over the image. */
.pp-choice-surface {
  padding: 0;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
.pp-surface-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #cfe2f6;
}
.pp-choice-surface .pp-choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
}
.pp-choice-surface .pp-choice-title { font-size: 15px; }
.pp-choice-surface .pp-choice-sub { font-size: 12px; }
.pp-choice-surface .pp-choice-radio {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.pp-choice-surface:hover .pp-surface-img { transform: scale(1.02); }
.pp-surface-img { transition: transform .3s ease-out; }

/* ---------- Contact preference radio pills (Contact step) ---------- */
.pp-pref-group {
  border: 0;
  padding: 0;
  margin: 4px 0 14px;
}
.pp-pref-legend {
  font-size: 13px;
  font-weight: 700;
  color: #0a1f5c;
  margin-bottom: 8px;
  padding: 0;
}
.pp-pref-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pp-pref-option {
  position: relative;
  cursor: pointer;
}
.pp-pref-option input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.pp-pref-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 2px solid #e3ebf4;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  transition: border-color .15s, background .15s, color .15s;
}
.pp-pref-pill i { font-size: 12px; color: var(--pp-primary); }
.pp-pref-option:hover .pp-pref-pill { border-color: var(--pp-primary); }
.pp-pref-option input[type="radio"]:focus-visible + .pp-pref-pill {
  box-shadow: var(--pp-focus-ring);
}
.pp-pref-option input[type="radio"]:checked + .pp-pref-pill {
  background: #eef6ff;
  border-color: #0C87F2;
  color: #0C87F2;
}
.pp-pref-option input[type="radio"]:checked + .pp-pref-pill i { color: #0C87F2; }

/* Wide row choice (frequency) */
.pp-choice-row { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 16px 18px; }
.pp-choice-row .pp-choice-icon { font-size: 24px; }
.pp-choice-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pp-pop {
  display: inline-block;
  background: var(--pp-blue-gradient); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 20px;
  margin-left: 6px; vertical-align: middle;
}

/* Toggle rows (extras) */
.pp-toggle-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 2px solid #e3ebf4;
  border-radius: 14px;
  margin-bottom: 10px;
}
.pp-toggle-row.is-on { border-color: #0C87F2; background: #eef6ff; }
.pp-toggle-included { border-color: #b8e3c2; background: #eefaf0; }
.pp-toggle-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #e8f1fc; color: var(--pp-primary);
  border-radius: 50%; font-size: 18px;
}
.pp-toggle-included .pp-toggle-icon { background: #2ECC40; color: #fff; }
.pp-toggle-body { flex: 1; }
.pp-toggle-name { font-size: 15px; font-weight: 800; color: #0a1f5c; }
.pp-toggle-desc { font-size: 12px; color: #6b7a90; line-height: 1.4; }
.pp-toggle-price { font-size: 14px; font-weight: 800; color: #0C87F2; white-space: nowrap; text-align: right; }
.pp-toggle-price em { display: block; font-size: 10px; font-weight: 600; font-style: normal; color: #8b97a8; }
.pp-included-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: #2ECC40; white-space: nowrap;
}
.pp-toggle-row > input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-switch {
  width: 48px; height: 27px; flex-shrink: 0;
  background: #cfd8e3; border-radius: 20px;
  position: relative; cursor: pointer;
  transition: background .15s;
}
.pp-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; background: #fff; border-radius: 50%;
  transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pp-toggle-row > input:checked + .pp-switch { background: var(--pp-blue-gradient); }
.pp-toggle-row > input:checked + .pp-switch::after { left: 24px; }
.pp-toggle-row > input:focus-visible + .pp-switch { box-shadow: 0 0 0 3px rgba(12, 135, 242,.35); }

/* Contact form */
.pp-cform { display: flex; flex-direction: column; gap: 12px; }
.pp-input {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid #e3ebf4; border-radius: 14px;
  padding: 9px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.pp-input:focus-within { border-color: var(--pp-primary); box-shadow: 0 0 0 3px rgba(12, 135, 242,.13); }
.pp-input.is-invalid { border-color: #F20505; box-shadow: 0 0 0 3px rgba(242,5,5,.12); }
.pp-input-icon { color: var(--pp-primary); font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.pp-input-body { flex: 1; display: flex; flex-direction: column; }
.pp-input-body label { font-size: 11px; font-weight: 800; color: #0a1f5c; letter-spacing: .3px; text-transform: uppercase; }
.pp-input-body input,
.pp-input-body select {
  border: 0; outline: 0; background: none;
  font-family: 'Poppins', sans-serif; font-size: 15px; color: #1a1a1a;
  padding: 2px 0; width: 100%;
}
.pp-privacy {
  display: flex; align-items: center; gap: 12px;
  background: #eef6ff; border-radius: 12px;
  padding: 12px 16px; margin-top: 4px;
}
.pp-privacy i { color: #0C87F2; font-size: 18px; }
.pp-privacy-text strong { display: block; font-size: 13px; color: #0C87F2; }
.pp-privacy-text span { font-size: 12px; color: #6b7a90; }
.pp-privacy-secure { margin-left: auto; text-align: center; color: #0C87F2; font-size: 11px; font-weight: 800; }
.pp-privacy-secure i { display: block; font-size: 20px; margin-bottom: 2px; }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer nav */
.pp-funnel-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.pp-funnel-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid #e3ebf4; border-radius: 30px;
  padding: 12px 22px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 800; color: #6b7a90;
}
.pp-funnel-back:hover { border-color: #b3c0d0; color: #0a1f5c; }
.pp-funnel-next {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: #F20505; color: #fff;
  border: 0; border-radius: 30px;
  padding: 14px 30px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(242,5,5,.34);
  transition: background .15s, transform .1s;
}
.pp-funnel-next:hover { background: #c41a1a; }
.pp-funnel-next:active { transform: translateY(1px); }
.pp-funnel-next:disabled { opacity: .6; cursor: default; }

/* Respect the HTML hidden attribute. JS toggles `nextBt.hidden` / `backBt.hidden`
   per step, but the `display: inline-flex` rules above were overriding the
   browser's default `[hidden] { display: none }`, leaving a visible but
   non-functional button on steps with no choice yet. */
.pp-funnel-next[hidden],
.pp-funnel-back[hidden] { display: none !important; }

.pp-funnel-msg { font-size: 13px; font-weight: 600; line-height: 1.4; margin-top: 12px; text-align: center; }
.pp-funnel-msg.is-error { color: #b71717; }

/* Mascot peek + speech bubble (wide screens only — needs room beside the card) */
.pp-mascot-peek {
  position: fixed; left: 0; bottom: 0;
  z-index: 2; pointer-events: none;
  display: none; align-items: flex-end; gap: 6px;
}
@media (min-width: 1080px) { .pp-mascot-peek { display: flex; } }
.pp-mascot-peek img { width: 130px; height: auto; }
.pp-speech {
  background: #fff; border-radius: 16px 16px 16px 4px;
  padding: 10px 16px; margin-bottom: 36px;
  font-family: 'Caveat', cursive; font-size: 21px; font-weight: 700;
  color: #0a1f5c;
  box-shadow: 0 6px 16px rgba(10,31,92,.2);
}

/* ---------- Result page ---------- */
.pp-result-price {
  background: linear-gradient(135deg, #0a4ea8, #0C87F2);
  border-radius: 22px;
  padding: 26px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
  align-items: center;
  margin-bottom: 22px;
}
.pp-result-selections { background: rgba(255,255,255,.12); border-radius: 16px; padding: 18px; }
.pp-result-selections h4 {
  margin: 0 0 12px; font-size: 13px; font-weight: 800;
  letter-spacing: .5px; color: #FFD600;
}
.pp-result-selections ul { list-style: none; margin: 0; padding: 0; }
.pp-result-selections li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; padding: 5px 0;
}
.pp-result-selections li i { color: #8fd0f5; width: 16px; text-align: center; }
.pp-result-amount { text-align: center; }
.pp-result-amount .pp-ra-label {
  display: inline-block; background: #F20505;
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
  padding: 5px 16px; border-radius: 20px; margin-bottom: 8px;
}
.pp-result-amount .pp-ra-big { font-size: 62px; font-weight: 900; line-height: 1; }
.pp-result-amount .pp-ra-per { font-size: 20px; font-weight: 800; }
.pp-result-amount .pp-ra-sub {
  margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #d6e6fb;
}
.pp-result-amount .pp-ra-sub strong { color: #FFD600; }

.pp-trust-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-bottom: 22px;
}
.pp-trust-item { text-align: center; }
.pp-trust-item i { font-size: 22px; color: #0C87F2; }
.pp-trust-item.is-red i { color: #F20505; }
.pp-trust-item strong { display: block; font-size: 11px; color: #0a1f5c; margin-top: 5px; line-height: 1.3; }

.pp-reviews-h { text-align: center; font-size: 17px; font-weight: 900; color: #0a1f5c; margin: 0 0 14px; }
.pp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.pp-review { background: #f5f8fc; border-radius: 14px; padding: 14px; }
.pp-review-stars { color: #FFB800; font-size: 12px; margin-bottom: 6px; }
.pp-review p { font-size: 12px; color: #444; line-height: 1.5; margin: 0 0 8px; font-style: italic; }
.pp-review-by { font-size: 12px; font-weight: 800; color: #0a1f5c; }
.pp-review-by span { display: block; font-weight: 500; color: #6b7a90; }

/* Social proof badge row — sits right under the price line. Three
   icon+number+label cells, equal width on desktop, stacks on mobile. */
.pp-social-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
  padding: 14px 12px;
  background: linear-gradient(135deg, #f0f7ff, #e8f0fc);
  border: 1px solid #d5e3f5;
  border-radius: 14px;
}
.pp-sp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.pp-sp-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.pp-sp-item strong { font-size: 18px; font-weight: 900; color: #0a1f5c; line-height: 1; }
.pp-sp-item span { font-size: 11px; font-weight: 600; color: #4a5363; line-height: 1.25; }

/* "What Happens Next?" checklist */
.pp-next-steps {
  background: #f7faff;
  border: 1px solid #d9e6f7;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
}
.pp-next-steps h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0a1f5c;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 0 10px;
}
.pp-next-steps ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-next-steps li { font-size: 13px; color: #1a1a1a; display: flex; align-items: center; gap: 8px; }
.pp-next-steps li i { color: #2ECC40; font-size: 14px; }

/* Route urgency strip — short callout under the reviews */
.pp-route-urgency {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0a1f5c;
  background: #fff4cc;
  border: 1px dashed #FFD700;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pp-route-urgency i { color: #b88800; }

/* Satisfaction guarantee badge sitting just above the CTA buttons */
.pp-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 11px 14px;
  background: #e8f9ec;
  border: 1px solid #b6e4be;
  border-radius: 12px;
  font-size: 13px;
  color: #1a1a1a;
  text-align: center;
}
.pp-guarantee i { color: #2ECC40; font-size: 16px; flex-shrink: 0; }
.pp-guarantee strong { color: #1c8a2e; }

/* CTA row — red "Schedule" stays dominant; blue phone box is secondary */
.pp-result-cta { display: flex; gap: 12px; align-items: stretch; }
.pp-btn-start {
  flex: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 22px; border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px;
  text-align: center;
  background: #F20505; color: #fff;
  box-shadow: 0 6px 16px rgba(242,5,5,.34);
  text-transform: uppercase;
  letter-spacing: .3px;
  border: 0; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.pp-btn-start:hover { background: #c41a1a; }
/* Confirmed state after click — emails already sent on submit, so this just
   reassures the customer their request is in. */
.pp-btn-start.is-done {
  background: #2ECC40;
  box-shadow: 0 6px 16px rgba(46,204,64,.34);
  cursor: default;
}
.pp-btn-start.is-done:hover { background: #2ECC40; }
.pp-btn-call {
  flex: 1;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: 14px;
  background: #fff; color: #0C87F2; border: 2px solid #0C87F2;
  font-family: 'Poppins', sans-serif; text-align: center;
  text-decoration: none;
}
.pp-btn-call:hover { background: #eef6ff; }
.pp-btn-call-label { display: block; font-size: 11px; font-weight: 600; color: #5b6675; line-height: 1.2; margin-bottom: 2px; }
.pp-btn-call-num   { display: block; font-size: 14px; font-weight: 800; color: #0C87F2; }
.pp-btn-call-num i { font-size: 12px; margin-right: 4px; }

@media (max-width: 540px) {
  .pp-social-proof { grid-template-columns: 1fr; padding: 12px; }
  .pp-sp-item { flex-direction: row; gap: 10px; text-align: left; }
  .pp-sp-icon { margin-bottom: 0; }
  .pp-result-cta { flex-direction: column; }
  .pp-btn-start, .pp-btn-call { flex: none; width: 100%; }
}

/* Aggressive-dog disclaimer sits between the quote box and the trust row.
   Soft amber so it's noticeable but not alarming. */
.pp-aggressive-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff8e6;
  border: 1px solid #f5d785;
  border-left: 4px solid #f0a800;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 13px;
  color: #5a4500;
  line-height: 1.45;
}
.pp-aggressive-note i {
  color: #f0a800;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.pp-aggressive-note strong {
  display: block;
  color: #5a4500;
  font-weight: 800;
  margin-bottom: 2px;
}

/* Quiet "Back to Home" link below the loud CTAs */
.pp-btn-home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 14px auto 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: transparent;
  border: none;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.pp-btn-home:hover,
.pp-btn-home:focus-visible {
  color: #0C87F2;
  background: #eef6ff;
}
.pp-btn-home i { font-size: 11px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  /* The mobile CTA bar's "Free Quote" button is the entry point on mobile. */
  .pp-quote-fab { display: none; }
  .pp-funnel-inner { padding: 20px 14px 60px; }
  .pp-funnel-head { padding-right: 0; min-height: 0; text-align: center; }
  .pp-funnel-logo { margin: 0 auto 8px; }
  .pp-funnel-head .pp-funnel-h1 { font-size: 26px; }
  .pp-funnel-mascot { display: none; }
  .pp-funnel-card { padding: 24px 18px 22px; }
  .pp-step-q { font-size: 20px; }
  .pp-stepper-label { display: none; }
  .pp-stepper-circle { width: 34px; height: 34px; font-size: 14px; }
  .pp-stepper-node::after { top: 16px; }
  .pp-stepper-icon { font-size: 14px; }
  .pp-mascot-peek { display: none; }
  .pp-result-price { grid-template-columns: 1fr; }
  .pp-trust-row { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .pp-reviews { grid-template-columns: 1fr; }
  .pp-result-cta { flex-direction: column; }
  .pp-result-amount .pp-ra-big { font-size: 54px; }
}
@media (max-width: 420px) {
  .pp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   SITE FOOTER (slim nav/contact strip below every page's CTA)
   ======================================== */
.site-footer {
  background: linear-gradient(160deg, #0c2870 0%, #0a1f5c 55%, #061540 100%);
  color: #cdd6ee;
  padding: 48px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer .container { max-width: 1200px; }

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 36px;
}

.site-footer-brand .site-footer-logo {
  display: inline-block;
  margin-bottom: 14px;
}
.site-footer-brand .site-footer-logo img {
  height: 60px;
  width: auto;
}
.site-footer-tagline {
  color: #aab5d6;
  max-width: 320px;
}

.site-footer-col h2 {
  color: #FFD600;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 14px;
}

.site-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.site-footer-col a {
  color: #cdd6ee;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;            /* enlarge tap target without changing visual rhythm much */
  min-height: 32px;
}
.site-footer-col a:hover,
.site-footer-col a:focus-visible { color: #fff; }
.site-footer-col a i { color: #FFD600; font-size: 13px; width: 16px; text-align: center; }

.site-footer-area {
  color: #aab5d6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.site-footer-area i { color: #FFD600; font-size: 13px; width: 16px; text-align: center; }

.site-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px 0 20px;
  text-align: center;
  font-size: 12px;
  color: #aab5d6;
}

.site-footer-bottom p { margin: 2px 0; }

.site-footer-credit {
  font-size: 11px;
  color: rgba(205, 214, 238, .65);
}
.site-footer-credit a {
  color: rgba(205, 214, 238, .85);
  text-decoration: none;
  transition: color .15s;
  border-bottom: 1px dotted rgba(205, 214, 238, .35);
}
.site-footer-credit a:hover,
.site-footer-credit a:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 900px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .site-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .site-footer { padding-top: 36px; }
  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer-brand .site-footer-logo img { height: 48px; }
}

/* ========================================
   MASCOT PLACEMENTS — Tim's new pose art
   ======================================== */

/* Result step "Thanks!" — thumbs-up mascot above the price block */
.pp-result-mascot {
  text-align: center;
  margin: -8px auto 6px;
  max-width: 120px;
}
.pp-result-mascot img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(10, 31, 92, .18));
}

/* About-page hero — waving mascot floats to the right of the headline card */
.about-hero-section .page-hero-container {
  display: flex;
  align-items: center;
  gap: 32px;
}
.about-hero-section .page-hero-content { flex: 1; }
.about-hero-mascot {
  flex-shrink: 0;
  width: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.about-hero-mascot img {
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(10, 31, 92, .25));
}
@media (max-width: 768px) {
  /* Stack mascot above text on mobile, smaller */
  .about-hero-section .page-hero-container { flex-direction: column; gap: 18px; align-items: center; }
}

/* ========================================
   COUPON CODE — "Have a coupon?" disclosure on the funnel contact step
   ======================================== */
.pp-coupon-disclosure {
  margin: 4px 0 16px;
  border: 1px dashed #d6dde7;
  border-radius: 10px;
  background: #fafcff;
  transition: border-color .15s, background .15s;
}
.pp-coupon-disclosure[open] {
  border-color: #f0a800;
  background: #fff8e6;
}
.pp-coupon-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7a90;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pp-coupon-toggle::-webkit-details-marker { display: none; }
.pp-coupon-toggle::marker { display: none; }
.pp-coupon-toggle i { font-size: 12px; color: #f0a800; }
.pp-coupon-disclosure[open] .pp-coupon-toggle { color: #5a4500; }
.pp-coupon-input-wrap { padding: 0 14px 14px; }
#ppcCoupon {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #f0a800;
  border-radius: 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #fff;
  color: #5a4500;
}
#ppcCoupon:focus { outline: 2px solid #f0a800; outline-offset: 2px; }

/* Coupon discount line on the quote result breakdown — green negative amount */
.pp-quote-line.is-discount,
.pp-quote-line[data-kind="discount"] {
  color: #2ECC40;
  font-weight: 700;
}
.pp-quote-line.is-discount .pp-quote-amount,
.pp-quote-line[data-kind="discount"] .pp-quote-amount {
  color: #2ECC40;
}

/* ========================================
   SCHEDULED POPUP (template-parts/popup.php + js/popup.js)
   Two styles: `pp-popup-modal` (center+backdrop) and `pp-popup-top_bar`
   (sticky banner). Hidden by default; .is-open is added by the JS once
   the configured delay has elapsed and the frequency cookie allows.
   ======================================== */
.pp-popup { font-family: 'Poppins', sans-serif; }

/* Lock background scroll when a MODAL popup is open. Top-bar popups
   never trigger this — :has() un-locks it when only a top-bar is on. */
body.pp-popup-open { overflow: hidden; }
body.pp-popup-open:has(.pp-popup-top_bar.is-open) { overflow: auto; }

/* ----- Modal style ----- */
.pp-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.pp-popup-modal.is-open { opacity: 1; pointer-events: auto; }

.pp-popup-modal .pp-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 92, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.pp-popup-modal .pp-popup-card {
  position: relative;
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 31, 92, .35);
  transform: translateY(12px) scale(.97);
  transition: transform .22s ease;
}
.pp-popup-modal.is-open .pp-popup-card { transform: translateY(0) scale(1); }

.pp-popup-card-image_only { padding: 0; overflow: hidden; }
.pp-popup-card-text       { padding: 36px 32px 30px; }

/* ----- Top-bar style ----- */
.pp-popup-top_bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9500;
  background: #fff;
  border-bottom: 1px solid rgba(10, 31, 92, .12);
  box-shadow: 0 4px 14px rgba(10, 31, 92, .08);
  transform: translateY(-100%);
  transition: transform .25s ease;
}
.pp-popup-top_bar.is-open { transform: translateY(0); }

.pp-popup-top_bar .pp-popup-card {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 56px 10px 18px;
  position: relative;
}
.pp-popup-top_bar .pp-popup-image-link { display: contents; }
.pp-popup-top_bar .pp-popup-image { max-height: 56px; width: auto; border-radius: 6px; }
.pp-popup-top_bar .pp-popup-text-body { flex: 1; }
.pp-popup-top_bar .pp-popup-footer    { display: flex; gap: 14px; align-items: center; }

.pp-popup-top_bar .pp-popup-heading {
  font-size: 15px;
  font-weight: 800;
  color: #0a1f5c;
  margin: 0;
  display: inline;
}
.pp-popup-top_bar .pp-popup-body { display: inline; font-size: 14px; color: #444; margin: 0; }
.pp-popup-top_bar .pp-popup-body p { display: inline; margin: 0; }

/* Push page content down so the top bar doesn't cover the navbar */
body:has(.pp-popup-top_bar.is-open) .navbar { top: var(--pp-popup-bar-height, 64px); }

/* ----- Close button (both styles) ----- */
.pp-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(10, 31, 92, .82);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s, transform .15s;
}
.pp-popup-close:hover, .pp-popup-close:focus-visible {
  background: #0a1f5c;
  transform: rotate(90deg);
}

/* ----- Image-only layout content ----- */
.pp-popup-image-link {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.pp-popup-image {
  display: block;
  width: 100%;
  height: auto;
}

.pp-popup-card-image_only .pp-popup-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 14px 18px 18px;
  background: #fff;
}

/* ----- Text layout content ----- */
.pp-popup-heading {
  font-size: 24px;
  font-weight: 900;
  color: #0a1f5c;
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: -.2px;
}
.pp-popup-body {
  font-size: 15px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 16px;
}
.pp-popup-body p { margin-bottom: 10px; }
.pp-popup-body p:last-child { margin-bottom: 0; }

/* ----- Coupon code chip ----- */
.pp-popup-coupon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 14px;
  background: #fff8e6;
  border: 2px dashed #f0a800;
  border-radius: 10px;
  font-weight: 700;
}
.pp-popup-coupon-label {
  font-size: 11px;
  color: #8c6800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pp-popup-coupon-code {
  font-size: 16px;
  font-weight: 900;
  color: #5a4500;
  letter-spacing: .5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.pp-popup-coupon-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: #f0a800;
  color: #fff;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.pp-popup-coupon-copy:hover, .pp-popup-coupon-copy:focus-visible { background: #c98e00; }

/* ----- CTA button ----- */
.pp-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #F20505;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(242,5,5, .28);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.pp-popup-cta:hover {
  background: #c41a1a;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(242,5,5, .35);
}
.pp-popup-cta i { font-size: 12px; }

/* ----- Responsive ----- */
@media (max-width: 520px) {
  .pp-popup-modal .pp-popup-card { width: calc(100% - 24px); border-radius: 14px; }
  .pp-popup-heading { font-size: 20px; }
  .pp-popup-top_bar .pp-popup-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 50px 12px 14px;
    gap: 10px;
  }
  .pp-popup-top_bar .pp-popup-image { max-height: 44px; }
}

/* ========================================
   HOME PAGE — CURRENT DEALS SECTION
   Compact cards: red amount stub on left, white body on right with title +
   code + CTA. Renders only when ACF toggle is on and active coupons exist.
   ======================================== */
.home-coupons {
  padding: 50px 0 40px;
  background: #f9f9f9;
}
.home-coupons-intro {
  text-align: center;
  color: #555;
  font-size: 15px;
  max-width: 620px;
  margin: 6px auto 24px;
  line-height: 1.5;
}
.home-coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}
.home-coupon-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e7edf5;
  box-shadow: 0 4px 14px rgba(12,135,242,.08);
}
.home-coupon-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  background: linear-gradient(135deg, #F20505, #b30303);
  color: #fff;
  text-align: center;
}
.home-coupon-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: .92;
}
.home-coupon-headline {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.4px;
}
.home-coupon-body {
  padding: 14px 16px 16px;
}
.home-coupon-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--pp-primary);
  margin: 0 0 4px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.home-coupon-desc {
  font-size: 13px;
  color: #4a5363;
  line-height: 1.4;
  margin: 0 0 8px;
}
.home-coupon-expires {
  font-size: 11.5px;
  color: #6b7382;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.home-coupon-expires i { color: var(--pp-primary); font-size: 10px; }
.home-coupon-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 7px 10px;
  background: #fffbe6;
  border: 1.5px dashed #FFD700;
  border-radius: 8px;
}
.home-coupon-code-label {
  font-size: 9px;
  font-weight: 700;
  color: #7a6a00;
  letter-spacing: .5px;
}
.home-coupon-code {
  flex: 1;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--pp-primary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.home-coupon-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, #2ECC40, #27ae36);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(46,204,64,.32);
}
.home-coupon-cta:hover { box-shadow: 0 6px 16px rgba(46,204,64,.42); }
.home-coupon-cta:active { transform: translateY(1px); }

.home-coupons-all {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}
.home-coupons-all a {
  color: var(--pp-primary);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-coupons-all a:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .home-coupon-card { grid-template-columns: 90px 1fr; }
  .home-coupon-headline { font-size: 22px; }
}

/* ========================================
   COUPONS / DEALS PAGE
   Each card has a "stub" (gradient banner with the headline amount) and a
   body with description, code, claim button, and collapsible terms.
   Layout: 2-col on desktop, 1-col on mobile.
   ======================================== */
.coupons-grid-section {
  padding: 50px 0 60px;
  background: #f7f9fc;
}

.coupons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.coupon-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(12,135,242,.10), 0 2px 6px rgba(0,0,0,.04);
  border: 1px solid #e7edf5;
  position: relative;
}
.coupon-card::before {
  /* Notched tear-line between stub and body, matching a paper coupon. */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 180px;
  width: 2px;
  background: radial-gradient(circle at 1px 6px, #f7f9fc 3px, transparent 3.5px) 0 0 / 2px 12px repeat-y;
  z-index: 2;
}

.coupon-card-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 14px;
  background: linear-gradient(135deg, #F20505, #b30303);
  color: #fff;
  text-align: center;
}
.coupon-card-type {
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .92;
}
.coupon-card-amount {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.5px;
}
.coupon-card-amount-sub {
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .92;
  margin-top: 4px;
}

.coupon-card-body {
  padding: 20px 22px 22px;
}
.coupon-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #0C87F2;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.coupon-card-desc {
  font-size: 14px;
  color: #4a5363;
  line-height: 1.45;
  margin: 0 0 10px;
}
.coupon-card-expires,
.coupon-card-eligible {
  font-size: 12px;
  color: #6b7382;
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.coupon-card-expires i,
.coupon-card-eligible i { color: #0C87F2; font-size: 11px; }

.coupon-card-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 10px 14px;
  background: #fffbe6;
  border: 1.5px dashed #FFD700;
  border-radius: 10px;
}
.coupon-card-code-label {
  font-size: 10px;
  font-weight: 700;
  color: #7a6a00;
  letter-spacing: .6px;
}
.coupon-card-code {
  flex: 1;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #0C87F2;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.coupon-card-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d9dde5;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #0C87F2;
  cursor: pointer;
}
.coupon-card-copy:hover { background: #f0f7ff; border-color: #0C87F2; }

.coupon-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #2ECC40, #27ae36);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(46,204,64,.35);
  transition: transform .12s, box-shadow .12s;
}
.coupon-card-cta:hover  { box-shadow: 0 8px 20px rgba(46,204,64,.45); }
.coupon-card-cta:active { transform: translateY(1px); }

.coupon-card-terms {
  margin-top: 12px;
  border-top: 1px solid #eef2f7;
  padding-top: 10px;
}
.coupon-card-terms summary {
  font-size: 12px;
  color: #6b7382;
  cursor: pointer;
  list-style: none;
}
.coupon-card-terms summary::-webkit-details-marker,
.coupon-card-terms summary::marker { display: none; }
.coupon-card-terms summary::before {
  content: "▸ ";
  display: inline-block;
  color: #0C87F2;
  transition: transform .15s;
}
.coupon-card-terms[open] summary::before { content: "▾ "; }
.coupon-card-terms-body {
  margin-top: 8px;
  font-size: 12.5px;
  color: #4a5363;
  line-height: 1.5;
}
.coupon-card-terms-body p,
.coupon-card-terms-body ul { margin: 6px 0; }
.coupon-card-terms-body ul { padding-left: 18px; }

.coupons-disclaimer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: #6b7382;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.coupons-empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e7edf5;
  box-shadow: 0 4px 16px rgba(12,135,242,.06);
}
.coupons-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f0f7ff;
  color: #0C87F2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
}
.coupons-empty h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0C87F2;
  margin: 0 0 8px;
}
.coupons-empty p { color: #4a5363; margin: 0 0 18px; }
.coupons-empty-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--pp-blue-gradient);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}
.coupons-empty-phone:hover { background: #0965B6; }

@media (max-width: 992px) {
  .coupons-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .coupon-card { grid-template-columns: 1fr; }
  .coupon-card::before { display: none; }
  .coupon-card-stub { padding: 18px 14px; flex-direction: row; justify-content: center; gap: 12px; }
  .coupon-card-amount { font-size: 28px; }
  .coupon-card-amount-sub { margin-top: 0; }
  .coupon-card-body { padding: 18px 18px 20px; }
  .coupon-card-code { font-size: 16px; letter-spacing: 1.2px; }
  .coupon-card-copy-label { display: none; }
}

/* ============================================================
   Reviews — testimonial video band (click-to-play)
   ============================================================ */
.reviews-video-section { padding: 50px 0 6px; }
.reviews-video-intro {
  max-width: 640px;
  margin: -4px auto 26px;
  text-align: center;
  color: #55617a;
  font-size: 16px;
  line-height: 1.6;
}
.pp-video {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0a1f5c;
  box-shadow: 0 24px 60px rgba(10, 31, 92, .25);
}
.pp-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.pp-video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a1f5c;
  background-size: cover;
  background-position: center;
}
.pp-video-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 31, 92, .12), rgba(10, 31, 92, .45));
}
.pp-video-play {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-blue-gradient, linear-gradient(135deg, #0C87F2, #0965B6));
  color: #fff;
  font-size: 30px;
  padding-left: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .15s ease, filter .15s ease;
}
.pp-video-facade:hover .pp-video-play { transform: scale(1.07); filter: brightness(1.08); }
.pp-video-facade:focus-visible { outline: 3px solid var(--pp-accent, #FFD700); outline-offset: 3px; }
@media (max-width: 600px) {
  .reviews-video-section { padding: 36px 0 4px; }
  .pp-video { border-radius: 14px; }
  .pp-video-play { width: 66px; height: 66px; font-size: 24px; }
}
/* Accessible visually-hidden text (theme dequeues WP's default sr class). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}