/* Whitlock Builders · "Quiet Craft"
   An architecture monograph for a small custom builder: limestone paper, near-black ink,
   deep walnut for every action, Instrument Serif set large, hairlines and numbered plates. */

:root {
  --ground: #F1EEE8;
  --paper: #FAF8F4;
  --ink: #1C1A17;
  --ink-soft: #5B564E;
  --line: #D6D0C5;
  --field-line: #8A8276;
  --walnut: #5A3B22;
  --walnut-dk: #47301C;
  --on-walnut: #FFFFFF;
  --wood: #C9A27A;
  --wash: #E7DED1;
  --sage: #7E8A74;
  --dark: #22201C;
  --dark-2: #2C2925;
  --dark-line: #46413A;
  --on-dark: #F1EEE8;
  --on-dark-soft: #B9B1A5;
  --error: #9A2F1E;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --max: 1280px;
  --gut: 40px;
  --gap: 24px;
  --pad: 112px;
  --img: saturate(.92) contrast(.97);
}

/* ---------- base ---------- */
html, body { margin: 0; }
body { background: var(--ground); }
:where(.site) *, :where(.site) *::before, :where(.site) *::after { box-sizing: border-box; margin: 0; padding: 0; }
.site {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
:where(.site) a { color: inherit; text-decoration: none; }
:where(.site) ul, :where(.site) ol { list-style: none; }
:where(.site) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
:where(.site) h1, :where(.site) h2, :where(.site) h3, :where(.site) h4 { font-weight: 400; }
:where(.site) img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img); }
:where(.site) p { text-wrap: pretty; }
:where(.site) fieldset { border: 0; min-width: 0; }
.icon { width: 1em; height: 1em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: var(--pad) 0; }

/* type roles */
:where(.site) h2 {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
:where(.site) h3 { font-family: var(--serif); font-size: 30px; line-height: 1.15; text-wrap: balance; }
.label, .eyebrow, .folio, .caption .cap-no, .level-label, .fl-label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.label { color: var(--ink-soft); }
.caption { display: flex; gap: 16px; align-items: baseline; margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.caption .cap-no { color: var(--ink); white-space: nowrap; }

/* folio: "01 ——— SELECTED HOMES" */
.folio { display: flex; align-items: center; gap: 16px; color: var(--ink-soft); }
.folio-no { display: inline-flex; align-items: center; gap: 16px; font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.folio-no::after { content: ""; width: 56px; height: 1px; background: var(--field-line); }
.budget .folio-no::after { background: var(--on-dark-soft); opacity: .6; }

/* section heads */
.sec-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 28px;
  margin-bottom: 64px;
}
.sec-head .folio { grid-column: 1 / -1; }
.sec-head h2 { grid-column: 1 / 9; }
.sec-head .sec-intro { grid-column: 9 / 13; align-self: end; }
.sec-intro { font-size: 18px; color: var(--ink-soft); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .15s ease;
}
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--walnut); color: var(--on-walnut); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--walnut-dk); }
.btn-wood { background: var(--wood); color: var(--ink); }
.btn-wood:hover, .btn-wood.is-hover { background: #D6B48F; }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost .icon { color: var(--walnut); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--walnut); outline-offset: 3px; }
.btn-wide { width: 100%; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--ground); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 88px; }
.logo { display: inline-flex; align-items: baseline; gap: 12px; color: var(--ink); }
.logo-word { font-family: var(--serif); font-size: 36px; line-height: 1; letter-spacing: -0.01em; }
.logo-sub { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.nav { display: flex; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { padding: 8px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 28px; }
.header-phone { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-start { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--walnut); white-space: nowrap; border-bottom: 1px solid currentColor; padding: 4px 0 2px; }
.header-start .icon { width: 16px; height: 16px; }
.icon-btn { display: none; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 18px; color: var(--ink-soft); }
.hero-eyebrow span + span::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 18px; vertical-align: middle; background: var(--field-line); }
.hero-title {
  margin: 36px 0 56px;
  font-family: var(--serif);
  font-size: 120px;
  line-height: 0.98;
  letter-spacing: -0.022em;
}
.hero-title span, .hero-title em { display: block; }
.hero-title em { font-style: italic; }
.hero-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.hero-sub { grid-column: 1 / 7; font-size: 20px; line-height: 1.55; color: var(--ink); }
.hero-actions { grid-column: 8 / 13; display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.hero-call { font-size: 16px; color: var(--ink-soft); white-space: nowrap; }
.hero-call span { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--field-line); }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--ink); }
.proof li { padding: 22px 24px 0; border-left: 1px solid var(--line); }
.proof li:first-child { padding-left: 0; border-left: 0; }
.proof b { display: block; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; }
.proof span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-soft); }
.hero-plate { margin-top: 48px; }
.hero-img { aspect-ratio: 2.5 / 1; overflow: hidden; background: var(--wash); }
.hero-img img { object-position: center 62%; }

