/* Hallmark · macrostructure: Split Studio · tone: utilitarian, blue collar, winter · anchor hue: red 27 (heat) + teal 192 (sealed)
 * theme: custom (vibe: "thermal camera on a house in January") · paper oklch(97.2% .005 235) · accent oklch(54% .215 27)
 * type: system condensed grotesque for display, system UI sans for body, system mono for readouts
 *   (managed funnel port: Archivo and Geist Mono are web fonts, which the theme contract refuses)
 * nav: N5 floating pill · footer: Ft2 inline lines · enrichment: hand built SVG (cavity fill, house section) + AI stills (agency 96)
 * pre-emit critique: P4 H4 E4 S5 R4 V4 · contrast: pass (46–50) · nav: N5 · footer: Ft2 · slop: pass (51–55)
 * honest: pass (56) · chrome: pass (57) · tokens: pass (58) · responsive: pass (59) · icons: pass (60) · mobile: pass (36, 59, 61–69)
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-900); }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-stretch: var(--stretch-body);
  font-size: var(--t-lg);
  line-height: var(--lh-lg);
  font-weight: 400;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p, li, dd, blockquote { text-wrap: pretty; }
h2 { font-size: var(--t-5xl); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h3 { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
strong { font-weight: 600; }
.mono { font-family: var(--f-mono); font-size: var(--t-xs); line-height: var(--lh-xs); letter-spacing: 0.02em; }
.muted { color: var(--c-ink-3); }
.ico { width: 1.1em; height: 1.1em; flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-600); }
.sec { padding-block: var(--s-900); }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.skip {
  position: fixed; left: var(--s-200); top: var(--s-200); z-index: var(--z-skip);
  background: var(--c-ink); color: var(--c-paper); padding: var(--s-75) var(--s-100); border-radius: var(--r-lg);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-75);
  min-height: var(--s-600);
  padding: var(--s-100) var(--s-300);
  border-radius: var(--r-lg);
  background: var(--c-heat); color: var(--c-on-heat);
  font: inherit; font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--c-heat-hover); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn:active { transform: scale(0.98); }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn-sm { min-height: var(--s-500); padding: var(--s-75) var(--s-200); font-size: var(--t-sm); line-height: var(--lh-sm); }
.btn-block { width: 100%; }

.link, .link-strong {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
  white-space: nowrap;
}
.link { display: inline-flex; align-items: center; gap: var(--s-50); }
.link:hover, .link-strong:hover { color: var(--c-heat); }
.link-strong { font-weight: 600; }

/* ---------- nav (floating pill) ---------- */
.nav {
  position: fixed; top: var(--s-200); left: 50%; z-index: var(--z-nav);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-300);
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-300);
  background: var(--c-paper-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--c-rule); border-radius: var(--r-full);
  max-width: calc(100% - var(--s-400));
}
.nav-logo { flex: none; display: block; }
.nav-logo img { width: auto; height: 35px; max-width: 180px; }
.nav-call {
  display: inline-flex; align-items: center; gap: var(--s-75);
  color: var(--c-ink); text-decoration: none; font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.nav-call:hover { color: var(--c-heat); }

/* ---------- hero ---------- */
.hero { padding-top: calc(var(--s-900) + var(--s-600)); padding-bottom: var(--s-900); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-700); align-items: center; }
.eyebrow { font-family: var(--f-mono); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-ink-2); margin-bottom: var(--s-300); display: flex; align-items: center; gap: var(--s-75); }
/* 720px (was 680px): the system condensed face runs about 10% wider than Archivo at 72% width,
   so the attic headline keeps its two lines. */
.hero h1 { font-size: var(--t-7xl); line-height: var(--lh-tight); letter-spacing: -0.015em; max-width: 720px; }
.hero h1 .line { display: block; }
.hero h1 .line + .line { color: var(--c-ink-2); }
.lead { font-size: var(--t-xl); line-height: var(--lh-xl); color: var(--c-ink-2); max-width: 600px; margin-top: var(--s-300); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200) var(--s-300); margin-top: var(--s-500); }
.cta-call { font-size: var(--t-base); line-height: var(--lh-base); color: var(--c-ink-2); white-space: nowrap; }

