/* -------------------------------------------------- *\
   Loader
\* -------------------------------------------------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--color-paper);
  display: grid;
  place-items: center;
}
.loader__inner {
  display: grid;
  place-items: center;
  gap: var(--space-lg);
}
.loader__logo {
  width: 3rem;
  height: auto;
  color: var(--color-accent);
  opacity: 0.82;
  animation: loader-pulse 2s var(--ease-in-out) infinite;
}
.loader__text {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  letter-spacing: -0.02em;
}
.loader__bar {
  width: 5rem;
  height: 2px;
  background: var(--color-rule);
  border-radius: 1px;
  overflow: hidden;
}
.loader__bar::after {
  content: '';
  display: block;
  width: 35%;
  height: 100%;
  background: var(--color-accent-2);
  animation: loader-slide 1.3s var(--ease-in-out) infinite;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes loader-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(380%); }
}

/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5 */
			/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom graphite-plan · enrichment: tier-B SVG house plan · nav: N9 · footer: Ft5 · hero: neutral low-copy */
			:root {
				--color-paper: oklch(13% 0.01 55);
				--color-paper-2: oklch(17% 0.012 55);
				--color-paper-3: oklch(22% 0.012 55);
				--color-ink: oklch(94% 0.008 76);
				--color-ink-2: oklch(78% 0.008 70);
				--color-muted: oklch(63% 0.008 68);
				--color-rule: oklch(31% 0.01 55);
				--color-surface: oklch(94% 0.014 78);
				--color-surface-2: oklch(88% 0.016 76);
				--color-surface-3: oklch(81% 0.018 74);
				--color-on-surface: oklch(18% 0.012 55);
				--color-on-surface-2: oklch(39% 0.01 60);
				--color-on-surface-3: oklch(53% 0.01 62);
				--color-line-light: oklch(75% 0.014 75);
				--color-accent: oklch(62% 0.145 55);
				--color-accent-2: oklch(72% 0.105 60);
				--color-accent-ink: oklch(15% 0.02 55);
				--color-focus: oklch(72% 0.16 55);
				--color-error: oklch(55% 0.18 28);
				--font-display:
					"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
				--font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
				--space-3xs: 0.125rem;
				--space-2xs: 0.25rem;
				--space-xs: 0.5rem;
				--space-sm: 0.75rem;
				--space-md: 1rem;
				--space-lg: 1.5rem;
				--space-xl: 2.5rem;
				--space-2xl: 4rem;
				--space-3xl: 6rem;
				--space-4xl: 9rem;
				--text-xs: 0.75rem;
				--text-sm: 0.875rem;
				--text-base: 1rem;
				--text-md: 1.125rem;
				--text-lg: 1.375rem;
				--text-xl: 1.75rem;
				--text-2xl: 2.25rem;
				--text-display: clamp(2.4rem, 3.5vw + 0.3rem, 4rem);
				--radius-sm: 0.5rem;
				--radius-md: 0.875rem;
				--radius-pill: 999px;
				--rule: 1px solid var(--color-rule);
				--rule-light: 1px solid var(--color-line-light);
				--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
				--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
				--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
				--dur-micro: 120ms;
				--dur-short: 220ms;
				--dur-long: 420ms;
			}

			html,
			body {
				overflow-x: clip;
			}
			html {
				scroll-behavior: smooth;
			}
			body {
				margin: 0;
				background: var(--color-paper);
				color: var(--color-ink);
				font-family: var(--font-body);
				font-size: var(--text-base);
				line-height: 1.6;
				text-rendering: optimizeLegibility;
				-webkit-font-smoothing: antialiased;
			}
			body.has-mobile-cta {
				padding-block-end: 4.75rem;
			}
			*,
			*::before,
			*::after {
				box-sizing: border-box;
			}
			::selection {
				background: var(--color-accent);
				color: var(--color-accent-ink);
			}
			a {
				color: inherit;
				text-decoration: none;
			}
			button,
			input {
				font: inherit;
			}
			:focus {
				outline: none;
			}
			:focus-visible {
				outline: 2px solid var(--color-focus);
				outline-offset: 3px;
			}
			.page {
				min-height: 100dvh;
			}
			.container {
				max-width: 72rem;
				margin-inline: auto;
				padding-inline: clamp(1rem, 5vw, 2.5rem);
			}
			.narrow {
				max-width: 48rem;
			}
			.wordmark,
			h1,
			h2,
			h3,
			.display {
				font-family: var(--font-display);
			}
			.tnum {
				font-variant-numeric: tabular-nums;
			}
			.muted {
				color: var(--color-muted);
			}
			.surface-muted {
				color: var(--color-on-surface-2);
			}
			.skip-link {
				position: fixed;
				inset-block-start: var(--space-md);
				inset-inline-start: var(--space-md);
				z-index: 600;
				border-radius: var(--radius-sm);
				background: var(--color-accent);
				color: var(--color-accent-ink);
				padding: var(--space-sm) var(--space-md);
				transform: translateY(-160%);
				transition: transform var(--dur-short) var(--ease-out);
			}
			.skip-link:focus {
				transform: none;
			}
			.nav {
				position: sticky;
				inset-block-start: 0;
				z-index: 200;
				background: var(--color-paper);
				border-block-end: var(--rule);
			}
			.nav__inner {
				min-height: 4.75rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: var(--space-lg);
			}
			.brand {
				display: inline-flex;
				align-items: center;
				gap: var(--space-sm);
				min-height: 44px;
			}
			.brand__mark {
				width: 3rem;
				height: 3.4rem;
				display: grid;
				place-items: center;
				color: var(--color-accent);
				overflow: hidden;
			}
			.brand__mark img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				filter: invert(1);
			}
			.brand__name {
				display: block;
				font-weight: 700;
				letter-spacing: -0.02em;
				line-height: 1;
				font-size: var(--text-lg);
			}
			.brand__meta {
				display: block;
				margin-block-start: var(--space-2xs);
				color: var(--color-muted);
				font-size: var(--text-xs);
				line-height: 1;
			}
			.nav__actions {
				display: flex;
				align-items: center;
				gap: var(--space-md);
			}
			.nav__tel {
				color: var(--color-ink-2);
				font-size: var(--text-sm);
				text-decoration: none;
				white-space: nowrap;
				transition: color var(--dur-short) var(--ease-out);
			}
			.nav__tel:hover {
				color: var(--color-ink);
			}
			.btn,
			.chip,
			.text-link,
			summary {
				-webkit-tap-highlight-color: transparent;
			}
			.btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-height: 44px;
				border-radius: var(--radius-pill);
				border: 1px solid transparent;
				padding: 0.78rem 1.1rem;
				color: var(--color-ink);
				white-space: nowrap;
				transition:
					background-color var(--dur-short) var(--ease-out),
					color var(--dur-short) var(--ease-out),
					border-color var(--dur-short) var(--ease-out),
					transform var(--dur-micro) var(--ease-out),
					opacity var(--dur-short) var(--ease-out);
			}
			.btn:active {
				transform: translateY(1px);
			}
			.btn--primary {
				background: var(--color-accent);
				color: var(--color-accent-ink);
			}
			.btn--primary:hover {
				background: var(--color-accent-2);
			}
			.btn--ghost {
				border-color: var(--color-rule);
			}
			.btn--ghost:hover {
				border-color: var(--color-muted);
			}
			.btn--ink {
				background: var(--color-on-surface);
				color: var(--color-surface);
			}
			.btn--ink:hover {
				background: var(--color-on-surface-2);
			}
			.text-link {
				display: inline-flex;
				align-items: center;
				min-height: 44px;
				color: var(--color-ink-2);
				text-decoration: underline;
				text-underline-offset: 0.28em;
				white-space: nowrap;
				transition: color var(--dur-short) var(--ease-out);
			}
			.text-link:hover {
				color: var(--color-ink);
			}
			.hero {
				min-height: calc(100dvh - 4.75rem);
				display: grid;
				align-items: center;
				padding-block: clamp(2.5rem, 5vw, 4.5rem)
					clamp(3.25rem, 6vw, 6rem);
				border-block-end: var(--rule);
			}
			.hero__grid {
				display: grid;
				gap: clamp(1.75rem, 4vw, 4rem);
			}
			.hero__intro {
				max-width: 43rem;
			}
			.orientation {
				margin: 0 0 var(--space-lg);
				color: var(--color-accent-2);
				font-family: var(--font-display);
				font-size: var(--text-sm);
				font-weight: 600;
			}
			h1 {
				margin: 0;
				max-width: 13.5ch;
				font-size: var(--text-display);
				line-height: 1.02;
				letter-spacing: -0.045em;
				overflow-wrap: anywhere;
				min-width: 0;
			}
			.hero__lead {
				max-width: 39rem;
				margin: var(--space-md) 0 0;
				color: var(--color-ink-2);
				font-size: clamp(1.05rem, 1.1vw + 0.9rem, 1.35rem);
			}
			.hero__actions {
				display: flex;
				flex-wrap: wrap;
				gap: var(--space-sm);
				margin-block-start: var(--space-lg);
			}
			.hero-proof {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--space-sm);
				max-width: 32rem;
				margin-block-start: var(--space-lg);
			}
			.hero-proof__item {
				border-block-start: 2px solid var(--color-accent);
				padding-block-start: var(--space-sm);
			}
			.hero-proof__item b {
				display: block;
				font-family: var(--font-display);
				font-size: clamp(1.75rem, 3vw, 2.75rem);
				line-height: 1;
				letter-spacing: -0.04em;
			}
			.hero-proof__item span {
				display: block;
				margin-block-start: var(--space-xs);
				color: var(--color-muted);
				font-size: var(--text-sm);
			}
			.construction-card {
				border: var(--rule);
				background: var(--color-paper-2);
				border-radius: var(--radius-md);
				padding: clamp(1rem, 3vw, 2rem);
			}
			.construction-card__head {
				display: flex;
				align-items: start;
				justify-content: space-between;
				gap: var(--space-lg);
				margin-block-end: var(--space-lg);
			}
			.construction-card__title {
				margin: 0;
				font-size: var(--text-lg);
				line-height: 1.15;
				letter-spacing: -0.025em;
			}
			.construction-card__note {
				margin: var(--space-xs) 0 0;
				color: var(--color-muted);
				max-width: 34ch;
			}
			.badge {
				display: inline-flex;
				align-items: center;
				min-height: 2rem;
				border: var(--rule);
				border-radius: var(--radius-pill);
				padding-inline: var(--space-sm);
				color: var(--color-ink-2);
				font-size: var(--text-xs);
				white-space: nowrap;
			}
			.house-plan {
				width: 100%;
				max-height: clamp(13rem, 34vh, 22rem);
				height: auto;
				display: block;
				color: var(--color-ink);
			}
			.plan-fill {
				fill: var(--color-paper-3);
				stroke: var(--color-rule);
				stroke-width: 1.6;
			}
			.plan-line {
				fill: none;
				stroke: var(--color-muted);
				stroke-width: 1.7;
				stroke-linecap: round;
				stroke-linejoin: round;
			}
			.plan-line--accent {
				stroke: var(--color-accent-2);
				stroke-width: 3;
			}
			.plan-label {
				fill: var(--color-ink-2);
				font-family: var(--font-display);
				font-size: 14px;
				font-weight: 600;
			}
			.plan-note {
				fill: var(--color-muted);
				font-family: var(--font-body);
				font-size: 11px;
			}
			.material-grid {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--space-sm);
				margin-block-start: var(--space-lg);
			}
			.material-item {
				border-block-start: var(--rule);
				padding-block-start: var(--space-md);
			}
			.material-item b {
				display: block;
				font-family: var(--font-display);
				font-size: var(--text-md);
				line-height: 1.15;
			}
			.material-item span {
				display: block;
				margin-block-start: var(--space-xs);
				color: var(--color-muted);
				font-size: var(--text-sm);
			}
			.surface {
				background: var(--color-surface);
				color: var(--color-on-surface);
			}
			.section {
				padding-block: var(--space-3xl);
			}
			.section--tight {
				padding-block: var(--space-2xl);
			}
			.section + .section {
				border-block-start: var(--rule-light);
			}
			.section-head {
				display: grid;
				gap: var(--space-md);
				margin-block-end: var(--space-xl);
			}
			.section-head h2 {
				margin: 0;
				max-width: 14ch;
				font-size: clamp(2rem, 3vw + 1rem, 4rem);
				line-height: 1.05;
				letter-spacing: -0.04em;
				overflow-wrap: anywhere;
			}
			.section-head p {
				margin: 0;
				max-width: 46rem;
				color: var(--color-on-surface-2);
				font-size: var(--text-md);
			}
			.spec {
				width: 100%;
				border-collapse: collapse;
				font-variant-numeric: tabular-nums;
			}
			.spec th,
			.spec td {
				border-block-start: var(--rule-light);
				padding: var(--space-md) var(--space-sm);
				text-align: left;
				vertical-align: top;
			}
			.spec th {
				width: 28%;
				font-family: var(--font-display);
				font-size: var(--text-md);
				line-height: 1.2;
			}
			.spec td {
				color: var(--color-on-surface-2);
			}
			.spec td:last-child {
				color: var(--color-on-surface-3);
			}
			.steps {
				list-style: none;
				margin: 0;
				padding: 0;
				display: grid;
				gap: var(--space-md);
			}
			.step {
				display: grid;
				grid-template-columns: auto minmax(0, 1fr);
				gap: var(--space-md);
				align-items: start;
				padding-block: var(--space-lg);
				border-block-start: var(--rule-light);
			}
			.step__num {
				width: 3rem;
				color: var(--color-on-surface-3);
				font-family: var(--font-display);
				font-variant-numeric: tabular-nums;
				font-weight: 700;
			}
			.step h3 {
				margin: 0;
				font-size: var(--text-lg);
				letter-spacing: -0.02em;
			}
			.step p {
				margin: var(--space-xs) 0 0;
				color: var(--color-on-surface-2);
				max-width: 55ch;
			}
			.split {
				display: grid;
				gap: var(--space-xl);
			}
			.panel {
				border: var(--rule-light);
				border-radius: var(--radius-md);
				padding: clamp(1rem, 3vw, 2rem);
				background: var(--color-surface-2);
			}
			.panel--dark {
				background: var(--color-paper);
				color: var(--color-ink);
				border-color: var(--color-rule);
			}
			.panel h3 {
				margin: 0;
				font-size: var(--text-xl);
				line-height: 1.1;
				letter-spacing: -0.03em;
			}
			.panel p {
				margin: var(--space-md) 0 0;
				color: inherit;
				opacity: 0.78;
			}
			.brief-grid {
				display: grid;
				gap: var(--space-xl);
				align-items: start;
			}
			.brief-form {
				border: var(--rule-light);
				background: var(--color-surface-2);
				border-radius: var(--radius-md);
				padding: clamp(1rem, 3vw, 2rem);
			}
			.field {
				margin-block-end: var(--space-lg);
			}
			.label {
				display: block;
				margin-block-end: var(--space-xs);
				color: var(--color-on-surface-2);
				font-size: var(--text-sm);
				font-weight: 700;
			}
			.choices {
				display: flex;
				flex-wrap: wrap;
				gap: var(--space-xs);
			}
			.chip {
				min-height: 44px;
				border: var(--rule-light);
				border-radius: var(--radius-pill);
				background: var(--color-surface);
				color: var(--color-on-surface-2);
				padding: 0.65rem 0.9rem;
				cursor: pointer;
				white-space: nowrap;
				transition:
					background-color var(--dur-short) var(--ease-out),
					color var(--dur-short) var(--ease-out),
					border-color var(--dur-short) var(--ease-out),
					transform var(--dur-micro) var(--ease-out);
			}
			.chip[aria-pressed="true"] {
				background: var(--color-on-surface);
				border-color: var(--color-on-surface);
				color: var(--color-surface);
			}
			.chip:active {
				transform: translateY(1px);
			}
			.input-row {
				display: grid;
				grid-template-columns: minmax(0, 1fr) auto;
				gap: var(--space-sm);
				align-items: center;
			}
			.input {
				width: 100%;
				min-height: 44px;
				border: var(--rule-light);
				border-radius: var(--radius-sm);
				background: var(--color-surface);
				color: var(--color-on-surface);
				padding: 0.65rem 0.8rem;
				outline: 2px solid transparent;
				outline-offset: 1px;
				transition:
					background-color var(--dur-short) var(--ease-out),
					border-color var(--dur-short) var(--ease-out);
			}
			.input:hover {
				background: var(--color-surface-2);
			}
			.input:focus-visible {
				outline-color: var(--color-focus);
				border-color: var(--color-on-surface-2);
			}
			.input--compact {
				max-width: 8rem;
			}
			.field--area {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: var(--space-sm);
			}
			.field--area .input-row {
				display: inline-flex;
				align-items: center;
				gap: var(--space-xs);
			}
			.field--area .label {
				margin-block-end: 0;
				white-space: nowrap;
			}
			.unit {
				color: var(--color-on-surface-3);
			}
			.helper {
				min-height: 1lh;
				margin: var(--space-sm) 0 0;
				color: var(--color-on-surface-3);
				font-size: var(--text-sm);
			}
			.helper[data-state="error"] {
				color: var(--color-error);
			}
			.faq {
				border-block-start: var(--rule-light);
			}
			details {
				border-block-end: var(--rule-light);
			}
			summary {
				min-height: 56px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: var(--space-lg);
				cursor: pointer;
				font-family: var(--font-display);
				font-size: var(--text-md);
				font-weight: 600;
				list-style: none;
			}
			summary::-webkit-details-marker {
				display: none;
			}
			summary span {
				color: var(--color-on-surface-3);
				transition: transform var(--dur-short) var(--ease-in-out);
			}
			details[open] summary span {
				transform: rotate(45deg);
			}
			details p {
				margin: 0 0 var(--space-lg);
				max-width: 60ch;
				color: var(--color-on-surface-2);
			}
			.footer {
				border-block-start: var(--rule);
				padding-block: var(--space-3xl) var(--space-xl);
			}
			.footer__line {
				margin: 0;
				max-width: 14ch;
				font-family: var(--font-display);
				font-size: clamp(2.25rem, 5vw, 4.5rem);
				line-height: 1.02;
				letter-spacing: -0.045em;
			}
			.footer__meta {
				display: grid;
				gap: var(--space-md);
				margin-block-start: var(--space-xl);
				padding-block-start: var(--space-lg);
				border-block-start: var(--rule);
				color: var(--color-muted);
			}
			.footer__links {
				display: flex;
				flex-wrap: wrap;
				gap: var(--space-sm) var(--space-lg);
			}
			.footer__links a {
				text-decoration: underline;
				text-underline-offset: 0.25em;
				white-space: nowrap;
			}
			.mobile-cta {
				position: fixed;
				inset-inline: 0;
				inset-block-end: 0;
				z-index: 220;
				border-block-start: var(--rule);
				background: var(--color-paper);
				padding: var(--space-sm)
					max(var(--space-md), env(safe-area-inset-left))
					max(var(--space-sm), env(safe-area-inset-bottom));
				transition: transform var(--dur-short) var(--ease-out);
			}
			.mobile-cta .btn {
				width: 100%;
			}
			@media (hover: hover) and (pointer: fine) {
				.btn:hover,
				.chip:hover {
					transform: translateY(-1px);
				}
			}
			@media (min-width: 40rem) {
				body.has-mobile-cta {
					padding-block-end: 0;
				}
				.footer__meta {
					grid-template-columns: 1fr auto;
					align-items: end;
				}
				.mobile-cta {
					display: none;
				}
			}
			@media (min-width: 60rem) {
				.hero__grid {
					grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
					align-items: center;
				}
				.construction-card {
					justify-self: stretch;
				}
				.section-head {
					grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
					align-items: end;
				}
				.split {
					grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
				}
				.brief-grid {
					grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
				}
			}
			@media (max-width: 39.98rem) {
				.hero {
					min-height: auto;
					padding-block: var(--space-xl) var(--space-2xl);
				}
				.nav__inner {
					min-height: 4.25rem;
				}
				.brand__meta {
					display: none;
				}
				.nav .btn {
					padding-inline: var(--space-sm);
				}
				h1 {
					max-width: 12ch;
				}
				.hero-proof {
					grid-template-columns: minmax(0, 1fr);
				}
				.construction-card__head {
					display: block;
				}
				.badge {
					margin-block-start: var(--space-md);
				}
				.nav__tel {
					display: none;
				}
				.brand__name {
					font-size: var(--text-base);
				}
				.spec,
				.spec tbody,
				.spec tr,
				.spec th,
				.spec td {
					display: block;
					width: 100%;
				}
				.spec tr {
					border-block-start: var(--rule-light);
					padding-block: var(--space-md);
				}
				.spec th,
				.spec td {
					border: 0;
					padding: 0;
				}
				.spec td {
					margin-block-start: var(--space-xs);
				}
				.material-grid {
					grid-template-columns: minmax(0, 1fr);
				}
				.step {
					grid-template-columns: minmax(0, 1fr);
				}
				.step__num {
					width: auto;
				}
			}
			@media (prefers-reduced-motion: reduce) {
				*,
				*::before,
				*::after {
					animation-duration: 150ms !important;
					animation-iteration-count: 1 !important;
					transition-duration: 150ms !important;
					scroll-behavior: auto !important;
				}
			}