/* Process section 2-col layout (round 3, 2026-09-08): desktop dead-space
   fix, Codex design review's option 1 -- intro (eyebrow/h2/lede) left,
   scrollytelling track right, >=900px only. Served from public/ like
   onsite-quote.css so it never touches the Vite-merged bundle (the main
   bundle's 99B headroom stays untouched, see spec Records round 1/2).
   Below 900px: zero effect here, the existing single-column stack from
   styles.css is unchanged. .process-track's own markup and internals
   are untouched -- main.js's scroll-line JS measures against
   .process-track's own box, which still works correctly wherever the
   grid places it (see spec Records round 3 verification). */

/* Round 4 (2026-09-09, spec 2026-09-09-suburbs-and-process-image.md):
   CoolEdge dashboard mockup, now a sibling of .process-intro (moved out
   of it in round 2 below). Shown at every width (not gated to the
   >=900px rule below); width/height attrs on the <img> itself reserve
   the box before this rule (or any CSS) even loads, so there is no CLS
   either way. margin-top:2rem is the MOBILE value (single-column stack,
   image sits directly under the track's sibling flow) -- round 2's
   >=900px block below zeroes this once the image becomes a grid cell
   with its own row-gap from the intro. */
.process-dashboard { display: block; width: 100%; height: auto; margin-top: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Round 2 (2026-09-09, codex desktop alignment unification, spec
   2026-09-09-suburbs-and-process-image.md Round 2): client complaint
   "sections all look misaligned" -- #process, #onsite-quote and
   #service-areas each had their own internal split (different dividing
   line x, different H2 widths, different heading-to-lede gaps). This
   replaces round 3's 2-column-from-the-top layout with the shared
   system all three sections now use: a FULL-WIDTH intro (eyebrow/h2/
   lede) above the content, then a 528/64/528 content grid below it.

   .process-intro now spans both grid columns (row 1); .process-dashboard
   and .process-track (in that DOM order) auto-place into row 2's two
   cells -- dashboard column 1, track column 2 -- with no explicit
   grid-column needed on either (CSS Grid's row-auto-flow fills the next
   row's cells in source order once a full-span item closes out the
   previous row). row-gap:48px is BOTH the process-specific "dashboard/
   track row gap" and the system's universal "48px from lede bottom to
   content grid top" -- the same gap serves both because .process-intro
   (ending in the lede) and the dashboard/track row sit in adjacent grid
   rows of the SAME grid container, so the row-gap lands exactly between
   them regardless of the intro's own height.

   .process-track's own markup/internals are still completely untouched
   here -- only its GRID CELL placement changes (implicit, via source
   order), never a rule targeting anything inside it. The scroll-line JS
   measures .process-track's own bounding box at scroll time, so moving
   which grid row/column that box sits in is transparent to it (verified
   via A3 in _qa/process-layout/probes.cjs: line still draws to 100% and
   badge 04 still activates at the scroll endpoint). */
@media (min-width: 900px) {
  #process .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 48px; align-items: start; }
  #process .process-intro { grid-column: 1 / -1; }
  #process .process-intro .eyebrow { margin: 0 0 16px; }
  #process .process-intro h2 { width: 100%; max-width: 760px; margin: 0; }
  #process .process-intro .lede { max-width: 640px; margin: 16px 0 0; }
  #process .process-track { margin-top: 0; }
  #process .process-dashboard { margin-top: 0; }
  /* System requirement: show the existing <br> in all three headings
     (round 3's "hide it, wrap naturally" fix is superseded -- the H2 is
     now capped at max-width:760px regardless of column width, so the
     manual break is what the client's approved copy intends to show). */
}