/* Horizon - two-project parcel sales site.
 * System font stack, no external resources. Status colors are shared by
 * map polygons, legends and badges (docs/RESEARCH.md rules 3, 6).
 */
:root {
  --c-available: #1E8E3E;
  --c-pending:   #B45309;
  --c-sold:      #6B6B78;
  --c-sold-red:  #B42318;  /* sold on the maps and in the unit lists */
  --brand:       #1B3A2D;
  --brand-2:     #2E6B4F;
  --ink:         #21261F;
  --ink-soft:    #5A6157;
  --paper:       #FAF9F6;
  --card:        #FFFFFF;
  --line:        #E4E1D8;
  --radius:      10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 750; letter-spacing: -.015em; }
h3 { font-size: 1.25rem; }
a { color: var(--brand-2); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- header / hero ------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 249, 246, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  min-height: 54px; padding-top: 4px; padding-bottom: 4px;
}
.project, .about, .area { scroll-margin-top: 62px; }
.logo { font-weight: 800; font-size: 1.15rem; color: var(--brand); text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--brand-2); white-space: pre; }
/* owner 2026-10-16: the dot is drawn here with a half-space after it, so
   sheet text cannot undo the spacing (sitetext.js strips any leading dot) */
.logo span::before { content: "\00B7"; padding-right: .22em; }
/* owner note 2026-10-16: the bronze HORIZON plate replaces the text name
   (source IMG/HOR_Plate_IDENTLOGO_R4.png, cropped, 400px wide for 2x screens).
   Its width follows the logo font size, and flex centers the place name
   on the plate's middle line at every breakpoint. 5em wide (owner: bigger)
   fits one row only with the tighter link gaps in the block after the
   1180px rules below. */
.logo { display: inline-flex; align-items: center; gap: .15em; }  /* .15: room for the spaces after the dot */
.logo-plate { display: block; width: 5em; height: auto; transform: translateY(.05em); }  /* owner nudge: a touch lower */
/* one flex row: links and both pills share the same vertical center */
.site-nav { display: flex; align-items: center; }
.site-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  margin-left: 22px; font-weight: 550; line-height: 1.3;
  white-space: nowrap;   /* owner 2026-10-16: menu words never stack */
}
.site-nav a:hover { color: var(--brand); }
/* owner note 2026-10-16: grey links ride .1em lower so their visual
   center matches the plate's middle line (plate sits a nudge low) */
.site-nav a:not(.nav-cta):not(.nav-phone) { transform: translateY(.1em); }
/* very light grey divider line between the grey menu words (owner 2026-10-16);
   padding-left mirrors the margin so the line sits centered in the gap */
.site-nav a:not(.nav-cta):not(.nav-phone) + a:not(.nav-cta):not(.nav-phone) {
  border-left: 1px solid #DCDCD6; padding-left: 16px; margin-left: 16px;
}
/* both pills: same em-based box (height, padding, border), so they match
   at every breakpoint; media queries only change font-size */
