/* =========================================================================
   DESIGN FEEDBACK PASS — July 2026 (Halstead "FINAL" feedback doc)
   -------------------------------------------------------------------------
   Loaded AFTER styles.css (build-injected by scripts/apply-content.js) so
   these rules win on equal specificity. Grouped by feedback item so any
   single change is easy to find, tweak, or revert. Site-wide by design.
   Primary mobile breakpoint site-wide is max-width: 820px.
   ========================================================================= */

/* ── DESKTOP + GLOBAL ───────────────────────────────────────────────────── */

/* [Feedback 1] Service cards: guarantee breathing room between the paragraph
   copy and the CTA button. Buttons are bottom-anchored (margin-top:auto), so
   this sets a reliable MINIMUM gap on every card, every page. */
.values-grid .value p { margin-bottom: 30px; }

/* [Feedback 2] Process / "Our Approach" section: trim the excessive bottom
   padding beneath the "View Our Process" button. Targets any section that
   contains the process steps, regardless of its wrapper class. */
.section:has(.process__steps) { padding-bottom: clamp(36px, 4vw, 56px); }

/* [Feedback 3] Image quote banner: larger paragraph copy. Applied everywhere
   the .banner__copy treatment is used, so the size stays consistent site-wide. */
.banner__copy { font-size: 22px; line-height: 1.7; }

/* [Feedback 4] Centered intro ("...for Larger Properties"): more space between
   the serif heading and the paragraph; keep the serif (Cormorant) heading. */
.lede-block h2 { font-family: var(--font-serif); margin-bottom: 30px; }

/* [Feedback 6] Odd-card grids: filler cells (injected by the build) carry the
   exact dark-green card background, so a short final row reads as seamless
   green rather than an empty placeholder. */
.values-grid .value--filler { background: var(--green-800); }

/* [Feedback 8] Service-area pages: left-align the "View All Service Areas"
   button. Overrides the inline text-align:center on its wrapper div. */
section[data-screen-label="08 Other Areas"] div[style*="margin-top: 32px"] {
  text-align: left !important;
}

/* [Feedback 9] About-dropdown pages: keep the review/testimonial quotes in the
   serif (Cormorant) face that matches the homepage testimonial treatment,
   applied consistently across every about-dropdown page. */
.banner blockquote p,
.review-banner blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
}

/* ── MOBILE (≤ 820px, the site's primary breakpoint) ────────────────────── */
@media (max-width: 820px) {

  /* [Mobile — heros too small] Larger hero headings on phones. */
  .hero__title,
  .page-hero h1 {
    font-size: clamp(36px, 9vw, 48px);
    line-height: 1.12;
  }

  /* [Mobile — text overflow] No horizontal overflow anywhere; comfortable
     left/right padding so body copy wraps cleanly within the screen. */
  html, body { overflow-x: hidden; }
  .wrap { padding-left: 22px; padding-right: 22px; }
  .value, .process__step, .lede-block, .banner__inner,
  .testimonial__copy, .split__copy, .intro-standalone {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* [Mobile — process section] Center-align everything in the process section. */
  .process__steps,
  .process__step,
  .process__step .num,
  .process__step .label,
  .process__step p {
    text-align: center;
  }
  .process__step p { margin-left: auto; margin-right: auto; }

  /* [Mobile — big gaps] Tighter, consistent vertical rhythm between sections. */
  .section { padding-top: clamp(40px, 7vw, 56px); padding-bottom: clamp(40px, 7vw, 56px); }
  .banner { padding-top: 56px; padding-bottom: 56px; }

  /* [Mobile — paragraph/button spacing] Reinforce the service-card gap on mobile
     where cards collapse to a single column. */
  .values-grid .value p { margin-bottom: 26px; }

  /* [Feedback 6] Filler cards add nothing on single-column mobile. */
  .values-grid .value--filler { display: none; }
}