/* ── HOUSES PAGE ─────────────────────────────────────────────────────── */
body { background: #E6E2D6; }
.houses-intro-panel {
  background: #F7F4EB;
  padding: 80px 10% 60px;
  display: flex; align-items: flex-start; gap: 60px;
}
.houses-intro-title {
  flex-shrink: 0;
  padding-right: 40px;
  border-right: 1px solid rgba(75,67,38,0.2);
}
.houses-intro-title h1 {
  font-family: 'Quattrocento', serif; font-size: 72px; font-weight: 200;
  color: var(--brown); text-transform: uppercase; letter-spacing: 4px; line-height: 1;
}
.houses-intro-text { flex: 1; padding-top: 8px; }
.houses-intro-text p {
  font-family: 'Quattrocento', serif; font-size: 16px; color: var(--brown-body);
  line-height: 1.75; margin-bottom: 14px;
}
/* Map section */
.houses-map-section {
  background: #F7F4EB; padding: 70px 8vw 90px;
  text-align: center;
}
.houses-map-label {
  font-family: 'Rethink Sans', sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 4px; color: var(--gold);
  margin-bottom: 10px;
}
.houses-map-section h2 {
  font-family: 'Quattrocento', serif; font-size: 42px; font-weight: 400;
  color: var(--brown); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px;
}
.houses-map-desc {
  font-family: 'Quattrocento', serif; font-size: 16px; color: var(--brown-body);
  line-height: 1.78; max-width: 640px; margin: 0 auto 44px;
}
.houses-map-container {
  max-width: 900px; margin: 0 auto 52px;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(75,67,38,0.13);
}
.houses-map-container img { width: 100%; height: auto; display: block; }

/* Legend */
.houses-map-legend {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 0; max-width: 860px; margin: 0 auto;
  background: #fff; border: 1px solid rgba(75,67,38,0.1);
  border-radius: 4px; overflow: hidden;
}
.hml-group { flex: 1; padding: 28px 32px; }
.hml-group-title {
  font-family: 'Rethink Sans', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px; color: var(--gold);
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(75,67,38,0.1);
}
.hml-divider {
  width: 1px; background: rgba(75,67,38,0.1); align-self: stretch; flex-shrink: 0;
}
.hml-items { display: flex; flex-direction: column; gap: 10px; }
.hml-item {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.hml-item.hml-house {
  padding: 8px 10px; border-radius: 3px; margin: 0 -10px;
  transition: background 0.2s;
}
.hml-item.hml-house:hover { background: rgba(165,147,80,0.08); }
.hml-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brown); color: #fff;
  font-family: 'Quattrocento', serif; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: 0;
}
.hml-name {
  font-family: 'Quattrocento', serif; font-size: 16px; color: var(--brown);
  flex: 1; text-align: left;
}
.hml-stat {
  font-family: 'Rethink Sans', sans-serif; font-size: 11px; color: var(--brown-body);
  opacity: 0.7; white-space: nowrap; min-width: 0;
}
.hml-area-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(165,147,80,0.12); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px;
}
@media (max-width: 768px) {
  .houses-intro-panel {
    flex-direction: column;
    padding: 36px 6vw 32px;
    gap: 24px;
  }
  .houses-intro-title {
    border-right: none;
    padding-right: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(75,67,38,0.2);
  }
  .houses-intro-title h1 {
    font-size: clamp(40px, 13vw, 72px);
    letter-spacing: 2px;
  }
}
@media (max-width: 680px) {
  .houses-map-legend { flex-direction: column; }
  .hml-divider { width: auto; height: 1px; }
  .hml-group { padding: 22px 20px; }
}