.site-nav a.nav-cta, .site-nav a.nav-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  height: 2.1em; padding: 0 .85em; border-radius: 8px; line-height: 1;
  border: 1.5px solid var(--brand); font-weight: 650; white-space: nowrap;
}
/* the inquiry path is the one filled control in the header */
.site-nav a.nav-cta { background: var(--brand); color: #fff; }
.site-nav a.nav-cta:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
/* tap-to-call box beside the inquiry button (number is Brent Wolters,
   config.js agents[0]; change both pages' header and config together) */
.site-nav a.nav-phone {
  margin-left: 10px; color: var(--brand); font-variant-numeric: tabular-nums;
}
.site-nav a.nav-phone:hover { background: var(--brand); color: #fff; }
.nav-phone svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-phone-short { display: none; }
/* keep the bar on one row between phone and desktop widths */
@media (min-width: 641px) and (max-width: 730px) {
  .site-nav a:not(.nav-cta):not(.nav-phone) { display: none; }
}
@media (min-width: 731px) and (max-width: 859px) {
  .site-nav a { margin-left: 10px; }
  .nav-phone-num { display: none; }
  .nav-phone-short { display: inline; }
}
/* large top bar (2026-09-25, then set to 80% of that): header fonts at
   1.6x the original on screens wide enough for one row (1180px+), 1.2x from
   980px; narrower screens keep the original bar (phones: 640px rules below) */
@media (min-width: 980px) {
  .site-header .container { min-height: 58px; }
  .logo { font-size: 1.38rem; }
  .site-nav a { font-size: 1.14rem; }
  .site-nav a.nav-cta, .site-nav a.nav-phone { border-radius: 9px; }
  .project, .about, .area { scroll-margin-top: 68px; }
  .hz-listblock { scroll-margin-top: 72px; }
}
@media (min-width: 1180px) {
  .site-header .container { min-height: 68px; }
  .logo { font-size: 1.84rem; }
  /* 1.4rem filled the whole row; 1.2rem leaves room for the equal gaps
     around the grey links (owner OK to size down, 2026-10-16) */
  .site-nav a { font-size: 1.2rem; margin-left: 18px; }
  .site-nav a.nav-phone { margin-left: 10px; }
  .project, .about, .area { scroll-margin-top: 80px; }
  .hz-listblock { scroll-margin-top: 84px; }
}
/* room for the 5em logo plate: tighter gaps before the menu links and the
   inquiry button (the call button keeps its own 10px); measured 2026-10-16 */
@media (min-width: 860px) and (max-width: 1179px) { .site-nav a:not(.nav-phone) { margin-left: 16px; } }
@media (min-width: 1180px) and (max-width: 1219px) { .site-nav a:not(.nav-phone) { margin-left: 10px; } }
@media (min-width: 1220px) { .site-nav a:not(.nav-phone) { margin-left: 14px; } }
/* owner 2026-10-16: one row always; the nav takes all free width and the
   two auto margins split it equally, so the grey links sit equidistant
   between the logo and the Request info button. Placed after the width
   rules above so the auto margins win. */
@media (min-width: 860px) {
  .site-header .container { flex-wrap: nowrap; }
  .site-nav { flex: 1; justify-content: flex-end; min-width: 0; }
  .site-nav a:not(.nav-cta):not(.nav-phone):first-child { margin-left: auto; }
  .site-nav a.nav-cta:not(.nav-phone) { margin-left: auto; }
}

/* community tabs: index.html = estate lots, townhomes.html = Parcel T */
.page-tabs { background: var(--card); border-bottom: 1px solid var(--line); }
.page-tabs .container { display: flex; gap: 4px; }
/* first tab's label starts on the logo's left edge */
.page-tab:first-child { margin-left: -18px; }
.page-tab {
  display: flex; flex-direction: column; padding: 10px 18px 8px;
  text-decoration: none; color: var(--ink-soft); font-weight: 650; font-size: .98rem;
  line-height: 1.25; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.page-tab small { font-weight: 500; font-size: .76rem; letter-spacing: .02em; }
.page-tab:hover { color: var(--brand); background: #F2F4EC; }
.page-tab.active { color: var(--brand); border-bottom-color: var(--brand-2); }
.page-tab:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
/* tabs step up with the large top bar */
@media (min-width: 980px) {
  .page-tab { font-size: 1.08rem; }
  .page-tab small { font-size: .8rem; }
}

/* Parcel T: details-coming line under the intro */
.project-head p.coming-note {
  margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--c-pending);
  background: #FBF4EC; border-radius: 0 6px 6px 0; font-size: .95rem; color: var(--ink);
}
.coming-note a { font-weight: 650; white-space: nowrap; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, var(--brand) 0%, #123024 55%, #0D2119 100%);
  color: #F2F5EF;
  padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.2vw, 44px);
}
/* area photo, pre-toned to the hero greens (tools/build_marketing_images.py),
   on the right behind the stats; it has faded fully into the solid colour by
   the halfway mark, so the headline and lede sit on plain green */
.hero-photo {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: 36%; right: 0;
  background: url(../img/hero-area-v3.webp) 45% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0,0,0,.55) 25%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 8%, rgba(0,0,0,.55) 25%, #000 45%);
}
.hero h1 { margin-bottom: 0; }
.hero p.lede {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  /* width in em grows with the text (was 560px): three lines at every
     desktop size, 563px at 1100 wide (clear of the sign art), 604 at full size */
  max-width: 32em; color: #C9D6CC; margin: 12px 0 22px;
  text-wrap: pretty;  /* no lone last word on its own line */
}
/* buttons and stats share one row on wide screens (stats fill the empty
   right side instead of adding a row of their own) */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; }
