.real-estate-view {
  padding: var(--menu-divider-title-gap) 0 72px;
}

.real-estate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  align-items: end;
  gap: clamp(28px, 5vw, 72px);
  padding: 0 0 28px;
}

.real-estate-title h1 {
  margin: 6px 0 0;
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -.07em;
  line-height: .96;
}

.real-estate-title > p:last-child {
  max-width: 760px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.real-estate-search {
  position: relative;
  z-index: 6;
}

.real-estate-search > label {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font: 500 10px/1 "DM Mono";
  letter-spacing: .1em;
  text-transform: uppercase;
}

.real-estate-search > div:first-of-type {
  display: flex;
  border: 1px solid var(--ink);
  background: var(--card);
}

.real-estate-search input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 13px/1.2 "Manrope";
}

.real-estate-search input:focus {
  box-shadow: inset 0 0 0 2px var(--orange);
}

.real-estate-search button {
  min-height: 40px;
  margin: 4px;
  padding: 0 18px;
  border: 0;
  background: var(--ink);
  color: var(--card);
  cursor: pointer;
  font: 500 11px/1 "DM Mono";
  letter-spacing: .04em;
  text-transform: uppercase;
}

.real-estate-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--ink);
  background: var(--card);
  box-shadow: 0 18px 36px rgba(23, 25, 20, .14);
}

.real-estate-search-results button {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-align: left;
  text-transform: none;
}

.real-estate-search-results button:hover,
.real-estate-search-results button:focus-visible {
  background: #fff0e8;
}

.real-estate-search-results button strong {
  font: 700 12px/1.25 "Manrope";
}

.real-estate-search-results button span {
  color: var(--muted);
  font: 500 10px/1.25 "DM Mono";
  text-transform: uppercase;
}

.real-estate-search-results p {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
}

.real-estate-source-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-bottom: 0;
  background: #e4ede6;
  font: 500 10px/1.35 "DM Mono";
  letter-spacing: .04em;
  text-transform: uppercase;
}

.real-estate-source-line > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.real-estate-source-line .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.real-estate-source-line.is-loading .status-dot {
  background: var(--gold);
  animation: real-estate-pulse 1.3s ease-in-out infinite;
}

.real-estate-source-line.is-error .status-dot {
  background: var(--red);
  animation: none;
}

@keyframes real-estate-pulse {
  50% { opacity: .35; }
}

.real-estate-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ink);
  background: var(--card);
}

.real-estate-metrics article {
  min-height: 126px;
  padding: 22px clamp(16px, 2.4vw, 34px);
  border-right: 1px solid var(--ink);
}

.real-estate-metrics article:last-child {
  border-right: 0;
}

.real-estate-metrics span,
.real-estate-metrics small {
  display: block;
  color: var(--muted);
  font: 500 10px/1.35 "DM Mono";
  letter-spacing: .06em;
  text-transform: uppercase;
}

.real-estate-metrics strong {
  display: block;
  margin: 12px 0 8px;
  font-size: clamp(25px, 2.7vw, 40px);
  letter-spacing: -.055em;
  line-height: 1;
}

.real-estate-metrics .warm {
  background: #ffd9cc;
}

.real-estate-metrics .dark {
  background: var(--ink);
  color: var(--paper);
}

.real-estate-metrics .dark span,
.real-estate-metrics .dark small {
  color: #afb9b3;
}

.real-estate-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, .72fr);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.real-estate-panel {
  min-width: 0;
  background: var(--card);
}

.real-estate-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.real-estate-panel > header h2 {
  margin: 5px 0 0;
  font-size: clamp(23px, 2.4vw, 34px);
  letter-spacing: -.055em;
}

.real-estate-panel > header > span {
  color: var(--muted);
  font: 500 10px/1.3 "DM Mono";
  letter-spacing: .06em;
  text-transform: uppercase;
}

.real-estate-price-panel {
  padding: clamp(22px, 3vw, 40px);
  border-right: 1px solid var(--ink);
}

.real-estate-chart-controls {
  display: flex;
  gap: 4px;
}

.real-estate-chart-controls button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  font: 500 11px/1 "DM Mono";
}

.real-estate-chart-controls button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.real-estate-chart {
  min-height: 330px;
  margin-top: 28px;
}

.real-estate-chart > p,
.real-estate-activity-chart > p,
.real-estate-stock-bars > p {
  display: grid;
  min-height: inherit;
  place-items: center;
  margin: 0;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
}

.real-estate-chart svg,
.real-estate-activity-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.real-estate-chart .grid-line,
.real-estate-activity-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.real-estate-chart .area {
  fill: url("#real-estate-price-gradient");
}

.real-estate-chart .line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.real-estate-chart .endpoint {
  fill: var(--card);
  stroke: var(--orange);
  stroke-width: 3;
}

.real-estate-chart text,
.real-estate-activity-chart text {
  fill: var(--muted);
  font: 10px "DM Mono";
}

.real-estate-price-panel > footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 500 10px/1.4 "DM Mono";
  text-transform: uppercase;
}

.real-estate-readout {
  padding: clamp(24px, 3vw, 40px);
  background: var(--ink);
  color: var(--paper);
}

.real-estate-readout .section-label,
.real-estate-readout > header > span {
  color: #afb9b3;
}

.real-estate-readout > h2 {
  margin: 44px 0 14px;
  font-size: clamp(26px, 2.8vw, 40px);
  letter-spacing: -.055em;
  line-height: 1.04;
}

.real-estate-readout > p {
  margin: 0;
  color: #c7cec9;
  font-size: 13px;
  line-height: 1.7;
}

