/* United Capital Construction — site styles
   Warm, calm and legible for homeowners around 60: cream paper, dark warm charcoal only for the
   closing section and footer, gold accent, generous type. The hero is a layered sunset photo with
   the word "ADU" set behind the house and trees.
   display: Archivo expanded (hero word, brand) · headings + body: Barlow · utility: IBM Plex Mono (drawing only) */

:root {
  --gold: #F4B41A;
  --gold-deep: #D99A0E;
  --gold-ink: #8A5B00;
  --cream: #F6F3EE;
  --sand: #ECE8E0;
  --white: #FFFFFF;
  --ink: #1F1C18;
  --text: #33302B;
  --muted: #5C5750;
  --faint: #7A746B;
  --line: #D9D3C8;
  --line-2: #C2BBAE;
  --dark: #1F1C18;
  --dark-2: #2B2722;
  --dark-line: #3D382F;
  --on-dark: #F4F1EA;
  --on-dark-muted: #B8B1A5;
  --display: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-ink); }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic-gold { color: var(--gold-ink); }
.ic-ink { color: var(--ink); }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 8vw, 104px); }
.section-light { background: var(--sand); }
.section-paper { background: var(--white); }

/* type */
.eyebrow { font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.label { font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.h2 { font-weight: 600; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.h3 { font-weight: 600; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.lead { color: var(--muted); max-width: 34em; font-size: 19px; }

.section-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; }
.section-head > .head-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.section-head > .lead { flex: 1 1 360px; min-width: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 56px; padding: 0 20px 0 24px; font-weight: 600; font-size: 18px; text-decoration: none; border: 0; border-radius: 4px; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.btn svg { flex: none; width: 24px; height: 24px; }
.btn-sm svg { width: 20px; height: 20px; }
.btn-lg svg { width: 26px; height: 26px; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-deep); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--on-dark); }
.btn-ink:hover { background: #3A352E; color: var(--on-dark); }
.btn-ink svg { color: var(--gold); }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { min-height: 50px; gap: 18px; padding: 0 16px 0 20px; font-size: 17px; }
.btn-lg { min-height: 64px; gap: 40px; padding: 0 22px 0 26px; font-size: 20px; }

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: hidden; width: 100%; height: 100vh; height: 100svh; min-height: 640px; background: #2A2320; color: var(--on-dark); }
.hero-bg, .hero-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms ease; pointer-events: none; }
.slide.is-active { opacity: 1; pointer-events: auto; }
.hero-word { position: absolute; left: 6.25%; width: 87.5%; height: auto; overflow: visible; pointer-events: none; }
.hero-word text { font-family: var(--display); font-weight: 900; font-stretch: 125%; letter-spacing: 0.01em; }
.word-build { top: calc(47.5px + 12.7% - 9.7vw); }
.word-build text { font-size: 104px; }
.word-nb { top: calc(47.5px + 12.7% - 9.7vw); }
.word-nb text { font-size: 104px; }
.word-adu { top: 15%; }
.word-adu text { font-size: 178px; }
.hero-nav { position: absolute; right: 28px; bottom: 28px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(28, 22, 18, 0.32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.16); }
.hero-arrow { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; color: #FFFFFF; display: grid; place-items: center; }
.hero-arrow:hover { background: rgba(255, 255, 255, 0.16); }
.hero-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background: transparent; padding: 0; }
.hero-dot.is-active { background: var(--gold); border-color: var(--gold); }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(40, 28, 30, 0.2) 0%, rgba(40, 28, 30, 0) 18%),
  linear-gradient(0deg, rgba(30, 22, 18, 0.66) 0%, rgba(30, 22, 18, 0.3) 24%, rgba(30, 22, 18, 0) 46%); }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; background: rgba(28, 20, 18, 0.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 245, 230, 0.14); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); min-width: 0; }
