/* ---------------------------------------------------------------------------
   Team Tiburzi Real Estate

   All color, type, and spacing values come from CSS custom properties that
   are printed on :root by brand_css_vars() in lib/site.php, sourced from
   config/site.php. Do not hardcode a brand value in this file. A second
   agent's site should be a token swap, not a stylesheet edit.
   ------------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/*
 * Lenis and native smooth scrolling must not both be running.
 *
 * The home page loads Lenis, which intercepts the wheel and animates the
 * scroll position itself. With scroll-behavior: smooth also set, the browser
 * then animates its way to each position Lenis sets, so every wheel tick starts
 * a second easing on top of the first. The result is heavy, laggy and
 * overshooting, which is what "drastically messed up" was.
 *
 * These are the classes Lenis puts on the root element, so native smoothing is
 * switched off exactly when Lenis is driving and stays on everywhere else,
 * where it is doing useful work on anchor jumps.
 */
html.lenis, html.lenis body { height: auto; }

/*
 * Matched on .lenis alone, not .lenis.lenis-smooth.
 *
 * This build of Lenis puts only "lenis" on the root element, and it also writes
 * scroll-behavior: smooth there as an inline style. The two class selector
 * never matched, so the conflict survived the first attempt at fixing it. The
 * !important is load bearing: it is what lets a stylesheet rule beat an inline
 * one.
 */
html.lenis { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-body);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-ink); text-decoration-color: var(--c-accent-soft); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--c-accent); }

/*
 * Display type.
 *
 * Tenor Sans ships in one weight, so font-weight is 400 everywhere and
 * hierarchy comes from size, space and tracking instead. The letter-spacing is
 * positive: the face is drawn wide and looks cramped without the extra room,
 * which is the opposite of what a serif wants.
 */
h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--c-ink);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: var(--t-tracking-display);
  margin: 0 0 0.7em;
}

p { margin: 0 0 1.15em; }

.wrap {
  width: min(1180px, 100% - (var(--s-gutter) * 2));
  margin-inline: auto;
}

/*
 * Visible to a screen reader, not to the eye.
 *
 * This lived in home.css, which only the home page loads, so the label inside
 * the menu button rendered as the word Menu under the icon on every other
 * page. It belongs with the chrome that uses it.
 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--c-ink); color: var(--c-white);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/*
 * One label style for the whole site.
 *
 * This was two: a gold 400 weight version on the inner pages and a muted 600
 * weight one on the home page. The home page version won because it is the
 * one that reads at small sizes, and because a gold label competes with the
 * gold in the mark.
 */
.eyebrow {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.9rem;
}
/* The light variant, for eyebrows on dark or photographic panels. */
.eyebrow-l {
  margin: 0 0 0.9rem;
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 1rem 2.1rem;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--s-radius);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn--primary { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.btn--primary:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-white); }
.btn--block { display: block; text-align: center; width: 100%; margin-top: 0.6rem; }

/* Variants for the dark and photographic panels. Started on the home page,
   shared once the valuation page opened on a photograph too. */
