/* Interior / home page content styles */

.gold-rule {
  height: 4px;
  width: 140px;
  background: var(--gold);
  margin: 0 0 24px;
}

.page-h1 {
  font-size: calc(46px * var(--type-scale));
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}

.content-h2 {
  font-size: calc(27px * var(--type-scale));
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.25;
}

.section-h2 {
  font-size: calc(31px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
}

.part-h2 {
  font-size: calc(34px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 12px;
}

.person-h2 {
  font-size: calc(30px * var(--type-scale));
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}

.step-h3 {
  font-size: calc(25px * var(--type-scale));
  font-weight: 700;
  margin: 0 0 8px;
}

.sub-h3 {
  font-size: calc(22px * var(--type-scale));
  font-weight: 700;
  margin: 0 0 8px;
}

.deck {
  font-size: calc(20px * var(--type-scale));
  font-weight: 600;
  color: var(--muted-2);
  margin: 0 0 18px;
  line-height: 1.35;
}

.kicker {
  font-size: calc(20px * var(--type-scale));
  font-weight: 600;
  color: var(--muted-2);
  margin: 0 0 12px;
}

.body-copy p,
.content-p {
  margin: 0 0 16px;
  font-size: calc(18.5px * var(--type-scale));
  line-height: 1.7;
  text-wrap: pretty;
}

.body-copy a,
.content-p a,
.inline-link {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.body-copy a:hover,
.content-p a:hover,
.inline-link:hover {
  color: var(--gold-deep);
}

/* Jump-to-section cue - CSS chevron (unicode ⌄ sat below the baseline). */
.inline-link--jump {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: calc(100% - 0.85em) 1px;
  padding-bottom: 2px;
}

.inline-link--jump:hover {
  background-image: linear-gradient(var(--gold-deep), var(--gold-deep));
}

.inline-link--jump::after {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.3em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  vertical-align: middle;
}

/* Jump links and toggle filters - Chip.astro / ChipRow.astro. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.chip-row--flush {
  margin-bottom: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 22px;
  border: var(--border-card);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font: inherit;
  font-size: calc(17px * var(--type-scale));
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
  background: var(--white);
  cursor: pointer;
}

.chip:hover {
  background: var(--cream-warm);
  color: var(--black);
}

.chip[aria-pressed='true'] {
  background: var(--gold);
}

.chip:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.chip-or {
  font-size: calc(15px * var(--type-scale));
  color: var(--muted);
}

.section-block {
  padding: 34px 0 0;
  margin-top: 34px;
  border-top: var(--rule-gold-dot);
}

.section-block:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.part-break {
  border-top: 4px solid var(--black);
  margin: 40px 0 34px;
  padding: 0;
}

.gold-bullets {
  margin: 0 0 22px;
  padding: 0 0 0 22px;
}

.gold-bullets li {
  margin: 0 0 10px;
  font-size: calc(18.5px * var(--type-scale));
  line-height: 1.6;
}

.gold-bullets li::marker {
  color: var(--gold);
}

/* Long A-Z floor-plan lists: fill down, then across. Legacy
   "Floor Plans (cont.)" headings were a Dreamweaver page-break
   stand-in; one section + columns replaces that. */
.gold-bullets--columns {
  columns: 2;
  column-gap: 28px;
}

.gold-bullets--columns li {
  break-inside: avoid;
}

@media (max-width: 560px) {
  .gold-bullets--columns {
    columns: 1;
  }
}

/* Market trends - HTML twin of page 3 of the Long Realty PDF (MarketSummary.astro). */
.market-summary {
  container: market-summary / inline-size;
}

.market-summary__title {
  font-size: calc(19px * var(--type-scale));
  font-weight: 700;
  margin: 26px 0 6px;
}

.market-summary__note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: calc(16px * var(--type-scale));
  line-height: 1.55;
}

.market-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
}

.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(16px * var(--type-scale));
  font-variant-numeric: tabular-nums;
}

.market-table th,
.market-table td {
  padding: 9px 14px;
  text-align: right;
  white-space: nowrap;
}

