/*
 * Janelle Mertins theme: layout and components of the approved design. Noir and Plum colors
 * and type come from theme.css, loaded after this file, as custom properties on :root. Regions with
 * class `dark` (header, hero, proof band, market, footer, contact bands) switch to the dark tokens.
 * Fonts are self-hosted beside this stylesheet (SIL OFL, FONTS-OFL.txt).
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./font-cormorant-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./font-cormorant-500i.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./font-cormorant-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./font-manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./font-manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./font-manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The header's height (utility bar plus the main row): pages that open with a photograph slide under it. */
  --hdr-h: 6.75rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --radius-lg: calc(var(--radius) * 2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h, 0px) + var(--hdr-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.7 var(--font-body);
  /* Cormorant's default figures are old-style (its "1" reads as a roman "I"): every display line inherits lining figures. */
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--hair);
  color: #111111;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

[hidden] {
  display: none !important;
}

/* Labels that look like headings but are not (Seobility counted card names as many repeated headings):
   the hero slogan, card, tile and "Moving from" names. Their own rules below set size and margin. */
h1,
h2,
h3,
.hero-title,
.card-title,
.mosaic-name,
.city-name,
.origin-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
}

h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

h3 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--dark-bg);
  color: #ffffff;
  font-weight: 700;
}

.skip:focus {
  top: 0.5rem;
  outline: 2px solid var(--focus);
}

.wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.wrap.narrow {
  max-width: 52rem;
}

/*
 * A reading-width block on a page whose other sections use the full width: it keeps the page's
 * left edge, where a centered narrow column broke the line every other heading starts on (owner,
 * 2026-10-01 and 2026-10-03: story and military blocks sat centered between left-aligned bands).
 * Articles use it too, since their related-guide cards and closing bands span the full width.
 * Only a page whose whole stack is one reading column (privacy) centers, with .narrow; the 404
 * page ends in the full-width contact band, so its head keeps the left edge too.
 */

.wrap.measure > * {
  max-width: 46rem;
}

.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Form feedback shares the site palette; messages identify their state in text. */

.form-notice {
  font: 400 0.9375rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  background: var(--soft);
  color: var(--ink);
  border-left: 4px solid var(--hair);
  border-radius: 4px;
  padding: 0.625rem 0.875rem;
  margin: 1rem 0;
  max-width: 60rem;
}

.form-notice a {
  color: var(--focus);
}

.form-notice :focus-visible {
  outline-color: var(--focus);
}

.form-notice {
  margin: 0 0 1.25rem;
}

.form-notice-text {
  margin: 0;
  font-weight: 700;
}

.form-notice dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0 0;
}

.form-notice dt {
  font-weight: 600;
}

.form-notice dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Dark regions: the direction's dark tokens stand in for the light ones. */

.dark {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --soft: var(--dark-surface);
  --ink: var(--dark-ink);
  --muted: var(--dark-muted);
  --link: var(--dark-link);
  --accent: var(--dark-accent);
  --on-accent: var(--dark-on-accent);
  --line: var(--dark-line);
  --field: var(--dark-field);
  --focus: var(--dark-focus);
  --hair: var(--dark-hair);
  background: var(--bg);
  color: var(--ink);
}

/*
 * Compass brand rule (Janelle, 2026-09-30: "main logo needs to be either black or white"): her
 * wordmark, its monogram, and the hairline beside the brokerage's mark are pure black on light
 * grounds and pure white on dark ones, whatever color the file or the direction's accent carries.
 */

:is(.brand-logo, .lockup-logo, .lockup-brokerage, .brand-brokerage, .proof-brokerage-logo) {
  filter: brightness(0);
}

.dark :is(.brand-logo, .lockup-logo, .lockup-brokerage, .brand-brokerage, .proof-brokerage-logo) {
  filter: brightness(0) invert(1);
}

.dark :is(.brand-rule, .lockup-rule) {
  background: #ffffff;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Small uppercase lines with a hairline: eyebrows, labels, kickers. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--link);
  font: 600 0.75rem/1.5 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--hair);
}

.pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--hair);
  color: var(--ink);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

.phone-label {
  margin-right: 0.375rem;
  color: var(--link);
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stars {
  display: inline-flex;
  gap: 0.1875rem;
  color: var(--link);
}

.star {
  width: 0.9375rem;
  height: 0.9375rem;
}

.live-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--link);
}

@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: live-pulse 2.2s ease-out infinite;
  }
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 55%, transparent);
  }

  70% {
    box-shadow: 0 0 0 0.5rem transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Header: utility bar with both numbers, logo lockup, navigation, saved homes, call. */

.site-header {
  position: relative;
  z-index: 45;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.js .site-header {
  position: sticky;
  top: var(--bar-h, 0px);
}

.site-header-overlay {
  margin-bottom: calc(-1 * var(--hdr-h));
}

.js .site-header-overlay:not(.is-scrolled):not(:has(.site-nav[data-open])) {
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
  border-bottom-color: rgb(255 255 255 / 0.14);
}

.site-header.is-scrolled {
  border-bottom-color: var(--hair);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.28);
}

.utility {
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
}

.js .site-header-overlay:not(.is-scrolled) .utility {
  border-bottom-color: rgb(255 255 255 / 0.12);
}

.utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  min-height: 2.25rem;
}

.utility-place {
  margin: 0;
  color: var(--muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.utility-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utility-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.utility-contact a:hover {
  color: var(--link);
  text-decoration: underline;
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  min-height: 4.5rem;
}

/*
 * The logos keep their own proportions: the brand never shrinks (the navigation wraps instead), and
 * the global `img { max-width: 100% }` does not apply here, since in a squeezed flex row it capped
 * the width while the height stayed fixed and the logo came out compressed.
 */

.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1rem;
  margin-right: auto;
}

.brand-home {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-logo {
  width: auto;
  max-width: none;
  height: 2.75rem;
}

.brand-rule {
  width: 1px;
  height: 1.75rem;
  background: #111111;
}

.brand-brokerage {
  flex-shrink: 0;
  width: auto;
  max-width: none;
  height: 0.8125rem;
}

.site-nav {
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.5rem;
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-list a[aria-current="page"] {
  color: var(--link);
}

.menu-contact {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hdr-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s;
}

.hdr-call:hover {
  background: transparent;
  color: var(--ink);
}

.hdr-call-short {
  display: none;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink);
  font: 700 0.75rem/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-bars {
  width: 1.125rem;
  height: 1px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.menu-btn[aria-expanded="true"] .menu-bars {
  box-shadow: none;
}

@media (min-width: 64rem) {
  .header-row {
    flex-wrap: nowrap;
    min-height: 4.5rem;
  }

  .site-nav {
    flex: 1;
  }

  /* Seven items (New Construction joined on 2026-09-30) stay on one line. */

  .nav-list {
    flex-wrap: nowrap;
  }

  .nav-list a {
    padding-inline: 0.625rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .nav-list a::after {
    left: 0.625rem;
    right: 0.625rem;
  }

  .menu-btn {
    display: none;
  }
}

/*
 * Under 90rem the header's Call button says "Call" (both numbers sit in the bar above it), so the
 * logos, the Compass mark, and seven menu items fit one row without the page scrolling sideways.
 */

@media (min-width: 64rem) and (max-width: 89.99rem) {
  .hdr-call-long {
    display: none;
  }

  .hdr-call-short {
    display: inline;
  }

  .hdr-call {
    padding-inline: 0.875rem;
  }
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  /* The Compass mark sits under her logo, as on tablets, so seven menu items still fit one row. */

  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3125rem;
  }

  .brand-rule {
    display: none;
  }

  .brand-brokerage {
    height: 0.5625rem;
  }

  .nav-list a {
    padding-inline: 0.4375rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  .nav-list a::after {
    left: 0.4375rem;
    right: 0.4375rem;
  }
}

@media (max-width: 63.99rem) {
  :root {
    --hdr-h: 6.25rem;
  }

  .header-row {
    min-height: 4rem;
  }

  .brand-logo {
    height: 2.25rem;
  }

  /* The Compass mark stays at every width: under the logo here, where a row has no room for it. */

  .brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3125rem;
  }

  .brand-rule {
    display: none;
  }

  .brand-brokerage {
    height: 0.5625rem;
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .js .site-nav:not([data-open]) {
    display: none;
  }

  .js .site-nav[data-open] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100svh - var(--hdr-h) - var(--bar-h, 0px));
    overflow-y: auto;
    padding: 0.5rem clamp(1rem, 4vw, 3rem) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.35);
  }

  .js .nav-list {
    flex-direction: column;
  }

  .js .nav-list a {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-transform: none;
  }

  .js .nav-list a::after {
    display: none;
  }

  .js .site-nav[data-open] .menu-contact {
    display: grid;
    gap: 0.25rem;
    margin-top: 1.25rem;
  }

  .menu-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ink);
    font-size: 1.0625rem;
    text-decoration: none;
  }

  .hdr-call-long {
    display: none;
  }

  .hdr-call-short {
    display: inline;
  }

  .hdr-call {
    padding-inline: 0.875rem;
  }
}

@media (max-width: 47.99rem) {
  .utility-place,
  .utility-email {
    display: none;
  }

  .utility-row,
  .utility-contact {
    justify-content: center;
    gap: 0 0.75rem;
  }

  .utility-contact a {
    letter-spacing: 0;
  }

  .utility .phone-label {
    margin-right: 0.25rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 29.99rem) {
  .brand-logo {
    height: 1.875rem;
  }

  .header-row {
    gap: 0 0.375rem;
  }

  .header-tools {
    gap: 0.25rem;
  }

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

  .menu-btn {
    width: 2.75rem;
    justify-content: center;
    padding: 0;
  }
}

/* Footer */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  font-size: 0.9375rem;
}

.footer-mark {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

.footer-top {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
}

.footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 64rem) {
  .footer-top {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}

.lockup {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.lockup-rule {
  flex: none;
  width: 1px;
  height: 2rem;
  background: #111111;
}

.lockup-logo {
  width: auto;
  height: 3.5rem;
}

.lockup-brokerage {
  width: auto;
  height: 1rem;
}

.footer-tag {
  margin: 1.5rem 0 1rem;
  color: var(--muted);
}

.footer-phones,
.contact-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.footer-phones a,
.contact-phones a {
  display: inline-flex;
  align-items: baseline;
  min-height: 2.75rem;
  padding-top: 0.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-variant-numeric: lining-nums;
  text-decoration: none;
}

.footer-phones a:hover,
.contact-phones a:hover {
  color: var(--link);
}

.footer-email {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ink);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--link);
}

.footer-social .i {
  width: 1.125rem;
  height: 1.125rem;
}

.footer-h {
  margin: 0 0 1rem;
  color: var(--link);
  font: 600 0.6875rem/1.4 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--ink);
  text-decoration: none;
}

.footer-list a:hover {
  color: var(--link);
  text-decoration: underline;
}

.footer-address {
  color: var(--muted);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem 2rem;
  /* The rule spans the content (between the wrap's paddings), like the columns above it. */
  background: linear-gradient(var(--line), var(--line)) top / calc(100% - 2 * clamp(1rem, 4vw, 3rem)) 1px no-repeat;
  color: var(--muted);
  font-size: 0.8125rem;
}

.footer-legal p {
  margin: 0;
}

/* Her brokerage notice, as on every page of her live site: full width, small, and readable. */

.footer-legal .footer-notice {
  flex: 1 1 100%;
  max-width: 72rem;
  font-size: 0.75rem;
  line-height: 1.65;
}

/* "Built by Automation Integrations" (test sites only, inc/layout.php builtByCredit): a full-width line after the notice. */

.footer-legal .footer-credit {
  flex: 1 1 100%;
  font-size: 0.75rem;
}

.footer-legal .footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-brand .footer-address {
  margin: 0 0 0.25rem;
}

.legal-marks {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.eho {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
}

.eho-mark {
  width: 2rem;
  height: 2rem;
}

.realtor-mark {
  width: auto;
  height: 1.75rem;
  border-radius: 2px;
}

/* The phone contact bar */

.contact-bar {
  display: none;
}

@media (max-width: 47.99rem) {
  /* Focus and anchor scrolling stop above the fixed contact bar (WCAG 2.4.11 Focus Not Obscured). */

  html {
    scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
  }

  .contact-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--hair);
  }

  .contact-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.5rem;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  .contact-bar .cb-call {
    flex-direction: row;
    gap: 0.375rem;
    letter-spacing: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .contact-bar a + a {
    border-left: 1px solid var(--line);
  }

  /* While someone types, the bar steps aside (it would sit on the field and above the keyboard). */

  body:has(:is(input:not([type="radio"], [type="checkbox"]), textarea, select):focus) .contact-bar {
    display: none;
  }
}

/* Buttons, fields, chips */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font: 700 0.75rem/1.25 var(--font-body);
  letter-spacing: 0.16em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-quiet {
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  background: transparent;
  color: var(--link);
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.icon-btn:hover {
  border-color: var(--ink);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 1rem;
  min-width: 0;
}

label,
legend {
  font-weight: 600;
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--field);
  border-radius: var(--radius-field);
  background: #ffffff;
  color: #1c1c1c;
  font: inherit;
  font-size: max(1rem, 16px);
}