/* ---------- homes: plates + index ---------- */
.plates { position: relative; }
.plate { display: none; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.plate.p01, .homes-02 .plate.p02, .homes-03 .plate.p03, .homes-04 .plate.p04, .homes-05 .plate.p05, .homes-06 .plate.p06, .homes-07 .plate.p07, .homes-08 .plate.p08 { display: grid; }
:is(.homes-02, .homes-03, .homes-04, .homes-05, .homes-06, .homes-07, .homes-08) .plate.p01 { display: none; }
.plate-img { grid-column: 1 / 9; aspect-ratio: 3 / 2; overflow: hidden; background: var(--wash); }
.plate-text { grid-column: 9 / 13; padding-bottom: 4px; }
.plate-no { font-family: var(--serif); font-size: 96px; line-height: 0.9; letter-spacing: -0.02em; }
.plate-of { display: none; }
.plate-text h3 { margin-top: 24px; font-size: 34px; }
.plate-town { margin-top: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.facts { margin-top: 28px; border-bottom: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.facts dd { font-size: 16px; line-height: 1.45; }
.plate-note { margin-top: 20px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

.index { width: 100%; margin-top: 72px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.index th { padding: 0 16px 12px 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-align: left; border-bottom: 1px solid var(--ink); }
.index th:first-child, .index td:first-child { padding-left: 16px; }
.index td { padding: 15px 16px 15px 0; font-size: 16px; color: var(--ink-soft); border-bottom: 1px solid var(--line); vertical-align: baseline; }
.index .ix-no { width: 76px; font-family: var(--serif); font-size: 24px; color: var(--ink); }
.index .ix-home { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--ink); }
.index td:nth-child(3) { width: 220px; }
.index td:nth-child(4) { width: 150px; }
.index td:nth-child(5) { width: 130px; }
.index td:nth-child(6) { width: 80px; }
.index .ix-go { width: 40px; padding-right: 16px; color: var(--line); vertical-align: middle; }
.index .ix-go .icon { width: 20px; height: 20px; display: block; }
.index tr.is-sel td { background: var(--wash); color: var(--ink); }
.index tr.is-sel .ix-go { color: var(--walnut); }
.index tbody tr:hover td { background: var(--paper); }

/* phone swipe counter (shown below 700px and on the brand sheet) */
.swipe-meta { display: none; align-items: center; gap: 14px; margin-top: 24px; }
.sm-count { font-family: var(--serif); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-bar { position: relative; flex: 1; height: 2px; background: var(--line); }
.sm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 12.5%; background: var(--ink); }
.sm-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.sm-hint .icon { width: 16px; height: 16px; }
.prompt { margin-top: 40px; font-size: 17px; color: var(--ink-soft); }
.prompt a { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; }
.prompt .icon { width: 16px; height: 16px; }

/* ---------- services ---------- */
.services { background: var(--paper); }
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.svc-photos { grid-column: 1 / 6; }
.svc-img { overflow: hidden; background: var(--wash); }
.svc-ph-1 .svc-img { aspect-ratio: 1 / 1; }
.svc-ph-2 { width: 66%; margin: 40px 0 0 auto; }
.svc-ph-2 .svc-img { aspect-ratio: 3 / 4; }
.svc-ph-2 img { object-position: center 70%; }
.svc-col { grid-column: 7 / 13; }
.svc-list { border-bottom: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 64px 1fr; gap: 0; padding: 28px 0 30px; border-top: 1px solid var(--line); }
.svc:first-child { border-top-color: var(--ink); padding-top: 26px; }
.svc-no { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.2; color: var(--ink-soft); }
.svc h3 { font-size: 32px; }
.svc-desc { margin-top: 8px; font-size: 17px; color: var(--ink-soft); max-width: 520px; }
.svc-facts { display: grid; grid-template-columns: 1.45fr .9fr 1.15fr; gap: 24px; margin-top: 20px; }
.svc-facts dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.svc-facts dd { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.svc-facts div:last-child dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-ic { display: none; }
.not-fit { margin-top: 28px; font-size: 15px; color: var(--ink-soft); }
.not-fit .label { margin-right: 10px; color: var(--ink); }

/* ---------- budget guide (signature) ---------- */
.budget { background: var(--dark); color: var(--on-dark); }
.budget .folio, .budget .sec-intro { color: var(--on-dark-soft); }
.budget .folio-no { color: var(--wood); }
/* phone finish-level switch (shown below 700px and on the brand sheet) */
.seg { display: none; grid-template-columns: 0.85fr 0.85fr 1.3fr; margin-bottom: 28px; border: 1px solid var(--dark-line); }
.seg-btn { min-height: 48px; padding: 0 8px; font-size: 15px; font-weight: 600; text-align: center; color: var(--on-dark-soft); border-left: 1px solid var(--dark-line); }
.seg-btn:first-child { border-left: 0; }
.seg-btn.is-sel { background: var(--wood); color: var(--ink); border-color: var(--wood); }

.range { position: relative; margin: 0 0 64px; padding: 52px 0 40px; }
.range-grid { position: absolute; inset: 0; pointer-events: none; }
.tick b { font-weight: 400; }
.tick { position: absolute; top: 0; bottom: 30px; left: var(--at); font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.tick:first-child { transform: none; }
.tick:last-child { transform: translateX(-100%); }
.tick::after { content: ""; position: absolute; top: 34px; bottom: 0; left: 50%; border-left: 1px dashed var(--dark-line); }
.tick:first-child::after { left: 0; }
.tick:last-child::after { left: 100%; }
.range-row { position: relative; z-index: 1; height: 72px; }
.range-bar { position: absolute; left: var(--l); width: var(--w); top: 38px; height: 18px; background: #5C564E; }
.range-tag { position: absolute; left: var(--l); top: 6px; padding-left: 0; font-size: 15px; line-height: 1.4; color: var(--on-dark-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-tag b { margin-right: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark); }
.range-row.is-sel .range-bar { background: var(--wood); }
.range-row.is-sel .range-tag { color: var(--on-dark); }
.range-row.is-sel .range-tag b { color: var(--wood); }
.range-unit { position: absolute; right: 0; bottom: 0; font-size: 13px; color: var(--on-dark-soft); }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--dark-line); }
.level { display: flex; flex-direction: column; padding: 36px 32px 36px; border-left: 1px solid var(--dark-line); }
.level:first-child { border-left: 0; }
.level.is-sel { background: var(--dark-2); box-shadow: inset 0 3px 0 var(--wood); }
.level-name { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wood); }
.level-num { margin-top: 18px; font-family: var(--serif); font-size: 68px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.level-unit { margin-top: 8px; font-size: 14px; color: var(--on-dark-soft); }
.level-desc { margin-top: 20px; font-family: var(--serif); font-size: 24px; line-height: 1.25; }
.level-label { display: block; margin-top: 28px; color: var(--on-dark-soft); }
.level-list { margin-top: 10px; }
.level-list li { padding: 9px 0; font-size: 16px; border-bottom: 1px solid var(--dark-line); }
.level-ex { margin-top: auto; padding-top: 28px; }
.level-ex b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; font-variant-numeric: tabular-nums; }

.budget-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 80px; }
.bm-head { font-size: 26px; margin-bottom: 18px; }
.bm-list li { display: flex; gap: 14px; padding: 11px 0; font-size: 16px; line-height: 1.45; border-top: 1px solid var(--dark-line); }
.bm-list .icon { width: 18px; height: 18px; margin-top: 3px; }
.bm-in .icon { color: var(--wood); }
.bm-out .icon { color: var(--on-dark-soft); }
.bm-out li { color: var(--on-dark-soft); }
.rtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rtable th, .rtable td { padding: 11px 0; font-size: 16px; line-height: 1.45; border-top: 1px solid var(--dark-line); vertical-align: baseline; }
.rtable th { font-weight: 400; text-align: left; padding-right: 16px; }
.rtable td { text-align: right; color: var(--wood); white-space: nowrap; }

.fixed { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--wood); }
.fixed-big { grid-column: 1 / 7; font-family: var(--serif); font-size: 56px; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.fixed-body { grid-column: 8 / 13; }
.fixed-body p { font-size: 18px; color: var(--on-dark-soft); }
.fixed-body .btn { margin-top: 28px; }
.fine { margin-top: 40px; font-size: 14px; color: var(--on-dark-soft); }

/* ---------- process ---------- */
.proc-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.proc-head .sec-head { grid-column: 1 / 8; display: block; margin: 0; }
.proc-head .sec-head h2 { margin-top: 28px; }
.proc-head .sec-intro { margin-top: 24px; max-width: 640px; }
.proc-photo { grid-column: 9 / 13; }
.proc-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); }

.gantt { margin-top: 72px; }
.g-axis, .g-row { display: grid; grid-template-columns: 320px 1fr; column-gap: 40px; }
.g-axis { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.g-axis-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.g-ticks { position: relative; height: 22px; }
.g-ticks span { position: absolute; left: var(--at); top: 0; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink-soft); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.g-ticks span:first-child { transform: none; }
.g-ticks span:last-child { transform: translateX(-100%); }
.g-row { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.g-label { display: flex; gap: 18px; }
.g-no { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.15; color: var(--ink-soft); min-width: 20px; }
.g-label h3 { font-size: 28px; }
.g-dur { margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--walnut); }
.g-track {
  position: relative;
  height: 16px;
  margin-top: 8px;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 16.6667% 100%;
  background-repeat: repeat-x;
  border-right: 1px solid var(--line);
}
.g-bar { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: var(--walnut); }
.g-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--l) + var(--w)); width: var(--x); background: var(--wood); opacity: .55; }
.g-mark .g-bar { width: 12px; }
.g-after::after { top: 7px; bottom: auto; height: 0; background: none; opacity: 1; border-top: 2px dashed var(--walnut); }
.g-line { margin-top: 16px; max-width: 680px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.g-key { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--ink-soft); }
.gk { display: inline-block; width: 28px; height: 10px; }
.gk-solid { background: var(--walnut); }
.gk-light { margin-left: 18px; background: var(--wood); opacity: .55; }