.market-table thead th {
  color: var(--muted);
  font-size: calc(13.5px * var(--type-scale));
  font-weight: 600;
  line-height: 1.35;
  vertical-align: bottom;
  border-bottom: var(--rule-gold);
}

.market-table tbody th {
  text-align: left;
  font-weight: 700;
}

.market-table tbody tr:nth-child(odd) {
  background: var(--cream);
}

.market-change--up::before,
.market-change--down::before {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.7em;
  vertical-align: 0.12em;
}

.market-change--up::before {
  content: '▲';
  color: var(--for-sale);
}

.market-change--down::before {
  content: '▼';
  color: var(--contract);
}

.market-change__word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The five numeric columns need ~840px. Narrower, each metric becomes its own
   block - month and value on the left, the change beside the month it compares. */
@container market-summary (max-width: 820px) {
  .market-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .market-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .market-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 4.75em;
    column-gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-plate);
  }

  .market-table tbody th,
  .market-table tbody td {
    padding: 2px 0;
  }

  .market-table tbody th {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }

  .market-table tbody td[data-label] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 10px;
    grid-column: 1;
  }

  .market-table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: calc(14px * var(--type-scale));
  }

  .market-table tbody td:nth-of-type(1) {
    grid-row: 2;
  }

  .market-table tbody td:nth-of-type(2),
  .market-table tbody td:nth-of-type(3) {
    grid-row: 3;
  }

  .market-table tbody td:nth-of-type(4),
  .market-table tbody td:nth-of-type(5) {
    grid-row: 4;
  }

  .market-table tbody td:nth-of-type(3),
  .market-table tbody td:nth-of-type(5) {
    grid-column: 2;
  }
}

/* Sized to content rather than a fixed grid: a $12,950,000 high price is
   wider than any column count that keeps the other four from orphaning. */
.market-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.market-tiles > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  text-align: center;
}

.market-tiles dt {
  color: var(--muted);
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
}

.market-tiles dd {
  margin: 0;
  font-size: calc(25px * var(--type-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.market-summary__stamp {
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: calc(13.5px * var(--type-scale));
}

.reasons-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: reason;
}

.reasons-list li {
  counter-increment: reason;
  margin: 0 0 8px;
  font-size: calc(18.5px * var(--type-scale));
}

.reasons-list a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.reasons-list a::before {
  content: counter(reason) '. ';
  font-weight: 700;
}

.reasons-list a:hover {
  color: var(--gold-deep);
}

.def-list {
  margin: 0 0 18px;
}

.def-term {
  display: block;
  font-size: calc(19px * var(--type-scale));
  font-weight: 700;
  margin: 0 0 4px;
}

.def-desc {
  margin: 0 0 14px;
  font-size: calc(18.5px * var(--type-scale));
  line-height: 1.7;
}

.step-block {
  padding: 22px 0 0;
  margin-top: 22px;
  border-top: var(--rule-gold-dot);
}

.step-block:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Home searches */
.searches-section {
  margin-top: 40px;
}

.searches-band {
  container: searches-band / inline-size;
}

.searches-band + .searches-band {
  margin-top: 40px;
}

.searches-grid {
  display: grid;
  /* auto-fill, not auto-fit: a lone Explore More card (or a leftover on
     the last row) stays one column, matching the IDX cards below.
     auto-fit collapses empty tracks and stretches that leftover full width. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Hug each list. A tall Models card would otherwise stretch
     Open Space / Golf (and any shorter neighbor) to empty white. */
  align-items: start;
  /* A spanning card (below) lets the short cards after it fill the rows
     beside it instead of starting under its bottom edge. With no spanning
     card every item is 1x1 and dense places them exactly as row flow would. */
  grid-auto-flow: row dense;
  gap: 20px;
  margin-top: 4px;
}

/* Two columns only. A tall list (`--row-span`, from searchCardRowSpans)
   spans the rows its short neighbors fill: Schools stacks under Home
   Searches beside Neighborhoods instead of below it. The span is guessed
   from link counts without knowing the column count; at three columns it
   pushed a sixth CF homepage card onto a new row (+131px), and one column
   gains nothing, so the band's own width gates it.
   Rows are `auto 1fr` because all-auto rows split the spanning card's spare
   height evenly, opening ~120px between Home Searches and Schools. A
   spanning item is left out of auto-row sizing when it crosses an fr row,
   so row 1 hugs its 1x1 cards and row 2 (the only fr row, so it sizes like
   auto for 1x1 cards) takes the slack at the bottom. */
@container searches-band (min-width: 580px) and (max-width: 879.98px) {
  .searches-grid:has(> [style*='--row-span']) {
    grid-template-rows: auto 1fr;
  }

  .searches-grid > [style*='--row-span'] {
    grid-row: span var(--row-span);
  }
}

.search-card {
  border: var(--border-card);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}

.search-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gold);
  border-bottom: var(--border-card);
}

