/* Halden Builders — Elite / General Building
   Light canvas: bone and ink, one ember-rust accent used small (and once as a full-bleed panel).
   Hierarchy comes from scale — one weight per face, no card chrome, hairlines at most, 0 radius
   except the single pill CTA. See STYLE.md. */

:root {
  --bg: #EDE9E1;
  --surface: #EDE9E1;
  --ink: #121212;
  --muted: #5C5953;
  --line: rgba(18, 18, 18, 0.18);
  --accent: #B45C3C;
  --accent-ink: #000000;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 0;
  --space-section: clamp(96px, 11vw, 160px);
  --banner-h: 56px;
  --header-h: 72px;
  --gutter: clamp(20px, 4vw, 56px);
  --page: 1360px;
  --ease-in: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  /* claim-flow.css tokens */
  --paper: var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--banner-h) + var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Type voices: display (shout), body (whisper), mono (instrument) ---------- */
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 0.96; text-wrap: balance; }
.mono { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; color: var(--ink); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); flex-shrink: 0; }
.lede { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; max-width: 44ch; color: var(--ink); }
.fine { font-size: 13px; color: var(--muted); line-height: 1.5; }
.wrap { width: min(calc(100% - var(--gutter) * 2), var(--page)); margin-inline: auto; }
.section--bone { background: var(--bg); color: var(--ink); padding-block: var(--space-section); }
.section--bone + .section--bone { border-top: 1px solid var(--line); }
.section--ink { background: var(--ink); color: var(--bg); padding-block: var(--space-section); --muted: #B6B2A9; --line: rgba(237, 233, 225, 0.2); }
.section--ink .eyebrow { color: var(--bg); }
.section--ink .lede { color: var(--bg); }
.section--rust { background: var(--accent); color: var(--accent-ink); padding-block: var(--space-section); --ink: #000000; --muted: #2B1911; --line: rgba(0, 0, 0, 0.28); }
.section--rust .eyebrow { color: #000; }
.section--rust .eyebrow::before { background: #000; }
.section--rust .lede { color: #000; }
.section-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 112px); }
.section-head .display { font-size: clamp(48px, 7.4vw, 128px); margin-bottom: 28px; }
.section-head .lede { margin-top: 4px; }

.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; }
.skip-link:focus { top: calc(var(--banner-h) + 8px); }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Actions: one filled pill (sticky CTA); everything else is text and an arrow ---------- */
.link {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; min-height: 44px;
  font-weight: 300; font-size: 17px; letter-spacing: 0.01em; background: none; border: 0; color: inherit;
  border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease-in);
}
.link::after { content: "→"; font-family: var(--font-body); transition: transform 0.5s var(--ease-out); }
.link:hover { border-bottom-color: currentColor; }
.link:hover::after { transform: translateX(6px); }
.link--lg { font-size: clamp(20px, 1.6vw, 24px); gap: 16px; }
.link:disabled { opacity: 0.5; cursor: wait; }
.btn {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 14px 28px;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 999px;
  font-weight: 300; letter-spacing: 0.01em; transition: transform 0.5s var(--ease-out), background 0.4s var(--ease-in);
}
.btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.btn:hover { background: #000; transform: translateY(-1px); }

/* ---------- Preloader: a surveyor's cross-hair draws, then dissolves ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; gap: 24px; align-content: center;
  background: var(--bg); color: var(--ink); transition: opacity 0.75s var(--ease-out), visibility 0.75s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark { overflow: visible; }
.pl-ring, .pl-line { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: butt; }
.pl-ring { stroke-dasharray: 277; stroke-dashoffset: 277; animation: pl-draw 1.1s var(--ease-in) 0.1s forwards; }
.pl-line { stroke-dasharray: 112; stroke-dashoffset: 112; animation: pl-draw 0.7s var(--ease-in) 0.8s forwards; }
.pl-dot { fill: var(--accent); opacity: 0; animation: pl-pop 0.4s var(--ease-in) 1.35s forwards; }
.preloader__label { margin-top: 8px; opacity: 0; animation: pl-pop 0.5s var(--ease-in) 0.6s forwards; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-pop { to { opacity: 1; } }

/* ---------- Claim banner (kit colours stay; type is ours) ---------- */
.sample-banner {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  min-height: var(--banner-h); padding: 8px var(--gutter);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.sample-banner [data-buy] { font-family: var(--font-body); text-transform: none; letter-spacing: 0; flex-shrink: 0; }
.sample-banner > span { min-width: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: var(--banner-h); z-index: 50; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.brand__mark { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink); position: relative; }
.brand__mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.site-nav { display: flex; gap: 32px; font-size: 15px; }
.site-nav a { position: relative; padding: 8px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__phone { font-size: 14px; letter-spacing: 0.04em; text-transform: none; }
.site-header__right { display: flex; align-items: center; gap: 24px; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-menu {
  position: fixed; inset: 0; z-index: 45; display: grid; align-content: center; gap: 8px; padding: calc(var(--banner-h) + var(--header-h) + 24px) var(--gutter) 120px;
  background: var(--bg); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
}
.site-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.site-menu a { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 11vw, 64px); line-height: 1.05; letter-spacing: -0.02em; padding: 6px 0; border-bottom: 1px solid var(--line); }
.site-menu a[aria-current="page"] { color: var(--accent); }
.site-menu .mono { margin-top: 24px; color: var(--muted); }

/* ---------- Chapters (pinned scrub stages) ---------- */
.chapter { position: relative; background: var(--ink); color: var(--bg); }
.chapter__stage { position: relative; min-height: 70vh; overflow: hidden; }
.chapter__poster { width: 100%; height: 100%; object-fit: cover; }
.chapter__canvas, .chapter__scrim, .chapter__load, .instruments, .rail, .chapter__hint { display: none; }
.chapter__copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; max-width: 860px; }
.chapter__copy .eyebrow { color: var(--bg); }
.chapter__copy .display { font-size: clamp(52px, 7.6vw, 136px); margin-bottom: 24px; }
.chapter__copy .lede { color: rgba(237, 233, 225, 0.86); }
.chapter__copy .line { display: block; white-space: nowrap; }
.chapter__copy .link { margin-top: 8px; }
.chapter__static { padding: 48px var(--gutter) 72px; }
.chapter__static .eyebrow { color: var(--bg); }
.stage-list { display: grid; gap: 0; max-width: 860px; }
.stage-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(237, 233, 225, 0.2); align-items: baseline; }
.stage-list li:last-child { border-bottom: 1px solid rgba(237, 233, 225, 0.2); }
.stage-list .num, .stage-list .meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #B6B2A9; }
.stage-list .name { font-family: var(--font-display); font-weight: 500; font-size: 28px; }
.stage-list .note { display: block; font-size: 14px; color: #B6B2A9; margin-top: 2px; }

/* No-motion build hero (mobile, reduced motion): poster, then the copy stacked beneath it */
html:not(.js-motion) .chapter--build .chapter__copy { position: static; padding: 40px var(--gutter) 0; max-width: none; }
html:not(.js-motion) .chapter--build .hero-line { font-size: clamp(40px, 10vw, 96px); }
html:not(.js-motion) .chapter--build .chapter__stage { display: grid; }
html:not(.js-motion) .chapter--build .chapter__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(to bottom, rgba(18, 18, 18, 0.6), rgba(18, 18, 18, 0)); pointer-events: none; }

/* Motion build: everything below only when js-motion is on (desktop, no reduced-motion) */
.js-motion .chapter__poster { display: none; }
.js-motion .chapter__static { display: none; }
.js-motion .chapter__stage { height: 100vh; height: 100svh; }
.js-motion .chapter__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.js-motion .chapter__scrim { display: block; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 18, 18, 0.74) 0%, rgba(18, 18, 18, 0.2) 42%, rgba(18, 18, 18, 0) 70%); pointer-events: none; }
.js-motion .chapter__scrim--keys { background: radial-gradient(ellipse at 50% 60%, rgba(18, 18, 18, 0) 30%, rgba(18, 18, 18, 0.55) 100%); }
.js-motion .chapter__load { display: block; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(237, 233, 225, 0.15); transition: opacity 0.6s var(--ease-out); }
.js-motion .chapter__load.is-done { opacity: 0; }
.js-motion .chapter__loadbar { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s linear; }
.js-motion .chapter__copy { bottom: auto; top: 50%; transform: translateY(-50%); left: var(--gutter); right: auto; max-width: min(860px, 62vw); }
.js-motion .chapter__copy .line { opacity: 0; transform: translateY(0.35em); }
.js-motion .chapter__copy.is-in .line { opacity: 1; transform: none; transition: opacity 0.75s var(--ease-in), transform 0.75s var(--ease-in); }
.js-motion .chapter__copy.is-in .line:nth-child(2) { transition-delay: 0.1s; }
.js-motion .chapter__copy.is-in .line:nth-child(3) { transition-delay: 0.2s; }
.js-motion .chapter__copy .lede, .js-motion .chapter__copy .eyebrow, .js-motion .chapter__copy .link { opacity: 0; transition: opacity 0.75s var(--ease-in) 0.35s; }
.js-motion .chapter__copy.is-in .lede, .js-motion .chapter__copy.is-in .eyebrow, .js-motion .chapter__copy.is-in .link { opacity: 1; }
.js-motion .chapter__copy.is-out { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.js-motion .chapter__copy--keys { top: auto; bottom: 12vh; transform: none; }
.js-motion .chapter__hint { display: block; position: absolute; right: var(--gutter); bottom: 32px; color: rgba(237, 233, 225, 0.7); padding-left: 44px; }
.js-motion .chapter__hint::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: currentColor; animation: hint 1.8s var(--ease-in) infinite; transform-origin: left; }
@keyframes hint { 0% { transform: scaleX(0); opacity: 0; } 40% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) translateX(10px); opacity: 0; } }

