/* Onsite quoting section (spec 2026-09-08): proof of the CoolEdge onsite
   quoting flow via duct-layout-demo.mp4. Reuses .container/.eyebrow/
   .reveal/.btn/.accent/.lede/.hero-actions from styles.css -- the rules
   below cover only the video card + benefits layout new to this section.

   Round 2 (coordinator decision, 2026-09-08): served from public/ as its
   own standalone file instead of a /src <link> Vite would fold into the
   single merged bundle -- see the spec's Records for the round-1 CSS-
   budget conflict this resolves. Free to use the spec's intended
   breakpoints here (900px stack, 600px full-bleed) now that this file's
   size no longer eats into the main bundle's budget. */
.onsite-quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; margin-top: 3rem; }
.onsite-quote-media { max-width: 900px; }
.onsite-quote-frame { position: relative; aspect-ratio: 1600 / 912; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-section); }
.onsite-quote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.onsite-quote-caption { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.85rem; }
.onsite-quote-benefits { display: grid; gap: 1.6rem; list-style: none; }
.onsite-quote-benefits h3 { color: var(--accent-dark); margin-bottom: 0.35rem; }
.onsite-quote-benefits p { color: var(--text-muted); font-size: 0.95rem; }

/* Round 2 (2026-09-09, codex desktop alignment unification, spec
   2026-09-09-suburbs-and-process-image.md Round 2): brings this
   section's intro (eyebrow/h2/lede, sitting at the TOP of
   #onsite-quote .container, not wrapped in its own intro div the way
   #process/#service-areas are) into the same shared measures as the
   other two sections -- 760px H2 cap, 640px lede cap, 16px heading-to-
   lede gap, 64px content-grid gutter (was a clamp maxing at 56px),
   24px benefits gap, 32px CTA-to-grid gap (was the sitewide default
   .hero-actions 24px). The existing 48px intro-to-grid margin
   (.onsite-quote-grid's margin-top:3rem, set above, unconditional) is
   already the system's target value and needs no change here. */
@media (min-width: 900px) {
  #onsite-quote .eyebrow { margin: 0 0 16px; }
  #onsite-quote h2 { width: 100%; max-width: 760px; margin: 0; }
  #onsite-quote .lede { max-width: 640px; margin: 16px 0 0; }
  .onsite-quote-grid { gap: 64px; }
  .onsite-quote-benefits { gap: 24px; }
  #onsite-quote .hero-actions { margin-top: 32px; }
}

/* Boundary fix (round 2): this used to be `max-width: 900px`, which
   overlapped the new `min-width: 900px` system rule above at exactly
   900px (both would apply; whichever came later in the cascade won by
   accident, not by design). Narrowed to 899px so the two ranges are
   disjoint -- viewport 900 is desktop, 899 and below is mobile, with no
   ambiguous overlap width. */
@media (max-width: 899px) {
  .onsite-quote-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .onsite-quote-media { max-width: none; }
}
@media (max-width: 600px) {
  .onsite-quote-media { --bleed: clamp(1.25rem, 5vw, 2.5rem); }
  .onsite-quote-frame { border-radius: 0; margin-inline: calc(var(--bleed) * -1); width: calc(100% + var(--bleed) * 2); }
}