.art { margin: 0; }
.art-frame { border-radius: var(--r-2xl); overflow: hidden; background: var(--c-art-bg); }
.art-svg { display: block; width: 100%; height: auto; }
.art-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-75) var(--s-200); padding-top: var(--s-100); color: var(--c-ink-2); }
.art-bar .art-replay { justify-self: end; }
.art-bar .art-state { grid-column: 1 / -1; }
.art-state { display: inline-flex; align-items: center; gap: var(--s-75); color: var(--c-ink); }
.art-state .dot { width: var(--s-75); height: var(--s-75); border-radius: var(--r-full); background: var(--c-foam-edge); transition: background-color var(--dur) var(--ease-out); }
.art-state .s-before { display: none; }
.art.armed:not(.sealed) .art-state .dot { background: var(--c-heat); }
.art.armed:not(.sealed) .s-before { display: inline; }
.art.armed:not(.sealed) .s-after { display: none; }
.art-replay {
  display: inline-flex; align-items: center; gap: var(--s-50);
  font: inherit; font-family: var(--f-mono); font-size: var(--t-xs); line-height: var(--lh-xs);
  color: var(--c-ink); background: transparent; border: 1px solid var(--c-rule-strong); border-radius: var(--r-full);
  padding: var(--s-50) var(--s-100); cursor: pointer; min-height: 32px;
  transition: background-color var(--dur-short) var(--ease-out);
}
.art-replay:hover { background: var(--c-paper-2); }
.art-replay:active { transform: scale(0.98); }
html:not(.js) .art-replay { display: none; }

/* signature motion: default state is sealed (no JS, reduced motion). JS arms then plays. */
.art .draft line { stroke: var(--c-draft); stroke-width: 3; stroke-linecap: round; }
.art .draft path { fill: var(--c-draft); }
.art .legend text { font-family: var(--f-mono); font-size: 12px; fill: var(--c-on-night-2); text-anchor: middle; }
.art .drafts { opacity: 0; }
.art.armed .drafts { opacity: 1; }
.art.armed .foam { transform: translateY(540px); }
.art.armed.play .foam { transform: none; transition: transform 1600ms var(--ease-out) calc(700ms + var(--i) * 380ms); }
.art.armed.sealed .drafts { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .art.armed .draft { animation: gust 1300ms var(--ease-out) infinite; animation-delay: calc(var(--d) * 160ms); }
}
@keyframes gust { 0% { transform: translateX(-24px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(28px); opacity: 0; } }

/* ---------- proof strip ---------- */
.proof { border-block: 1px solid var(--c-rule); }
.proof-row { display: flex; flex-wrap: wrap; gap: var(--s-200) var(--s-600); padding-block: var(--s-200); }
.proof-item { display: inline-flex; align-items: center; gap: var(--s-75); font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600; }
.proof-item .ico { color: var(--c-heat); }

/* ---------- problem: house diagram ---------- */
.problem-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-700); align-items: center; }
.problem-copy > p { margin-top: var(--s-300); color: var(--c-ink-2); max-width: 60ch; }
.spots { margin-top: var(--s-500); display: grid; gap: var(--s-75); }
.spot {
  width: 100%; display: grid; grid-template-columns: var(--s-500) minmax(0, 1fr); gap: var(--s-100); align-items: start; text-align: left;
  font: inherit; font-size: var(--t-base); line-height: var(--lh-base); color: var(--c-ink);
  background: transparent; border: 1px solid var(--c-rule); border-radius: var(--r-xl); padding: var(--s-200); cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.spot:hover { background: var(--c-paper-2); }
.spot:active { transform: translateY(1px); }
.spot[aria-pressed="true"] { border-color: var(--c-heat); background: var(--c-paper-2); }
.spot-n, .pin { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--c-ink); color: var(--c-paper); font-family: var(--f-mono); font-size: var(--t-sm); line-height: var(--lh-sm); }
.spot[aria-pressed="true"] .spot-n { background: var(--c-heat); }