/* Instruments: mono readouts in the top-right corner — no panel */
.js-motion .instruments {
  display: grid; gap: 20px; position: absolute; top: calc(var(--header-h) + 36px); right: var(--gutter);
  width: 220px; text-align: right; justify-items: end;
}
.instrument { display: grid; gap: 4px; justify-items: inherit; }
.instrument__label { color: rgba(237, 233, 225, 0.66); font-size: 11px; }
.instrument__value { font-size: 22px; line-height: 1.1; }
.instrument__value.mono { font-size: 24px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.instrument__value small { font-size: 13px; color: rgba(237, 233, 225, 0.6); margin-left: 2px; }
.instrument__value[data-readout="week"] { font-size: 56px; line-height: 0.9; }
.instrument__value[data-readout="stage"] { font-family: var(--font-display); font-weight: 500; font-size: 30px; }

/* Staged headlines: one line per build phase, words rise in with a short stagger */
.hero-headlines { display: grid; margin-bottom: 24px; }
.hero-line { grid-area: 1 / 1; font-size: clamp(56px, 8.6vw, 160px); margin: 0; visibility: hidden; max-width: 9ch; }
.hero-line.is-current { visibility: visible; }
.hero-line .w { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.6s var(--ease-in), transform 0.6s var(--ease-in); }
.hero-line.is-current .w { opacity: 1; transform: none; }
.chapter__copy .lede, .chapter__copy .hero-cta { transition: opacity 0.6s var(--ease-in), transform 0.6s var(--ease-in); }
.js-motion .chapter--build .chapter__copy.is-in .lede, .js-motion .chapter--build .chapter__copy.is-in .hero-cta { opacity: 0; transform: translateY(10px); pointer-events: none; }
.js-motion .chapter--build.is-start .chapter__copy.is-in .lede, .js-motion .chapter--build.is-final .chapter__copy.is-in .hero-cta { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.5s; }
.js-motion .chapter--build .chapter__scrim { background: linear-gradient(to right, rgba(18, 18, 18, 0.62) 0%, rgba(18, 18, 18, 0.28) 45%, rgba(18, 18, 18, 0.05) 75%), linear-gradient(to top, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0) 38%), linear-gradient(to bottom, rgba(18, 18, 18, 0.5) 0%, rgba(18, 18, 18, 0) 22%); }
.js-motion .chapter--build .chapter__copy { top: 50%; transform: translateY(-46%); }
.js-motion .chapter--build .chapter__hint { bottom: 110px; }