textarea {
  resize: vertical;
}

.field-hint {
  margin: 0.375rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.price-range legend {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--link);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  min-width: 0;
}

legend {
  padding: 0;
  margin-bottom: 0.5rem;
}

.field-row {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  font-weight: 400;
  cursor: pointer;
}

.choices .choice {
  margin-right: 1.25rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips legend {
  width: 100%;
}

/* The rest of a long chip list, one click away (render/homes.ts cityChips). */

.more-chips {
  flex-basis: 100%;
}

.more-chips summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.more-chips[open] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.more-chips[open] summary {
  flex-basis: 100%;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 1.125rem;
  border: 1px solid var(--field);
  border-radius: var(--radius-chip, 999px);
  background: transparent;
  color: var(--ink);
  font: 500 0.875rem/1.3 var(--font-body);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

a.chip:hover,
button.chip:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

button.chip {
  cursor: pointer;
}

.chip-choice {
  position: relative;
  cursor: pointer;
}

.chip-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.chip-choice:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The hidden radio's own ring would be invisible; the chip draws it. */

.chip-choice input:focus-visible {
  outline: none;
}

.chip-choice:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.chip-choice:has(input:checked) span::before {
  content: "\2713\00a0";
}

/* Sections and headings */

/* Owner, 2026-09-30: "way too much white space between sections". Again 2026-10-03: "minimize
   spaces in the site". Two light sections in a row stack both paddings, so at most 6rem sits between them. */

.section {
  padding-block: clamp(2rem, 3.5vw, 3rem);
}

.section-tight {
  padding-block: 1.5rem 2.5rem;
}

.band,
.plan {
  background: var(--soft);
}

.page-head {
  padding-block: clamp(2rem, 4vw, 3rem) 1.25rem;
}

.page-head h1 {
  max-width: 22ch;
}

/* The listing's address above a Showcase listing (its H1, since Showcase prints none). */
.page-head .page-title {
  max-width: none;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.08;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin: 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.section-head h2,
.section-head h3 {
  margin: 0;
}

.section-link,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}

.section-link:hover,
.text-link:hover {
  color: var(--link);
}

.section-link .i {
  transition: transform 0.3s var(--ease);
}

.section-link:hover .i {
  transform: translateX(4px);
}

.sub-h {
  margin: 0 0 0.75rem;
  font: 700 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lede {
  max-width: 40em;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
}

.lede-sm {
  font-size: 1.125rem;
}

.fine {
  color: var(--muted);
  font-size: 0.875rem;
}

.signature {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
}

.crumbs li + li::before {
  content: "/" / "";
  margin: 0 0.625rem;
  color: var(--muted);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ink);
}

.crumbs [aria-current] {
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.checklist {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 2rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.5em;
  width: 0.75rem;
  height: 0.375rem;
  border-left: 1.5px solid var(--link);
  border-bottom: 1.5px solid var(--link);
  transform: rotate(-45deg);
}

.callout {
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--hair);
  background: var(--surface);
}

/* Cards and grids */

.grid {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two wide text cards per row (the custom construction reasons), one on phones. */

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.card:hover {
  border-color: var(--hair);
  box-shadow: 0 24px 48px rgb(17 17 17 / 0.12);
}

.card:has(.stretched:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.stretched:focus-visible {
  outline: none;
}

.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-media {
  position: relative;
  overflow: hidden;
  background: var(--soft);
}

.card-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.card:hover .card-img,
.card:focus-within .card-img {
  transform: scale(1.06);
}

.community-card .card-img {
  aspect-ratio: 16 / 10;
}

.article-card .card-img {
  aspect-ratio: 16 / 9;
}

.card-flag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  max-width: calc(100% - 4.5rem);
  padding: 0.3125rem 0.625rem;
  background: rgb(17 17 17 / 0.8);
  color: var(--dark-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 1.375rem 1.25rem;
}

.card-kicker {
  margin: 0;
  color: var(--link);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.card-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.15;
}

/* A city hub's communities of an area counted inside it (Palmer Ranch in Sarasota). */
.area-group {
  margin-top: 2.5rem;
}

.section-head + .area-group {
  margin-top: 0;
}

.area-group a {
  display: inline-block;
  padding-block: 0.875rem;
}

.card-title a {
  color: var(--ink);
  text-decoration: none;
}

.card:hover .card-title a {
  text-decoration: underline;
  text-decoration-color: var(--hair);
}

.price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: var(--display-weight);
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}

.card-meta,
.card-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.card-facts {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.card-fact {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.card-figure {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--display-weight);
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}

@keyframes heart-pop {
  40% {
    transform: scale(1.25);
  }
}

.text-card,
.review-card {
  padding: 1.75rem;
}

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  color: var(--muted);
}

.ph-icon {
  width: 3rem;
  height: 3rem;
}

/* Home: the cinematic hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr;
  /* Owner, 2026-10-01 and again 2026-10-03 ("it literally takes over again", then "still too large"):
     the hero holds the headline and the search only and is as tall as they are, with a low floor for
     the photo; on a laptop it never passes 62svh or 40rem (640 px), so the record band with the home
     value form shows on the first screen; on a phone it fits one screen with the search in view. */
  min-height: min(20rem, 50svh);
  padding-top: var(--hdr-h);
  /* The search's menus (place suggestions with City, County and Subdivisions, Price, Beds) open below
     the hero, so the hero does not clip and sits above the record band (owner, 2026-10-09: the band
     hid them). The photo is clipped by .hero-media instead. */
  z-index: 1;
}

@media (min-width: 64rem) {
  /* The floor (29rem) is what the header, the two-line headline, the subline and the search need. */
  .hero {
    max-height: max(29rem, min(62svh, 40rem));
  }
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg);
  /* clip, not hidden: a hidden overflow would make it a scroll container and freeze the scroll-driven drift. */
  overflow: clip;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active .hero-img {
    animation: ken-burns 16s ease-out both;
  }

  .hero-slide:nth-child(even) .hero-img {
    transform-origin: 30% 65%;
  }

  .hero-slide:nth-child(odd) .hero-img {
    transform-origin: 70% 40%;
  }

  .is-paused .hero-img,
  .is-paused .hero-progress.is-running {
    animation-play-state: paused;
  }

  .hero-progress.is-running {
    animation: hero-progress 7s linear both;
  }

  /* Scroll-driven depth where the browser supports it (no script): the photo drifts down as the
     hero leaves the screen, so the page reads as layered. Browsers without it keep a still photo. */

  @supports (animation-timeline: view()) {
    /* On the home page the slides drift inside .hero-media, which clips them; place heroes clip themselves. */
    .hero-media > .hero-slide,
    .place-media {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes hero-drift {
  to {
    transform: translateY(18%);
  }
}

@keyframes hero-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* A rotating hero's caption and pause button, above the shade so the caption reads clearly. On
   place heroes they sit top right under the header, clear of the headline and the concierge
   button; on the home page they sit in the hero's foot beside the lockup. */

.hero-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-controls[hidden] {
  display: none;
}

.place-hero .hero-controls {
  position: absolute;
  top: calc(var(--hdr-h) + 1.25rem);
  /* The content's right edge (.wrap: 80rem, centered, with its padding), not the screen's. */
  right: calc(max(0px, (100% - 80rem) / 2) + clamp(1rem, 4vw, 3rem));
  z-index: 1;
}

.hero-caption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--dark-ink);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

@media (max-width: 47.99rem) {
  .hero-caption {
    display: none;
  }
}

/* The hairline along a rotating hero's foot. */

.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2px;
  background: var(--dark-hair);
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes ken-burns {
  from {
    transform: scale(1.02);
  }

  to {
    transform: scale(1.14);
  }
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.2) 26%, rgb(0 0 0 / 0.3) 55%, rgb(0 0 0 / 0.85) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 72%);
}

/* Each figure keeps its caption for assistive technology; the visible one is .hero-caption. */

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

.hero-cap-tag {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--hair);
  background: rgb(0 0 0 / 0.45);
  color: var(--link);
  text-shadow: none;
}

.hero-inner {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding-block: clamp(1rem, 3vh, 1.75rem);
}

@media (min-width: 64rem) {
  .hero-inner {
    padding-block: 1rem;
  }
}

/* Wide enough that the subline takes two lines on a laptop, not three. */
.hero-copy {
  max-width: 64rem;
}

/* The home H1 (the slogan below it is .hero-title); the shadow it had inside the slogan's heading. */
.hero-eyebrow {
  color: var(--ink);
  text-shadow: 0 2px 36px rgb(0 0 0 / 0.35);
}

/* On a phone the market, her name and Compass ran three lines at the eyebrow's tracking: tighter, so it takes two. */
@media (max-width: 47.99rem) {
  .hero-eyebrow {
    letter-spacing: 0.08em;
  }
}

/* One size step down from the 3rem cap (owner, 2026-10-03): two lines at most on a laptop, so the
   headline, the search field, and the Search button fit well inside the hero's cap. */

.hero-title {
  max-width: 17em;
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 36px rgb(0 0 0 / 0.35);
}

.hero-sub {
  max-width: 62rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.5);
}

/* The photo's caption and Pause (her logos are in the header above). The foot sits in the hero's one
   grid cell with the copy, aligned to the top right beside the eyebrow, so it adds no row of its own.
   The foot is not positioned, so the progress hairline spans the hero. */

.hero-inner,
.hero-foot {
  grid-area: 1 / 1;
}

.hero-foot {
  display: flex;
  align-self: start;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-block: clamp(1rem, 3vh, 1.75rem) 0;
  pointer-events: none;
}

.hero-foot .hero-controls {
  pointer-events: auto;
}

@media (min-width: 64rem) {
  .hero-foot {
    padding-block: 1rem 0;
  }
}

/* Owner, 2026-10-03 (third pass, "the hero still looks extremely large", then "still too large"): on
   laptops the search panel is slimmer, and the price chips are gone from the hero (the same three
   ranges are the quick picks under "Find your home"), so the hero is the headline and the search. */

@media (min-width: 64rem) {
  .hero .search-panel {
    padding: 0.75rem;
  }
}

/* The glass blur makes the panel its own layer: above the progress hairline, so its open menus are too. */
.hero .search-panel {
  position: relative;
  z-index: 2;
}

/* Below laptop width there is no room for the caption (owner, 2026-10-03: the hero filled the
   phone): the caption stays with each photo for assistive technology, Pause becomes a 44 px icon
   button whose name is still "Pause" or "Play", and the copy wraps clear of it. */

@media (max-width: 79.99rem) {
  /* Beside the eyebrow there is room for Pause alone; the caption would run into the eyebrow. */
  .hero .hero-caption {
    display: none;
  }
}

@media (max-width: 63.99rem) {
  .hero .hero-copy {
    padding-right: 3.25rem;
  }

  .hero .hero-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    padding: 0;
  }

  .hero .hero-toggle [data-slides-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Pause: two bars; paused: a play triangle. */
  .hero .hero-toggle::before {
    content: "";
    box-sizing: border-box;
    width: 0.625rem;
    height: 0.75rem;
    border-inline: 3px solid currentColor;
  }

  .hero.is-paused .hero-toggle::before {
    width: 0;
    height: 0;
    margin-left: 0.2rem;
    border: 0;
    border-block: 0.4rem solid transparent;
    border-left: 0.65rem solid currentColor;
  }
}

.hero-toggle {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-chip, 999px);
  background: rgb(0 0 0 / 0.35);
  color: #ffffff;
  font: 700 0.6875rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* The concierge search on the hero */

.glass {
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(14 14 14 / 0.62);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: rgb(14 14 14 / 0.9);
  }
}

.search-panel {
  max-width: 68rem;
  padding: clamp(0.875rem, 2vw, 1.25rem);
  border-radius: var(--radius-lg);
}

/* Proof band. Owner, 2026-10-03 ("these 2 boxes just essentially take over the screen"): the record
   reads as one slim band, figures at a heading size rather than a poster size, and on the home page
   the home value form shares its row instead of a second band. */

.proof {
  position: relative;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-block: 1px solid var(--hair);
}

.proof::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(16rem, 50%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--link), transparent);
  transform: translateX(-50%);
}

