/* ─────────────────────────────────────────────────────────────────────────
   Pure Maintenance Wisconsin — site layer (loaded after site.css on every page).

   Direction: a field lab report. Courtney writes like a scientist (citations,
   spore counts, lab results, "see References"), so her claims are shown as
   evidence: measured ranges, a scale figure, cited sources. Every label inside
   a figure is a fragment of her own sentence; the figures add no new claims.

   One loud moment per page (the spore-scale figure on the homepage, the vapor
   vs wet-fog diagram on remediation); everything else stays quiet.
   ───────────────────────────────────────────────────────────────────────── */

/* Eyebrows: her own section labels, set as plain sentence-case tags.
   The template's tracked capitals + pulsing dot read as generic chrome. */
.eyebrow-pill {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
}
.eyebrow-pill .dot-wrap .ring { display: none; }

/* Headline rhythm for the journal serif */
h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
p { text-wrap: pretty; }

/* ── Two-tier H1: same words, same order as the live H1; the display line
   carries the brand promise, the second line the GBP category + city. ── */
.h1-main { display: block; }
.h1-sub {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-family-sans);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--color-white-text-lead);
}

/* ── Citation line: who says so. Used under any claim Courtney sources. ── */
.cite {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: var(--font-size-body-small);
  color: var(--color-text-tertiary);
}
.cite::before {
  content: "";
  flex: none;
  width: 1.5rem; height: 1px;
  background: currentColor;
  transform: translateY(-0.3em);
}
.cite a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cite a:hover { color: var(--color-text-primary); }
.is-dark .cite { color: var(--color-white-text-muted); }

/* ── Prose column: one measure for all of her paragraphs ── */
.wi-prose { max-width: 40rem; }
.wi-prose p { font-size: var(--font-size-body); line-height: var(--leading-body); color: var(--color-text-body); }
.wi-prose p + p { margin-top: 1rem; }
.wi-prose h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: var(--leading-heading); margin: 0.75rem 0 1rem; }
.is-dark .wi-prose p { color: var(--color-white-text-lead); }
.is-dark .wi-prose h3, .is-dark .wi-split h2 { color: #fff; }

/* ── Split: prose beside a figure or photo ── */
.wi-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.wi-split.is-flipped > :first-child { order: 2; }
.wi-split + .wi-split { margin-top: clamp(4rem, 8vw, 7rem); }
.wi-split h2 { margin: 1rem 0 1.25rem; }
.wi-photo {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-subtle);
}
.wi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wi-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 900px) {
  .wi-split { grid-template-columns: 1fr; }
  .wi-split.is-flipped > :first-child { order: 0; }
}

/* ── THE SIGNATURE: spore scale. A pin head, drawn at "microscope" scale,
   stippled to read as packed with spores; beside it the measured range. ── */
