@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/b8c0e6116eab19c30e2529326bc6a459e7c851a9881acc7215dab22ec8014176.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/378aea0f5c1d179f4e0b5382c06bfc87571b98cfcc4fd1352bc979e2e2259c54.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/4ab00275cc496a478fce7baafe89ed44af875acf57655dfd1183ff22bd23829a.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/6a825b4824c01cbb401e829e5a066a1818411bcb3538b5a5792c5ca9b82343c3.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* ── Calm Dispatch — the design-system service theme, ported faithfully ─────
   Visual language: docs/reference/client-sites-design-system-v20. The nine
   palette names below are contract-pinned by the QA probe; the semantic
   aliases mirror tokens/semantic.css [data-vertical="service"]. */

:root {
  --municipal-blue: #0B4598;
  --valve-red: #D52B2F;
  --service-ink: #142534;
  --inspection-paper: #F4F8FA;
  --pipe-frost: #DCEAF2;
  --brass-route: #9A5B12;
  --white: #ffffff;
  --muted-ink: #4F6878;
  --steel-line: #9EB5C2;
  --blue-deep: #082D63;

  --paper: var(--inspection-paper);
  --surface: var(--white);
  --surface-sunken: var(--pipe-frost);
  --surface-inverse: var(--service-ink);
  --surface-brand: var(--blue-deep);
  --text-strong: var(--service-ink);
  --text-body: var(--service-ink);
  --text-muted: var(--muted-ink);
  --text-inverse: var(--white);
  --text-brand: var(--municipal-blue);
  --text-accent: var(--brass-route);
  --text-eyebrow: var(--municipal-blue);
  --line: var(--steel-line);
  --line-strong: var(--service-ink);
  --action-bg: var(--municipal-blue);
  --action-ink: var(--white);
  --action-bg-hover: var(--blue-deep);
  --action-secondary-bg: var(--white);
  --action-secondary-ink: var(--municipal-blue);
  --urgent-bg: var(--valve-red);
  --urgent-ink: var(--white);
  --accent: var(--brass-route);
  --link: var(--municipal-blue);
  --link-hover: var(--valve-red);
  --panel-bg: var(--pipe-frost);
  --panel-bar: var(--municipal-blue);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible Next", "Segoe UI", sans-serif;
  --utility: "IBM Plex Mono", "Cascadia Mono", monospace;

  --fs-display: clamp(3.2rem, 7vw, 6rem);
  --fs-h2: clamp(2.2rem, 4vw, 3.5rem);
  --fs-h3: 1.65rem;
  --fs-lede: clamp(1.05rem, 2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.96rem;
  --fs-caption: 0.82rem;
  --fs-mono: 0.8rem;
  --lh-display: 0.98;
  --lh-body: 1.58;
  --tracking-mono: 0.12em;
  --measure-h1: 12ch;
  --measure-lede: 36rem;
  --measure-body: 68ch;

  /* One inset for the whole page: the content column and the full-bleed
     chrome both derive from it, so they cannot drift apart. */
  --gutter: 1rem;
  --container: 76rem;

  /* Full-bleed chrome centres on the same basis as the content column.
     100vw would include the scrollbar and land the logo half a scrollbar
     off the rail beneath it. */
  --bleed-gutter: max(var(--gutter), calc((100% - var(--container)) / 2));
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --panel-pad: clamp(2rem, 5vw, 4rem);
  --hero-pad: clamp(2rem, 6vw, 5rem);
  --form-pad: clamp(1.2rem, 4vw, 2.5rem);
  --bar-sm: 0.35rem;
  --bar: 0.45rem;
  --bar-md: 0.5rem;
  --bar-lg: 0.6rem;
  --radius-action: 0.2rem;
  --radius-field: 0.15rem;
  --tap-min: 44px;
  --shadow-plate: 0 1rem 0 var(--surface-sunken);
  --shadow-plate-sm: 0 0.55rem 0 var(--surface-sunken);
}

/* ── Element floor (design-system base.css, minus overflow masking) ──────── */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 700;
  line-height: var(--lh-display);
  text-wrap: balance;
}

