/* IDX listing page — shared stylesheet.
   ZERO facts, zero agent branding baked in.

   The :root block carries a neutral default palette ONLY so the file is
   readable on its own. build-idx-page.py rewrites all six variables plus
   --accent-text with the agent's own colours from templates/agents.json,
   exactly the way build-listing.py and build-market-page.py do, and DIES if a
   variable is missing rather than shipping another agent's brand.

   Colour rule (GUARDRAILS #10): --accent-gold is a FILL. Amanda's brass
   #C49968 is 2.4:1 on cream and fails as text, so accent-coloured TEXT uses
   --accent-text. Anything sitting ON an accent fill takes dark text
   (--btn-on-accent), because white on brass is 2.6:1.

   Visual language is deliberately inherited from templates/listing-page/
   (the agent's own custom listing pages): light page, white cards, one dark
   band for the hero and one for the conversion block, a quick-stat widget bar
   under the hero, generous section rhythm. What it does NOT inherit is the
   video hero and the photo slideshow — these are other brokers' listings and
   all we have is the MLS still photography. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --hr-text-dark: #0A0A0A;
  --hr-text-muted: #7A6E5F;
  --hr-blue-primary: #0A0A0A;
  --hr-blue-glow: #2A2A2A;
  --accent-gold: #C49968;
  --accent-text: #8A6A3E;
  --hr-border: rgba(10,10,10,0.18);

  --page-bg: #F6F7F9;
  --card-bg: #FFFFFF;
  --panel-bg: #FFFFFF;
  --btn-on-accent: #0A0A0A;
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 14px 38px rgba(15, 23, 42, 0.10);
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--hr-text-dark);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 82px;              /* room for the sticky action bar */
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--hr-border);
  padding: 14px 0;
  position: sticky; top: 0; z-index: 60;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hr-text-dark); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-gold); color: var(--btn-on-accent);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700; font-size: 1rem; letter-spacing: 0.04em;
}
.brand-name { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.brand-sub { font-size: 0.82rem; color: var(--hr-text-muted); line-height: 1.3; }
.header-phone {
  font-weight: 700; font-size: 0.98rem; text-decoration: none;
  color: var(--accent-text); white-space: nowrap;
}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */

.crumbs {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 20px 0; font-size: 0.87rem; line-height: 1.5;
  color: var(--hr-text-muted);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.crumbs li + li::before { content: "\203A"; color: var(--hr-text-muted); }
.crumbs a { color: var(--accent-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ── block 1: hero ──────────────────────────────────────────────────────── */

.hero {
  background: var(--hr-blue-primary); color: #FFFFFF;
  padding: 40px 0 38px; margin-top: 18px;
}
.hero .kicker {
  text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.76rem;
  font-weight: 700; color: #FFFFFF; opacity: 0.86; margin-bottom: 10px;
}
.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.5rem; line-height: 1.14; font-weight: 700; color: #FFFFFF;
}
.hero .hero-sub { margin-top: 10px; font-size: 1.04rem; color: #FFFFFF; opacity: 0.92; }
.hero-pricerow { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.hero .hero-price { font-size: 2.1rem; font-weight: 800; color: #FFFFFF; }
.hero .hero-ppsf {
  font-size: 0.95rem; font-weight: 600; color: #FFFFFF; opacity: 0.9;
  border-left: 1px solid rgba(255,255,255,0.4); padding-left: 14px;
}
.hero .hero-attrib { margin-top: 12px; font-size: 0.94rem; color: #FFFFFF; opacity: 0.94; }

.badges { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--accent-gold); color: var(--btn-on-accent);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}

.cta-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 999px;
  background: var(--accent-gold); color: var(--btn-on-accent);
  font-weight: 700; font-size: 0.94rem; text-decoration: none;
  border: 2px solid var(--accent-gold);
}
.btn-ghost { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; }
.btn-sm { padding: 8px 15px; font-size: 0.86rem; }
.btn-outline {
  background: transparent; color: var(--hr-text-dark);
  border: 2px solid var(--hr-text-dark);
}
.btn-block { display: block; text-align: center; }

/* ── quick-stat widget bar (inherits the hero widget from listing-page) ─── */

.quickstats { background: var(--panel-bg); border-bottom: 1px solid var(--hr-border); }
.quickstats .wrap {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding-top: 0; padding-bottom: 0;
}
.qs-item {
  flex: 1 1 116px; padding: 18px 12px; text-align: center;
  border-right: 1px solid var(--hr-border);
}
.qs-item:last-child { border-right: 0; }
.qs-val { font-size: 1.5rem; font-weight: 800; color: var(--hr-text-dark); line-height: 1.15; }
.qs-lbl {
  margin-top: 3px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--hr-text-muted);
}

/* ── gallery ────────────────────────────────────────────────────────────── */

.gallery { padding: 26px 0 0; }
.gallery .wrap { max-width: var(--maxw); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-grid figure {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.gallery-grid img { width: 100%; height: 215px; object-fit: cover; }
.gallery-grid .lead { grid-column: 1 / -1; }
.gallery-grid .lead img { height: 460px; }
.gallery-note { margin-top: 10px; font-size: 0.82rem; color: var(--hr-text-muted); }

/* Every photo the listing broker supplied is rendered, so the grid past the
   first row is thumbnails. A 48-photo page must not cost 48 full-size images
   on first paint — everything below the lead is loading="lazy". */
.gallery-grid figure { position: relative; cursor: zoom-in; }
.gallery-grid figure:focus-within { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.gallery-grid figure.thumb img { height: 150px; }
.gallery-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.gallery-count { font-size: 0.88rem; font-weight: 700; color: var(--hr-text-dark); }
.gallery-hint { font-size: 0.82rem; color: var(--hr-text-muted); }

/* ── lightbox ───────────────────────────────────────────────────────────────
   Hidden at rest, so contrast-audit.js skips it (it ignores display:none).
   Colours were checked by hand instead: #FFFFFF on #0B1220 is 17.9:1 and
   #C9D2DE on #0B1220 is 12.3:1. No external library, no storage of any kind. */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: #0B1220; color: #FFFFFF;
  padding: 54px 16px 74px;
}
.lightbox.open { display: block; }
.lightbox-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
}
.lightbox-bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px;
  background: #0B1220; color: #FFFFFF;
}
.lightbox-caption { font-size: 0.9rem; font-weight: 600; color: #FFFFFF; }
.lightbox-counter { font-size: 0.9rem; font-weight: 700; color: #FFFFFF; }
.lightbox-btn {
  appearance: none; border: 2px solid #FFFFFF; background: #0B1220; color: #FFFFFF;
  font: inherit; font-size: 1.1rem; font-weight: 800; line-height: 1;
  padding: 10px 15px; border-radius: 999px; cursor: pointer;
}
.lightbox-btn:hover { background: #FFFFFF; color: #0B1220; }
.lightbox-nav {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.lightbox-help {
  position: absolute; bottom: 20px; right: 18px;
  font-size: 0.78rem; color: #C9D2DE;
}
@media (max-width: 700px) { .lightbox-help { display: none; } }

/* ── map ────────────────────────────────────────────────────────────────── */

.map-frame {
  margin-top: 18px; position: relative; width: 100%;
  aspect-ratio: 16 / 9; min-height: 260px;
  border: 1px solid var(--hr-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card); background: var(--card-bg);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-note { margin-top: 10px; font-size: 0.82rem; color: var(--hr-text-muted); max-width: 80ch; }
.map-note a { color: var(--accent-text); }

/* ── payment estimate ───────────────────────────────────────────────────── */

.pay-panel {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 20px 22px; margin-top: 14px;
}
.pay-total { font-size: 2rem; font-weight: 800; color: var(--hr-text-dark); line-height: 1.1; }
.pay-total-lbl {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--hr-text-muted); margin-bottom: 4px;
}
.pay-grid {
  margin-top: 16px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.pay-item { border-top: 1px solid var(--hr-border); padding-top: 10px; }
.pay-lbl { font-size: 0.78rem; color: var(--hr-text-muted); font-weight: 600; }
.pay-val { font-size: 1.1rem; font-weight: 800; color: var(--hr-text-dark); }
.pay-assume {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hr-border);
  font-size: 0.84rem; color: var(--hr-text-muted); max-width: 80ch;
}
.pay-assume a { color: var(--accent-text); }

/* ── price history / time on market ─────────────────────────────────────── */

.timing-panel {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 18px 22px; margin-top: 14px;
}
.timing-list { list-style: none; }
.timing-list li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 0.97rem; color: var(--hr-text-dark); max-width: 78ch;
}
.timing-list li:last-child { margin-bottom: 0; }
.timing-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gold);
}

/* ── similar homes ──────────────────────────────────────────────────────── */

.sim-grid {
  margin-top: 14px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sim-card {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.sim-card img { width: 100%; height: 160px; object-fit: cover; }
.sim-body { padding: 13px 15px 15px; }
.sim-price { font-size: 1.1rem; font-weight: 800; color: var(--hr-text-dark); }
.sim-addr { margin-top: 4px; font-size: 0.95rem; }
.sim-addr a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.sim-addr a:hover { text-decoration: underline; }
.sim-meta { margin-top: 6px; font-size: 0.82rem; color: var(--hr-text-muted); }
.sim-office { margin-top: 6px; font-size: 0.78rem; color: var(--hr-text-muted); }

/* ── two-column layout with the agent rail ──────────────────────────────── */

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 316px;
  gap: 30px; align-items: start;
}
.col-main { min-width: 0; }

/* ── sections ───────────────────────────────────────────────────────────── */

.section { padding: 32px 0 0; }
.section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; color: var(--hr-text-dark);
}
.section .lede {
  margin-bottom: 16px; color: var(--hr-text-muted); font-size: 0.96rem; max-width: 72ch;
}
.section h3 {
  font-size: 1rem; font-weight: 700; color: var(--hr-text-dark);
  margin: 20px 0 8px;
}

.cards { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow-card);
}
.card .card-label {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 700; color: var(--hr-text-muted); margin-bottom: 6px;
}
.card .card-value { font-size: 1.24rem; font-weight: 800; color: var(--hr-text-dark); line-height: 1.25; }
.card .card-meta { margin-top: 5px; font-size: 0.8rem; color: var(--hr-text-muted); }

.snapshot-note, .remarks-source, .method-note {
  margin-top: 12px; font-size: 0.82rem; color: var(--hr-text-muted); max-width: 80ch;
}

.prose { font-size: 1.02rem; color: var(--hr-text-dark); }
.prose p { margin-bottom: 14px; max-width: 74ch; }

.loc-links { margin-top: 18px; }
.loc-links h3 {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hr-text-muted); margin: 0 0 8px; font-weight: 700;
}
.loc-links ul { list-style: none; }
.loc-links li { margin-bottom: 7px; }
.loc-links a { color: var(--accent-text); text-decoration: none; font-size: 0.95rem; }
.loc-links a:hover { text-decoration: underline; }

/* ── distance tables ────────────────────────────────────────────────────── */

.dist-panel {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 6px 18px 14px; margin-top: 14px;
}
.dist-group + .dist-group { border-top: 1px solid var(--hr-border); margin-top: 6px; padding-top: 8px; }
.dist-group h3 {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hr-text-muted); font-weight: 700; margin: 12px 0 4px;
}
.dist-table { width: 100%; border-collapse: collapse; }
.dist-table td { padding: 7px 0; font-size: 0.95rem; vertical-align: top; border-top: 1px solid var(--hr-border); }
.dist-group h3 + .dist-table tr:first-child td { border-top: 0; }
.dist-name { color: var(--hr-text-dark); font-weight: 600; }
.dist-where { display: block; font-size: 0.82rem; color: var(--hr-text-muted); font-weight: 400; }
.dist-mi { text-align: right; white-space: nowrap; font-weight: 800; color: var(--hr-text-dark); }
.dist-mi small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--hr-text-muted); }