.btn--white { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.btn--white:hover { background: var(--c-paper-alt); border-color: var(--c-paper-alt); }
.btn--ghost-l { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost-l:hover { border-color: var(--c-white); background: rgba(255, 255, 255, 0.08); }
.btn--line-l { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--line-l:hover { background: var(--c-ink); color: var(--c-white); }
.btn--line-dark { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--line-dark:hover { background: var(--c-ink); color: var(--c-white); }

.center { text-align: center; }

.link-more {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
}

/* --- Header ------------------------------------------------------------- */

/*
 * One header for every page.
 *
 * Links split either side of a centred mark. Two modes, and they differ only
 * in where the header sits and what colour it is:
 *
 *   default   solid, sticky, dark on white. Every inner page.
 *   --over    fixed and transparent over a hero, white type, going solid on
 *             scroll. The home page, which is the only page with a hero
 *             behind the header.
 *
 * The logo is navy and gold on transparency, so in the transparent state it
 * is flattened to white with brightness(0) invert(1). That keeps the alpha
 * and needs no second file.
 */

.hnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 1px 0 var(--c-line);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.hnav--over {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  color: var(--c-white);
  box-shadow: none;
}
.hnav--over.is-solid,
.hnav--over.is-open {
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 1px 0 var(--c-line);
}

.hnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(1360px, 100% - (var(--s-gutter) * 2));
  margin-inline: auto;
  /* 55px logo plus 25px clear space above and below. */
  min-height: 106px;
}

/*
 * The broker bar (partials/broker-bar.php): Fair Housing notice and the
 * office, at body size in white on Midnight Blue, solid in both header modes
 * so it reads over the home photograph too.
 */
.broker-bar {
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}
.broker-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  width: min(1360px, 100% - (var(--s-gutter) * 2));
  margin-inline: auto;
  padding: 0.5rem 0;
}
.broker-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.broker-bar a:hover, .broker-bar a:focus-visible { text-decoration-color: var(--c-accent); }
.broker-bar__fair { display: inline-flex; align-items: center; gap: 0.55rem; }
.broker-bar__eho { flex: none; width: 18px; height: 20px; }
.broker-bar__office { margin: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* The mark: the fanlight beside the name, both in currentColor so the over
   variant flips them white with the rest of the header. */
.hnav__mark {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.hnav__id { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hnav__name {
  font-family: var(--f-script, var(--f-display));
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.05;
  white-space: nowrap;
}
/* The brokerage with her name, at a size a visitor reads and at full
   strength (Signature audit, 3 November 2026: it was 8.6px at 78%). */
.hnav__at {
  font: 600 0.8rem/1.25 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hnav__side {
  display: flex;
  align-items: center;
  /* Never under the SIGNATURE letter height beside the logo. */
  gap: clamp(1.6rem, 2.4vw, 2.2rem);
}
.hnav__tel {
  color: inherit;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.85;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.hnav__tel:hover { border-bottom-color: currentColor; }

/* Signature Premier's logo, linked to Signature (rule 1). Its own colours
   on the solid header. Over the home photograph, Signature's own reverse
   artwork straight on the photo, no box behind it (John, 3 November 2026),
   and never a filtered copy of the colour logo. */
/*
 * Size, from Signature's 2024 guidelines: the logo "may not be smaller than
 * your name", read as the word SIGNATURE against her name's lettering (Mia's
 * reading, John's yes, 3 November 2026). SIGNATURE is 47 of the artwork's 102
 * rows (46%). Her name is Great Vibes, whose capitals carry its size: 25px
 * cap height at 1.9rem, 21px at 1.5rem. So the logo is 55px tall beside the
 * 1.9rem name (SIGNATURE 25.3px) and 46px beside the 1.5rem one (21.2px), and
 * the clear space on every side is at least that letter height.
 */
.hnav__broker { display: block; flex: none; line-height: 0; }
.hnav__broker img { display: block; height: 55px; width: auto; }
.hnav__logo-row { display: none; }
.hnav__broker-rev { display: none !important; }
.hnav--over:not(.is-solid):not(.is-open) .hnav__broker-color { display: none; }
.hnav--over:not(.is-solid):not(.is-open) .hnav__broker-rev { display: block !important; }

/* The menu button: two bars and the word, on every width. */
.hnav__toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.hnav__toggle-bars { display: block; width: 24px; }
.hnav__toggle-bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform .28s ease;
}
.hnav__toggle-bars span + span { margin-top: 7px; }
.hnav__toggle-word {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.hnav.is-open .hnav__toggle-bars span:first-child { transform: translateY(4.25px) rotate(45deg); }
.hnav.is-open .hnav__toggle-bars span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* Open, the bar floats on the Midnight overlay in white. */
.hnav.is-open,
.hnav--over.is-open {
  background: transparent;
  color: var(--c-white);
  box-shadow: none;
}
body:has(.hnav.is-open) { overflow: hidden; }

/* The menu itself: a full screen of Midnight Blue. */
.hnav__menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--c-ink);
  color: var(--c-white);
  overflow-y: auto;
}
.hnav__menu[hidden] { display: none; }
.hnav.is-open .hnav__menu:not([hidden]) { display: block; }
.hnav__menu-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  width: min(1280px, 100% - (var(--s-gutter) * 2));
  margin-inline: auto;
  padding: clamp(7rem, 16vh, 10rem) 0 4rem;
}
.hnav__menu-links { display: flex; flex-direction: column; }
.hnav__menu-links a {
  color: var(--c-white);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  padding: 0.55rem 0;
  border: 0;
  transition: color .18s ease, padding-left .22s ease;
}
.hnav__menu-links a:hover,
.hnav__menu-links a:focus-visible { color: var(--c-accent-soft); padding-left: 0.6rem; }
.hnav__menu-links a[aria-current="page"] { color: var(--c-accent-soft); }
.hnav__menu-side { padding-top: 1rem; }
.hnav__menu-sig {
  margin: 0 0 1.8rem;
  font-family: var(--f-script, var(--f-display));
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--c-white);
}
.hnav__menu-line {
  margin: 0 0 1.4rem;
  font-size: 0.82rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}
.hnav__menu-line a { color: inherit; text-decoration: none; }
.hnav__menu-line a:hover { text-decoration: underline; }

/* Log out has to be a POST, so it is a form; the button reads as a link. */
.hnav__logout { margin: 0; display: flex; }
.hnav__logout button {
  background: none; border: 0; padding: 0; color: rgba(255, 255, 255, 0.82);
  cursor: pointer; font: inherit; font-size: 0.82rem; letter-spacing: 0.06em;
}
.hnav__logout button:hover { text-decoration: underline; }

/*
 * The search page runs the header lean. The map is what the visitor came for
 * and every pixel of chrome is a pixel of map.
 */
/* Leaner on /search, but never below the logo's clear space. */
.page-search .hnav__inner { min-height: 106px; }
.page-search .hnav__name { font-size: 1.45rem; }

@media (max-width: 960px) {
  /* 46px logo beside the 1.5rem name, 21px clear space around it. */
  .hnav__inner, .page-search .hnav__inner { min-height: 88px; gap: 1.5rem; }
  .hnav__name { font-size: 1.5rem; }
  .hnav__broker img { height: 46px; }
  .hnav__menu-inner { grid-template-columns: 1fr; padding-top: 6rem; }
  .hnav__menu-side { padding-bottom: 2rem; }
}

/*
 * Narrower than this the logo cannot share the row with her name and the
 * menu at that size, so it takes its own row above the name, with the same
 * clear space. The rows above the name scroll away: site.js measures them
 * into --hnav-off, so only the name and the menu stay pinned, and the home
 * header goes sticky with a negative margin so the photograph still runs
 * underneath it.
 */
@media (max-width: 767px) {
  .hnav__broker--row { display: none; }
  .hnav__logo-row {
    display: block;
    width: min(1360px, 100% - (var(--s-gutter) * 2));
    margin-inline: auto;
    padding-top: 21px;
  }
  .hnav__logo-row .hnav__broker { display: inline-block; }
  .hnav__inner, .page-search .hnav__inner { min-height: 66px; }
  .hnav__logo-row + .hnav__inner { padding-top: 21px; }
  .hnav { top: calc(-1 * var(--hnav-off, 0px)); }
  .hnav--over {
    position: sticky;
    top: calc(-1 * var(--hnav-off, 0px));
    margin-bottom: calc(-1 * var(--hnav-h, 0px));
  }
}

/* A phone: the word Menu goes (the bars and the aria name stay) so her name
   and the brokerage line under it keep one line each. */
@media (max-width: 600px) {
  .hnav__inner { gap: 0.75rem; }
  .hnav__toggle-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* A full width photograph between sections. */
.photo-band { margin: 0; }
.photo-band img { display: block; width: 100%; height: clamp(220px, 38vh, 420px); object-fit: cover; }

/* --- Hero --------------------------------------------------------------- */

.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem); }
.hero__inner {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.hero__title {
  font-size: var(--t-display-xl);
  margin-bottom: 1.2rem;
}
.hero__lede {
  font-size: 1.15rem;
  max-width: 46ch;
  color: var(--c-ink-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.hero__portrait { position: relative; }
.hero__portrait img {
  width: 100%;
  border-radius: 2px;
  filter: saturate(0.92);
}
.hero__portrait::after {
  content: ''; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--c-accent); z-index: -1;
}
.hero__portrait-caption {
  margin: 1.1rem 0 0; font-size: 0.85rem; line-height: 1.4;
}
.hero__portrait-caption strong { display: block; font-family: var(--f-display); font-size: 1.25rem; color: var(--c-ink); font-weight: 400; }
.hero__portrait-caption span { color: var(--c-muted); font-size: 0.78rem; letter-spacing: 0.06em; }

@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__portrait { max-width: 320px; }
}

/* --- Sections ----------------------------------------------------------- */

.section { padding: var(--s-section) 0; }
.section--muted { background: var(--c-paper-alt); }
.section--note { padding-top: 0; }
/* A page that opens straight into prose does not need a full section of air
   between the heading and the first line. */
.section--lead { padding-top: clamp(2rem, 4vw, 3.25rem); }

.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 1.1rem; margin-bottom: 2.5rem;
}
.section__title { font-size: var(--t-display-m); margin: 0; }
.section__more {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--c-accent-deep); font-weight: 400;
}

.page-head {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--c-line);
}
.page-head__title { font-size: var(--t-display-l); margin-bottom: 0.5rem; }

/*
 * Town scenery.
 *
 * A wide band above the town heading, and a thumbnail on the areas index.
 * Both are decorative: the photographs are stock, they carry no caption and
 * no price, and they are marked alt="" so a screen reader skips them rather
 * than being told about a photograph of nothing in particular.
 */
