/* ==========================================================================
   Bedrock — family builder template · archesign.studio
   Sand, rust and loam · Alegreya + Mulish · tape-measure dividers,
   pencil scribbles, stitched cards and a live build-cost estimator.
   1. Tokens  2. Base  3. Layout  4. Header  5. Components  6. Pages  7. Footer  8. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --sand: #efe3cf;
  --sand-2: #e4d2b4;
  --cream: #faf5ec;
  --rust: #b4532a;
  --rust-dark: #8c3c1c;
  --loam: #3a2a1f;
  --loam-soft: #6b5747;
  --moss: #6f7a55;
  --moss-tint: #e1e2cf;
  --stone: #a99a85;
  --tape: #e7c46b;
  --on-rust: #fbeee2;

  --font-head: "Alegreya", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", Arial, sans-serif;

  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --edge: clamp(10px, 1.6vw, 24px);
  --space: clamp(64px, 8vw, 120px);
  --r-xl: 28px;
  --r-lg: 22px;
  --r: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* hand-drawn marks (inline SVG data URIs) */
  --scribble-rust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14c38-7 80-9 120-6s82 7 122 2c22-3 36-4 50-3' fill='none' stroke='%23b4532a' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M24 20c54-4 118-3 182-5 32-1 54 0 78 1' fill='none' stroke='%23b4532a' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  --scribble-tape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14c38-7 80-9 120-6s82 7 122 2c22-3 36-4 50-3' fill='none' stroke='%23e7c46b' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M24 20c54-4 118-3 182-5 32-1 54 0 78 1' fill='none' stroke='%23e7c46b' stroke-width='3' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");
  --circle-rust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' preserveAspectRatio='none'%3E%3Cpath d='M170 8C96 3 12 14 9 44c-3 31 80 41 152 38 72-3 134-15 132-42C291 13 214 3 128 10 92 13 58 20 40 28' fill='none' stroke='%23b4532a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --circle-tape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' preserveAspectRatio='none'%3E%3Cpath d='M170 8C96 3 12 14 9 44c-3 31 80 41 152 38 72-3 134-15 132-42C291 13 214 3 128 10 92 13 58 20 40 28' fill='none' stroke='%23e7c46b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%233a2a1f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 15c9-8 20-9 31-4M27 5l7 6-8 5' fill='none' stroke='%23b4532a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --stones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cpath d='M0 1h72M0 25h72M1 1v24M45 1v24M21 25v24M59 25v24' stroke='%23faf5ec' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--sand);
  color: var(--loam);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tape); color: var(--loam); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--loam); color: var(--cream); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; }
.section--flush { padding-top: 0; }
.slab { margin: 0 var(--edge); border-radius: var(--r-xl); position: relative; }
.slab--rust { background: var(--rust); color: var(--cream); }
.slab--sand { background: var(--sand-2); }
.slab--cream { background: var(--cream); }
.slab-pad { padding: clamp(48px, 7vw, 104px) 0; }

.head { display: flex; justify-content: space-between; align-items: end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.head h2, .h2 { font-size: clamp(34px, 4.6vw, 62px); max-width: 17ch; }
.head > p { max-width: 44ch; margin: 0; color: var(--loam-soft); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font: 700 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-dark);
}
.kicker::before { content: ""; width: 28px; height: 10px; flex: none; background: var(--scribble-rust) center / 100% 100% no-repeat; }
.on-rust .kicker { color: var(--tape); }
.on-rust .kicker::before { background-image: var(--scribble-tape); }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 52ch; }
.muted { color: var(--loam-soft); }
.link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--rust); font-weight: 700; }
.link:hover { color: var(--rust-dark); }