/* As many columns as stats (three or four), centered; on phones two to a row, a last odd one centered. */
.proof-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.proof-list li {
  display: flex;
  flex: 0 1 calc(50% - 0.75rem);
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.proof-num {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);
  font-weight: var(--display-weight);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.proof .stars {
  margin-top: 0.375rem;
}

.proof-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (min-width: 56rem) {
  .proof-list {
    flex-wrap: nowrap;
  }

  .proof-list li {
    flex: 1 1 0;
  }

  .proof-list li + li {
    border-left: 1px solid var(--line);
  }
}

/* Three stats stay on one row on a phone too (a fourth, as on the sold page, still wraps two to a row). */
.proof-list:not(:has(> :nth-child(4))) {
  flex-wrap: nowrap;
}

.proof-list:not(:has(> :nth-child(4))) li {
  flex: 1 1 0;
}

/* Home: the stats and the home value form in one row from laptop width, stacked below it. */
.proof-aside {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.proof-aside .hv-lane {
  max-width: 34rem;
  margin: 0 auto;
}

@media (min-width: 64rem) {
  .proof-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .proof-aside {
    margin: 0;
    padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .proof-aside .hv-lane {
    max-width: none;
  }

  .proof-aside .hv-row {
    flex-wrap: nowrap;
  }
}

.proof-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.proof-foot p {
  margin: 0;
}

.proof-brokerage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.proof-brokerage-logo {
  width: auto;
  height: 0.875rem;
}

/* Price tiles (the search module) */

.tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 2rem 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.tile:hover {
  border-color: var(--hair);
}

.tile-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--display-weight);
  line-height: 1.05;
}

.tile-count {
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tile-text {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Find your home: one line of message under the heading, the lifestyles beside their label. */

.find-home .section-head {
  margin-bottom: 0.75rem;
}

.find-lede {
  max-width: 44rem;
  margin: 0 0 1.75rem;
}

/* "Find your home" (owner, 2026-10-03): the finder's own filters as a compact form, three selects
   side by side on a laptop, stacked on a phone, the price ranges as quick picks under it. It is a
   plain GET into the finder, so it works without the script. */

.finder {
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.finder-fields {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.finder-field select {
  min-height: 2.75rem;
  padding-block: 0.375rem;
}

.finder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.finder-picks {
  margin-top: 1.25rem;
}

.finder-picks .sub-h {
  margin-bottom: 0.5rem;
}

/* Military families (owner, 2026-10-03: the narrow card was neither centered nor long enough): a
   full-width band at the wrap's measure, copy beside the two actions on a laptop, one centered
   column on a phone. */

.military-grid {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
}

.military-copy > * {
  max-width: 46rem;
}

.military-copy h2 {
  margin: 0 0 0.75rem;
}

.military-text {
  margin: 0;
  font-size: 1.0625rem;
}

.military-actions {
  margin: 0;
  justify-content: center;
}

@media (min-width: 64rem) {
  .military-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
    justify-items: stretch;
    text-align: left;
  }

  .military-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 16rem;
  }

  .military-actions .btn {
    width: 100%;
  }
}

.find-lifestyles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.find-lifestyles .sub-h {
  margin: 0;
}

.find-lifestyles .chip-row {
  margin: 0;
}

/* "Or start with a place" under the price ranges and lifestyles in "Find your home". */

.find-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}

.find-place .sub-h {
  margin: 0;
}

.find-place-row {
  display: flex;
  flex: 1 1 20rem;
  gap: 0.5rem;
  max-width: 32rem;
}

.find-place-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.find-place-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.tile-go {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--link);
}

.tile:hover .tile-go .i {
  transform: translateX(6px);
}

.tile-go .i {
  transition: transform 0.3s var(--ease);
}

/* Next steps (the home page's closing band, the not-found page) */

.next-steps {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.next-steps a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.next-steps a:hover {
  color: var(--link);
}

.next-steps a::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 1rem;
  border-right: 1.5px solid var(--link);
  border-bottom: 1.5px solid var(--link);
  transform: rotate(-45deg);
}

/* Signature communities: the mosaic */

.mosaic {
  display: grid;
  grid-auto-rows: 22rem;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(15rem, 22vw, 19rem);
  }

  .mosaic > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .mosaic > :nth-child(4):last-child,
  .mosaic:has(> :nth-child(3):last-child) > :not(:first-child) {
    grid-column: span 2;
  }

  .mosaic:has(> :nth-child(2):last-child) > :last-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .mosaic > :only-child {
    grid-column: 1 / -1;
  }
}

.mosaic-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.mosaic-img,
.city-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.mosaic-tile::before,
.city-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.82) 100%);
  pointer-events: none;
}

.mosaic-tile:hover .mosaic-img,
.mosaic-tile:focus-within .mosaic-img,
.city-tile:hover .city-img,
.city-tile:focus-within .city-img {
  transform: scale(1.07);
}

.mosaic-tile:has(.stretched:focus-visible),
.city-tile:has(.stretched:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.mosaic-body,
.city-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.mosaic-badge {
  align-self: flex-start;
  margin: 0;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--hair);
  background: rgb(0 0 0 / 0.45);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mosaic-name,
.city-name {
  margin: 0;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  line-height: 1.05;
}

.mosaic-tile:first-child .mosaic-name {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
}

/* The smaller tiles keep a long name ("Monterey at Lakewood Ranch") and its lines inside the dark
   foot of the picture: a smaller name, two tags, and a deeper shade (Janelle's review, 2026-09-30). */

.mosaic-tile:not(:first-child) .mosaic-name {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
}

.mosaic-tile:not(:first-child) .mosaic-meta {
  font-size: 0.8125rem;
}

.mosaic-tile:not(:first-child) .mosaic-tags li:nth-child(n + 3) {
  display: none;
}

.mosaic-tile:not(:first-child)::before {
  background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 10%, rgb(0 0 0 / 0.88) 100%);
}

.mosaic-name a,
.city-name a {
  color: var(--ink);
  text-decoration: none;
}

.mosaic-meta {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
}

.mosaic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--link);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Market intelligence; .glow gives any dark section the same plum light (the color breaks between light sections). */

.market,
.glow {
  background:
    radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--hair) 20%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgb(255 255 255 / 0.04), transparent 50%),
    var(--bg);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip, 999px);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.market-tabs .tablist {
  margin-bottom: 2rem;
}

.chart {
  margin: 0;
}

.bars {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.375rem 1rem;
}

.bar-name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.bar-name:hover {
  color: var(--link);
  text-decoration: underline;
}

.bar-value {
  color: var(--link);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.bar-svg {
  grid-column: 1 / -1;
  width: 100%;
  height: 0.5rem;
  transform-origin: left center;
  transition: transform 1.4s var(--ease);
}

.bar-track {
  fill: rgb(255 255 255 / 0.08);
}

.bar-fill {
  fill: var(--seg-1);
}

.bar:nth-child(2) .bar-svg {
  transition-delay: 0.08s;
}

.bar:nth-child(3) .bar-svg {
  transition-delay: 0.16s;
}

.bar:nth-child(4) .bar-svg {
  transition-delay: 0.24s;
}

.bar:nth-child(5) .bar-svg {
  transition-delay: 0.32s;
}

.bar:nth-child(n + 6) .bar-svg {
  transition-delay: 0.4s;
}

.reveal-on .chart:not(.is-in) .bar-svg {
  transform: scaleX(0);
}

.chart-cap,
.chart-empty,
.market-note {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.market-note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.sales-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 56rem) {
  .sales-grid {
    grid-template-columns: minmax(0, 22rem) 1fr;
    align-items: start;
  }
}

.chart-donut {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.donut {
  position: relative;
  width: 13rem;
  aspect-ratio: 1;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transition: transform 1.4s var(--ease), opacity 1s var(--ease);
}

.reveal-on .chart:not(.is-in) .donut-svg {
  opacity: 0;
  transform: rotate(-120deg) scale(0.85);
}

.donut-ring {
  stroke: rgb(255 255 255 / 0.08);
}

.seg-1 {
  --seg: var(--seg-1);
}

.seg-2 {
  --seg: var(--seg-2);
}

.seg-3 {
  --seg: var(--seg-3);
}

.seg-4 {
  --seg: var(--seg-4);
}

.donut-seg {
  stroke: var(--seg);
}

.donut-total {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.donut-total strong {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--display-weight);
  line-height: 1;
}

.donut-total span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.legend {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: grid;
  grid-template-columns: 0.75rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--seg);
}

.legend-value {
  color: var(--muted);
}

/* In Janelle's words */

.words {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .words {
    grid-template-columns: minmax(0, 26rem) 1fr;
    gap: 5rem;
  }
}

.words-figure,
.contact-portrait,
.page-hero-portrait {
  position: relative;
  margin: 0;
}

.words-figure::before,
.contact-portrait::before,
.page-hero-portrait::before {
  content: "";
  position: absolute;
  /* Keep the offset within .wrap's narrow-screen gutter, without clipping the frame. */
  --frame-offset: clamp(1rem, 4vw, 1.25rem);
  inset: var(--frame-offset) calc(-1 * var(--frame-offset)) calc(-1 * var(--frame-offset)) var(--frame-offset);
  border: 1px solid var(--hair);
  pointer-events: none;
}

/* Her portrait never runs wider than a portrait (tablets stack it full width otherwise), cropped to her face. */
.words-figure {
  width: 100%;
  max-width: 26rem;
}

.words-photo,
.portrait-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius-portrait);
}

.words-quote {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  font-style: italic;
  line-height: 1.3;
}

.words-quote p {
  margin: 0;
}

/* Reviews */

.review-card {
  gap: 1rem;
}

.review-quote {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

.review-quote p {
  margin: 0;
}

.review-quote p::before {
  content: "\201C";
  display: block;
  height: 2.25rem;
  color: var(--hair);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
}

/* Long reviews show five lines until "Read more" (site.js sets the clamp, so no script reads in full). */
.review-quote.is-clamped:not(.is-open) p {
  max-height: calc(2.25rem + 5 * 1.65em);
  overflow: hidden;
}

.review-more {
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 700 0.75rem/1.25 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.review-more:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.review-by {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.review-author {
  font-weight: 700;
}

.review-source {
  color: var(--muted);
  font-size: 0.875rem;
}

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
}

.rating-score {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--display-weight);
  line-height: 1;
}

/* Areas: city tiles */

.city-tiles {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .city-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .city-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.city-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
}

.city-count {
  margin: 0;
  color: var(--link);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Contact band */

.contact-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 22rem) 1fr;
    gap: 5rem;
  }
}

.contact-portrait {
  max-width: 22rem;
}

.contact-copy h2 {
  margin-bottom: 1rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.filters {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filters-title {
  font-size: 1.75rem;
}

.filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filters-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 2rem;
}

.filters-inline .field {
  flex: 0 1 16rem;
}

.filters-inline .chips {
  flex: 1 1 18rem;
}

.filters-inline .filters-actions {
  flex-basis: 100%;
}

/* On phones the name and area fields fill the panel, as the chip rows below them do. */
@media (max-width: 39.99rem) {
  .filters-inline .field {
    flex: 1 1 100%;
  }
}

.results-count {
  margin: 0 0 1.25rem;
  font: 700 0.8125rem/1.4 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.empty {
  padding: 2rem;
  border: 1px dashed var(--field);
  border-radius: var(--radius);
}

.empty h2 {
  font-size: 1.75rem;
}

.more {
  margin: 2.5rem 0 0;
  text-align: center;
}

/* Place and page heroes: every page but the articles opens with a full-bleed photograph, the same
   height, headline, and subline as the home hero (owner, 2026-10-04: "all the hero shots ... should
   all flow the same"). */

.place-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Owner, 2026-10-03: no hero takes over the screen; the page's content starts on the first screen.
     The home hero's floor; the copy sets the height above it. */
  min-height: min(20rem, 50svh);
  padding-top: var(--hdr-h);
  overflow: hidden;
  /* clip, not hidden: a hidden overflow would make the hero its own scroll container and freeze the scroll-driven drift. */
  overflow: clip;
}

.place-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.place-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .place-img {
    animation: settle 2.6s var(--ease) both;
  }
}

@keyframes settle {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1);
  }
}

.place-inner {
  width: 100%;
  padding-block: clamp(1.25rem, 3vh, 2rem);
}

.place-hero .eyebrow {
  color: var(--ink);
}

.place-title {
  max-width: 17em;
  margin: 0.25rem 0 0.75rem;
  color: var(--ink);
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 36px rgb(0 0 0 / 0.35);
}

.place-sub {
  max-width: 62rem;
  color: var(--ink);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.5);
}

.price-hero {
  color: var(--link);
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
}

.fact-strip {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

/* Centered in the page's column (Janelle, 2026-09-30: "the information below the picture should be
   centered not skewed to the left"): `margin-block` only, so `.wrap` keeps its auto side margins. */

.fact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block: 0;
  padding-block: 1.25rem;
}

.fact-list div {
  flex: 0 1 auto;
  max-width: 18rem;
  padding: 0.75rem 1rem;
  border-left: 1px solid var(--line);
  text-align: center;
}

.fact-list div:first-child {
  border-left: 0;
}

/* The section after a fact strip starts close under it ("a lot space between the information and about the builder"). */

.fact-strip + .section {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

.fact-list dt {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fact-list dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--display-weight);
  line-height: 1.2;
}