.brand:hover { color: var(--on-dark); }
.brand img { height: 72px; width: auto; }
.hero .brand { text-shadow: 0 1px 10px rgba(20, 12, 10, 0.5); }
.pill { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 245, 230, 0.1); border: 1px solid rgba(255, 245, 230, 0.16); }
.pill a { padding: 11px 20px; border-radius: 999px; color: #E6DED2; text-decoration: none; font-weight: 500; font-size: 16px; white-space: nowrap; transition: color 150ms ease, background 150ms ease; }
.pill a:hover { color: #FFFFFF; background: rgba(255, 245, 230, 0.1); }
.pill a[aria-current="page"] { background: rgba(255, 250, 240, 0.92); color: var(--ink); font-weight: 600; padding-inline: 22px; }
.nav-right { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-start { color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 17px; white-space: nowrap; text-shadow: 0 1px 8px rgba(20, 12, 10, 0.55); }
.nav-start:hover { color: var(--gold); }
.menu-btn { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255, 245, 230, 0.1); border: 1px solid rgba(255, 245, 230, 0.16); border-radius: 999px; color: #FFFFFF; }
.menu-btn .ico-close { display: none; }
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }
.menu-wrap { display: flex; justify-content: flex-end; }
.menu { width: 100%; max-width: 360px; background: rgba(252, 249, 243, 0.97); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 50px rgba(20, 12, 10, 0.25); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.menu a { padding: 13px 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px; border-bottom: 1px solid var(--line); }
.menu a:hover { color: var(--gold-ink); }
.menu-call { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 4px; }
.menu-call a { border: 0; padding: 0; color: var(--gold-ink); font-size: 24px; font-variant-numeric: tabular-nums; }

.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
.hero-foot-inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; padding-inline: clamp(16px, 2vw, 28px); padding-bottom: clamp(16px, 2vw, 28px); }
.hero-card { flex: 0 1 480px; min-width: 0; background: rgba(28, 22, 18, 0.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 18px; color: #FFFFFF; text-shadow: 0 1px 8px rgba(20, 12, 10, 0.45); }
.hero-card-text { display: flex; flex-direction: column; gap: 8px; }
.hero-card h1 { font-weight: 600; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -0.015em; color: #FFFFFF; white-space: nowrap; }
.hero-card h1 .dot { color: #E0342B; }
.hero-card p { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.hero-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero-card .btn { align-self: flex-start; text-shadow: none; }
.hero-call { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; color: #FFFFFF; white-space: nowrap; }
.hero-call:hover { color: var(--gold); }
.hero-call .k { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.hero-call .v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-call:hover .v { color: var(--gold); }
.hero-call .ic, .hero-call .m { display: none; }

/* trade band */
.band { background: var(--gold); color: var(--ink); }
.band-inner { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; padding-block: 16px; font-weight: 600; font-size: clamp(16px, 1.5vw, 19px); letter-spacing: 0.04em; text-transform: uppercase; }
.band-inner .sep { color: #8A6200; }

/* ---------------- services ---------------- */
.services { display: flex; flex-direction: column; gap: 40px; }
.svc-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.svc-tab { text-align: left; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); padding: 22px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border-radius: 6px; transition: background 160ms ease, border-color 160ms ease; }
.svc-tab:hover { border-color: var(--gold-deep); }
.svc-tab .label { font-size: 13px; letter-spacing: 0.08em; }
.svc-tab .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.svc-tab .name { font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: -0.01em; }
.svc-tab svg { flex: none; }
.svc-tab[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.svc-tab[aria-pressed="true"] .label { color: #5A4310; }
.svc-pane { border: 1.5px solid var(--line); background: var(--white); border-radius: 6px; overflow: hidden; display: flex; flex-wrap: wrap; }
.svc-body { flex: 1 1 540px; min-width: 0; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 26px; }
.svc-body .intro { display: flex; flex-direction: column; gap: 12px; }
.svc-body h3 { font-weight: 600; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.svc-body p { max-width: 36em; color: var(--muted); }
.svc-group { display: flex; flex-direction: column; gap: 12px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 28px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; color: var(--text); }
.checks svg { flex: none; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { border: 1.5px solid var(--line-2); padding: 6px 14px; font-size: 15px; border-radius: 999px; color: var(--text); }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding-top: 4px; }
.svc-actions a:not(.btn) { font-weight: 600; text-underline-offset: 4px; }
.svc-img { flex: 1 1 400px; min-width: 0; position: relative; min-height: 360px; background: var(--sand); }
.svc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* job-site photo: crop mostly sky so the fence banner stays in view */
.svc-img-site img { object-position: 50% 85%; }
/* septic photo is tall: crop toward the bottom so both tank lids stay in view */
.svc-img-septic img, .card-img-septic img { object-position: 50% 80%; }
.card-img-concrete img { object-position: 50% 62%; }

/* ---------------- ADUs ---------------- */
.adus { display: flex; flex-direction: column; gap: 48px; }
.photo-feature { position: relative; max-width: 720px; margin-inline: auto; }
.photo-feature img { width: 100%; height: auto; aspect-ratio: 1116 / 1495; object-fit: cover; border-radius: 6px; }
.photo-feature figcaption { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); background: rgba(255, 252, 246, 0.94); color: var(--text); border-left: 4px solid var(--gold); border-radius: 0 4px 4px 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.photo-feature figcaption .eyebrow { font-size: 13px; }
.nc { display: flex; flex-direction: column; gap: 40px; }
/* 3D floor plans (js/floorplan.js) */
.plan3d { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.plan-frame { position: relative; }
.plan-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #FFFFFF 0%, var(--cream) 62%, var(--sand) 100%); }
.plan-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.plan-stage canvas:active { cursor: grabbing; }
.plan-flat { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; object-fit: contain; }
.plan3d.is-live .plan-flat { display: none; }
.plan-tabs { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 252, 246, 0.94); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(30, 20, 15, 0.1); }
.plan-tabs button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 600; font-size: 16px; }
.plan-tabs button:hover { background: var(--sand); }
.plan-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.plan-hint { position: absolute; right: 16px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 252, 246, 0.9); color: var(--muted); font-size: 15px; pointer-events: none; }
.plan3d:not(.is-live) .plan-hint { display: none; }
/* wide screens show both floors side by side, each with a label; narrow screens switch with the buttons */
.plan-labels { display: none; }
.plan3d.is-live.is-pair .plan-labels { display: block; }
.plan3d.is-live.is-pair .plan-tabs { display: none; }
.plan-label { position: absolute; top: 85%; z-index: 2; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(255, 252, 246, 0.94); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(30, 20, 15, 0.08); font-weight: 600; font-size: 16px; color: var(--ink); white-space: nowrap; }
.plan-cap { font-size: 15px; color: var(--muted); }

/* New-build steps: one row joined by a rail that fills in gold, step by step, when it scrolls into view */
.build-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; padding: 34px 28px 32px; border-radius: 12px; border: 1px solid var(--line);
  background-color: var(--cream);
  background-image: linear-gradient(rgba(138, 91, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 91, 0, 0.05) 1px, transparent 1px);
  background-size: 24px 24px; }
.build-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.build-steps li:nth-child(2) { --i: 1; }
.build-steps li:nth-child(3) { --i: 2; }
.build-steps li:nth-child(4) { --i: 3; }
.build-steps li:nth-child(5) { --i: 4; }
.build-steps li:nth-child(6) { --i: 5; }
.build-steps .node { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-2); color: var(--faint);
  transition: background 350ms ease, border-color 350ms ease, color 350ms ease, box-shadow 350ms ease; transition-delay: calc(var(--i, 0) * 480ms); }
.build-steps li:not(:last-child)::before, .build-steps li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 64px; right: -10px; height: 4px; border-radius: 2px; background: var(--line); }
.build-steps li:not(:last-child)::after { background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 400ms linear; transition-delay: calc(var(--i, 0) * 480ms + 180ms); }
.build-steps.is-in .node { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 6px rgba(244, 180, 26, 0.22); }
.build-steps.is-in li::after { transform: scaleX(1); }
.build-steps .num { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: 0.08em; color: var(--gold-ink); }
.build-steps .t { font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--ink); }
.build-steps .b { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1099px) {
  /* narrower screens: the same timeline, running down the page */
  .build-steps { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px; }
  .build-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: start; }
  .build-steps .node { grid-row: 1 / span 3; margin-bottom: 0; }
  .build-steps li:not(:last-child)::before, .build-steps li:not(:last-child)::after { top: 64px; bottom: -18px; left: 26px; right: auto; width: 4px; height: auto; }
  .build-steps li:not(:last-child)::after { transform: scaleY(0); transform-origin: center top; }
  .build-steps.is-in li::after { transform: scaleY(1); }
}
.nc-cta { align-self: flex-start; }
.photo-feature figcaption span:last-child { font-size: 16px; line-height: 1.4; }
.plan-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.plan { flex: 999 1 580px; min-width: 0; background: #FBFAF7; border: 1.5px solid var(--ink); }
.plan svg { display: block; width: 100%; height: auto; }
.plan-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1.5px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.plan-meta span { padding: 10px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.plan-meta span:last-child { border-right: 0; }
.plan-meta .k { color: var(--faint); }
.plan-meta .v { font-weight: 600; }
.plan text { font-family: var(--mono); }
.plan .mk text { font-family: var(--display); font-weight: 800; }
.pl-pad { fill: #EDE6D8; }  .pl-adu, .pl-home { fill: #FFFFFF; }  .pl-land { fill: #EDE6D8; }  .pl-path { stroke: #CFC8BB; stroke-width: 9; }
.pl-trench { stroke: var(--ink); stroke-width: 2.5; }
.mk circle { fill: var(--ink); }  .mk text { fill: #FFFFFF; }
.plan[data-layer="pad"] .pl-pad, .plan[data-layer="adu"] .pl-adu, .plan[data-layer="land"] .pl-land, .plan[data-layer="home"] .pl-home { fill: var(--gold); }
.plan[data-layer="land"] .pl-path { stroke: var(--gold); }
.plan[data-layer="trench"] .pl-trench { stroke: #C98700; stroke-width: 5; }
.plan[data-layer="pad"] .mk-pad circle, .plan[data-layer="adu"] .mk-adu circle, .plan[data-layer="trench"] .mk-trench circle,
.plan[data-layer="land"] .mk-land circle, .plan[data-layer="home"] .mk-home circle { fill: var(--gold); }
.plan[data-layer="pad"] .mk-pad text, .plan[data-layer="adu"] .mk-adu text, .plan[data-layer="trench"] .mk-trench text,
.plan[data-layer="land"] .mk-land text, .plan[data-layer="home"] .mk-home text { fill: var(--ink); }

.layers { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.layers .label { padding-bottom: 6px; }
.layer { text-align: left; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--white); color: var(--ink); border: 1.5px solid var(--line); border-radius: 6px; transition: background 150ms ease, border-color 150ms ease; }
.layer:hover { border-color: var(--ink); }
.layer .num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-weight: 700; font-size: 16px; }
.layer .txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.layer .t { font-weight: 600; font-size: 19px; line-height: 1.15; }
.layer .b { display: none; font-size: 16px; line-height: 1.5; color: var(--on-dark-muted); }
.layer[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.layer[aria-pressed="true"] .num { background: var(--gold); color: var(--ink); }
.layer[aria-pressed="true"] .b { display: block; }

.adu-types { display: flex; flex-direction: column; gap: 24px; padding-top: 28px; border-top: 1.5px solid var(--line-2); }
.adu-types-head { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: flex-end; }
.adu-types-head p { max-width: 30em; font-size: 16px; color: var(--muted); }
.adu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.adu-card { background: var(--white); border: 1.5px solid var(--line); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.adu-card h4 { font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); }
.adu-card .label { font-size: 13px; color: var(--gold-ink); }
.adu-card p { font-size: 16px; color: var(--muted); }

/* ---------------- septic ---------------- */
.septic { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.septic-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.septic-main .intro { display: flex; flex-direction: column; gap: 14px; }
.steps { display: flex; flex-direction: column; border-top: 1.5px solid var(--line-2); }
.steps li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps .num { flex: none; width: 48px; font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.steps .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.steps .t { font-weight: 600; font-size: 21px; line-height: 1.15; color: var(--ink); }
.steps .b { font-size: 17px; color: var(--muted); }
.septic-main .btn { align-self: flex-start; }
.septic-side { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.septic-side figure { display: flex; flex-direction: column; gap: 10px; }
.septic-side img { width: 100%; object-fit: cover; border-radius: 6px; }
.septic-side figcaption { font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.callout { background: var(--white); border: 1.5px solid var(--line); border-top: 4px solid var(--gold); border-radius: 6px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.callout .t { font-weight: 600; font-size: 21px; line-height: 1.1; color: var(--ink); }
.callout ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--text); }

/* ---------------- remodeling ---------------- */
.remodel { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.remodel-main { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.remodel-main .intro { display: flex; flex-direction: column; gap: 14px; }
.remodel-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; border-top: 1.5px solid var(--line-2); }
.remodel-list div { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.remodel-list .t { font-weight: 600; font-size: 19px; color: var(--ink); }
.remodel-list .b { font-size: 16px; color: var(--muted); }
.remodel-main .btn { align-self: flex-start; }
.ba { flex: 1 1 580px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ba-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--sand); }
.ba-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip-before, .chip-after { position: absolute; z-index: 1; top: 12px; left: 12px; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; }
.chip-before { background: var(--ink); color: var(--on-dark); }
.chip-after { background: var(--gold); color: var(--ink); }
.ba figcaption { font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

/* ---------------- projects ---------------- */
.projects { display: flex; flex-direction: column; gap: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--white); color: var(--ink); font-weight: 600; font-size: 16px; transition: background 150ms ease, border-color 150ms ease; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--white); border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.card-img { position: relative; }
.card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.card .chip-before, .card .chip-after { top: 10px; left: 10px; font-size: 11px; padding: 3px 8px; }
.card .chip-after.side { left: calc(50% + 10px); }
.card .chip-after.below { top: calc(50% + 10px); }
.card figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.card figcaption .cat { font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.card figcaption .t { font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--ink); }
.gal-count { font-size: 15px; color: var(--faint); }

/* ---------------- process ---------------- */
/* How a project runs: a pinned heading with a step counter, and a rail that fills in gold as you scroll */
.process { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
.process-aside { position: sticky; top: 48px; display: flex; flex-direction: column; gap: 16px; }
.process-meter { margin-top: 18px; padding: 22px 24px 24px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(40, 30, 20, 0.06); }
.pm-count { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-stretch: 125%; font-weight: 800; line-height: 1; }
.pm-cur { font-size: 64px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.pm-of { font-size: 22px; color: var(--faint); }
.pm-title { margin-top: 10px; font-weight: 600; font-size: 21px; color: var(--ink); min-height: 1.3em; }
.process-meter.flip .pm-cur, .process-meter.flip .pm-title { animation: pm-in 420ms ease both; }
@keyframes pm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pm-bar { margin-top: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pm-bar span { height: 6px; border-radius: 3px; background: var(--sand); transition: background 300ms ease; }
.pm-bar span.on { background: var(--gold); }

.process-flow { position: relative; display: flex; flex-direction: column; gap: 22px; --fill: 0; --rail-bottom: 40px; }
.process-flow::before, .process-flow::after { content: ""; position: absolute; left: 31px; top: 32px; bottom: var(--rail-bottom); width: 3px; border-radius: 2px; background: var(--line-2); }
.process-flow::after { background: var(--gold); transform-origin: center top; transform: scaleY(var(--fill)); }
.pf-step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start;
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .7, .2, 1); }
.process-flow.js-anim .pf-step:not(.is-seen) { opacity: 0; transform: translateY(32px); }
.pf-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-2); color: var(--faint);
  transition: background 350ms ease, border-color 350ms ease, color 350ms ease, box-shadow 350ms ease, transform 350ms ease; }
.pf-step.is-on .pf-icon { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 7px rgba(244, 180, 26, 0.22); transform: scale(1.04); }
.pf-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 26px; border-radius: 12px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(40, 30, 20, 0.05); transition: border-color 350ms ease, box-shadow 350ms ease, transform 350ms ease; }
.pf-step.is-on .pf-card { border-color: rgba(217, 154, 14, 0.45); box-shadow: 0 14px 36px rgba(40, 30, 20, 0.09); }
.pf-big { position: absolute; right: 18px; top: 6px; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 76px; line-height: 1; color: rgba(138, 91, 0, 0.07); pointer-events: none; transition: color 350ms ease; }
.pf-step.is-on .pf-big { color: rgba(217, 154, 14, 0.16); }
.pf-num { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.pf-t { font-weight: 600; font-size: 23px; line-height: 1.2; color: var(--ink); }
.pf-b { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 34em; }
@media (max-width: 999px) {
  .process { grid-template-columns: 1fr; }
  .process-aside { position: static; }
  .process-meter { display: none; }
}
@media (max-width: 560px) {
  .process-flow::before, .process-flow::after { left: 25px; top: 26px; }
  .pf-step { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .pf-icon { width: 52px; height: 52px; }
  .pf-icon svg { width: 24px; height: 24px; }
  .pf-card { padding: 18px 18px 20px; }
  .pf-big { font-size: 56px; right: 12px; }
  .pf-t { font-size: 20px; }
  .pf-b { font-size: 16px; }
}

/* ---------------- about ---------------- */
.about { display: flex; flex-direction: column; gap: 56px; }
.why { display: flex; flex-direction: column; gap: 32px; }
.why .intro { display: flex; flex-direction: column; gap: 14px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5px; background: var(--line); border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; }
.why-grid div { background: var(--cream); padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.why-grid .t { font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--ink); }
.why-grid .b { font-size: 16px; color: var(--muted); }
.where { display: flex; flex-wrap: wrap; gap: 32px 56px; padding-top: 48px; border-top: 1.5px solid var(--line); }
.where-intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.where-intro p { color: var(--muted); max-width: 26em; }
.where-intro .pin { display: flex; gap: 10px; align-items: center; color: var(--gold-ink); font-weight: 600; }
.counties { flex: 999 1 600px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.counties div { display: flex; flex-direction: column; gap: 8px; }
.counties .t { font-weight: 600; font-size: 20px; color: var(--ink); border-bottom: 2px solid var(--line-2); padding-bottom: 6px; }
.counties .b { font-size: 16px; line-height: 1.8; color: var(--text); }

/* ---------------- faq ---------------- */
.faq { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.faq-intro { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.faq-intro p { color: var(--muted); max-width: 26em; }
.faq-intro a { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.faq-list { flex: 999 1 560px; min-width: 0; border-top: 1.5px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary { list-style: none; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; cursor: pointer; color: var(--ink); font-weight: 600; font-size: 20px; line-height: 1.25; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--gold-ink); }
.faq-sign { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-size: 20px; }
.faq-sign::before { content: "+"; }
details[open] .faq-sign { background: var(--ink); color: var(--gold); }
details[open] .faq-sign::before { content: "−"; }
.faq-list details p { padding: 0 56px 22px 0; font-size: 17px; color: var(--text); max-width: 40em; }

/* ---------------- closing CTA ---------------- */
.cta-section { background: var(--dark); padding-block: clamp(40px, 6vw, 88px); }
.cta { position: relative; overflow: hidden; min-height: clamp(440px, 42vw, 600px); padding: clamp(28px, 5vw, 76px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; border-radius: 8px; border: 1px solid rgba(244, 241, 234, 0.07); background:
  radial-gradient(ellipse 55% 75% at 36% -8%, rgba(196, 128, 34, 0.42) 0%, rgba(120, 76, 22, 0.2) 38%, rgba(42, 40, 35, 0) 72%),
  linear-gradient(180deg, #2E2A25 0%, #211E1A 100%); }
.cta-top { display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; align-items: flex-start; }
.cta-top img { height: clamp(84px, 10vw, 150px); width: auto; }
.cta-top p { margin-left: auto; max-width: 21em; text-align: right; font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--on-dark); }
.cta-bottom { display: flex; flex-wrap: wrap; gap: 36px 48px; justify-content: space-between; align-items: flex-end; }
.cta-bottom h2 { flex: 1 1 520px; min-width: 0; font-weight: 500; font-size: clamp(44px, 6.6vw, 96px); line-height: 1; letter-spacing: -0.03em; color: #F3EEE3; text-wrap: balance; }
.cta-contact { flex: 0 1 320px; min-width: 0; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 28px; text-align: right; }
.cta-contact .lines { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 18px; }
.cta-contact .lines span { color: var(--on-dark); font-weight: 500; overflow-wrap: anywhere; }
.cta-contact .lines a { color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: 24px; font-variant-numeric: tabular-nums; }
.cta-contact .lines a:hover { color: var(--gold); }
.cta-contact .btn { width: 100%; max-width: 320px; }

/* ---------------- footer ---------------- */
.footer { background: var(--dark); color: var(--on-dark-muted); border-top: 1px solid var(--dark-line); }
.footer-inner { padding-block: 56px 28px; display: flex; flex-direction: column; gap: 40px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between; }
.footer-brand { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.footer-brand .brand img { height: 70px; }
.footer-brand .tag { font-weight: 600; font-size: 18px; color: var(--on-dark); }
.footer nav, .footer-contact { flex: 0 1 180px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.footer-contact { flex-basis: 280px; min-width: 0; }
.footer .label { font-size: 13px; color: var(--gold); }
.footer nav a, .footer-contact a { color: #DAD4C8; text-decoration: none; }
.footer nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact .phone { color: var(--on-dark); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.footer-contact span { color: #DAD4C8; overflow-wrap: anywhere; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--dark-line); font-size: 14px; color: var(--on-dark-muted); }

/* ---------------- estimate page ---------------- */
.page-head { background: var(--dark); color: var(--on-dark); border-bottom: 1px solid var(--dark-line); }
.page-head .nav-inner { padding-block: 12px; }
.page-head .brand img { height: 58px; }
.page-head-links { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: 16px; }
.back-link:hover { color: var(--gold); }
.page-head .phone { color: var(--gold); text-decoration: none; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.est-hero { background: var(--dark); color: var(--on-dark); }
.est-hero-inner { padding-block: clamp(36px, 5vw, 64px) clamp(72px, 8vw, 104px); display: flex; flex-direction: column; gap: 14px; }
.est-hero .eyebrow { color: var(--gold); }
.est-hero h1 { font-weight: 600; font-size: clamp(36px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.est-hero p { max-width: 36em; font-size: 19px; color: var(--on-dark-muted); }
.est-body { background: var(--sand); color: var(--text); }
.est-layout { margin-top: -48px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.est-form { flex: 999 1 580px; min-width: 0; background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; box-shadow: 0 16px 50px rgba(30, 20, 15, 0.12); }
.stepper { padding: 24px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.stepper-meta { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.stepper ol { display: flex; align-items: center; gap: 10px; }
.stepper li { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.stepper li:last-child { flex: 0 0 auto; }
.stepper .dot { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--ink); border: 2px solid var(--line-2); font-weight: 700; font-size: 16px; }
.stepper .lbl { font-weight: 600; font-size: 16px; color: var(--faint); white-space: nowrap; }
.stepper .bar { flex: 1; height: 3px; min-width: 16px; background: var(--line); }
.stepper li[data-state="current"] .dot { background: var(--gold); border-color: var(--ink); }
.stepper li[data-state="current"] .lbl, .stepper li[data-state="done"] .lbl { color: var(--ink); }
.stepper li[data-state="done"] .dot { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.stepper li[data-state="done"] .bar { background: var(--ink); }
.form-inner { padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 28px; }
.step { display: flex; flex-direction: column; gap: 22px; }
.step legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--ink); }
.step .hint { color: var(--muted); font-size: 17px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.opt { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; min-height: 76px; background: var(--white); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 6px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.opt:hover { border-color: var(--ink); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt .box { flex: none; width: 26px; height: 26px; margin-top: 1px; display: grid; place-items: center; background: var(--white); border: 2px solid var(--line-2); border-radius: 4px; }
.opt .box svg { color: transparent; }
.opt .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt .t { font-weight: 600; font-size: 19px; line-height: 1.15; }
.opt .b { font-size: 15px; color: var(--muted); }
.opt:has(input:checked) { background: #FFF6DC; border-color: var(--ink); }
.opt:has(input:checked) .box { background: var(--gold); border-color: var(--ink); }
.opt:has(input:checked) .box svg { color: var(--ink); }
.opt:has(input:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 16px; color: var(--ink); }
.field label .opt-note { font-weight: 400; color: var(--faint); }
.field input, .field select, .field textarea { min-height: 50px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 4px; background: var(--white); color: var(--ink); font-size: 17px; width: 100%; }
.field textarea { padding: 12px 14px; resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold-deep); outline-offset: 1px; border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.seg-group { display: flex; flex-direction: column; gap: 8px; }
.seg-group > .t { font-weight: 600; font-size: 16px; color: var(--ink); }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--white); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 4px; font-weight: 600; font-size: 16px; cursor: pointer; }
.seg:hover { border-color: var(--ink); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg:has(input:checked) { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.seg:has(input:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.note { display: flex; gap: 14px; align-items: flex-start; background: #FFF6DC; border: 1.5px solid var(--gold); border-radius: 4px; padding: 14px 16px; font-size: 16px; color: var(--text); }
.note svg { flex: none; margin-top: 1px; }
.note strong { color: var(--ink); }
.form-error { display: flex; gap: 10px; align-items: center; color: #9A2A12; font-weight: 600; font-size: 16px; }
.form-error svg { flex: none; }
.form-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.form-nav .btn-line { min-height: 54px; gap: 8px; padding: 0 20px; font-weight: 600; font-size: 17px; justify-content: flex-start; }
.form-nav .btn-gold { min-height: 56px; }
.est-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.aside-dark { background: var(--dark); color: var(--on-dark); border-radius: 8px; padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; border-top: 4px solid var(--gold); }
.aside-dark h2 { font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--on-dark); }
.aside-dark ol { display: flex; flex-direction: column; gap: 16px; }
.aside-dark li { display: flex; gap: 14px; }
.aside-dark .num { flex: none; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--gold); font-variant-numeric: tabular-nums; }
.aside-dark .txt { display: flex; flex-direction: column; gap: 2px; }
.aside-dark .t { font-weight: 600; color: var(--on-dark); }
.aside-dark .b { font-size: 16px; color: var(--on-dark-muted); }
.aside-light { background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.aside-light .label { font-size: 13px; }
.aside-light .phone { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.aside-light span { font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
.trust { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; font-size: 16px; color: var(--text); }
.trust li { display: flex; gap: 10px; align-items: center; }
.thanks { display: flex; flex-direction: column; gap: 22px; }
.thanks .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); display: grid; place-items: center; }
.thanks h2 { font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; color: var(--ink); }
.thanks p { max-width: 34em; color: var(--text); }
.thanks .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .pill { display: none; }
}
@media (max-width: 760px) {
  /* Phone: the photo fills the whole first screen, like desktop, with the box over its bottom edge. */
  /* The photo fills the top three quarters at a smaller scale (more of the scene); the lawn fades
     into the dark ground behind the box. */
  .hero { min-height: 560px; background: #2A2320; }
  .hero-bg, .hero-fg { height: 76%; bottom: auto; object-position: 74% 100%; }
  .hero-shade { background:
    linear-gradient(180deg, rgba(40, 28, 30, 0.2) 0%, rgba(40, 28, 30, 0) 18%),
    linear-gradient(0deg, #2A2320 0%, #2A2320 24%, rgba(42, 35, 32, 0) 46%); }
  .word-build { top: 150px; left: 3%; width: 94%; }
  .word-build text { font-size: 112px; }
  /* the under-construction slide is desktop only */
  .slide[data-desktop-only], .hero-dot[data-desktop-only] { display: none; }
  /* New builds: the word runs nearly edge to edge (a touch less stretched so it can be taller), its capitals start
     38px under the 81px nav, and each photo is shifted so its roofline (row 400 of the phone image) lands right
     under the word's baseline at any phone width. */
  .slide-nb .hero-bg, .slide-nb .hero-fg { object-position: 50% calc(121px - 45.055vw); }
  .word-nb { top: calc(119px - 5.723vw); left: 1%; width: 98%; }
  .word-nb text { font-size: 128px; font-stretch: 112%; }
  .word-adu { top: 150px; left: -2%; width: 92%; }
  .word-adu text { font-size: 310px; }
  /* the slide controls sit just above the card, leaving the top of the photo to the house */
  .hero-nav { right: 12px; bottom: 100%; margin-bottom: 10px; padding: 4px 8px; gap: 8px; }
  .hero-arrow { width: 36px; height: 36px; }
  /* phones: the floor buttons sit above the frame and the hint below it, leaving the frame to the house */
  .plan-frame { display: flex; flex-direction: column; gap: 10px; }
  .plan-stage { aspect-ratio: 1 / 1; }
  .plan-tabs { position: static; order: -1; align-self: flex-start; box-shadow: none; }
  .plan-tabs button { padding: 0 16px; font-size: 16px; }
  .plan-hint { position: static; align-self: flex-end; padding: 0; background: none; font-size: 14px; }
  .hero-foot-inner { padding-inline: 12px; padding-bottom: 14px; }
  .hero-card { flex-basis: 100%; padding: 18px 18px 20px; gap: 14px; background: rgba(28, 22, 18, 0.34); }
  .hero-card h1 { white-space: normal; font-size: clamp(22px, 6vw, 28px); }
  .hero-card p { font-size: 15px; }
  /* phones: two smaller see-through buttons side by side, a call button in place of the number */
  .hero-card-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-card .btn-sm { min-height: 44px; padding: 0 14px; font-size: 15px; background: rgba(244, 180, 26, 0.7); border: 1px solid rgba(244, 180, 26, 0.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hero-card .btn-sm:hover { background: rgba(244, 180, 26, 0.9); }
  .hero-card .btn-sm svg { display: none; }
  .hero-call { min-height: 44px; padding: 0 14px; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 600; font-size: 15px; }
  .hero-call:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.22); }
  .hero-call .k, .hero-call .v { display: none; }
  .hero-call .ic { display: block; color: var(--gold); }
  .hero-call .m { display: inline; }
  .svc-tab { min-height: 0; gap: 10px; padding: 16px 18px; }
  .stepper li:not([data-state="current"]) .lbl { display: none; }
  .page-head .nav-inner { flex-wrap: wrap; gap: 10px 16px; }
  .page-head .brand img { height: 48px; }
  .page-head .phone { font-size: 17px; }
  .page-head-links { gap: 8px 18px; }
}
@media (max-width: 480px) {
  .hero .brand img { height: 52px; }
  .hero .nav-inner { gap: 10px; }
  .svc-img { min-height: 260px; }
  .svc-img-site img { object-position: 25% 50%; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-tile { aspect-ratio: 4 / 3; }
  .cta { min-height: 0; }
  .cta-bottom h2 { font-size: clamp(40px, 12vw, 56px); }
  .cta-contact { align-items: flex-start; text-align: left; margin-left: 0; }
  .cta-contact .lines { align-items: flex-start; font-size: 16px; }
  .cta-contact .btn { max-width: none; }
  .cta-top p { margin-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}