/* hand-made marks */
.scribble {
  background: var(--scribble-rust) left 100% / 100% .3em no-repeat; padding-bottom: .05em; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.scribble--tape { background-image: var(--scribble-tape); }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled::after { content: ""; position: absolute; inset: -.24em -.36em -.2em -.34em; background: var(--circle-rust) center / 100% 100% no-repeat; pointer-events: none; }
.on-rust .circled::after, .circled--tape::after { background-image: var(--circle-tape); }
.note { display: inline-flex; align-items: flex-start; gap: 8px; font: italic 500 20px/1.3 var(--font-head); color: var(--rust-dark); margin: 0; }
.fig-note { margin-top: 18px; }
.note svg { width: 44px; height: 32px; flex: none; margin-top: -4px; }
.on-rust .note { color: var(--tape); }

/* 4. Header ---------------------------------------------------------------- */
.topbar { background: var(--loam); color: var(--sand); font-size: 14px; }
.topbar-row { display: flex; justify-content: space-between; gap: 16px; padding-top: 9px; padding-bottom: 9px; }
.topbar p { margin: 0; }
.topbar a { color: var(--tape); font-weight: 700; }
.topbar a:hover { text-decoration: underline; }
.topbar-r { display: inline-flex; align-items: center; gap: 8px; color: #d9c6a8; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #9fb07a; box-shadow: 0 0 0 3px rgba(159, 176, 122, .25); }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--sand); transition: box-shadow .25s; }
.scrolled .site-header { box-shadow: 0 2px 0 rgba(58, 42, 31, .1); }
.header-row { display: flex; align-items: center; gap: 24px; height: 86px; }
.logo { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; color: var(--loam); }
.logo-mark { width: 46px; height: 46px; flex: none; }
.logo-text b { display: block; font: 800 26px/1 var(--font-head); letter-spacing: -.01em; white-space: nowrap; }
.logo-text b i { font-style: italic; font-weight: 500; color: var(--rust); }
.logo-text small { display: block; margin-top: 5px; font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--loam-soft); }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a:not(.btn) { padding: 10px 14px; border-radius: 999px; font-weight: 700; font-size: 16px; transition: background-color .2s; }
.site-nav a:not(.btn):hover { background-color: var(--sand-2); }
.site-nav a[aria-current="page"] { background: var(--scribble-rust) center calc(100% - 3px) / 72% 9px no-repeat; }
.site-nav .nav-cta { margin-left: 12px; min-height: 46px; padding: 10px 20px; font-size: 15px; }
.nav-phone { display: none; }
.menu-btn { display: none; }

/* 5. Components ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px;
  border: 2px solid var(--loam); border-radius: 999px; background: var(--rust); color: var(--cream);
  font: 700 16px/1.15 var(--font-body); text-align: center; cursor: pointer;
  box-shadow: 0 4px 0 var(--loam); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--loam); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--loam); }
.btn--cream { background: var(--cream); color: var(--loam); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }
.btn--ghost:hover { box-shadow: none; background-color: rgba(250, 245, 236, .14); }
.btn--loam { background: var(--loam); color: var(--cream); }

/* art figure: generated SVG + optional pitched-roof overlay drawn on the same viewBox */
.figure { margin: 0; position: relative; }
.art { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--sand-2); isolation: isolate; }
.art img { width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; }
.art .roof { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.frame { background: var(--cream); padding: 12px; border-radius: var(--r-xl); border: 2px solid var(--loam); }
.frame .art { border-radius: 18px; }
.cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--loam-soft); }
.cap b { color: var(--loam); }

/* stitched card */
.stitch { position: relative; background: var(--cream); border-radius: var(--r-lg); padding: 30px 26px 28px; }
.stitch::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(180, 83, 42, .32); border-radius: 15px; pointer-events: none; }

/* measuring-tape divider */
.tape-wrap { overflow: hidden; padding: 26px 0; }
.tape {
  position: relative; display: flex; height: 50px; overflow: hidden;
  background-color: var(--tape); border-block: 2px solid var(--loam);
  background-image:
    repeating-linear-gradient(90deg, var(--loam) 0 2px, transparent 2px 80px),
    repeating-linear-gradient(90deg, var(--loam) 0 1.5px, transparent 1.5px 40px),
    repeating-linear-gradient(90deg, rgba(58, 42, 31, .7) 0 1px, transparent 1px 8px),
    linear-gradient(transparent 60%, rgba(140, 60, 28, .12));
  background-size: 100% 22px, 100% 14px, 100% 8px, 100% 100%;
  background-repeat: no-repeat;
}
.tape span { flex: 0 0 80px; padding: 22px 6px 0 0; text-align: right; font: 800 15px/1 var(--font-head); color: var(--loam); }
.tape span:nth-child(5n) { color: var(--rust-dark); }
.tape--tilt { transform: rotate(-1.2deg); margin: 0 -40px; }
.tape--tilt-r { transform: rotate(.9deg); margin: 0 -40px; }