.town-band {
  height: clamp(200px, 28vw, 360px);
  overflow: hidden;
  background: var(--c-paper-alt);
}
.town-band img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.page-head--tight { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

.page-head__lede { font-size: 1.1rem; max-width: 60ch; color: var(--c-ink-soft); margin: 0; }

.breadcrumb {
  padding: 1rem 0; font-size: 0.78rem; color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
}
.breadcrumb a { text-decoration: none; color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb span { margin: 0 0.4rem; }

/* --- Stats -------------------------------------------------------------- */

.section--stats { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--c-ink); color: var(--c-white); }
.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  text-align: center;
}
.stats__figure {
  display: block; font-family: var(--f-display);
  font-size: clamp(2.1rem, 4vw, 3rem); color: var(--c-white); line-height: 1;
}
.stats__label {
  display: block; margin-top: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-white) 65%, transparent);
}
.stats__note {
  margin: 2rem 0 0; text-align: center; font-size: 0.75rem;
  color: color-mix(in srgb, var(--c-white) 55%, transparent);
}
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }

/* --- Cards -------------------------------------------------------------- */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--areas  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--s-radius); overflow: hidden; }
.card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.card:hover { border-color: var(--c-accent); }

.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--c-paper-alt); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__media-empty { display: block; width: 100%; height: 100%; background: var(--c-paper-alt); }
.card__status {
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: var(--c-ink); color: var(--c-white);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.75rem;
}
.card--sold .card__status { background: var(--c-accent-deep); }
.card--pending .card__status { background: var(--c-ink-soft); }

.card__body { padding: 1.5rem; }
.card__price { font-family: var(--f-display); font-size: 1.6rem; color: var(--c-ink); margin: 0 0 0.35rem; }
.card__price-note { font-family: var(--f-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin-left: 0.5rem; }
.card__address { font-size: 1.05rem; font-family: var(--f-body); font-weight: 700; margin: 0 0 0.9rem; }
.card__address span { display: block; font-weight: 300; color: var(--c-muted); font-size: 0.85rem; margin-top: 0.15rem; }
.card__specs { display: flex; gap: 1.25rem; list-style: none; margin: 0 0 1rem; padding: 0.9rem 0 0; border-top: 1px solid var(--c-line); font-size: 0.82rem; color: var(--c-muted); }
.card__specs strong { color: var(--c-ink); font-weight: 700; }
.card__story { font-size: 0.92rem; color: var(--c-ink-soft); margin: 0; }
.card__more { display: inline-block; margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-deep); }

/* --- Feature block ------------------------------------------------------ */

.section--feature { background: var(--c-paper-alt); }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__title { font-size: var(--t-display-m); }
.feature__body { font-size: 1.05rem; color: var(--c-ink-soft); }
.feature__meta { font-size: 0.85rem; color: var(--c-muted); }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } }

/* --- Sold list ---------------------------------------------------------- */

.sold-list { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.sold-item { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sold-item__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sold-item__meta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-deep); margin-bottom: 0.6rem; }
.sold-item__title { font-size: var(--t-display-m); margin-bottom: 0.5rem; }
.sold-item__title a { text-decoration: none; }
.sold-item__address { font-size: 0.88rem; color: var(--c-muted); margin-bottom: 1.1rem; }
.sold-item__headline { font-size: 0.88rem; color: var(--c-ink-soft); margin: -0.5rem 0 1.1rem; }
.sold-item__story { color: var(--c-ink-soft); margin-bottom: 1.1rem; }
@media (max-width: 800px) { .sold-item { grid-template-columns: 1fr; } }

/* --- About -------------------------------------------------------------- */

.about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.about__frame { margin: 0; position: relative; }
.about__frame::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--c-line);
}
.about__frame img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: var(--c-paper-alt); }
.about__portrait img { width: 100%; }
.about__facts { margin-top: 2.4rem !important; }
.about__sig {
  margin: 2rem 0 0;
  font-family: var(--f-script, var(--f-display));
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--c-ink);
}
.about__facts { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.about__facts li { border-bottom: 1px solid var(--c-line); padding: 0.7rem 0; font-size: 0.9rem; color: var(--c-muted); }
.about__facts strong { font-family: var(--f-display); font-size: 1.5rem; color: var(--c-ink); margin-right: 0.5rem; font-weight: 400; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; padding-left: 3.25rem; position: relative; margin-bottom: 1.75rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--f-display); font-size: 1.5rem; color: var(--c-accent);
}
.steps h3 { font-family: var(--f-body); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.steps p { font-size: 0.98rem; margin: 0; }

@media (max-width: 800px) { .about { grid-template-columns: 1fr; } .about__portrait { max-width: 300px; } }

/* --- Prose -------------------------------------------------------------- */

.prose { max-width: var(--s-measure); }

/*
 * .prose on the same element as .wrap used to centre the whole column.
 *
 * .wrap is a centred 1180px column and .prose narrows it to a reading measure,
 * so the two together produced a 68ch block centred in the viewport, sitting
 * well to the right of the heading above it. The measure belongs to the lines,
 * not to the column, so the wrap keeps its width and the children are what get
 * constrained. Affects the town pages, the guides and the two legal pages.
 */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: var(--s-measure); }

/* --- Guides --------------------------------------------------------------- */

.guide__intro p { font-size: 1.15rem; line-height: 1.75; }