.house { margin: 0; }
.house-stage { position: relative; background: var(--c-paper-2); border-radius: var(--r-2xl); padding: var(--s-300); }
.house-svg { width: 100%; height: auto; display: block; }
.house figcaption { margin-top: var(--s-100); }
.hs-line { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-linejoin: round; }
.hs-line .hs-base { fill: var(--c-paper-3); }
.hs-line .hs-door { stroke-dasharray: 6 6; }
.hs-line .hs-ground { stroke-width: 3; }
.hs-snow path { fill: var(--c-paper); }
.hs-rim { fill: var(--c-wood); stroke: var(--c-ink); stroke-width: 1.5; }
.hs-label { font-family: var(--f-mono); font-size: 14px; fill: var(--c-ink-3); text-anchor: middle; }
.hs-heat ellipse { fill: var(--c-heat-2); opacity: 0.5; transform-box: fill-box; transform-origin: center; transition: opacity var(--dur) var(--ease-out); }
.hs-heat ellipse.core { fill: var(--c-heat-3); }
.hs-heat.on ellipse { opacity: 0.95; }
@media (prefers-reduced-motion: no-preference) {
  .hs-heat.on ellipse:first-child { animation: throb 1800ms var(--ease-out) infinite; }
}
@keyframes throb { 0% { transform: scale(0.9); } 60% { transform: scale(1.12); } 100% { transform: scale(0.9); } }
.house-map { position: relative; }
.pin {
  position: absolute; left: var(--x); top: var(--y);
  border: 2px solid var(--c-paper); cursor: pointer; transform: translate(-50%, -50%);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.pin:hover { transform: translate(-50%, -50%) scale(1.08); }
.pin:active { transform: translate(-50%, -50%) scale(0.96); }
.pin[aria-pressed="true"] { background: var(--c-heat); }

/* ---------- fix: compare slider ---------- */
.fix { background: var(--c-paper-2); }
.fix-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-700); align-items: center; }
.fix-copy > p { margin-top: var(--s-300); color: var(--c-ink-2); }
.fix-copy h3 { margin-top: var(--s-500); }
.types { margin-top: var(--s-200); display: grid; gap: var(--s-200); }
.types li { padding-left: var(--s-300); position: relative; font-size: var(--t-base); line-height: var(--lh-base); color: var(--c-ink-2); }
.types li::before { content: ""; position: absolute; left: 0; top: var(--s-75); width: var(--s-100); height: var(--s-100); border-radius: var(--r-sm); background: var(--c-foam); border: 1px solid var(--c-foam-edge); }
.types strong { color: var(--c-ink); }

.compare { margin: 0; }
.compare-stage { --cut: 50%; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-2xl); overflow: hidden; background: var(--c-paper-3); touch-action: pan-y; }
.compare-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-stage .after { clip-path: inset(0 0 0 var(--cut)); }
.compare figcaption { margin-top: var(--s-100); }
.tag { position: absolute; top: var(--s-200); max-width: calc(50% - var(--s-400)); padding: var(--s-50) var(--s-100); border-radius: var(--r-lg); background: var(--c-night-overlay); color: var(--c-on-night); z-index: var(--z-raised); }
.tag-l { left: var(--s-200); }
.tag-r { right: var(--s-200); text-align: right; }
.beam { position: absolute; inset: 0; transform: translateX(var(--cut)); z-index: var(--z-raised); pointer-events: none; }
.beam::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--c-paper); }
.grip { position: absolute; top: 50%; left: 0; width: var(--s-600); height: var(--s-600); transform: translate(-50%, -50%); border-radius: var(--r-full); background: var(--c-paper); color: var(--c-ink); display: grid; place-items: center; }
.grip .ico { width: 22px; height: 22px; }
.compare-stage input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.compare-stage:has(input:focus-visible) .grip { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.objs { margin-top: var(--s-800); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-500); }
.objs-1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.objs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.obj { border-top: 2px solid var(--c-ink); padding-top: var(--s-200); }
.obj dt { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.obj dd { margin-top: var(--s-100); font-size: var(--t-base); line-height: var(--lh-base); color: var(--c-ink-2); }

/* ---------- cost ---------- */
.cost { padding-block: var(--s-800); }
.cost-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-700); align-items: start; }
.cost-grid > div > p { margin-top: var(--s-300); color: var(--c-ink-2); max-width: 46ch; }
.cost-list { counter-reset: c; border-top: 1px solid var(--c-rule); }
.cost-list li { counter-increment: c; display: grid; grid-template-columns: var(--s-600) minmax(0, 1fr); gap: var(--s-200); padding-block: var(--s-200); border-bottom: 1px solid var(--c-rule); font-size: var(--t-xl); line-height: var(--lh-xl); }
.cost-list li::before { content: counter(c, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-sm); line-height: var(--lh-xl); color: var(--c-heat); }
.cost-close { margin-top: var(--s-400); color: var(--c-ink-2); }