/* home cards */
.homes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 26px; }
.home-card { display: block; color: inherit; }
.home-card .art > img, .home-card .art > .roof { transition: transform .6s var(--ease); }
.home-card:hover .art > img, .home-card:hover .art > .roof { transform: scale(1.035); }
.home-card .badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.badge { display: inline-block; padding: 6px 13px; border: 2px solid var(--loam); border-radius: 999px; background: var(--cream); font: 700 13px/1 var(--font-body); color: var(--loam); }
.badge--moss { background: var(--moss-tint); }
.badge--rust { background: var(--rust); color: var(--cream); }
.badge--live, .home-card .badge--live { position: absolute; top: 14px; right: 14px; left: auto; z-index: 2; background: var(--moss-tint); }
.badge--live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--moss); vertical-align: 1px; }
.where { display: flex; align-items: center; gap: 6px; margin: 18px 0 6px; font: 700 13px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-dark); }
.where svg { width: 14px; height: 16px; flex: none; }
.home-card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.home-card h3 span { background: var(--scribble-rust) left 100% / 0 .3em no-repeat; transition: background-size .4s var(--ease); }
.home-card:hover h3 span { background-size: 100% .3em; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.meta li { padding: 5px 12px; border-radius: 999px; background: var(--sand-2); font-size: 14px; font-weight: 700; }
.home-card .meta li { background: var(--cream); }

/* filter */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.filters button {
  padding: 10px 18px; border: 2px solid var(--loam); border-radius: 999px; background: var(--cream); color: var(--loam);
  font: 700 15px/1.2 var(--font-body); cursor: pointer; transition: background-color .2s, box-shadow .2s;
}
.filters button:hover { background: var(--sand-2); }
.filters button[aria-pressed="true"] { background: var(--rust); color: var(--cream); box-shadow: 0 3px 0 var(--loam); }
.filters button small { font-size: 13px; font-weight: 600; opacity: .8; margin-left: 2px; }

/* reviews: speech bubbles */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.reviews--stack { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.review { display: flex; flex-direction: column; margin: 0; }
.review blockquote { flex: 1; }
.review blockquote { position: relative; margin: 0; padding: 26px 26px 24px; background: var(--cream); border-radius: var(--r-lg); font-size: 17px; }
.review blockquote::after { content: ""; position: absolute; left: 38px; bottom: -17px; width: 30px; height: 18px; background: var(--cream); clip-path: polygon(0 0, 100% 0, 0 100%); }
.review blockquote p:last-child { margin: 0; }
.stars { display: block; margin-bottom: 10px; font-size: 19px; letter-spacing: .14em; color: var(--rust); }
.review figcaption { display: flex; align-items: center; gap: 12px; margin: 30px 0 0 22px; line-height: 1.3; }
.review figcaption b { display: block; font: 700 19px/1.2 var(--font-head); }
.review figcaption span { font-size: 14px; color: var(--loam-soft); }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2px solid var(--loam); background: var(--tape); font: 800 17px/1 var(--font-head); color: var(--loam); }
.on-sand .review blockquote, .on-sand .review blockquote::after { background: var(--cream); }

/* villages */
.villages { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.villages li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 2px solid var(--loam); border-radius: 999px; background: var(--cream); font-weight: 700; }
.villages li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 3px var(--moss-tint); }
.villages li.soon::before { background: var(--tape); box-shadow: 0 0 0 3px #f5e6bd; }
.villages small { font-size: 14px; font-weight: 600; color: var(--loam-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: 14px; font-weight: 700; color: var(--loam-soft); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--moss); }
.legend i.soon { background: var(--tape); }

/* page head (inner pages) */
.page-head { padding: clamp(36px, 5.5vw, 80px) 0; overflow: hidden; }
.page-head::after { content: ""; position: absolute; right: 0; bottom: 0; width: 36%; height: 100px; background: var(--stones) 0 100%; opacity: .09; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(44px, 6.6vw, 98px); line-height: .98; letter-spacing: -.02em; }
.page-head h1 em { color: var(--tape); }
.page-head .lede { margin: 0; color: var(--on-rust); }
.crumb { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; font-weight: 700; font-size: 15px; color: var(--on-rust); }
.crumb a { text-decoration: underline; text-decoration-color: var(--tape); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* estimator */
.estimator { background: var(--cream); color: var(--loam); border: 2px solid var(--loam); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 36px); box-shadow: 0 8px 0 var(--rust-dark); }
.estimator h3 { font-size: 28px; margin-bottom: 18px; }
.est-field { margin-bottom: 22px; }
.est-field > label, .est-finish legend { display: block; margin-bottom: 10px; padding: 0; font: 700 15px/1.2 var(--font-body); }
.select, .field select {
  width: 100%; appearance: none; -webkit-appearance: none; padding: 13px 46px 13px 16px;
  border: 2px solid var(--loam); border-radius: 14px; background: var(--sand) var(--chevron) right 16px center / 14px no-repeat;
  font: 600 17px/1.3 var(--font-body); color: var(--loam);
}
.est-area { display: flex; align-items: center; gap: 16px; }
.est-range {
  --fill: 30%; flex: 1; min-width: 0; height: 14px; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 2px solid var(--loam); border-radius: 999px; background: linear-gradient(90deg, var(--rust) var(--fill), var(--sand-2) var(--fill));
}
.est-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--loam); background: var(--cream); box-shadow: 0 3px 0 var(--loam); }
.est-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--loam); background: var(--cream); box-shadow: 0 3px 0 var(--loam); }
.est-num { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; }
.est-num input { width: 86px; padding: 8px 10px; border: 2px solid var(--loam); border-radius: 12px; background: var(--sand); color: var(--loam); font: 800 20px/1.1 var(--font-head); text-align: right; }
.est-hint { display: block; margin-top: 8px; font-size: 14px; color: var(--loam-soft); }
.est-finish { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.finish-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt span { display: block; height: 100%; padding: 12px 14px; border: 2px solid var(--loam); border-radius: 14px; background: var(--sand); transition: background-color .2s, box-shadow .2s; }
.opt b { display: block; font: 800 19px/1.1 var(--font-head); }
.opt small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--loam-soft); }
.opt input:checked + span { background: var(--rust); color: var(--cream); box-shadow: 0 4px 0 var(--loam); }
.opt input:checked + span small { color: var(--on-rust); }
.opt input:focus-visible + span { outline: 3px solid var(--rust); outline-offset: 3px; }
.est-out { display: block; padding: 20px 22px; border: 2px dashed var(--stone); border-radius: 18px; background: var(--sand); }
.est-out .est-label { display: block; font-size: 14px; font-weight: 700; color: var(--loam-soft); }
.est-total { display: block; margin: 4px 0 6px; font: 800 clamp(34px, 4vw, 54px)/1.05 var(--font-head); letter-spacing: -.01em; color: var(--rust-dark); }
.est-weeks { display: block; font-weight: 700; font-size: 18px; }
.est-per { display: block; margin-top: 6px; font-size: 14px; color: var(--loam-soft); }
.split-bar { display: flex; height: 16px; margin: 18px 0 10px; overflow: hidden; border: 2px solid var(--loam); border-radius: 999px; background: var(--sand-2); }
.split-bar i { display: block; height: 100%; background: var(--c); transition: width .4s var(--ease); }
.split-bar i + i { border-left: 2px solid var(--loam); }
.split-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.split-legend li { display: flex; align-items: center; gap: 8px; }
.split-legend li::before { content: ""; width: 11px; height: 11px; flex: none; border-radius: 3px; border: 1.5px solid var(--loam); background: var(--c); }
.split-legend b { margin-left: auto; }
.c1 { --c: var(--rust); } .c2 { --c: var(--tape); } .c3 { --c: var(--moss); } .c4 { --c: var(--stone); }
.est-note { display: flex; gap: 10px; margin: 16px 0 0; font-size: 14px; color: var(--loam-soft); }
.est-note::before { content: "!"; display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--loam); color: var(--cream); font: 800 13px/1 var(--font-body); }
.est-note b { color: var(--loam); }
.est-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }

