/* Coastal: white pages with warm sand accents, coral buttons, charcoal type, rounded photo cards. */
[hidden] { display: none !important; }
:root {
  --ink: #1F2A30;        /* text, dark buttons */
  --muted: #5E6A6E;      /* secondary text */
  --paper: #FFFFFF;      /* page background */
  --sand: #F7F2EA;       /* alternate sections, hero bands */
  --sand-2: #EFE6D8;     /* placeholders, portrait */
  --line: #E9E2D6;       /* rules and borders */
  --coral: #C8775A;      /* buttons, accents */
  --coral-dark: #B0614A;
  --coral-soft: #F6E4DB;

  --display: "Libre Caslon Text", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 80rem;
  --radius: 1rem;
  --shadow: 0 6px 24px rgba(31, 42, 48, .08);
  --shadow-hover: 0 14px 34px rgba(31, 42, 48, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: .5rem 1rem; z-index: 60; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trap { position: absolute; left: -9999px; }
.text-link { color: var(--ink); text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .25em; font-weight: 600; }
.text-link:hover { color: var(--coral-dark); }

/* Buttons */
.button {
  display: inline-block; font: 600 1rem var(--sans); cursor: pointer; white-space: nowrap;
  padding: .9rem 1.6rem; border-radius: .7rem; border: 0;
  background: var(--coral); color: #fff; text-decoration: none; transition: background .2s, transform .2s;
}
.button:hover { background: var(--coral-dark); }
.button.light { background: var(--coral); color: #fff; }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.button.ghost:hover { background: var(--ink); color: #fff; }

/* Header: white bar on inner pages; transparent over the photo on the homepage */
.site-header {
  position: relative; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line);
}
.wordmark { font-family: var(--display); font-size: 1.4rem; font-style: italic; text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.site-header nav { display: flex; gap: 1.6rem; align-items: center; font-size: .97rem; font-weight: 600; position: relative; }
.site-header nav > a { text-decoration: none; white-space: nowrap; }
.site-header .nav-link:hover { color: var(--coral-dark); }
.site-header .nav-cta { background: var(--coral); color: #fff; padding: .55rem 1.15rem; border-radius: 2rem; }
.site-header .nav-cta:hover { background: var(--coral-dark); }
.home .site-header { position: absolute; inset: 0 0 auto 0; background: none; border: 0; color: #fff; }
.home .site-header .wordmark, .home .site-header nav > a:not(.nav-cta), .home .menu-btn { text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.home .site-header .nav-cta { background: #fff; color: var(--ink); }

/* Dropdown menus */
.nav-toggle { display: none; font: 600 .95rem var(--sans); color: inherit; background: none; cursor: pointer; border: 1.5px solid currentColor; padding: .5rem 1.1rem; border-radius: 2rem; }
.menu { position: relative; }
.menu-btn { font: inherit; color: inherit; background: none; border: 0; padding: .25rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.menu-btn::after { content: ""; width: .38em; height: .38em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.menu.is-open .menu-btn::after { transform: translateY(1px) rotate(-135deg); }
.menu-panel {
  display: none; position: absolute; z-index: 40; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 46rem); flex-wrap: wrap; gap: 1.25rem 2.75rem;
  background: var(--paper); color: var(--ink); text-shadow: none;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem 1.25rem; box-shadow: var(--shadow-hover);
}
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
#m-wf { left: auto; right: 0; transform: none; }
.menu.is-open .menu-panel { display: flex; }
@media (hover: hover) and (min-width: 64.01rem) { .menu:hover .menu-panel { display: flex; } }
.menu-head { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.menu-col ul { list-style: none; margin: 0; padding: 0; }
.menu-col a { display: block; padding: .22rem 0; text-decoration: none; white-space: nowrap; font-weight: 400; }
.menu-col a:hover, .menu-col a:focus-visible { color: var(--coral-dark); }
.menu-all { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: .9rem; }
.menu-all a { color: var(--coral-dark); text-decoration: none; }
@media (max-width: 64rem) {
  .nav-toggle { display: inline-block; }
  .site-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: var(--paper); color: var(--ink); padding: .5rem var(--gutter) 1.5rem; max-height: 80vh; overflow: auto;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-hover);
  }
  .site-header nav.is-open { display: flex; }
  .home .site-header nav > a:not(.nav-cta), .home .menu-btn { text-shadow: none; }
  .site-header nav > a:not(.nav-cta), .menu-btn { width: 100%; justify-content: space-between; padding: .75rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
  .menu-panel, #m-wf { position: static; transform: none; width: auto; max-width: none; box-shadow: none; border: 0; padding: .75rem 0 1rem; flex-direction: column; gap: 1rem; }
  .menu-panel::before { display: none; }
  .site-header nav .nav-cta, .home .site-header .nav-cta { align-self: flex-start; margin-top: 1rem; background: var(--coral); color: #fff; }
}
@media (max-width: 44rem) { .wordmark { font-size: 1.15rem; } }

/* Homepage */
.hero {
  position: relative; min-height: 92svh; display: grid; align-items: end; color: #fff;
  background: var(--img, none) center / cover, linear-gradient(160deg, #6C8C93, #2D4048);
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: 7rem; padding-bottom: 4rem; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); max-width: 16ch; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.hero .wrap > p { font-size: 1.2rem; max-width: 44ch; margin: 1rem 0 2rem; }
.search { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; background: #fff; padding: .5rem; border-radius: var(--radius); max-width: 46rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); color: var(--ink); }
.search label { display: grid; padding: .35rem .85rem; }
.search label:first-child { border-right: 1px solid var(--line); }
.search span { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search select { font: 600 1rem var(--sans); border: 0; background: none; padding: .15rem 0; color: var(--ink); }
.stats { display: flex; gap: 2.5rem; margin-top: 2rem; font-size: .95rem; }
.stats b { display: block; font: 1.6rem var(--display); }
.sec { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-sand { background: var(--sand); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2.25rem; flex-wrap: wrap; }
.sec-head p { color: var(--muted); max-width: 54ch; margin-top: .75rem; }
.more { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--coral); white-space: nowrap; }
.more:hover { color: var(--coral-dark); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.tile {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none;
  background: var(--img, none) center / cover, linear-gradient(160deg, #8FA6A6, #44585E); box-shadow: var(--shadow); transition: transform .25s;
}
.tile:hover { transform: translateY(-4px); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.65)); }
.tile div { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; }
.tile h3 { font-size: 1.35rem; }
.tile span { font-size: .92rem; }
.tiles:not(.tiles-4) .tile:nth-child(1), .tiles:not(.tiles-4) .tile:nth-child(2),
.tiles:not(.tiles-4) .tile:nth-child(11), .tiles:not(.tiles-4) .tile:nth-child(12) { grid-column: span 2; aspect-ratio: 16 / 10; }
.tiles-4 { margin-bottom: 1rem; }
.advisor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.portrait { width: 100%; max-width: 24rem; justify-self: center; aspect-ratio: 2 / 3; border-radius: 1.25rem; object-fit: cover; object-position: center top; background: linear-gradient(160deg, var(--sand-2), #D8CAB6); box-shadow: var(--shadow-hover); }
.advisor h2 { margin-bottom: 1rem; }
.advisor p + p { margin-top: 1rem; }
.advisor p { color: var(--muted); }
.signature { font: italic 1.4rem var(--display); color: var(--ink) !important; margin-top: 1.5rem !important; }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.why div { background: var(--paper); border-radius: var(--radius); padding: 1.75rem; }
.why h3 { margin-bottom: .4rem; }
.why p { color: var(--muted); }
.why i { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--coral-soft); color: var(--coral-dark); font-style: normal; font-weight: 600; margin-bottom: 1rem; }
.book-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); background: var(--sand); border-radius: 1.5rem; padding: clamp(2rem, 4vw, 3.5rem); }
.contact-intro p { color: var(--muted); margin-top: 1rem; max-width: 34ch; }
.contact-direct { font-size: 1.125rem; line-height: 1.9; }
.contact-direct a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--coral); font-weight: 600; }
.signup-band { background: var(--ink); color: #fff; border-radius: 1.5rem; padding: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.signup-band p { opacity: .85; margin-top: .5rem; }
.signup { display: flex; flex-wrap: wrap; gap: .5rem; background: #fff; padding: .4rem; border-radius: .8rem; max-width: 34rem; }
.signup input:not([type=hidden]) { font: 1rem var(--sans); border: 0; padding: .6rem .8rem; min-width: 0; flex: 1 1 9rem; outline: none; color: var(--ink); }
.signup .button { padding: .75rem 1.2rem; border-radius: .6rem; }
.signup .form-status { flex-basis: 100%; padding: 0 .6rem .3rem; color: var(--ink); min-height: 0; }

/* Inner-page heroes: sand band, charcoal type, rounded photo */
.detail-hero {
  position: relative; background: var(--sand);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gutter); align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.back { color: var(--muted); font-size: .95rem; font-weight: 600; text-decoration: none; }
.back::before { content: "\2190\00a0"; }
.back:hover { color: var(--coral-dark); }
.detail-hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 1rem 0 .75rem; }
.detail-tagline { color: var(--muted); max-width: 44ch; font-size: 1.15rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.25rem 2rem; margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .2rem 0 0; font-family: var(--display); font-size: 1.2rem; }
.detail-photo { aspect-ratio: 4 / 5; border-radius: 1.25rem; overflow: hidden; box-shadow: var(--shadow-hover); background: linear-gradient(160deg, #8FA6A6, #44585E); }
.detail-photo.has-img img { width: 100%; height: 100%; object-fit: cover; }
.area-hero .detail-photo { aspect-ratio: 4 / 3; }
.area-count { margin-top: 1.25rem; font-family: var(--display); font-size: 1.3rem; }
.photo-credit { position: absolute; right: var(--gutter); bottom: .6rem; font-size: .75rem; color: var(--muted); }

.detail-body {
  max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: calc(var(--gutter) * 1.5); padding: clamp(3rem, 7vw, 5rem) var(--gutter); align-items: start;
}
.detail-main { display: grid; gap: 3rem; }
article.detail-main { gap: 0; }
.detail-main h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 1.25rem; }
.detail-main p { max-width: 64ch; margin-bottom: 1rem; }
.highlights { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
.highlights li { padding-left: 1.25rem; position: relative; }
.highlights li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); }

/* Expandable sections */
.panel { border-top: 1px solid var(--line); }
.panel:last-child { border-bottom: 1px solid var(--line); }
.panel summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; }
.panel summary::-webkit-details-marker { display: none; }
.detail-main .panel summary h2 { margin: 0; }
.panel summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--coral-soft); color: var(--coral-dark); font-size: 1.3rem; line-height: 1; }
.panel[open] summary::after { content: "\2212"; }
.panel-body { padding-bottom: 1.75rem; }
.faq dt { font-family: var(--display); font-size: 1.15rem; padding-top: 1.1rem; }
.faq dd { margin: .35rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); max-width: 64ch; }
.panel-body .faq dt:first-child { padding-top: 0; }
.news ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.news li { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.news time { color: var(--muted); font-size: .95rem; }

/* Forms */
.detail-form { position: sticky; top: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }
.detail-form h2 { font-size: 1.7rem; }
.detail-form > p { color: var(--muted); margin: .75rem 0 1.5rem; }
.detail-direct { margin-top: 1rem; font-size: .95rem; color: var(--muted) !important; }
.inquiry { display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 600; }
.optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid #D9D1C4; border-radius: .6rem; padding: .75rem .875rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--coral); outline-offset: 0; border-color: var(--coral); }
.field [aria-invalid="true"] { border-color: #A3392B; }
.inquiry .button { justify-self: start; margin-top: .25rem; }
.detail-form .button { justify-self: stretch; }
.form-status { min-height: 1.6em; font-size: .95rem; }
.form-status.is-error { color: #A3392B; }
.form-status.is-success { color: #2E6E5A; }
.book-link { justify-self: start; }

/* Building cards */
.bcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; }
.bcard { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; position: relative; }
.bcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.bcard-photo { display: block; aspect-ratio: 4 / 3; background: var(--img, none) center / cover, linear-gradient(160deg, #8FA6A6, #44585E); }
.bcard-body { padding: 1.05rem 1.25rem 1.3rem; display: grid; gap: .15rem; }
.bcard h3 { font-size: 1.25rem; line-height: 1.2; }
.bcard h3 a { text-decoration: none; }
.bcard h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.bcard-status { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--coral-dark); }
.bcard-building { color: #3F6E8C; }
.bcard-done { color: #8A6A2F; }
.bcard-classic { color: var(--ink); }
.bcard-place, .bcard-size { color: var(--muted); font-size: .95rem; }
.bcard-price { font-family: var(--display); margin-top: .3rem; }
.bcard-sale { font-size: .88rem; font-weight: 600; color: var(--coral-dark); }
.stage-group + .stage-group { margin-top: 3.5rem; }
.stage-group h2 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.5rem; }
.stage-count { font: 600 .9rem var(--sans); color: var(--coral-dark); background: var(--coral-soft); padding: .15rem .6rem; border-radius: 1rem; }
.stage-note { color: var(--muted); margin: -.75rem 0 1.5rem; max-width: 60ch; }
.related { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem); }
.related h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 1.75rem; }

/* Homes */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.res { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.photo { display: block; aspect-ratio: 3 / 2; background: var(--img, none) center / cover, linear-gradient(160deg, #B9A88F, #6F6252); }
.res-body { padding: 1.05rem 1.25rem 1.3rem; display: grid; gap: .2rem; }
.res h3 a { text-decoration: none; }
.res-area { color: var(--muted); }
.res-price { font-family: var(--display); font-size: 1.35rem; margin-top: .25rem; }
.res-specs { color: var(--muted); font-size: .95rem; margin-bottom: .5rem; }
.featured-title { font-size: 1.5rem; margin: 3rem 0 1.5rem; }

/* Directories (neighborhoods, waterfront, homes) */
.area-directory { list-style: none; margin: 0; padding: 0; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.area-directory li { border-bottom: 1px solid var(--line); padding: 0 1.5rem; }
.area-directory li:last-child { border-bottom: 0; }
.area-directory li > a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: 1.1rem 0; text-decoration: none; }
.area-name { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; transition: color .2s; }
.area-directory li > a:hover .area-name { color: var(--coral-dark); }
.area-detail { color: var(--muted); }
.sub-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: -.4rem 0 1.1rem; font-size: .95rem; }
.sub-links a { color: var(--muted); text-underline-offset: .25em; }
.sub-links a:hover { color: var(--coral-dark); }
.area-note { color: var(--muted); margin: -.6rem 0 1.1rem; font-size: .95rem; max-width: 60ch; }
.detail-main h2 + .area-directory { margin-top: .5rem; }

/* Building table with filters */
.nc-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.nc-filter button { font: 600 .92rem var(--sans); cursor: pointer; padding: .45rem 1rem; border-radius: 2rem; border: 1px solid #D9D1C4; background: var(--paper); color: var(--ink); }
.nc-filter button:hover { border-color: var(--coral); }
.nc-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.nc-stage { margin-bottom: .75rem; }
.area-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: .25rem 0 1.5rem; min-height: 1.6em; }
.area-links a { color: var(--coral-dark); font-weight: 600; text-underline-offset: .25em; }
.nc-table { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.nc-table th, .nc-table td { text-align: left; padding: 1.05rem 1rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.nc-table thead th { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--sand); }
.nc-table tbody th { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.nc-table tbody th a { text-decoration: none; }
.nc-table tbody tr:hover { background: #FCFAF6; }
.nc-table td:nth-child(4) { font-variant-numeric: tabular-nums; }
.nc-table td:last-child { text-align: right; }
.nc-table .text-link { font-weight: 600; }
.nc-empty { color: var(--muted); padding: 1.5rem 0; }
.units-for-sale td:last-child { text-align: right; }
.idx-credit { font-size: .82rem; color: var(--muted); margin-top: 1rem; max-width: 70ch; }

/* Credits */
.credits { list-style: none; margin: 0; padding: 0; }
.credits li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .25rem 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.credits span { color: var(--muted); }

/* Footer */
.site-footer { background: var(--sand); color: var(--muted); display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; padding: 3rem var(--gutter); font-size: .95rem; border-top: 1px solid var(--line); }
.site-footer .wordmark { color: var(--ink); margin-right: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--coral-dark); }

/* Motion */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Tablet */
@media (max-width: 64rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:not(.tiles-4) .tile:nth-child(n) { grid-column: auto; aspect-ratio: 4 / 5; }
  .advisor, .book-card, .signup-band { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr 1fr; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-photo { aspect-ratio: 3 / 2; max-height: 28rem; }
  .detail-body { grid-template-columns: 1fr; }
  .detail-form { position: static; }
  .portrait { max-width: 22rem; }
}

/* Phone */
@media (max-width: 44rem) {
  .search { grid-template-columns: 1fr; }
  .search label:first-child { border: 0; }
  .stats { gap: 1.5rem; }
  .why, .highlights { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .news li { grid-template-columns: 1fr; }
  .credits li { grid-template-columns: 1fr; }
  .nc-table thead { display: none; }
  .nc-table, .nc-table tbody, .nc-table tr, .nc-table th, .nc-table td { display: block; }
  .nc-table tr { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
  .nc-table th, .nc-table td { border: 0; padding: .1rem 0; text-align: left; }
  .nc-table td:last-child { text-align: left; padding-top: .5rem; }
  .nc-table td:nth-child(3)::before { content: "Completion "; color: var(--muted); }
  .nc-table td:nth-child(4)::before { content: "From "; color: var(--muted); }
  .area-directory li { padding: 0 1.1rem; }
}

/* Cards inside article areas keep their own tight spacing */
.detail-main .bcard p, .detail-main .res p, .detail-main .area-directory p { margin-bottom: 0; max-width: none; }
.detail-main .stage-note { margin-bottom: 1.5rem; }

/* "How it works" band right under the homepage hero */
.sec-steps { background: var(--sand); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.sec-steps .why { margin-top: 0; }
.sec-steps .why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sec-steps .why div { padding: 1.4rem 1.5rem; }
@media (max-width: 44rem) { .sec-steps .why { grid-template-columns: 1fr; } }
@media (max-width: 44rem) {
  .sec-steps { padding: 1.75rem 0; }
  .sec-steps .why { gap: .6rem; }
  .sec-steps .why div { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start; padding: 1rem 1.1rem; }
  .sec-steps .why i { grid-row: span 2; margin: 0; width: 2.1rem; height: 2.1rem; }
  .sec-steps .why h3 { font-size: 1.1rem; margin: .1rem 0 .15rem; }
  .sec-steps .why p { font-size: .95rem; line-height: 1.5; }
}
@media (max-width: 44rem) {
  .hero { min-height: 88svh; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.65) 100%); }
  .hero h1 { font-size: 2.3rem; }
  .hero .wrap > p { font-size: 1.05rem; margin: .75rem 0 1.5rem; }
  .tiles { gap: .65rem; }
  .tiles .tile, .tiles:not(.tiles-4) .tile:nth-child(n) { aspect-ratio: 1 / 1; border-radius: .8rem; }
  .tile div { left: .75rem; right: .75rem; bottom: .7rem; }
  .tile h3 { font-size: 1.08rem; line-height: 1.15; }
  .tile span { font-size: .8rem; }
  .sec { padding: 3.25rem 0; }
  .sec-head { margin-bottom: 1.5rem; }
  .book-card, .signup-band { border-radius: 1rem; padding: 1.5rem 1.15rem; }
  .advisor .portrait { max-width: 15rem; }
}
.contact-intro .button { margin-top: 1.25rem; }
.detail-direct a { color: var(--ink); font-weight: 600; text-decoration-color: var(--coral); text-underline-offset: .2em; }

/* Footer: contact row, then the brokerage and legal line */
.site-footer { flex-direction: column; align-items: stretch; gap: 1.5rem; }
.foot-main { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }
.foot-main .wordmark { margin-right: auto; }
.foot-legal { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 1.25rem; font-size: .85rem; line-height: 1.6; max-width: 70rem; }
.foot-legal strong { color: var(--ink); font-weight: 600; }
.eho { flex: none; width: 2.1rem; height: 2.1rem; color: var(--ink); }

/* Branded panel where a place has no photo of its own (never a borrowed one) */
.detail-photo.no-img { display: grid; place-items: center; background: linear-gradient(150deg, #F3E9DC 0%, #E7D6C2 55%, #D9C2A6 100%); }
.detail-photo.no-img span { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink); text-align: center; padding: 1.5rem; }
.entry-badge { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 1rem; background: var(--coral-soft); color: var(--coral-dark); font: 600 .72rem var(--sans); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.entry-note { background: var(--coral-soft); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.entry-note h2 { font-size: 1.35rem !important; margin-bottom: .5rem !important; }
.entry-note p { margin: 0 !important; }

/* Track record numbers (homepage advisor section and About page) */
.stats-row { list-style: none; margin: 1.5rem 0 .25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.stats-row li { background: var(--sand); border-radius: .8rem; padding: .8rem 1.15rem; min-width: 7.5rem; }
.stats-row b { display: block; font: 1.55rem var(--display); color: var(--ink); line-height: 1.1; }
.stats-row span { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.detail-hero .stats-row li { background: var(--paper); }
.about-link { margin-top: 1rem !important; }
.about-photo { aspect-ratio: 2 / 3; max-width: 24rem; justify-self: center; }
.about-photo img { object-position: center top; }

/* Call / Text / Book bar: full-width at the bottom on phones, a floating button on computers */
.action-bar { position: fixed; z-index: 50; display: flex; gap: .5rem; }
.action-bar a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; font: 600 .95rem var(--sans); }
.action-bar svg { width: 1.1rem; height: 1.1rem; fill: currentColor; flex: none; }
@media (max-width: 64rem) {
  .action-bar { left: 0; right: 0; bottom: 0; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(31,42,48,.08); backdrop-filter: blur(8px); }
  .action-bar a { flex: 1; padding: .75rem .5rem; border-radius: .7rem; color: var(--ink); background: var(--sand); }
  .action-bar a.book { flex: 1.4; background: var(--coral); color: #fff; }
  body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 64.01rem) {
  .action-bar { right: 1.5rem; bottom: 1.5rem; }
  .action-bar a:not(.book) { display: none; }
  .action-bar a.book { background: var(--coral); color: #fff; padding: .85rem 1.3rem; border-radius: 2rem; box-shadow: 0 10px 28px rgba(176,97,74,.35); }
  .action-bar a.book:hover { background: var(--coral-dark); }
}

/* Consent line under forms, and the privacy page */
.consent { font-size: .78rem; line-height: 1.5; color: var(--muted); margin: .25rem 0 0; }
.consent a { color: var(--muted); }
.signup .consent { flex-basis: 100%; padding: 0 .6rem .4rem; }
.legal section { margin-bottom: 2rem; }
.legal h2 { font-size: 1.5rem !important; margin-bottom: .75rem !important; }

/* Presented by: the advisor panel on every listing and building page */
.presented-line { margin-top: .75rem; font-size: .95rem; color: var(--muted); }
.presented-line a { color: var(--ink); font-weight: 600; text-decoration-color: var(--coral); text-underline-offset: .2em; }
.courtesy-line { margin-top: .25rem; font-size: .85rem; color: var(--muted); }
.presented-by { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.75rem; align-items: start; margin-top: 3rem; padding: 2rem; background: var(--sand); border-radius: var(--radius); }
.presented-by img { width: 9rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .75rem; }
.presented-by .eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-dark); margin: 0; }
.detail-main .presented-by h2 { font-size: 1.6rem; margin: .2rem 0 .1rem; }
.presented-title { color: var(--muted); font-size: .95rem; }
.presented-by p { margin-bottom: .75rem; }
.presented-by .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .5rem; }
.presented-by .button { padding: .6rem 1.1rem; font-size: .95rem; }
.presented-more { margin: .5rem 0 0; }
@media (max-width: 44rem) {
  .presented-by { grid-template-columns: 1fr; padding: 1.5rem; }
  .presented-by img { width: 7rem; }
}

/* List / Map switch */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 2rem; padding: .2rem; margin-bottom: 1.25rem; background: var(--paper); }
.view-toggle button { font: inherit; font-weight: 600; font-size: .95rem; border: 0; background: none; color: var(--muted); padding: .4rem 1.25rem; border-radius: 2rem; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.map-panel .map { height: min(70vh, 40rem); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.pin { font: 600 .82rem/1 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 2rem; padding: .35rem .6rem; box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; }
.pin-building { background: var(--sand); border-color: var(--sand-2); }
.pin:hover, .pin:focus-visible, .pin.is-active { background: var(--coral); border-color: var(--coral); color: #fff; z-index: 2; }
.maplibregl-popup-content { padding: 0; border-radius: .75rem; overflow: hidden; box-shadow: var(--shadow-hover); font-family: var(--sans); }
.maplibregl-popup-close-button { font-size: 1.2rem; width: 1.75rem; height: 1.75rem; background: rgba(255,255,255,.9); border-radius: 50%; top: .35rem; right: .35rem; }
.map-card { display: grid; gap: .2rem; text-decoration: none; color: var(--ink); padding-bottom: .8rem; }
.map-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: .4rem; }
.map-card strong, .map-card span, .map-card em { padding: 0 .9rem; }
.map-card strong { font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.3; }
.map-card span { color: var(--muted); font-size: .88rem; }
.map-card em { font-style: normal; font-weight: 600; font-size: .88rem; color: var(--coral-dark); }
.map-group .map-card { padding-bottom: .5rem; }
.map-units { list-style: none; margin: 0; padding: 0 .9rem .3rem; max-height: 7.5rem; overflow: auto; border-top: 1px solid var(--line); }
.map-units a { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .88rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.map-units a:hover b { color: var(--coral-dark); }
.map-more { padding: .3rem .9rem .7rem; margin: 0; font-size: .82rem; color: var(--muted); }

/* ---------- Showcase pages: Single-family homes, Waterfront communities ---------- */
.show-hero { position: relative; min-height: 88svh; display: grid; align-items: end; color: #fff; background: linear-gradient(160deg, #6C8C93, #2D4048); overflow: hidden; }
.show-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.show-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.68) 100%); }
.show-hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: 8rem; padding-bottom: 4.5rem; }
.show-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 14ch; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.show-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6rem; }
.show-hero .show-eyebrow { color: #fff; opacity: .9; }
.show-intro { font-size: 1.2rem; max-width: 46ch; margin: 1rem 0 0; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.show-hero .stats { margin-top: 2rem; }
.show-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button.ghost-light { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.8); backdrop-filter: blur(4px); }
.button.ghost-light:hover { background: #fff; color: var(--ink); }
.show-caption { position: absolute; z-index: 1; right: var(--gutter); bottom: 1rem; margin: 0; font-size: .78rem; color: rgba(255,255,255,.85); text-align: right; max-width: 60ch; }
.show-caption a { color: #fff; }

.showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); gap: 1rem; }
.show-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; background: var(--sand-2); box-shadow: var(--shadow); }
.show-card.is-lead { grid-column: span 2; grid-row: span 2; }
.show-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.show-card:hover img { transform: scale(1.04); }
.show-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72)); }
.show-card-body { position: absolute; z-index: 1; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; }
.show-card h3 { font-size: 1.15rem; margin: .1rem 0; }
.show-card p { margin: 0; font-size: .9rem; opacity: .92; }
.show-card .show-price { font-family: var(--display); font-size: 1.5rem; opacity: 1; }
.show-card.is-lead .show-price { font-size: 2.1rem; }
.show-card.is-lead h3 { font-size: 1.45rem; }

.area-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.area-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; background: linear-gradient(160deg, #B9A88F, #6F6252); }
.area-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.area-tile:hover img { transform: scale(1.04); }
.area-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.65)); }
.area-tile div { position: absolute; z-index: 1; left: 1.25rem; right: 1.25rem; bottom: 1rem; }
.area-tile h3 { font-size: 1.5rem; }
.area-tile p { margin: .15rem 0 0; font-size: .92rem; }

.water-band { position: relative; display: grid; align-items: center; min-height: 22rem; margin-top: 1rem; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; background: linear-gradient(160deg, #6C8C93, #2D4048); }
.water-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.water-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.1) 70%); }
.water-band div { position: relative; z-index: 1; padding: 2.5rem; max-width: 34rem; }
.water-band h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.water-band p { margin-bottom: 1.4rem; }

.browse-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button { font: 600 .92rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 2rem; padding: .45rem 1rem; cursor: pointer; }
.chips button span { color: var(--muted); font-weight: 400; margin-left: .25rem; }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips button[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
.browse-selects { display: flex; gap: .5rem; }
.browse-selects select { font: 600 .92rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 2rem; padding: .45rem 1rem; }
.browse-count { color: var(--muted); margin: 0 0 1rem; }
.browse-more { text-align: center; margin-top: 2rem; }
.browse .view-toggle { margin-bottom: 1.25rem; }
.photo { position: relative; overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.wf-intro-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.wf-statement { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.3; margin: 0; }
.wf-intro-grid p + p { margin-top: 1rem; }
.wf-intro-grid > div > p:not(.presented-line) { color: var(--muted); }
.wf-list { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.wf-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.wf-row:nth-child(even) .wf-photo { order: 2; }
.wf-photo { display: block; aspect-ratio: 3 / 2; border-radius: 1.25rem; overflow: hidden; box-shadow: var(--shadow-hover); background: linear-gradient(160deg, #8FA6A6, #44585E); }
.wf-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.wf-photo:hover img { transform: scale(1.03); }
.wf-text .show-eyebrow { color: var(--coral-dark); }
.wf-text h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: .75rem; }
.wf-text h2 a { text-decoration: none; }
.wf-text > p { color: var(--muted); max-width: 46ch; }
.wf-text .wf-facts { color: var(--ink); margin-top: 1rem; }
.wf-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.25rem; max-width: 26rem; }
.wf-thumbs a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: .6rem; overflow: hidden; color: #fff; text-decoration: none; }
.wf-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.wf-thumbs span { position: absolute; left: .4rem; bottom: .35rem; font-weight: 600; font-size: .85rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.wf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }

@media (max-width: 64rem) {
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .show-hero { min-height: 92svh; }
  .show-hero .wrap { padding-bottom: 5.5rem; }
  .show-caption { left: var(--gutter); text-align: left; bottom: .75rem; }
  .showcase { grid-template-columns: 1fr; grid-auto-rows: 17rem; }
  .show-card.is-lead { grid-column: auto; grid-row: span 1; }
  .area-tiles { grid-template-columns: 1fr; }
  .water-band div { padding: 1.75rem; }
  .wf-intro-grid, .wf-row { grid-template-columns: 1fr; }
  .wf-row:nth-child(even) .wf-photo { order: 0; }
  .browse-selects { width: 100%; }
  .browse-selects label, .browse-selects select { flex: 1; width: 100%; }
}
/* Darker on the text side so the hero copy stays readable over bright interiors and white facades. */
.show-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%); }
.show-hero .wrap, .show-caption { z-index: 2; }

/* New construction page */
.bcard-photo { position: relative; overflow: hidden; }
.bcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bcard:hover .bcard-photo img { transform: scale(1.04); }
.show-card .show-status { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .9; margin-bottom: .2rem; }
.stage-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage-tile { aspect-ratio: 3 / 4; }
.stage-tile p { line-height: 1.4; }
.stage-tile::after { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75)); }
@media (max-width: 64rem) { .stage-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .stage-tiles { grid-template-columns: 1fr; } .stage-tile { aspect-ratio: 4 / 3; } }

/* "Elsewhere in ..." list at the foot of neighborhood pages: name on the left, count on the right */
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2.5rem; border-top: 1px solid var(--line); }
.related-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem .25rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.related-list .rel-name { font-family: var(--display); font-size: 1.15rem; }
.related-list .rel-count { color: var(--muted); font-size: .92rem; white-space: nowrap; }
.related-list a:hover .rel-name { color: var(--coral-dark); }
.related-list a:hover .rel-count { color: var(--ink); }
/* A listing photo standing in for a building photo: shown whole (never cropped, so the MLS notice stays intact). */
.detail-photo.listing-photo { aspect-ratio: 3 / 2; background: none; }
.detail-photo.listing-photo img { object-fit: contain; }