/* ---------- tagline reveal ---------- */
.tagline { background: var(--c-night); color: var(--c-on-night); padding-block: var(--s-900) calc(var(--s-900) + var(--s-400)); }
.tl { overflow-wrap: anywhere; min-width: 0; font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-6xl); line-height: var(--lh-tight); letter-spacing: -0.015em; max-width: 900px; }
.tl-line { display: block; }
.tl-line + .tl-line { margin-top: var(--s-100); }
html.js .tl .w { color: var(--c-on-night-dim); transition: color 600ms var(--ease-out); }
html.js .tl .w.on { color: var(--c-on-night); }
html.js .tl .tl-line:last-child .w.on { color: var(--c-foam); }

/* ---------- benefits ---------- */
.ben-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-700); align-items: start; }
.ben-head { position: sticky; top: var(--s-900); }
.ben-head .photo { margin-top: var(--s-500); }
.photo img { border-radius: var(--r-2xl); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo figcaption { margin-top: var(--s-100); }
.ben-list li { display: grid; gap: var(--s-75); padding-block: var(--s-400); border-bottom: 1px solid var(--c-rule); }
.ben-list li:first-child { border-top: 1px solid var(--c-rule); }
.ben-list strong { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.ben-list span { color: var(--c-ink-2); max-width: 56ch; }

/* ---------- where we spray ---------- */
.work { background: var(--c-paper-2); }
.sec-head { display: grid; gap: var(--s-200); margin-bottom: var(--s-600); max-width: 760px; }
.sec-head p { color: var(--c-ink-2); display: flex; align-items: center; gap: var(--s-75); }
.work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-500); border-top: 1px solid var(--c-rule-strong); }
/* 4 items in 3 columns leaves one alone on row 2; use 2 x 2 instead */
.work-list[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-list li { padding-block: var(--s-200); border-bottom: 1px solid var(--c-rule); font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.work-photos { margin-top: var(--s-600); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-200); }
.work-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2xl); }
.work-photos[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.work-photos[data-count="1"] img { aspect-ratio: 21 / 9; }
.work-photos[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- steps ---------- */
.steps { padding-block: var(--s-800); }
.step-list { margin-top: var(--s-600); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-400); position: relative; }
.step-list::before { content: ""; position: absolute; top: calc(var(--s-500) / 2); left: calc(var(--s-500) / 2); right: calc(var(--s-500) / 2); height: 2px; background: var(--c-rule-strong); }
.step-list li { position: relative; display: grid; gap: var(--s-100); align-content: start; }
.step-n { width: var(--s-500); height: var(--s-500); border-radius: var(--r-full); display: grid; place-items: center; background: var(--c-paper); border: 2px solid var(--c-ink); font-size: var(--t-sm); line-height: var(--lh-sm); position: relative; margin-bottom: var(--s-200); }
.step-list li:last-child .step-n { background: var(--c-foam); border-color: var(--c-foam-ink); }
.step-list strong { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.step-list span:not(.step-n) { color: var(--c-ink-2); font-size: var(--t-base); line-height: var(--lh-base); }

/* ---------- reviews ---------- */
.reviews { background: var(--c-paper-2); }
.reviews .star { color: var(--c-heat); }
.rv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-200); margin-bottom: var(--s-400); }
.rv { grid-column: span 3; display: flex; flex-direction: column; gap: var(--s-200); padding: var(--s-300); background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--r-2xl); }
.rv-lead { grid-row: span 2; justify-content: space-between; }
.rv-job { color: var(--c-foam-ink); }
.rv blockquote { font-size: var(--t-lg); line-height: var(--lh-lg); }
.rv-lead blockquote { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 600; font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.rv-by { font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); margin-top: auto; }
.rv-by .muted { font-weight: 400; font-family: var(--f-mono); font-size: var(--t-xs); margin-left: var(--s-75); }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-700); align-items: center; }
.about-grid > div > p { margin-top: var(--s-300); color: var(--c-ink-2); max-width: 56ch; }
.founders { margin-top: var(--s-500); }
.founders blockquote { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 600; font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.founders figcaption { margin-top: var(--s-100); }

/* ---------- faq ---------- */
.faq { padding-block: var(--s-800); border-top: 1px solid var(--c-rule); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-700); }
.faq-list details { border-bottom: 1px solid var(--c-rule); }
.faq-list details:first-child { border-top: 1px solid var(--c-rule); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-300);
  padding-block: var(--s-300); font-weight: 600; font-size: var(--t-xl); line-height: var(--lh-xl);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ico { width: 22px; height: 22px; transition: transform var(--dur) var(--ease-out); }