/* ── local area ─────────────────────────────────────────────────────────── */

.local-panel {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 20px 22px; margin-top: 14px;
}
.local-panel h3:first-child { margin-top: 0; }
.checklist { list-style: none; margin-top: 6px; }
.checklist li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 0.96rem; max-width: 74ch;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-gold);
}
.school-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; margin-top: 6px; }
.school-list li { font-size: 0.95rem; font-weight: 600; color: var(--hr-text-dark); }
.agent-note {
  margin-top: 16px; padding: 14px 16px; border-left: 4px solid var(--accent-gold);
  background: var(--page-bg); font-size: 0.96rem; color: var(--hr-text-dark);
  max-width: 74ch;
}

/* ── market context ─────────────────────────────────────────────────────── */

.mkt-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mkt-card {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card);
}
.mkt-card .card-label {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 700; color: var(--hr-text-muted); margin-bottom: 6px;
}
.mkt-card .card-value { font-size: 1.24rem; font-weight: 800; color: var(--hr-text-dark); }
.mkt-card .card-meta { margin-top: 5px; font-size: 0.8rem; color: var(--hr-text-muted); }

/* ── comparable-sales offer ─────────────────────────────────────────────── */

.comps {
  margin-top: 32px; background: var(--card-bg);
  border: 1px solid var(--hr-border); border-left: 5px solid var(--accent-gold);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-card);
}
.comps h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.36rem; font-weight: 700; margin-bottom: 8px; color: var(--hr-text-dark);
}
.comps p { font-size: 0.98rem; margin-bottom: 12px; max-width: 74ch; color: var(--hr-text-dark); }
.comps .fineprint { font-size: 0.83rem; color: var(--hr-text-muted); margin-bottom: 0; }
.comps .cta-actions { margin-top: 4px; }
.comps .btn-ghost { color: var(--hr-text-dark); border-color: var(--hr-text-dark); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); padding: 4px 18px; box-shadow: var(--shadow-card);
  margin-top: 14px;
}
.faq details { border-top: 1px solid var(--hr-border); }
.faq details:first-child { border-top: 0; }
.faq summary {
  cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 1rem;
  color: var(--hr-text-dark); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--hr-text-muted); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-a { padding: 0 0 14px; color: var(--hr-text-dark); font-size: 0.97rem; max-width: 76ch; }