.fact-list dd.fact-long {
  padding-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Photo viewer openers are buttons (parts.php viewerLink, property.php propertyPhoto): drawn like the picture they hold. */
.viewer-open {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.photo-open {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  border-radius: var(--radius);
}

.photo-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.photo-grid:not(.photo-grid-even) .photo-cell:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.photo-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.photo-open:hover .photo-img,
.photo-open:focus-visible .photo-img {
  transform: scale(1.05);
}

.viewer-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(17 17 17 / 0.65);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s;
}

.photo-open:hover .viewer-hint,
.photo-open:focus-visible .viewer-hint {
  opacity: 1;
}

.agent-card {
  gap: 1rem;
  padding: 1.75rem;
}

.agent-top {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.agent-photo {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  object-fit: cover;
}

.agent-kicker {
  margin: 0;
  color: var(--link);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.agent-name {
  margin: 0;
  font-size: 1.75rem;
}

.agent-sub {
  margin: 0;
  color: var(--muted);
}

.agent-lines {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.agent-lines a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.agent-lines a:hover {
  color: var(--link);
}

.agent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-actions li:first-child {
  grid-column: 1 / -1;
}

/* Call Janelle across the top, then a two-by-two grid: Text, Email, Ask a question, Schedule a tour. */

.agent-actions .btn {
  width: 100%;
  height: 100%;
  padding-inline: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

/* Page heroes (pageHero() in inc/layout.php): her portrait beside the copy on About and Sell, small
   enough that the hero stays the home hero's height on a laptop and under a screen on a phone. */

.page-hero-split {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .page-hero-split {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
  }
}

.page-hero-portrait {
  width: clamp(7.5rem, 28vw, 14rem);
}

.page-hero-portrait .portrait-img {
  aspect-ratio: 1;
}

/* On a phone the portrait under the buttons made the hero most of a screen (her photo is in the contact band). */
@media (max-width: 39.99rem) {
  .page-hero-portrait {
    display: none;
  }
}

/* The military page's branches, after its hero as the record band follows the home hero. */

.service-strip .eyebrow {
  margin-bottom: 0.875rem;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem 2rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.25;
}

.service-list li {
  padding-left: 0.875rem;
  border-left: 1px solid var(--hair);
}

/* What follows a page hero directly, without a section of its own, keeps a section's top space. */

.contact-split,
.finder-wrap {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.market-split {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60rem) {
  .market-split {
    grid-template-columns: 1fr minmax(19rem, 24rem);
    align-items: start;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin: 0;
}

.stats div {
  padding: 1.25rem 0;
  border-top: 1px solid var(--hair);
}

.stats dt {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stats dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--display-weight);
  line-height: 1.1;
}

/* Tabs, questions, builders */

/* Tabs are buttons that wrap onto more rows (owner, 2026-09-30: the sideways scrolling strip was hard to use): every choice is in view, none hides past the edge. */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.tablist [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.9375rem/1.25 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.tablist [role="tab"]:hover {
  border-color: var(--link);
}

.tablist [role="tab"][aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* Phones: the place guide's many topics as a two-column grid of equal buttons. */

@media (max-width: 39.99rem) {
  .guide-tabs .tablist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-tabs .tablist [role="tab"] {
    padding-inline: 0.875rem;
  }
}

.tab-panel + .tab-panel {
  margin-top: 2.5rem;
}

.is-tabs .tab-panel + .tab-panel {
  margin-top: 0;
}

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

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.875rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.builder-list {
  columns: 2 12rem;
  padding-left: 1.25rem;
}

.seller {
  text-align: left;
}

/* Guides */

.feature-link {
  display: grid;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}

@media (min-width: 48rem) {
  .feature-link {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }
}

.feature-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.feature-link:hover .feature-img {
  transform: scale(1.04);
}

.feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);
  font-weight: var(--display-weight);
  line-height: 1.1;
}

.feature-link:hover .feature-title {
  text-decoration: underline;
  text-decoration-color: var(--hair);
}

.feature-text {
  color: var(--muted);
}

.feature-body .eyebrow {
  margin: 0;
}

.article-figure {
  margin-block: 0 1.5rem;
}

.article-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.ask-box {
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
  padding: 1.75rem;
}

.ask-title {
  margin: 0;
  font-size: 1.75rem;
}

.ask-box .actions {
  margin-top: 0;
}

.timeline {
  margin: 1.5rem 0 0 1.25rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.timeline li {
  position: relative;
  padding: 0 0 2rem 2.5rem;
  border-left: 1px solid var(--hair);
  counter-increment: step;
}

.timeline li:last-child {
  border-left-color: transparent;
}

.timeline li::before {
  content: counter(step) / "";
  position: absolute;
  left: calc(-1.25rem - 0.5px);
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.timeline-title {
  margin-bottom: 0.25rem;
  padding-top: 0.25rem;
  font-size: 1.5rem;
}

.timeline p {
  margin: 0;
}

.numbered {
  counter-reset: n;
}

.numbered li {
  counter-increment: n;
}

.numbered .card-title::before {
  content: counter(n) ". ";
  color: var(--link);
}

/* About, contact, sell, preferences */

.office {
  display: grid;
  gap: 0.25rem;
  font-style: normal;
}

.office p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin: 0;
}

.office a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
}

.split {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: 23rem 1fr;
    align-items: start;
  }
}

.reach {
  padding: 1.75rem;
}

.reach h2,
.split h2 {
  font-size: 1.875rem;
}

.reach-list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

/* Janelle, 2026-09-30: "to much wording in side the box ... you don't have to say Text or call, or
   email": each row is an icon and the number or address; the icons and screen reader text say what it does. */

.reach-list li {
  display: flex;
  gap: 0.5rem;
}

.reach-link,
.reach-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip, 999px);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.reach-link {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.reach-icon {
  flex: none;
  justify-content: center;
  width: 3rem;
  padding: 0;
}

.reach-main {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.reach-link:hover,
.reach-icon:hover {
  border-color: var(--hair);
}

.reach-main:hover {
  border-color: var(--accent);
  filter: brightness(1.1);
}

.reach-tag {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-line {
  margin: 0 0 1rem;
}

.lead-form {
  margin-top: 1rem;
}

.form-actions {
  margin: 1rem 0 0;
}

.consent {
  max-width: 40rem;
}

.step {
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* A form label, so it is set like the other labels: body font, lining figures ("Step 1 of 2"). */
.step-title {
  padding: 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.step-next {
  margin: 0 0 1rem;
}

.table-wrap {
  overflow-x: auto;
}

.notfound .next-steps {
  margin-bottom: 1rem;
}

/* The concierge (a preview), the compare tray and panel, and the photo viewer */

dialog {
  max-width: calc(100vw - 2rem);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

dialog::backdrop {
  background: rgb(8 8 8 / 0.62);
  backdrop-filter: blur(4px);
}

/* Contact Janelle on every page, the one floating control (layout.ts overlays); phones use the contact bar. */

.contact-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 42;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.375rem 1.25rem 0.375rem 0.375rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.75rem/1 var(--font-body);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 16px 44px rgb(0 0 0 / 0.28);
  transition: bottom 0.35s var(--ease), transform 0.35s var(--ease);
}

.contact-fab:hover {
  transform: translateY(-2px);
}

.contact-fab:focus-visible {
  outline-color: var(--focus);
}

.contact-fab-photo {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Focus and anchor scrolling stop above the floating control (WCAG 2.4.11 Focus Not Obscured). */

@media (min-width: 48rem) {
  html {
    scroll-padding-bottom: 5.5rem;
  }
}

/*
 * Short screens (a phone held sideways): the header and the page bar scroll away with the page
 * instead of holding half the screen, so the content stays in view (audit B9).
 */

@media (max-height: 33.99rem) {
  .js .site-header {
    position: relative;
    top: auto;
  }

  html {
    scroll-padding-top: 1rem;
  }
}

@media (max-width: 47.99rem) {
  .contact-fab {
    display: none;
  }
}

.contact-card[open] {
  width: min(24rem, calc(100vw - 2.5rem));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
}

.contact-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
}

.contact-card-head > div {
  flex: 1;
}

.contact-card-photo {
  display: block;
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
}

.contact-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 1.375rem;
  line-height: 1.08;
}

.contact-card-sub {
  margin: 0.25rem 0 0;
  color: var(--dark-muted, inherit);
  font-size: 0.875rem;
}

.contact-card-actions {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 1.5rem;
  list-style: none;
}

.contact-card-actions .btn {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.fold-more {
  margin-top: 1.5rem;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@keyframes typing {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 1;
  }
}

.panel-dialog[open] {
  width: min(66rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  overflow: auto;
  border-radius: var(--radius-lg);
}

.dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.dialog-title {
  margin: 0;
  font-size: 1.875rem;
}

.panel-dialog > .fine {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
}

.lightbox[open] {
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  border: 0;
  background: rgb(8 8 8 / 0.96);
}

.lightbox > .icon-btn {
  margin: 1rem 1rem 0 auto;
}

.lightbox-figure {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 0;
  margin: 0;
  padding: 0 1rem;
}

.lightbox-img {
  max-width: 100%;
  max-height: calc(100svh - 11rem);
  object-fit: contain;
}

.lightbox-cap {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

.lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 1rem 1.5rem;
}

.lightbox-nav .icon-btn {
  margin: 0;
}

.lightbox-status {
  min-width: 7rem;
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Scroll reveal: site.js adds `reveal-on` only with IntersectionObserver and no reduced-motion preference. */

.reveal-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.reveal-on :is(.proof-list, .mosaic, .tiles, .city-tiles) > :nth-child(2) {
  transition-delay: 0.08s;
}

.reveal-on :is(.proof-list, .mosaic, .tiles, .city-tiles) > :nth-child(3) {
  transition-delay: 0.16s;
}

.reveal-on :is(.proof-list, .mosaic, .tiles, .city-tiles) > :nth-child(n + 4) {
  transition-delay: 0.24s;
}

.lockup-app {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.lockup-app .lockup-logo {
  height: 2.75rem;
}

.lockup-app .lockup-brokerage {
  height: 0.875rem;
}

/* Maps (layout.ts mapBlock): a quiet card with the place's name, holding the space until the map loads near the screen. */

.map-block {
  margin: 0;
}

.map-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--soft);
  text-align: center;
}

.map-pin .i {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--link);
}

.map-place {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
}

.map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-block.is-open .map-pin,
.map-block.is-open .map-place {
  visibility: hidden;
}

.map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.75rem 0 0;
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 600;
}

.map-link .i {
  width: 1rem;
  height: 1rem;
}

/* "Living in" area guides (render/areas.ts livingIn): facts, highlights, the map, and places by topic. */

.guide-split {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}

@media (min-width: 60rem) {
  .guide-split {
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
  }

  .guide-split.no-map {
    grid-template-columns: 1fr;
  }

  /* The map grows to the height of the summary and facts beside it, so that column ends level with them. */

  .guide-split {
    align-items: stretch;
  }

  .guide-split > .map-block {
    display: flex;
    flex-direction: column;
  }

  .guide-split > .map-block .map-stage {
    flex: 1;
    min-height: 22rem;
    aspect-ratio: auto;
  }
}

/* Area guide box (parts.ts guideBox): the buttons under the heading, the chosen panel beside the map,
   which stays in view while a long panel scrolls (owner, 2026-09-30: one box that updates). */

.guide-box .tablist {
  margin-bottom: 1.75rem;
}

.guide-body {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.guide-panels {
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.guide-panels .tab-heading {
  margin-top: 0;
}

.guide-panels .guide-facts:first-child {
  margin-top: 0;
}

@media (min-width: 60rem) {
  .guide-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .guide-box.no-map .guide-body {
    grid-template-columns: 1fr;
  }

  .guide-body > .map-block,
  .guide-body > .guide-map {
    position: sticky;
    top: calc(var(--bar-h, 0px) + var(--hdr-h) + 4.5rem);
  }

  .guide-body .map-stage {
    aspect-ratio: 4 / 3;
  }
}

.guide-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0 1.5rem;
  margin: 1.25rem 0;
}

.guide-facts div {
  padding: 0.875rem 0;
  border-top: 1px solid var(--hair);
}

.guide-facts dt {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide-facts dd {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.tab-count {
  display: inline-block;
  flex: none;
  min-width: 1.75rem;
  white-space: nowrap;
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-chip, 999px);
  background: var(--soft);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
}

[aria-selected="true"] > .tab-count {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit;
}

.place-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.place {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.place-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.place-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: var(--display-weight);
  line-height: 1.25;
}

.place-name a {
  color: var(--ink);
}

.place-drive {
  flex: none;
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.place-kind,
.place-about {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.place .map-link {
  margin-top: auto;
}

/* A to Z indexes (builders, sales by year). */

.az-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.az-index a {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.az-index a:hover {
  border-color: var(--hair);
  color: var(--link);
}

.az-letter {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hair);
  font-size: 2rem;
}

.az-sub {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Builder cards with their logos. */

.builder-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.375rem 0;
}

.builder-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 7.5rem;
  height: 3.5rem;
  padding: 0.375rem;
  border: 1px solid var(--line);
  background: #ffffff;
}

.builder-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.builder-logo.on-dark {
  border-color: #111111;
  background: #111111;
}

.builder-logo-lg {
  width: 11rem;
  height: 5rem;
  margin-bottom: 1.25rem;
}

.logo-initials {
  color: #111111;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.builder-where {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.9375rem;
}

.builder-where .i {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  color: var(--link);
}

.builder-county {
  color: var(--muted);
}

/* The New Construction hub's lists and plain row lists. */

.nh-lists {
  display: grid;
  gap: 0.75rem;
}

.nh-list {
  border: 1px solid var(--line);
  background: var(--surface);
}

.nh-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  cursor: pointer;
}

.nh-list > .fine,
.nh-list > .row-list {
  margin: 0 1.25rem 1rem;
}

.row-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.row-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.row-list a:first-child {
  font-weight: 600;
}

.row-sub {
  color: var(--muted);
  font-size: 0.875rem;
}

.row-note {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.875rem;
}

.row-list .map-link {
  margin-left: auto;
  min-height: 2rem;
}

/* Reviews, Past Success, In the News (render/proof.ts). */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-card {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
}

.platform-logo {
  width: 2rem;
  height: 2rem;
}

.platform-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.platform-score {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  color: var(--muted);
}

.platform-score strong {
  color: var(--ink);
}

.review-about {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.review-link {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.card-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-variant-numeric: lining-nums;
}

.card-title-sm {
  margin: 0;
  font-weight: 600;
}

.sale-grid {
  margin-bottom: 1rem;
}

.press-outlet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.press-logo {
  width: 1.25rem;
  height: 1.25rem;
}

.press-card.is-featured {
  border-top: 2px solid var(--hair);
}

.proof-links {
  padding-block: 1.5rem 0;
}

/* Articles: "In this article" and the places a guide covers. */

.toc {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
}

.toc-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
}

/* At least 24 px to tap, with 8 px between links (WCAG target size): a bare line of link text is shorter than 24 px. */
.toc-list a {
  display: inline-block;
  min-height: 1.5rem;
  padding-block: 0.125rem;
}

.article-places {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.article-places .sub-h {
  margin: 0 0.5rem 0 0;
}

/* Builder photos with their credit line (ADR-0073). */

.credited {
  position: relative;
  margin: 0;
  height: 100%;
}

.photo-credit {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.125rem 0.5rem;
  background: rgb(0 0 0 / 0.6);
  color: var(--dark-ink);
  font-size: 0.6875rem;
}

/* A plan's drawing in the plans table: a thumbnail that opens full size, the builder's credit on it. */

.plan-thumb {
  position: relative;
  width: 10rem;
  margin: 0;
}

.plan-open {
  position: relative;
  display: block;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.plan-img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  object-fit: contain;
}

/* New construction (render/newhomes.ts): the hub, builder pages, builder communities, and the home module. */

.narrow-text {
  max-width: 44rem;
}

.title-by {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A status on a builder community card: coming soon and last homes carry the gold hairline. */

.card-flag.status-coming-soon,
.card-flag.status-close-out {
  box-shadow: inset 0 -2px 0 var(--dark-hair);
}

.offer-card {
  border-top: 2px solid var(--hair);
}

.offer-title {
  margin: 0.25rem 0 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.offer-when {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.offer-terms summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--link);
  font-weight: 600;
  cursor: pointer;
}

.offer-terms p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.offer-ask {
  margin: auto 0 0;
  padding-top: 0.5rem;
}

.builder-card .card-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--display-weight);
}

.builder-grid {
  margin-bottom: 2.5rem;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}

.plan-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

.plan-table th,
.plan-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.plan-table thead th {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.plan-table tbody th {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.plan-table td:last-child {
  font-weight: 700;
  white-space: nowrap;
}

.plan-model {
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--hair);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newhomes-split {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.builder-stack {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60rem) {
  .newhomes-split {
    grid-template-columns: 1.2fr 1fr;
  }

  .builder-stack {
    grid-template-columns: 1fr 1fr;
  }
}

/* Builder pages (BuilderPages): builder logos in one fixed box for every builder, the logo scaled
   to fit and centered, so logos line up down the A to Z and never run into the name beside them. */

.builder-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* The category tags sit under the logo and wrap between words, never inside one. */
.builder-card-top .card-kicker {
  min-width: 0;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.builder-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.builder-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

/* The builder page's news and links: press that names the builder, then where the research confirmed its facts. */

.builder-news .row-list + .sub-h {
  margin-top: 1.75rem;
}

.news-summary {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.builder-news .row-list a {
  overflow-wrap: anywhere;
}

/* Latest incentives at a builder community: each offer in full, then the line to Janelle. */

.incentive-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incentive {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface);
}

.incentive-title {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.incentive p {
  margin: 0 0 0.5rem;
}

.incentive-when {
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (min-width: 48rem) {
  .incentive-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Quick move-ins above the plan table, and the visit form's checklist. */

.qmi-line {
  max-width: 70ch;
  margin: 0 0 1rem;
}

.visit-list {
  margin: 0 0 1.25rem;
}

.visit-list summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--link);
  font-weight: 600;
  cursor: pointer;
}

/* A floor plan's page: its numbers beside the drawing and the rendering. */

.plan-split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.plan-figures {
  display: grid;
  gap: 1rem;
}

.plan-figure {
  margin: 0;
}

.plan-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #ffffff;
  object-fit: contain;
}

@media (min-width: 60rem) {
  .plan-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  }
}

.listings-sub {
  margin-top: 2.5rem;
}

.listings-more {
  margin: 1.25rem 0 0;
}

/* The line under a hotsheet, and the whole answer when it has no homes. */
.listings-ask {
  max-width: 46rem;
  margin: 1rem 0 0;
}

/* The search page's note when the search cannot load. */
.search-fallback {
  max-width: 46rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--hair);
  background: var(--soft);
}

.chip-count {
  margin-left: 0.375rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: lining-nums tabular-nums;
}

a.chip:hover .chip-count {
  color: inherit;
}

.signature-communities .find-lifestyles {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* The home value lane (parts.ts homeValueLane): one address field, secondary to the page's first actions. */

.hv-lane {
  max-width: 34rem;
  margin: 1.5rem 0 0;
}

.hv-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hv-row input {
  flex: 1 1 14rem;
  min-width: 0;
}

/* More neighborhoods on a city page: every other community by name, in columns. */

.more-names-h {
  margin-top: 2.5rem;
}

.name-list {
  columns: 16rem auto;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.name-list li {
  padding: 0.25rem 0;
  break-inside: avoid;
}

/* Proof pages (proof.ts, parts.ts reviewCard): stars as the client gave them, the platform's logo, the
   "Show all" fold, Leave a review, and sales by community and by city. */

.stars-off {
  display: inline-flex;
  gap: inherit;
  color: var(--line);
}

.review-source {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.review-logo {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.1875rem;
}

.reviews-more {
  margin-top: 2rem;
}

.reviews-more > summary {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  list-style: none;
}

.reviews-more > summary::-webkit-details-marker {
  display: none;
}

.reviews-more > .review-grid {
  margin-top: 2rem;
}

.reviews-fewer,
.reviews-more[open] .reviews-all {
  display: none;
}

.reviews-more[open] .reviews-fewer {
  display: inline;
}

.leave-review {
  padding: 2rem;
  text-align: center;
}

.leave-review-title {
  margin: 0 0 0.75rem;
}

.leave-review .actions {
  justify-content: center;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.leave-review-btn .review-logo {
  margin-right: -0.125rem;
}

.sales-by {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem 3rem;
}

.sales-by-title {
  margin: 0 0 0.75rem;
  font: 700 0.8125rem/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sales-by-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-by-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.sales-by-count {
  flex: none;
  color: var(--muted);
  font-size: 0.875rem;
}

.sales-by-more {
  margin-top: 0.75rem;
}

.sales-by-more > summary {
  color: var(--link);
  font-size: 0.875rem;
  cursor: pointer;
}

.sales-source {
  margin: 2rem 0 0;
}

/* Areas served: each area, its count, and its communities (parts.ts areasServed). */

.served-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.served-name {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
}

.served-count {
  margin-left: 0.5rem;
  color: var(--muted);
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.served-places {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* The author box at the end of an article, as her live articles close (jseo-author-box). */

.author-box {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}

.author-photo {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

/* Her page's own text in "Living in": the About text, subheadings, and the call to action under each part. */

.about-text {
  margin-top: 1.5rem;
}

.about-text p,
.tab-panel p {
  max-width: 68ch;
}

.detail-h {
  margin: 1.5rem 0 0.5rem;
  font: 600 1.125rem/1.3 var(--font-body);
}

.panel-cta {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  color: var(--muted);
}

.place-addr {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.link-list {
  display: grid;
  gap: 0.625rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.link-list a {
  font-weight: 600;
}

/* Quick menu under a place's hero and the page bar that stays under the header (areas.ts quickMenu). */

.quick {
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}

.quick-grid {
  display: grid;
  gap: 1.75rem;
}

.quick-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
}

.quick-lede {
  max-width: 60ch;
  margin: 0 0 1rem;
}

/* Facts sit in columns, so labels and values line up row after row; a long fact takes a whole row. */

.quick-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.quick-facts > .fact-wide {
  grid-column: 1 / -1;
}

.quick-facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quick-facts dd {
  margin: 0.125rem 0 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
}

.quick-facts dd.fact-long {
  font-family: var(--font-body);
  font-size: 1rem;
}

/* The heading spans both columns; the summary and the facts sit side by side under it. The page bar
   below is the one jump navigation (V10). */

@media (min-width: 64rem) {
  .quick-grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
    column-gap: 3rem;
    row-gap: 0;
  }

  .quick-head {
    grid-column: 1 / -1;
  }

  .quick-title {
    margin-bottom: 1rem;
  }
}

.page-bar {
  position: sticky;
  top: calc(var(--bar-h, 0px) + var(--hdr-h));
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* On short screens the page bar scrolls away with the header (see the short-screen rule above). */

@media (max-height: 33.99rem) {
  .page-bar {
    position: static;
  }
}

.page-bar-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
}

.page-bar-links {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

/* From tablets up the tabs wrap to a second row instead of scrolling: a scrolled row clipped its
   first tab at the left edge on desktop ("ng here", owner 2026-10-11). Phones keep one scrolling row. */

@media (min-width: 48rem) {
  .page-bar-links {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Pill tabs (owner, 2026-10-03: the menus were small and drew no attention): plum on a soft plum
   tint, the section in view filled plum with white text (aria-current from site.js). */

.page-bar-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-chip, 999px);
  background: var(--soft);
  color: var(--link);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.page-bar-links a:hover,
.page-bar-links a:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.page-bar-links a[aria-current="true"] {
  background: var(--link);
  color: #ffffff;
}

.btn-sm {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* Sections a quick link opens land below the header and the page bar. */

[data-tabs],
#homes,
#living,
#new-construction,
#selling,
#communities {
  scroll-margin-top: calc(var(--bar-h, 0px) + var(--hdr-h) + 4rem);
}

@media (max-width: 47.99rem) {
  .page-bar-cta {
    display: none;
  }

  /* Phones (owner, 2026-10-03): one row of full-size tabs that scrolls sideways; site.js scrolls the
     current section's tab into view. */

  .page-bar-links {
    gap: 0.5rem;
    padding: 0.375rem 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .page-bar-links li {
    scroll-snap-align: start;
  }
}

/* Header submenus (layout.ts siteHeader): on hover or keyboard focus from 64rem; nested and always open in the phone menu. */

.sub-menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .has-sub {
    position: relative;
  }

  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    display: grid;
    min-width: 15rem;
    padding: 0.5rem 0;
    background: var(--bg);
    border: 1px solid var(--hair);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
  }

  .has-sub.sub-closed > .sub-menu {
    display: none;
  }

  .sub-menu a {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.375rem 1.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .sub-menu a::after {
    display: none;
  }

  .sub-menu a:hover,
  .sub-menu a:focus-visible {
    background: var(--soft);
  }
}

@media (max-width: 63.99rem) {
  .js .site-nav[data-open] .sub-menu {
    display: grid;
    padding: 0.25rem 0 0.75rem 1rem;
  }

  .js .site-nav[data-open] .sub-menu a {
    min-height: 2.75rem;
    border-bottom: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .chip-choice:has(input:checked),
  .tablist [role="tab"][aria-selected="true"] {
    outline: 2px solid CanvasText;
  }

  .hero-shade,
  .mosaic-tile::before,
  .city-tile::before {
    background: Canvas;
    opacity: 0.6;
  }
}

/* Client portal preview (ADR-0084): /join, /account, and the header's "My Janelle" link, rendered only while REVIEW_CLIENT_PORTAL is "preview". */

.hdr-account {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--ink);
}

.hdr-account .i {
  width: 1.375rem;
  height: 1.375rem;
}

.hdr-account[aria-current="page"] {
  color: var(--link);
}

.menu-account .i {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}

.portal-banner {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hair);
  border-left-width: 4px;
  background: var(--surface);
  font-size: 0.9375rem;
}

.portal-banner-tag {
  margin-right: 0.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portal-nav .chip-row {
  margin-bottom: 0.5rem;
}

.portal-mark {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip, 999px);
  color: var(--muted);
  font: 700 0.6875rem/1.5 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.portal-mark-gem {
  border-color: var(--hair);
  color: var(--ink);
}

.portal-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-chip, 999px);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-lead,
.portal-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.portal-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
}

.portal-address {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}

.portal-sale-head .card-meta {
  margin-bottom: 0.75rem;
}

/* The milestone stepper: a vertical line of dots; done is filled with a check, now is ringed, next is hollow. */

.portal-steps {
  margin: 0.5rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.portal-step {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0 0.875rem;
  padding-bottom: 1.25rem;
}

.portal-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(0.875rem - 1px);
  top: 1.75rem;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.portal-step.is-done:not(:last-child)::before {
  background: var(--accent);
}

.portal-step-dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--field);
  border-radius: 50%;
  background: var(--surface);
  color: var(--on-accent);
}

.portal-step-dot .i {
  width: 1rem;
  height: 1rem;
}

.portal-step.is-done .portal-step-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.portal-step.is-current .portal-step-dot {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--accent);
}

.portal-step-label {
  margin: 0.125rem 0 0;
  font-weight: 600;
}

.portal-step.is-upcoming .portal-step-label {
  color: var(--muted);
  font-weight: 400;
}

.portal-step-state {
  margin-left: 0.375rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.portal-step.is-current .portal-step-state {
  color: var(--link);
}

.portal-step-detail {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.portal-progress {
  margin: 0 0 1.25rem;
}

.portal-progress progress {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: 0.625rem;
  margin: 0.5rem 0 0.25rem;
  accent-color: var(--link);
}

.portal-next {
  margin: 0 0 1rem;
}

.portal-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: 0;
}

.portal-ask a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
}

.portal-ask .i {
  width: 1.125rem;
  height: 1.125rem;
}

.portal-tour {
  padding: 0;
  list-style: none;
}

.portal-stop {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.portal-stop-time {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.portal-stop-card {
  display: grid;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-stop-go {
  margin: 0;
}

.portal-stop-go .i {
  width: 1.125rem;
  height: 1.125rem;
}

.portal-facts {
  display: grid;
  gap: 0.375rem;
  margin: 0.75rem 0 1rem;
}

.portal-facts div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
}

.portal-facts dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.portal-facts dd {
  margin: 0;
}

.portal-edit-row {
  margin: auto 0 0;
  padding-top: 0.5rem;
}

/* Editing is not wired in the preview: the link looks quiet and opens the join form's email choices. */

.portal-edit {
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration-style: dotted;
}

.portal-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
}

.portal-event {
  position: relative;
  padding: 0 0 1.5rem 1.5rem;
}

.portal-event::before {
  content: "";
  position: absolute;
  left: calc(-0.375rem - 1px);
  top: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--hair);
}

.portal-event-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.portal-event-title {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.portal-event-detail {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.portal-fieldset {
  margin: 0.5rem 0 1.25rem;
}

.portal-sub {
  margin: 0 0 1rem 1.875rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.portal-sub legend {
  font-weight: 400;
  color: var(--muted);
}

.portal-next-steps {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding-left: 1.25rem;
}

.portal-consent {
  align-items: flex-start;
}

.portal-consent input {
  margin-top: 0.25rem;
}

@media (max-width: 29.99rem) {
  .portal-sub {
    margin-left: 0;
  }

  .portal-facts div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (forced-colors: active) {
  .portal-pill,
  .portal-step.is-done .portal-step-dot {
    border: 1px solid CanvasText;
  }

  .portal-step.is-current .portal-step-dot {
    outline: 2px solid CanvasText;
  }
}

/* Her Privacy Policy page: headings sized for reading, not as section titles. */

.prose h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.prose ul {
  padding-left: 1.25rem;
}

/*
 * Stored post and page content (articles, the relocation guide, the generic template): WordPress
 * blocks and the forms and tables her posts were written with, in the design's type and palette.
 * Wide tables scroll inside their figure, so a 390 px phone never scrolls the page sideways.
 * Showcase's listing pages (generic template, no .page-content) keep their own styles.
 */

:is(.article-content, .page-content) h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.375rem;
}

:is(.article-content, .page-content) figure {
  margin: 1.5rem 0;
}

:is(.article-content, .page-content) figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

:is(.article-content, .page-content) .wp-block-table {
  overflow-x: auto;
}

:is(.article-content, .page-content) table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

:is(.article-content, .page-content) :is(th, td) {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

:is(.article-content, .page-content) thead th {
  border-bottom-color: var(--ink);
  font-weight: 700;
}

:is(.article-content, .page-content) blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--hair);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.4;
}

:is(.article-content, .page-content) .wpcf7 {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--soft);
}

:is(.article-content, .page-content) .wpcf7 p {
  margin: 0 0 0.75rem;
}

:is(.article-content, .page-content) hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* WordPress's own button block is a grey pill (#32373c) from core styles: here it is the design's button. */
:is(.article-content, .page-content) .wp-block-button {
  margin: 1.5rem 0;
}

:is(.article-content, .page-content) :is(.wpcf7-submit, .wp-block-button__link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.75rem/1.25 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

:is(.article-content, .page-content) :is(.wpcf7-submit, .wp-block-button__link):hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* WordPress admin bar for signed-in editors: the sticky header and anchor offsets clear it. */
html:has(> body.admin-bar) {
  --bar-h: 32px;
}

@media (max-width: 782px) {
  html:has(> body.admin-bar) {
    --bar-h: 46px;
  }
}

@media (max-width: 600px) {
  html:has(> body.admin-bar) {
    --bar-h: 0px;
  }
}

/* Inquiry forms: the plugin's answer shows on the form it belongs to, in the design's own palette. */
.form-notice {
  font: inherit;
  background: var(--surface);
  color: var(--ink);
  border-left: 4px solid var(--hair);
  border-radius: var(--radius);
}

.form-notice.is-error {
  border-left-color: var(--accent);
}

.form-notice a {
  color: var(--link);
}

.lead-form .consent .choice {
  align-items: flex-start;
  font-size: 0.875rem;
}

/* The spam trap: out of sight and out of the tab order, still in the form. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Showcase IDX output inside the design. */
.showcase-slot {
  margin-block: 1rem;
}

/* Provider controls keep their behavior and take the surrounding light/dark palette. */
/* Leaflet owns map controls and attribution; do not recolor their foregrounds alone. */
.sidx-container a:not(.sidx-primary):not(.leaflet-container a) {
  color: var(--sidx-accent) !important;
}

.sidx-container .sidx-save-search-pill,
.sidx-container .sidx-primary,
.sidx-container .sidx-searchform .sidx-basic .sidx-field {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

.sidx-container .sidx-primary > *,
.sidx-container .sidx-searchform .sidx-basic .sidx-field > *,
.sidx-container .sidx-streamlined-toggle > * {
  color: inherit !important;
}

.sidx-container .sidx-streamlined-search,
.sidx-container .sidx-streamlined-toggle {
  border-color: var(--link) !important;
  color: var(--link) !important;
}

.sidx-container :is(input, select, textarea):focus {
  border-color: var(--sidx-accent) !important;
  outline: 2px solid var(--sidx-accent) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

/* A setup problem only administrators see. */
.site-notice {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--soft);
  color: var(--ink);
}

/* Property pages (inc/property.php): GEM's pages for her own listings at /property/<slug>/, and
   their cards in the Active listings band. Phones from 390 px to desktops at 1440 px. */

.property-hero {
  position: relative;
  display: grid;
  background: var(--dark-bg);
  color: var(--dark-ink);
}

.property-hero-media {
  aspect-ratio: 3 / 2;
  max-height: 78svh;
  overflow: hidden;
  background: var(--dark-surface);
}

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

.property-hero-body {
  padding-block: 1.75rem 2.25rem;
}

.property-hero-plain .property-hero-body {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.property-status {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--dark-hair);
  /* Over a photo the label needs its own backing to stay readable (a bright sky behind lavender text). */
  background: rgba(17, 17, 17, 0.72);
  color: var(--dark-link);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.property-hero h1 {
  max-width: 22em;
  margin: 0 0 0.75rem;
  color: var(--dark-ink);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
}

.property-address {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.5rem;
  color: var(--dark-muted);
  font-size: 1rem;
}

.property-subhead {
  max-width: 40em;
  margin: 0 0 1rem;
  color: var(--dark-muted);
  font-size: 1.0625rem;
}

.property-price {
  margin: 0 0 1rem;
  color: var(--dark-ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
}

.property-keyfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0 0 1.5rem;
}

.property-keyfacts div {
  display: flex;
  flex-direction: column-reverse;
}

.property-keyfacts dt {
  color: var(--dark-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-keyfacts dd {
  margin: 0;
  color: var(--dark-ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.property-actions {
  margin: 0;
}

.property-hero .btn-primary {
  background: var(--dark-accent);
  border-color: var(--dark-accent);
  color: var(--dark-on-accent);
}

.property-hero .btn-primary:hover {
  background: transparent;
  color: var(--dark-ink);
  border-color: var(--dark-ink);
}

.property-hero :focus-visible {
  outline-color: var(--dark-focus);
}

.property-notices {
  padding-top: 1.5rem;
}

.property-notice {
  margin: 0 0 0.5rem;
  padding: 0.875rem 1rem;
  border-left: 4px solid var(--hair);
  background: var(--surface);
  font-weight: 600;
}

.property-representation {
  margin: 0;
  color: var(--muted);
}

.property-section h2 {
  margin: 0 0 1.25rem;
}

.property-story p {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.property-airy .property-section {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.property-grid-wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.property-photo,
.property-highlight-photo,
.property-plan-photo {
  display: block;
  overflow: hidden;
  background: var(--soft);
}

.property-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.property-plan-photo .property-img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #ffffff;
}

.property-photo:hover .property-img,
.property-photo:focus-visible .property-img {
  transform: scale(1.03);
}

.property-photo:focus-visible,
.property-highlight-photo:focus-visible,
.property-plan-photo:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.property-group {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.25rem;
}

.property-count {
  margin: -0.5rem 0 1rem;
}

.property-rooms,
.property-plans,
.property-documents,
.property-links {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.property-documents,
.property-links {
  gap: 0.5rem;
}

.property-room h3,
.property-plan h3 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
}

.property-year {
  color: var(--muted);
}

.property-embeds {
  display: grid;
  gap: 2rem;
}

.property-embed {
  margin: 0;
}

.property-embed-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark-surface);
}

.property-embed-poster,
.property-embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.property-embed-play {
  position: relative;
  z-index: 1;
}

.property-embed-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-top: 0.75rem;
}

.property-embed-title {
  font-weight: 600;
}

.property-transcript {
  margin-top: 0.75rem;
}

.property-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem 2.5rem;
}

.property-facts {
  width: 100%;
  border-collapse: collapse;
}

.property-facts caption {
  padding-bottom: 0.5rem;
  font-weight: 600;
  text-align: left;
}

.property-facts th,
.property-facts td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.property-facts th {
  width: 45%;
  padding-right: 1rem;
  color: var(--muted);
  font-weight: 400;
}

.property-contact h2 {
  margin-top: 0;
}

.property-reach {
  margin-top: 1.25rem;
}

.property-legal-title {
  font-size: 1.125rem;
}

.property-legal p {
  color: var(--muted);
  font-size: 0.875rem;
}

.property-preview {
  border-left-color: var(--hair);
  background: var(--surface);
}

.property-cards {
  margin-bottom: 2rem;
}

.property-card .card-flag {
  text-transform: none;
}

@media (min-width: 40rem) {
  .property-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .property-plans {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  }
}

@media (min-width: 64rem) {
  .property-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .property-hero-media {
    grid-area: 1 / 1;
    aspect-ratio: 16 / 9;
    max-height: 86svh;
  }

  .property-hero-body {
    grid-area: 1 / 1;
    align-self: end;
    padding-block: 3rem;
  }

  .property-hero-media + .property-hero-body {
    position: relative;
    z-index: 1;
    max-width: none;
    padding-inline: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem));
    background: linear-gradient(to top, rgb(17 17 17 / 0.88), rgb(17 17 17 / 0.55) 60%, transparent);
  }

  .property-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

  .property-photo:hover .property-img,
  .property-photo:focus-visible .property-img {
    transform: none;
  }
}

/*
 * Acceptance audit 19 (2026-10-02): Showcase's search field and focus, the contact chrome, touch
 * targets, and short screens. Kept together so each fix reads on its own.
 */

/* V1, U8: the theme's field rule (min-height 3rem, block padding, inherited line height) reached
   Showcase's own field, which Showcase draws inside a shorter frame, so the placeholder and typed
   text sat low and were cut off. Inside Showcase the field is border-box, as tall as Showcase's
   buttons, with no block padding, so its text centers at every width. */

.sidx-container input:is([type="text"], [type="search"], [type="number"], [type="tel"], [type="email"], :not([type])) {
  box-sizing: border-box !important;
  min-height: 2.25rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}

/* Owner, 2026-10-03: the location field still hung 7 px below its white frame (Showcase pads the
   frame 7 px, the 36 px field does not fit inside), so its focus ring sat outside the white box. The
   frame drops its block padding and centers the field; the focus ring goes on the frame. */

.sidx-container .sidx-suggestions-input {
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.sidx-container .sidx-suggestions-input:focus-within {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

.sidx-container .sidx-suggestions-input input:focus {
  outline: none !important;
}

/* U3: the Showcase controls site.js returns to the normal tab order get a visible focus ring. */

.sidx-container [tabindex]:focus-visible,
[class*="sidx-"][tabindex]:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* B9, V2, V3: one floating control. "Contact Janelle" is it on tablets and desktops; phones use the
   contact bar. The concierge's own floating button never shows: the bar's Ask and the card's
   "Ask Janelle's concierge" open it (site.js), and both stay links to the contact page without it. */

.jsc-fab {
  display: none !important;
}

/* Phone menu open: nothing floats over it. */

body:has(.site-nav[data-open]) .contact-fab {
  display: none;
}

/* Phones: the contact bar holds Call, Text and Ask, so the header loses the utility bar's numbers
   (they stay in the menu) and its height shrinks to the logo row. */

@media (max-width: 47.99rem) {
  :root {
    --hdr-h: 4rem;
  }

  .utility {
    display: none;
  }
}

/* V3, U5: under 500 px of height (a phone held sideways, 400% zoom) nothing floats. */

@media (max-height: 31.24rem) {
  .contact-fab {
    display: none;
  }
}

/* U5: short phone screens keep a compact contact bar (icon beside its word). */

@media (max-width: 47.99rem) and (max-height: 33.99rem) {
  html {
    scroll-padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(2.75rem + env(safe-area-inset-bottom));
  }

  .contact-bar a {
    flex-direction: row;
    gap: 0.375rem;
    min-height: 2.75rem;
  }
}

/* U6: consent boxes and reply choices are 24 px targets (WCAG 2.5.8). */

.choice input:is([type="checkbox"], [type="radio"]) {
  width: 1.5rem;
  height: 1.5rem;
}

/* P1 CLS: the menu button shows from the first paint with the head's `js` class, not when site.js runs. */

html:not(.js) .menu-btn {
  display: none;
}

/* Production cutover check (2026-10-03): Showcase hydrates the hero search late and the panel grew
   from 110 to 232 px on phones and 70 to 113 px on tablets, moving everything below it (CLS 0.146).
   Reserve the hydrated height. */
.search-panel.showcase-search { min-height: 9.625rem; }
@media (min-width: 40rem) { .search-panel.showcase-search { min-height: 7.125rem; } }
/* On phones Showcase stacks its search in five full-width rows (235 px, most of the screen; owner,
   2026-10-03). Three rows instead: the place, then Price, Beds and Baths, then More and Search (on the
   search page, More and Save Search). */
@media (max-width: 39.99rem) {
  :is(.showcase-search, .search-wrap) .sidx-small-screen .sidx-basic > :is(.sidx-range, .sidx-beds-and-baths, .sidx-streamlined-search, .sidx-save-search-pill) { width: auto !important; min-width: 0 !important; }
  :is(.showcase-search, .search-wrap) .sidx-small-screen .sidx-basic > .sidx-range { flex: 1 1 30% !important; }
  :is(.showcase-search, .search-wrap) .sidx-small-screen .sidx-basic > .sidx-beds-and-baths { flex: 2 1 60% !important; }
  :is(.showcase-search, .search-wrap) .sidx-small-screen .sidx-beds-and-baths > * { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  :is(.showcase-search, .search-wrap) .sidx-small-screen .sidx-basic > :is(.sidx-streamlined-search, .sidx-save-search-pill) { flex: 1 1 40% !important; }
  .showcase-search .sidx-small-screen .sidx-basic > .sidx-primary { flex: 0 0 4.5rem !important; width: 4.5rem !important; }
}
@media (min-width: 64rem) { .search-panel.showcase-search { min-height: 5rem; } }

/* Showcase listing cards print gray detail text on white below 4.5:1 (axe on production, 2026-10-03). */
.sidx-container .sidx-details, .sidx-container .sidx-details :is(.sidx-mls-details, .sidx-info-block, .sidx-info-block *, .sidx-mls-details *),
[class*=sidx-] .sidx-details :is(span, div, p) { color: #4b4553 !important; }

/* Showcase in the site's Noir and Plum palette (2026-10-03): production's Showcase settings print its
   default slate text, blue counts and icons, and Helvetica/Roboto; the design's ink, plum and fonts win. */
.sidx-container,
.sidx-container .sidx-main-app-body {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}
.sidx-container :is(.sidx-heading, h1, h2, h3) {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
}
.sidx-container :is(.sidx-count, .sidx-link, .sidx-signin, .sidx-header-link, i[class*="sidx-"]):not(.leaflet-container *) {
  color: var(--link) !important;
}
.sidx-container .sidx-listing-details .sidx-call-to-actions button {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

/* The rest of Showcase's themed surfaces (Showcase website settings color its buttons, pills,
   ribbons and prices at runtime): every button is plum with white text, secondary controls are
   plum outlines on white, and labels on photos stay white. MLS logos, disclaimers and Leaflet's
   map controls and attribution are left as Showcase and the map provider draw them. */
:is(.sidx-container, .ReactModal__Content:has([class*="sidx-"])) :is(button, .sidx-btn, .sidx-button, input[type="submit"]):not(.leaflet-container *):not(.sidx-link):not(.sidx-gallery-prev):not(.sidx-gallery-next) {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-btn) !important;
}
:is(.sidx-container, .ReactModal__Content:has([class*="sidx-"])) :is(button, .sidx-btn, .sidx-button, input[type="submit"]):not(.leaflet-container *):hover {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
}
:is(.sidx-container, .ReactModal__Content:has([class*="sidx-"])) :is(button, input[type="submit"]) * {
  color: inherit !important;
}
.sidx-container :is(.sidx-search-pill, .sidx-secondary-pill, .sidx-reset-search-pill, .sidx-share-search-pill, .sidx-sort-menu .sidx-field):not(.sidx-save-search-pill) {
  background-color: var(--surface) !important;
  border-color: var(--accent) !important;
  color: var(--link) !important;
  border-radius: var(--radius-chip) !important;
}
.sidx-container :is(.sidx-search-pill, .sidx-secondary-pill, .sidx-sort-menu .sidx-field) :is(.sidx-pill-value, .sidx-pill-category, .sidx-label, span, i) {
  color: inherit !important;
}
.sidx-container .sidx-save-search-pill :is(.sidx-label, span) {
  color: var(--on-accent) !important;
}
.sidx-container .sidx-ribbon {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  font-family: var(--font-body) !important;
}
.sidx-container .sidx-details :is(.sidx-price, .sidx-listing-heading) {
  color: var(--ink) !important;
}
.sidx-container .sidx-details .sidx-listing-heading small {
  color: var(--muted) !important;
}
/* Photo overlays: the plum icon rule above would put dark plum on a photograph. */
.sidx-container :is(.sidx-gallery-controls, .sidx-thumbnail-actions) :is(i, div, span) {
  color: #ffffff !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.85);
}
/* Dropdowns (price, beds, baths, more filters, sort): selected and hovered options in the plum tint. */
.sidx-container :is([class*="sidx-option"], [class*="sidx-menu-item"], .sidx-floating-menu li):is(:hover, [aria-selected="true"], .sidx-selected, .sidx-active) {
  background-color: var(--soft) !important;
  color: var(--ink) !important;
}
/* The location field's facets (Matches, City, County, Streets, Subdivisions, Addresses) are where a
   visitor picks the kind of place; Showcase prints their labels at 11 px in gray on gray (3:1). */
.sidx-container .sidx-suggestions-facets small {
  color: inherit !important;
  font-size: 0.8125rem !important;
}
/* Long subdivision names widened the suggestion list past its menu and the phone screen: the list
   keeps the menu's width and a long name ends in an ellipsis. */
.sidx-container .sidx-suggestions-matches {
  min-width: 0 !important;
}
.sidx-container .side-suggestion-item {
  text-overflow: ellipsis;
}
/* On phones the home search's suggestion menu is as wide as the place field, inside the screen. */
@media (max-width: 39.99rem) {
  .showcase-search .sidx-floating-menu:has(.sidx-suggestions) {
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}
/* Showcase names Arial or Roboto on inner elements (hotsheet cards on community pages), so the
   container's font alone does not reach them. Icon glyphs (<i>) keep Showcase's icon font. */
.sidx-container :is(div, span, p, a, button, input, select, textarea, label, li, small, em, strong) {
  font-family: var(--font-body) !important;
}
/* Cormorant's old-style figures read "1310" as "I3IO": every Showcase number uses lining figures. */
.sidx-container,
.sidx-container *,
.ReactModal__Content:has([class*="sidx-"]) * {
  font-variant-numeric: lining-nums !important;
}
.sidx-container :is(.sidx-price, .sidx-info-value, .sidx-gallery-position) {
  font-variant-numeric: lining-nums tabular-nums !important;
}
/* Captions and field labels (Beds, Baths, Subdivision, County): Showcase's light gray is under 4.5:1. */
.sidx-container :is(small, label, .sidx-info-title, [class*="-label"], [class*="-title"]):not(.leaflet-container *):not(.sidx-label):not(.sidx-pill-category):not(.sidx-pill-value):not([class*="pill"] *):not(button *):not(.sidx-ribbon):not(.sidx-suggestions-facets *) {
  color: var(--muted) !important;
}
.sidx-container .sidx-search-grid__results {
  scrollbar-color: var(--accent) var(--soft);
}
.sidx-container .sidx-listings-map {
  color: var(--ink) !important;
}
/* Map pins by status, still told apart: active plum, coming soon lavender, pending and under
   contract dark gray (Showcase's white on green is about 2.5:1). Leaflet's controls stay its own. */
.sidx-container .leaflet-marker-icon.sidx-map-listing.sidx-map-marker-for-sale-active,
.sidx-container .sidx-map-dot-for-sale-active {
  background-color: var(--accent) !important;
  border-color: var(--on-accent) !important;
  color: var(--on-accent) !important;
}
.sidx-container .leaflet-marker-icon.sidx-map-listing.sidx-map-marker-for-sale-coming-soon,
.sidx-container .sidx-map-dot-for-sale-coming-soon {
  background-color: var(--dark-accent) !important;
  border-color: #0b0b0b !important;
  color: #0b0b0b !important;
}
.sidx-container .leaflet-marker-icon.sidx-map-listing:is(.sidx-map-marker-for-sale-pending, .sidx-map-marker-for-sale-active-under-contract),
.sidx-container :is(.sidx-map-dot-for-sale-pending, .sidx-map-dot-for-sale-active-under-contract) {
  background-color: var(--muted) !important;
  border-color: var(--on-accent) !important;
  color: var(--on-accent) !important;
}
.sidx-container .leaflet-marker-icon.sidx-map-listing * {
  color: inherit !important;
  border-top-color: inherit !important;
}
/* The pin's tail (two stacked triangles, ::before outline and ::after fill) matches its status. */
.sidx-container .leaflet-marker-icon.sidx-map-listing.sidx-map-marker-for-sale-active::before,
.sidx-container .leaflet-marker-icon.sidx-map-listing.sidx-map-marker-for-sale-active::after {
  border-top-color: var(--accent) !important;
}
.sidx-container .leaflet-marker-icon.sidx-map-listing.sidx-map-marker-for-sale-coming-soon::before {
  border-top-color: #0b0b0b !important;
}
.sidx-container .leaflet-marker-icon.sidx-map-listing.sidx-map-marker-for-sale-coming-soon::after {
  border-top-color: var(--dark-accent) !important;
}
.sidx-container .leaflet-marker-icon.sidx-map-listing:is(.sidx-map-marker-for-sale-pending, .sidx-map-marker-for-sale-active-under-contract)::before,
.sidx-container .leaflet-marker-icon.sidx-map-listing:is(.sidx-map-marker-for-sale-pending, .sidx-map-marker-for-sale-active-under-contract)::after {
  border-top-color: var(--muted) !important;
}
/* Save Search is the one filled pill. */
.sidx-container .sidx-basic .sidx-save-search-pill.sidx-search-pill {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
/* Listing page secondary text Showcase prints in light slate (about 2.5:1) or near white on white. */
.sidx-container :is(.sidx-primary-action-text-container, .sidx-primary-action-text-container *, .sidx-sub-address span, .sidx-pipe-spacer, .sidx-primary-info-item, .sidx-primary-info-item *, .mortgage-calculator__disclaimer, .sidx-list-item-value, .sidx-menu-item, em) {
  color: var(--muted) !important;
}
.sidx-container :is(.sidx-metric .sidx-value, .sidx-school .sidx-school-name) {
  color: var(--ink) !important;
}
.sidx-container .sidx-actions :is(div, span, a, i) {
  color: var(--link) !important;
}
/* Showcase's registration and contact prompts (React Modal, outside the widget): site fonts, ink
   text, plum links and buttons, the visible focus ring. The close control and consent text stay. */
.ReactModal__Content:has([class*="sidx-"]) {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius) !important;
}
.ReactModal__Content:has([class*="sidx-"]) :is(div, span, p, a, button, input, select, textarea, label, li, small) {
  font-family: var(--font-body) !important;
}
.ReactModal__Content:has([class*="sidx-"]) :is(h1, h2, h3, [class*="title"], [class*="heading"]) {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
}
.ReactModal__Content:has([class*="sidx-"]) :is(a, .sidx-link, .sidx-signin) {
  color: var(--link) !important;
}
.ReactModal__Content:has([class*="sidx-"]) :is(button, input[type="submit"]):not(.sidx-modal-close) {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: var(--radius-btn) !important;
}
.ReactModal__Content:has([class*="sidx-"]) .sidx-modal-close {
  color: var(--ink) !important;
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.sidx-container :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--link);
}
.sidx-container :is(a, button, [tabindex]):focus-visible,
.ReactModal__Content:has([class*="sidx-"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Showcase's search page (/properties/; owner, 2026-10-03: "extremely old search"). Showcase drew the map
   and results in a fixed 600 px box with the results one card wide, under a tall page head. Now a short
   head, the map and results filling the screen below the header, and the results as a grid of cards
   (two wide on a laptop). The frame keeps the header's left edge. */
.search-head {
  padding-block: 1.25rem 0.25rem;
}
.search-head h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem);
  line-height: 1.1;
}
.section.search-section {
  padding-block: 0 2.5rem;
}
.search-wrap .sidx-header-link {
  padding-block: 0.25rem !important;
}
.search-wrap .sidx-search-grid__results .sidx-grid {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)) !important;
  gap: 1rem !important;
}
.search-wrap .sidx-search-grid__results .sidx-search-result-grid-item {
  width: auto !important;
  max-width: none !important;
}
/* Phones: the filter pills (Residential, Reset, Share) and the sort sat staggered across three ragged
   lines; one left edge with even gaps instead. */
@media (max-width: 39.99rem) {
  .search-wrap .sidx-listings-controls { flex-wrap: wrap !important; width: 100% !important; gap: 0.5rem !important; align-items: center !important; }
  .search-wrap .sidx-search-filters { flex: 1 1 100% !important; flex-wrap: wrap !important; gap: 0.5rem !important; width: auto !important; }
  .search-wrap .sidx-search-filters :is(.sidx-search-pill-links, .sidx-search-pill) { margin-left: 0 !important; }
  .search-wrap .sidx-search-pill-links { display: flex !important; gap: 0.5rem !important; }
}
@media (min-width: 64rem) {
  .search-wrap .sidx-search-grid {
    height: max(36rem, calc(100svh - var(--hdr-h) - 6rem)) !important;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  }
}

/* Showcase defaults its settings still print (custom.css, regenerated 2026-10-03): blue borders, counts
   and charts, slate badges and map controls, blue-gray rules. The palette's plum, ink and line instead. */
.sidx-container .sidx-primary-jumbo,
.sidx-container :is(.sidx-primary-actions, .sidx-primary-info, .sidx-list-items, .sidx-call-to-actions, .monthly-payment, .mortgage-calculator__disclaimer, .sidx-school, .sidx-suggestions-input, hr) {
  border-color: var(--line) !important;
}
.sidx-container .sidx-actions {
  color: var(--link) !important;
}
.sidx-container .sidx-listing-heading {
  color: var(--ink) !important;
}
.sidx-container .sidx-days-online {
  background-color: var(--ink) !important;
  color: #ffffff !important;
}
.sidx-container :is(.sidx-chart-datum, .sidx-legend-dot) {
  background-color: var(--accent) !important;
}
.sidx-container .sidx-social-search-box {
  background-color: var(--soft) !important;
}
.sidx-container :is(.sidx-control.sidx-horizontal, .leaflet-bar, .leaflet-bar a) {
  background-color: #0b0b0b !important;
  border-color: #0b0b0b !important;
}
.sidx-container .leaflet-bar a.active {
  color: var(--dark-accent) !important;
}

/* A focus community under her own listings pages its homes with the theme's pager (two rows at a
   time, below); Showcase's own pagination and "See all" stay out, as the theme's "See every home"
   link opens the rest on the community's page. */
.listings-focus .sidx-pagination,
.listings-focus .sidx-hotsheet-see-all-results {
  display: none !important;
}

/* Listing grids (data-pager, site.js): two rows a page, three cards on a phone's single column, with
   Previous and Next instead of an endless scroll (owner, 2026-10-03). Showcase's cards carry their
   own display, so a paged-out card (and the IDX card of a home with a GEM page) is hidden by class,
   not by the hidden attribute. */

.pager-off,
.listing-covered {
  display: none !important;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.pager[hidden] {
  display: none;
}

.pager-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.pager-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.pager-btn[disabled]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pager-count {
  min-width: 4rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Place heroes on phones: the labeled Pause sat on the eyebrow ("SARASOTA AND PAUSE"; owner, 2026-10-03).
   The home hero's 44 px icon instead, and the first line of the hero keeps clear of it. */
@media (max-width: 47.99rem) {
  .place-hero .hero-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    padding: 0;
  }
  .place-hero .hero-toggle [data-slides-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .place-hero .hero-toggle::before {
    content: "";
    box-sizing: border-box;
    width: 0.625rem;
    height: 0.75rem;
    border-inline: 3px solid currentColor;
  }
  .place-hero.is-paused .hero-toggle::before {
    width: 0;
    height: 0;
    margin-left: 0.2rem;
    border: 0;
    border-block: 0.4rem solid transparent;
    border-left: 0.65rem solid currentColor;
  }
  .place-hero .place-inner > :first-child {
    padding-right: 3.5rem;
  }
}

/* The home search on /search-the-area/ (inc/homesearch.php): places on the left, the home on the
   right from 64rem; the community list scrolls in its own box so the form stays one screen tall. */

.home-search-form .hs-grid {
  display: grid;
  gap: 0 2.5rem;
}

@media (min-width: 64rem) {
  .home-search-form .hs-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.hs-tools {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.hs-tools .field {
  margin: 0;
}

.hs-life {
  gap: 0.375rem;
}

.hs-life .chip {
  min-height: 2.5rem;
  padding: 0.25rem 0.875rem;
}

.hs-life .chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.hs-list {
  max-height: 20rem;
  margin: 0;
  padding: 0.25rem 0.75rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  list-style: none;
  overscroll-behavior: contain;
}

.hs-group-name {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.5rem 0 0.25rem;
  background: var(--surface);
  color: var(--muted);
  font: 700 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hs-options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-options .choice {
  display: flex;
  min-height: 2.75rem;
}

.hs-options input:disabled + span {
  color: var(--muted);
}

.home-search-form .filters-actions {
  margin-top: 0.5rem;
}

/* Area intelligence (site/area-intelligence): the Getting there row, homes facts, amenities, population,
   the comparison table, and the climate strip. The rows sit under the at-a-glance facts, full width. */

.getting,
.homes-facts,
.amenities,
.county-compare,
.population-source {
  grid-column: 1 / -1;
}

.getting {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
}

.getting-title,
.amenities-title,
.county-title,
.climate-place {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font: 700 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.getting-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.getting-item {
  display: grid;
  gap: 0.125rem;
}

.getting-place {
  font-weight: 600;
}

.getting-kind {
  color: var(--muted);
  font-size: 0.8125rem;
}

.getting-min {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
}

.getting-mi {
  color: var(--muted);
  font-size: 0.875rem;
}

.getting-source {
  margin: 1rem 0 0;
}

.homes-facts {
  margin: 1.25rem 0 0;
  max-width: 70ch;
}

.amenities {
  margin-top: 1.25rem;
}

.amenity-list {
  margin-bottom: 0;
}

.amenity-list .chip {
  min-height: 2.25rem;
  padding-block: 0.25rem;
}

/* Population by county: one line per county, the source under them. */

.county-compare {
  margin-top: 1.25rem;
}

.county-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.population-source {
  margin: 0.75rem 0 0;
}

.finder-counties {
  margin-bottom: 1.5rem;
}

.market .county-compare {
  margin-top: 2rem;
}

/* Where a mover comes from (slice Origin's site.js reveals the matching panel). */

.origin-pick {
  display: grid;
  gap: 0.375rem;
  max-width: 24rem;
  margin-top: 2rem;
}

.origin-pick label {
  font-weight: 600;
}

.origin-pick select {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--field);
  border-radius: var(--radius, 4px);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.origins {
  margin-top: 1.5rem;
}

/* The home module's "Moving from" label, at the h3 size it had as a heading. */
.origin-title {
  font-size: 1.5rem;
}

.origin-flights-label {
  font-weight: 700;
}

[data-origins] [data-origin].is-shown {
  display: block;
}

/* The climate strip: twelve months in a row on a wide screen, six by two on a phone. */

.climate-key,
.climate-note {
  max-width: 70ch;
}

.climate-rows {
  display: grid;
  gap: 1.5rem;
  margin: 1rem 0;
}

.climate-place {
  margin-bottom: 0.5rem;
}

.climate-station {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.climate-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .climate-strip {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.climate-month {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.375rem;
  background: var(--surface);
  text-align: center;
  font-size: 0.8125rem;
}

.climate-name {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.climate-high {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
}

.climate-low,
.climate-rain {
  color: var(--muted);
}

.climate-note {
  margin: 1rem 0 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--hair);
  background: var(--soft);
  font-weight: 600;
}

/*
 * Sell page (/sell-a-home/, inc/pages.php sellPage): copy beside a visual on wide screens, a call to
 * action between sections, the career timeline, the website figures, and the agent questions.
 */

.sell-split {
  display: grid;
  gap: 2.5rem;
}

.sell-main > :last-child {
  margin-bottom: 0;
}

.sell-aside {
  position: relative;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px rgb(17 17 17 / 0.08);
}

.sell-aside::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  background: linear-gradient(90deg, var(--link), var(--accent));
}

.sell-aside-kicker {
  margin: 0 0 0.25rem;
  color: var(--link);
  font: 700 0.6875rem/1.4 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sell-aside-title {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
}

@media (min-width: 64rem) {
  .sell-split {
    grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 1fr);
    gap: 4rem;
    align-items: start;
  }

  .sell-story {
    grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
  }

  .sell-split > .sell-aside,
  .sell-portrait {
    position: sticky;
    top: 8.5rem;
  }
}

.sell-notes {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

@media (min-width: 40rem) {
  .sell-notes {
    grid-template-columns: 1fr 1fr;
  }
}

.sell-note {
  padding: 1.25rem;
  border-left: 2px solid var(--hair);
  background: var(--soft);
}

.sell-note h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.sell-note p {
  margin: 0;
  font-size: 0.9375rem;
}

.sell-timeline li > span:last-child {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* A call to action between sections. */
.sell-cta {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--hair);
  background-image: linear-gradient(115deg, var(--dark-bg) 35%, #24173d 100%);
}

.sell-cta-row {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

.sell-cta-title {
  margin: 0 0 0.375rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
}

.sell-cta-copy p {
  margin: 0;
  color: var(--muted);
}

.sell-cta .sell-cta-actions {
  margin: 0;
}

@media (max-width: 40rem) {
  .sell-cta-actions li,
  .sell-cta-actions .btn {
    width: 100%;
  }
}

@media (min-width: 64rem) {
  .sell-cta-row {
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
  }
}

/* Her path: dots on a line. */
.sell-timeline {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sell-timeline li {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding-left: 2rem;
}

.sell-timeline li::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--link);
  border-radius: 50%;
  background: var(--surface);
}

.sell-timeline li:last-child::before {
  background: var(--link);
}

.sell-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: -1.5rem;
  left: 0.375rem;
  width: 2px;
  background: var(--line);
}

.sell-timeline-when {
  color: var(--link);
  font: 700 0.6875rem/1.4 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sell-timeline strong {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Marketing cards with a line icon. */
.sell-icon-card .sell-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  padding: 0.625rem;
  background: var(--soft);
  color: var(--link);
}

.band .sell-icon-card .sell-icon {
  background: #f4f2f7;
}

/* Her website in numbers. */
.sell-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.sell-stats a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.75rem 1.5rem;
  border-bottom: 3px solid var(--dark-accent);
  background: var(--dark-bg);
  color: var(--dark-ink);
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.sell-stats a:hover {
  box-shadow: 0 24px 48px rgb(17 17 17 / 0.18);
  transform: translateY(-4px);
}

.sell-stats a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.sell-stats strong {
  color: var(--dark-accent);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.sell-stats span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sell-after {
  margin: 1.5rem 0 0;
  color: var(--muted);
}

/* The questions to ask an agent, numbered cards. */
.sell-questions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 1rem;
  margin: 2rem 0 3.5rem;
  padding: 0;
  list-style: none;
  counter-reset: sell-q;
}

.sell-questions li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 1.25rem 1.25rem 1.25rem 4.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  counter-increment: sell-q;
}

.sell-questions li::before {
  content: counter(sell-q, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: 1.25rem;
  color: var(--link);
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1;
  transform: translateY(-50%);
}

.sell-truths {
  margin-top: 0.5rem;
}

.sell-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}

.sell-vs span {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem;
  background: #f4f2f7;
  color: var(--muted);
  font-size: 0.8125rem;
}

.sell-vs strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
}

.sell-vs span:last-child strong {
  color: var(--link);
}

/* Her portrait beside her own words, with a call button. */
.sell-portrait {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  margin: 0;
}

.sell-portrait img {
  width: 100%;
  max-width: 24rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Public data pages (inc/insights.php): dated tables with sources, her take, and the calculator. */
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}

.report-table caption {
  caption-side: bottom;
  padding-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: left;
}

.report-table th,
.report-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.report-table .num {
  text-align: right;
  white-space: nowrap;
}

.report-table thead th {
  font-size: 0.875rem;
  color: var(--muted);
}

.report-take {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--link);
  background: var(--soft, var(--surface));
}

.report-take footer {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.source-list,
.licensee {
  font-size: 0.875rem;
}

.form-source-note {
  margin: 0.5rem 0 0;
}

.calc-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.calc-total {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}