.faq-list details[open] summary .ico { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--c-heat); }
.faq-list summary:active { transform: translateY(1px); }
.faq-list details p { padding-bottom: var(--s-300); color: var(--c-ink-2); max-width: 64ch; }

/* ---------- estimate form ---------- */
.estimate { background: var(--c-paper-2); }
.form-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-700); align-items: start; }
.form-card { background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--r-2xl); padding: var(--s-500); }
.form-card h2 { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
.muted-ink { margin-top: var(--s-100); color: var(--c-ink-2); }
form { margin-top: var(--s-400); display: grid; gap: var(--s-300); }
.field { display: grid; gap: var(--s-75); }
label { font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); }
label .muted { font-weight: 400; }
input, select, textarea {
  font: inherit; font-size: var(--t-base); line-height: var(--lh-base); color: var(--c-ink);
  width: 100%; padding: var(--s-100); min-height: var(--s-600);
  background: var(--c-paper); border: 1px solid var(--c-rule-strong); border-radius: var(--r-lg);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
input:hover, select:hover, textarea:hover { border-color: var(--c-ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-ink); }
textarea { resize: vertical; min-height: 96px; }
::placeholder { color: var(--c-ink-3); }
.help { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-ink-3); }
.err { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-error); font-weight: 600; }
.field .err { min-height: var(--lh-sm); }
.err-send:empty { display: none; }
.field.invalid input { border-color: var(--c-error); background: var(--c-error-bg); }
.consent { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-ink-3); }
.thanks { padding-top: var(--s-400); }
.thanks h3 { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.thanks p { margin-top: var(--s-200); color: var(--c-ink-2); }
.thanks:focus { outline: none; }
.offer { padding-top: var(--s-200); }
.offer h3 { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.offer ul { margin-top: var(--s-200); display: grid; gap: var(--s-100); color: var(--c-ink-2); }
.offer-call { margin-top: var(--s-500); color: var(--c-ink-2); font-size: var(--t-base); line-height: var(--lh-base); }
.big-tel { display: inline-block; margin-top: var(--s-75); font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-5xl); line-height: var(--lh-tight); color: var(--c-ink); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.big-tel:hover { color: var(--c-heat); }

/* ---------- final CTA ---------- */
.final { position: relative; overflow: hidden; color: var(--c-on-night); background: var(--c-night); }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.final::before { content: ""; position: absolute; inset: 0; background: var(--c-night-overlay); z-index: var(--z-base); }
.final-copy { position: relative; z-index: var(--z-raised); padding-block: var(--s-900) calc(var(--s-900) + var(--s-400)); }
.final h2 { font-size: var(--t-6xl); line-height: var(--lh-tight); max-width: 680px; }
.final p { margin-top: var(--s-300); color: var(--c-on-night-2); font-size: var(--t-xl); line-height: var(--lh-xl); }
.final .cta-call { color: var(--c-on-night-2); }
.final .link-strong { color: var(--c-on-night); }
.final :focus-visible, .tagline :focus-visible { outline-color: var(--c-focus-on-night); }

/* ---------- footer + sticky bar ---------- */
.foot { padding-block: var(--s-600); border-top: 1px solid var(--c-rule); font-size: var(--t-sm); line-height: var(--lh-sm); }
.foot-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-400); align-items: start; }
.foot-lines { display: grid; gap: var(--s-50); }
.foot-legal { display: grid; gap: var(--s-75); justify-items: start; }
.sticky { display: none; }

.hub-list { margin-block: var(--s-400); display: grid; gap: var(--s-100); }
.hub h1 { font-size: var(--t-5xl); line-height: var(--lh-tight); margin-block: var(--s-400) var(--s-200); }


/* ---------- mid page band: second way into the one form ---------- */
.band { background: var(--c-night); color: var(--c-on-night); }
.band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-300) var(--s-600); padding-block: var(--s-500); }
.band h2 { font-size: var(--t-4xl); line-height: var(--lh-4xl); max-width: 680px; }
.band .cta-row { margin-top: 0; }
.band .cta-call { color: var(--c-on-night-2); }
.band .link-strong { color: var(--c-on-night); }
.band :focus-visible { outline-color: var(--c-focus-on-night); }