.spore-figure {
  margin: 0;
  display: grid;
  gap: 2rem;
  justify-items: center;
}
.spore-figure svg { width: min(100%, 360px); height: auto; display: block; overflow: visible; }
.spore-figure .pin-shaft { fill: url(#pin-steel); }
.spore-figure .pin-head { fill: url(#pin-steel); stroke: var(--color-brand-primary-800); stroke-width: 1.5; }
.spore-figure .spore-field { fill: url(#spore-dots); }
.spore-figure .leader { stroke: var(--color-text-tertiary); stroke-width: 1; fill: none; }
.spore-figure .leader-label { font: 600 15px var(--font-family-sans); fill: var(--color-text-secondary); }
.spore-figure figcaption {
  max-width: 24rem;
  text-align: center;
  font-family: var(--font-family-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.25;
  color: var(--color-text-primary);
}
.spore-figure figcaption strong { font-weight: 600; color: var(--color-brand-primary-700); }
/* The single orchestrated motion on the homepage: spores settle in when the
   figure scrolls into view (site.js adds .in to .fade-up). */
.spore-figure .spore-field { opacity: 0; transition: opacity 1.6s var(--ease-brand) 0.2s; }
.fade-up.in .spore-figure .spore-field,
.spore-figure.fade-up.in .spore-field { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .spore-figure .spore-field { opacity: 1; transition: none; } }

/* Measured range: 99% → 100%, the band her studies report. Drawn to scale. */
.range-figure { margin: 2.5rem 0 0; }
.range-figure .axis {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--color-surface-subtle-2);
  border: 1px solid var(--color-border-default);
}
.range-figure .band {
  position: absolute; top: -1px; bottom: -1px;
  left: 27%; right: 0.1%;           /* 99.27 → 99.999 on a 99–100 axis */
  border-radius: 7px;
  background: linear-gradient(90deg, var(--color-brand-primary-400), var(--color-brand-primary-700));
}
.range-figure .ticks {
  display: flex; justify-content: space-between;
  margin-top: 0.5rem;
  font-size: var(--font-size-body-small);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.range-figure .ends {
  position: relative; height: 2.6rem; margin-bottom: 0.4rem;
  font-family: var(--font-family-display);
  font-size: 1.6rem; font-weight: 600;
  color: var(--color-brand-primary-800);
  font-variant-numeric: tabular-nums;
}
.range-figure .ends span { position: absolute; bottom: 0; }
.range-figure .ends .lo { left: 27%; transform: translateX(-50%); }
.range-figure .ends .hi { right: 0; }
.range-figure figcaption { margin-top: 0.9rem; font-size: var(--font-size-body-small); color: var(--color-text-secondary); max-width: 34rem; }

/* ── Spot treatment vs whole-home vapor: two house cross-sections ── */
.house-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0; }
.house-compare figure { margin: 0; }
.house-compare svg { width: 100%; height: auto; display: block; }
.house-compare .wall { fill: none; stroke: var(--color-brand-secondary); stroke-width: 3; stroke-linejoin: round; }
.house-compare .floor { stroke: var(--color-brand-secondary); stroke-width: 2; }
.house-compare .spores { fill: url(#house-spores); }
.house-compare .cutout { fill: var(--color-surface-card); stroke: var(--color-accent-gold); stroke-width: 2; stroke-dasharray: 4 3; }
.house-compare .vapor { fill: var(--color-brand-primary-300); opacity: 0.55; }
.house-compare figcaption { margin-top: 0.75rem; font-size: var(--font-size-body-small); line-height: 1.45; color: var(--color-text-secondary); }
.house-compare figcaption b { display: block; margin-bottom: 0.2rem; color: var(--color-text-primary); font-size: 1rem; }
@media (max-width: 480px) { .house-compare { grid-template-columns: 1fr; } }

/* ── One in four: her population figure, shown as four people ── */
.quarter-figure { margin: 2rem 0 0; display: flex; align-items: center; gap: 1.25rem; }
.quarter-figure .people { display: flex; gap: 0.35rem; flex: none; }
.quarter-figure svg { width: 34px; height: 56px; }
.quarter-figure .person { fill: var(--color-white-surface-hi); stroke: var(--color-white-text-muted); stroke-width: 1.5; }
.quarter-figure .person.is-lit { fill: var(--color-brand-primary); stroke: var(--color-brand-primary); }
.quarter-figure figcaption { color: var(--color-white-text-lead); font-size: var(--font-size-body-small); line-height: 1.45; max-width: 22rem; }

/* ── Symptom list: a dense, scannable grid instead of a long bullet run ── */
.symptom-grid {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem;
}
.symptom-grid li {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-white-border);
  border-radius: var(--radius-sm);
  background: var(--color-white-surface-hi);
  color: #fff;
  font-size: 0.95rem; line-height: 1.35;
}

/* ── Services: image cards in her order ── */
.wi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.wi-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-card);
  color: inherit; text-decoration: none;
  transition: border-color var(--duration-standard) var(--ease-out);
}
.wi-card:hover, .wi-card:focus-visible { border-color: var(--color-brand-primary-500); }
.wi-card:focus-visible { outline: 3px solid var(--color-brand-primary-700); outline-offset: 3px; }
.wi-card .photo { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-surface-subtle); }
/* Absolute so the image's intrinsic height can't stretch the flex item past its ratio. */
.wi-card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wi-card .body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.wi-card h3 { font-size: 1.5rem; line-height: 1.2; }
.wi-card p { color: var(--color-text-secondary); font-size: 1rem; line-height: 1.55; }
.wi-card .more { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--color-brand-primary-700); }
.wi-card .more .ic { width: 16px; height: 16px; }
.wi-card .meta { font-size: 0.875rem; color: var(--color-text-tertiary); }
@media (max-width: 980px) { .wi-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .wi-cards { grid-template-columns: 1fr; } }

/* ── Proof pair: "The only system proven to work" + "Very safe" ── */
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); overflow: hidden; margin-top: 2.5rem; }
.proof-pair > div { background: var(--color-surface-card); padding: clamp(1.5rem, 3vw, 2.5rem); }
.proof-pair h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); margin: 0.75rem 0; }
.proof-pair p { color: var(--color-text-body); line-height: var(--leading-body); }
.proof-pair .tag { font-size: 0.875rem; font-weight: 600; color: var(--color-brand-primary-700); }
@media (max-width: 760px) { .proof-pair { grid-template-columns: 1fr; } }

