/* Home page, pass 4 (2026-11-02). Pine duotone banner, proof strip over its foot, two-column section heads. */

/* section heads: h2 in the left 7, lede in the right 5, bottom-aligned (R1) */
@media (min-width: 1024px) {
  :is(.h-services, .h-how, .h-reviews, .areas) .section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: end; max-width: none; }
  :is(.h-services, .h-how, .h-reviews, .areas) .section-head > :is(.eyebrow, h2) { grid-column: 1; }
  :is(.h-services, .h-how, .h-reviews, .areas) .section-head > p:not(.eyebrow) { grid-column: 2; margin-top: 0; }
}

/* hero: full-color photo under a pine scrim, darkest where the copy sits, so the photo reads at the edges and the text reads everywhere */
.h-hero { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.h-hero.surface-pine { background: var(--paper); color: var(--ink); }
.h-hero-bg, .h-hero-copy { grid-area: 1 / 1; }
.h-hero-bg { position: relative; overflow: clip; min-height: 520px; background: var(--pine-deep); }
.h-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 36% 50%; }
.h-hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 72% 78% at 50% 44%, rgba(14, 47, 38, .86) 0%, rgba(14, 47, 38, .70) 55%, rgba(14, 47, 38, .42) 100%); }
.h-hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; text-align: center; padding-block: 40px; color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 28px rgba(0, 0, 0, .30); }
.h-hero h1 { max-width: 820px; margin-inline: auto; }
.h-hero.surface-pine .h-hero-copy p.eyebrow { margin-bottom: 16px; font-size: 17px; color: var(--paper); }
.h-hero.surface-pine .h-hero-copy .lede { margin-top: 20px; max-width: 640px; text-wrap: balance; font-size: clamp(17px, 15.51px + 0.381vw, 21px); color: var(--paper); }
.h-hero .btn-row { margin-top: 28px; justify-content: center; }
.h-hero .btn { text-shadow: none; }
.h-reassure { margin-top: 16px; max-width: 78ch; font-size: 17px; color: var(--paper); text-wrap: balance; }
@media (max-width: 767px) { .h-hero .btn-row { width: 100%; } .h-hero .btn-row .btn { flex: 1 1 100%; } }
@media (min-width: 768px) { .h-hero-bg { min-height: 560px; } .h-hero-copy { padding-block: 56px; } }
@media (min-width: 1024px) { .h-hero-bg { min-height: 720px; } .h-hero-bg img { object-position: 50% 50%; } .h-hero-copy { padding-block: 64px 128px; } }