/* before / after */
.compare { --pos: 50%; position: relative; aspect-ratio: 14 / 9; overflow: hidden; border: 2px solid var(--loam); border-radius: var(--r-xl); background: var(--sand-2); isolation: isolate; }
.cmp-layer { position: absolute; inset: 0; }
.cmp-layer img { width: 100%; height: 100%; object-fit: cover; }
.cmp-layer .roof { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 4px; margin-left: -2px; background: var(--cream); box-shadow: 0 0 0 2px var(--loam); pointer-events: none; }
.cmp-knob { position: absolute; top: 50%; left: var(--pos); z-index: 3; display: grid; place-items: center; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 3px solid var(--loam); border-radius: 50%; background: var(--rust); color: var(--cream); font: 800 22px/1 var(--font-body); box-shadow: 0 4px 0 var(--loam); pointer-events: none; }
.compare input { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(input:focus-visible) .cmp-knob { outline: 3px solid var(--tape); outline-offset: 3px; }
.cmp-tag { position: absolute; top: 16px; z-index: 3; padding: 6px 14px; border: 2px solid var(--loam); border-radius: 999px; background: var(--cream); font-size: 14px; font-weight: 700; pointer-events: none; }
.cmp-tag--b { left: 16px; } .cmp-tag--a { right: 16px; background: var(--rust); color: var(--cream); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(24px, 4vw, 64px); align-items: start; }
.faq details { margin-bottom: 12px; border: 2px solid transparent; border-radius: var(--r); background: var(--cream); transition: border-color .2s; }
.faq details[open] { border-color: var(--loam); }
.faq summary { display: block; position: relative; padding: 20px 66px 20px 24px; list-style: none; cursor: pointer; font: 700 clamp(19px, 1.8vw, 22px)/1.3 var(--font-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--rust); color: var(--cream); font: 800 22px/34px var(--font-body); text-align: center; }
.faq details[open] summary::after { content: "–"; background: var(--loam); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--loam-soft); max-width: 68ch; }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 6. Pages ----------------------------------------------------------------- */
/* hero */
.hero { overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 0; bottom: 0; width: 48%; height: 150px; background: var(--stones) 0 100%; opacity: .14; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 5vw, 80px); align-items: center; padding-top: clamp(40px, 5.5vw, 84px); padding-bottom: clamp(44px, 5.5vw, 84px); }
.hero h1 { font-size: clamp(42px, 5.6vw, 82px); line-height: .98; letter-spacing: -.02em; color: var(--cream); }
.hero .lede { margin: 26px 0 34px; color: var(--on-rust); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 40px 0 0; padding: 24px 0 0; border-top: 2px dashed rgba(250, 245, 236, .38); list-style: none; }
.hero-facts li { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--on-rust); }
.hero-facts b { font: 800 30px/1 var(--font-head); color: var(--tape); }
.hero-figure { position: relative; justify-self: end; width: 100%; max-width: 500px; margin: 0; }
.hero-figure .frame { box-shadow: 0 10px 0 var(--rust-dark); }
.hero-figure .art { --ratio: 4 / 5; }
.hero-figure figcaption { margin-top: 26px; }
.stamp { position: absolute; top: -40px; left: -46px; z-index: 3; width: clamp(108px, 10.5vw, 150px); filter: drop-shadow(0 5px 0 rgba(58, 42, 31, .35)); }
.stamp svg { display: block; width: 100%; height: auto; }
.stamp-ring { transform-origin: 80px 80px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* promises */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.promise .ico { width: 58px; height: 58px; margin-bottom: 18px; }
.promise h3 { font-size: 25px; margin-bottom: 10px; }
.promise p { margin: 0; font-size: 16px; color: var(--loam-soft); }
.promise .circled::after { inset: -.3em -.4em -.26em -.36em; }

/* estimator band */
.est-band-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.est-band h2 { font-size: clamp(36px, 4.6vw, 64px); margin-bottom: 20px; }
.est-band h2 em { color: var(--tape); }
.est-band-grid > div > p { color: var(--on-rust); }
.est-band .note { margin-top: 10px; }
.est-list { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.est-list li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.est-list li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--tape); color: var(--loam); font-weight: 800; font-size: 14px; }

