/* H&L site fixes v1 (Sept 2026). Loaded after the main stylesheet on every page.
   Kept as a separate file so the hashed, immutable-cached main CSS never has to change. */

/* 1. Headings no longer sit directly on the text below them.
   The Tailwind reset zeroes every margin; element selectors keep this lower in specificity
   than the per-section rules that already set their own margin. */
h1, h2 { margin-bottom: max(16px, .3em); }
h1 { text-wrap: pretty; }
h2 { text-wrap: balance; }
.section-heading-row h2 { margin-bottom: 0; }
.area-hero p:not(.eyebrow) { margin-bottom: 30px; }
.inner-hero-copy .hero-actions { margin-top: 30px; }

/* 2. Guide content: FAQ questions, stacked paragraphs, notes (/faq, /permit-guide) */
.guide-content h3 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 42px 0 10px;
}
.guide-content h2 + h3 { margin-top: 14px; }
.guide-content p + p { margin-top: 14px; }
.guide-content .legal-note { margin-top: 36px; }
.guide-content > .legal-note { margin-top: 0; }
.guide-content p.eyebrow { font-size: 10px; color: var(--moss); padding-right: 80px; }
.guide-content p.eyebrow.light { color: var(--lime); }

/* Highlight box stays inside the column instead of bleeding past it */
.highlight-article { margin-left: 0 !important; margin-right: 0 !important; padding: 55px 50px !important; }
.highlight-article p.eyebrow { padding-right: 90px; }

/* City card phone number never wraps */
.city-card .button { white-space: nowrap; flex: none; }

/* 3. Three-column feature grid (service, town and About pages) */
.process-grid article { margin-right: 0; padding: 35px 3vw 30px; }
.process-grid article:first-child { padding-left: 0; }
.process-grid article:last-child { padding-right: 0; }
.process-grid h3, .values-grid h3 { margin: 26px 0 12px; line-height: 1.25; }

/* 4. Consistent left edge (5.5vw, same as every section below the hero) */
.inner-hero-copy { padding-left: 5.5vw; padding-right: 5.5vw; }
.about-hero { padding: 40px 5.5vw; }
.about-hero img { height: 680px; }
.area-hero { padding-left: 5.5vw; padding-right: 5.5vw; }
.contact-location { padding-left: 5.5vw; padding-right: 5.5vw; }
.guide-layout { padding-left: 5.5vw; padding-right: 5.5vw; }

/* 5. Hero photos get breathing room instead of hugging the edges */
.hero-image-wrap { margin: 40px 5.5vw 40px 0; }
.inner-hero-image { margin: 40px 5.5vw 40px 0; }

/* 6. Headings that were too large for their column */
.town-intro .section-intro h2 { font-size: clamp(36px, 3.6vw, 54px); }
.town-intro .section-intro p { margin-top: 0; }
.need-finder .section-intro h2 { font-size: clamp(40px, 4vw, 64px); }
.contact-hero h1 { font-size: clamp(54px, 5.2vw, 84px); }

/* 7. Tight spots */
.map-copy .text-link { margin-top: 18px; }
.map-copy .text-link + .text-link { margin-top: 14px; margin-left: 0; }
.map-copy { display: flex; flex-direction: column; align-items: flex-start; }
.contact-details small { font-size: 10px; margin-bottom: 8px; }
.contact-details > * + * { margin-top: 10px; }

/* 8. Gallery: first 12 photos, then a button reveals the rest */
.gallery-grid .gallery-item.is-extra { display: none; }
.gallery-grid.show-all .gallery-item.is-extra { display: block; }
.gallery-more { display: flex; justify-content: center; margin-top: 36px; }
.gallery-more .button { cursor: pointer; }

/* 9. Small text */
.header-phone span { font-size: 10px; }
.need-card small { font-size: 13px; }
.footer-grid p, .footer-grid a { font-size: 14px; line-height: 1.75; }
.footer-grid strong { font-size: 12px; }
.hero-facts b { font-size: 15px; }
.hero-facts { font-size: 11px; }

@media (max-width: 1050px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0; }
  .process-grid article:last-child { border-bottom: 0; }
  .process-grid h3 { margin: 18px 0 10px; }
  .values-grid { grid-template-columns: 1fr; gap: 0; }
  .values-grid article, .values-grid > * { padding: 24px 0; border-bottom: 1px solid var(--line); }
  .hero-image-wrap { margin: 0 6vw 6vw; }
  .inner-hero-image { margin: 0 6vw 6vw; }
  .about-hero { padding: 80px 6vw 6vw; }
  .about-hero img { height: 650px; }
  .inner-hero-copy, .area-hero, .guide-layout { padding-left: 6vw; padding-right: 6vw; }
}

@media (max-width: 680px) {
  .hero-image-wrap { margin: 0 6vw 6vw; }
  .inner-hero-image { margin: 0 6vw 6vw; }
  .about-hero { padding: 75px 6vw 6vw; }
  .about-hero img { height: 70svh; }
  .contact-location { padding-left: 6vw; padding-right: 6vw; }
  .highlight-article { padding: 45px 22px !important; }
  .guide-content p.eyebrow { padding-right: 60px; }
  .guide-content h3 { font-size: 21px; margin-top: 34px; }
  .guide-number { top: -6px; }
  .town-intro .section-intro h2 { font-size: 34px; }
  .need-finder .section-intro h2 { font-size: 40px; }
  .brand-type small { font-size: 9px; }
  .hero-facts { font-size: 10px; }
  .hero-facts b { font-size: 13px; }
  .need-card small { font-size: 12px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .review-card { padding-top: 70px; }
  .quote-mark { font-size: 72px; top: 14px; right: 22px; }
  .footer-actions { width: 100%; }
  .footer-actions .button { flex: 1 1 100%; }
}

@media (max-width: 440px) {
  .inner-hero h1 { font-size: min(55px, 12.5vw); }
  .guide-hero h1, .contact-hero h1, .about-hero h1, .area-hero h1 { font-size: min(55px, 13vw); }
  .section-intro h2, .story-copy h2, .service-area-preview h2, .footer-main h2,
  .guide-content h2, .service-aside h2, .map-copy h2, .permit-band h2 { font-size: min(42px, 11vw); }
  .town-intro .section-intro h2 { font-size: min(34px, 9.5vw); }
  .contact-hero > *, .quote-form, .form-grid, .form-grid label { min-width: 0; }
  .quote-form input, .quote-form select, .quote-form textarea { min-width: 0; width: 100%; }
}

/* Home hero headline: sized so "Tree service in" holds one line instead of stranding "in" */
.hero h1 { font-size: clamp(56px, 5.5vw, 96px); text-wrap: wrap; }
@media (max-width: 1050px) { .hero h1 { font-size: clamp(48px, 7.5vw, 64px); } }
@media (max-width: 440px) { .hero h1 { font-size: min(50px, 12vw); } }

/* Inner-page hero headlines: a touch smaller so short words don't sit alone on a line */
.inner-hero h1 { font-size: clamp(52px, 5.4vw, 88px); }

/* Stacked sections were doubling their gaps (bottom margin/padding + top padding) */
.service-aside + .need-finder,
.need-finder + .need-finder { padding-top: 0; }
@media (max-width: 1050px) { .inner-hero h1 { font-size: 55px; } }
@media (max-width: 440px) { .inner-hero h1 { font-size: min(52px, 12vw); } }