/* ---------- about ---------- */
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 80px; }
.about-photo { grid-column: 1 / 7; }
.about-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.about-img img { object-position: center 55%; }
.about-photo { grid-row: 1; }
.about-text { grid-column: 8 / 13; grid-row: 1; align-self: center; }
.about-text h2 { margin-top: 28px; font-size: 56px; }
.about-story { margin-top: 28px; }
.pull { margin-top: 40px; }
.about-facts { margin-top: 40px; }
.about-story p { font-size: 18px; color: var(--ink-soft); }
.about-story p + p { margin-top: 16px; }
.pull p { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1.2; text-wrap: balance; }
.pull footer { margin-top: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.about-facts { display: flex; flex-wrap: nowrap; border-top: 1px solid var(--ink); }
.about-facts span { padding: 14px 16px 0 0; margin-right: 16px; font-size: 15px; font-weight: 600; white-space: nowrap; border-right: 1px solid var(--line); }
.about-facts span:last-child { border-right: 0; }
.team { grid-column: 1 / -1; }
.team-list { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gap); margin-top: 16px; border-top: 1px solid var(--line); }
.team-list div { padding-top: 18px; }
.team-list dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.team-list dd { margin-top: 8px; font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.about-notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); margin-top: -64px; }
.about-notes p { font-size: 16px; color: var(--ink-soft); max-width: 520px; }

/* ---------- reviews ---------- */
.rev-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.rev-head .sec-head { grid-column: 1 / 9; display: block; margin: 0; }
.rev-head .sec-head h2 { margin-top: 28px; }
.rating { grid-column: 9 / 13; justify-self: end; text-align: right; }
.stars { display: inline-flex; gap: 4px; color: var(--ink); }
.stars .icon { width: 18px; height: 18px; }
.rating p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }
.rating b { font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--ink); margin-right: 6px; }
.rev-feature { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; margin: 56px 0 64px; padding-top: 40px; border-top: 1px solid var(--ink); }
.rev-feature-text { grid-column: 1 / 9; }
.rev-feature blockquote p { font-family: var(--serif); font-size: 46px; line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; }
.rev-feature figcaption { margin-top: 24px; font-size: 15px; color: var(--ink-soft); }
.rev-feature-photo { grid-column: 10 / 13; }
.rev-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.rev-feature figcaption b, .rev figcaption b { color: var(--ink); font-weight: 600; }
.rev-feature figcaption span { margin-left: 10px; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; row-gap: 48px; }
.rev { padding-top: 22px; border-top: 1px solid var(--line); }
.rev blockquote p { font-family: var(--serif); font-size: 25px; line-height: 1.28; }
.rev figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.rev figcaption span { display: block; margin-top: 2px; }
.rev-more { margin-top: 48px; }
.rev-more a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; }
.rev-more .icon { width: 16px; height: 16px; }

/* ---------- area ---------- */
.area { border-top: 1px solid var(--line); }
.area .sec-head h2 { grid-column: 1 / 10; }
.area-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.area-towns { grid-column: 1 / 6; }
.towns { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin-top: 32px; border-bottom: 1px solid var(--line); }
.towns li { padding: 11px 0 10px; font-family: var(--serif); font-size: 25px; line-height: 1.2; border-top: 1px solid var(--line); }
.towns li span { display: block; margin-top: 2px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.lot-photo { grid-column: 7 / 13; }
.lot-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--wash); }
.lot { margin-top: 72px; }
.lot-top { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.lot-head { font-size: 36px; }
.area-note { display: flex; align-items: center; gap: 10px; font-size: 16px; white-space: nowrap; }
.area-note .icon { width: 20px; height: 20px; color: var(--sage); }
.lot-list { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--gap); }
.lot-list li { padding: 22px 16px 0 0; border-right: 1px solid var(--line); }
.lot-list li:last-child { border-right: 0; }
.lot-no { display: block; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--ink-soft); }
.lot-list h4 { margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.lot-list p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- faq ---------- */
.faq { background: var(--paper); }
.faq-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; margin-bottom: 56px; }
.faq-head .sec-head { grid-column: 1 / 8; display: block; margin: 0; }
.faq-head h2 { margin-top: 28px; }
.faq-card { grid-column: 9 / 13; padding: 24px 26px; background: var(--ground); border: 1px solid var(--line); font-size: 16px; }
.faq-card a { font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; white-space: nowrap; }
.faq-groups { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 56px; align-items: start; }
.faq-group > .label { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.q { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0 8px; font-size: 25px; line-height: 1.2; }
.q-ic { display: none; }
.a { padding-bottom: 22px; font-size: 17px; color: var(--ink-soft); }

/* ---------- quote ---------- */
.quote { }
.quote-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.quote-side { grid-column: 1 / 6; }
.quote-side h2 { margin-top: 28px; font-size: 56px; }
.quote-lead { margin-top: 24px; font-size: 18px; color: var(--ink-soft); }
.meet { margin-top: 40px; }
.meet-list { margin-top: 12px; counter-reset: meet; }
.meet-list li { position: relative; padding: 12px 0 12px 40px; font-size: 17px; border-top: 1px solid var(--line); counter-increment: meet; }
.meet-list li:last-child { border-bottom: 1px solid var(--line); }
.meet-list li::before { content: counter(meet); position: absolute; left: 0; top: 9px; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink-soft); }
.quote-photo { margin-top: 40px; }
.quote-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--wash); }
.quote-img img { object-position: center 30%; }
.quote-contact { margin-top: 32px; font-size: 16px; line-height: 1.8; color: var(--ink-soft); }
.quote-contact a { font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; white-space: nowrap; }
.quote-contact .sep { margin: 0 6px; }