.hero .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 8px;
  font-weight: 650; text-decoration: none; font-size: 1rem;
  border: 1.5px solid transparent; cursor: pointer;
}
.btn-light { background: #F2F5EF; color: var(--brand); }
.btn-light:hover { background: #fff; }
.btn-outline { border-color: #7d9486; color: #E4EBE2; }
.btn-outline:hover { border-color: #F2F5EF; color: #fff; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
@media (min-width: 1000px) { .hero-stats { margin-left: auto; } }
.hero-stats .stat .n { font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.hero-stats .stat .l { color: #9DB3A4; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; }

/* ---------- project sections --------------------------------------------- */
.project { padding: clamp(24px, 3vw, 36px) 0; }
.project + .project { border-top: 1px solid var(--line); }
.project-head { margin-bottom: 14px; }  /* owner 2026-10-16: full page width, no 860px cap */
.project-head h2 { margin-bottom: 0; }
.kicker {
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
  font-weight: 700; color: var(--brand-2); margin-bottom: 4px;
}
.project-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 6px 0 0; }

.map-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.hz-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-soft); }
.lg-item { display: inline-flex; align-items: center; gap: 7px; }
.lg-noun { font-weight: 650; color: var(--ink); margin-right: -6px; }
.lg-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-available { background: var(--c-available); opacity: .75; }
.sw-pending { background: var(--c-pending); opacity: .75; }
.sw-sold {
  background: repeating-linear-gradient(45deg, #D9605A 0 3px, #8E1C16 3px 5px);
}
.map-help { font-size: .82rem; color: var(--ink-soft); }
.map-help .on-touch { display: none; }
@media (hover: none) {
  .map-help .on-pointer { display: none; }
  .map-help .on-touch { display: inline; }
}

/* keyboard escape hatch past the ~70 focusable map polygons */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus-visible {
  position: static; width: auto; height: auto; clip-path: none;
  display: inline-block; margin-bottom: 8px;
  background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 6px;
}

/* ---------- map ----------------------------------------------------------- */
.hz-map-slot { position: relative; }
.hz-map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #2A302B;  /* shows only until the aerial backdrop loads */
  box-shadow: 0 8px 28px rgba(20, 35, 28, .12);
}
.hz-map-viewport {
  position: relative;
  height: min(66vh, 640px);
  /* pan-y only: one-finger vertical drags scroll the page natively, while
     two-finger gestures stay cancelable so JS can claim them for the map
     (with pinch-zoom listed, the compositor could start a page-zoom first
     and make touchmove non-cancelable) */
  touch-action: pan-y;
  cursor: grab;
}
.hz-map-viewport:active { cursor: grabbing; }
.hz-map-viewport svg { width: 100%; height: 100%; display: block; }

.hz-lot {
  fill: transparent;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1px;
  cursor: pointer;
  transition: fill-opacity .15s ease;
  fill-opacity: .28;
  outline: none;
}
.hz-lot.status-available { fill: var(--c-available); }
.hz-lot.status-pending { fill: var(--c-pending); }
.hz-lot.status-sold { cursor: pointer; }  /* fill = hatch pattern, set inline */
/* config.js SHOW_AVAILABILITY false: one light wash mutes the base render's
   green so no lot reads as available */
.hz-lot.status-neutral { fill: var(--brand-2); fill-opacity: .45; }
/* Townhomes map (owner 2026-10-16): no gray wash on the buildings; a plain
   green outline, and hover fills the whole box at 30 percent */
#map-parcel-t .hz-lot.status-neutral {
  fill: transparent;
  fill-opacity: 1;
  stroke: var(--c-available);
  stroke-width: 2px;
}
#map-parcel-t .hz-lot.status-neutral.hover,
#map-parcel-t .hz-lot.status-neutral:focus-visible {
  fill: var(--c-available);
  fill-opacity: .3;
  stroke: var(--c-available);
  stroke-width: 2.5px;
}
#map-parcel-t .hz-lot.status-neutral.selected {
  fill: var(--c-available);
  fill-opacity: .3;
  stroke: #fff;
  stroke-width: 3px;
}
.hz-lot.hover, .hz-lot:focus-visible {
  fill-opacity: .55;
  stroke: #fff;
  stroke-width: 2.5px;
}
.hz-lot.selected {
  fill-opacity: .5;
  stroke: #fff;
  stroke-width: 3px;
}
.hz-lot.dimmed { fill-opacity: .07; stroke-opacity: .25; }
/* sold: the hatch pattern carries its own opacity, so never multiply it down
   (at .28 the base render's green showed straight through) */
.hz-lot.status-sold,
.hz-lot.status-sold.hover,
.hz-lot.status-sold:focus-visible,
.hz-lot.status-sold.selected { fill-opacity: 1; }
.hz-lot.status-sold.dimmed { fill-opacity: .45; }

/* one grouped toolbar, one icon style; left side, so the details panel
   (which opens on the right) never covers it */
