/* Layout D -- EDITORIAL
   Magazine feel. Photo sits INSIDE the page with a wide margin around it
   instead of bleeding to the edges, headline overlaps its bottom corner. The
   trust numbers become the second thing you see, because for trades where the
   sale is trust (contractors handling six-figure jobs) the numbers do more
   work than a service list. */

main { display: flex; flex-direction: column; }
.hero          { order: 1; }
.trust-strip   { order: 2; }
#services      { order: 3; }
.ticker-wrap   { order: 4; }
#process       { order: 5; }
#work          { order: 6; }
#area          { order: 7; }
#faq           { order: 8; }
#estimate      { order: 9; }

/* --- hero: inset photo, headline overlapping it --- */
.hero {
  min-height: 0; display: block;
  background: var(--paper, #f4f2ee);
  padding: 26px 20px 0;
}
.hero-media {
  position: relative; height: 44vh; min-height: 240px; max-height: 480px;
  max-width: 1180px; margin: 0 auto; border-radius: 2px; overflow: hidden;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim { display: none; }
.hero-content {
  position: static; max-width: 1180px; margin: -46px auto 0;
  padding: 0 0 44px; text-align: left;
  color: var(--ink, #14181d);
}
/* Same inversion trap as STACK: the base sheet paints this text white for a
   dark photo, and here it lands on the cream page. */
.hero-content, .hero-content h1 { color: var(--ink, #14181d); }
.hero-content .accent-text,
.hero-content .eyebrow-light { color: var(--accent-ink, #b1522a); }
.hero-content h1 {
  background: var(--paper, #f4f2ee);
  display: inline-block; padding: 18px 30px 6px 0; margin: 0;
  max-width: 15ch;
}
.hero-content .eyebrow { padding-left: 2px; }
.hero-content .hero-lead { max-width: 54ch; color: var(--ink-soft, #565f68); padding-left: 2px; }
.hero-actions { padding-left: 2px; }
.site-header:not(.scrolled) .logo,
.site-header:not(.scrolled) .nav-phone { color: var(--ink, #14181d); }
.site-header:not(.scrolled) .header-nav a { color: var(--ink-soft, #565f68); }
.site-header:not(.scrolled) .nav-toggle span { background: var(--ink, #14181d); }

/* --- trust numbers: big, on the page, not in a dark bar --- */
.trust-strip { background: transparent; color: var(--ink, #14181d);
  border-top: 1px solid var(--line, #d9d4cb); border-bottom: 1px solid var(--line, #d9d4cb); }
.trust-num { font-size: 2.1rem; color: var(--accent-ink, #b1522a); }
.trust-label { color: var(--ink-soft, #565f68); }

/* --- services: 2 columns, generous, numbered --- */
@media (min-width: 760px) { .services-grid { grid-template-columns: 1fr 1fr; } }
.service-card { background: var(--paper-card, #fff); }

/* --- gallery: tall portrait strip --- */
@media (min-width: 760px) {
  .gallery-card img { width: 100%; height: 340px; object-fit: cover; display: block; }
}