/* villages band */
.village-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(28px, 5vw, 72px); align-items: center; }
.village-band h2 { font-size: clamp(32px, 3.8vw, 52px); margin-bottom: 16px; }

/* kettle CTA */
.kettle { border-radius: var(--r-xl); background: var(--sand-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; padding: clamp(32px, 5vw, 64px); }
.kettle h2 { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 14px; }
.kettle p { margin: 0; max-width: 54ch; color: var(--loam-soft); }
.kettle-list li::before { content: "✓"; margin-right: 8px; color: var(--rust); font-weight: 800; }
.kettle-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.big-phone { font: 800 clamp(30px, 3.4vw, 46px)/1 var(--font-head); color: var(--rust-dark); letter-spacing: -.01em; }
.big-phone:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* projects */
.count-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.count-row .note { font-size: 19px; }
.more-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 44px); }
.more-strip h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 8px; }
.more-strip p { margin: 0; color: var(--loam-soft); }

/* case study */
.case-hero .art { --ratio: 14 / 9; }
.case-hero { position: relative; }
.case-hero .badge--rust { position: absolute; z-index: 2; left: 26px; bottom: 26px; font-size: 15px; padding: 9px 16px; }
.spec { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 26px; overflow: hidden; border: 2px solid var(--loam); border-radius: var(--r-lg); background: var(--cream); }
.spec > div { padding: 20px 22px; border-right: 2px dashed var(--sand-2); }
.spec > div:last-child { border-right: 0; }
.spec .k { display: block; margin-bottom: 8px; font: 700 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-dark); }
.spec .v { display: block; font: 800 clamp(24px, 2.3vw, 32px)/1.05 var(--font-head); }
.spec .v small { font: 600 14px/1.3 var(--font-body); color: var(--loam-soft); }
.chapters { display: grid; gap: clamp(40px, 5vw, 64px); }
.chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(24px, 4vw, 64px); padding-top: 30px; border-top: 2px dashed var(--stone); }
.chapter .no { display: block; font: italic 500 22px/1 var(--font-head); color: var(--rust); margin-bottom: 10px; }
.chapter h2 { font-size: clamp(28px, 3vw, 42px); }
.prose p { font-size: 18px; }
.prose p:last-child { margin-bottom: 0; }
.tally { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.tally li { padding: 8px 14px; border: 2px solid var(--loam); border-radius: 14px; background: var(--cream); font-weight: 700; font-size: 15px; }
.tally b { font: 800 20px/1 var(--font-head); color: var(--rust-dark); margin-right: 4px; }
.drawings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.drawings .art { --ratio: 4 / 3; }
.quote-slab { padding: clamp(44px, 6vw, 88px) 0; text-align: center; }
.quote-slab blockquote { margin: 0 auto; max-width: 30ch; font: italic 500 clamp(28px, 3.6vw, 48px)/1.22 var(--font-head); }
.quote-slab blockquote::before { content: "“"; display: block; height: .55em; font: 800 2.4em/1 var(--font-head); color: var(--tape); }
.quote-slab .stars { margin: 26px 0 8px; color: var(--tape); }
.quote-slab cite { font-style: normal; font-weight: 700; color: var(--on-rust); }
.build-line { position: relative; height: 300px; }
.build-line .tape { position: absolute; left: 0; right: 0; top: 50%; margin-top: -25px; border-radius: 8px; border: 2px solid var(--loam); }
.weeks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.weeks li { position: absolute; left: var(--at); width: 190px; transform: translateX(-50%); text-align: center; line-height: 1.35; }
.weeks li:nth-child(odd) { bottom: calc(50% + 46px); }
.weeks li:nth-child(even) { top: calc(50% + 46px); }
.weeks li::before { content: ""; position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 3px solid var(--loam); border-radius: 50%; background: var(--rust); }
.weeks li:nth-child(odd)::before { bottom: -53px; }
.weeks li:nth-child(even)::before { top: -53px; }
.weeks li::after { content: ""; position: absolute; left: 50%; width: 2px; height: 21px; margin-left: -1px; background: var(--loam); }
.weeks li:nth-child(odd)::after { bottom: -21px; }
.weeks li:nth-child(even)::after { top: -21px; }
.weeks li:first-child::after { left: 14px; }
.weeks li:last-child::after { left: auto; right: 6px; }
.weeks li:first-child { transform: none; text-align: left; }
.weeks li:first-child::before { left: 7px; }
.weeks li:last-child { transform: translateX(-100%); text-align: right; }
.weeks li:last-child::before { left: auto; right: 0; }
.weeks b { display: block; font: 800 22px/1.1 var(--font-head); color: var(--rust-dark); }
.weeks span { font-size: 15px; font-weight: 600; }
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-xl); background: var(--sand-2); }
.next .art { --ratio: 16 / 9; }
.next .kicker { margin-bottom: 10px; }
.next h2 { font-size: clamp(30px, 3.6vw, 50px); }
.next h2 span { background: var(--scribble-rust) left 100% / 0 .28em no-repeat; transition: background-size .4s var(--ease); }
.next:hover h2 span { background-size: 100% .28em; }
.next p { margin: 10px 0 0; color: var(--loam-soft); }