h1 {
  max-width: var(--measure-h1);
  font-size: var(--fs-display);
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  max-width: 68ch;
  margin: 0 0 1rem;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
}

p,
li,
blockquote,
figcaption,
address {
  overflow-wrap: anywhere;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--link-hover);
}

a,
summary {
  touch-action: manipulation;
  min-height: 44px;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--valve-red);
  outline-offset: 3px;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0.9rem;
  background: var(--white);
  color: var(--service-ink);
  font-family: var(--utility);
  font-size: 0.85rem;
  font-weight: 600;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus-visible,
.skip-link:focus {
  clip-path: none;
  overflow: visible;
}

/* ── Utility band (DemoBand) ─────────────────────────────────────────────── */

.utility-band {
  display: flex;
  justify-content: flex-end;
  padding: 0.45rem var(--bleed-gutter);
  background: var(--surface-brand);
  color: var(--text-inverse);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
}

.utility-band a,
.utility-band span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-inverse);
  text-decoration: none;
}

.utility-band a::before {
  content: "●";
  margin-right: 0.55rem;
  color: var(--valve-red);
  font-size: 0.6rem;
}

/* ── Header (SiteHeader) ─────────────────────────────────────────────────── */

.site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand primary action languages";
  align-items: center;
  gap: 1.5rem;
  /* Full-bleed like the utility band and footer, so the brand lands on the
     same rail as the content below it at every width. */
  padding: 1rem var(--bleed-gutter);
}

.site-brand-group {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.site-brand-mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--municipal-blue);
  color: var(--white);
  font-family: var(--utility);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.desktop-site-nav {
  grid-area: primary;
  justify-self: center;
}

.desktop-site-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 0.2rem;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}

.desktop-site-nav a:hover {
  color: var(--link-hover);
}

.header-action {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.72rem 1rem;
  border: 2px solid var(--valve-red);
  border-radius: var(--radius-action);
  background: var(--urgent-bg);
  color: var(--urgent-ink);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}

.header-action:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}

.desktop-language-nav {
  grid-area: languages;
}

.desktop-language-nav a,
.mobile-language-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 0.2rem;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}

.mobile-site-menu {
  display: none;
  grid-area: menu;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.breadcrumb-nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--text-muted);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.breadcrumb-nav ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
}

.breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--tap-min);
}

.breadcrumb-nav li + li::before {
  content: "/";
  color: var(--brass-route);
}

.breadcrumb-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--link);
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ── Page frame ──────────────────────────────────────────────────────────── */

.plumber-page {
  display: block;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin: 0 auto var(--section-y);
}

.plumber-page > section,
.plumber-page > nav,
.plumber-page > aside {
  margin-top: var(--section-y);
}

.plumber-page > .page-hero {
  margin-top: 1rem;
}

/* ── Hero (design-system Hero, panel tone) ───────────────────────────────── */

.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 31rem;
  background: var(--surface);
  border-top: var(--bar-lg) solid var(--action-bg);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}

.page-hero--with-media {
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
}

/* The rotated ornament read as a rendering glitch on heroes without media;
   removed. The 48rem display:none rule survives as the responsive contract. */
.page-hero::before {
  content: "";
  display: none;
}

/* Home hero: the dispatch board reads slightly taller; interior heroes
   stay short enough that page content peeks above the fold. */
.dispatch-hero {
  min-height: 33rem;
}

.plumber-page:not(.page-family--home) .page-hero {
  min-height: 18rem;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--hero-pad);
}

/* Without a media panel the copy simply runs to a wider measure; it stays on
   the page rail so the hero lines up with every section below it. */
.page-hero:not(.page-hero--with-media) .hero-copy {
  width: min(100%, 60rem);
}

.page-hero:not(.page-hero--with-media) h1 {
  max-width: 20ch;
}

.hero-eyebrow {
  margin: 0 0 0.7rem;
  color: var(--text-eyebrow);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.answer-first {
  max-width: var(--measure-lede);
  margin: 1.25rem 0;
  font-size: var(--fs-lede);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-conversion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.72rem 1rem;
  border: 2px solid var(--urgent-bg);
  border-radius: var(--radius-action);
  background: var(--urgent-bg);
  color: var(--urgent-ink);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}

.hero-conversion:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}