.hz-map-controls {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 35, 28, .14);
}
.hz-mc {
  width: 44px; height: 44px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.hz-mc + .hz-mc { border-top: 1px solid var(--line); }
.hz-mc svg { width: 20px; height: 20px; }
.hz-mc:hover { background: #F2F4EC; }
.hz-mc:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -3px; }
.hz-mc.active, .hz-mc.active:hover { background: var(--brand); color: #fff; }
/* the lock only changes touch gestures; a mouse already drags to pan */
@media (hover: hover) and (pointer: fine) {
  .hz-map-controls .hz-lock { display: none; }
}

/* per-building availability chips (Parcel T) */
.hz-map-badges { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hz-badge {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; font-size: 11.5px; font-weight: 650; line-height: 1;
  padding: 4px 8px 4px 7px; border-radius: 9999px;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  transition: opacity .15s ease;
}
.hz-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c-available);
}
.hz-badge.status-pending::before { background: var(--c-pending); }
.hz-badge.status-sold::before { background: var(--c-sold-red); }
.hz-badge.dimmed { opacity: .35; }
.hz-badge.crowded { visibility: hidden; }
.hz-badge-short { display: none; }

.hz-map-hint {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: rgba(10, 18, 14, .45);
  color: #fff; font-size: 1.05rem; font-weight: 600; text-align: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.hz-map-hint.visible { opacity: 1; }

.hz-map-tooltip {
  position: absolute; top: 0; left: 0; z-index: 7;
  pointer-events: none;
  background: rgba(18, 24, 20, .95); color: #fff;
  border-radius: 8px; padding: 8px 12px; font-size: .88rem;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.hz-map-tooltip .tt-price { font-weight: 700; }
.hz-map-tooltip[hidden] { display: none; }

.hz-load-error {
  padding: 48px 24px; text-align: center; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card);
}

/* ---------- status pills --------------------------------------------------- */
.pill {
  display: inline-block; border-radius: 9999px; padding: 4px 12px;
  font-size: 12px; font-weight: 650; color: #fff;
  text-transform: capitalize; line-height: 1.3;
}
.pill-available { background: var(--c-available); }
.pill-pending { background: var(--c-pending); }
.pill-sold { background: var(--c-sold); }
/* scrollable unit lists: sold reads as red (white text contrast 6.5:1) */
.hz-list .pill-sold, .hz-unitlist .pill-sold { background: var(--c-sold-red); }

/* ---------- filters + list -------------------------------------------------- */
.hz-listblock { margin-top: 14px; scroll-margin-top: 66px; }
.hz-filters {
  display: flex; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: .88rem; color: var(--ink-soft);
}
.hz-filters label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.hz-filters select {
  font: inherit; min-height: 40px; min-width: 128px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.hz-listwrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: auto; max-height: 420px;
}
table.hz-list { width: 100%; border-collapse: collapse; font-size: .93rem; }
.hz-list th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
/* compact rows: ~33px instead of ~47px */
.hz-list td { padding: 6px 14px; line-height: 1.35; border-bottom: 1px solid var(--line); }
.hz-list .pill { padding: 2px 10px; }
.hz-list tbody tr[data-unit] { cursor: pointer; }
.hz-list tbody tr[data-unit]:hover, .hz-list tbody tr[data-unit]:focus-visible {
  background: #F2F4EC; outline: none;
}
.hz-list td.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.hz-list td.go { color: var(--brand-2); font-weight: 600; text-align: right; white-space: nowrap; }
.hz-list tr.empty td { color: var(--ink-soft); text-align: center; padding: 26px; }

/* ---------- info panel ------------------------------------------------------ */
.hz-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 22, 18, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.hz-scrim.visible { opacity: 1; pointer-events: auto; }

.hz-panel {
  position: fixed; z-index: 70;
  background: var(--card);
  box-shadow: 0 -6px 40px rgba(15, 22, 18, .25);
  display: flex; flex-direction: column;
  /* mobile: bottom sheet */
  left: 0; right: 0; bottom: 0;
  height: 52vh;
  border-radius: 18px 18px 0 0;
  transform: translateY(105%);
  visibility: hidden;  /* keep the closed panel out of the a11y/tab order */
  transition: transform .28s cubic-bezier(.32,.72,.34,1), height .28s ease,
              visibility 0s linear .28s;
}
.hz-panel.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.hz-panel.expanded { height: 92vh; }

.hz-panel-handle {
  padding: 10px 0 4px; display: grid; place-items: center; cursor: grab;
  flex: 0 0 auto; touch-action: none;
}
.hz-panel-handle span {
  width: 34px; height: 4px; border-radius: 4px; background: #CDCDC4;
}
.hz-panel-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: #EFEEE8; color: var(--ink);
  font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.hz-panel-close:hover { background: #E4E2DA; }
.hz-panel-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hz-panel-main { padding: 16px 20px 24px; }

.hz-gallery { margin: 4px 0 14px; }
.hz-photo {
  aspect-ratio: 3 / 2; background: #E8E7DF; border-radius: 8px; margin: 4px 0 14px;
  display: block; width: 100%; padding: 0; border: 0; overflow: hidden;
  position: relative; cursor: zoom-in;
}
.hz-gallery .hz-photo { margin: 0; }
.hz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.hz-photo:hover img { transform: scale(1.03); }
.hz-photo:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.hz-photo-zoom {
  position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15, 22, 18, .6); color: #fff; display: grid; place-items: center;
}
.hz-photo-zoom svg { width: 16px; height: 16px; }
.hz-thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; padding-bottom: 2px; }
.hz-thumb {
  flex: 0 0 64px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 5px;
  overflow: hidden; background: #E8E7DF; cursor: pointer; opacity: .7;
}
.hz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-thumb:hover { opacity: 1; }
.hz-thumb.active { border-color: var(--brand-2); opacity: 1; }
.hz-photo.placeholder {
  aspect-ratio: auto; height: 104px; cursor: default;
  display: grid; place-items: center; color: var(--ink-soft); font-size: .88rem;
}

/* enlarged photo: sits above the panel, darkens the whole page */
.hz-lb-lock { overflow: hidden; }
.hz-lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 10, .88);
  display: flex; align-items: center; justify-content: center; padding: 56px 64px;
  animation: hz-lb-in .18s ease;
}
.hz-lightbox[hidden] { display: none; }
@keyframes hz-lb-in { from { opacity: 0; } }
.hz-lb-img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .5); background: #222;
}
.hz-lb-close, .hz-lb-nav {
  position: absolute; border: none; color: #fff; cursor: pointer; line-height: 1;
  background: rgba(255, 255, 255, .14); border-radius: 50%; display: grid; place-items: center;
}
.hz-lb-close:hover, .hz-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.hz-lb-close:focus-visible, .hz-lb-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hz-lb-close { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 1.7rem; }
.hz-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }
.hz-lb-prev { left: 10px; }
.hz-lb-next { right: 10px; }
.hz-lightbox.single .hz-lb-nav { display: none; }
.hz-lb-count {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .85); font-size: .9rem; pointer-events: none;
}
@media (max-width: 700px) {
  .hz-lightbox { padding: 60px 8px 48px; }
  .hz-lb-nav { top: auto; bottom: 6px; transform: none; width: 44px; height: 44px; }
  .hz-lb-prev { left: 16px; }
  .hz-lb-next { right: 16px; }
}