/* Timeline rail: horizontal, hairline track along the bottom of the footage, rust fill ticks with the week */
.rail-wrap { display: none; }
.js-motion .rail-wrap { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; }
.rail-wrap .meter { display: block; height: 1px; background: rgba(237, 233, 225, 0.3); overflow: hidden; margin: 0; }
.meter i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.js-motion .rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; padding-top: 14px; }
.rail li { position: relative; display: grid; gap: 4px; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 225, 0.42); transition: color 0.4s var(--ease-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail li .wk { display: none; color: rgba(237, 233, 225, 0.6); }
.rail li.is-active .wk { display: block; }
.rail li.is-done { color: rgba(237, 233, 225, 0.72); }
.rail li.is-active { color: var(--bg); }
.rail li.is-active::before { content: ""; position: absolute; left: 0; top: -14px; width: 100%; height: 1px; background: var(--accent); }

/* Header goes transparent while the footage is under it; on the home it floats over the footage from scroll 0 */
.home .site-header { position: fixed; left: 0; right: 0; }
.site-header { transition: background 0.5s var(--ease-in), color 0.5s var(--ease-in), border-color 0.5s var(--ease-in); }
.site-header.is-clear { background: transparent; color: var(--bg); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.is-clear .brand__mark { border-color: var(--bg); }
.site-header.is-clear .site-nav a::after { background: var(--bg); }
.site-header.is-clear .menu-toggle { color: var(--bg); }
body.menu-open .site-header.is-clear { background: var(--bg); color: var(--ink); }

/* ---------- Blueprint lens ---------- */
.lens {
  position: relative; aspect-ratio: 1344 / 768; overflow: hidden; cursor: none;
  background: var(--ink); isolation: isolate; touch-action: none; border: 1px solid var(--ink);
}
.lens img, .lens canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens__reveal, .lens__plan { clip-path: circle(0px at 50% 50%); will-change: clip-path; }
.lens.is-plan .lens__reveal { visibility: hidden; }
.lens:not(.is-plan) .lens__plan { visibility: hidden; }
.lens__ring {
  position: absolute; width: var(--lens-d, 220px); height: var(--lens-d, 220px); left: 0; top: 0; border-radius: 50%;
  border: 1px solid rgba(237, 233, 225, 0.95);
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease-in);
}
.lens.is-plan .lens__ring { border-color: var(--ink); }
.lens__ring::before, .lens__ring::after { content: ""; position: absolute; background: currentColor; opacity: 0.7; }
.lens__ring::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.lens__ring::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.lens { color: rgba(237, 233, 225, 0.9); }
.lens.is-plan { color: var(--ink); }
.lens.is-active .lens__ring { opacity: 1; }
.lens:focus-visible { outline-offset: 6px; }
.lens__readout {
  position: absolute; left: 0; bottom: 0; display: grid; gap: 4px; padding: 14px 18px;
  background: var(--ink); color: var(--bg); text-transform: none; letter-spacing: 0.02em; max-width: min(70%, 420px);
}
.lens__readout [data-lens-name] { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: #B6B2A9; }
.lens__readout [data-lens-note] { font-size: 13px; }
.lens__controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px 0; font-weight: 300; font-size: 17px; min-height: 44px; }
.toggle__track { width: 40px; height: 1px; background: var(--line); position: relative; }
.toggle__track i { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transition: transform 0.5s var(--ease-out), background 0.3s var(--ease-in); }
.toggle[aria-pressed="true"] .toggle__track i { transform: translateX(31px); background: var(--accent); }

/* ---------- Selected work ---------- */
.case { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(48px, 6vw, 96px) 0; border-top: 1px solid var(--line); }
.case:last-child { border-bottom: 1px solid var(--line); }
.case--flip .case__figure { order: 2; }
.case__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.85) contrast(1.02); }
.case__meta { color: var(--muted); margin-bottom: 20px; }
.case__body h3 { font-size: clamp(36px, 4vw, 64px); margin-bottom: 20px; }
.case__body p { max-width: 46ch; }
.case__facts { display: grid; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.case__facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.case__facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.case__body .link { margin-top: 24px; }

/* ---------- Estimator ---------- */
.estimator__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.estimator__grid .section-head { grid-column: 1 / -1; margin-bottom: 0; }
.estimator__form { display: grid; gap: 32px; }
.field { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.field label .mono { color: var(--ink); }
.field legend { width: 100%; margin-bottom: 10px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); border-radius: 0;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: none; }
.field textarea { resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
.field input[type="range"] { width: 100%; accent-color: var(--ink); height: 32px; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.segmented label { position: relative; text-align: center; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 12px 8px; font-size: 15px; transition: background 0.3s var(--ease-in), color 0.3s var(--ease-in); }
.segmented input:checked + span { background: var(--ink); color: var(--bg); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.estimator__out { display: grid; gap: 0; position: sticky; top: calc(var(--banner-h) + var(--header-h) + 24px); }
.readout-card { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--ink); }
.readout-card__big { font-size: clamp(48px, 5.4vw, 88px); line-height: 1; }
.readout-card strong.mono { font-size: 24px; text-transform: none; letter-spacing: 0; }
.readout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.readout-card .fine { font-size: 12px; }
.readout-list { display: grid; gap: 8px; font-size: 16px; }
.readout-list li { padding-left: 24px; position: relative; }
.readout-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 1px; background: var(--accent); }
.readout-card p { font-size: 16px; max-width: 46ch; }
.estimator__out > .fine { padding-top: 18px; border-top: 1px solid var(--ink); }
.estimator__out .link { justify-self: start; margin-top: 12px; }

/* ---------- Proof: the one rust panel ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat dt { color: var(--ink); margin-bottom: 14px; }
.stat dd { font-size: clamp(64px, 8vw, 144px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.trust { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 28px 0; color: var(--ink); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; }
.review blockquote { font-size: clamp(28px, 2.4vw, 40px); margin-bottom: 18px; text-wrap: pretty; }
.review p { color: var(--ink); }

/* ---------- Photo band (Aker-style dark opener before a content section) ---------- */
.band { position: relative; min-height: 70vh; display: grid; align-items: end; background: var(--ink); color: var(--bg); overflow: hidden; isolation: isolate; }
.band--short { min-height: 56vh; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18, 18, 18, 0.78) 0%, rgba(18, 18, 18, 0.25) 50%, rgba(18, 18, 18, 0.05) 100%); }
.band__copy { padding: clamp(48px, 8vw, 120px) var(--gutter) clamp(40px, 6vw, 80px); max-width: 1000px; }
.band__copy .eyebrow { color: var(--bg); }
.band__copy .display { font-size: clamp(52px, 8vw, 144px); }
.band__copy .lede { color: rgba(237, 233, 225, 0.86); margin-top: 24px; }
.band__copy .mono { color: rgba(237, 233, 225, 0.75); margin-top: 20px; }
.band--hero { min-height: calc(100vh - var(--banner-h) - var(--header-h)); min-height: calc(100svh - var(--banner-h) - var(--header-h)); }