/* proof strip */
.h-hero > .container:not(.h-hero-copy) { grid-row: 2; position: relative; z-index: 2; }
.h-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 0; padding: 24px 20px; background: var(--paper-light); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--radius-card); align-items: start; }
.h-proof .fact:nth-child(1) { order: 1; }
.h-proof .fact:nth-child(3) { order: 2; }
.h-proof .fact:nth-child(2) { order: 3; grid-column: 1 / -1; }
@media (max-width: 479px) {
  .h-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr); gap: 20px 10px; padding: 20px 16px; }
  .h-proof .fact:nth-child(n) { order: 0; grid-column: auto; }
  .h-proof .fact-n { font-size: 32px; }
}
.h-proof-review { order: 4; grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--hair); }
@media (min-width: 768px) {
  .h-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; padding: 28px 32px; }
  .h-proof .fact:nth-child(n) { order: 0; grid-column: auto; }
  .h-proof-review { order: 0; grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .h-proof { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 32px; margin-top: -64px; padding: 32px 40px; align-items: center; }
  .h-proof-review { grid-column: auto; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--hair); }
}
.fact { display: flex; flex-direction: column; min-width: 0; }
.fact-n { font-size: var(--fs-fact); line-height: 1; font-weight: 700; color: var(--pine); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact-l { margin-top: 8px; color: var(--muted); }
.h-proof .h-proof-review .stars { font-size: 16px; margin-bottom: 10px; color: var(--pine); }
.h-proof .h-proof-review .review-platform { color: var(--muted); }
.h-proof-review blockquote p { font-size: 17px; line-height: 1.45; font-weight: 500; }
.h-proof-review blockquote p::before { content: "\201C"; }
.h-proof-review blockquote p::after { content: "\201D"; }
.h-proof-review figcaption { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* services: eight photo cards from one generated set, equal frames; text cards remain the fallback */
.h-services .cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 768px) { .h-services .cards.cols-4 { gap: 40px var(--gap); } }
@media (min-width: 1024px) { .h-services .cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.h-services .card-body .card-line { flex: 1; }
.h-services .card-body .card-price { margin-top: auto; }
@media (max-width: 767px) {
  .h-services .card.text .card-body { padding: 16px; gap: 6px; }
  .h-services .card:not(.text) .card-body { padding-top: 12px; gap: 6px; }
  .h-services .card h3 { font-size: 18px; }
  .h-services .card-type { font-size: 13px; }
  .h-services .card-body .card-line { display: none; }
  .h-services .card-body .card-price { margin-top: 8px; font-size: 15px; }
}

/* about: copy left, who card right */
.h-about { align-items: start; }
.h-who { padding: 32px; background: var(--paper-light); border: 1px solid var(--hair); border-radius: var(--radius-card); }
@media (min-width: 1024px) { .h-who { max-width: 364px; margin-left: auto; } }
.h-who-photo { display: flex; justify-content: center; padding-bottom: 24px; }
.h-who-photo img { width: 300px; max-width: 100%; height: auto; border-radius: 8px; }
.h-who-name { font-size: 22px; font-weight: 650; line-height: 1.2; }
.h-who-role { color: var(--muted); font-size: 17px; margin-top: 4px; }
.h-who-facts { margin-top: 20px; border-top: 1px solid var(--hair); }
.h-who-facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 17px; }
.h-who-facts dt { color: var(--muted); font-weight: 500; }
.h-who-facts dd { font-weight: 600; }
.h-license { margin-top: 24px; color: var(--muted); font-size: 15px; }

/* lighting: night, photo left, copy right */
.h-lighting-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.h-lighting.surface-night .h-lighting-body p.eyebrow { color: var(--amber); }
.h-lighting .h-market { margin-top: 24px; color: var(--paper-78); }
.h-lighting-body h2 { font-size: clamp(32px, 29.42px + 0.663vw, 40px); }
.h-lighting-body .lighting-lines { margin-top: 24px; }
.h-lighting-body .lighting-lines li { padding: 12px 0; font-size: var(--fs-body); }
.h-lighting .h-market { margin-top: 20px; }
.h-lighting-body .lighting-price { margin-top: 12px; font-size: var(--fs-body); }
.h-lighting-body .btn-row { margin-top: 28px; }

/* reviews: featured quote takes two columns beside the first review on desktop */
.h-reviews .review-featured { max-width: none; padding: 24px; background: var(--paper-light); border-radius: var(--radius-card); }
@media (min-width: 768px) { .h-reviews .review-featured { padding: 40px; } }
.h-reviews .review-featured + .review-grid { margin-top: var(--gap); }
@media (min-width: 1024px) {
  .h-reviews > .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .h-reviews > .container > .section-head { grid-column: 1 / -1; margin-bottom: calc(var(--head-gap) - var(--gap)); }
  .h-reviews .review-featured { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; }
  .h-reviews .review-grid { display: contents; }
  .h-reviews > .container > :not(.section-head, .review-featured, .review-grid) { grid-column: 1 / -1; }
}
.h-after { margin-top: 32px; }

/* areas */
.h-areas { align-items: start; }
.h-far { margin-top: 16px; color: var(--muted); font-size: 17px; }
.h-cities { border-top: 1px solid var(--hair); }
.h-city { padding: 24px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 6px; }
.h-city h3 { font-size: var(--fs-h4); }
.h-city dl { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 4px; font-size: 17px; }
.h-city dl > div { display: flex; gap: 8px; }
.h-city dt { color: var(--muted); font-weight: 500; }
.h-city dd { font-weight: 600; }
.h-city .text-link { justify-self: start; margin-top: 6px; font-size: 17px; }
@media (min-width: 1024px) { .h-areas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* faq: head and lede in the left column, held across the rows */
.h-faq .section-head h2 { margin-bottom: 0; }
@media (min-width: 1024px) { .h-faq > .container.narrow > .section-head { grid-row: 1 / span 12; } }
@media (max-width: 767px) { .h-services .card-body .card-line { display: none; } .h-services .card-body h3 { flex: 1; } }

/* recent work: six real photos, square tiles, one size, never past 1.15x of the source */
.h-work .gallery { justify-content: center; }
.h-work .gallery.cols-3 > li { max-width: 345px; }
.h-work .gallery.cols-3 .gallery-item img { aspect-ratio: 1 / 1; }

/* PHONE PASS 2026-11-06. Phone-only (under 768px). */
@media (max-width: 767px) {
  /* hero: one button (Call sits in the bottom bar), proof card shows the three facts */
  .h-hero .btn-row .btn-outline { display: none; }
  .h-proof-review { display: none; }

  .h-lighting-body .lighting-lines { margin-top: 16px; }
  .h-lighting-body .lighting-lines li { padding: 10px 0; font-size: 17px; }

  /* owner card: small photo beside the name, facts two across */
  .h-who { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px; }
  .h-who-photo { grid-row: 1 / span 2; padding: 0; }
  .h-who-photo img { width: 104px; height: 104px; object-fit: cover; object-position: 50% 20%; }
  .h-who-name { align-self: end; font-size: 20px; }
  .h-who-role { align-self: start; margin-top: 2px; font-size: 15px; line-height: 1.4; }
  .h-who-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
  .h-who-facts > div { display: block; padding: 10px 0; font-size: 15px; }
  .h-who-facts dd { font-size: 16px; font-weight: 600; }

  /* cities: name and link */
  .h-cities .h-city { padding: 14px 0; gap: 2px; }
  .h-city dl { display: none; }
  .h-city h3 { font-size: 20px; }
  .h-city .text-link { font-size: 16px; }
  .h-far { font-size: 16px; }
}