/* ── the persistent agent rail ──────────────────────────────────────────── */

.rail { position: sticky; top: 92px; align-self: start; padding-top: 32px; }
.rail-card {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  padding: 22px 20px; text-align: center;
}
.rail-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--accent-gold); color: var(--btn-on-accent);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem; font-weight: 700; letter-spacing: 0.04em; margin: 0 auto 12px;
}
.rail-name { font-size: 1.08rem; font-weight: 800; color: var(--hr-text-dark); }
.rail-role { font-size: 0.84rem; color: var(--hr-text-muted); margin-top: 2px; }
.rail-pitch {
  margin-top: 12px; font-size: 0.94rem; color: var(--hr-text-dark);
  text-align: left; line-height: 1.55;
}
.rail-actions { margin-top: 16px; display: grid; gap: 9px; }
.rail-fine {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hr-border);
  font-size: 0.79rem; color: var(--hr-text-muted); text-align: left;
}

/* ── conversion ─────────────────────────────────────────────────────────── */

.cta { margin-top: 38px; background: var(--hr-blue-primary); color: #FFFFFF; padding: 34px 0; }
.cta h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: #FFFFFF; font-size: 1.5rem; margin-bottom: 8px;
}
.cta p { color: #FFFFFF; opacity: 0.94; font-size: 0.99rem; max-width: 70ch; }

/* ── link mesh ──────────────────────────────────────────────────────────── */

.lm-block { background: var(--panel-bg); border-top: 1px solid var(--hr-border); padding: 30px 0 12px; }
.lm-block h2 { font-size: 1.28rem; font-weight: 800; margin-bottom: 6px; color: var(--hr-text-dark); }
.lm-block .lm-intro { margin-bottom: 18px; color: var(--hr-text-muted); font-size: 0.95rem; }
.lm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 22px; }
.lm-col h3 {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hr-text-muted); margin-bottom: 8px; font-weight: 700;
}
.lm-col ul { list-style: none; }
.lm-col li { margin-bottom: 7px; line-height: 1.45; }
.lm-col a { color: var(--accent-text); text-decoration: none; font-size: 0.95rem; }
.lm-col a:hover { text-decoration: underline; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 26px; background: var(--panel-bg);
  border-top: 1px solid var(--hr-border); padding: 26px 0 34px;
}
.site-footer p { font-size: 0.82rem; color: var(--hr-text-muted); margin-bottom: 9px; max-width: 82ch; }
.site-footer .attrib { color: var(--hr-text-dark); font-size: 0.86rem; }
.site-footer .brokerage {
  margin-top: 6px; color: var(--hr-text-dark); font-size: 0.86rem; font-weight: 600;
}
.site-footer .brokerage a { color: var(--accent-text); }