.search-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--black);
  overflow: hidden;
}

.search-card__icon-svg {
  display: block;
  shape-rendering: geometricPrecision;
}

.search-card__head h3 {
  /* Titles are authored per site, so the head has to survive a long one:
     min-width lets the flex item shrink below its text width, and
     overflow-wrap catches single words wider than the remaining column. */
  margin: 0;
  min-width: 0;
  font-size: calc(20px * var(--type-scale));
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.search-card ul {
  list-style: none;
  margin: 0;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Long A-Z lists (Saddlebrooke Models). Stay one grid cell wide
   like the other search cards; fill the list down, then across.
   A lone list whose labels are longer than half a cell (neighborhood
   names) spans the row instead - two columns of a normal card wrap
   "Catalina Foothills Estates", and an empty row beside the only card
   is just whitespace. */
.search-card--wide {
  grid-column: 1 / -1;
  container: search-card / inline-size;
}

.search-card--split ul {
  display: block;
  columns: 2;
  column-gap: 28px;
}

.search-card--wide a {
  white-space: nowrap;
}

/* Phone width cannot hold two nowrap columns of a long name. */
@container search-card (max-width: 640px) {
  .search-card--wide ul {
    columns: 1;
  }
}

.search-card--split li {
  break-inside: avoid;
  margin-bottom: 11px;
}

.search-card--split li:last-child {
  margin-bottom: 0;
}

/* Count trails the label as a black disc/pill so the link column stays put.
   nowrap keeps the pill on the first line; the label wraps under itself. */
.search-card__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.5em;
}

.search-card__row > a {
  min-width: 0;
}

.search-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: calc(11px * var(--type-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Sit on the first line of the 17px label. */
  margin-top: 0.2em;
}

.search-card a {
  color: var(--black);
  text-decoration: none;
  font-size: calc(17px * var(--type-scale));
  font-weight: 500;
  border-bottom: 2px solid var(--gold);
}

.search-card a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--black);
}

/* Brochure-page groups: gold caption without the IDX icon badge.
   Default cards keep icon + title-case gold head + underline list. */
.search-card--pages .search-card__head,
.search-card--sister .search-card__head {
  justify-content: center;
  padding: 16px 18px;
}

