/* ─────────────────────────────────────────────────────────────────────────
   Pure Maintenance Wisconsin — utility pages layer (about-us, references,
   faqs, contact, quote form, thank-you, terms, reviews, 404).
   Loaded after wi.css. Same field-lab-report direction: her sentences stay
   intact; documents are shown as documents, sources as source lines.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Page head: breadcrumb, her own label, the live H1, her intro ── */
.wi-pagehead { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.wi-pagehead .wi-prose { max-width: 46rem; }
.wi-pagehead h1 { font-size: clamp(2.25rem, 3.5vw + 0.75rem, 3.6rem); line-height: 1.08; margin: 1.25rem 0 1.25rem; }
.wi-pagehead .t-lead { color: var(--color-text-secondary); max-width: 44rem; }
.wi-pagehead.is-center { text-align: center; }
.wi-pagehead.is-center .wi-prose, .wi-pagehead.is-center .t-lead { margin-inline: auto; }
.wi-pagehead.is-center .wi-crumbs { justify-content: center; }

.wi-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: var(--font-size-body-small); color: var(--color-text-tertiary); }
.wi-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.wi-crumbs li + li::before { content: "/"; color: var(--color-border-default); }
.wi-crumbs a { display: inline-block; padding: 0.5rem 0; color: var(--color-text-secondary); text-decoration: underline; text-decoration-color: var(--color-border-default); text-underline-offset: 3px; }
.wi-crumbs a:hover { color: var(--color-brand-primary-700); }
.wi-crumbs [aria-current] { color: var(--color-text-primary); font-weight: 600; }

/* Long-form body column for her prose */
.wi-longform { max-width: 46rem; margin-inline: auto; }
.wi-longform p { font-size: var(--font-size-body); line-height: var(--leading-body); color: var(--color-text-body); }
.wi-longform p + p { margin-top: 1.1rem; }
.wi-longform a { color: var(--color-brand-primary-700); text-decoration: underline; text-underline-offset: 3px; }

/* ── About: the team photo, full width, as the page's one big image ── */
.team-figure { margin: 0; }
.team-figure img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; border-radius: var(--radius-card-lg); }
.team-figure figcaption { margin-top: 0.85rem; font-size: var(--font-size-body-small); color: var(--color-text-tertiary); }

/* Her story is a real sequence of events, so it reads down a rail. Each
   marker label is a fragment of the paragraph beside it. */
.story-rail { list-style: none; margin: 0 auto; padding: 0; max-width: 50rem; display: grid; gap: 0; }
.story-rail > li { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; padding: 0 0 2.75rem; }
.story-rail > li:last-child { padding-bottom: 0; }
.story-rail > li::before { content: ""; position: absolute; left: calc(11rem + 1rem); top: 0.55rem; bottom: 0; width: 1px; background: var(--color-border-default); }
.story-rail > li:last-child::before { display: none; }
.story-rail .mark { position: relative; padding-top: 0.15rem; font-family: var(--font-family-display); font-size: 1.15rem; line-height: 1.3; color: var(--color-brand-primary-800); text-align: right; text-wrap: balance; }
.story-rail .mark::after { content: ""; position: absolute; right: -1.32rem; top: 0.45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand-primary-500); box-shadow: 0 0 0 4px var(--color-surface-app); }
.story-rail p { font-size: var(--font-size-body); line-height: var(--leading-body); color: var(--color-text-body); }
.svc-alt .story-rail .mark::after { box-shadow: 0 0 0 4px var(--color-surface-subtle); }
@media (max-width: 720px) {
  .story-rail > li { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 1.5rem; }
  .story-rail > li::before { left: 0.25rem; }
  .story-rail .mark { text-align: left; }
  .story-rail .mark::after { right: auto; left: -1.5rem; }
}

/* Background facts beside her paragraph: fragments of her own sentences */
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--color-border-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); overflow: hidden; }
.fact-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; padding: 1.4rem 1.5rem; background: var(--color-surface-card); font-size: 1.05rem; line-height: 1.45; color: var(--color-text-primary); }
.fact-list .ic { width: 26px; height: 26px; color: var(--color-brand-primary-700); margin-top: 0.1rem; }

/* Credentials: the CMRC certificate shown large enough to read, the seals beside it */
.creds-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.cert-figure { margin: 0; }
.cert-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.35); }
.cert-figure figcaption { margin-top: 0.85rem; font-size: var(--font-size-body-small); color: var(--color-text-secondary); }
.creds-feature .creds-grid { justify-content: flex-start; }
.creds-feature .creds-grid li { flex: 0 1 calc(50% - 0.75rem); }
@media (max-width: 900px) {
  .creds-feature { grid-template-columns: 1fr; }
  .creds-feature .creds-grid { justify-content: center; }
}
@media (max-width: 640px) {
  .creds-feature .creds-grid li, .creds-feature .creds-grid li:nth-last-child(-n+2) { flex: 0 0 calc(50% - 0.375rem); }
}