/* ── sticky action bar ──────────────────────────────────────────────────── */

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--panel-bg); border-top: 1px solid var(--hr-border);
  box-shadow: 0 -6px 20px rgba(15,23,42,0.08);
}
.stickybar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.stickybar-txt { font-size: 0.92rem; font-weight: 600; color: var(--hr-text-dark); }
.stickybar-btns { display: flex; gap: 8px; flex-shrink: 0; }

/* ── hub pages ──────────────────────────────────────────────────────────── */

.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub-card {
  background: var(--card-bg); border: 1px solid var(--hr-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.hub-card img { width: 100%; height: 180px; object-fit: cover; }
.hub-card .hub-body { padding: 14px 16px 16px; }
.hub-card .hub-price { font-size: 1.12rem; font-weight: 800; color: var(--hr-text-dark); }
.hub-card .hub-addr { margin-top: 4px; font-size: 0.95rem; }
.hub-card .hub-addr a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.hub-card .hub-meta { margin-top: 6px; font-size: 0.82rem; color: var(--hr-text-muted); }
.hub-card .hub-office { margin-top: 6px; font-size: 0.78rem; color: var(--hr-text-muted); }

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .rail { position: static; padding-top: 30px; }
  .rail-card { max-width: 560px; }
}
@media (max-width: 900px) {
  .cards, .mkt-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid, .hub-grid, .sim-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .lead img { height: 300px; }
  .gallery-grid figure.thumb img { height: 140px; }
  .hero h1 { font-size: 2rem; }
}
@media (max-width: 620px) {
  .sim-grid { grid-template-columns: 1fr; }
  .pay-total { font-size: 1.7rem; }
  .map-frame { aspect-ratio: 4 / 3; }
  .hero h1 { font-size: 1.62rem; }
  .hero .hero-price { font-size: 1.6rem; }
  .hero .hero-ppsf { border-left: 0; padding-left: 0; }
  .cards, .mkt-grid { grid-template-columns: 1fr 1fr; }
  .school-list { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr; }
  /* Thumbnails stay two-up on a phone: one column of 48 photos is a mile of
     scrolling, and the lead image still spans the full width. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid figure.thumb img { height: 116px; }
  .site-header .wrap { flex-wrap: wrap; }
  .qs-item { flex: 1 1 33%; padding: 13px 8px; }
  .qs-val { font-size: 1.2rem; }
  .stickybar-txt { display: none; }
  .stickybar-in { justify-content: center; }
}