.search-card--pages .search-card__head h3,
.search-card--sister .search-card__head h3 {
  width: 100%;
  text-align: center;
  font-size: calc(18px * var(--type-scale));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.search-card--pages ul,
.search-card--sister ul {
  padding: 0;
  gap: 0;
}

.search-card--pages li + li,
.search-card--sister li + li {
  border-top: 1px solid var(--line);
}

/* Zip Codes is a page menu in two columns. Same chevron rows as the
   other in-app groups; the columns meet on a rule instead of a gap. */
.search-card--pages.search-card--split ul {
  column-gap: 0;
  column-rule: 1px solid var(--line);
}

.search-card--pages.search-card--split li {
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.search-card--pages.search-card--split li + li {
  border-top: none;
}

.search-card--pages.search-card--split a {
  padding: 13px 10px;
  white-space: nowrap;
}

.search-card--pages.search-card--split a:not(:has(.search-card__leave))::after {
  margin-left: 8px;
}

.search-card--pages a,
.search-card--sister a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 18px;
  font-weight: 700;
  border-bottom: none;
}

.search-card--pages a:hover,
.search-card--sister a:hover {
  background: var(--cream-warm);
  color: var(--black);
  border-bottom-color: transparent;
}

.search-card--pages a:not(:has(.search-card__leave))::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.search-card__leave {
  display: block;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Posts */
.posts-section {
  margin-top: 46px;
  padding-bottom: 28px;
}

.posts-rule {
  border-top: var(--rule-gold);
  margin: 0 0 28px;
}

.posts-list {
  display: flex;
  flex-direction: column;
  margin: 18px 0 0;
  /* Stack on narrow main column (sidebar still visible) - not only viewport ≤860. */
  container-type: inline-size;
  container-name: posts;
}

.post-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 22px;
  padding: 32px 0;
  align-items: start;
}

.post-row[data-rule='mid'] {
  border-top: var(--rule-gold-dot);
}

@container posts (max-width: 720px) {
  .post-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .post-row__poster {
    max-width: 520px;
  }
}

.post-row[hidden],
.post-row[data-load-deferred] {
  display: none !important;
}

.post-row__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--border-card);
  border-radius: var(--radius-plate);
  overflow: hidden;
  padding: 0;
  background: #222;
  border-style: solid;
}

/* Absolute fill - % height inside <button> aspect-ratio boxes collapses to 0. */
.post-row__poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play chrome is the <button> only. Stills share the row, not this dim/hover. */
button.post-row__poster {
  cursor: pointer;
}

button.post-row__poster img {
  filter: brightness(0.82);
  transition: filter 0.2s ease;
}

button.post-row__poster:hover img,
button.post-row__poster:focus-visible img {
  filter: brightness(1);
}

/* Photo posts keep the video row's two-column grid and natural aspect (no
   16/9 crop). These are v1 stills - 323-575px on the long edge - so a
   full-width box upscaled every one of them into mush. `--still-w` is the
   source width, set inline by PostRow, and caps the box once the container
   query stacks the row. */
.post-row__still {
  display: block;
  width: 100%;
  max-width: var(--still-w, 431px);
  margin: 0;
  border: var(--border-card);
  border-radius: var(--radius-plate);
  overflow: hidden;
  background: var(--white);
}

.post-row__still img {
  display: block;
  width: 100%;
  height: auto;
}

.post-row__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.post-row__play svg {
  margin-left: 3px;
  fill: var(--white);
}

.post-row h3 {
  margin: 0 0 8px;
  font-size: calc(22px * var(--type-scale));
  font-weight: 700;
}

/* Title-only rows: sit the heading mid-poster so the right column is not a
   blank slab under a 16/9 still. Rows with a <p> keep the top-aligned stack. */
.post-row:not(:has(p)) {
  align-items: center;
}

.post-row:not(:has(p)) h3 {
  margin-bottom: 0;
}

.post-row p {
  margin: 0;
  font-size: calc(17.5px * var(--type-scale));
  line-height: 1.6;
  color: var(--muted);
}

.posts-foot {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.posts-foot::before,
.posts-foot::after {
  content: '';
  flex: 1 1 0;
  border-top: var(--rule-gold);
}

.posts-more {
  flex: 0 0 auto;
  margin: 0 14px;
  background: var(--white);
  color: var(--black);
  border: var(--border-card);
  border-radius: var(--radius-pill);
  padding: 10px 28px;
  font-size: calc(16px * var(--type-scale));
  font-weight: 700;
  cursor: pointer;
}

.posts-more:hover {
  background: var(--gold);
}

.posts-more[hidden] {
  display: none !important;
}

/* Team */
.team-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1373;
  border: var(--border-card);
  border-radius: var(--radius-plate);
  margin: 0 0 28px;
  background: #e8e2d4;
}

.team-member {
  padding: 28px 0 0;
  margin-top: 28px;
  border-top: var(--rule-gold-dot);
}