/* ── Warranty: present, in her words, but deliberately quiet (Courtney,
   28 Sep 2026: "go a little easier on marketing the warranty"). ── */
.warranty-note {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start;
  max-width: 52rem; margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-brand-primary-400);
  background: var(--color-surface-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.warranty-note .ic { width: 22px; height: 22px; color: var(--color-brand-primary-700); margin-top: 0.15rem; }
.warranty-note h2 { font-size: 1.15rem; font-family: var(--font-family-sans); font-weight: 700; letter-spacing: 0; margin-bottom: 0.35rem; }
.warranty-note p { font-size: 1rem; line-height: 1.55; color: var(--color-text-secondary); }

/* ── Service area: her city list, set as a plain index ── */
.city-index { list-style: none; margin: 1.5rem 0 0; padding: 0; columns: 2; column-gap: 2rem; }
.city-index li { padding: 0.45rem 0; border-bottom: 1px solid var(--color-border-subtle); break-inside: avoid; }
.city-index a { color: var(--color-brand-primary-700); font-weight: 600; }
.wi-map { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--color-border-default); }
.wi-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Rating line under the reviews heading ── */
.rating-line { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem; color: var(--color-text-secondary); }
.rating-line .stars { display: inline-flex; gap: 2px; color: var(--color-accent-gold); }
.rating-line .stars .ic { width: 18px; height: 18px; }

/* ── Form reassurance line (ClickUp 86e11huh3 wording) ── */
.form-privacy { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.45; color: var(--color-white-text-muted); }
.form-privacy.on-light { color: var(--color-text-tertiary); }

/* Quiet band: the warranty note sits in a short section, not a full one. */
.svc-section.wi-quiet { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

/* "Very safe" sub-note under the Tested copy */
.safe-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-default); }
.safe-note .tag, .proof-pair .tag { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-brand-primary-700); }

/* Quote card label: sentence case like every other label on this site. */
.b-closing-card .label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; }

/* ═══ /services/mold-remediation ═══════════════════════════════════════ */

/* Zoomed range: this page's figure is 99.9%–99.999%, shown on a 99.8–100 axis
   (ticks printed) so the band is legible without distorting the numbers. */
.range-figure.is-zoomed .band { left: 50%; right: 0.5%; }
.range-figure.is-zoomed .ends .lo { left: 50%; }