.hz-price { font-size: 28px; font-weight: 800; margin-top: 8px; letter-spacing: -.01em; }
/* sold: status stays first and fully legible; the price steps back */
.hz-panel-main.is-sold .hz-price { font-size: 22px; font-weight: 600; color: var(--ink-soft); }
.hz-title { margin: 2px 0 0; font-size: 19px; font-weight: 650; }
.hz-sub { color: var(--ink-soft); font-size: .85rem; margin-bottom: 4px; }

.hz-specs {
  display: flex; gap: 26px; padding: 12px 0; margin: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hz-specs .spec { display: flex; flex-direction: column; }
.hz-specs .v { font-size: 16px; font-weight: 650; }
.hz-specs .l { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }

.hz-desc { color: var(--ink); font-size: .95rem; }
.hz-feats { padding-left: 20px; margin: 8px 0; font-size: .92rem; }
.hz-feats li { margin: 3px 0; }

.hz-back {
  border: none; background: none; color: var(--brand-2); font: inherit;
  font-weight: 650; padding: 12px 20px 0; text-align: left; cursor: pointer;
}
/* utility action: quiet text + icon, still a comfortable target */
.hz-print {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 6px 0 0 -4px; min-height: 40px; padding: 0 4px;
  background: none; border: 0; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.hz-print svg { width: 17px; height: 17px; }
.hz-print:hover { color: var(--brand); text-decoration: underline; }

.hz-cta-bar {
  position: sticky; bottom: 0; margin-top: auto;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
}
.hz-cta {
  display: block; width: 100%; text-align: center;
  background: var(--brand); color: #fff; text-decoration: none;
  border: 1.5px solid var(--brand); border-radius: 8px; padding: 14px;
  font: inherit; font-weight: 650; font-size: 16px; line-height: 1.3; cursor: pointer;
}
.hz-cta:hover { background: var(--brand-2); border-color: var(--brand-2); }
/* sold: same slot, a route back to inventory instead of a dead end */
.hz-cta-alt { background: var(--card); color: var(--brand); }
.hz-cta-alt:hover { background: #F2F4EC; border-color: var(--brand); }
.hz-cta-sold { text-align: center; color: var(--ink-soft); font-weight: 600; font-size: .9rem; padding: 0 0 10px; }

.hz-note { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 6px 0 16px; }
.hz-unitlist { list-style: none; padding: 0; margin: 0; }
.hz-unitlist li + li { margin-top: 8px; }
.hz-unitrow {
  width: 100%; display: grid;
  grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px;
}
.hz-unitrow:hover { border-color: var(--brand-2); }
.hz-unitrow .u-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hz-unitrow .u-title { font-weight: 650; }
.hz-unitrow .u-price { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hz-unitrow .u-specs { color: var(--ink-soft); font-size: .84rem; }
.hz-unitrow .u-go { color: var(--brand-2); font-size: .84rem; font-weight: 650; text-align: right; white-space: nowrap; }
.hz-unitrow:hover .u-go { text-decoration: underline; }
.hz-unitrow.is-sold .u-price { font-weight: 600; color: var(--ink-soft); }

/* desktop: side panel is non-modal - the map stays interactive, so users can
   click from lot to lot; close is via the X button, Escape, or selecting away */
@media (min-width: 900px) {
  .hz-scrim { display: none; }
  .hz-panel {
    top: 0; bottom: 0; left: auto; right: 0;
    width: 420px; height: 100vh !important;
    border-radius: 0;
    transform: translateX(105%);
  }
  .hz-panel.open { transform: translateX(0); visibility: visible; }
  .hz-panel-handle { display: none; }
}

/* ---------- about the area ------------------------------------------------------ */
.area { padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--line); }
.area-head { margin-bottom: 18px; }  /* owner 2026-10-16: full page width, no 860px cap */
.area-head h2 { margin-bottom: .2em; }
.area-lede { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

.hz-carousel { position: relative; }
.car-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  border-radius: var(--radius); scrollbar-width: none;
  background: #0D2119;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }
.car-slide {
  position: relative; flex: 0 0 100%; margin: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 16 / 8; max-height: 600px;
}
.car-slide img { width: 100%; height: 100%; object-fit: cover; }
.car-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px;
  padding: 48px 20px 16px;
  background: linear-gradient(to top, rgba(8, 20, 14, .78), rgba(8, 20, 14, 0));
  color: #fff;
}
.car-cap { font-size: 1.08rem; font-weight: 650; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.car-credit { font-size: .74rem; color: rgba(255,255,255,.78); }
.car-credit a { color: inherit; }
.car-btn {
  position: absolute; top: calc(50% - 16px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--brand);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.car-btn:hover { background: #fff; }
.car-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.car-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.car-prev { left: 14px; }
.car-next { right: 14px; }
.car-dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.car-dot {
  width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.car-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #C4C9BF; transition: width .2s, background .2s;
}
.car-dot.active::before { width: 22px; border-radius: 4px; background: var(--brand-2); }
.car-dot:focus-visible { outline: 2px solid var(--brand-2); border-radius: 6px; }

.area-reasons {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .area-reasons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .area-reasons { grid-template-columns: repeat(3, 1fr); } }
.area-reasons li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--brand-2); padding: 16px 18px;
}
.area-reasons h3 { font-size: 1.05rem; font-weight: 700; color: var(--brand); margin-bottom: .3em; }
.area-reasons p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.area-sources { margin-top: 14px; font-size: .82rem; color: var(--ink-soft); }
.area-sources summary { cursor: pointer; width: max-content; }
.area-sources ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- about / contact / footer ----------------------------------------- */
.about { padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.about h2 { margin-bottom: .25em; }
.about p { margin: 0 0 .7em; }
/* owner 2026-10-16: always stacked (text, then contact card), never
   side by side; the tall form left dead space beside the short text */
.about-grid { display: grid; gap: 20px 40px; grid-template-columns: 1fr; }
.about p { color: var(--ink-soft); }
.contact-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
}
.contact-card h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: .2em; }
.about .contact-intro { margin: 0 0 14px; }
.contact-card .btn {
  display: block; width: 100%; text-align: center; margin-bottom: 12px;
  background: var(--brand); color: #fff;
}
.contact-card .btn:hover { background: var(--brand-2); }
.contact-line { margin: 4px 0; font-size: 1rem; font-weight: 500; }
.contact-line a { color: var(--brand-2); text-underline-offset: 3px; }

/* listing agents (js/leads.js renders them from config.js) */
.contact-agents { display: grid; gap: 10px; }
.agent { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.agent-name { font-weight: 700; font-size: 1.05rem; }
.agent-co { color: var(--ink-soft); font-size: .88rem; margin-bottom: 4px; }
.agent-line {
  display: block; width: fit-content; color: var(--brand-2); font-weight: 550;
  text-underline-offset: 3px; overflow-wrap: anywhere; padding: 2px 0;
}

/* lead form dialog (js/leads.js; off until config.js is filled in) */
.hz-lead {
  position: fixed; inset: 0; z-index: 210; background: rgba(8, 12, 10, .72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; animation: hz-lb-in .18s ease;
}
.hz-lead[hidden] { display: none; }
.hz-lead-card {
  position: relative; width: 100%; max-width: 440px; margin: auto;
  background: var(--card); border-radius: 12px; padding: 22px 22px 18px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .35);
}
.hz-lead-card h3 { margin: 0 0 2px; font-size: 1.35rem; }
.hz-lead-sub { margin: 0 0 12px; color: var(--ink-soft); font-size: .92rem; }
.hz-lead-card label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
.hz-lead-card input, .hz-lead-card textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400;
  padding: 9px 11px; border: 1px solid #CFCBC0; border-radius: 8px; background: #fff; color: var(--ink);
}
.hz-lead-card input:focus, .hz-lead-card textarea:focus { outline: 2px solid var(--brand-2); outline-offset: 0; border-color: transparent; }
.hz-lead-card .opt { font-weight: 400; color: var(--ink-soft); }
.hz-lead-hint { margin: -4px 0 10px; font-size: .82rem; color: var(--ink-soft); }
.hz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hz-lead-captcha { min-height: 65px; margin: 4px 0 6px; }
.hz-lead-msg { min-height: 1.3em; margin: 0 0 8px; font-size: .9rem; font-weight: 600; color: var(--c-sold-red); }
.hz-lead-card.sent .hz-lead-msg { color: var(--c-available); }
.hz-lead-send { width: 100%; background: var(--brand); color: #fff; }
.hz-lead-send:hover { background: var(--brand-2); }
.hz-lead-send:disabled { opacity: .6; cursor: wait; }
.hz-lead-note { margin: 10px 0 0; font-size: .78rem; color: var(--ink-soft); text-align: center; }
.hz-lead-close {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: #EFEEE8; color: var(--ink); font-size: 1.3rem; cursor: pointer;
}

/* inline inquiry form in the contact card (js/leads.js renders it;
   spec: REPORTS/FORMRESEARCH_R1.md) */
.contact-form { margin-bottom: 16px; }
/* leads.js hides this button when the form renders; beat the display:block above */
.contact-card .btn[hidden] { display: none; }
/* the stacked card is page-wide, so the four short fields pair up two per
   row; everything from Message down stays full width */
@media (min-width: 800px) {
  .hz-cform { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .hz-cform > *:nth-child(n+5) { grid-column: 1 / -1; }
}
.hz-cform label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
.hz-cform input:not([type="checkbox"]), .hz-cform textarea, .hz-cform select {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400;
  padding: 9px 11px; border: 1px solid #CFCBC0; border-radius: 8px; background: #fff; color: var(--ink);
}
.hz-cform input:focus, .hz-cform textarea:focus, .hz-cform select:focus {
  outline: 2px solid var(--brand-2); outline-offset: 0; border-color: transparent;
}
.hz-cform .opt { font-weight: 400; color: var(--ink-soft); }
.hz-cform .hz-consent {
  display: flex; gap: 8px; align-items: flex-start;
  font-weight: 400; font-size: .8rem; color: var(--ink-soft); line-height: 1.4;
}
.hz-cform .hz-consent input { margin-top: 2px; }
.hz-cform .hz-lead-msg { margin-top: 6px; }
.hz-cform.sent .hz-lead-msg { color: var(--c-available); }
.hz-cform .hz-lead-send { margin-bottom: 0; }

.site-footer {
  border-top: 1px solid var(--line); padding: 16px 0 20px;
  color: var(--ink-soft); font-size: .85rem;
}
.site-footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- print sheet -------------------------------------------------------- */
#print-sheet { display: none; }
@media print {
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block; padding: 24px; font-size: 13pt; }
  #print-sheet h1 { font-size: 20pt; margin-bottom: 4pt; }
  #print-sheet .ps-meta { color: #555; margin: 0 0 8pt; }
  #print-sheet .ps-price { font-size: 18pt; font-weight: 800; margin: 4pt 0 10pt; }
  #print-sheet table { border-collapse: collapse; margin: 8pt 0; }
  #print-sheet th, #print-sheet td { border: 1pt solid #999; padding: 4pt 10pt; text-align: left; }
  #print-sheet .ps-contact { margin-top: 14pt; font-weight: 600; }
}

/* ---------- small screens -------------------------------------------------------- */
@media (max-width: 640px) {
  /* one-row sticky header on phones: logo + the inquiry button (the hero
     buttons and scrolling cover section navigation) */
  .site-header .container { flex-wrap: nowrap; min-height: 50px; }
  .site-nav a:not(.nav-cta):not(.nav-phone) { display: none; }
  .site-nav a.nav-cta, .site-nav a.nav-phone { height: 2.2em; font-size: .86rem; }
  .site-nav a.nav-cta { margin-left: 0; }
  .site-nav a.nav-phone { margin-left: 6px; }
  .project, .about, .area { scroll-margin-top: 56px; }
  .hz-listblock { scroll-margin-top: 60px; }
  .hz-specs { gap: 18px; flex-wrap: wrap; }

  /* phones: text spans the full width, so the photo only tints the top right */
  .hero-photo {
    left: 0; opacity: .55;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
            mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  }
  .hero h1 { line-height: 1.1; text-wrap: balance; }
  .hero h1 br { display: none; }
  .hero p.lede { margin: 10px 0 18px; }
  .hero-actions { display: block; }
  .hero .hero-ctas { display: grid; gap: 10px; }
  .hero .btn { width: 100%; min-height: 46px; padding-top: 11px; padding-bottom: 11px; text-align: center; }
  .hero-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: 20px;
  }
  .hero-stats .stat .n { font-size: 1.75rem; }
  .hero-stats .stat .l { font-size: 12px; letter-spacing: .05em; }

  /* map controls move out of the image into a strip under it */
  .hz-map-controls {
    position: static; flex-direction: row; justify-content: flex-start;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: none; background: var(--card);
  }
  .hz-mc + .hz-mc { border-top: 0; }
  .hz-mc { border-right: 1px solid var(--line); }
  .hz-badge { font-size: 11px; padding: 3px 7px 3px 6px; gap: 4px; }
  .hz-badge-long { display: none; }
  .hz-badge-short { display: inline; }

  .car-slide { aspect-ratio: 4 / 3; }
  .car-slide figcaption { padding: 40px 14px 12px; }
  .car-cap { font-size: .95rem; }
  .car-btn { width: 38px; height: 38px; }
  .car-prev { left: 8px; }
  .car-next { right: 8px; }

  .hz-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hz-filters label { flex-direction: column; align-items: stretch; gap: 6px; }
  .hz-filters label:first-child { grid-column: 1 / -1; }
  .hz-filters select { width: 100%; min-width: 0; min-height: 44px; }
  .hz-list td.go .go-label { display: none; }
  .hz-list th, .hz-list td { padding-left: 7px; padding-right: 7px; }
  .hz-list th:first-child, .hz-list td:first-child { padding-left: 12px; }
  .hz-list th { letter-spacing: .04em; }
  .hz-list td:nth-child(n+3) { white-space: nowrap; }
  .hz-list .size-unit { display: none; }
  .hz-list .pill { padding: 2px 8px; }
}

/* small phones: the call box shrinks to "Call", then to the icon alone */
@media (max-width: 519px) {
  .logo { font-size: 1rem; }
  .site-nav a.nav-cta, .site-nav a.nav-phone { padding: 0 .7em; font-size: .82rem; }
  .nav-phone-num { display: none; }
  .nav-phone-short { display: inline; }
}
@media (max-width: 365px) {
  .nav-phone-short { display: none; }
  .site-nav a.nav-phone { padding: 0 .6em; }
}

/* ---------- Tract T development offering (townhomes.html) ---------------- */
.tractt-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 18px 0 22px;
}
.t-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.t-stat .v { font-weight: 800; font-size: 1.4rem; color: var(--brand); line-height: 1.15; }
.t-stat .l { color: var(--ink-soft); font-size: .85rem; margin-top: 2px; }
.tractt-hero { margin: 0 0 22px; }
.tractt-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.tractt-hero figcaption { color: var(--ink-soft); font-size: .85rem; margin-top: 6px; }
.tractt-h3 { margin: 28px 0 12px; }
/* plan-detail carousel: drawings letterbox on white, never crop */
.hz-carousel.detail .car-track { background: #fff; border: 1px solid var(--line); }
.hz-carousel.detail .car-slide { aspect-ratio: 16 / 9; max-height: 640px; background: #fff; }
.hz-carousel.detail .car-slide img { object-fit: contain; }
.hz-carousel.detail .car-slide figcaption {
  background: linear-gradient(to top, rgba(8, 20, 14, .82), rgba(8, 20, 14, 0));
}
.tractt-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  margin: 26px 0;
}
.tractt-cols h3 { margin-bottom: 8px; }
.tractt-list { margin: 10px 0 0; padding-left: 20px; }
.tractt-list li { margin: 6px 0; }
.tractt-note { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 0; }
.tractt-package {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-top: 10px;
}
.tractt-package h3 { margin-bottom: 6px; }
.tractt-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.tractt-ctas .btn:not(.btn-ghost) { background: var(--brand); color: #fff; }
.tractt-ctas .btn:not(.btn-ghost):hover { background: var(--brand-2); }
.btn-ghost { background: none; color: var(--brand); border: 1.5px solid var(--brand); }
.btn-ghost:hover { background: var(--brand); color: #fff; }
.tractt-disclaimer { color: var(--ink-soft); font-size: .8rem; margin-top: 12px; }
@media (max-width: 760px) {
  .tractt-stats { grid-template-columns: repeat(3, 1fr); }
  .tractt-cols { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 460px) {
  .tractt-stats { grid-template-columns: repeat(2, 1fr); }
}