/* Services comp (s4) on the forensic system. Used only by /services/ and /new-construction-plumbing/, linked after forensic.css.
   Everything visual comes from forensic.css (labels, rules, index rows, figures, quiet outline button); this file only adds layout
   that is specific to these two pages. No red, no display face, no ornaments. */
.s4-page { background: #000; }
.s4-page main { background: #000; }
.s4-page main a { text-underline-offset: 3px; }

/* top: label, h1, plain line, on one left edge */
.forensic .s4-top { padding-top: clamp(2.25rem, 5vw, 4rem); padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.forensic .s4-top .f-h1 { max-width: 22ch; text-wrap: balance; }
.forensic .s4-top .f-lede { max-width: 56ch; }
.forensic .s4-wide { margin-top: clamp(2rem, 4vw, 3rem); }
.forensic .s4-pano img { aspect-ratio: 2.2 / 1; }

.forensic .s4-gap { margin-top: 1.1rem; }
.forensic .s4-gap2 { margin-top: 2rem; }
.forensic .s4-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin: 1.5rem 0 0; max-width: none; }
.forensic .s4-textlink { color: var(--f-ink); font-size: 0.9375rem; text-decoration-thickness: 1px; }

/* index rows that are not links (rough-in, trim-out) read the same as the linked ones */
.forensic .f-index .f-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
@media (min-width: 900px) {
  .forensic .f-index .f-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1.6fr) 3rem; gap: 0 1.5rem; align-items: baseline; }
}

/* figures strip under the index */
.forensic .s4-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .forensic .s4-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.forensic .s4-figs .f-fig img { aspect-ratio: 4 / 3; }

/* full list: grouped quiet links, one group per ruled row */
.forensic .s4-grp { padding: 1.25rem 0 1rem; border-top: 1px solid var(--f-rule); }
.forensic .s4-grp:first-child { padding-top: 0; border-top: 0; }
.forensic .s4-grp .f-label { margin-bottom: 0.25rem; }
.forensic .s4-grp .f-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.forensic .s4-grp .f-list a { padding: 0.4rem 0; font-size: 0.9375rem; line-height: 1.35; }
@media (min-width: 900px) { .forensic .s4-grp .f-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .forensic .s4-grp .f-list { grid-template-columns: minmax(0, 1fr); } }
.forensic .s4-grp ul li { max-width: none; }
@media (prefers-reduced-motion: reduce) { .s4-page * { transition: none !important; } }