/* Benefit quartet: Effective / Affordable / Fast & less invasive / Long-term */
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); overflow: hidden; margin-top: 3rem; }
.benefits > div { background: var(--color-surface-card); padding: clamp(1.5rem, 3vw, 2.25rem); }
.benefits h3 { font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); margin: 0.5rem 0 0.75rem; }
.benefits p { color: var(--color-text-body); line-height: var(--leading-body); }
.benefits .ic { width: 26px; height: 26px; color: var(--color-brand-primary-700); }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }

/* Time comparison: weeks vs under 24 hours, as two bars */
.time-bars { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.time-bars .row { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 0.75rem; font-size: var(--font-size-body-small); color: var(--color-text-secondary); }
.time-bars .track { height: 12px; border-radius: 6px; background: var(--color-surface-subtle-2); overflow: hidden; }
.time-bars .fill { display: block; height: 100%; border-radius: 6px; }
.time-bars .is-old .fill { width: 100%; background: var(--color-text-tertiary); }
.time-bars .is-ours .fill { width: 8%; background: var(--color-brand-primary-700); }
@media (max-width: 480px) { .time-bars .row { grid-template-columns: 1fr; gap: 0.35rem; } }

/* Video frame */
.wi-video { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-brand-secondary); }
.wi-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Approach strip: four steps with photos (a real sequence, so numbered) */
.approach { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; counter-reset: step; }
.approach li { display: flex; flex-direction: column; gap: 0.75rem; }
.approach .photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-subtle); }
.approach .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.approach .step { font-size: 0.875rem; font-weight: 700; color: var(--color-brand-primary-700); font-variant-numeric: tabular-nums; }
.approach h3 { font-size: 1.3rem; line-height: 1.25; }
.approach p { font-size: 0.975rem; line-height: 1.55; color: var(--color-text-secondary); }
@media (max-width: 1080px) { .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .approach { grid-template-columns: 1fr; } }