.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
  max-width: 960px;
}
.guide-step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--c-line);
}
.guide-step:first-child { border-top: 0; padding-top: 0; }
.guide-step__n {
  font-family: var(--f-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: 0.02em;
}
.guide-step__body h2 { font-size: var(--t-display-m); margin: 0 0 0.9rem; }
.guide-step__body p { max-width: var(--s-measure); margin: 0 0 1.1em; }
.guide-step__body p:last-child { margin-bottom: 0; }

/*
 * The note block carries the paragraph the page exists to be honest about:
 * Fair Housing on the buyer guide, the limits of the record on the seller
 * guide. Set apart so it is not read as filler.
 */
.guide-note {
  max-width: 960px;
  border-left: 3px solid var(--c-accent);
  padding: 0.4rem 0 0.4rem clamp(1.25rem, 3vw, 2.25rem);
}
.guide-note h2 { font-size: var(--t-display-m); margin: 0 0 0.9rem; }
.guide-note p { max-width: var(--s-measure); margin: 0 0 1.1em; }
.guide-note p:last-child { margin-bottom: 0; }

.guide-faq { max-width: 960px; }
.guide-faq__head { font-size: var(--t-display-m); margin: 0 0 2rem; }
.guide-faq__item { padding: 1.75rem 0; border-top: 1px solid var(--c-line); }
.guide-faq__item h3 { font-size: 1.25rem; margin: 0 0 0.7rem; }
.guide-faq__item p { max-width: var(--s-measure); margin: 0 0 1em; }
.guide-faq__item p:last-child { margin-bottom: 0; }

/*
 * The FAQ block on town pages, partials/faq.php. Same border and spacing
 * rhythm as .guide-faq above, but built on <details>/<summary> rather than a
 * static h3/p pair: town lists run to six or more questions, and collapsing
 * them keeps the page scannable without any script. The content is still in
 * the DOM either way, so nothing is hidden from a crawler, only from the eye
 * until a visitor asks the question themselves.
 */
.faq { max-width: 960px; }
.faq__item { padding: 1.25rem 0; border-top: 1px solid var(--c-line); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__q {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.75rem;
  font-size: 1.2rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0.15rem;
  font-size: 1.2rem;
  color: var(--c-accent-deep);
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { max-width: var(--s-measure); }
.faq__a p { margin: 0.7rem 0 0; color: var(--c-body); }

/*
 * Market figures on a focus town's page, partials/town-figures.php. A focus
 * town has no closings of its own, so these numbers are the whole page's
 * substance and are styled to be read, not tucked away as fine print. The
 * .source-note beneath the list is the existing global rule, kept close so
 * the attribution reads as part of this block rather than stranded below it.
 */
.figures { max-width: var(--s-measure); border-top: 1px solid var(--c-line); }
.figures__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-line);
}
.figures__label { color: var(--c-body); }
.figures__value { font-weight: 600; color: var(--c-accent-deep); }
.figures__more { margin-top: 1rem; }

/*
 * The sibling town links at the foot of a town page, partials/town-siblings.php.
 * A flat list of chips rather than a table: there is no figure to line up,
 * only a name and a route to the other town's page, so the same border and
 * pill shape .town-chips__item uses would carry weight this block does not
 * need.
 */
.siblings { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; }
.siblings__item a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-ink);
  text-decoration: none;
  font-size: 0.92rem;
  background: var(--c-paper);
}
.siblings__item a:hover { border-color: var(--c-accent); color: var(--c-accent-deep); }

/*
 * The links joining the two town systems: down from a town page to its brief
 * archive (area.php's .section--briefs) and up from the archive back to the
 * town page (blog.php's .page-head__link, sitting under .page-head__lede).
 * Both are a single sentence rather than a full section's worth of content,
 * so they borrow .source-note's restrained size rather than competing with
 * the heading above them; the link itself carries the accent underline
 * .link-more already uses elsewhere so it still reads as clickable.
 */
.section--briefs p,
.page-head__link { font-size: 0.95rem; color: var(--c-ink-soft); max-width: var(--s-measure); }
.section--briefs a,
.page-head__link a { color: var(--c-ink); border-bottom: 1px solid var(--c-accent); text-decoration: none; }
.section--briefs a:hover,
.page-head__link a:hover { border-bottom-color: var(--c-ink); }
.page-head__link { margin: 0.85rem 0 0; }

/*
 * The town count line beside a section title, partials/town-search.php. Same
 * row as .section__title, so it reads as a subtitle rather than a competing
 * heading.
 */
.section__count { color: var(--c-muted); font-size: 0.9rem; margin: 0; }

/*
 * Town search filters, partials/town-search.php. The grid of cards and their
 * broker attribution are idx-card and idx-attribution from assets/css/idx.css,
 * loaded alongside this on the town page; only the filter row itself is new
 * here, built from the same field rhythm as .field in the contact form below.
 */
.town-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: end;
  margin-bottom: 2.25rem;
}
.town-filters__field { display: flex; flex-direction: column; gap: 0.4rem; }
.town-filters__field span {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink);
}
.town-filters__field select {
  padding: 0.7rem 1rem;
  border: 1px solid var(--c-line); border-radius: var(--s-radius);
  background: var(--c-white); font: inherit; color: var(--c-body);
}

.guide-close { max-width: 760px; }
.guide-close h2 { font-size: var(--t-display-m); margin: 0 0 0.9rem; }
.guide-close .btn { margin: 0.4rem 0.5rem 0 0; }
.guide-close .source-note { margin-top: 2.5rem; }

@media (max-width: 640px) {
  .guide-step { grid-template-columns: 1fr; gap: 0.5rem; }
  .guide-step__n { font-size: 1.5rem; }
}

.prose p { font-size: 1.05rem; }
.prose h2 { font-size: 1.75rem; margin-top: 2.5rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose__byline { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); border-top: 1px solid var(--c-line); padding-top: 1.25rem; }
.prose--legal p { font-size: 1rem; }

/* --- Contact ------------------------------------------------------------ */

.contact { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__context { background: var(--c-paper-alt); padding: 1rem 1.25rem; font-size: 0.95rem; }

.field { display: block; margin-bottom: 1.4rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 0.5rem; }
.field input, .field textarea {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--c-line); border-radius: var(--s-radius);
  background: var(--c-white); font: inherit; color: var(--c-body);
}
.field input:focus, .field textarea:focus { border-color: var(--c-accent); outline: none; }
.field__error { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--c-error); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field--trap { position: absolute; left: -9999px; }
.form__actions { margin-top: 1.75rem; }

.notice { padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; border-left: 3px solid var(--c-accent); background: var(--c-white); }
.notice--good h2 { font-size: 1.4rem; }
.notice--bad { border-left-color: var(--c-error); }

.office-card { background: var(--c-white); border: 1px solid var(--c-line); padding: 1.75rem; margin-top: 1.5rem; font-size: 0.92rem; }
.office-card h2 { font-size: 1.15rem; font-family: var(--f-body); font-weight: 700; }

@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } }

/* --- The ask on a closed sale --------------------------------------------
 * partials/sold-ask.php: at the foot of /sold and under a sold listing. Two
 * columns so the sale line and the form read as one thing rather than as a
 * banner with a form beneath it, and one column at the same 800px the contact
 * form breaks at. Everything inside is .field, .notice, .btn and .fineprint
 * from the form styles above; nothing here restyles an input.
 */
.sold-ask { background: var(--c-paper-alt); }
.sold-ask__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.sold-ask__fact { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-deep); margin-bottom: 0.6rem; }
.sold-ask__heading { font-size: var(--t-display-m); margin-bottom: 0.6rem; }
.sold-ask__lede { color: var(--c-ink-soft); }
.sold-ask__form { background: var(--c-white); border: 1px solid var(--c-line); padding: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 800px) { .sold-ask__grid { grid-template-columns: 1fr; } }

/* --- Flood zone checker ---------------------------------------------------
 * flood-check.php. One column at any width: the page is a question, an answer
 * and then the ask, read in that order, and a second column would put the ask
 * beside the answer instead of after it. The select is the one control the
 * form styles above do not already cover.
 */