/* about */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 80px); align-items: center; }
.split h2 { font-size: clamp(32px, 3.8vw, 52px); margin-bottom: 20px; }
.gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 4vw, 56px); margin: 0; padding: 30px 0 0; list-style: none; }
.polaroid { position: relative; max-width: 330px; margin: 0 auto 30px; padding: 14px 14px 0; border-radius: 6px; background: #fffdf8; box-shadow: 0 16px 28px -18px rgba(58, 42, 31, .7), 0 2px 0 rgba(58, 42, 31, .1); transform: rotate(var(--tilt, -2deg)); transition: transform .35s var(--ease); }
.polaroid:hover { transform: rotate(0deg); }
.polaroid::before { content: ""; position: absolute; top: -15px; left: 50%; z-index: 1; width: 104px; height: 30px; margin-left: -52px; background: rgba(231, 196, 107, .8); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(58, 42, 31, .15); }
.polaroid img { width: 100%; aspect-ratio: 15 / 16; object-fit: cover; border-radius: 2px; }
.polaroid figcaption { padding: 14px 6px 18px; text-align: center; font: italic 500 20px/1.25 var(--font-head); }
.gen .year { display: block; font: 800 clamp(56px, 6vw, 86px)/.9 var(--font-head); letter-spacing: -.03em; color: var(--rust); }
.gen h3 { font-size: 26px; margin: 10px 0 10px; }
.gen p { margin: 0; color: var(--loam-soft); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.stats li { padding: 24px 22px; border-radius: var(--r-lg); background: var(--cream); }
.stats b { display: block; font: 800 clamp(40px, 4.6vw, 62px)/1 var(--font-head); color: var(--rust); letter-spacing: -.02em; }
.stats span { display: block; margin-top: 8px; font-weight: 700; font-size: 15px; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 26px; }
.person .art { --ratio: 1 / 1; }
.person .badge { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.person h3 { font-size: 26px; margin: 18px 0 4px; }
.person .role { margin: 0 0 8px; font-weight: 700; font-size: 15px; color: var(--rust-dark); }
.person .fact { margin: 0; font: italic 500 18px/1.35 var(--font-head); color: var(--loam-soft); }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.value { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; padding: 30px 30px 28px; }
.value .num { grid-row: span 2; font: italic 500 48px/1 var(--font-head); color: var(--rust); min-width: 1.3em; }
.value h3 { font-size: 25px; margin-bottom: 6px; }
.value p { margin: 0; color: var(--loam-soft); }
.apprentice { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 5vw, 80px); align-items: center; }
.apprentice h2 { font-size: clamp(34px, 4.2vw, 58px); margin-bottom: 18px; }
.apprentice h2 em { color: var(--tape); }
.apprentice > div > p { color: var(--on-rust); }
.apprentice .stats li { background: rgba(250, 245, 236, .1); border: 2px dashed rgba(250, 245, 236, .4); }
.apprentice .stats b { color: var(--tape); }
.apprentice .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.seal { text-align: center; padding: 30px 22px 28px; }
.disc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 116px; height: 116px; margin: 0 auto 18px; border: 2px solid var(--loam); border-radius: 50%; background: var(--rust); color: var(--cream); font: 800 26px/1 var(--font-head); outline: 2px dashed var(--cream); outline-offset: -11px; }
.disc small { display: block; max-width: 76px; font: 700 9.5px/1.15 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.disc--moss { background: var(--moss); } .disc--tape { background: var(--tape); color: var(--loam); outline-color: var(--loam); } .disc--loam { background: var(--loam); }
.seal h3 { font-size: 22px; margin-bottom: 8px; }
.seal p { margin: 0; font-size: 15px; color: var(--loam-soft); }
.safety { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.safety li { padding: 9px 16px; border-radius: 999px; background: var(--moss-tint); border: 2px solid var(--moss); font-weight: 700; font-size: 15px; }
.village-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.village-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 2px dashed var(--stone); }
.village-list b { font: 700 21px/1.2 var(--font-head); }
.village-list span { font-size: 14px; font-weight: 700; color: var(--loam-soft); text-align: right; }
.village-list .on { color: var(--moss); }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.svc { display: flex; flex-direction: column; grid-column: span 2; padding: 12px 12px 26px; }
.svc:nth-child(-n+2) { grid-column: span 3; }
.svc .art { position: relative; z-index: 1; border-radius: 16px; }
.svc-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 22px 14px 0; }
.svc h3 { font-size: 30px; margin-bottom: 10px; }
.svc p { color: var(--loam-soft); }
.ticks { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 28px; font-weight: 600; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--rust); font-weight: 800; }
.svc .meta { margin-top: auto; }
.svc .meta li:first-child { background: var(--rust); color: var(--cream); }
.est-section-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.est-section-grid h2 { font-size: clamp(36px, 4.4vw, 60px); margin-bottom: 20px; }
.est-section-grid h2 em { color: var(--tape); }
.est-section-grid > div > p { color: var(--on-rust); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 28px 26px; border-radius: var(--r-lg); background: var(--cream); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border: 2px solid var(--loam); border-radius: 50%; background: var(--rust); color: var(--cream); font: 800 27px/1 var(--font-head); box-shadow: 0 3px 0 var(--loam); }
.step:not(:nth-child(3n))::after { content: ""; position: absolute; top: 42px; right: -32px; width: 34px; height: 22px; background: var(--arrow-r) center / contain no-repeat; }
.step h3 { font-size: 25px; margin-bottom: 4px; }
.step .when { display: block; margin-bottom: 10px; font-weight: 700; font-size: 14px; color: var(--rust-dark); }
.step p { margin: 0; color: var(--loam-soft); font-size: 16px; }
.step:last-child { background: var(--tape); }
.step:last-child::before { background: var(--loam); }
.step:last-child p { color: var(--loam); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.form-card { padding: clamp(22px, 3.5vw, 44px); border: 2px solid var(--loam); border-radius: var(--r-xl); background: var(--cream); box-shadow: 0 8px 0 var(--sand-2); scroll-margin-top: 110px; }
.form-card h2 { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 8px; }
.form-card > p { color: var(--loam-soft); margin-bottom: 26px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 15px; }
.field label small { font-weight: 600; color: var(--loam-soft); }
.field input:not([type="checkbox"]), .field textarea { width: 100%; min-width: 0; padding: 13px 16px; border: 2px solid var(--loam); border-radius: 14px; background: var(--sand); color: var(--loam); font: 600 17px/1.3 var(--font-body); }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8d7a68; font-weight: 400; }
.check { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; font-size: 16px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--rust); }
.form-foot { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.form-foot .note { font-size: 18px; }
.form-note { grid-column: 1 / -1; margin: 0; padding: 14px 18px; border: 2px solid var(--moss); border-radius: 14px; background: var(--moss-tint); font-weight: 700; }
.office { padding: clamp(24px, 3vw, 38px); border-radius: var(--r-xl); }
.office h2 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 6px; }
.office address { font-style: normal; color: var(--on-rust); }
.office .big-phone { color: var(--tape); display: inline-block; margin: 18px 0 4px; }
.office .answer { font: italic 500 20px/1.3 var(--font-head); margin: 0 0 18px; }
.hours { margin: 0 0 20px; padding: 0; list-style: none; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dashed rgba(250, 245, 236, .32); }
.hours li span:last-child { font-weight: 700; text-align: right; }
.office a.mail { color: var(--cream); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tape); text-underline-offset: 4px; overflow-wrap: anywhere; }
.mapcard { position: relative; margin-top: 24px; }
.mapcard .art { --ratio: 9 / 7; border: 2px solid var(--loam); border-radius: 18px; }
.pin { position: absolute; left: 57%; top: 46%; z-index: 2; width: 46px; height: 46px; margin: -52px 0 0 -23px; border: 3px solid var(--loam); border-radius: 50% 50% 50% 0; background: var(--rust); transform: rotate(-45deg); box-shadow: -3px 3px 0 rgba(58, 42, 31, .35); }
.pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cream); }
.pin-label { position: absolute; left: 57%; top: 46%; z-index: 2; margin: 8px 0 0 -80px; width: 160px; padding: 5px 8px; border: 2px solid var(--loam); border-radius: 10px; background: var(--cream); color: var(--loam); text-align: center; font: 700 13px/1.2 var(--font-body); }
.map-note { margin-top: 14px; color: var(--on-rust); font-size: 15px; }
.next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.next-steps li { padding: 26px 24px; }
.next-steps b { display: block; font: 800 24px/1.1 var(--font-head); margin-bottom: 8px; }
.next-steps .no { display: block; font: italic 500 20px/1 var(--font-head); color: var(--rust); margin-bottom: 10px; }
.next-steps p { margin: 0; color: var(--loam-soft); font-size: 16px; }

