:root {
  color-scheme: light;
  --ink: #17251f;
  --muted: #68766f;
  --paper: #f3f4ef;
  --card: #ffffff;
  --line: #dce3dc;
  --line-strong: #c8d3ca;
  --green-950: #0d2e24;
  --green-900: #123e31;
  --green-800: #14563f;
  --green-700: #176b4d;
  --green-100: #dff1e8;
  --green-50: #edf8f2;
  --amber: #b97518;
  --red: #a9453f;
  --shadow: 0 14px 40px rgba(18, 45, 34, .075);
  --shadow-small: 0 5px 18px rgba(18, 45, 34, .06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(106, 156, 130, .10), transparent 30rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  top: -80px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--green-900);
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus { top: 10px; opacity: 1; pointer-events: auto; }

.shell {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  overflow: hidden;
  padding: 34px 38px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 20%, rgba(157, 210, 184, .17), transparent 17rem),
    linear-gradient(135deg, var(--green-900), #0f352a);
  color: white;
  box-shadow: var(--shadow);
}

.hero::after {
  position: absolute;
  right: -70px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
}

.hero-copy { position: relative; z-index: 1; }

.eyebrow {
  margin: 0 0 9px;
  color: #a8d8c3;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eyebrow.dark { color: var(--green-700); }

h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(31px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -.043em;
}

.hero-lead {
  max-width: 900px;
  margin: 16px 0 0;
  color: #d7e8e0;
  font-size: clamp(15px, 1.7vw, 18px);
}

.hero-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 240px;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(8px);
}

.hero-badge small, .hero-badge strong { display: block; }
.hero-badge small { color: #a8d8c3; font-size: 11px; font-weight: 750; }
.hero-badge strong { margin-top: 1px; font-size: 14px; }

.status-dot {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: #6fd3a6;
  box-shadow: 0 0 0 4px rgba(111,211,166,.12);
}

.mode-tabs {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-small);
}

.mode-tab {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.mode-tab > span {
  display: grid;
  width: 32px;
  height: 32px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 10px;
  background: #e8eee9;
  color: #617169;
  font-size: 12px;
  font-weight: 900;
}

.mode-tab strong { align-self: end; font-size: 14px; }
.mode-tab small { color: var(--muted); font-size: 10px; }
.mode-tab:hover { background: #f7faf7; }
.mode-tab[aria-selected="true"] { border-color: var(--green-700); background: var(--green-50); color: var(--green-900); }
.mode-tab[aria-selected="true"] > span { background: var(--green-700); color: white; }
[role="tabpanel"] { scroll-margin-top: 12px; }

.search-card {
  margin: 18px 0 14px;
  padding: 26px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.section-heading > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.section-heading.compact { margin-bottom: 15px; }
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

.step-number {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 12px;
  font-weight: 900;
}

.destination-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 14px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: minmax(500px, 1.8fr) repeat(3, minmax(160px, .65fr));
  gap: 14px;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.25fr) repeat(2, minmax(220px, .8fr));
  gap: 14px;
  margin-top: 14px;
}

.compare-settings-grid { grid-template-columns: minmax(300px, 1.5fr) minmax(220px, 1fr); }

.field { position: relative; min-width: 0; }
.field label, .field legend {
  display: block;
  margin: 0 0 7px;
  color: #4f5f57;
  font-size: 12px;
  font-weight: 850;
}

.field label span { color: #89948f; font-weight: 650; }
.field input[type="text"],
.field input[type="search"],
.field input[type="date"],
.field input[type="time"],
.field select {
  width: 100%;
  min-height: 47px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: none;
  background: white;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.field input:focus, .field select:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(23,107,77,.11);
}

.field input[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(169,69,63,.09);
}

.input-with-icon { position: relative; }
.input-with-icon svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: var(--green-700);
}

.input-with-icon input { padding-left: 42px !important; padding-right: 40px !important; }

.destination-check {
  position: absolute;
  top: 50%;
  right: 13px;
  display: grid;
  width: 21px;
  height: 21px;
  transform: translateY(-50%);
  place-items: center;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 900;
}

.field-help { margin: 6px 1px 0; color: #83908a; font-size: 11px; }

.autocomplete { z-index: 8; }
.suggestions {
  position: absolute;
  top: calc(100% - 17px);
  right: 0;
  left: 0;
  z-index: 20;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: white;
  box-shadow: 0 16px 36px rgba(18,45,34,.15);
}

.suggestion {
  display: grid;
  width: 100%;
  grid-template-columns: 31px 1fr;
  gap: 9px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  background: white;
  cursor: pointer;
  text-align: left;
}

.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion[aria-selected="true"] { background: var(--green-50); }
.suggestion-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 14px;
}
.suggestion strong, .suggestion small { display: block; }
.suggestion strong { font-size: 13px; }
.suggestion small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.divider { height: 1px; margin: 24px 0; background: #e9ede8; }

fieldset.field { margin: 0; padding: 0; border: 0; }

.day-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.day-button {
  min-width: 0;
  min-height: 47px;
  padding: 6px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fafbf9;
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
.day-button:hover { transform: translateY(-1px); border-color: #99ab9e; }
.day-button[aria-pressed="true"] { border-color: var(--green-700); background: var(--green-100); color: var(--green-800); }
.day-button span, .day-button small { display: block; }
.day-button span { font-size: 13px; font-weight: 900; }
.day-button small { overflow: hidden; color: inherit; font-size: 8px; opacity: .72; text-overflow: ellipsis; }

.range-heading { display: flex; justify-content: space-between; gap: 10px; }
.range-heading output { color: var(--green-700); font-size: 16px; font-weight: 900; }
.range-field input[type="range"] { width: 100%; height: 24px; accent-color: var(--green-700); }
.range-scale { display: flex; justify-content: space-between; margin-top: -3px; color: #8b9691; font-size: 10px; }

.municipalities-heading { align-items: center; }
.text-actions { display: flex; gap: 12px; }
.text-button {
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--green-700);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.text-button:hover { text-decoration: underline; }

.municipality-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.municipality-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fafbf9;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}
.municipality-button::before {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #aebcb2;
  border-radius: 5px;
  color: white;
  content: "";
  font-size: 10px;
}
.municipality-button[aria-pressed="true"] { border-color: var(--green-700); background: var(--green-50); color: var(--green-800); }
.municipality-button[aria-pressed="true"]::before { border-color: var(--green-700); background: var(--green-700); content: "✓"; }
.municipality-button small { color: #7a8981; font-size: 10px; font-weight: 700; }

.homes-heading { align-items: center; }
.secondary-button.small { min-height: 39px; padding: 8px 12px; font-size: 12px; }
.homes-list { display: grid; gap: 11px; }
.home-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .75fr) minmax(0, 1.65fr) auto;
  gap: 12px;
  align-items: start;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fafbf9;
}
.home-number {
  position: absolute;
  top: -8px;
  left: -7px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: var(--green-900);
  color: white;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(18,62,49,.18);
}
.home-entry .autocomplete { z-index: auto; }
.home-entry:focus-within { z-index: 12; border-color: #b8c9bd; }
.remove-home { align-self: center; padding: 8px 7px; color: #8b514c; }
.remove-home:disabled { cursor: not-allowed; opacity: .35; text-decoration: none; }
.compare-search-footer { align-items: end; }

.search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e9ede8;
}
.check-label { display: flex; align-items: center; gap: 8px; color: #55645c; font-size: 12px; font-weight: 750; }
.check-label input { width: 18px; height: 18px; accent-color: var(--green-700); }
.search-estimate { margin: 5px 0 0; color: #89948f; font-size: 11px; }

.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 47px;
  padding: 11px 17px;
  border: 1px solid var(--green-700);
  border-radius: 11px;
  background: var(--green-700);
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  box-shadow: var(--shadow-small);
}
.primary-button:hover { background: var(--green-800); }
.primary-button:disabled { cursor: wait; opacity: .65; }
.primary-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.primary-button.small { min-height: 39px; padding: 8px 12px; font-size: 12px; }
.secondary-button { border-color: var(--line-strong); background: white; color: var(--green-800); box-shadow: none; }
.secondary-button:hover { background: var(--green-50); }

.form-error {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #e7c5c2;
  border-radius: 10px;
  background: #fff2f1;
  color: #853b36;
  font-size: 12px;
  font-weight: 700;
}

.progress-panel {
  margin: 14px 0;
  padding: 17px 20px;
  border: 1px solid #cfe1d6;
  border-radius: 15px;
  background: #f8fcfa;
  box-shadow: var(--shadow-small);
}
.progress-copy { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.progress-copy strong, .progress-copy span { display: block; }
.progress-copy strong { font-size: 13px; }
.progress-copy span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.progress-track { overflow: hidden; height: 7px; margin-top: 11px; border-radius: 99px; background: #e0e9e3; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-700), #55a67f); transition: width .2s ease; }

.welcome-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 230px;
  padding: 30px;
  border: 1px dashed #cdd6cf;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  text-align: left;
}
.welcome-panel h2 { margin: 0; font-size: 19px; }
.welcome-panel p { max-width: 580px; margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.welcome-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; background: var(--green-100); }
.welcome-icon svg { width: 29px; fill: var(--green-700); }

.results { margin-top: 24px; }
.results-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 2px 14px; }
.results-header h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.035em; }
.results-header p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 13px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.metric {
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-small);
}
.metric .label { color: var(--muted); font-size: 11px; font-weight: 850; }
.metric .value { margin-top: 8px; font-size: clamp(25px, 3vw, 38px); font-weight: 900; letter-spacing: -.04em; }
.metric .note { margin-top: 4px; color: var(--muted); font-size: 11px; }

.results-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 12px; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-small); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-heading h3 { margin: 0; font-size: 16px; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.map-wrap { position: relative; min-height: 620px; background: #edf1eb; }
#map { display: block; width: 100%; height: 620px; }
.postcode-shape { cursor: pointer; stroke: #fff; stroke-width: .75; vector-effect: non-scaling-stroke; transition: opacity .15s, stroke-width .15s; }
.postcode-shape:hover, .postcode-shape.selected { opacity: 1 !important; stroke: #102b22; stroke-width: 2.1; }
.target-dot { fill: #0c241b; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.target-pulse { fill: rgba(12,36,27,.13); stroke: rgba(12,36,27,.25); vector-effect: non-scaling-stroke; }
.legend { position: absolute; right: 13px; bottom: 13px; left: 13px; display: flex; flex-wrap: wrap; gap: 7px 12px; width: fit-content; max-width: calc(100% - 26px); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.94); font-size: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }

.side-stack { display: grid; gap: 12px; align-content: start; }
.detail-panel { min-height: 246px; padding: 18px; }
.detail-panel .postcode { color: var(--green-700); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.detail-panel h3 { margin: 5px 0 2px; font-size: 25px; line-height: 1.1; }
.detail-panel .municipality { color: var(--muted); font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.detail-stat { padding: 10px; border-radius: 10px; background: #f3f6f2; }
.detail-stat span, .detail-stat strong { display: block; }
.detail-stat span { color: var(--muted); font-size: 10px; }
.detail-stat strong { margin-top: 2px; font-size: 17px; }
.detail-note { margin: 11px 0 0; color: #7c8982; font-size: 10px; }

.tier { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 850; }
.tier.excellent { background: #d8eee3; color: #155b42; }
.tier.good { background: #e7f1df; color: #4a6c29; }
.tier.possible { background: #f8ead1; color: #8a5a12; }
.tier.long { background: #f2dfdd; color: #8a3732; }

.chart { padding: 12px 17px 17px; }
.bar-row { display: grid; grid-template-columns: 122px 1fr 40px; align-items: center; gap: 8px; margin: 8px 0; font-size: 11px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { overflow: hidden; height: 9px; border-radius: 20px; background: #edf0eb; }
.bar-fill { height: 100%; border-radius: 20px; }
.bar-value { text-align: right; font-weight: 850; }

.table-panel { margin-top: 12px; }
.table-heading { flex-wrap: wrap; }
.table-scroll { overflow: auto; max-height: 720px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 10px 11px; border-bottom: 1px solid #edf0eb; text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; background: #f7f8f5; color: var(--muted); font-size: 10px; letter-spacing: .02em; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f3f7f3; }
td.num, th.num { text-align: right; }

.methodology { margin-top: 12px; padding: 20px 22px; }
.methodology h3 { margin: 0 0 10px; font-size: 16px; }
.method-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; }
.methodology p, .methodology li { color: #53615a; font-size: 12px; }
.methodology ul { margin: 0; padding-left: 19px; }
.notice { padding: 11px 13px; border-left: 4px solid var(--amber); border-radius: 8px; background: #fff7e9; color: #6b4a17 !important; }
.empty { padding: 28px; color: var(--muted); text-align: center; }

.compare-metric-grid { grid-template-columns: repeat(3, 1fr); }
.comparison-chart-panel { margin-bottom: 12px; }
.score-chart { padding: 13px 18px 18px; }
.score-bar-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 48px; align-items: center; gap: 10px; margin: 10px 0; }
.score-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 780; }
.score-bar-track { position: relative; overflow: hidden; height: 13px; border-radius: 99px; background: #edf0eb; }
.score-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-700), #72a95c); }
.score-bar-value { text-align: right; font-size: 14px; font-weight: 900; }
.comparison-results-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.comparison-result {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 17px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow-small);
}
.score-orb {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  align-self: center;
  border: 8px solid var(--green-100);
  border-radius: 50%;
  background: #f9fcfa;
}
.score-orb strong { display: block; font-size: 30px; line-height: 1; letter-spacing: -.05em; }
.score-orb small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; text-align: center; text-transform: uppercase; }
.comparison-rank { color: var(--green-700); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.comparison-result h3 { margin: 4px 0 2px; font-size: 21px; line-height: 1.15; }
.comparison-address { margin: 0; color: var(--muted); font-size: 11px; }
.comparison-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.comparison-stat { padding: 9px; border-radius: 9px; background: #f3f6f2; }
.comparison-stat span, .comparison-stat strong { display: block; }
.comparison-stat span { color: var(--muted); font-size: 9px; }
.comparison-stat strong { margin-top: 2px; font-size: 15px; }
.comparison-note { margin: 10px 0 0; color: #748179; font-size: 10px; }
.score-methodology { margin-top: 12px; }

.site-footer { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 16px 4px 0; color: #738078; font-size: 11px; }
.site-footer strong { color: var(--green-800); }
.site-footer nav { display: flex; gap: 12px; margin-left: auto; }
.site-footer a { color: var(--green-700); font-weight: 750; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 1180px) {
  .schedule-grid { grid-template-columns: 1fr 1fr 1fr; }
  .day-field { grid-column: 1 / -1; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .range-field { grid-column: 1 / -1; }
  .results-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: repeat(2, 1fr); }
  .comparison-results-list { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 18px, 1480px); padding-top: 9px; }
  .hero { grid-template-columns: 1fr; padding: 25px 23px; }
  .hero-badge { min-width: 0; width: fit-content; }
  .search-card { padding: 21px 18px; }
  .destination-grid, .schedule-grid, .settings-grid { grid-template-columns: 1fr 1fr; }
  .field-wide, .day-field, .range-field { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .map-wrap, #map { min-height: 500px; height: 500px; }
  .method-grid { grid-template-columns: 1fr; gap: 5px; }
  .home-entry { grid-template-columns: 1fr 1.5fr auto; }
}

@media (max-width: 560px) {
  .hero { border-radius: 18px; }
  .mode-tabs { grid-template-columns: 1fr; }
  .search-card { border-radius: 16px; }
  .destination-grid, .schedule-grid, .settings-grid { grid-template-columns: 1fr; }
  .field-wide, .day-field, .range-field { grid-column: auto; }
  .day-picker { grid-template-columns: repeat(4, 1fr); }
  .day-button small { display: none; }
  .municipalities-heading { align-items: flex-start; flex-direction: column; }
  .search-footer, .results-header { align-items: stretch; flex-direction: column; }
  .primary-button { width: 100%; }
  .homes-heading { align-items: stretch; flex-direction: column; }
  .home-entry { grid-template-columns: 1fr; padding-top: 18px; }
  .remove-home { justify-self: start; }
  .comparison-result { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .score-orb { width: 70px; height: 70px; border-width: 6px; }
  .score-orb strong { font-size: 24px; }
  .comparison-stats { grid-template-columns: 1fr 1fr; }
  .score-bar-row { grid-template-columns: 100px 1fr 38px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 112px; padding: 14px; }
  .side-stack { grid-template-columns: 1fr; }
  .map-wrap, #map { min-height: 420px; height: 420px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer nav { margin-left: 0; }
}

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