/* ── References: an evidence library, one record per document ── */
.ev-lib { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.ev-card { display: grid; grid-template-columns: 260px minmax(0, 1fr) 15rem; gap: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); overflow: hidden; }
.ev-photo { position: relative; margin: 0; min-height: 100%; background: var(--color-surface-subtle); }
.ev-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-body { padding: clamp(1.5rem, 2.5vw, 2rem); }
.ev-kind { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--color-brand-primary-700); }
.ev-kind .ic { width: 16px; height: 16px; }
.ev-body h2 { font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.2; margin: 0.6rem 0 0.9rem; }
.ev-body p { font-size: 1rem; line-height: 1.65; color: var(--color-text-body); }
.ev-body p + p { margin-top: 0.75rem; }
.ev-body .tested { color: var(--color-text-secondary); }
.ev-aside { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.5vw, 2rem); border-left: 1px solid var(--color-border-subtle); background: var(--color-surface-subtle); }
.ev-stat { display: block; }
.ev-stat .num { display: block; font-family: var(--font-family-display); font-size: 2rem; font-weight: 600; line-height: 1.05; color: var(--color-brand-primary-800); font-variant-numeric: tabular-nums; }
.ev-stat .lbl { display: block; margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.4; color: var(--color-text-secondary); }
.ev-aside .cite { margin-top: auto; }
.ev-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--color-brand-primary-700); text-decoration: underline; text-decoration-color: var(--color-border-brand-30); text-underline-offset: 4px; padding: 0.35rem 0; }
.ev-link:hover { color: var(--color-brand-primary-800); text-decoration-color: currentColor; }
.ev-link .ic { width: 16px; height: 16px; flex: none; }
/* USACE: two buildings, measured indoors against the outdoor rise */
.bldg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.1rem; }
.bldg-pair > div { padding: 0.9rem 1rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-app); }
.bldg-pair b { display: block; font-size: 0.875rem; color: var(--color-text-secondary); font-weight: 600; }
.bldg-pair .in { display: block; margin-top: 0.25rem; font-family: var(--font-family-display); font-size: 1.5rem; font-weight: 600; color: var(--color-brand-primary-800); font-variant-numeric: tabular-nums; }
.bldg-pair .out { display: block; margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.4; color: var(--color-text-tertiary); }
@media (max-width: 1100px) {
  .ev-card { grid-template-columns: 220px minmax(0, 1fr); }
  .ev-aside { grid-column: 2; border-left: 0; border-top: 1px solid var(--color-border-subtle); flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; }
  .ev-photo { grid-row: span 2; }
  .ev-aside .cite { margin-top: 0; flex-basis: 100%; }
}
@media (max-width: 720px) {
  .ev-card { grid-template-columns: 1fr; }
  .ev-photo { grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .ev-aside { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .bldg-pair { grid-template-columns: 1fr; }
}

/* .wi-faq core accordion moved to wi.css (shared with geo pages). */
.wi-faq .answer p + p, .wi-faq .answer p + ol, .wi-faq .answer ol + p, .wi-faq .answer p + .warranty-table, .wi-faq .answer .warranty-table + p { margin-top: 1rem; }
.wi-faq .answer a { color: var(--color-brand-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.wi-faq .answer .label { font-weight: 700; color: var(--color-text-primary); }
.method-steps { list-style: none; margin: 0; padding: 0; counter-reset: m; display: grid; gap: 0.6rem; }
.method-steps li { counter-increment: m; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: start; font-size: 1rem; line-height: 1.55; color: var(--color-text-body); }
.method-steps li::before { content: counter(m); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-surface-subtle); color: var(--color-brand-primary-700); font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
/* Warranty schedule: plain table, deliberately quiet (Courtney, 28 Sep 2026) */
.warranty-table { width: 100%; max-width: 32rem; border-collapse: collapse; font-size: 0.975rem; }
.warranty-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-body); vertical-align: top; }
.warranty-table td:first-child { white-space: nowrap; color: var(--color-text-secondary); padding-left: 0; }
/* Terms embedded in an answer: smaller, bounded */
.legal-embed { margin-top: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-app); }
.wi-faq .legal-embed p { font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); }
.wi-faq .legal-embed p + p { margin-top: 0.7rem; }
.wi-faq .legal-embed .legal-title { font-weight: 700; color: var(--color-text-primary); }
.faq-more { max-width: 52rem; margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--radius-card); background: var(--color-surface-subtle); }
.faq-more h2 { font-size: 1.35rem; margin: 0 0 0.25rem; }
.faq-more p { color: var(--color-text-secondary); }

/* ── Contact: three ways in, beside the map ── */
.contact-ways-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--color-border-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); overflow: hidden; }
.contact-ways-list li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; background: var(--color-surface-card); }
.contact-ways-list .ic { width: 22px; height: 22px; color: var(--color-brand-primary-700); justify-self: center; }
.contact-ways-list .k { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-text-tertiary); }
.contact-ways-list a, .contact-ways-list .v { display: inline-block; font-size: 1.15rem; font-weight: 600; color: var(--color-text-primary); padding: 0.15rem 0; overflow-wrap: anywhere; }
.contact-ways-list a:hover { color: var(--color-brand-primary-700); }