/* THE SIGNATURE on this page: vapor vs wet fog, the same room twice */
.fog-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3rem; }
.fog-compare figure { margin: 0; }
.fog-compare svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); background: var(--color-surface-card); border: 1px solid var(--color-border-default); }
.fog-compare .room { fill: none; stroke: var(--color-brand-secondary); stroke-width: 3; stroke-linejoin: round; }
.fog-compare .cavity { fill: var(--color-surface-subtle-2); stroke: var(--color-brand-secondary); stroke-width: 1.5; }
.fog-compare .furniture { fill: var(--color-surface-subtle-2); stroke: var(--color-text-tertiary); stroke-width: 1.5; }
.fog-compare .vp { fill: var(--color-brand-primary-500); }
.fog-compare .drop { fill: var(--color-brand-primary-400); opacity: 0.85; }
.fog-compare .puddle { fill: var(--color-brand-primary-400); opacity: 0.45; }
.fog-compare .spore { fill: #4a3b21; }
.fog-compare .bounce { fill: none; stroke: var(--color-brand-primary-700); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fog-compare .fall { stroke: var(--color-brand-primary-400); stroke-width: 1.2; }
.fog-compare h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); margin: 1.25rem 0 0.6rem; }
.fog-compare p { line-height: var(--leading-body); color: var(--color-text-body); }
.fog-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; font-size: var(--font-size-body-small); color: var(--color-text-secondary); }
.fog-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.fog-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.fog-key .k-vp { background: var(--color-brand-primary-500); width: 6px; height: 6px; }
.fog-key .k-drop { background: var(--color-brand-primary-400); }
.fog-key .k-spore { background: #4a3b21; width: 6px; height: 6px; }
@media (max-width: 820px) { .fog-compare { grid-template-columns: 1fr; } }

/* Detailed 4-step process: numbered rail, each step a band */
.stepper { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: clamp(3rem, 6vw, 5rem); }
.stepper > li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.5rem; }
.stepper .num { font-family: var(--font-family-display); font-size: 2.75rem; line-height: 1; color: var(--color-brand-primary-400); font-variant-numeric: tabular-nums; border-top: 2px solid var(--color-brand-primary-400); padding-top: 0.75rem; }
.stepper .num small { display: block; font-family: var(--font-family-sans); font-size: 0.8rem; font-weight: 700; color: var(--color-text-tertiary); margin-bottom: 0.35rem; }
.stepper h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.15; margin-bottom: 0.75rem; }
.stepper .lede { font-size: var(--font-size-lead); color: var(--color-text-secondary); line-height: 1.5; max-width: 44rem; }
.stepper .parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.stepper .part { border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 1.25rem 1.4rem; background: var(--color-surface-card); }
.stepper .part .kicker { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-brand-primary-700); margin-bottom: 0.3rem; }
.stepper .part h4 { font-family: var(--font-family-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 0.5rem; color: var(--color-text-primary); }
.stepper .part p { font-size: 1rem; line-height: 1.6; color: var(--color-text-body); }
.stepper .part p + p { margin-top: 0.75rem; }
.stepper .part.is-photo { padding: 0; overflow: hidden; position: relative; min-height: 14rem; }
.stepper .part.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stepper .part.is-icon img { width: 56px; height: 56px; margin-bottom: 0.75rem; }
@media (max-width: 820px) {
  .stepper > li { grid-template-columns: 1fr; gap: 0.75rem; }
  .stepper .num { width: 4.5rem; }
  .stepper .parts { grid-template-columns: 1fr; }
}

/* Studies: two documents with a source line each */
.study-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.study-doc { display: grid; grid-template-columns: 88px 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.study-doc .mark { width: 88px; height: 88px; object-fit: contain; }
.study-doc .mark.is-doc { display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-brand-primary-100); color: var(--color-brand-primary-700); }
.study-doc .mark.is-doc .ic { width: 36px; height: 36px; }
.study-doc h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.5rem; }
.study-doc p { color: var(--color-text-secondary); line-height: 1.55; }
.study-doc a.read { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.9rem; font-weight: 700; color: var(--color-brand-primary-700); }
.study-doc a.read .ic { width: 16px; height: 16px; }
.study-doc .note { display: block; font-size: 0.85rem; color: var(--color-text-tertiary); margin-top: 0.2rem; }
@media (max-width: 820px) { .study-docs { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .study-doc { grid-template-columns: 1fr; } }
.fog-compare .cavity.cavity-open { fill: none; }

/* Photo hero (service pages without a video): the template's video slot holds an <img>. */
.wi-hero-photo img.svc-hero-video { object-fit: cover; }

/* Visible breadcrumb above a page H1 */
.wi-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.9rem; margin-bottom: 1.25rem; color: var(--color-text-tertiary); }
.wi-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wi-crumbs.on-dark { color: var(--color-white-text-muted); justify-content: center; }
.wi-crumbs.on-dark a:hover { color: #fff; }
.stepper .parts { align-items: start; }
.stepper .parts.has-photo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stepper .part.is-photo { align-self: stretch; }
.stepper .warranty-note { margin: 1.25rem 0 0; }
@media (max-width: 1080px) { .stepper .parts.has-photo-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stepper .parts.has-photo-3 .is-photo { grid-column: 1 / -1; min-height: 16rem; } }
@media (max-width: 820px) { .stepper .parts.has-photo-3 { grid-template-columns: 1fr; } }

/* ── FAQs: native <details> accordion (shared: /info-hub/faqs + geo pages) ── */
.wi-faq { max-width: 52rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.wi-faq details { border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.wi-faq details[open] { border-color: var(--color-brand-primary-300); }
.wi-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; min-height: 44px; }
.wi-faq summary::-webkit-details-marker { display: none; }
.wi-faq summary h2, .wi-faq summary h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; margin: 0; letter-spacing: 0; }
.wi-faq summary .ic { width: 20px; height: 20px; flex: none; color: var(--color-brand-primary-700); transition: transform var(--duration-standard, 0.25s) ease; }
.wi-faq details[open] summary .ic { transform: rotate(180deg); }
.wi-faq summary:focus-visible { outline: 3px solid var(--color-brand-primary-700); outline-offset: 3px; border-radius: var(--radius-card); }
.wi-faq .answer { padding: 0 1.5rem 1.5rem; }
.wi-faq .answer p { font-size: 1.0625rem; line-height: var(--leading-body); color: var(--color-text-body); }
.wi-faq .answer p + p { margin-top: 1rem; }
.wi-faq .answer ul { margin-top: 0.75rem; }

/* ── Geo/service prose helpers ── */
.wi-checks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.wi-checks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; align-items: start; line-height: 1.55; color: var(--color-text-body); }
.wi-checks li .ic { width: 18px; height: 18px; margin-top: 0.2rem; color: var(--color-brand-primary-700); }
.is-dark .wi-checks li { color: var(--color-white-text-lead); }
.wi-prose .wi-faq { margin: 1.5rem 0 0; }
.wi-prose ul.city-index { margin-bottom: 1rem; }
.wi-backlink { display: flex; align-items: center; gap: 0.5rem; max-width: 52rem; margin: 0 auto; padding: 1.25rem 1.5rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-surface-card); font-weight: 600; }
.wi-backlink a { color: var(--color-brand-primary-700); }
.wi-backlink .ic { width: 18px; height: 18px; color: var(--color-brand-primary-700); transform: rotate(180deg); }
.wi-intro-lead { max-width: 46rem; margin: 1.25rem auto 0; }
.wi-intro-lead p { font-size: var(--font-size-lead); line-height: 1.55; color: var(--color-text-secondary); }
.wi-intro-lead p + p { margin-top: 0.9rem; }
.wi-card.is-static { cursor: default; }