.flood-check { max-width: 46rem; }
.flood-result { background: var(--c-white); border-left: 3px solid var(--c-accent); padding: 1.5rem; margin-bottom: 2rem; }
.flood-result__address { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.75rem; }
.flood-result__zone { font-size: var(--t-display-m); margin-bottom: 0.6rem; }
.flood-result__risk { color: var(--c-ink); margin-bottom: 0.9rem; }
.flood-result__caveat { font-size: 0.85rem; color: var(--c-muted); }
.flood-ask { background: var(--c-paper-alt); padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 2rem; }
.flood-ask__heading, .flood-form__heading, .flood-why h2 { font-size: 1.2rem; font-family: var(--f-body); font-weight: 700; margin-bottom: 1rem; }
.flood-form { background: var(--c-white); border: 1px solid var(--c-line); padding: clamp(1.25rem, 3vw, 2rem); }
.flood-form select {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--c-line); border-radius: var(--s-radius);
  background: var(--c-white); font: inherit; color: var(--c-body);
}
.flood-form select:focus { border-color: var(--c-accent); outline: none; }
.flood-why { margin-top: clamp(2rem, 5vw, 3.5rem); }
.flood-why p { margin-bottom: 1rem; }
.flood-faq { margin: 0 0 1.5rem; }
.flood-faq dt { font-weight: 700; margin-top: 1.1rem; }
.flood-faq dd { margin: 0.35rem 0 0; color: var(--c-ink-soft); }

/* --- Account -------------------------------------------------------------
 * account-register.php, account-login.php, account-logout.php. Reuses
 * .field, .notice, .btn and .fineprint from the contact form above rather
 * than inventing a second set of form styles for the one other place on the
 * site that collects one.
 */
.account { max-width: 34rem; }
.account__form .fineprint { margin-top: 1.25rem; }

/* Signing in with Google or Apple.
 *
 * The buttons sit inside the page own form and post it elsewhere with
 * formaction, so there is one phone field on the page rather than one per
 * route out of it; see partials/account-social.php. Order on the page is
 * phone, then providers, then the rule, then the folded email and password
 * block, and the margins below are what space those four apart rather than
 * each element carrying its own.
 *
 * Neither mark may be recoloured: both providers guidelines require their
 * own, which is why Google keeps its four colours and only Apple takes the
 * button colour.
 */
.field__note { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--c-muted); }

.social__buttons { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

.social__rule {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.5rem 0 1.25rem; color: var(--c-muted);
  font-size: 0.72rem; letter-spacing: var(--t-tracking); text-transform: uppercase;
}
.social__rule::before, .social__rule::after {
  content: ""; flex: 1; height: 1px; background: var(--c-line);
}

.social__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; text-align: center;
}
/* The toggle stands alone under the rule, where the buttons own gap does not
   reach it. */
.social__rule + .social__btn { margin-bottom: 0.5rem; }

.social__mark { width: 18px; height: 18px; flex: none; }

/* The folded block. Hidden by assets/js/account.js, which is also what
   reveals the toggle above it, so with no script this is simply the form. */
[data-account-alt] { margin-top: 1.5rem; }
[data-account-alt][hidden] { display: none; }

/* --- Saved homes ---------------------------------------------------------
 * favorites.php. A saved listing that the live feed can still resolve
 * renders as a normal .idx-card (idx.css); one it cannot renders as this
 * instead. See partials/favorite-unavailable.php.
 */
.fav-gone {
  background: var(--c-paper-alt);
  border: 1px dashed var(--c-line);
  border-radius: var(--s-radius);
  padding: 1.1rem 1rem 1.15rem;
}
.fav-gone__note { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 0.6rem; }
.fav-gone__address { font-family: var(--f-body); font-size: 0.92rem; font-weight: 600; margin: 0 0 0.3rem; line-height: 1.4; color: var(--c-ink); }
.fav-gone__address span { display: block; font-weight: 400; color: var(--c-muted); font-size: 0.84rem; margin-top: 0.15rem; }
.fav-gone__price { font-size: 1.05rem; font-weight: 700; color: var(--c-ink); margin: 0 0 0.9rem; }
.fav-gone__remove { padding: 0.5rem 1rem; font-size: 0.82rem; }

/* --- CTA ---------------------------------------------------------------- */

.section--cta { background: var(--c-ink); color: color-mix(in srgb, var(--c-white) 82%, transparent); }
.cta { text-align: center; max-width: 62ch; margin-inline: auto; }
.cta__title { color: var(--c-white); font-size: var(--t-display-m); }
.cta__body { font-size: 1.05rem; }
.cta__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.section--cta .btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.section--cta .btn--primary:hover { background: var(--c-white); border-color: var(--c-white); }
.section--cta .btn--ghost { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 35%, transparent); }
.section--cta .btn--ghost:hover { background: transparent; border-color: var(--c-white); }

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: var(--c-paper-alt); border-top: 1px solid var(--c-line); }
.site-footer__top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); padding: var(--s-section) 0 3rem; }
.site-footer__brand img { width: clamp(200px, 26vw, 260px); }
.site-footer__at { margin: 0.5rem 0 0; font: 600 0.7rem/1.2 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink); }
.site-footer__tagline { font-size: 0.95rem; line-height: 1.5; color: var(--c-ink-soft); margin-top: 1.25rem; max-width: 34ch; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.site-footer__nav h3 { font-family: var(--f-body); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); font-weight: 400; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer__credits { font-size: 0.72rem; line-height: 1.5; color: var(--c-muted); padding-bottom: 1.5rem; }
.site-footer__credits a { color: inherit; }
.site-footer__nav li { margin-bottom: 0.6rem; }
.site-footer__nav a { text-decoration: none; font-size: 0.92rem; }
.site-footer__nav a:hover { color: var(--c-accent-deep); }
@media (max-width: 800px) { .site-footer__top { grid-template-columns: 1fr; } .site-footer__nav { grid-template-columns: repeat(2, 1fr); } }

/* A form's submit button, styled to read as one of the plain text links
   beside it rather than as a button: signing out is the same weight of
   action as any other footer link, just one that has to be a POST. */
.footer-logout { margin: 0; }
.footer-logout__btn {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 0.92rem; color: var(--c-ink);
  cursor: pointer; text-align: left;
}
.footer-logout__btn:hover { color: var(--c-accent-deep); }

/* --- Compliance block --------------------------------------------------- */

.compliance {
  background: var(--c-ink);
  color: color-mix(in srgb, var(--c-white) 78%, transparent);
  padding: 3rem 0 3.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
}
.compliance a { color: var(--c-white); text-decoration-color: var(--c-accent); }
.compliance__heading {
  color: var(--c-white); font-family: var(--f-body);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 1rem;
}
.compliance__housing { max-width: 92ch; }
.compliance__housing-links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.8rem; }
.compliance__licensing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--c-white) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-white) 18%, transparent);
  padding: 1.75rem 0; margin: 2rem 0;
}
.compliance__broker-link { display: inline-block; line-height: 0; }
.compliance__broker-logo { background: var(--c-white); padding: 1.1rem 1.4rem; width: min(360px, 100%); height: auto; margin-bottom: 1.25rem; }
.compliance__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin: 0 0 1.75rem; }
.compliance__mark { height: 56px; width: auto; }
/* Black mark on the dark block: a white tile, as the Signature logo has. */
.compliance__mark--tile { background: var(--c-white); padding: 4px; box-sizing: content-box; }
.compliance__mark--word {
  display: inline-flex; align-items: center; padding: 0 0.9rem;
  border: 2px solid var(--c-white); color: var(--c-white);
  font: 700 1rem/1 var(--f-body); letter-spacing: 0.08em;
}
.compliance__disclaimer { flex: 1 1 32ch; margin: 0; font-size: 0.8rem; max-width: 70ch; }
.compliance__source { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin: 0 0 1.75rem; }
.compliance__source p { margin: 0; font-size: 0.85rem; color: color-mix(in srgb, var(--c-white) 78%, transparent); }
.compliance strong { color: var(--c-white); font-weight: 600; }
.compliance__copyright { font-size: 0.75rem; color: color-mix(in srgb, var(--c-white) 60%, transparent); margin: 0; max-width: 100ch; }
@media (max-width: 700px) { .compliance__licensing { grid-template-columns: 1fr; gap: 1.5rem; } }