.hero-conversion--secondary {
  background: var(--action-secondary-bg);
  border-color: var(--action-bg);
  color: var(--action-secondary-ink);
}

.hero-conversion--secondary:hover {
  background: var(--surface-sunken);
  color: var(--action-secondary-ink);
}

.page-media--hero {
  position: relative;
  min-height: 22rem;
  margin: 0;
  overflow: hidden;
  background: var(--surface-sunken);
}

.page-media--hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-media--hero figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 0.8rem 1rem;
  background: var(--surface-brand);
  color: var(--white);
  font-size: var(--fs-caption);
}

.page-media--hero figcaption .media-disclosure,
.page-media--hero figcaption .media-credit {
  color: var(--pipe-frost);
}

.page-media--hero .media-disclosure {
  display: block;
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Triage board (TriageRow) ────────────────────────────────────────────── */

.triage-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--surface);
}

.triage-board__item {
  padding: 1.4rem;
  border-top: var(--bar-sm) solid var(--line-strong);
}

.triage-board__item + .triage-board__item {
  border-left: 1px solid var(--line);
}

.triage-board__item--1 {
  border-top-color: var(--urgent-bg);
}

.triage-board__item--2 {
  border-top-color: var(--action-bg);
}

.triage-board__item--3 {
  border-top-color: var(--accent);
}

.triage-board__item h2 {
  font-size: var(--fs-h3);
}

.triage-board__item p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

/* ── Service board (SectionHead + ServiceCard grid) ──────────────────────── */

.service-board .section-eyebrow,
.section-eyebrow {
  margin: 0 0 0.7rem;
  color: var(--text-eyebrow);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.service-board > p:not(.section-eyebrow) {
  color: var(--text-muted);
  max-width: var(--measure-lede);
}

.service-board ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.service-route-card {
  position: relative;
  min-height: 11rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar) solid var(--action-bg);
}

.service-route-card:hover {
  background: var(--surface-sunken);
}

.service-route-card h3,
.section-offerings h3,
.family-cards h3 {
  margin: 0;
}

.service-route-card--1 {
  border-top-color: var(--urgent-bg);
}

.service-route-card--3,
.service-route-card--6 {
  border-top-color: var(--accent);
}

.route-code {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-brand);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-route-card--1 .route-code {
  color: var(--urgent-bg);
}

.service-route-card__link {
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  text-decoration: none;
}

.service-route-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-route-card p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

/* ── Content sections — heading rail left, measured copy right ───────────── */

.content-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.content-section h2 {
  grid-column: 1;
  margin-bottom: 1rem;
}

.content-section p {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
}

.content-section .section-offerings {
  grid-column: 1 / -1;
  grid-row: auto;
}

.section-offerings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.section-offerings li {
  position: relative;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar) solid var(--action-bg);
}

.section-offerings li:hover {
  background: var(--surface-sunken);
}

.offering-link {
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  text-decoration: none;
}

.offering-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.section-offerings p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

/* ── Subject and proof plates ────────────────────────────────────────────── */

.subject-card,
.proof-panel,
.article-review {
  max-width: 52rem;
  padding: var(--panel-pad);
  background: var(--surface);
  border-top: var(--bar-md) solid var(--accent);
  box-shadow: var(--shadow-plate-sm);
}

.subject-card--service {
  border-top-color: var(--action-bg);
}

.subject-card h2,
.proof-panel h2,
.article-review h2 {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
}

.proof-panel ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.proof-panel li strong {
  display: block;
  font-family: var(--utility);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-accent);
}

.rating-summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

.proof-panel blockquote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: var(--bar-sm) solid var(--surface-sunken);
  color: var(--text-muted);
}

/* ── Standalone media figures ────────────────────────────────────────────── */

.page-media {
  max-width: 52rem;
  margin: var(--section-y) 0 0;
}

