:root {
  --paper: #f2efe6;
  --paper-deep: #e6e0d3;
  --ink: #20231f;
  --muted: #676a61;
  --line: rgba(32, 35, 31, .2);
  --amber: #df6b3f;
  --amber-dark: #a43d20;
  --sage: #bac4a7;
  --cream: #fffaf0;
  --white: #fffdf7;
  --shadow: 0 24px 70px rgba(46, 44, 35, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
body.dialog-open { overflow: hidden; }
button, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid #0c7a75;
  outline-offset: 4px;
}

.demo-strip {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 7px clamp(18px, 5vw, 74px);
  color: #fff;
  background: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header {
  position: relative;
  z-index: 10;
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 26px;
  padding: 15px clamp(18px, 5vw, 74px);
  border-bottom: 1px solid var(--line);
  background: rgba(242, 239, 230, .94);
  backdrop-filter: blur(14px);
}
.brand {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .18em;
  text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; fill: currentColor; }
.main-nav { display: flex; gap: clamp(18px, 3vw, 42px); }
.main-nav a,
.header-link {
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.main-nav a { border-bottom: 1px solid transparent; }
.main-nav a:hover { border-color: currentColor; }
.header-link { justify-self: end; }

.hero {
  min-height: min(820px, calc(100vh - 116px));
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  border-bottom: 1px solid var(--line);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 8vw, 128px) clamp(24px, 7vw, 112px);
}
.kicker,
.section-index {
  margin: 0 0 26px;
  color: var(--amber-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero h1,
.section-heading h2,
.manifesto h2,
.district-copy h2,
.selection-heading h2,
.demo-disclosure h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .96;
}
.hero h1 { font-size: clamp(48px, 6vw, 92px); }
.hero h1 em { color: var(--amber-dark); font-weight: 400; }
.hero-lead {
  max-width: 590px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 38px;
}
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button-dark { color: var(--white); background: var(--ink); }
.button-dark:hover { background: #343831; }
.button-amber { color: #fff; background: var(--amber-dark); }
.button-light { color: var(--ink); background: var(--white); }
.text-link,
.text-button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  background: transparent;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.text-button:disabled { opacity: .42; cursor: not-allowed; }
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 540px;
  margin: 64px 0 0;
}
.hero-facts div { padding: 0 18px; border-left: 1px solid var(--line); }
.hero-facts div:first-child { padding-left: 0; border-left: 0; }
.hero-facts dt { font-family: Georgia, serif; font-size: 34px; }
.hero-facts dd { margin: 2px 0 0; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.hero-visual {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: #a89c86;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(24, 27, 24, .65));
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 25px;
  left: 28px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-stamp {
  position: absolute;
  z-index: 2;
  top: 30px;
  right: 30px;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}
.hero-stamp span { font-family: Georgia, serif; font-size: 24px; }
.hero-stamp b { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.manifesto {
  display: grid;
  grid-template-columns: .35fr 1.2fr .6fr;
  gap: clamp(30px, 5vw, 90px);
  padding: clamp(70px, 9vw, 140px) clamp(20px, 6vw, 96px);
  border-bottom: 1px solid var(--line);
}
.manifesto h2,
.section-heading h2,
.district-copy h2,
.selection-heading h2,
.demo-disclosure h2 { font-size: clamp(42px, 5vw, 76px); }
.manifesto > div > p,
.district-copy > p,
.selection-heading > p {
  max-width: 680px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.manifesto-note {
  align-self: end;
  padding: 24px;
  border-top: 2px solid var(--amber);
  background: var(--paper-deep);
}
.manifesto-note p { margin: 14px 0 0; font-size: 13px; line-height: 1.6; }
.line-icon { width: 56px; height: 1px; display: block; background: var(--ink); }

.section-shell { padding: clamp(70px, 9vw, 140px) clamp(18px, 6vw, 96px); }
.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px);
  gap: 70px;
  align-items: end;
}
.section-intro { margin: 0 0 7px; color: var(--muted); font-size: 16px; line-height: 1.7; }

.filter-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1px;
  margin-top: 54px;
  border: 1px solid var(--line);
  background: var(--line);
}
.filter-panel label { padding: 16px 18px; background: var(--white); }
.filter-panel label span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.filter-panel select,
.selection-controls select {
  width: 100%;
  padding: 5px 28px 5px 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 750;
}
.filter-reset {
  padding: 17px;
  border: 0;
  color: #fff;
  background: var(--ink);
  cursor: pointer;
}
.results-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 2px 10px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
.results-line p { margin: 0; }

.property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  margin-top: 20px;
}
.property-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, .78fr) 1.25fr;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.property-card[hidden] { display: none; }
.property-visual {
  position: relative;
  min-height: 350px;
  padding: 23px;
  overflow: hidden;
  background: var(--tone, #c7cbb9);
}
.property-visual::before,
.property-visual::after,
.visual-block { content: ""; position: absolute; border: 1px solid rgba(32,35,31,.45); }
.property-visual::before { width: 68%; height: 52%; top: 26%; left: 18%; }
.property-visual::after { width: 38%; height: 34%; right: 6%; bottom: 8%; background: rgba(255,255,255,.24); }
.visual-block.block-a { width: 48%; height: 1px; top: 52%; left: 10%; }
.visual-block.block-b { width: 1px; height: 54%; top: 18%; right: 31%; }
.property-number { position: relative; z-index: 2; font-family: Georgia, serif; font-size: 42px; }
.property-visual p {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 15px;
  margin: 0;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tone-sage { --tone:#bec7ae; }
.tone-amber { --tone:#e4b06e; }
.tone-charcoal { --tone:#62665e; }
.tone-charcoal .property-visual { color:#fff; }
.tone-river { --tone:#a9c8c8; }
.tone-limestone { --tone:#d8cdb6; }
.tone-earth { --tone:#a98d70; }
.tone-mist { --tone:#cbd7d4; }
.tone-olive { --tone:#a9af83; }
.property-body { display: flex; flex-direction: column; padding: 25px; }
.property-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--amber-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.property-body h3 {
  margin: 26px 0 13px;
  font-family: Georgia, serif;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}
.property-body > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.property-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: auto 0 0;
  padding-top: 30px;
}
.property-specs div { padding: 0 10px; border-left: 1px solid var(--line); }
.property-specs div:first-child { padding-left: 0; border-left: 0; }
.property-specs dt { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.property-specs dd { margin: 4px 0 0; font-weight: 800; }
.property-actions { display: flex; align-items: center; gap: 9px; margin-top: 26px; }
.property-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.details-button { flex: 1; }
.icon-button { width: 40px; }
.compare-toggle { padding: 0 11px; }
.property-actions button:hover,
.property-actions button[aria-pressed="true"] { color: #fff; background: var(--ink); }
.empty-state {
  margin-top: 24px;
  padding: 70px 20px;
  text-align: center;
  border: 1px dashed var(--line);
}
.empty-state p { font-family: Georgia, serif; font-size: 31px; }
.noscript-note { padding: 16px; border: 1px solid var(--line); }

.districts {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(400px, 1.15fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
  color: #f8f2e8;
  background: var(--ink);
}
.district-copy .section-index { color: #e99066; }
.district-copy > p { color: rgba(255,255,255,.68); }
.district-key { display: grid; gap: 13px; margin: 34px 0 0; padding: 0; list-style: none; }
.district-key li { color: rgba(255,255,255,.72); font-size: 13px; }
.key-dot { width: 9px; height: 9px; display: inline-block; margin-right: 9px; border-radius: 50%; background: #fff; }
.dot-centre { background:#e8865b; }
.dot-gardens { background:#b7c58c; }
.dot-river { background:#8dc3c3; }
.dot-hills { background:#b09b83; }
.district-map-wrap { min-width: 0; }
.district-map { width: 100%; overflow: visible; }
.map-zone { cursor: pointer; transition: filter .2s ease, transform .2s ease; transform-origin: center; }
.map-zone:hover,
.map-zone:focus { filter: brightness(1.16); transform: translateY(-3px); outline: none; }
.map-zone path { stroke: var(--ink); stroke-width: 3; }
.zone-centre path { fill:#e8865b; }
.zone-gardens path { fill:#b7c58c; }
.zone-river path { fill:#8dc3c3; }
.zone-hills path { fill:#b09b83; }
.map-zone text { fill: var(--ink); font-size: 18px; font-weight: 850; text-anchor: middle; pointer-events:none; }
.map-zone .map-count { font-size: 11px; font-weight: 650; }
.map-river-line { fill:none; stroke:#e9f5f2; stroke-width:11; opacity:.55; pointer-events:none; }
.map-caption { color: rgba(255,255,255,.5); font-size: 11px; }

.selection {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(48px, 7vw, 110px);
}
.selection-tool {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(300px, 1.25fr);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}
.selection-controls { display: grid; gap: 20px; padding: 32px; border-right: 1px solid var(--line); }
.selection-controls > label > span,
.must-have legend {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.selection-controls > label { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.must-have { display: grid; gap: 10px; margin: 0; padding: 18px; border: 1px solid var(--line); }
.must-have label { display:flex; gap:9px; align-items:flex-start; font-size:12px; }
.must-have small { color: var(--muted); line-height:1.5; }
.match-result {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(35px, 5vw, 70px);
  background: var(--paper-deep);
}
.match-eyebrow { color: var(--amber-dark); font-size: 10px; font-weight: 850; letter-spacing:.12em; text-transform:uppercase; }
.match-result h3 { margin: 17px 0; font-family:Georgia,serif; font-size:clamp(38px,4vw,62px); font-weight:400; line-height:1; }
.match-result > p { color:var(--muted); line-height:1.7; }
.match-reasons { display:grid; gap:10px; margin:23px 0 0; padding:0; list-style:none; }
.match-reasons li { position:relative; padding-left:23px; font-size:13px; }
.match-reasons li::before { content:"✓"; position:absolute; left:0; color:var(--amber-dark); font-weight:900; }
.match-actions { display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; }

.demo-disclosure {
  display: grid;
  grid-template-columns: .3fr 1fr auto;
  gap: 50px;
  align-items: center;
  color:#fff;
  background: var(--amber-dark);
}
.demo-disclosure p { max-width:680px; color:rgba(255,255,255,.8); line-height:1.7; }
.demo-disclosure .section-index { color:#fff; }
.site-footer {
  min-height: 130px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:25px;
  align-items:center;
  padding:28px clamp(18px,6vw,96px);
  color:#fff;
  background:#151815;
  font-size:11px;
}
.site-footer p { margin:0; color:rgba(255,255,255,.6); text-align:center; }
.site-footer > a:last-child { justify-self:end; }
.brand-footer { color:#fff; }

.compare-tray {
  position:fixed;
  z-index:50;
  right:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  color:#fff;
  background:var(--ink);
  box-shadow:var(--shadow);
}
.compare-tray[hidden] { display:none; }
.compare-tray div { display:grid; min-width:76px; }
.compare-tray div span { font-size:9px; text-transform:uppercase; }
.compare-tray button { min-height:38px; padding:8px 11px; border:1px solid rgba(255,255,255,.35); color:#fff; background:transparent; cursor:pointer; }

.detail-dialog,
.compare-dialog {
  width:min(760px, calc(100% - 30px));
  max-height:calc(100vh - 30px);
  padding:0;
  border:0;
  color:var(--ink);
  background:var(--white);
  box-shadow:0 30px 100px rgba(0,0,0,.35);
}
.compare-dialog { width:min(1040px, calc(100% - 30px)); }
.detail-dialog::backdrop,
.compare-dialog::backdrop { background:rgba(20,23,20,.75); backdrop-filter:blur(5px); }
.dialog-inner { position:relative; padding:clamp(30px,6vw,76px); }
.dialog-close {
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  font-size:24px;
  cursor:pointer;
}
.dialog-kicker { color:var(--amber-dark); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.dialog-inner h2 { max-width:680px; margin:18px 0; font-family:Georgia,serif; font-size:clamp(39px,6vw,72px); font-weight:400; line-height:.98; }
.dialog-summary { max-width:670px; color:var(--muted); font-size:16px; line-height:1.7; }
.dialog-specs { display:grid; grid-template-columns:repeat(4,1fr); margin:36px 0; border:1px solid var(--line); }
.dialog-specs div { padding:18px; border-right:1px solid var(--line); }
.dialog-specs div:last-child { border-right:0; }
.dialog-specs dt { color:var(--muted); font-size:9px; text-transform:uppercase; }
.dialog-specs dd { margin:6px 0 0; font-weight:850; }
.dialog-note { display:flex; gap:14px; padding:17px; color:#fff; background:var(--ink); }
.compare-content { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.compare-column { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.compare-column h3 { margin:0 0 20px; font-family:Georgia,serif; font-size:27px; }
.compare-column dl { display:grid; gap:14px; margin:0; }
.compare-column dl div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.compare-column dt { color:var(--muted); }
.compare-column dd { margin:0; font-weight:800; text-align:right; }
.sr-status {
  position:fixed;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.print-brief { display:none; }

@media (max-width: 1100px) {
  .site-header { grid-template-columns:1fr auto; }
  .main-nav { display:none; }
  .hero { grid-template-columns:1fr 1fr; }
  .hero-copy { padding-inline:40px; }
  .property-card { grid-template-columns:1fr; }
  .property-visual { min-height:240px; }
  .selection { grid-template-columns:1fr; }
  .selection-heading { max-width:760px; }
}

@media (max-width: 820px) {
  .demo-strip span:last-child { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:70px 24px; }
  .hero-visual { min-height:520px; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto-note { max-width:520px; }
  .section-heading { grid-template-columns:1fr; gap:24px; }
  .filter-panel { grid-template-columns:repeat(2,1fr); }
  .filter-reset { grid-column:1 / -1; }
  .property-grid { grid-template-columns:1fr; }
  .districts { grid-template-columns:1fr; }
  .selection-tool { grid-template-columns:1fr; }
  .selection-controls { border-right:0; border-bottom:1px solid var(--line); }
  .demo-disclosure { grid-template-columns:1fr; gap:20px; }
  .site-footer { grid-template-columns:1fr; text-align:left; }
  .site-footer p { text-align:left; }
  .site-footer > a:last-child { justify-self:start; }
}

@media (max-width: 560px) {
  .demo-strip { justify-content:center; font-size:9px; }
  .site-header { min-height:68px; padding-block:10px; }
  .header-link { font-size:0; }
  .header-link span { font-size:18px; }
  .hero h1 { font-size:50px; }
  .hero-visual { min-height:420px; }
  .hero-stamp { width:90px; height:90px; }
  .hero-facts { margin-top:45px; }
  .hero-facts dt { font-size:28px; }
  .section-shell { padding-inline:16px; }
  .filter-panel { grid-template-columns:1fr; }
  .filter-reset { grid-column:auto; }
  .results-line { display:block; }
  .results-line p + p { margin-top:7px; }
  .property-body { padding:21px; }
  .property-specs { font-size:12px; }
  .property-actions { flex-wrap:wrap; }
  .details-button { flex-basis:100%; }
  .districts { padding-inline:18px; }
  .district-map { min-width:520px; transform:translateX(-50px); }
  .district-map-wrap { overflow:hidden; }
  .match-result { min-height:380px; padding:30px 22px; }
  .dialog-specs { grid-template-columns:repeat(2,1fr); }
  .dialog-specs div:nth-child(2) { border-right:0; }
  .dialog-specs div { border-bottom:1px solid var(--line); }
  .compare-content { grid-template-columns:1fr; }
  .compare-tray { right:8px; bottom:8px; left:8px; justify-content:space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print {
  @page { margin:18mm; }
  body.printing-brief > :not(main) { display:none !important; }
  body.printing-brief main { display:block !important; }
  body.printing-brief main > :not(.print-brief) { display:none !important; }
  body.printing-brief .print-brief {
    display:block !important;
    color:#111;
    background:#fff;
    font-family:Georgia,serif;
  }
  .print-brief h2 { font-size:38pt; font-weight:400; }
  .print-brief p { font-size:11pt; line-height:1.6; }
  .print-brief small { display:block; margin-top:40px; }
}