.compliance-alarm { background: var(--c-alarm); color: var(--c-white); padding: 1rem; font: 500 0.85rem/1.5 var(--f-mono); }
.compliance-alarm ul { margin: 0.5rem 0 0; }

/* --- Misc --------------------------------------------------------------- */

.fineprint { font-size: 0.78rem; color: var(--c-muted); }
.fineprint--photo { padding-top: 0.75rem; }
.empty { font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Attribution for displayed market statistics. Required, so it is styled to be
   read rather than hidden. On a listing page it sits beside MLS data, and
   MLS GRID IDX Rule 16 says the source of non-MLS figures must be no smaller
   than the listing data (0.82 to 0.9rem in .spec-table) and not grey on grey. */
.source-note {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: var(--s-measure);
}

/* Search suggestions ------------------------------------------------------ */
/*
 * Attached to whatever form carries data-suggest-wrap, so the home page
 * opening and the search page header get the same list without either
 * stylesheet knowing about the other.
 */
[data-suggest-wrap] { position: relative; }

.sug {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--s-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  text-align: left;
  overscroll-behavior: contain;
}

.sug__row {
  display: block;
  padding: 0.65rem 1.1rem;
  text-decoration: none;
  color: var(--c-body);
  border-bottom: 1px solid var(--c-line);
}
.sug__row:last-of-type { border-bottom: 0; }
.sug__row[aria-selected="true"] { background: var(--c-paper-alt); }

.sug__label {
  display: block;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.sug__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--c-muted);
  /* A town summary is a full sentence. One line of it is the useful part. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A postal code is a number, so it reads better in the tabular face. */
.sug__row--zip .sug__label { font-family: var(--f-data); letter-spacing: 0.02em; }

.sug__credit {
  margin: 0;
  padding: 0.5rem 1.1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.7rem;
  color: var(--c-muted);
  background: var(--c-paper);
}

/* ---------------------------------------------------------------------------
   The best-agent page.

   Built on the existing tokens rather than a second palette, so a brand swap
   still reaches this page. Everything here is layout for content shapes the
   site did not have before: a figure printed with its basis, a criteria list,
   and a town tally.
   --------------------------------------------------------------------------- */

.page-best-agent .lede { font-size: 1.15rem; line-height: 1.62; }

/*
 * A figure and the thing that substantiates it are one object, so they are one
 * grid cell. Styling the basis as a footnote would invite a later edit that
 * drops it, and a number without its basis is a claim rather than evidence.
 */
.proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.proof__item {
  background: var(--c-paper);
  padding: 1.35rem 1.4rem 1.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.proof__figure {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.proof__label {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
}

.proof__basis {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--c-muted);
  margin-top: 0.35rem;
}

.proof__source {
  font-size: 0.86rem;
  color: var(--c-muted);
  margin: 1.1rem 0 0;
  max-width: var(--s-measure);
}

.criteria { margin: 1.75rem 0 0; }

.criteria dt {
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--c-ink);
  margin-top: 1.6rem;
}

.criteria dd {
  margin: 0.4rem 0 0;
  color: var(--c-body);
  max-width: var(--s-measure);
}

.criteria dd strong {
  display: block;
  margin-top: 0.4rem;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.townlist {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem 1.5rem;
}

.townlist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-line);
}

.townlist__n {
  font-family: var(--f-data, var(--f-mono));
  font-size: 0.85rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.page-best-agent .faq dt {
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 1.5rem;
}

.page-best-agent .faq dd {
  margin: 0.4rem 0 0;
  color: var(--c-body);
  max-width: var(--s-measure);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/*
 * The answer and the evidence for it are one thought, so the lede sits close
 * to the figures rather than a full section apart. Two stacked section
 * paddings put a screen of nothing between a question and its answer.
 */
.page-best-agent .section--lead { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.page-best-agent .section--muted { padding-top: clamp(2rem, 4vw, 3rem); }

/* ---------------------------------------------------------------------------
   Town comparisons. Built on the existing tokens so a brand swap reaches them.
   --------------------------------------------------------------------------- */

.cmp { border-collapse: collapse; width: 100%; min-width: 480px; }

.cmp th, .cmp td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
}

.cmp thead th {
  font-family: var(--f-data, var(--f-mono));
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  white-space: nowrap;
}

.cmp tbody th { font-weight: 500; color: var(--c-ink-soft); }
.cmp td.num   { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }

/* Absent is said, not left blank. A blank cell reads as zero. */
.cmp__none { color: var(--c-muted); font-size: 0.85em; }

.cmp__source {
  font-size: 0.86rem;
  color: var(--c-muted);
  margin: 1.1rem 0 0;
  max-width: var(--s-measure);
}

/* --- Areas: the grid -------------------------------------------------- */

/*
 * Equal tiles, one per town with a page, each carrying that town's photograph
 * from config. A town without one (a second agent's site, before its photos
 * are in) gets slate with the name set large, on the same measurements, so a
 * missing image reads as a plain tile and not as a hole. The name sits over
 * the media in white on both.
 */
.section--tight { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.town-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 1.5rem;
}
.town-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-slate);
  color: var(--c-white);
  text-decoration: none;
  isolation: isolate;
}
.town-tile__media { position: absolute; inset: 0; display: block; }
.town-tile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.town-tile--photo:hover .town-tile__media img { transform: scale(1.05); }
/* Photograph tiles darken toward the caption so white type holds on any sky. */
.town-tile--photo .town-tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,22,28,.82) 0%, rgba(20,22,28,.35) 45%, rgba(20,22,28,0) 75%);
}
/* Slate tiles get a hairline of gold at the foot: the brand mark's colour,
   and the one thing that says "designed" rather than "image failed to load". */