/* ---------- Consultation ---------- */
.consult__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.consult__grid .section-head { margin-bottom: 0; }
.consult__phone { display: inline-block; margin-top: 28px; font-size: 22px; }
.consult__form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field--full { grid-column: 1 / -1; }
.consult__form .link { grid-column: 1 / -1; justify-self: start; }
.form-status { grid-column: 1 / -1; font-size: 14px; min-height: 1.5em; }
.form-status.is-error { color: #8F2A12; }
.section--ink .form-status.is-error { color: #FFB4A9; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--bg); padding: 72px 0 calc(40px + env(safe-area-inset-bottom)); --muted: #B6B2A9; --line: rgba(237, 233, 225, 0.2); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.site-footer__name { font-size: clamp(40px, 5.4vw, 80px); margin-bottom: 20px; }
.site-footer .mono { color: var(--muted); }
.site-footer__links { display: grid; gap: 10px; font-size: 16px; }
.site-footer__links a { border-bottom: 1px solid transparent; width: fit-content; transition: border-color 0.4s var(--ease-in); }
.site-footer__links a:hover { border-bottom-color: currentColor; }
.site-footer__links .mono { margin-bottom: 8px; }
.site-footer__legal { grid-column: 1 / -1; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; }

/* ---------- Sticky CTA (the single filled pill) + mobile call bar ---------- */
.sticky-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  transform: translateY(calc(100% + 32px)); transition: transform 0.6s var(--ease-out), background 0.4s var(--ease-in);
}
.sticky-cta.is-visible { transform: none; }
.call-bar { display: none; }

/* ---------- Claim dialog ---------- */
#buy-dialog { max-width: 590px; width: min(100% - 32px, 590px); padding: 36px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 0; }
#buy-dialog::backdrop { background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(6px); }
#buy-dialog h2 { font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1; margin: 12px 0 14px; padding-right: 52px; }
#buy-dialog > p, #buy-dialog .claim-card > p { color: var(--muted); margin-bottom: 24px; }
#buy-dialog form { display: grid; gap: 18px; }
#buy-dialog .link { justify-self: start; }
.dialog-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); font-size: 26px; line-height: 1; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 4px; accent-color: var(--ink); }

/* ---------- Reveals ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.75s var(--ease-in), transform 0.75s var(--ease-in); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ======================================================================
   Sub pages (services, projects, journal, about, faq, financing, contact)
   ====================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); padding: 24px 0 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.breadcrumb a:hover { color: var(--ink); }
.page-head { padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 7vw, 112px); }
.page-head .display { font-size: clamp(56px, 9vw, 160px); margin-bottom: 28px; max-width: 14ch; }
.page-head .lede { max-width: 52ch; }
.page-head .link { margin-top: 28px; }
.prose { max-width: 66ch; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; }
.prose p + p, .prose p + h2, .prose p + h3, .prose ul + p, .prose ol + p { margin-top: 1.4em; }
.prose h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3vw, 44px); letter-spacing: -0.02em; line-height: 1.05; margin: 2em 0 0.6em; }
.prose h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; margin: 1.6em 0 0.5em; }
.prose ul, .prose ol { display: grid; gap: 10px; margin-top: 1em; padding-left: 0; }
.prose li { padding-left: 28px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: var(--accent); }
.prose ol { counter-reset: item; }
.prose ol li { counter-increment: item; padding-left: 40px; }
.prose ol li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 0.25em; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.prose strong { font-weight: 300; border-bottom: 1px solid var(--accent); }
.prose em { font-style: italic; }
.prose .pull { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 1.6em 0; padding-left: 24px; border-left: 1px solid var(--accent); }
.prose .facts { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.two-col .section-head { margin-bottom: 0; position: sticky; top: calc(var(--banner-h) + var(--header-h) + 24px); }
.two-col .section-head .display { font-size: clamp(40px, 4.6vw, 80px); }

/* Numbered index rows (services, journal, FAQ, process) */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); color: inherit; transition: background 0.4s var(--ease-in); }
.row--photo { grid-template-columns: 64px minmax(0, 1.2fr) minmax(220px, 0.8fr); align-items: center; }
.row__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.row__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.row__title { display: block; }
.row__sub { display: block; margin-top: 10px; max-width: 52ch; }
.row__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.row__arrow { font-size: 28px; font-weight: 300; transition: transform 0.5s var(--ease-out); }
a.row:hover .row__arrow { transform: translateX(8px); }
a.row:hover .row__title { color: var(--accent); }
.row__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.85) contrast(1.02); }

/* Facts list (service page: what's included, specs) */
.facts-list { border-top: 1px solid var(--line); }
.facts-list > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.facts-list dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.facts-list dd { font-size: clamp(17px, 1.25vw, 19px); }
.facts-list dd .display { font-size: clamp(32px, 3.2vw, 48px); display: block; margin-bottom: 4px; }