.page-media figcaption {
  padding: 0.8rem 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

/* The hero caption sits on the brand navy plate, so it needs the light
   treatment and its own inset; this rule follows the generic one
   deliberately, because the generic one would otherwise win on order. */
.page-media.page-media--hero figcaption {
  padding: 0.8rem 1rem;
  color: var(--white);
}

.page-media.page-media--hero figcaption .media-disclosure,
.page-media.page-media--hero figcaption .media-credit {
  color: var(--pipe-frost);
}

.page-media .media-disclosure,
.page-media .media-credit {
  font-family: var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Process board (ProcessSteps) ────────────────────────────────────────── */

.process-board ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.process-board ol li {
  padding: 1.5rem;
  border-top: 1px solid var(--line);
}

.process-board ol li span {
  display: block;
  margin-bottom: 1rem;
  color: var(--urgent-bg);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
}

.process-board ol li strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

.process-board ol li p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

/* ── FAQ (FaqItem) ───────────────────────────────────────────────────────── */

.faq-panel {
  max-width: 52rem;
}

.faq-panel h2 {
  margin-bottom: 1.4rem;
}

.faq-panel details {
  margin: 0.7rem 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.faq-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap-min);
  padding: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-panel summary::-webkit-details-marker {
  display: none;
}

.faq-panel summary::after {
  content: "+";
  color: var(--urgent-bg);
  font-family: var(--utility);
  font-weight: 600;
}

.faq-panel details[open] summary::after {
  content: "−";
}

.faq-panel details p {
  padding: 0 1rem 1rem;
  margin: 0;
  color: var(--text-muted);
}

/* ── Related pages ───────────────────────────────────────────────────────── */

.related-label {
  margin: 0 0 0.7rem;
  color: var(--text-muted);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.family-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.family-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-brand);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.family-links a:hover {
  background: var(--surface-sunken);
  color: var(--link-hover);
}

/* ── Conversion close (FinalPanel) ───────────────────────────────────────── */

.final-request-panel,
.conversion-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-areas:
    "eyebrow action"
    "title action";
  column-gap: 2rem;
  align-items: center;
  padding: var(--panel-pad);
  background: var(--panel-bg);
  color: var(--text-strong);
  border-top: var(--bar-lg) solid var(--panel-bar);
}

.final-request-panel .section-eyebrow,
.conversion-panel .section-eyebrow {
  grid-area: eyebrow;
  align-self: end;
}

.final-request-panel h2,
.conversion-panel h2 {
  grid-area: title;
  align-self: start;
  max-width: 18ch;
}

.conversion-link {
  grid-area: action;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.72rem 1.4rem;
  border: 2px solid var(--urgent-bg);
  border-radius: var(--radius-action);
  background: var(--urgent-bg);
  color: var(--urgent-ink);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.conversion-link:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}

/* ── Inactive request blueprint (FormShell + FieldGrid) ──────────────────── */

.inactive-request-blueprint h2 {
  margin-bottom: 0.7rem;
}

.inactive-request-blueprint {
  padding: var(--form-pad);
  background: var(--surface);
  border-top: var(--bar-lg) solid var(--action-bg);
  box-shadow: var(--shadow-plate);
}

.inactive-request-blueprint__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
}

.inactive-request-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.inactive-request-field dt {
  font-weight: 600;
  font-size: var(--fs-small);
}

.inactive-request-field dd {
  margin: 0;
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--white);
  box-shadow: inset 0 2px 0 var(--paper);
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.inactive-request-field dt {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.inactive-request-field__required {
  color: var(--urgent-bg);
  font-weight: 700;
}

.inactive-request-field__hint {
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0.85;
}

.inactive-request-blueprint__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 1.4rem 0 0;
  padding: 0.72rem 1.4rem;
  border: 2px solid var(--line);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
  cursor: not-allowed;
}

