/* Layout B -- SPLIT
   Hero becomes a two-column split: text left on a solid panel, photo right.
   Nothing overlaps the photo, so it reads calmer and more "designed" than the
   full-bleed original. Order: hero > services > process > work > faq > area >
   estimate -- services jump ahead of the gallery because a visitor who lands
   here wants to know WHAT you do before they look at pictures. */

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

/* --- hero: split panel, not full-bleed photo --- */
.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  background: var(--steel, #1c2128);
}
.hero-media { position: relative; order: 2; height: 46vh; min-height: 260px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The scrim exists to make text readable ON the photo. In this layout no text
   sits on the photo, so it only muddies it. */
.hero-scrim { display: none; }
.hero-content {
  order: 1;
  position: static;
  max-width: none;
  padding: 54px 24px 46px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
.hero-actions { justify-content: flex-start; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; min-height: 76vh; }
  .hero-media { order: 2; height: auto; }
  .hero-content { padding: 0 clamp(40px, 5vw, 80px); }
  .hero h1 { font-size: clamp(2.3rem, 3.9vw, 3.7rem); }
}

/* --- services: one wide row per service, not a card grid ---
   The base sheet paints .services-grid with `background: var(--line)` and
   relies on a 2px gap to fake hairline dividers between cards. Transparent
   cards over that grey turned the whole block into unreadable grey-on-grey,
   so the background has to be cleared here too. */
.services-grid { display: block; background: transparent; border: 0; gap: 0; }
.service-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border: 0;
  border-top: 1px solid var(--line, #d9d4cb);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 26px 4px;
}
.service-card:last-child { border-bottom: 1px solid var(--line, #d9d4cb); }
.service-card:hover { transform: none; background: rgba(0,0,0,0.02); }
@media (min-width: 760px) {
  .service-card { grid-template-columns: minmax(200px, 34%) 1fr; gap: 32px; align-items: baseline; }
  .service-card h3 { font-size: 1.35rem; }
}

/* --- process: a numbered vertical spine, not four boxes ---
   `display: block` alone is NOT enough. The base sheet sets
   `.process-grid { grid-template-columns: repeat(4, 1fr) }` inside a desktop
   media query, which outranks a plain declaration here -- the steps stayed in
   four columns and each paragraph rendered one character wide. Forcing a
   single-column grid beats it at any width. */
.process-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 760px; margin: 0 auto; gap: 0;
}
/* A step has THREE children -- .process-num, h3, p -- not two. A plain
   `56px 1fr` grid put the number and the h3 on row 1, then wrapped the
   paragraph onto row 2 COLUMN 1, i.e. the 56px number column, rendering it
   one word per line. The number must span both rows so the text column stays
   whole. */
.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
  padding: 0 0 34px;
  border: 0; background: transparent; box-shadow: none;
  position: relative;
}
.process-step > .process-num { grid-column: 1; grid-row: 1 / span 2; }
.process-step > h3 { grid-column: 2; grid-row: 1; }
.process-step > p  { grid-column: 2; grid-row: 2; }
/* The connecting line is what makes it read as one journey rather than four
   unrelated steps. Last step has no line or it dangles into the next section. */
.process-step::before {
  content: ""; position: absolute; left: 27px; top: 52px; bottom: 6px;
  width: 2px; background: var(--line, #d9d4cb);
}
.process-step:last-child::before { display: none; }
.process-num {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--copper, #c15a2e); color: #fff;
  font-size: 1.2rem; position: relative; z-index: 1;
}

/* --- gallery: one lead photo, two beneath ---
   Base is a 3-column grid. Spanning the first card across it left a one-cell
   hole on the second row (two photos in three slots) which rendered as a big
   black gap. Two columns divides evenly by the two remaining photos. */
@media (min-width: 760px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-card { grid-column: auto; }
  .gallery-card:first-child { grid-column: 1 / -1; }
  .gallery-card img { width: 100%; height: 260px; object-fit: cover; display: block; }
  .gallery-card:first-child img { height: 380px; }
}