/* Case study: three plates with mono readouts */
.plates { display: grid; gap: clamp(40px, 6vw, 96px); }
.plate { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.plate:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.plate:nth-child(even) .plate__figure { order: 2; }
.plate__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--ink); filter: saturate(0.9); }
.plate__figure figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.plate__readout { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid var(--ink); }
.plate__readout .instrument__label { color: var(--muted); font-size: 11px; }
.plate__readout .instrument__value { font-size: 24px; text-transform: none; letter-spacing: 0; }
.plate__readout .instrument__value[data-big] { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3vw, 44px); }
.plate__readout p { font-size: 16px; }
.client-line { padding: clamp(48px, 7vw, 112px) 0; border-top: 1px solid var(--line); }
.client-line blockquote { font-size: clamp(32px, 3.6vw, 64px); max-width: 24ch; margin-bottom: 20px; }

/* Article */
.article__meta { display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--muted); margin-bottom: 40px; }
.article__hero { margin: 0 0 clamp(40px, 6vw, 80px); }
.article__hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--ink); }
.article__hero figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.article__table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.article__table th, .article__table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.article__table th { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.article__table td:last-child, .article__table th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.article__next { margin-top: clamp(48px, 7vw, 112px); padding-top: 32px; border-top: 1px solid var(--line); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px 1fr 32px; gap: 24px; align-items: baseline; padding: 24px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .row__num { align-self: center; }
.faq summary .faq__plus { font-family: var(--font-body); font-weight: 300; font-size: 28px; text-align: right; transition: transform 0.5s var(--ease-out); }
.faq details[open] .faq__plus { transform: rotate(45deg); }
.faq details > div { padding: 0 0 32px 88px; max-width: 70ch; }
.faq details > div p + p { margin-top: 1em; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.contact__details { display: grid; gap: 32px; }
.contact__details .facts-list { border-top: 0; }
.contact__big { font-family: var(--font-mono); font-size: clamp(28px, 3vw, 44px); letter-spacing: 0; text-transform: none; line-height: 1.1; }
.map { margin-top: clamp(48px, 7vw, 112px); border: 1px solid var(--ink); }
.map iframe { display: block; width: 100%; height: clamp(320px, 50vh, 560px); border: 0; filter: grayscale(1) contrast(1.05); }
.map__caption { padding: 14px 0 0; }
.areas { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 16px; }

/* Team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--line); padding-top: 32px; }
.team h3 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1; margin: 8px 0 10px; }
.team p { font-size: 15px; }

/* Page CTA strip (text-and-arrow, calm) */
.cta-strip { padding: clamp(64px, 9vw, 140px) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.cta-strip .display { font-size: clamp(44px, 6vw, 104px); max-width: 12ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .js-motion .rail li .wk { display: none; }
  .js-motion .instruments { width: 180px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-block; }
  .case, .estimator__grid, .consult__grid, .two-col, .contact__grid { grid-template-columns: 1fr; }
  .two-col .section-head { position: static; }
  .case--flip .case__figure { order: 0; }
  .estimator__out { position: static; }
  .stats { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr; gap: 40px; }
  .consult__form { grid-template-columns: 1fr; }
  .row--photo { grid-template-columns: 48px 1fr; }
  .row--photo .row__figure { grid-column: 2; }
  .plate, .plate:nth-child(even) { grid-template-columns: 1fr; }
  .plate:nth-child(even) .plate__figure { order: 0; }
  .team { grid-template-columns: 1fr; }
  .cta-strip { grid-template-columns: 1fr; }
  .facts-list > div { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 640px) {
  :root { --banner-h: 60px; --header-h: 64px; }
  body { font-size: 16px; }
  .sample-banner { font-size: 11px; justify-content: space-between; gap: 12px; }
  .brand { font-size: 22px; }
  .site-header__phone { display: none; }
  .chapter__stage { min-height: 62vh; }
  .chapter__copy { bottom: 28px; }
  .chapter__copy .display { font-size: clamp(36px, 11vw, 60px); }
  .chapter__copy .line { white-space: normal; }
  .hero-line { font-size: clamp(40px, 12vw, 64px); }
  .section-head .display { font-size: clamp(42px, 12vw, 64px); }
  .page-head .display { font-size: clamp(44px, 13vw, 72px); }
  .band__copy .display { font-size: clamp(40px, 12vw, 64px); }
  .stage-list li { grid-template-columns: 36px 1fr; }
  .stage-list .meta { grid-column: 2; }
  .lens { cursor: default; }
  .lens__readout { left: 0; bottom: 0; right: 0; max-width: none; padding: 8px 10px; gap: 2px; }
  .lens__readout [data-lens-note] { font-size: 11px; line-height: 1.35; }
  .readout-row { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px 1fr; }
  .row__arrow { display: none; }
  .row--photo .row__figure { grid-column: 2; }
  .faq summary { grid-template-columns: 40px 1fr 24px; gap: 14px; }
  .faq details > div { padding-left: 54px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .sticky-cta { display: none; }
  .call-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--ink); color: var(--bg); border-top: 1px solid rgba(237, 233, 225, 0.2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .call-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; font-size: 15px; }
  .call-bar__cta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .site-menu { padding-bottom: 96px; }
  #buy-dialog { padding: 28px 20px; }
  #buy-dialog h2 { font-size: 32px; }
}

/* ---------- Reduced motion: stills with the same copy, no pin, no scrub ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .preloader { display: none; }
  .sticky-cta { transform: none; }
}

/* Stable homeowner headline, with room for the full sentence. */
.hero-line{max-width:16ch;font-size:clamp(56px,7vw,120px)}
@media(max-width:600px){.hero-line{max-width:100%;font-size:clamp(38px,10.6vw,48px)}}

/* Project planner — warm surfaces, architectural choices and a live project brief. */
#plan .estimator__grid{grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr);gap:48px 36px}
#plan .planner-heading{display:grid;grid-template-columns:1.45fr 1fr;align-items:end;gap:36px}
#plan .planner-heading h2{font-size:clamp(44px,5.8vw,84px);max-width:16ch}
#plan .planner-heading .lede{font-size:18px;max-width:34ch;padding-bottom:5px}
#plan .estimator__form{padding:30px;background:#f7f4ee;border-radius:16px;gap:30px;min-width:0}
#plan .planner-fieldset{padding:0;border:0;margin:0;min-width:0}
#plan .planner-fieldset+ .planner-fieldset{border-top:1px solid #ded9cf;padding-top:26px}
#plan .planner-fieldset legend{float:left;width:100%;display:flex;align-items:center;gap:12px;font-size:18px;margin:0 0 18px;padding:0;letter-spacing:-.02em}
#plan .planner-fieldset legend+*{clear:both}
#plan .planner-step{font:11px var(--font-mono);color:#756d62;letter-spacing:0}
#plan .project-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#plan .project-choice,#plan .planner-options label{position:relative;cursor:pointer;min-width:0}
#plan .project-choice input,#plan .planner-options input{position:absolute;left:12px;top:12px;width:1px;height:1px;opacity:0}
#plan .project-choice__body{position:relative;display:flex;align-items:center;gap:12px;height:100%;min-height:100px;padding:16px 22px 16px 12px;border:1px solid #d7d1c7;border-radius:9px;background:#faf8f3;transition:background .2s,border-color .2s,box-shadow .2s}
#plan .project-choice svg{flex:0 0 38px;width:38px;height:38px;color:#696357}
#plan .project-choice strong,#plan .planner-options strong{display:block;font-size:15px;font-weight:500;line-height:1.35}
#plan .project-choice small,#plan .planner-options small{display:block;color:#5C5953;font-size:12px;line-height:1.5;margin-top:5px}
#plan .choice-check{position:absolute;top:8px;right:8px;font-size:11px;line-height:16px;width:16px;text-align:center;background:#8e452d;color:#fff;border-radius:50%;opacity:0}
#plan input:checked+.project-choice__body{background:#eee4d8;border-color:#ac755b;box-shadow:inset 0 0 0 1px #ac755b}
#plan input:checked+.project-choice__body svg{color:#8e452d}
#plan input:checked+.project-choice__body .choice-check{opacity:1}
#plan .project-choice:hover .project-choice__body,#plan .planner-options label:hover>span{border-color:#a99077;background:#f0e9df}
#plan .project-choice input:focus-visible+span,#plan .planner-options input:focus-visible+span{outline:2px solid #8e452d;outline-offset:3px}
#plan .planner-size__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#plan .planner-size__heading p{font-size:14px;color:#70685e}
#plan .planner-size__value{display:flex;align-items:baseline;gap:6px;border-bottom:1px solid #b8aa98;padding:2px 0}
#plan .planner-size__value input{font:500 27px var(--font-body);font-variant-numeric:tabular-nums;letter-spacing:-.04em;width:5ch;min-width:0;background:transparent;border:0;padding:0;text-align:right;appearance:textfield;-moz-appearance:textfield;border-radius:0}
#plan .planner-size__value input::-webkit-inner-spin-button,#plan .planner-size__value input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#plan .planner-size__value>span{font-size:12px;color:#70685e;white-space:nowrap}
#plan input[type=range]{--range-progress:35.714%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:28px;background:transparent;margin:0;cursor:pointer;accent-color:#8e452d}
#plan input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#9e5e40 var(--range-progress),#dcd5ca var(--range-progress))}
#plan input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-9px;width:22px;height:22px;border-radius:50%;background:#fcfaf6;border:5px solid #9e5e40;box-shadow:0 2px 6px #65533d25}
#plan input[type=range]::-moz-range-track{height:4px;background:#dcd5ca;border-radius:4px}
#plan input[type=range]::-moz-range-progress{height:4px;background:#9e5e40}
#plan input[type=range]::-moz-range-thumb{width:14px;height:14px;border:4px solid #9e5e40;background:#fcfaf6;border-radius:50%}
#plan input[type=range]:focus-visible,#plan .planner-size__value input:focus-visible{outline:2px solid #8e452d;outline-offset:5px}
#plan .planner-range-labels{display:flex;justify-content:space-between;font:10px var(--font-mono);color:#70685e;margin-top:8px}
#plan .planner-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#plan .planner-options label>span{display:block;height:100%;padding:14px 10px;border:1px solid #d7d1c7;border-radius:8px;transition:background .2s,border-color .2s}
#plan .planner-options input:checked+span{background:#e9e2d6;border-color:#93826f;box-shadow:inset 0 0 0 1px #93826f}
#plan .planner-options strong{font-size:13px}
#plan .planner-options small{font-size:11px}
#plan .estimator__out{background:#e3ddcf;border-radius:16px;overflow:hidden;top:calc(var(--banner-h) + var(--header-h) + 16px)}
#plan .planner-preview{position:relative;height:160px}
#plan .planner-preview img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
#plan .planner-preview::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#30261b99)}
#plan .planner-preview>span{position:absolute;z-index:1;bottom:16px;left:26px;color:#fff;font-size:13px}
#plan .planner-summary{padding:26px}
#plan .planner-summary__eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;color:#645c50;margin-bottom:14px}
#plan .planner-summary__eyebrow>span{width:6px;height:6px;border-radius:50%;background:#9e5e40}
#plan .planner-summary h3{font-size:42px;line-height:1.05;margin-bottom:8px}
#plan .planner-summary__selection{font-size:12px;color:#645c50;font-variant-numeric:tabular-nums}
#plan .planner-schedule{padding:22px 0;margin:22px 0;border-block:1px solid #c5bbac}
#plan .planner-schedule>p:first-child{font-size:12px;color:#645c50}
#plan .planner-schedule__value{display:flex;align-items:baseline;gap:10px;margin:7px 0 9px;font-size:16px}
#plan .planner-schedule__value strong{font:500 clamp(42px,4vw,64px)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.05em}
#plan .planner-schedule__note{font-size:11px;color:#645c50}
#plan .planner-scope h4{font:500 14px var(--font-body);margin-bottom:14px}
#plan .readout-list{gap:12px;font-size:13px;line-height:1.55}
#plan .readout-list li{padding-left:20px}
#plan .readout-list li::before{width:6px;height:6px;border-bottom:1px solid #8e452d;border-right:1px solid #8e452d;transform:rotate(45deg);background:none;top:6px}
#plan .planner-permits{border-block:1px solid #c5bbac;margin-top:22px;padding:15px 0}
#plan .planner-permits summary{cursor:pointer;display:flex;justify-content:space-between;font-size:13px;list-style:none;gap:14px}
#plan .planner-permits summary::-webkit-details-marker{display:none}
#plan .planner-permits summary span{transition:transform .2s}
#plan .planner-permits[open] summary span{transform:rotate(45deg)}
#plan .planner-permits p{font-size:12px;line-height:1.7;color:#645c50;padding-top:12px}
#plan .planner-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#292922;color:#fcfaf6;border-radius:8px;padding:16px;margin-top:22px;font-size:13px;line-height:1.4;transition:background .2s,transform .2s}
#plan .planner-cta:hover{background:#453e31}
#plan .planner-cta:active{transform:translateY(1px)}
#plan .planner-disclaimer{font-size:10px;line-height:1.65;color:#645c50;margin-top:14px}
#plan .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:801px) and (max-width:1100px){#plan .estimator__grid{grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr);gap:32px 22px}#plan .estimator__form{padding:22px}#plan .project-choice__body{display:block;min-height:130px;padding:14px}#plan .project-choice svg{margin-bottom:8px}#plan .planner-summary{padding:22px}#plan .planner-options{grid-template-columns:1fr}#plan .planner-options label>span{padding:12px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}#plan .planner-options small{margin:0;text-align:right}#plan .estimator__out{position:static}}
@media(max-width:800px){#plan .estimator__grid{grid-template-columns:1fr;gap:28px}#plan .planner-heading{grid-template-columns:1fr;gap:18px}#plan .planner-heading .lede{max-width:42ch;font-size:16px}#plan .estimator__form{padding:22px;gap:26px}#plan .estimator__out{position:static}#plan .planner-preview{height:200px}#plan .planner-summary{padding:26px}#plan .planner-summary h3{font-size:44px}#plan .planner-schedule__value strong{font-size:60px}}
@media(max-width:480px){#plan .estimator__form{padding:18px}#plan .planner-fieldset legend{font-size:16px;gap:8px}#plan .project-choices{gap:8px}#plan .project-choice__body{display:block;min-height:138px;padding:12px}#plan .project-choice svg{width:32px;height:32px;margin-bottom:8px}#plan .project-choice strong{font-size:13px}#plan .project-choice small{font-size:11px}#plan .planner-options{grid-template-columns:1fr}#plan .planner-options label>span{padding:12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}#plan .planner-options small{margin:0;text-align:right}#plan .planner-size__heading p{font-size:12px;max-width:13ch}#plan .planner-size__value input{font-size:25px}#plan .planner-preview{height:170px}}
@media(prefers-reduced-motion:reduce){#plan *,#plan *::before,#plan *::after{transition:none!important}}
#plan .planner-heading{max-width:none;width:100%}
#plan .planner-heading h2{margin-bottom:0}
.sticky-cta.is-planning{visibility:hidden;pointer-events:none;opacity:0}
@media(min-width:1101px) and (max-height:950px){#plan .estimator__out{position:static}}

/* Uploaded floor-plan-to-home hero; independent of the older scroll-scrub chapter. */
.video-hero{position:relative;margin-top:calc(-1 * var(--header-h));height:min(820px,calc(100svh - var(--banner-h)));min-height:660px;background:#1c201d;color:#faf7f0;isolation:isolate}
.video-hero__media{position:absolute;inset:0;overflow:hidden}
.video-hero__poster,.video-hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.video-hero__film{opacity:0;transition:opacity .35s ease}
.video-hero__film.has-frame{opacity:1}
.video-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,#0c171bbe 0%,#0c171b65 43%,#0c171b00 78%),linear-gradient(0deg,#0c171b80,transparent 55%),linear-gradient(180deg,#0c171b80,transparent 25%);pointer-events:none}
.video-hero__copy{position:absolute;left:var(--gutter);bottom:95px;max-width:700px;padding-right:24px;pointer-events:none}
.video-hero__copy a{pointer-events:auto}
.video-hero__copy .eyebrow{color:#f1eee5;margin-bottom:24px;font-size:11px}
.video-hero__copy h1{font-size:clamp(58px,6.2vw,94px);line-height:.99;max-width:15ch;margin-bottom:24px;text-wrap:balance}
.video-hero__copy .lede{font-size:17px;line-height:1.65;max-width:40ch;color:#f1eee5;margin-bottom:20px}
.video-hero__copy .link{font-size:19px}
.video-hero__toggle{position:absolute;right:var(--gutter);bottom:30px;z-index:2;display:flex;gap:10px;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #ffffff60;border-radius:5px;background:#18201bd9;color:#faf7f0;font-size:12px}
.video-hero__toggle:hover{background:#18201b}
.video-hero__toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.video-hero__caption{position:absolute;bottom:39px;left:var(--gutter);font:10px var(--font-mono);color:#e1e3dc;letter-spacing:.02em}
@media(max-width:800px){.video-hero{margin-top:0;height:auto;min-height:0;padding-bottom:30px}.video-hero__media{position:relative;aspect-ratio:16/9}.video-hero__poster,.video-hero__film{object-fit:contain}.video-hero__shade{background:linear-gradient(0deg,#15201970,transparent 35%)}.video-hero__copy{position:relative;left:auto;bottom:auto;padding:32px var(--gutter) 24px;max-width:none}.video-hero__copy h1{font-size:clamp(42px,7.6vw,62px);max-width:19ch}.video-hero__copy .eyebrow{font-size:9px;margin-bottom:18px}.video-hero__copy .lede{font-size:15px;max-width:43ch}.video-hero__toggle{right:16px;bottom:12px;min-height:40px;padding:8px 12px}.video-hero__caption{position:static;padding:0 var(--gutter);font-size:9px}.home:has(.video-hero) .site-header.is-clear{background:var(--bg);color:var(--ink);border-color:var(--line)}.home:has(.video-hero) .site-header.is-clear .brand__mark{border-color:var(--ink)}.home:has(.video-hero) .site-header.is-clear .menu-toggle{color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.video-hero__film{transition:none}}
/* The home navigation is fixed: overlay it on desktop, reserve its space on phones. */
.video-hero{margin-top:0}
@media(max-width:800px){.video-hero{padding-top:var(--header-h)}}

/* Interior tour: readable static story first, scroll film as progressive enhancement. */
.interior-tour{--tour-top:calc(var(--banner-h) + var(--header-h));background:#1c201d;color:#faf7f0;position:relative}
.interior-tour__stage{position:relative;overflow:hidden}
.interior-tour__media{position:relative;aspect-ratio:16/9;background:#1c201d}
.interior-tour__media img,.interior-tour__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.interior-tour__media video{opacity:0;pointer-events:none}
.interior-tour__media video.has-frame{opacity:1}
.interior-tour__topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px var(--gutter);position:relative;z-index:2}
.interior-tour__topline p{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.interior-tour__topline p span{opacity:.7}
.interior-tour__skip{display:none;font-size:12px;min-height:44px;align-items:center;gap:12px}
.interior-tour__story{padding:10px var(--gutter) 50px;display:grid;gap:38px}
.interior-tour__panel{max-width:560px}
.interior-tour__label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#dfb596;margin-bottom:18px}
.interior-tour__panel .display{font-size:clamp(46px,6.6vw,96px);line-height:.94;letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance}
.interior-tour__panel>p:last-of-type{font-size:16px;line-height:1.65;max-width:38ch;color:#eeeae2}
.interior-tour__panel .link{font-size:16px;margin-top:20px;display:inline-flex}
.interior-tour__navigation{display:none}
.interior-tour.is-enhanced{height:360svh}
.is-enhanced .interior-tour__stage{position:sticky;top:var(--tour-top);height:calc(100svh - var(--tour-top));min-height:460px}
.is-enhanced .interior-tour__media{position:absolute;inset:0;aspect-ratio:auto}
.is-enhanced .interior-tour__media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101713c9,transparent 85%),linear-gradient(0deg,#101713aa,transparent 75%),linear-gradient(180deg,#10171370,transparent 30%);pointer-events:none}
.is-enhanced .interior-tour__topline{padding-block:18px}
.is-enhanced .interior-tour__skip{display:inline-flex}
.is-enhanced .interior-tour__story{position:absolute;left:0;right:0;bottom:100px;padding-block:0;display:grid;gap:0}
.is-enhanced .interior-tour__panel{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .4s ease,transform .55s ease,visibility .4s;pointer-events:none}
.is-enhanced .interior-tour__panel.is-current{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.is-enhanced .interior-tour__navigation{position:absolute;bottom:30px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;gap:24px;color:#eeeae2}
.interior-tour__navigation .mono{font-size:10px;white-space:nowrap}
.interior-tour__track{height:1px;background:#ffffff40;flex:1;overflow:hidden}
.interior-tour__track span{display:block;width:100%;height:100%;background:#dfb596;transform:scaleX(0);transform-origin:left}
.interior-tour a:focus-visible{outline:2px solid #dfb596;outline-offset:6px}
body.is-touring .sticky-cta{visibility:hidden;pointer-events:none;opacity:0}
@media(max-width:800px){
  .interior-tour__topline p span{display:none}
  .interior-tour__panel .display{font-size:clamp(40px,7vw,58px);margin-bottom:14px}
  .interior-tour__panel>p:last-of-type{font-size:14px;max-width:45ch;line-height:1.55}
  .interior-tour__label{margin-bottom:12px;font-size:9px}
  .interior-tour__panel .link{font-size:14px;margin-top:14px}
  .is-enhanced .interior-tour__stage{display:flex;flex-direction:column;min-height:0}
  .is-enhanced .interior-tour__media{position:relative;inset:auto;aspect-ratio:16/9;flex:none;width:100%;max-height:47%;overflow:hidden}
  .is-enhanced .interior-tour__media img,.is-enhanced .interior-tour__media video{object-fit:contain}
  .is-enhanced .interior-tour__media::after{background:linear-gradient(180deg,#10171380,transparent 35%)}
  .is-enhanced .interior-tour__topline{position:absolute;top:0;left:0;right:0;padding-block:8px}
  .is-enhanced .interior-tour__story{position:relative;bottom:auto;flex:1;padding:24px var(--gutter) 60px;min-height:0}
  .is-enhanced .interior-tour__panel{align-self:start}
  .is-enhanced .interior-tour__navigation{bottom:22px;gap:16px}
  .interior-tour__navigation .mono{font-size:9px}
}
@media(max-width:640px){.is-enhanced .interior-tour__stage{height:calc(100svh - var(--tour-top) - 56px - env(safe-area-inset-bottom))}.is-enhanced .interior-tour__story{padding-top:22px}.interior-tour__panel .display{font-size:40px}.interior-tour__panel>p:last-of-type{font-size:13px}.interior-tour__panel .link{font-size:13px;margin-top:12px}}
@media(max-height:720px) and (max-width:800px){.is-enhanced .interior-tour__media{max-height:38%}.is-enhanced .interior-tour__story{padding-top:14px;padding-bottom:40px}.interior-tour__panel .display{font-size:32px;margin-bottom:10px}.interior-tour__label{margin-bottom:8px}.is-enhanced .interior-tour__navigation{bottom:12px}.interior-tour__panel>p:last-of-type{font-size:12px;line-height:1.45}}
@media(max-height:540px){.is-enhanced .interior-tour__stage{min-height:0}.is-enhanced .interior-tour__media{position:absolute;inset:0;max-height:none;aspect-ratio:auto}.is-enhanced .interior-tour__media img,.is-enhanced .interior-tour__media video{object-fit:cover}.is-enhanced .interior-tour__media::after{background:linear-gradient(90deg,#101713e6,#10171340)}.is-enhanced .interior-tour__story{position:absolute;bottom:44px;padding-block:0}.is-enhanced .interior-tour__panel{max-width:540px}.interior-tour__panel .display{font-size:34px;margin-bottom:10px}.interior-tour__panel .display br{display:none}.interior-tour__panel>p:last-of-type{font-size:12px;max-width:50ch}.interior-tour__label{display:none}.interior-tour__panel .link{font-size:12px;margin-top:8px}.is-enhanced .interior-tour__navigation{bottom:14px}}

/* Wide comparison tables scroll inside the article on phones instead of pushing the page sideways. */
@media (max-width: 640px) {
  .article__table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Launch audit polish: the "Skip tour" link keeps a shadow over the bright ceiling and sky. */
.interior-tour__skip { text-shadow: 0 1px 10px rgba(0, 0, 0, .75); }