.real-estate-readout ol {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.real-estate-readout li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid #3a3d37;
}

.real-estate-readout li > span {
  color: var(--orange);
  font: 500 10px/1.4 "DM Mono";
}

.real-estate-readout li strong {
  display: block;
  font-size: 13px;
}

.real-estate-readout li p {
  margin: 6px 0 0;
  color: #afb9b3;
  font-size: 12px;
  line-height: 1.55;
}

.real-estate-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr) minmax(280px, .7fr);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.real-estate-secondary-grid > article {
  min-height: 420px;
  padding: clamp(22px, 2.8vw, 36px);
  border-right: 1px solid var(--ink);
}

.real-estate-secondary-grid > article:last-child {
  border-right: 0;
}

.real-estate-activity-chart {
  min-height: 250px;
  margin-top: 30px;
}

.real-estate-activity-chart .sales {
  fill: var(--ink);
}

.real-estate-activity-chart .listings {
  fill: var(--orange);
}

.real-estate-activity-chart .rentals {
  fill: var(--green);
}

.real-estate-activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
  color: var(--muted);
  font: 500 10px/1.3 "DM Mono";
  text-transform: uppercase;
}

.real-estate-activity-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.real-estate-activity-legend i {
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.real-estate-activity-legend i.listings {
  background: var(--orange);
}

.real-estate-activity-legend i.rentals {
  background: var(--green);
}

.real-estate-pressure-main {
  padding: 42px 0 30px;
  border-bottom: 1px solid var(--line);
}

.real-estate-pressure-main strong {
  display: block;
  font-size: clamp(42px, 5vw, 70px);
  letter-spacing: -.075em;
  line-height: .9;
}

.real-estate-pressure-main span {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.real-estate-pressure-panel dl,
.real-estate-context {
  margin: 0;
}

.real-estate-pressure-panel dl div,
.real-estate-context div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.real-estate-pressure-panel dt,
.real-estate-context dt {
  color: var(--muted);
  font-size: 11px;
}

.real-estate-pressure-panel dd,
.real-estate-context dd {
  margin: 0;
  font: 500 12px/1 "DM Mono";
  text-align: right;
}

.real-estate-stock-bars {
  display: grid;
  gap: 18px;
  min-height: 240px;
  margin-top: 34px;
}

.real-estate-stock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: end;
}

.real-estate-stock-row span,
.real-estate-stock-row strong {
  font: 500 10px/1 "DM Mono";
  text-transform: uppercase;
}

.real-estate-stock-row strong {
  font-size: 11px;
}

.real-estate-stock-row div {
  grid-column: 1 / -1;
  height: 9px;
  background: var(--line);
}

.real-estate-stock-row i {
  display: block;
  height: 100%;
  background: var(--ink);
}

.real-estate-stock-row:nth-child(2) i {
  background: var(--orange);
}

.real-estate-stock-row:nth-child(3) i {
  background: var(--green);
}

.real-estate-stock-row:nth-child(4) i {
  background: var(--blue);
}

.real-estate-context {
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}

.real-estate-configuration {
  display: grid;
  grid-template-columns: minmax(190px, .4fr) minmax(0, 1.6fr);
  gap: 24px;
  padding: 22px 28px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: #fff0c9;
}

.real-estate-configuration strong {
  font-size: 14px;
}

.real-estate-configuration p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.real-estate-configuration code {
  color: var(--ink);
  font: 500 11px "DM Mono";
}

.real-estate-methodology {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 0 0;
}

.real-estate-methodology p {
  max-width: 920px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.real-estate-methodology a {
  flex: 0 0 auto;
  color: var(--ink);
  font: 500 10px/1.4 "DM Mono";
  text-underline-offset: 4px;
}

@media (max-width: 1100px) {
  .real-estate-hero {
    grid-template-columns: 1fr;
  }

  .real-estate-search {
    max-width: 680px;
  }

  .real-estate-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .real-estate-metrics article:nth-child(2) {
    border-right: 0;
  }

  .real-estate-metrics article:nth-child(-n+2) {
    border-bottom: 1px solid var(--ink);
  }

  .real-estate-primary-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  }

  .real-estate-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .real-estate-activity-panel {
    grid-column: 1 / -1;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ink);
  }
}

@media (max-width: 800px) {
  .real-estate-primary-grid,
  .real-estate-secondary-grid {
    display: block;
  }

  .real-estate-price-panel,
  .real-estate-secondary-grid > article {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .real-estate-secondary-grid > article:last-child {
    border-bottom: 0;
  }

  .real-estate-chart {
    min-height: 280px;
  }

  .real-estate-methodology {
    display: grid;
  }
}

@media (max-width: 560px) {
  .real-estate-view {
    padding-top: 16px;
  }

  .real-estate-hero {
    gap: 24px;
  }

  .real-estate-title h1 {
    font-size: 42px;
  }

  .real-estate-source-line {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 12px;
  }

  .real-estate-metrics {
    grid-template-columns: 1fr;
  }

  .real-estate-metrics article,
  .real-estate-metrics article:nth-child(2) {
    min-height: 104px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .real-estate-metrics article:last-child {
    border-bottom: 0;
  }

  .real-estate-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .real-estate-chart-controls {
    width: 100%;
  }

  .real-estate-chart-controls button {
    flex: 1 1 0;
  }

  .real-estate-chart {
    min-height: 230px;
  }

  .real-estate-price-panel > footer {
    flex-direction: column;
  }

  .real-estate-readout > h2 {
    margin-top: 30px;
  }

  .real-estate-configuration {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .real-estate-source-line.is-loading .status-dot {
    animation: none;
  }
}