.team-member::after {
  content: '';
  display: table;
  clear: both;
}

.team-member:first-of-type {
  margin-top: 32px;
  padding-top: 32px;
  border-top: var(--rule-gold);
}

.team-member__portrait {
  float: right;
  width: 200px;
  margin: 4px 0 16px 28px;
}

.team-member__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .team-member__portrait {
    width: 148px;
    margin: 2px 0 12px 18px;
  }
}

.team-member__role {
  margin: 0 0 12px;
  font-size: calc(18px * var(--type-scale));
  color: var(--muted-2);
}

.team-member__creds {
  margin: 14px 0 0;
  font-size: calc(17.5px * var(--type-scale));
  line-height: 1.6;
}

.team-member__contact {
  display: inline-flex;
  margin-top: 16px;
  background: var(--gold);
  color: var(--black);
  border: var(--border-card);
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 700;
  text-decoration: none;
}

.team-member__contact:hover {
  background: var(--black);
  color: var(--gold);
}

.team-closing {
  margin-top: 32px;
  padding-top: 32px;
  border-top: var(--rule-gold);
}

/* Videos */
.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px !important;
}

.video-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
  font-size: calc(12.5px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Contact page */
.page-form {
  margin: 0 0 8px;
}

.page-form .side-form__helper {
  margin: 0 0 14px;
  font-size: calc(17.5px * var(--type-scale));
  color: var(--muted-2);
}

.page-form .side-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.page-form .side-form__grid .full {
  grid-column: 1 / -1;
}

.page-form label {
  display: block;
  font-size: calc(14.5px * var(--type-scale));
  font-weight: 700;
  margin: 0 0 6px;
}

.page-form input,
.page-form textarea {
  width: 100%;
  border: var(--border-card);
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  background: var(--white);
}

.page-form .side-form__submit {
  min-height: 46px;
  padding: 10px 28px;
  border: var(--border-card);
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--black);
  font-size: calc(16px * var(--type-scale));
  font-weight: 700;
  cursor: pointer;
}

.page-form .side-form__submit:hover {
  background: var(--black);
  color: var(--gold);
}

.page-form .side-form__messages {
  margin: 12px 0 0;
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 600;
  text-align: left;
}

.page-form .side-form__messages.is-error {
  color: #c53030;
}

.page-form .side-form__messages.is-ok {
  color: #1f6b3a;
}

.contact-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 8px;
}

.contact-person {
  padding-top: 8px;
}

.contact-person__role {
  margin: 0 0 12px;
  font-size: calc(17.5px * var(--type-scale));
  color: var(--muted-2);
}

.contact-person__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(18px * var(--type-scale));
  line-height: 1.7;
}

.contact-person__list a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.contact-person__list a:hover {
  color: var(--gold-deep);
}

/* Sitemap / privacy - spacing only; gold rules live on .section-block above. */
.sitemap-group {
  border-top: none;
  margin-top: 16px;
  padding-top: 0;
}

.section-block.sitemap-group:first-of-type {
  margin-top: 0;
}

.sitemap-group .section-h2 {
  font-size: calc(18.5px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0 0 4px;
}

.sitemap-group .gold-bullets {
  margin: 0;
  padding-left: 1.35em;
}

.sitemap-group .gold-bullets li {
  margin: 0 0 4px;
}

.sitemap-group:not(:has(.section-h2)) .gold-bullets {
  padding-left: 0;
  list-style: none;
}

.sitemap-group:not(:has(.section-h2)) .gold-bullets li::marker {
  content: none;
}

/* Reviews page */
.reviews-page {
  margin-top: 10px;
}

.reviews-sources {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--white);
  border: var(--border-card);
  border-radius: var(--radius-card);
  /* Chip layout follows the card width, not the viewport - main column
     can be narrow while the sidebar is still visible. */
  container-type: inline-size;
  container-name: reviews-sources;
}

.reviews-sources__lead {
  margin: 0 0 8px;
  font-size: calc(16.5px * var(--type-scale));
  line-height: 1.5;
  color: var(--black);
}