/* Rail: heading in a left column, prose in a reading column (sections with no photo) */
.wi-rail { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.wi-rail-head { position: sticky; top: calc(var(--nav-height, 96px) + 1.5rem); }
.wi-rail-head h2 { margin-top: 0.75rem; }
.wi-rail .wi-prose { max-width: 44rem; }
.wi-rail .wi-prose > h3:first-child { margin-top: 0; }
.wi-split .wi-prose h2 + p, .wi-rail .wi-prose > p:first-child { margin-top: 0; }
.wi-prose h2 + p { margin-top: 1.25rem; }
@media (max-width: 900px) { .wi-rail { grid-template-columns: 1fr; gap: 1.25rem; } .wi-rail-head { position: static; } }

/* ✗ items in before/after lists (LP "Before our treatment" column) */
.wi-checks li.is-neg .ic { color: #a3402b; }

/* Lead form block on the Ads landing pages */
.wi-lp-form { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }


/* Shared nav carries both logo variants; a solid (non-overlay) nav shows only the dark one. */
.nav-wrap:not(.nav-overlay) .nav-logo .logo-light { display: none; }
.nav-wrap:not(.nav-overlay) .nav-logo .logo-dark { display: block; }

/* Photo heroes with a breadcrumb + long H1 (Ads LPs): keep content clear of the overlay nav. */
.wi-hero-photo .svc-hero-inner { padding-top: calc(var(--nav-height, 96px) + 2.5rem); }
/* Hero bullet list (Ads LP hero ✓ lines) */
.svc-hero-stack .wi-checks { display: inline-grid; text-align: left; margin: 1.5rem auto 0; color: #fff; }
.svc-hero-stack .wi-checks li { color: var(--color-white-text-lead); }
.svc-hero-stack .wi-checks li .ic { color: var(--color-brand-primary); }
/* Solid (non-overlay) nav: the outline CTA uses its on-light colors (template only styled the overlay case). */
.nav-wrap:not(.nav-overlay) .btn.nav-cta-outline { border-color: var(--color-brand-primary); color: var(--color-brand-primary-700); }
.nav-wrap:not(.nav-overlay) .btn.nav-cta-outline:hover { background: rgba(10,37,65,0.08); border-color: var(--color-brand-primary); color: var(--color-brand-primary-700); }