/* ── Quote form ── */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.quote-card { background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-radius: var(--radius-card-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.quote-form .full { grid-column: 1 / -1; }
.quote-form .field { display: flex; flex-direction: column; gap: 0.4rem; }
.quote-form label { font-size: 0.95rem; font-weight: 600; color: var(--color-text-primary); }
.quote-form .req { margin-left: 2px; }
.quote-form input[type="text"], .quote-form input[type="tel"], .quote-form input[type="email"], .quote-form select, .quote-form textarea {
  font: inherit; font-size: 1rem; color: var(--color-text-primary);
  background: var(--color-surface-app); border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  padding: 0.8rem 1rem; min-height: 48px; width: 100%;
}
.quote-form textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: var(--color-text-tertiary); }
.quote-form input:focus-visible, .quote-form select:focus-visible, .quote-form textarea:focus-visible { outline: 3px solid var(--color-brand-primary-500); outline-offset: 2px; border-color: var(--color-brand-primary-700); background: #fff; }
.quote-form select {
  appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px 16px;
}
.quote-form select:has(option[value=""]:checked) { color: var(--color-text-tertiary); }
.quote-form .is-hidden { display: none; }
.quote-form .consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.5; color: var(--color-text-body); font-weight: 400; }
.quote-form .consent input { width: 24px; height: 24px; margin-top: 1px; flex: none; accent-color: var(--color-brand-primary); }
.quote-form .form-submit { width: 100%; justify-content: center; }
.quote-form .form-privacy { margin-top: 0; }
.quote-legal { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-text-secondary); }
.quote-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.quote-reassure { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); }
.quote-reassure .ic { width: 18px; height: 18px; color: var(--color-brand-primary-700); }
.quote-aside { display: grid; gap: 1.25rem; }
.quote-aside .wi-photo { aspect-ratio: 4 / 5; }
.quote-aside .call-card { padding: 1.5rem; border-radius: var(--radius-card); background: var(--color-surface-subtle); }
.quote-aside .call-card .k { display: block; font-size: 0.95rem; color: var(--color-text-secondary); }
.quote-aside .call-card a { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; font-family: var(--font-family-display); font-size: 1.75rem; font-weight: 600; color: var(--color-brand-primary-800); padding: 0.2rem 0; }
.quote-aside .call-card .ic { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-aside { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .quote-aside .wi-photo { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 600px) {
  .quote-form { grid-template-columns: minmax(0, 1fr); }
  .quote-aside { grid-template-columns: 1fr; }
  .quote-aside .wi-photo { aspect-ratio: 4 / 3; }
}

/* ── Thank-you ── */
.thanks-card { max-width: 46rem; margin: 0 auto; text-align: center; }
.thanks-card .tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-surface-subtle); color: var(--color-brand-primary-700); }
.thanks-card .tick .ic { width: 30px; height: 30px; }
.thanks-card .wi-actions { justify-content: center; }

/* ── Legal text ── */
.legal-doc { max-width: 46rem; margin: 0 auto; }
.legal-doc p, .legal-doc li { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-body); }
.legal-doc p + p { margin-top: 0.9rem; }
.legal-doc h2 { font-family: var(--font-family-sans); font-size: 1.2rem; font-weight: 700; letter-spacing: 0; margin: 2.25rem 0 0.75rem; color: var(--color-text-primary); }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc ul { margin: 0.9rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.legal-doc ul + p, .legal-doc p + ul { margin-top: 0.9rem; }
.legal-doc a { color: var(--color-brand-primary-700); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ── Reviews page ── */
.reviews-wall { columns: 3 20rem; column-gap: 1.5rem; }
.reviews-wall .svc-review { break-inside: avoid; margin-bottom: 1.5rem; }
.reviews-wall .svc-review:hover { transform: none; }
.reviews-head .rating-line { flex-wrap: wrap; justify-content: center; }
.reviews-source { margin-top: 1rem; text-align: center; }
.reviews-source a { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--color-brand-primary-700); text-decoration: underline; text-underline-offset: 4px; padding: 0.4rem 0; }
.reviews-source .ic { width: 16px; height: 16px; }

/* ── Spacing helpers used by the utility pages (no inline styles) ── */
.svc-section.flush-top { padding-top: 0; }
.svc-section.snug-top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.wi-pagehead.is-tight { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.wi-pagehead.is-thanks { min-height: 52vh; display: flex; align-items: center; }
.wi-pagehead.is-thanks > .container { width: 100%; }
.wi-actions.is-flush { margin-top: 0; }
.wi-split.is-top { align-items: start; }
.wi-map.is-tall { aspect-ratio: auto; min-height: 30rem; height: 100%; }
@media (max-width: 900px) { .wi-map.is-tall { aspect-ratio: 4 / 3; min-height: 0; height: auto; } }
/* Courtney's own link note under each "Read Paper" link */
.ev-note { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--color-text-tertiary); }