/* ---------------------------------------------------------------------------
   Agent site stylesheet. Colours and type come from config tokens.

   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: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1280px, 100% - (var(--s-gutter) * 2));
  margin-inline: auto;
  min-height: 112px;
}

.hnav__side {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
}
.hnav__side--l { justify-content: flex-start; }
.hnav__side--r { justify-content: flex-end; }

.hnav__side a {
  color: inherit;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.hnav__side a:hover,
.hnav__side a[aria-current="page"] { border-bottom-color: currentColor; }

.hnav__mark {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  padding: 0 1.5rem;
}
.hnav__logo.hnav__logo--dark, .site-footer__logo.site-footer__logo--dark { display: none; }
.hnav__logo {
  display: block;
  height: 76px;
  width: auto;
  transition: filter .25s ease;
}
.hnav--over .hnav__logo { filter: brightness(0) invert(1); }
.hnav--over.is-solid .hnav__logo,
.hnav--over.is-open .hnav__logo { filter: none; }

.hnav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.hnav__toggle span:not(.sr-only) { display: block; height: 1.5px; background: currentColor; }

.hnav__menu {
  display: none;
  flex-direction: column;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  padding: 0.5rem 0 1rem;
}
.hnav__menu[hidden] { display: none; }
.hnav__menu a {
  padding: 0.85rem var(--s-gutter);
  color: var(--c-ink);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line);
}
.hnav.is-open .hnav__menu:not([hidden]) { display: flex; }

/* Log out has to be a POST, so it is a form; the button reads as a nav link. */
.hnav__logout { margin: 0; display: flex; }
.hnav__logout button {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0.4rem 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
}
.hnav__logout button:hover { border-bottom-color: currentColor; }
.hnav__menu .hnav__logout button {
  width: 100%; text-align: left; color: var(--c-ink);
  padding: 0.85rem var(--s-gutter); font-size: 0.75rem; letter-spacing: 0.22em;
  border-bottom: 1px solid var(--c-line);
}

/*
 * 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.
 */
.page-search .hnav__inner { min-height: 76px; }
.page-search .hnav__logo { height: 50px; }

@media (max-width: 960px) {
  .hnav__side a,
  .hnav__side .hnav__logout { display: none; }
  .hnav__toggle { display: flex; }
  .hnav__inner { min-height: 84px; }
  .hnav__logo { height: 52px; }
  .hnav__mark { padding: 0; }
}

/* --- 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__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(2rem, 5vw, 4rem); align-items: start; }
.about__portrait img { width: 100%; }
.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__tagline { font-family: var(--f-display); font-size: 1.25rem; color: var(--c-ink); margin-top: 1.25rem; }
.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__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-logo { background: var(--c-white); padding: 0.6rem 0.9rem; width: 190px; height: auto; margin-bottom: 1rem; }
.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, but set back so it does not compete with the copy. */
.source-note {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--c-muted);
  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);
}
.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__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) {
  /* 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; }

/* Photo credits a Creative Commons licence requires, kept quiet. */
.town-credits { margin: 2.5rem 0 0; font-size: 0.7rem; line-height: 1.7; color: var(--c-muted); max-width: 70rem; }
.town-credits a { color: inherit; }

/* Listing broker line on the agent's own listing cards. */
.card__attr { margin: 0.6rem 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--c-muted); }