.town-tile:not(.town-tile--photo) .town-tile__media::after {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.25rem;
  height: 1px; background: var(--c-accent); opacity: .85;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.town-tile:not(.town-tile--photo):hover .town-tile__media::after { transform: scaleX(1.04); }

.town-tile__text {
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.25rem;
  display: grid; gap: 0.3rem;
}
.town-tile__name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: var(--t-tracking-display);
}
.town-tile:not(.town-tile--photo) .town-tile__text { bottom: 2.25rem; }
.town-tile__line {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.town-tile--photo .town-tile__line { color: var(--c-accent-soft); }
.town-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

@media (max-width: 900px) { .town-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .town-grid { grid-template-columns: 1fr; gap: 1rem; }
  .town-tile { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .town-tile__media img, .town-tile__media::after { transition: none; }
}

/* --- Areas: the rest of the record ------------------------------------- */

.town-chips {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem;
}
.town-chips__item {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-paper);
  font-size: 0.88rem;
  color: var(--c-ink);
}
.town-chips__n { font-family: var(--f-data); font-size: 0.72rem; color: var(--c-muted); }
.town-chips__note { font-size: 0.82rem; color: var(--c-muted); margin: 0; }

/* ==========================================================================
   Town pages (area.php), 14 September 2026.
   The town name set large over its photograph, a fact panel beside the
   agent's own note, his sales as a dated list, and what has been written
   about the town. Brand tokens only; the one bold move is the heading.
   ========================================================================== */

.town-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(220px, 30vw, 400px);
  background: var(--c-paper-alt);
  overflow: hidden;
}
.town-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A shade under the type only, so the photograph stays a photograph. */
.town-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-ink) 72%, transparent) 0%, transparent 62%);
}
.town-hero__inner { position: relative; z-index: 1; padding-block: clamp(1.5rem, 4vw, 2.75rem); }
.town-hero__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.town-hero__lede { margin: 0.75rem 0 0; max-width: 56ch; font-size: 1.05rem; color: var(--c-ink-soft); }
.town-hero--photo .town-hero__title { color: var(--c-white); }
.town-hero--photo .town-hero__lede { color: color-mix(in srgb, var(--c-white) 88%, transparent); }

/* The fact panel and the note, side by side on a wide screen. */
.town-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.town-intro__grid--solo { grid-template-columns: minmax(0, 44rem); }

.town-glance__title { margin: 0 0 1rem; font-size: var(--t-display-m); }
.town-glance__list { margin: 0; }
.town-glance__list > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--c-line);
}
.town-glance__list > div:last-child { border-bottom: 1px solid var(--c-line); }
.town-glance__list dt { font-size: 0.9rem; color: var(--c-muted); }
.town-glance__list dd { margin: 0; font-weight: 600; color: var(--c-ink); }
.town-glance__source { margin: 0.9rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--c-muted); }

.town-note { margin: 0; padding-top: 0.25rem; }
.town-note__quote { position: relative; margin: 0; padding-left: 0; }
.town-note__quote::before {
  content: '\201C';
  display: block;
  height: 2.6rem;
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--c-accent);
}
.town-note__quote p {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.5;
  color: var(--c-ink);
}
.town-note__by { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.4rem; font-size: 0.86rem; color: var(--c-muted); }
.town-note__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.town-note__by strong { display: block; font-size: 0.98rem; color: var(--c-ink); }

/* The agent's sales, newest first. */
.town-sales__list { margin: 0; padding: 0; list-style: none; }
.town-sale {
  display: grid;
  grid-template-columns: 5.5rem 7.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 0;
  border-top: 1px solid var(--c-line);
}
.town-sale:last-child { border-bottom: 1px solid var(--c-line); }
.town-sale__date { font-family: var(--f-display); font-size: 1.05rem; color: var(--c-ink-soft); }
.town-sale__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--c-line); }
.town-sale__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.town-sale__price { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--c-ink); }
.town-sale__address { margin: 0.1rem 0 0; font-family: var(--f-body); font-size: 0.98rem; font-weight: 500; }
.town-sale__address a { text-decoration: none; }
.town-sale__address a:hover { text-decoration: underline; }
/* A sale with a written account gets the room to show it. */
.town-sale--story { grid-template-columns: 5.5rem 13rem minmax(0, 1fr); align-items: start; padding-block: 1.5rem; }
.town-sale__story { margin: 0.6rem 0 0; max-width: 62ch; color: var(--c-body); line-height: 1.6; }
.town-sale__story a { white-space: nowrap; font-weight: 600; }

/* What has been written about the town. */
.town-reading__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.town-read {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 1rem;
  border-top: 3px solid var(--c-ink);
  text-decoration: none;
  color: var(--c-ink);
}
/* Town news is the writing nobody else has, so it carries the accent. */
.town-read--town-news { border-top-color: var(--c-accent); }
.town-read__kind { font-size: 0.8rem; color: var(--c-muted); }
.town-read__title { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.25; }
.town-read__text { font-size: 0.92rem; line-height: 1.55; color: var(--c-body); }
.town-read:hover .town-read__title { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 4px; }
.town-read:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; }

@media (max-width: 860px) {
  .town-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .town-sale,
  .town-sale--story { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .town-sale__photo { display: none; }
  .town-sale--story .town-sale__photo { display: block; grid-column: 2; grid-row: 1; }
  .town-sale--story .town-sale__body { grid-column: 2; }
}

/* --- Client reviews (partials/agent-reviews.php) -------------------------- */
.agent-reviews { background: var(--c-paper-alt); }
.agent-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 2rem; }
.agent-reviews__summary { margin: 0; font-size: 0.98rem; color: var(--c-ink); }
.agent-reviews__summary strong { font-size: 1.15rem; }
/* Masonry, so one long review sits in its column without stretching a row
   of short ones beside it. CSS columns: as many 17rem columns as fit, up to
   three, each card kept whole. */
.agent-reviews__list {
  columns: 3 17rem;
  column-gap: clamp(1.25rem, 3vw, 2rem);
}
/* The card's own display beats the browser's [hidden] rule (author styles
   override UA styles regardless of specificity), so hidden must be said
   here too. Same lesson as .hnav__menu[hidden]. */