.reviews-sources__list {
  margin: 0;
}

.reviews-sources__list > li {
  display: flex;
}

.reviews-sources__hint {
  margin: 0 0 10px;
  min-height: 1.4em;
  font-size: calc(14px * var(--type-scale));
  line-height: 1.4;
  color: var(--muted-2);
}

.reviews-sources__hint:empty {
  visibility: hidden;
}

.reviews-sources__mark {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.reviews-sources__count {
  color: var(--muted-2);
  font-weight: 600;
}

/* Hug the label instead of stretching to a 2-up grid. Stretching made
   five sources look like a keypad - especially the leftover Facebook pill. */
@container reviews-sources (max-width: 640px) {
  .reviews-sources__list {
    gap: 6px;
  }

  .reviews-sources__list > li {
    flex: 0 1 auto;
    min-width: 0;
  }

  .reviews-sources__list .chip {
    min-height: 34px;
    padding: 4px 10px;
    font-size: calc(13px * var(--type-scale));
    gap: 5px;
  }

  .reviews-sources__list .chip > span:not(.reviews-sources__count) {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .reviews-sources__mark {
    width: 14px;
    height: 14px;
  }

  .reviews-sources__count {
    font-size: calc(12px * var(--type-scale));
  }
}

.reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--rule-gold);
  border-bottom: var(--rule-gold);
}

.review-card {
  padding: 22px 0 24px;
}

/* Dotted only between *visible* cards. `+` still matches hidden
   siblings, so filter/load-more would double the list bookend. */
.review-card[data-rule='mid'] {
  border-top: var(--rule-gold-dot);
}

.review-card[hidden],
.review-card[data-load-deferred],
.review-card[data-source-hidden] {
  display: none !important;
}

.reviews-more {
  display: block;
  margin: 18px auto 0;
  background: var(--white);
  color: var(--black);
  border: var(--border-card);
  border-radius: var(--radius-pill);
  padding: 10px 28px;
  font-size: calc(16px * var(--type-scale));
  font-weight: 700;
  cursor: pointer;
}

.reviews-more:hover {
  background: var(--gold);
}

.reviews-more[hidden] {
  display: none !important;
}

.review-card__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.review-stars {
  --stars-fill: 100%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  font-size: calc(22px * var(--type-scale));
  line-height: 1;
  letter-spacing: 0.12em;
  width: 7.2em;
  height: 1em;
}

.review-stars::before,
.review-stars::after {
  position: absolute;
  inset: 0;
  content: '★★★★★';
  white-space: nowrap;
  overflow: hidden;
}

.review-stars::before {
  color: #d8d0c0;
}

.review-stars::after {
  width: var(--stars-fill);
  color: var(--star, var(--gold));
  -webkit-text-stroke: 1px var(--black);
  z-index: 1;
}

.review-card__meta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  white-space: nowrap;
}

.review-card__logos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.review-card__logo-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.review-card__logo-link:hover,
.review-card__logo-link:focus-visible {
  text-decoration: none;
}

.review-card__logo {
  display: block;
  height: 18px;
  width: auto;
  object-fit: contain;
}

.review-card__logo--mark {
  width: 18px;
  height: 18px;
}

.review-card__logo--realtor:not(.review-card__logo--mark) {
  /* Tight 7.4:1 wordmark - full 18px reads louder than Google / Zillow. */
  height: 14px;
}

.review-card__sep {
  color: var(--muted-3);
  font-size: calc(13px * var(--type-scale));
  line-height: 1;
}

.review-card__date {
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 600;
  color: var(--muted-2);
}