.form-card { grid-column: 7 / 13; padding: 44px 44px 40px; background: var(--paper); border: 1px solid var(--line); }
.steps { display: flex; gap: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.step { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.step-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--field-line); font-family: var(--serif); font-size: 18px; letter-spacing: 0; color: var(--ink-soft); }
.st-1 { color: var(--ink); }
.st-1 .step-no { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.quote-step-2 .st-1, .quote-sent .st-1 { color: var(--ink-soft); }
.quote-step-2 .st-1 .step-no, .quote-sent .st-1 .step-no { background: var(--wash); border-color: var(--wash); color: var(--ink); }
.quote-step-2 .st-2 { color: var(--ink); }
.quote-step-2 .st-2 .step-no { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.quote-sent .st-2 .step-no { background: var(--wash); border-color: var(--wash); color: var(--ink); }

.q-step2, .q-sent { display: none; }
.quote-step-2 .q-step1, .quote-sent .q-step1, .quote-sent .q-step2 { display: none; }
.quote-step-2 .q-step2, .quote-sent .q-sent { display: block; }

.fs { margin-top: 30px; }
.fl { padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 16px; font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; background: var(--paper); border: 1px solid var(--field-line); }
.tile .icon { width: 24px; height: 24px; color: var(--ink-soft); }
.tile.is-on { background: var(--wash); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tile.is-on .icon { color: var(--ink); }
.segf { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--field-line); }
.segf-btn { min-height: 48px; padding: 0 10px; font-size: 15px; font-weight: 500; text-align: center; border-left: 1px solid var(--field-line); }
.segf-btn:first-child { border-left: 0; }
.segf-btn.is-on { background: var(--ink); color: var(--paper); }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips-2 { grid-template-columns: repeat(2, 1fr); }
.chip { min-height: 48px; padding: 0 12px; text-align: center; white-space: nowrap; font-size: 15px; font-weight: 500; border: 1px solid var(--field-line); background: var(--paper); font-variant-numeric: tabular-nums; }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.form-foot { margin-top: 36px; }
.reassure { margin-top: 12px; font-size: 14px; color: var(--ink-soft); text-align: center; }
.back { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.back .icon { width: 16px; height: 16px; }

.q-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; padding: 12px 16px; background: var(--wash); font-size: 15px; }
.q-summary a { font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 28px; }
.field-full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.field .opt { margin-left: 6px; font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea { display: block; width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--field-line); border-radius: 0; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field input.is-focus { outline: 2px solid var(--walnut); outline-offset: 0; border-color: var(--walnut); }

.q-sent { padding-top: 32px; }
.sent-mark { display: grid; place-items: center; width: 56px; height: 56px; background: var(--ink); color: var(--paper); }
.sent-mark .icon { width: 28px; height: 28px; }
.sent-head { margin-top: 24px; font-size: 36px; line-height: 1.1; }
.sent-sum { justify-content: flex-start; }
.sent-steps { margin-top: 28px; }
.sent-steps li { display: grid; grid-template-columns: 48px 1fr; align-items: start; padding: 14px 0; font-size: 16px; border-top: 1px solid var(--line); }
.sent-steps li:last-child { border-bottom: 1px solid var(--line); }
.sent-line { margin-top: 24px; font-size: 16px; color: var(--ink-soft); }
.sent-line a { white-space: nowrap; font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; }

/* ---------- footer ---------- */
.site-footer { padding: 96px 0 44px; background: var(--dark); color: var(--on-dark); }
.foot-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.foot-word { grid-column: 1 / 8; font-family: var(--serif); font-size: 208px; line-height: 0.78; letter-spacing: -0.035em; }
.foot-lead { grid-column: 8 / 13; }
.foot-line { font-family: var(--serif); font-size: 30px; line-height: 1.15; text-wrap: balance; }
.foot-cta { display: flex; align-items: center; gap: 28px; margin-top: 28px; }
.foot-phone { font-family: var(--serif); font-size: 30px; color: var(--wood); white-space: nowrap; font-variant-numeric: tabular-nums; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 40px; margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--dark-line); }
.fc p.label { margin-bottom: 12px; font-size: 12.5px; line-height: 1.4; color: var(--on-dark-soft); }
.fc p, .fc li { font-size: 15px; line-height: 1.7; }
.fc a:hover { color: var(--wood); }
.fc-towns p { color: var(--on-dark-soft); }
.foot-base { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-size: 13px; color: var(--on-dark-soft); }
.foot-legal { display: flex; gap: 20px; white-space: nowrap; }
.demo-note { margin-top: 18px; font-size: 13px; color: var(--on-dark-soft); }

/* ---------- control hovers and field errors ---------- */
.tile:hover, .tile.is-hover, .chip:hover, .chip.is-hover { border-color: var(--ink); }
.segf-btn:hover:not(.is-on), .segf-btn.is-hover { background: var(--wash); }
.tile:focus-visible, .chip:focus-visible, .segf-btn:focus-visible, .tile.is-focus, .chip.is-focus { outline: 2px solid var(--walnut); outline-offset: 2px; }
.field.is-error input, .field.is-error textarea { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-err { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--error); }
.field-err .icon { width: 18px; height: 18px; }

/* ---------- brand sheet (brand.html only) ---------- */
.sh-band { border-top: 1px solid var(--ink); }
.sh-paper { background: var(--paper); }
.sh-intro .hero-title { margin-bottom: 48px; }
.sh-intro-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.sh-intro-row .hero-sub { grid-column: 1 / 7; }
.sh-intro-row .facts { grid-column: 9 / 13; margin-top: 0; }
.sh-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 72px; }
.sh-c6 { grid-column: span 6; }
.sh-c4 { grid-column: span 4; }
.sh-c8 { grid-column: span 8; }
.sh-c12 { grid-column: 1 / -1; }
.sh-card { display: flex; flex-direction: column; padding: 28px; background: var(--paper); border: 1px solid var(--line); }
.sh-paper .sh-card { background: var(--ground); }
.sh-card-dark { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.sh-paper .sh-card-dark { background: var(--dark); }
.sh-card-dark .label { color: var(--on-dark-soft); }
.sh-stage { flex: 1; display: grid; place-items: center; min-height: 240px; padding: 32px 0; }
.sh-cap { margin-top: 20px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.sh-card-dark .sh-cap { color: var(--on-dark-soft); }
.sh-logo-xl .logo-word { font-size: 92px; }
.sh-logo-xl .logo-sub { font-size: 17px; }
.sh-logo-xl { gap: 18px; }
.sh-card-dark .logo { color: var(--on-dark); }
.sh-card-dark .logo-sub { color: var(--on-dark-soft); }
.sh-sizes { display: grid; gap: 22px; align-content: center; width: 100%; }
.sh-size { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sh-size:last-child { border-bottom: 0; padding-bottom: 0; }
.sh-size .logo-sub.sh-noest .logo-est { display: none; }
.sh-size-30 .logo-word { font-size: 30px; }
.sh-size-30 { gap: 8px; }
.sh-size-24 .logo-word { font-size: 24px; }
.sh-size-24 .logo-sub { font-size: 12px; }
.sh-size-24 { gap: 8px; }
.sh-spec { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-card-dark .foot-word { font-size: 104px; }
.sh-clear { position: relative; display: inline-flex; padding: 28px 30px; outline: 1px dashed var(--field-line); }
.sh-clear::before { content: "W"; position: absolute; top: 2px; left: 6px; font-family: var(--serif); font-size: 15px; line-height: 1; color: var(--ink-soft); }
.sh-donts { margin-top: 20px; }
.sh-donts li { display: flex; gap: 10px; padding: 8px 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); border-top: 1px solid var(--line); }
.sh-donts .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--error); }

.sh-group + .sh-group { margin-top: 56px; }
.sh-group > .label { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sh-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-top: 24px; }
.sh-chip { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 14px 16px; background: var(--c); color: var(--t); border: 1px solid var(--line); font-family: var(--serif); font-size: 34px; line-height: 1; }
.sh-tok { margin-top: 14px; font-size: 15px; font-weight: 600; }
.sh-hex { font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sh-role { margin-top: 8px; font-size: 15px; line-height: 1.45; }
.sh-ct { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

.sh-type { border-bottom: 1px solid var(--line); }
.sh-tr { padding: 32px 0 36px; border-top: 1px solid var(--line); }
.sh-tr:first-child { border-top-color: var(--ink); }
.sh-tr-top { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 20px; }
.sh-tr .hero-title { margin: 0; }
.sh-nums { display: flex; align-items: baseline; gap: 64px; }
.sh-nums .level-num { margin: 0; color: var(--ink); }
.sh-nums .proof-b { font-family: var(--serif); font-size: 40px; line-height: 1.05; }
.sh-tr .pull { margin: 0; }
.sh-tr .hero-sub, .sh-tr .sh-body { max-width: 760px; }
.sh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }

.sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.sh-cell { display: grid; gap: 14px; justify-items: start; }
.sh-state { font-size: 13px; color: var(--ink-soft); }
.sh-card-dark .sh-state { color: var(--on-dark-soft); }
.sh-sub { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); }
.sh-sub:first-child { margin-top: 0; }
.sh-card .steps { padding-bottom: 0; border-bottom: 0; }
.sh-fields { grid-template-columns: 1fr 1fr; }
.sh-card .field input { background: var(--paper); }
.sh-steps-col { display: grid; gap: 18px; }

.sh-card .index { margin-top: 0; }
.sh-card .svc-list .svc:first-child { padding-top: 0; border-top: 0; }
.sh-card .svc-list { border-bottom: 0; }
.sh-card .svc-ic { display: none; }
.sh-card-dark .range { margin: 0; }
.sh-card .qa:last-child { border-bottom: 0; }
.sh-card .rev { border-top: 0; padding-top: 0; }
.sh-card .lot-list { grid-template-columns: 1fr; }
.sh-card .lot-list li { border-right: 0; padding: 0; }
.sh-card .q-sent { padding-top: 0; }
.sh-card .swipe-meta { display: flex; margin-top: 0; }
.sh-card .seg { display: grid; margin-bottom: 0; }

.sh-photos { display: grid; grid-template-columns: 2.5fr 1.5fr .8fr 1fr; gap: var(--gap); align-items: end; }
.sh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.sh-tr h2 { max-width: 880px; }
.sh-fields { margin-top: 0; grid-template-columns: repeat(4, 1fr); align-items: start; }
.sh-wrap-state + .sh-wrap-state { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.sh-card-dark .sh-wrap-state + .sh-wrap-state { border-top-color: var(--dark-line); }
.sh-ph-img { overflow: hidden; background: var(--wash); }
.sh-ph-raw img { filter: none; }
.sh-ar-hero { aspect-ratio: 2.5 / 1; }
.sh-ar-plate { aspect-ratio: 3 / 2; }
.sh-ar-port { aspect-ratio: 4 / 5; }
.sh-ar-sq { aspect-ratio: 1 / 1; }
.sh-icons { display: grid; margin-top: 32px; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sh-icons li { display: grid; justify-items: center; gap: 12px; padding: 22px 8px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-icons .icon { width: 28px; height: 28px; }
.sh-icons span { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.sh-space { display: grid; gap: 10px; }
.sh-space li { display: grid; grid-template-columns: 56px 260px 1fr; align-items: center; gap: 16px; font-size: 15px; }
.sh-space b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-space i { display: block; height: 14px; width: var(--s); background: var(--wood); }
.sh-space span { color: var(--ink-soft); }
.sh-shape { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sh-shape > div { display: grid; gap: 14px; }
.sh-box { height: 96px; background: var(--ground); border: 1px solid var(--field-line); }
.sh-box-sel { background: var(--wash); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sh-box-rule { border: 0; border-top: 1px solid var(--ink); background: none; }

/* ---------- menu (tablet and phone) ---------- */
.menu { display: none; }

/* =====================================================================
   TABLET (834, checked at 1024)
   ===================================================================== */
@media (max-width: 1099px) {
  :root { --gut: 32px; --gap: 20px; --pad: 96px; }
  :where(.site) h2 { font-size: 52px; }

  /* header: logo, phone, start link, menu button */
  .header-in { height: 80px; gap: 20px; }
  .nav { display: none; }
  .header-actions { gap: 20px; }
  .icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--field-line); color: var(--ink); }
  .icon-btn .icon { width: 22px; height: 22px; }
  .call-btn { display: none; }

  /* hero: headline sized to the width so it keeps two lines */
  .hero { padding-top: 56px; }
  .hero-title { margin: 28px 0 40px; font-size: calc((100vw - 2 * var(--gut)) / 9.9); }
  .hero-row { display: block; }
  .hero-sub { max-width: 620px; font-size: 19px; }
  .hero-actions { justify-content: flex-start; margin-top: 28px; }
  .proof { margin-top: 48px; }
  .proof li { padding: 18px 16px 0; }
  .proof b { font-size: 34px; }
  .proof span { font-size: 14px; }
  .hero-img { aspect-ratio: 16 / 9; }

  /* section heads stack */
  .sec-head { row-gap: 24px; margin-bottom: 48px; }
  .sec-head h2, .area .sec-head h2 { grid-column: 1 / -1; }
  .sec-head .sec-intro { grid-column: 1 / 10; }

  /* homes: plate above, facts in two columns, slimmer index */
  .plate-img { grid-column: 1 / -1; }
  .plate-text { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 28px; }
  .plate-no { grid-column: 1; font-size: 72px; }
  .plate-text h3 { grid-column: 1; margin-top: 16px; font-size: 30px; }
  .plate-town { grid-column: 1; }
  .plate-note { grid-column: 1; }
  .facts { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: start; }
  .index { margin-top: 56px; }
  .index th:nth-child(5), .index td:nth-child(5), .index th:nth-child(6), .index td:nth-child(6) { display: none; }
  .index .ix-no { width: 56px; font-size: 22px; }
  .index .ix-home { font-size: 22px; }
  .index td:nth-child(3) { width: 190px; }
  .index td:nth-child(4) { width: 140px; }
  .index td { font-size: 15px; }

  /* services: photos side by side, list full width */
  .svc-photos, .svc-col { grid-column: 1 / -1; }
  .svc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; margin-bottom: 56px; }
  .svc-ph-1 .svc-img, .svc-ph-2 .svc-img { aspect-ratio: 1 / 1; }
  .svc-ph-2 { width: auto; margin: 0; }
  .svc h3 { font-size: 30px; }

  /* budget */
  .tick { font-size: 18px; }
  .range-tag { font-size: 14px; }
  .level { padding: 28px 20px 30px; }
  .level-num { font-size: calc((100vw - 2 * var(--gut)) / 18.5); }
  .level-desc { font-size: 21px; }
  .level-list li { font-size: 15px; }
  .level-ex b { font-size: 28px; }
  .budget-more { grid-template-columns: 1fr 1fr; gap: 40px 32px; margin-top: 64px; }
  .bm-remodel { grid-column: 1 / -1; }
  .fixed { display: block; margin-top: 64px; }
  .fixed-big { font-size: 46px; max-width: 640px; }
  .fixed-body { margin-top: 24px; max-width: 620px; }

  /* process */
  .proc-head .sec-head { grid-column: 1 / -1; }
  .proc-photo { grid-column: 1 / -1; margin-top: 40px; }
  .proc-img { aspect-ratio: 21 / 9; }
  .gantt { margin-top: 56px; }
  .g-axis, .g-row { grid-template-columns: 236px 1fr; column-gap: 24px; }
  .g-dur { white-space: nowrap; letter-spacing: 0.1em; }
  .g-label { gap: 12px; }
  .g-label h3 { font-size: 24px; }
  .g-no { font-size: 22px; }
  .g-ticks span { font-size: 17px; }
  .g-line { font-size: 15px; }

  /* about */
  .about-grid { row-gap: 56px; }
  .about-photo { grid-column: 1 / 7; align-self: start; }
  .about-img { aspect-ratio: 3 / 4; }
  .about-text { grid-column: 7 / 13; align-self: start; }
  .about-text h2 { font-size: 40px; }
  .about-story { margin-top: 20px; }
  .about-story p { font-size: 16px; }
  .pull { margin-top: 28px; }
  .pull p { font-size: 26px; }
  .about-facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .about-facts span { margin: 0; padding: 10px 0; font-size: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .team-list { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
  .team-list dd { font-size: 22px; }
  .about-notes { margin-top: -24px; }

  /* reviews */
  .rev-head { display: block; }
  .rating { justify-self: start; text-align: left; margin-top: 24px; display: flex; align-items: center; gap: 16px; }
  .rating p { margin: 0; }
  .rev-feature { margin: 48px 0 56px; }
  .rev-feature-text { grid-column: 1 / 9; }
  .rev-feature blockquote p { font-size: 34px; }
  .rev-feature-photo { grid-column: 9 / 13; }
  .rev-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .rev blockquote p { font-size: 23px; }

  /* area */
  .area-towns { grid-column: 1 / 7; }
  .lot-photo { grid-column: 7 / 13; }
  .lot-img { aspect-ratio: 4 / 5; }
  .towns li { font-size: 22px; }
  .lot { margin-top: 64px; }
  .lot-top { display: block; }
  .lot-head { font-size: 32px; }
  .area-note { margin-top: 12px; white-space: normal; }
  .lot-list { grid-template-columns: 1fr; }
  .lot-list li { display: grid; grid-template-columns: 48px 200px 1fr; column-gap: 16px; align-items: baseline; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .lot-list h4, .lot-list p { margin-top: 0; }
  .lot-no { font-size: 26px; }

  /* faq */
  .faq-head { display: block; margin-bottom: 48px; }
  .faq-card { max-width: 560px; margin-top: 32px; }
  .faq-groups { column-gap: 32px; row-gap: 40px; }
  .q { font-size: 22px; }
  .a { font-size: 16px; }

  /* quote */
  .quote-side, .form-card { grid-column: 1 / -1; }
  .quote-side { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .quote-side > .folio, .quote-side > h2, .quote-side > .quote-lead { grid-column: 1 / -1; }
  .quote-side h2 { font-size: 48px; max-width: 640px; }
  .meet { grid-column: 1; margin-top: 32px; }
  .quote-photo { grid-column: 2; margin-top: 32px; }
  .quote-img { aspect-ratio: 4 / 3; }
  .quote-contact { grid-column: 1 / -1; margin-top: 24px; }
  .form-card { margin-top: 48px; padding: 36px 32px 32px; }

  /* footer */
  .site-footer { padding: 88px 0 40px; }
  .foot-top { display: block; }
  .foot-word { font-size: 168px; }
  .foot-lead { margin-top: 32px; max-width: 560px; }
  .foot-line { font-size: 28px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px 32px; margin-top: 56px; }
  .foot-base { flex-direction: column; gap: 12px; margin-top: 48px; }

  /* menu: side panel */
  .is-menu-open .menu { display: flex; }
  .menu {
    position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: 440px;
    flex-direction: column; gap: 28px; padding: 16px 32px 32px;
    background: var(--ground); overflow-y: auto;
    border-left: 1px solid var(--line);
  }
  .is-menu-open .site-header::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(28, 26, 23, 0.45); }
  .menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
  .menu-list { border-top: 1px solid var(--ink); }
  .menu-list li { border-bottom: 1px solid var(--line); }
  .menu-list a { display: flex; align-items: baseline; gap: 20px; min-height: 64px; padding: 14px 0; font-family: var(--serif); font-size: 32px; line-height: 1.1; }
  .menu-no { min-width: 28px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft); }
  .menu-actions { display: grid; gap: 10px; }
  .menu-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }

  /* tap targets: tablets are touch screens too */
  .logo { padding: 4px 0; }
  .header-phone, .hero-call { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
  .header-start { min-height: 44px; padding: 0; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .prompt a, .rev-more a { min-height: 44px; align-items: center; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .fc a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot-legal { gap: 0 20px; }
}

/* =====================================================================
   PHONE (390, checked at 360)
   ===================================================================== */
@media (max-width: 699px) {
  :root { --gut: 20px; --gap: 16px; --pad: 72px; }
  .site { font-size: 17px; }
  :where(.site) h2 { font-size: 40px; line-height: 1.04; }
  .label, .eyebrow, .folio, .caption .cap-no, .level-label, .level-name { font-size: 13px; letter-spacing: 0.12em; }
  .folio-no { font-size: 20px; gap: 12px; }
  .folio-no::after { width: 36px; }
  .caption { font-size: 14px; gap: 10px; }
  .btn { min-height: 54px; }

  /* header: wordmark, call, menu */
  .header-in { height: 64px; gap: 12px; }
  .logo-word { font-size: 30px; }
  .logo { gap: 8px; }
  .logo-est { display: none; }
  .header-phone, .header-start { display: none; }
  .header-actions { gap: 8px; }
  .call-btn { display: inline-grid; color: var(--walnut); border-color: var(--walnut); }
  .icon-btn { width: 46px; height: 46px; }

  /* hero */
  .hero { padding-top: 28px; }
  .hero-eyebrow span:first-child { display: none; }
  .hero-eyebrow span + span::before { width: 20px; margin-right: 12px; }
  .hero-eyebrow span:nth-child(2)::before { display: none; }
  .hero-eyebrow { gap: 12px; }
  .hero-title { margin: 20px 0 22px; font-size: clamp(44px, 13.4vw, 54px); line-height: 0.98; letter-spacing: -0.018em; }
  .hero-sub { font-size: 17px; line-height: 1.55; }
  .hero-actions { display: grid; justify-content: stretch; gap: 4px; margin-top: 24px; }
  .hero-actions .btn { width: 100%; }
  .hero-call { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 16px; }
  .proof { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .proof li { padding: 14px 0 14px 16px; border-bottom: 1px solid var(--line); }
  .proof li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof b { font-size: 30px; }
  .proof span { font-size: 15px; }
  .hero-plate { margin: 32px calc(-1 * var(--gut)) 0; }
  .hero-img { aspect-ratio: 4 / 5; }
  .hero-img img { object-position: 46% 60%; }
  .hero-plate .caption { padding: 0 var(--gut); }

  /* section heads */
  .sec-head { row-gap: 18px; margin-bottom: 32px; }
  .sec-head .sec-intro { grid-column: 1 / -1; font-size: 17px; }

  /* homes: swipe cards with a counter */
  .index { display: none; }
  .plates { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .site .plates .plate { display: block; flex: 0 0 84%; scroll-snap-align: start; }
  .plate-img { aspect-ratio: 4 / 5; }
  .plate-text { display: block; margin-top: 16px; }
  .plate-no { font-size: 34px; line-height: 1; }
  .plate-of { display: inline; font-size: 20px; color: var(--ink-soft); }
  .plate-text h3 { margin-top: 10px; font-size: 25px; }
  .plate-town { margin-top: 6px; font-size: 13px; }
  .facts { margin-top: 16px; }
  .facts div { grid-template-columns: 84px 1fr; padding: 8px 0; }
  .facts dt { font-size: 12px; }
  .facts dd { font-size: 15px; }
  .plate-note { margin-top: 14px; font-size: 15px; }
  .swipe-meta { display: flex; }
  .prompt { margin-top: 28px; font-size: 16px; }
  .prompt a { display: inline-flex; margin: 6px 0 0; }

  /* services: one full-bleed photo, rows below */
  .svc-photos { display: block; margin: 0 calc(-1 * var(--gut)) 32px; }
  .svc-ph-1 .svc-img { aspect-ratio: 4 / 3; }
  .svc-ph-1 .caption { padding: 0 var(--gut); }
  .svc-ph-2 { display: none; }
  .svc { grid-template-columns: 36px 1fr; padding: 22px 0 24px; }
  .svc:first-child { padding-top: 20px; }
  .svc-no { font-size: 22px; }
  .svc h3 { font-size: 26px; }
  .svc-desc { font-size: 16px; }
  .svc-facts { grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 14px; }
  .svc-facts .sf-inc { grid-column: 1 / -1; }
  .svc-facts dt { font-size: 12px; }
  .svc-facts dd { font-size: 15px; }
  .not-fit { font-size: 15px; }
  .not-fit .label { display: block; margin-bottom: 4px; }

  /* budget: segmented control, one level at a time */
  .seg { display: grid; }
  .range { margin: 0 0 28px; padding: 34px 0 30px; }
  .tick { font-size: 16px; }
  .tick:nth-child(2) b, .tick:nth-child(4) b, .tick:nth-child(6) b { display: none; }
  .tick::after { top: 26px; }
  .range-row { height: 54px; }
  .range-bar { top: 28px; height: 12px; }
  .range-tag { top: 4px; font-size: 13px; }
  .range-tag b { margin-right: 6px; font-size: 12px; }
  .rr-arch .range-tag { left: auto; right: calc(100% - var(--l) - var(--w)); }
  .range-unit { font-size: 12px; }
  .levels { display: block; border-top: 0; }
  .level { display: none; padding: 26px 20px 24px; border-left: 0; }
  .level.is-sel { display: flex; }
  .level-num { margin-top: 12px; font-size: 54px; }
  .level-desc { margin-top: 14px; font-size: 22px; }
  .level-label { margin-top: 22px; }
  .level-list li { padding: 8px 0; font-size: 16px; }
  .level-ex { padding-top: 22px; }
  .level-ex b { font-size: 32px; }
  .budget-more { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .bm-head { font-size: 24px; margin-bottom: 10px; }
  .bm-list li, .rtable th, .rtable td { font-size: 16px; padding: 10px 0; }
  .rtable td { padding-left: 12px; }
  .fixed { margin-top: 48px; padding-top: 32px; }
  .fixed-big { font-size: 36px; line-height: 1.06; }
  .fixed-body p { font-size: 17px; }
  .fixed-body .btn { width: 100%; margin-top: 22px; }
  .fine { margin-top: 28px; font-size: 14px; }

  /* process: vertical, each phase with its bar */
  .proc-photo { margin: 28px calc(-1 * var(--gut)) 0; }
  .proc-photo .caption { padding: 0 var(--gut); }
  .proc-img { aspect-ratio: 16 / 9; }
  .gantt { margin-top: 40px; }
  .g-axis { display: block; padding-bottom: 10px; }
  .g-axis-label { display: block; margin-bottom: 10px; font-size: 12px; }
  .g-ticks span { font-size: 15px; }
  .g-row { display: block; padding: 20px 0 22px; }
  .g-label { gap: 12px; align-items: baseline; }
  .g-label > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .g-label h3 { font-size: 24px; }
  .g-dur { margin-top: 0; font-size: 12px; }
  .g-no { font-size: 22px; }
  .g-track { margin-top: 14px; height: 12px; }
  .g-after::after { top: 5px; }
  .g-line { margin-top: 12px; font-size: 15px; }
  .g-key { flex-wrap: wrap; }

  /* about */
  .about-grid { row-gap: 40px; }
  .about-photo, .about-text { grid-column: 1 / -1; }
  .about-photo { margin: 0 calc(-1 * var(--gut)); }
  .about-photo .caption { padding: 0 var(--gut); }
  .about-img { aspect-ratio: 4 / 5; }
  .about-text { grid-row: 2; }
  .about-text h2 { font-size: 38px; }
  .about-story p { font-size: 17px; }
  .pull p { font-size: 26px; }
  .team { grid-row: 3; }
  .team-list { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .team-list dt { font-size: 12px; }
  .team-list dd { font-size: 21px; }
  .about-notes { grid-row: 4; grid-template-columns: 1fr; row-gap: 14px; margin-top: -8px; }
  .about-notes p { font-size: 15px; }

  /* reviews: featured quote, then a swipe row */
  .rating { flex-wrap: wrap; gap: 8px 12px; }
  .rev-feature { display: block; margin: 32px 0 36px; padding-top: 28px; }
  .rev-feature blockquote p { font-size: 29px; line-height: 1.16; }
  .rev-feature-photo { display: none; }
  .rev-grid { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .rev { flex: 0 0 82%; scroll-snap-align: start; padding: 22px 20px 24px; background: var(--paper); border: 1px solid var(--line); }
  .rev blockquote p { font-size: 22px; }
  .rev figcaption { font-size: 14px; }
  .rev-more { margin-top: 28px; }

  /* area */
  .area-towns, .lot-photo { grid-column: 1 / -1; }
  .lot-photo { margin: 36px calc(-1 * var(--gut)) 0; }
  .lot-photo .caption { padding: 0 var(--gut); }
  .lot-img { aspect-ratio: 3 / 2; }
  .towns { column-gap: 16px; margin-top: 24px; }
  .towns li { font-size: 21px; padding: 10px 0 9px; }
  .towns li span { font-size: 12px; }
  .lot { margin-top: 48px; }
  .lot-head { font-size: 28px; }
  .area-note { align-items: flex-start; font-size: 16px; }
  .lot-list li { grid-template-columns: 36px 1fr; column-gap: 8px; padding: 16px 0; }
  .lot-list h4 { font-size: 17px; }
  .lot-list p { grid-column: 2; margin-top: 4px; font-size: 15px; }

  /* faq: accordions */
  .faq-head { margin-bottom: 32px; }
  .faq-card { margin-top: 24px; padding: 18px 18px; font-size: 16px; }
  .faq-groups { grid-template-columns: 1fr; row-gap: 32px; }
  .q { align-items: flex-start; gap: 16px; padding: 16px 0; font-size: 21px; }
  .q-ic { display: block; width: 22px; height: 22px; margin-top: 2px; color: var(--ink-soft); }
  .q-min, .qa.is-open .q-plus { display: none; }
  .qa.is-open .q-min { display: block; color: var(--walnut); }
  .a { display: none; margin-top: -4px; padding-bottom: 18px; font-size: 16px; }
  .qa.is-open .a { display: block; }

  /* quote */
  .quote-side { display: block; }
  .quote-side h2 { font-size: 38px; }
  .quote-lead { font-size: 17px; }
  .meet { margin-top: 28px; }
  .meet-list li { font-size: 16px; }
  .quote-photo { display: none; }
  .quote-contact { margin-top: 20px; }
  .form-card { margin: 36px calc(-1 * var(--gut)) 0; padding: 28px var(--gut) 28px; border-left: 0; border-right: 0; }
  .steps { gap: 20px; padding-bottom: 18px; }
  .fs { margin-top: 26px; }
  .tiles { grid-template-columns: 1fr; gap: 6px; }
  .tile { min-height: 54px; font-size: 16px; }
  .segf { grid-template-columns: 1fr; }
  .segf-btn { min-height: 50px; font-size: 16px; border-left: 0; border-top: 1px solid var(--field-line); }
  .segf-btn:first-child { border-top: 0; }
  .chips { grid-template-columns: 1fr 1fr; gap: 6px; }
  .chip { min-height: 50px; font-size: 16px; }
  .q-summary { align-items: flex-start; font-size: 15px; }
  .fields { grid-template-columns: 1fr; gap: 18px; }
  .field input, .field textarea { min-height: 54px; font-size: 16px; }
  .field textarea { min-height: 110px; }
  .sent-head { font-size: 30px; }
  .sent-steps li { grid-template-columns: 44px 1fr; font-size: 16px; }

  /* footer */
  .site-footer { padding: 64px 0 36px; }
  .foot-word { font-size: 100px; letter-spacing: -0.03em; }
  .foot-lead { margin-top: 24px; }
  .foot-line { font-size: 24px; }
  .foot-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .foot-cta .btn { width: 100%; }
  .foot-phone { text-align: center; font-size: 28px; }
  .foot-cols { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .fc p, .fc li { font-size: 15px; }
  .foot-base { margin-top: 36px; }
  .foot-legal { flex-wrap: wrap; gap: 8px 18px; white-space: normal; }

  /* menu: full screen */
  .menu { left: 0; width: 100%; padding: 0 var(--gut) 24px; border-left: 0; gap: 22px; }
  .menu-top { min-height: 64px; }
  .menu-list a { min-height: 60px; font-size: 30px; }

  /* phone round 1 */
  .hero-eyebrow { gap: 0; white-space: nowrap; }
  .hero-eyebrow span + span::before, .hero-eyebrow span:nth-child(2)::before { display: none; }
  .hero-eyebrow span:nth-child(3)::before { content: "·"; display: inline; width: auto; height: auto; margin: 0 8px; background: none; }
  .hero-call { gap: 6px; }
  .svc h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .svc-ic { display: block; flex: none; width: 22px; height: 22px; margin-top: 4px; color: var(--ink-soft); }
  .svc-min, .svc.is-open .svc-plus { display: none; }
  .svc.is-open .svc-min { display: block; color: var(--walnut); }
  .svc:not(.is-open) .svc-desc, .svc:not(.is-open) .svc-facts > div:not(:last-child), .svc:not(.is-open) .svc-facts dt { display: none; }
  .svc:not(.is-open) .svc-facts { display: block; margin-top: 4px; }
  .svc:not(.is-open) .svc-facts dd { margin: 0; font-weight: 500; color: var(--ink-soft); }
  .svc:not(.is-open) { padding: 18px 0 18px; }
  .team-list { grid-template-columns: 1fr; border-top: 1px solid var(--line); margin-top: 12px; }
  .team-list div { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .team-list dd { margin: 0; font-size: 20px; }
  .foot-cols { grid-template-columns: 1fr; gap: 24px; }
  .fc:nth-child(3) { display: none; }

  /* phone round 3: audit */
  .rev-feature figcaption span { display: block; margin: 2px 0 0; }
  .caption, .rev figcaption, .reassure, .level-unit, .fine, .g-key, .foot-base, .demo-note { font-size: 15px; }
  .range-unit { font-size: 13px; }
  .g-dur, .step { font-size: 13px; }
  .logo { min-height: 44px; align-items: center; }
  .q-summary a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; margin: -10px -6px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
  .back { min-height: 44px; margin-top: 8px; }
}

/* ---- build: states and polish not drawn in the design (demo-site-build) ---- */

/* The sticky header (production.md §4): a soft shadow under its hairline once the page scrolls under
   it. In-page jumps and tabbed-to controls stop below it; the header's own controls are left out, or
   focus going back to ☰ when the menu closes scrolls the page up. */
.site-header { position: sticky; top: 0; z-index: 30; }
.is-stuck .site-header { box-shadow: 0 12px 24px -16px rgba(28, 26, 23, 0.5); }
[id] { scroll-margin-top: var(--hdr-h, 89px); }
:where(main, .site-footer) :is(a[href], button, input, select, textarea, summary, [tabindex="0"]) { scroll-margin-top: calc(var(--hdr-h, 89px) + 16px); }
@media (prefers-reduced-motion: no-preference) { .site-header { transition: box-shadow .2s ease; } }

/* Focus: the brand sheet's 2px walnut ring, 3px out; wood on the dark budget band and footer, where
   walnut barely shows. Headings the page moves focus to are reading points, not controls: no ring. */
:where(.site) :is(a, button, summary):focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
:where(.budget, .site-footer) :is(a, button):focus-visible,
.budget .btn:focus-visible, .site-footer .btn:focus-visible { outline-color: var(--wood); }
:where(.site) [tabindex="-1"]:focus { outline: none; }

/* Menu: the dimmed page closes it (site.js). */
.is-menu-open .site-header::after { cursor: pointer; }

/* Project index: any home can be picked (the design drew 01 and 04). The whole row is the target;
   the home's name is the button. The picked row keeps its wash under the pointer. */
.index tbody tr { cursor: pointer; }
.index thead td { padding: 0; border-bottom: 1px solid var(--ink); }
.ix-btn { padding: 0; font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; text-align: left; }
.index tbody tr.is-sel:hover td { background: var(--wash); }
@media (hover: hover) { .index tbody tr:not(.is-sel):hover .ix-go { color: var(--field-line); } }

/* Phone home cards: one card per flick; the counter's bar follows the card (site.js sets --home). */
.sm-fill { left: calc((var(--home, 1) - 1) * 12.5%); }
button.sm-hint { margin: -13px 0; padding: 13px 0; cursor: pointer; }
@media (hover: hover) { button.sm-hint:hover { color: var(--ink); } }
@media (max-width: 699px) {
  .plate { scroll-snap-stop: always; }
  .plates:focus-visible, .rev-grid:focus-visible { outline: 2px solid var(--walnut); outline-offset: -2px; }
}

/* Service rows and FAQ questions: plain headings on wider screens (every row shows), buttons on phones,
   where they open and close (site.js swaps the element). */
.svc-q, .q-btn { display: contents; }
@media (max-width: 699px) {
  button.svc-q, button.q-btn { display: flex; flex: 1; justify-content: space-between; align-items: flex-start; gap: inherit; width: 100%; padding: 0; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  button.svc-q { margin: -8px 0; padding: 8px 0; }
  .q:has(> button.q-btn) { padding: 0; }
  button.q-btn { padding: 16px 0; }
  .svc:not(.is-open) { cursor: pointer; }
}

/* Finish levels: any of the three can be picked (the design drew Custom and Architectural). Wider
   screens: the whole column and its chart bar are targets, the level name is the button. Phones: the
   switch, or a chart bar. */
.range-row { cursor: pointer; }
.lv-pick { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
button.lv-pick { margin: -13px 0; padding: 13px 0; text-align: left; cursor: pointer; }
@media (min-width: 700px) { .level { cursor: pointer; } }
@media (hover: hover) and (min-width: 700px) {
  .level:not(.is-sel):hover { background: #27241F; }
  .range-row:not(.is-sel):hover .range-bar { background: #6B645A; }
}
@media (hover: hover) { .seg-btn:not(.is-sel):hover { background: var(--dark-2); color: var(--on-dark); } }

/* The request form: real radios inside the design's tiles, segments and chips. Each radio covers its
   box (invisible), so focus and scroll margins are measured from the box people see. */
.tile, .segf-btn, .chip { position: relative; cursor: pointer; }
.segf-btn, .chip { display: flex; align-items: center; justify-content: center; }
.tile input, .segf-btn input, .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.tile:has(input:focus-visible), .chip:has(input:focus-visible), .segf-btn:has(input:focus-visible) { z-index: 1; outline: 2px solid var(--walnut); outline-offset: 2px; }

/* Field errors: the brand sheet's look (an --error border, the warning line under the field). */
.field-err[hidden] { display: none; }
.field-err { align-items: flex-start; }
.field-err .icon { margin-top: 1.5px; }
.field.is-error input:focus, .field.is-error textarea:focus { outline-color: var(--error); border-color: var(--error); }
.fs.is-error .tile:not(.is-on) { border-color: var(--error); }
.fs > .field-err { margin-top: 10px; }

/* Step 2's Edit link is a button (it goes back a step); same look as the design's link. */
.q-edit { flex: none; font-weight: 600; color: var(--walnut); border-bottom: 1px solid currentColor; }
@media (max-width: 699px) {
  .q-edit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; margin: -10px -6px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
}
@media (hover: hover) { .back:hover { color: var(--ink); } }

/* Summary lines keep each picked answer whole; the place the visitor typed wraps, even one long word.
   The phone error keeps its example number on one line. */
.q-summary .nw, .field-err .nw { white-space: nowrap; }
.q-summary > [data-out] { min-width: 0; overflow-wrap: anywhere; }

/* Sending */
.qform.is-sending [type="submit"] { cursor: progress; }
.qform.is-sending [type="submit"] > * { display: none; }
.qform.is-sending [type="submit"]::after { content: "Sending…"; }

/* Webfonts swap in after first paint. Fallbacks sized to Instrument's widths (Times New Roman at 83.4%,
   Arial at 103%) wrap the headings and text the same way, so nothing below them jumps (desktop
   layout shift was 0.101). */
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 83.4%; ascent-override: 118%; descent-override: 37%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 103%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }
:root {
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, sans-serif;
}

/* Narrow desktops (1100–1279; found by the 1200px social card, the review's widths skip this range).
   The drawn header needs about 1,227px, so below 1240 its nav wrapped onto two lines: the wordmark drops
   "· Est. 2009" and the gaps close up. Below 1280 the firm's facts row ran past its column: the facts
   take the design's tablet 2 × 2 grid. The index's data columns give the home names the room they
   need for one line (two rows ran two lines below 1200). The form card takes one more column, up to
   its 1280 width, so every tile and segment label stays on one line; the side's text keeps a 56px gap
   to it. The headline is sized from the width as on tablets, so it keeps its two lines (it ran three
   at 1100). 1280 and wider match the design. */
@media (min-width: 1100px) and (max-width: 1239px) {
  .header-in { gap: 24px; }
  .nav { gap: 22px; }
  .header-actions { gap: 20px; }
  .header-in .logo-est { display: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .hero-title { font-size: min(120px, calc((100vw - 2 * var(--gut)) / 9.9)); }
  .about-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .about-facts span { margin: 0; padding: 10px 0; font-size: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .index td:nth-child(3) { width: 180px; }
  .index td:nth-child(4) { width: 140px; }
  .index td:nth-child(5) { width: 110px; }
  .index td:nth-child(6) { width: 64px; }
  .quote-side { padding-right: 32px; }
  .form-card { grid-column: 6 / 13; justify-self: end; width: min(100%, 588px); padding-left: 40px; padding-right: 40px; }
}
.nav a { white-space: nowrap; }