/* 7. Footer ---------------------------------------------------------------- */
.site-footer { position: relative; margin-top: 0; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--loam); color: var(--sand); }
.site-footer .tape { border-top: 0; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px 48px; padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 60px); border-bottom: 2px dashed rgba(239, 227, 207, .25); }
.footer-top h2 { max-width: 15ch; font-size: clamp(36px, 5vw, 70px); color: var(--cream); }
.footer-top h2 em { color: var(--tape); }
.footer-call p { margin: 10px 0 0; color: #cbb89c; }
.footer-phone { font: 800 clamp(30px, 3.4vw, 46px)/1 var(--font-head); color: var(--tape); }
.footer-phone:hover { text-decoration: underline; text-underline-offset: 6px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding: 44px 0; }
.f-logo { font: 800 30px/1 var(--font-head); color: var(--cream); margin-bottom: 14px; }
.f-logo i { font-style: italic; font-weight: 500; color: var(--tape); }
.f-brand p:last-child { max-width: 40ch; color: #cbb89c; }
.site-footer h3 { margin-bottom: 14px; font: 700 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tape); }
.site-footer p { margin: 0 0 10px; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.f-mail { overflow-wrap: anywhere; }
.f-small { font-size: 14px; color: #cbb89c; }
.f-links { display: grid; gap: 6px; padding: 0; list-style: none; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 22px 0 30px; border-top: 2px dashed rgba(239, 227, 207, .25); font-size: 14px; color: #cbb89c; }

/* 8. Responsive ------------------------------------------------------------ */
@media (max-width: 1140px) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc, .svc:nth-child(-n+2) { grid-column: span 3; }
  .svc:last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
  .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec > div { border-bottom: 2px dashed var(--sand-2); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-r { display: none; }
}
@media (max-width: 920px) {
  .header-row { height: 74px; gap: 14px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-text b { font-size: 22px; }
  .logo-text small { font-size: 10px; letter-spacing: .12em; }
  .menu-btn {
    position: relative; z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px;
    border: 2px solid var(--loam); border-radius: 999px; background: var(--cream); color: var(--loam); font: 700 15px/1 var(--font-body); cursor: pointer;
  }
  .bars, .bars::before { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
  .bars { position: relative; transform: translateY(-3px); }
  .bars::before { content: ""; position: absolute; left: 0; top: 6px; }
  .menu-open .bars { transform: translateY(0) rotate(45deg); }
  .menu-open .bars::before { top: 0; transform: rotate(-90deg); }
  .site-nav {
    position: fixed; inset: 0; z-index: 55; flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    padding: 96px var(--gutter) 40px; overflow-y: auto; background: var(--rust); color: var(--cream);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .site-nav a:not(.btn) { padding: 14px 0; border-radius: 0; border-bottom: 2px dashed rgba(250, 245, 236, .35); font: 800 clamp(34px, 9vw, 48px)/1.1 var(--font-head); }
  .site-nav a:not(.btn):hover { background: none; color: var(--tape); }
  .site-nav a[aria-current="page"] { background: none; color: var(--tape); }
  .site-nav .nav-cta { align-self: flex-start; margin: 30px 0 0; background: var(--cream); color: var(--loam); font-size: 17px; }
  .nav-phone { display: block; margin: 22px 0 0; font-size: 17px; }
  .nav-phone a { color: var(--tape); font-weight: 700; }
  .menu-open .site-nav { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }

  .hero-grid, .est-band-grid, .village-band, .split, .apprentice, .contact-grid, .est-section-grid, .faq-grid, .page-head-grid, .next { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { justify-self: center; max-width: 460px; margin-top: 14px; }
  .stamp { top: -34px; left: auto; right: 8px; }
  .reviews { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .chapter { grid-template-columns: minmax(0, 1fr); }
  .drawings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .drawings .figure:last-child { grid-column: 1 / -1; }
  .gens { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
  .gen { text-align: center; }
  .gen:nth-child(even) .polaroid { --tilt: 2.5deg; }
  .kettle { grid-template-columns: minmax(0, 1fr); }
  .more-strip { grid-template-columns: minmax(0, 1fr); }
  .next-steps { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-line { height: auto; }
  .build-line .tape { display: none; }
  .weeks { position: static; display: grid; gap: 22px; margin-left: 10px; padding: 6px 0 6px 30px; border-left: 8px solid var(--tape); }
  .weeks li, .weeks li:nth-child(odd), .weeks li:nth-child(even), .weeks li:first-child, .weeks li:last-child { position: relative; left: auto; top: auto; bottom: auto; width: auto; transform: none; text-align: left; }
  .weeks li::after { display: none; }
  .weeks li::before, .weeks li:nth-child(odd)::before, .weeks li:nth-child(even)::before, .weeks li:first-child::before, .weeks li:last-child::before { top: 4px; bottom: auto; left: -49px; right: auto; margin: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { font-size: 13px; }
  .topbar-hours { display: none; }
  .homes, .promises, .values, .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .seals { gap: 12px; }
  .seal { padding: 22px 14px; }
  .disc { width: 96px; height: 96px; font-size: 22px; }
  .seal h3 { font-size: 19px; }
  .seal p { font-size: 14px; }
  .svc, .svc:nth-child(-n+2), .svc:last-child { grid-column: auto; }
  .step { padding: 22px 22px 24px; }
  .step::before { float: left; width: 46px; height: 46px; margin: 0 14px 6px 0; font-size: 22px; }
  .step h3 { padding-top: 2px; }
  .step p { clear: both; padding-top: 6px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .finish-opts { grid-template-columns: minmax(0, 1fr); }
  .opt span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .opt small { margin: 0; text-align: right; }
  .split-legend { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec > div:nth-child(2n) { border-right: 0; }
  .spec > div:last-child { grid-column: 1 / -1; }
  .drawings { grid-template-columns: minmax(0, 1fr); }
  .village-list { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .est-area { flex-wrap: wrap; }
  .est-range { flex-basis: 100%; }
  .value { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; }
  .value .num { grid-row: auto; }
  .stamp { width: 96px; top: -30px; }
  .compare { aspect-ratio: 4 / 3; }
  .cmp-tag { top: 10px; font-size: 13px; padding: 4px 10px; }
  .cmp-tag--b { left: 10px; } .cmp-tag--a { right: 10px; }
  .cmp-knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 18px; }
  .case-hero .badge--rust { left: 12px; bottom: 12px; font-size: 13px; padding: 6px 12px; }
  .tape--tilt, .tape--tilt-r { margin: 0 -24px; }
}
@media (max-width: 420px) {
  .team { gap: 32px 14px; }
  .person h3 { font-size: 21px; }
  .person .fact { font-size: 16px; }
  .person .badge { left: 8px; bottom: 8px; font-size: 12px; padding: 5px 9px; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats li { padding: 18px 16px; }
  .hero-facts { gap: 12px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}