.agent-review[hidden] { display: none; }
.agent-review {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  padding: 1.4rem 1.5rem;
  background: var(--c-white);
  border-radius: 6px;
  break-inside: avoid;
}
.agent-review__stars { display: inline-flex; gap: 1px; font-size: 1rem; line-height: 1; }
.agent-review__star { color: var(--c-line); }
.agent-review__star.is-on { color: var(--c-accent); }
.agent-review__text { margin: 0.8rem 0 0; }
.agent-review__text p { margin: 0; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.55; color: var(--c-ink); }
.agent-review__by { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin-top: 1rem; font-size: 0.86rem; font-weight: 600; color: var(--c-ink); }
.agent-review__by a { color: inherit; }
.agent-review__by span { font-weight: 400; color: var(--c-muted); }
.agent-reviews__showmore { margin: 0.5rem 0 0; text-align: center; }
.agent-reviews__source { margin: 1.5rem 0 0; font-size: 0.8rem; color: var(--c-muted); }
.agent-reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.agent-reviews__and { margin: 0 0.35rem; color: var(--c-muted); }
.agent-review__by { flex-direction: column; gap: 0.15rem; }
/* Long reviews: eight lines, then Read more (assets/js/reviews.js). */
.agent-review__text.is-clamped p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.agent-review__text.is-clamped.is-open p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.agent-review__more {
  margin-top: 0.5rem;
  padding: 0;
  font-family: var(--f-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-ink);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.agent-review__more:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* What is for sale in a town today (partials/town-market-now.php). */
.town-now__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 1.5rem 0 0;
}
.town-now__grid > div { padding-top: 1rem; border-top: 3px solid var(--c-ink); }
.town-now__grid dt { font-size: 0.86rem; color: var(--c-muted); }
.town-now__grid dd { margin: 0.35rem 0 0; font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; color: var(--c-ink); }
.town-now__grid p { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--c-body); }
.town-now__source { margin: 1.1rem 0 0; font-size: 0.78rem; color: var(--c-muted); }

/*
 * Living in {Town} (partials/town-living.php).
 *
 * Six cards, one per source, laid out three across on a wide screen and one
 * across on a phone. Each card repeats the row rhythm of the "at a glance"
 * panel above it, hairline rules and a muted label over an ink value, so the
 * page reads as one thing rather than as a panel with a widget under it.
 *
 * auto-fit rather than a fixed count: a town with two approved sections gets
 * two full width cards instead of four columns of air. The accent hairline
 * over each heading is what separates one source from the next, which is the
 * distinction that matters here, because every card is attributed separately.
 */
.town-living__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 1.75rem;
}
.town-living__card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--c-paper-alt);
  border-top: 3px solid var(--c-accent);
}
.town-living__heading {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.25;
}
.town-living__list { margin: 0; }
.town-living__item {
  display: grid;
  grid-template-columns: minmax(7rem, 0.85fr) 1fr;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--c-line);
}
.town-living__item:first-child { border-top: 0; padding-top: 0; }
.town-living__label { font-size: 0.86rem; line-height: 1.45; color: var(--c-muted); }
.town-living__value { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--c-ink); }
.town-living__value a { color: var(--c-ink); text-decoration-color: var(--c-accent); }
/* The clause of context under a value, set light so it reads as the aside it is. */
.town-living__detail {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--c-body);
}
.town-living__action { margin-top: 0.9rem; font-size: 0.9rem; }
.town-living__action a { color: var(--c-ink); text-decoration-color: var(--c-accent); }
.town-living__note {
  margin: 0.9rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--c-body);
}
/* Pushed to the foot of the card so six cards of different lengths still line
   their attributions up along the bottom edge. */
.town-living__source {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-muted);
  margin-top: auto;
}
.town-living__source a { color: var(--c-muted); text-decoration-color: var(--c-accent-soft); }
.town-living__source a:hover { color: var(--c-ink); text-decoration-color: var(--c-accent); }

@media (max-width: 560px) {
  .hnav__tel { display: none; }
  /* Label over value on a phone: two columns at this width leaves the value
     four or five characters wide and breaks every figure across three lines. */
  .town-living__item { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

.town-faq-source { margin-top: -1.5rem; padding-bottom: 2rem; font-size: 0.78rem; color: var(--c-muted); }
.agent-review__who { display: inline-flex; align-items: center; gap: 0.55rem; }
.agent-review__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* A listing photograph that failed to load (assets/js/site.js SPSPhotoGuard). */
.is-photo-broken { position: relative; }
.is-photo-broken img { visibility: hidden; }
.is-photo-broken::after {
  content: "Photo not available";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  background: var(--c-paper-alt);
  pointer-events: none;
}

/* Home address suggestions (assets/js/address.js). */
.addr-host { position: relative; }
.addr-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1300; margin: 2px 0 0; padding: 0.25rem 0;
  list-style: none; background: var(--c-paper); color: var(--c-ink); text-align: left;
  border: 1px solid var(--c-line); border-top: 2px solid var(--c-accent); border-radius: 2px;
  box-shadow: 0 12px 30px rgba(26, 26, 26, 0.18);
}
.addr-list[hidden] { display: none; }
.addr-list__item { padding: 0.55rem 0.8rem; cursor: pointer; line-height: 1.3; }
.addr-list__item.is-active, .addr-list__item:hover { background: var(--c-paper-alt); }
.addr-list__main { display: block; font-weight: 600; font-size: 0.95rem; }
.addr-list__sub { display: block; font-size: 0.78rem; color: var(--c-muted); }
.addr-list__credit { padding: 0.3rem 0.8rem 0.2rem; font-size: 0.68rem; color: var(--c-muted); text-align: right; }

/* --- Quiet reveals ----------------------------------------------------------
   One pattern, sitewide: section headings and framed photographs rise a
   touch as they first come into view. assets/js/site.js (SPSReveal) adds
   .reveal-init only when it is about to observe, so without JavaScript
   nothing is ever hidden, and prefers-reduced-motion turns it all off. */
.reveal-init {
  opacity: 0;
  transform: translateY(14px);
}
.reveal-init.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; }
}

/* --- Reels: play badge and fullscreen framing -------------------------------- */

.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(1, 38, 57, 0.72);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.reel-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--c-white);
}
.is-playing .reel-play { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
*:hover > .reel-play { background: rgba(1, 38, 57, 0.88); }

/* The modal: one <dialog>, the full vertical frame centred on a dim. */
.reel-modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  display: none;
  place-items: center;
  overflow: visible;
}
.reel-modal[open] { display: grid; }
.reel-modal::backdrop {
  background: rgba(1, 20, 32, 0.84);
  backdrop-filter: blur(6px);
  animation: reel-dim .45s ease both;
}
.reel-modal.is-leaving::backdrop { animation: reel-undim .4s ease both; }
@keyframes reel-dim   { from { opacity: 0; } to { opacity: 1; } }
@keyframes reel-undim { from { opacity: 1; } to { opacity: 0; } }
.reel-modal__frame {
  position: relative;
  height: min(88dvh, 900px);
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  transform-origin: 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  will-change: transform, clip-path;
}
.reel-modal__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-modal__close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(1, 26, 40, 0.5);
  color: var(--c-white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, opacity .3s ease;
}
.reel-modal__close:hover, .reel-modal__close:focus-visible { background: rgba(1, 26, 40, 0.9); }
.reel-modal.is-entering .reel-modal__close { animation: reel-dim .4s ease .3s both; }
.reel-modal.is-leaving .reel-modal__close { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reel-modal::backdrop, .reel-modal.is-leaving::backdrop { animation: none; }
}