/* ---------- problem list heading, steps note ---------- */
.spots-h { margin-top: var(--s-500); font-size: var(--t-xl); line-height: var(--lh-xl); }
.spots-h + .spots { margin-top: var(--s-200); }
.step-note { margin-top: var(--s-500); padding-top: var(--s-200); border-top: 1px solid var(--c-rule); color: var(--c-ink-2); max-width: 64ch; }

/* ---------- slab diagram + lift steps (concrete) ---------- */
.hs-soil { fill: var(--c-soil-light); }
.hs-line .hs-conc { fill: var(--c-concrete); }
.hs-line .hs-void { fill: var(--c-paper); stroke-dasharray: 4 4; }
.lift { margin: 0; background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--r-2xl); padding: var(--s-300); }
.lift-svg { display: block; width: 100%; height: auto; }
.lift-svg .lv { stroke: var(--c-heat); stroke-width: 2; stroke-dasharray: 6 6; }
.lift-svg .ls-n { font-family: var(--f-mono); font-size: 20px; fill: var(--c-heat); }
.lift-svg .ls-t { font-family: var(--f-display); font-stretch: var(--stretch-display); font-size: 24px; font-weight: 700; fill: var(--c-ink); }

/* ---------- attic and slab signature motions (default = finished state) ---------- */
.art .art-text { font-family: var(--f-mono); font-size: 12px; fill: var(--c-on-night-2); }
.art .depth, .art .level { stroke: var(--c-on-night); stroke-width: 2; stroke-dasharray: 8 8; }
.art .rise line { stroke: var(--c-draft); stroke-width: 3; stroke-linecap: round; }
.art .rise path { fill: var(--c-draft); }
.art-attic .plumes, .art-attic .rises { opacity: 0; }
.art-attic.armed .plumes, .art-attic.armed .rises { opacity: 1; }
.art-attic.armed .fill { transform: translateY(96px); }
.art-attic.armed.play .fill { transform: none; transition: transform 1800ms var(--ease-out) 600ms; }
.art-attic.armed.play .plumes { opacity: 0; transition: opacity 1800ms var(--ease-out) 900ms; }
.art-attic.armed.sealed .rises { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.art-slab .holes, .art-slab .puddle { opacity: 0; }
.art-slab .void-foam { transform-box: fill-box; transform-origin: bottom; }
.art-slab.armed .slab-r { transform: translateY(32px); }
.art-slab.armed .void-foam { transform: scaleY(0); }
.art-slab.armed .patches { opacity: 0; }
.art-slab.armed .puddle { opacity: 1; }
.art-slab.armed.play .holes { opacity: 1; transition: opacity 200ms var(--ease-out) 300ms; }
.art-slab.armed.play .slab-r, .art-slab.armed.play .void-foam { transform: none; transition: transform 1600ms var(--ease-out) 1000ms; }
.art-slab.armed.play .puddle { opacity: 0; transition: opacity 600ms var(--ease-out) 900ms; }
.art-slab.armed.sealed .holes { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.art-slab.armed.sealed .patches { opacity: 1; transition: opacity var(--dur) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .art-attic.armed .rise { animation: lift 1400ms var(--ease-out) infinite; animation-delay: calc(var(--d) * 240ms); }
}
@keyframes lift { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }

/* ---------- reveals (one rise per section head) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(var(--s-400)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-delay: 0ms !important; }
  .btn:hover, .pin:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: var(--t-6xl); }
  .hero-grid, .problem-grid, .fix-grid, .cost-grid, .ben-grid, .about-grid, .form-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-500); }
  .hero-grid .art { max-width: 560px; }
  .ben-head { position: static; }
  .objs { grid-template-columns: minmax(0, 1fr); gap: var(--s-400); margin-top: var(--s-600); }
  .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .band h2 { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
  .band-row { padding-block: var(--s-400); }
  .objs-2 { grid-template-columns: minmax(0, 1fr); }
  body { font-size: var(--t-base); line-height: var(--lh-base); padding-bottom: calc(var(--s-700) + env(safe-area-inset-bottom)); }
  .wrap { padding-inline: var(--s-200); }
  .sec { padding-block: var(--s-700); }
  .cost, .steps, .faq { padding-block: var(--s-600); }
  h2 { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .hero { padding-top: calc(var(--s-900) + var(--s-200)); padding-bottom: var(--s-700); }
  .hero h1 { font-size: var(--t-5xl); }
  .lead { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .nav { gap: var(--s-100); padding-left: var(--s-200); top: var(--s-100); }
  .nav-logo img { height: 28px; max-width: 140px; }
  .nav-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-call { width: var(--s-500); height: var(--s-500); justify-content: center; border-radius: var(--r-full); border: 1px solid var(--c-rule-strong); }
  .proof-row { gap: var(--s-100) var(--s-400); }
  .house-stage { padding: var(--s-100); }
  .pin { width: 28px; height: 28px; }
  .tl { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .tagline { padding-block: var(--s-700) var(--s-800); }
  .ben-list strong { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
  .work-list, .work-list[data-count] { grid-template-columns: minmax(0, 1fr); }
  .work-list li { font-size: var(--t-xl); line-height: var(--lh-xl); padding-block: var(--s-100); }
  .work-photos { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-400); }
  .work-photos[data-count="1"] img { aspect-ratio: 4 / 3; }
  .step-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-300); }
  .step-list::before { top: calc(var(--s-500) / 2); bottom: calc(var(--s-500) / 2); left: calc(var(--s-500) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .step-list li { grid-template-columns: var(--s-500) minmax(0, 1fr); column-gap: var(--s-200); }
  .step-list li .step-n { grid-row: span 2; margin-bottom: 0; }
  .rv-grid { grid-template-columns: minmax(0, 1fr); }
  .rv, .rv-lead { grid-column: auto; grid-row: auto; }
  .rv-lead blockquote { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
  .founders blockquote { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
  .faq-list summary { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .form-card { padding: var(--s-300); }
  .form-card h2 { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
  .big-tel { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .final h2 { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .final-copy { padding-block: var(--s-800); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-300); }
  .sticky {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
    padding-bottom: env(safe-area-inset-bottom); background: var(--c-ink);
  }
  .sticky a { display: flex; align-items: center; justify-content: center; gap: var(--s-75); min-height: var(--s-700); font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); text-decoration: none; white-space: nowrap; }
  .sticky-call { color: var(--c-paper); }
  .sticky-cta { background: var(--c-heat); color: var(--c-on-heat); }
  .sticky a:active { opacity: 0.85; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: var(--t-4xl); line-height: var(--lh-4xl); }
  .eyebrow { font-size: var(--t-xs); line-height: var(--lh-xs); }
  .cta-row .btn { width: 100%; }
}


/* ---------- managed funnel port (theme package contract) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Logo is an optional field. With it, the bound business name stays for screen readers only;
   without it, the business name is the wordmark. */
.nav-logo { text-decoration: none; color: var(--c-ink); }
.wordmark { font-family: var(--f-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--t-xl); line-height: var(--lh-xl); white-space: nowrap; }
.logo-slot + .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.foot-logo img { width: auto; height: 35px; max-width: 180px; }
.foot-logo .wordmark { font-size: var(--t-lg); line-height: var(--lh-lg); }
/* Quote marks around bound review and founder quotes (the bound text carries none). */
.q:not(:empty)::before { content: "\201C"; }
.q:not(:empty)::after { content: "\201D"; }
/* Optional client content that compiled out: no empty frames left behind. */
.founders:has(.q:empty), .about-grid p:empty, .rv-job:empty { display: none; }
.about .photo:not(:has(img)) { display: none; }
.about-grid:not(:has(.photo img)) { grid-template-columns: minmax(0, 1fr); }
.reviews:not(:has(.rv)), .work-photos:not(:has(li)) { display: none; }
.objs:not(:has(.obj:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.objs:not(:has(.obj:nth-child(2))) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
/* UpHex lead form: honeypot, optional analytics consent, privacy notice. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-100); align-items: start; font-weight: 400; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-ink-2); }
.check input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--c-heat); }
.privacy-optout { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.privacy-optout:hover { color: var(--c-heat); }
.privacy-optout[data-uphex-optout-active="true"] { text-decoration: none; cursor: default; color: var(--c-ink-3); }
@media (max-width: 1100px) {
  .objs:not(:has(.obj:nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
}