.promh-map .promh-svg-cls-1,
.promh-map .promh-svg-cls-2,
.promh-map .promh-svg-cls-3 {
  fill: none;
}

.promh-map .promh-svg-cls-4 { fill: #f6f6f6; }
.promh-map .promh-svg-cls-2 { opacity: 0.35; }

.promh-map .promh-svg-cls-2,
.promh-map .promh-svg-cls-5 {
  stroke: #858585;
  stroke-miterlimit: 10;
}

.promh-map .promh-svg-cls-6 { isolation: isolate; }
.promh-map .promh-svg-cls-7 { fill: #b0b0b0; }
.promh-map .promh-svg-cls-5 { fill: #bcc156; }
.promh-map .promh-svg-cls-8 { fill: #fff; }

.promh-map .promh-svg-cls-3 {
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
}

.promh-map .promh-svg-cls-9 {
  fill: #c6c6c6;
  mix-blend-mode: multiply;
}

.promh-map .promh-svg-cls-10 { fill: #c9c993; }
.promh-map .promh-svg-cls-11 { fill: #999; }

.promh-map {
  --promh-color-available: #bcc156;
  --promh-color-available-point: #929643;
  --promh-color-reserved: #d9b218;
  --promh-color-reserved-point: #aa8a13;
  --promh-color-sold: #c64646;
  --promh-color-sold-point: #9a3636;
  --promh-color-focus: #133d55;
  --promh-color-text: #1e262b;
  --promh-color-muted: #667078;
  --promh-color-surface: #ffffff;
  color: var(--promh-color-text);
  font-family: inherit;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.promh-map.has-data-error .promh-map__viewport {
  opacity: 0.55;
}

.promh-map-demo {
  margin: 0 auto;
  max-width: 1280px;
  padding: clamp(1rem, 4vw, 3rem);
}

.promh-map-demo h1 {
  color: #1e262b;
  font: 700 clamp(1.7rem, 4vw, 2.8rem)/1.15 Arial, Helvetica, sans-serif;
  margin: 0 0 1.5rem;
}

.promh-map__viewport {
  background: #cdcd9b;
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2.5rem rgb(24 34 39 / 12%);
  overflow: hidden;
}

.promh-map__svg {
  display: block;
  height: auto;
  max-width: none;
  width: 100%;
}

.promh-map__parcel {
  transition: fill 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.promh-map__parcel.is-hovered {
  opacity: 0.8;
}

.promh-map__trigger {
  cursor: pointer;
  fill: transparent !important;
  pointer-events: all;
  stroke: transparent;
  vector-effect: non-scaling-stroke;
}

.promh-map__trigger:focus {
  outline: none;
  stroke: var(--promh-color-focus) !important;
  stroke-width: 4px;
}

.promh-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: 1rem auto 0 auto;
  max-width: 720px;
  padding: 0;
}

.promh-map__legend li {
  align-items: center;
  display: flex;
  font-size: 0.925rem;
  gap: 0.5rem;
}

.promh-map__legend-color {
  border: 1px solid rgb(0 0 0 / 14%);
  border-radius: 50%;
  display: inline-block;
  height: 0.9rem;
  width: 0.9rem;
}

.promh-map__legend-color.is-available { background: var(--promh-color-available); }
.promh-map__legend-color.is-reserved { background: var(--promh-color-reserved); }
.promh-map__legend-color.is-sold { background: var(--promh-color-sold); }

.promh-map__hint {
  color: var(--promh-color-muted);
  font-size: 0.875rem;
  margin: 0.65rem auto 0 auto;
  max-width: 720px;
}

.promh-map__dialog {
  background: transparent;
  border: 0;
  color: var(--promh-color-text);
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-width: min(31rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.promh-map__dialog::backdrop {
  background: rgb(11 19 24 / 68%);
  backdrop-filter: blur(3px);
}

.promh-map__dialog-inner {
  background: var(--promh-color-surface);
  border-radius: 0.85rem;
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 30%);
  padding: clamp(1.4rem, 5vw, 2.25rem);
  position: relative;
}

.promh-map__close {
  align-items: center;
  background: #eef1f2;
  border: 0;
  border-radius: 50%;
  color: #283238;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 1.6rem;
  height: 2.4rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.4rem;
}

.promh-map__close:hover,
.promh-map__close:focus-visible {
  background: #dfe5e7;
  outline: 2px solid var(--promh-color-focus);
  outline-offset: 2px;
}

.promh-map__eyebrow {
  color: var(--promh-color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 3rem 0.35rem 0;
  text-transform: uppercase;
}

.promh-map__dialog-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  justify-content: space-between;
}

.promh-map__dialog-heading h2 {
  font-size: clamp(1.55rem, 5vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

.promh-map__status {
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.72rem;
  text-transform: uppercase;
  font-family: "Open Sans", Arial, sans-serif;
}

.promh-map__status.is-available { background: var(--promh-color-available); }
.promh-map__status.is-reserved { background: var(--promh-color-reserved); color: #302000; }
.promh-map__status.is-sold { background: var(--promh-color-sold); }

.promh-map__details {
  border-bottom: 1px solid #e1e5e7;
  border-top: 1px solid #e1e5e7;
  margin: 1.5rem 0;
  
}

.promh-map__details > div {
  align-items: baseline;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(8rem, 1fr) 1.2fr;
  padding: 0.72rem 0;
}

.promh-map__details > div + div {
  border-top: 1px solid #edf0f1;
}

.promh-map__details dt {
  color: var(--promh-color-muted);
  font-family: "Open Sans", Arial, sans-serif;
}

.promh-map__details dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
  font-family: "Open Sans", Arial, sans-serif;
}

.promh-map__cta {
  align-items: center;
  background: var(--promh-color-focus);
  border-radius: 0.35rem;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 3rem;
  padding: 0.25rem 1.2rem;
  text-decoration: none;
  width: 100%;
}

.promh-map__cta:hover,
.promh-map__cta:focus-visible {
  background: #0a2e43;
  outline: 3px solid rgb(19 61 85 / 24%);
  outline-offset: 2px;
}

.promh-map__cta[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .promh-map__viewport {
    overflow-x: auto;
  }

  .promh-map__svg {
    min-width: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promh-map__parcel {
    transition: none;
  }
}

.promh-map__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.promh-map__dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
  transition: background-color 0.25s ease;
}

.promh-map__dialog.is-closing {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
}

.promh-map__dialog.is-closing::backdrop {
  background: rgba(0, 0, 0, 0);
}