.review-card__hidden {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: #a30;
  color: #fff;
  font-size: calc(11px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.review-card__quote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: calc(18px * var(--type-scale));
  line-height: 1.7;
  color: var(--black);
  text-wrap: pretty;
}

/* Star-only rows (Google, Facebook) have no written comment. The placeholder
   is display-only - the stored comment stays empty. */
.review-card__quote--empty {
  color: #a39b8c;
  font-size: calc(16px * var(--type-scale));
}

.review-card__foot {
  margin: 0;
}

.review-card__author {
  margin: 0;
  padding-inline-start: 3.5em;
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 500;
  color: var(--muted-3);
}

/* Community image pages - native slideshow per group. Do not bring bxSlider. */
.photo-show {
  margin-top: 8px;
}

.photo-show__stage {
  position: relative;
}

.photo-show__viewport {
  position: relative;
  aspect-ratio: 3 / 2;
  border: var(--border-card);
  border-radius: var(--radius-plate);
  overflow: hidden;
  background: #1a1814;
}

.photo-show__viewport:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.photo-show__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.photo-show__slide.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.photo-show__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-show__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  cursor: pointer;
  transform: translateY(-50%);
}

.photo-show__nav:hover,
.photo-show__nav:focus-visible {
  background: var(--gold);
  color: var(--black);
  border-color: var(--black);
}

.photo-show__nav--prev {
  left: 14px;
}

.photo-show__nav--next {
  right: 14px;
}

.photo-show__nav span {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.photo-show__nav--prev span {
  margin-left: 4px;
  transform: rotate(135deg);
}

.photo-show__nav--next span {
  margin-right: 4px;
  transform: rotate(-45deg);
}

.photo-show__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 14px;
}

.photo-show__status {
  margin: 0;
  font-size: calc(15.5px * var(--type-scale));
  font-weight: 600;
  color: var(--muted-2);
}

.photo-show__play {
  flex: 0 0 auto;
  background: var(--white);
  color: var(--black);
  border: var(--border-card);
  border-radius: var(--radius-pill);
  padding: 8px 22px;
  font-size: calc(15px * var(--type-scale));
  font-weight: 700;
  cursor: pointer;
}

.photo-show__play:hover,
.photo-show__play[aria-pressed='true'] {
  background: var(--gold);
}

.photo-show__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scroll-snap-type: x proximity;
}

.photo-show__thumb {
  flex: 0 0 132px;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: var(--border-card);
  border-radius: var(--radius-plate);
  overflow: hidden;
  background: #e8e2d4;
  cursor: pointer;
  scroll-snap-align: start;
}

.photo-show__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-show__thumb.is-current {
  box-shadow: 0 0 0 3px var(--gold);
}

.photo-show__thumb:hover,
.photo-show__thumb:focus-visible {
  box-shadow: 0 0 0 3px var(--black);
}

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

  .photo-show__play {
    display: none;
  }
}

@media (max-width: 860px) {
  .page-h1 {
    font-size: calc(34px * var(--type-scale));
  }

  .deck {
    font-size: calc(17px * var(--type-scale));
  }

  /* Desktop chips are 44px / 17px for jump links beside a wide column.
     On phone they wrap into a keypad - hug the label like reviews-sources. */
  .chip-row {
    gap: 8px;
    margin-bottom: 20px;
  }

  .chip {
    min-height: 36px;
    padding: 5px 12px;
    font-size: calc(14px * var(--type-scale));
    gap: 5px;
  }

  .post-row {
    padding: 22px 0;
    gap: 12px;
  }

  .post-row h3 {
    font-size: calc(18px * var(--type-scale));
  }

  .review-stars {
    font-size: calc(18px * var(--type-scale));
  }

  .review-card__date {
    font-size: calc(14px * var(--type-scale));
  }

  .photo-show__nav {
    width: 40px;
    height: 40px;
  }

  .photo-show__nav--prev {
    left: 8px;
  }

  .photo-show__nav--next {
    right: 8px;
  }

  .photo-show__thumb {
    flex-basis: 104px;
  }

  .page-form .side-form__grid,
  .contact-people {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .page-h1 {
    font-size: calc(28px * var(--type-scale));
  }

  .chip-row {
    gap: 6px;
    margin-bottom: 16px;
  }

  .chip {
    min-height: 32px;
    padding: 4px 10px;
    font-size: calc(13px * var(--type-scale));
  }
}