.inactive-request-blueprint__note {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The demonstration-context section is required by the safety probe; it
   reads as a quiet note rather than a headline section. */
.content-section--quality {
  display: block;
  max-width: 46rem;
}

.content-section--quality h2 {
  font-size: 1.15rem;
  color: var(--text-muted);
}

.content-section--quality p {
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* ── Footer (SiteFooter — the page's only dark surface) ──────────────────── */

.site-footer {
  margin-top: var(--section-y);
  padding: 2.5rem var(--bleed-gutter);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-top: var(--bar-lg) solid var(--accent);
}

.site-footer .footer-brand {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--text-inverse);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.site-footer .footer-note {
  margin: 1.4rem 0 0;
  color: var(--pipe-frost);
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer address {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.site-footer section {
  margin-top: 1.4rem;
}

.site-footer h2 {
  color: var(--text-inverse);
  font-family: var(--utility);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.site-footer ul {
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--text-inverse);
}

/* ── Not-found page (linkless by contract) ───────────────────────────────── */

.area-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: var(--panel-pad);
  background: var(--surface-brand);
  color: var(--text-inverse);
  border-top: var(--bar-lg) solid var(--valve-red);
}

.area-band .section-eyebrow {
  color: var(--pipe-frost);
}

.area-band h2 {
  color: var(--text-inverse);
  max-width: 18ch;
}

.area-band .section-eyebrow,
.area-band h2 {
  grid-column: 1;
}

.area-band ul {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  border: 2px solid var(--pipe-frost);
  color: var(--text-inverse);
  font-weight: 600;
  text-decoration: none;
}

.area-chip:hover {
  background: var(--municipal-blue);
  color: var(--white);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: var(--section-y);
}

.category-grid .content-section {
  display: block;
  margin-top: 0;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar) solid var(--action-bg);
}

.category-grid .content-section h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.7rem;
}

.category-grid .content-section p {
  color: var(--text-muted);
  margin: 0;
}

.family-cards ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.family-cards li {
  position: relative;
  min-height: 10rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar) solid var(--accent);
}

.family-cards li:hover {
  background: var(--surface-sunken);
}

.family-card__link {
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  text-decoration: none;
}

.family-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.family-cards p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

.not-found main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--form-pad);
}

.not-found-panel {
  max-width: 34rem;
  padding: var(--panel-pad);
  background: var(--surface);
  border-top: var(--bar-lg) solid var(--urgent-bg);
  box-shadow: var(--shadow-plate);
}

.not-found-panel h1 {
  margin-bottom: 1rem;
  line-height: 1.04;
}

.not-found-panel p {
  max-width: 46ch;
}

.not-found-code {
  margin: 0 0 0.7rem;
  color: var(--urgent-bg);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
}

.not-found-hint {
  color: var(--text-muted);
  font-size: var(--fs-small);
}


.footer-nav {
  margin-top: 1.4rem;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.utility-tag {
  margin-right: 1.4rem;
  opacity: 0.9;
}

.not-found-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 1.4rem;
  padding: 0.72rem 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

.site-footer .footer-nav a {
  color: var(--text-inverse);
}

.not-found-home {
  border: 2px solid var(--urgent-bg);
  border-radius: var(--radius-action);
  background: var(--urgent-bg);
  color: var(--urgent-ink);
}

/* ── Per-family accent coding ────────────────────────────────────────────── */

.page-family--home .page-hero {
  border-top-color: var(--action-bg);
}

.page-family--service .page-hero,
.page-family--city-service .page-hero {
  border-top-color: var(--urgent-bg);
}

.page-family--service-hub .page-hero,
.page-family--service-area-hub .page-hero,
.page-family--service-area .page-hero {
  border-top-color: var(--action-bg);
}

.page-family--resource-hub .page-hero,
.page-family--guide .page-hero,
.page-family--reviews .page-hero,
.page-family--faq .page-hero,
.page-family--offers .page-hero,
.page-family--financing .page-hero {
  border-top-color: var(--accent);
}

.page-family--about .page-hero,
.page-family--contact .page-hero {
  border-top-color: var(--line-strong);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* 88rem, not 84rem, and the four extra rem are load-bearing. --hero-pad is
   sized in vw, which counts the scrollbar; the slack it bleeds into is
   (client width - container) / 2, which does not. At 84rem the pad reaches
   its 80px cap while only ~56px of slack exists, so the hero hung 12.5px
   past each edge at 1366x768 — the most common laptop panel — and nothing
   in the seven-viewport ladder was near enough to catch it. At 88rem the
   slack is 96 - scrollbar/2, which clears an 80px pad for any scrollbar up
   to 32px, and slack grows twice as fast as the capped pad from there on.
   Do not lower this without redoing that arithmetic. */
@media (min-width: 88rem) {
  /* Bleed the hero plate outward by its own padding so hero copy lands on
     the same left rail as every section below it. */
  .page-hero {
    margin-inline: calc(-1 * var(--hero-pad));
  }

  .page-hero--with-media .page-media--hero {
    margin-right: 0;
  }
}

@media (max-width: 64rem) {
  .service-board ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-hero--with-media {
    grid-template-columns: 1fr;
  }

  .page-media--hero {
    min-height: 16rem;
  }
}

@media (max-width: 48rem) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-areas: none;
    row-gap: 0.7rem;
  }

  .site-brand-group {
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .desktop-site-nav {
    display: none;
  }

  .site-header nav.desktop-language-nav {
    display: none;
  }

  /* The hero's own action sits a few hundred pixels below this one; two
     identical primary buttons in one viewport read as a mistake. */
  .header-action {
    display: none;
  }

  .mobile-site-menu {
    display: block;
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .mobile-site-menu summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--tap-min);
    padding: 0 0.2rem;
    font-family: var(--utility);
    font-weight: 600;
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-brand);
    cursor: pointer;
    list-style: none;
  }

  .mobile-site-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-site-menu summary::after {
    content: "+";
    margin-left: 0.55rem;
    color: var(--urgent-bg);
  }

  .mobile-site-menu[open] summary::after {
    content: "−";
  }

  .mobile-site-menu__panel {
    border: 1px solid var(--line);
    border-top: var(--bar-sm) solid var(--action-bg);
    background: var(--surface);
  }

  .mobile-site-menu__panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-site-menu__panel li + li {
    border-top: 1px solid var(--line);
  }

  .mobile-site-menu__panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1rem;
    font-weight: 600;
    color: var(--text-strong);
    text-decoration: none;
  }

  .mobile-language-nav {
    border-top: var(--bar-sm) solid var(--accent);
  }

  .page-hero::before {
    display: none;
  }

  .page-hero {
    min-height: 0;
  }

  .hero-copy {
    padding: var(--form-pad);
  }

  .triage-board {
    grid-template-columns: 1fr;
  }

  .triage-board__item + .triage-board__item {
    border-left: none;
    border-top-width: var(--bar-sm);
  }

  .service-board ul,
  .section-offerings,
  .process-board ol {
    grid-template-columns: 1fr;
  }

  .subject-card,
  .proof-panel,
  .article-review,
  .inactive-request-blueprint {
    padding: var(--form-pad);
  }

  .inactive-request-blueprint__fields {
    grid-template-columns: 1fr;
  }

  .final-request-panel,
  .conversion-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "action";
    row-gap: 1rem;
  }

  .conversion-link {
    grid-area: action;
    justify-self: start;
  }

  .content-section {
    display: block;
  }

  .category-grid,
  .family-cards ul {
    grid-template-columns: 1fr;
  }

  .area-band {
    display: block;
    padding: var(--form-pad);
  }

  .area-band ul {
    justify-content: flex-start;
    margin-top: 1.4rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --fs-display: clamp(2.6rem, 11vw, 3.2rem);
    --fs-h2: clamp(1.8rem, 8vw, 2.4rem);
  }

  .utility-band {
    justify-content: flex-start;
  }

  .site-brand {
    font-size: 1.15rem;
  }


  .hero-actions {
    width: 100%;
  }

  .hero-conversion {
    width: 100%;
  }
}

@media (max-width: 23rem) {
  .site-header {
    gap: 0.7rem;
  }

  .breadcrumb-nav li,
  .breadcrumb-nav a {
    min-height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .utility-band,
  .skip-link,
  .mobile-site-menu,
  .header-action,
  .hero-conversion,
  .conversion-link {
    display: none;
  }

  body {
    background: var(--white);
  }

  .page-hero,
  .subject-card,
  .proof-panel,
  .inactive-request-blueprint {
    box-shadow: none;
  }
}