/* Bellbrook & Vale — first-party estate-agency template (S112).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking. */

:root {
  --ink: #17251f;
  --pine: #24473a;
  --pine-deep: #1b3529;
  --cream: #f7f4ec;
  --card: #fffdf8;
  --line: #d9d2c0;
  --brass: #8a6128;
  --brass-bright: #b8863c;
  --status: #4a6156;
  --radius: 10px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 10;
  background: var(--ink); color: var(--cream); padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

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

/* ---------- Header + navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.25rem; background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.wordmark {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
  text-decoration: none; color: var(--pine-deep); white-space: nowrap;
}
.nav-disclosure summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 600; padding: 0.5rem 1rem;
  border: 1.5px solid var(--pine); border-radius: var(--radius); color: var(--pine-deep);
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--pine); color: var(--cream); }
.nav-disclosure nav {
  position: absolute; right: 1rem; left: 1rem; top: calc(100% + 0.4rem); z-index: 9;
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.75rem; box-shadow: 0 10px 24px rgba(23, 37, 31, 0.14);
}
.nav-disclosure nav a:not(.button) {
  text-decoration: none; font-weight: 600; padding: 0.55rem 0.75rem; border-radius: 8px;
}
.nav-disclosure nav a:not(.button):hover { background: var(--cream); }

/* Desktop inline nav is OPTED INTO by main.js (matchMedia adds .nav-inline and sets [open]).
   A closed <details> does not render its children, so pure CSS cannot inline this menu at
   desktop widths — without JavaScript the summary button stays visible and usable instead. */
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav {
  position: static; flex-direction: row; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.7rem; }

.header-call { display: none; }
@media (max-width: 799px) {
  .site-header { gap: 0.6rem; }
  .header-call { display: inline-block; margin-left: auto; }
}
/* Three nowrap items must fit a 360px viewport: scale the row down, never clip the menu. */
@media (max-width: 479px) {
  .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; }
  .wordmark { font-size: 1.05rem; }
  .header-call { font-size: 0.9rem; }
  .nav-disclosure summary { padding: 0.42rem 0.75rem; font-size: 0.95rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 700; font-family: var(--sans); font-size: 1rem;
  background: var(--pine); color: var(--cream);
  border: 1.5px solid var(--pine); border-radius: var(--radius);
  padding: 0.8rem 1.4rem; cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.button:hover { background: var(--pine-deep); transform: translateY(-1px); }
.button-small { padding: 0.5rem 0.9rem; font-size: 0.95rem; }
.button-ghost { background: transparent; color: var(--pine-deep); }
.button-ghost:hover { background: rgba(36, 71, 58, 0.08); }
.button-light { background: var(--cream); color: var(--pine-deep); border-color: var(--cream); }
.button-light:hover { background: #fff; }
.call-link { font-weight: 700; color: var(--brass); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
/* Full-bleed editorial split: copy stays in the reading column, the property photograph
   runs to the browser edge with nothing framing it — an estate particular pinned to the
   page rather than a rounded product shot. The floating agent card and price-status tag
   sit ON the photograph, and the search card overlaps the hero/listings seam below. */
.hero { padding: 0; max-width: none; position: relative; }
.hero-inner { display: grid; gap: 0; align-items: stretch; }
.hero-copy {
  min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 6vw, 5rem);
}
.hero-media {
  margin: 0; overflow: hidden; position: relative; background: #e7e0cf;
  min-height: 20rem;
}
.hero-media-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #26382f; }
.hero-media-stage img, .hero-media-stage video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 42%; }
.hero-media-stage video { z-index: 1; }
.hero-media figcaption {
  position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0.7rem 1.1rem;
  color: #fff; background: linear-gradient(180deg, rgba(23,37,31,0) 0%, rgba(23,37,31,0.55) 55%, rgba(23,37,31,0.86) 100%);
  font-size: 0.72rem; line-height: 1.35;
}
.hero-media-credit { color: inherit; text-underline-offset: 0.16em; }
@media (min-width: 860px) {
  .hero-inner { grid-template-columns: minmax(24rem, 0.86fr) minmax(0, 1.14fr); }
}
@media (max-width: 859px) { .hero-media { aspect-ratio: 1.5; min-height: 0; } }

/* Rotated status tag pinned to the top-right corner of the photograph — a design motif
   (like a board tag), not a fabricated data point: no price or day-count is invented. */
.hero-tag {
  position: absolute; top: 1.5rem; right: -2.6rem; z-index: 2;
  transform: rotate(6deg);
  background: var(--brass-bright); color: var(--ink);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.5rem 3.2rem; box-shadow: 0 10px 22px rgba(23,37,31,0.28);
}
@media (max-width: 859px) { .hero-tag { top: 1rem; right: -2.4rem; font-size: 0.66rem; padding: 0.42rem 2.8rem; } }

/* Floating agent card overlaps the bottom-left corner of the photograph, reinforcing the
   "one named agent" promise made in the hero copy without inventing any statistic. */
.hero-agent {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; max-width: min(17rem, 68%);
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brass);
  border-radius: 0 0.6rem 0.6rem 0; padding: 0.85rem 1.05rem 0.95rem;
  box-shadow: 0 1rem 2rem rgba(23,37,31,0.28);
}
.hero-agent-mark {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--pine-deep); color: var(--cream); font-family: var(--serif);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.hero-agent-kicker { margin-top: 0.55rem; color: var(--brass); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-agent-title { margin-top: 0.2rem; font-family: var(--serif); font-size: 0.98rem; line-height: 1.2; color: var(--pine-deep); }
@media (max-width: 859px) { .hero-agent { left: 1rem; bottom: 1rem; max-width: 78%; padding: 0.75rem 0.95rem 0.85rem; } }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); max-width: 21ch; }
.hero-sub { margin-top: 1rem; font-size: 1.15rem; max-width: 46ch; color: #33443c; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero-trust { margin-top: 1rem; font-size: 0.92rem; color: var(--status); font-weight: 600; }

/* ---------- Search card ---------- */
/* A floating card that overlaps the hero/listings seam, instead of a flat full-width
   strip — it reads as an instrument placed on the page, not a bootstrap toolbar. */
.search-card {
  position: relative; z-index: 3;
  max-width: 54rem; margin: -1.6rem auto 0; padding: 1.35rem 1.5rem 1.55rem;
  background: var(--pine-deep); color: var(--cream);
  border-radius: 0.9rem; box-shadow: 0 1.75rem 3.25rem rgba(23,37,31,0.3);
}
.search-card h2 { font-size: 1rem; font-family: var(--serif); font-weight: 700; margin-bottom: 1.1rem; }
.search-form {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: end;
}
@media (min-width: 700px) { .search-form { grid-template-columns: 1fr 1fr 1fr auto; } }
.search-form .field label { color: var(--cream); font-size: 0.85rem; font-weight: 600; }
.search-form select {
  width: 100%; margin-top: 0.3rem; padding: 0.65rem 0.7rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px;
}
.search-form .button { border-color: var(--brass-bright); background: var(--brass-bright); color: var(--ink); }
.search-form .button:hover { background: #c8974e; }
@media (max-width: 859px) { .search-card { margin-top: -1.1rem; padding: 1.15rem 1.1rem 1.35rem; max-width: none; margin-left: 1rem; margin-right: 1rem; } }

/* ---------- Listings ---------- */
.listings { max-width: 68rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-head h2, .why h2, .similar h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
.listing-count { color: var(--status); font-weight: 600; }
.listing-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem;
}
@media (min-width: 620px) { .listing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .listing-grid { grid-template-columns: 1fr 1fr 1fr; } }
.listing-grid-narrow { max-width: 44rem; }
@media (min-width: 960px) { .listing-grid-narrow { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23, 37, 31, 0.12); }
.card-link { display: block; text-decoration: none; padding-bottom: 1.1rem; }
.card-status {
  display: inline-block; margin: 0.9rem 1.1rem 0;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--status);
}
.card-status-new { color: var(--brass); }
.card-status-offer { color: #7a4a2a; }
.card-price { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; margin: 0.15rem 1.1rem 0; }
.card-address { margin: 0.1rem 1.1rem 0; font-weight: 600; }
.card-meta { margin: 0.2rem 1.1rem 0; font-size: 0.92rem; color: var(--status); }
.listing-empty { margin-top: 1.5rem; padding: 1.25rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- CSS artwork (all imagery is authored gradients) ---------- */
.card-art { height: 170px; background-color: #e7e0cf; background-repeat: no-repeat; display: block; width: 100%; object-fit: cover;}
.gallery-main.card-art { height: 300px; }
/* ---------- Why / landlords / valuation band ---------- */
.why { max-width: 68rem; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .why-grid { grid-template-columns: 1fr 1fr 1fr; } }
.why-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.why-grid h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }

.landlords {
  max-width: 68rem; margin: 0 auto 2.5rem; padding: 1.6rem 1.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.landlords h2 { font-size: 1.4rem; }
.landlords p { max-width: 52ch; margin-top: 0.3rem; }

.valuation-band {
  background: var(--pine-deep); color: var(--cream);
  padding: 3rem 1.25rem; text-align: center;
}
.valuation-band h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.valuation-band p { max-width: 52ch; margin: 0.75rem auto 1.4rem; color: #d8e2da; }

/* ---------- Property page ---------- */
.property-page, .valuation-page { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--pine-deep); }
.breadcrumb a:hover { text-decoration: underline; }
.gallery { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.gallery-main { border-radius: var(--radius); }
.gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.gallery-thumbs .card-art { height: 110px; border-radius: 8px; }

.property-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
  margin-top: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.property-head h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 0.3rem; }
.property-head .card-status { margin: 0; }
.property-price { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--pine-deep); margin-top: 0.3rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.chip-row li {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.85rem; font-size: 0.9rem; font-weight: 600;
}
.property-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }

.property-body { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.75rem; }
@media (min-width: 860px) { .property-body { grid-template-columns: 1.6fr 1fr; } }
.property-body h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.property-body h3 { font-size: 1.15rem; margin: 1.2rem 0 0.4rem; }
.property-body p + p { margin-top: 0.75rem; }
.feature-list li { padding-left: 1.2rem; position: relative; margin-top: 0.35rem; }
.feature-list li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--brass); font-weight: 700; }

.details-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 1.2rem; }
.details-table div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.details-table div:last-child { border-bottom: 0; }
.details-table dt { color: var(--status); font-weight: 600; }
.details-table dd { font-weight: 700; }

/* ---------- Forms (preview-safe) ---------- */
.inquiry { margin-top: 2.5rem; padding: 1.75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.inquiry > p { max-width: 56ch; margin-top: 0.4rem; }
.inquiry-form { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 700px) { .inquiry-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--status); }
.field input, .field textarea {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.75rem;
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}
.inquiry-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--pine-deep); min-height: 1.4em; }

.similar { margin-top: 2.5rem; }

/* ---------- Valuation page ---------- */
.valuation-hero { padding: 1.5rem 0 1rem; }
.valuation-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.valuation-hero .hero-sub { max-width: 48ch; color: #33443c; }
.valuation-body { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .valuation-body { grid-template-columns: 1.5fr 1fr; } }
.valuation-body .inquiry-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-top: 0; align-self: start; }
.valuation-steps h2 { font-size: 1.4rem; }
.steps { counter-reset: step; margin-top: 1rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.2rem 3rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--brass);
}
.steps h3 { font-size: 1.1rem; }

/* ---------- Scroll reveal (S297) ----------
   One-shot entrance, gated behind .reveal-ready (added by JS only when motion is allowed and
   IntersectionObserver exists) so no-JS / reduced-motion renders everything visible. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }
.reveal-ready [data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Estate's own hero entrance (S297) ----------
   Each demo carries a DISTINCT hero reveal (owner law S297). Estate's is editorial: the copy rises
   line by line and the photograph is unveiled from within its frame (clip-path inset), so the hero
   reads as a page being *set*, not a slide-in. Pure CSS on load, one-shot (S121: no loops), and
   wrapped in `no-preference` so reduced-motion / no-CSS renders everything in place instantly. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: heroRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero-copy .eyebrow { animation-delay: 0.05s; }
  .hero-copy h1 { animation-delay: 0.14s; }
  .hero-copy .hero-sub { animation-delay: 0.28s; }
  .hero-copy .hero-actions { animation-delay: 0.4s; }
  .hero-copy .hero-trust { animation-delay: 0.5s; }
  .hero-media { animation: heroUnveil 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
  .search-card { animation: heroRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroUnveil {
  from { opacity: 0; clip-path: inset(0 0 22% 0); transform: scale(1.03); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

/* ---------- Loading intro (S297) — branded curtain, homepage only ---------- */
.intro {
  position: fixed; inset: 0; z-index: 9999; background: var(--cream);
  display: grid; place-items: center;
  animation: introLift 0.75s cubic-bezier(0.76, 0, 0.24, 1) 1.35s forwards;
}
.intro-mark { text-align: center; padding: 1rem; }
.intro-word {
  display: block; font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700; color: var(--pine-deep); opacity: 0; transform: translateY(12px);
  animation: introMark 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.intro-amp { color: var(--brass); }
.intro-rule { display: block; height: 2px; width: 0; background: var(--brass); margin: 1.1rem auto 0.95rem; animation: introRule 0.75s ease 0.55s forwards; }
.intro-sub { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--status); opacity: 0; animation: introMark 0.6s ease 0.95s forwards; }
.intro.intro-skip { display: none; }
@keyframes introMark { to { opacity: 1; transform: none; } }
@keyframes introRule { to { width: 190px; } }
@keyframes introLift { to { transform: translateY(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- Parallax media (S297) ---------- */
.sold-media { overflow: hidden; }
.sold-media img { transform: translateY(var(--parallax, 0)) scale(1.16); will-change: transform; }

/* ---------- Footer (S297 — rich multi-column standard) ----------
   Four columns — brand+contact, pages, trade resources, legal/redress/CMP — over the ink ground,
   with a ruled bottom bar carrying the honesty note and the Neubor attribution last. The old
   footer was a two-item flex row; this is the "actual working website" bottom the owner asked for. */
.site-footer {
  background: var(--ink); color: #cfd8d0;
  padding: 2.75rem 1.25rem 1.75rem; margin-top: 0;
}
.footer-cols {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr; gap: 1.75rem 2rem;
}
.footer-brand { max-width: 40ch; }
.wordmark-footer { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--cream); margin-bottom: 0.4rem; }
.footer-line { font-size: 0.9rem; color: #9aa89e; margin-bottom: 0.85rem; }
.footer-contact { font-style: normal; font-size: 0.9rem; line-height: 1.6; }
.footer-contact p { margin: 0.1rem 0; }
.footer-hours { color: #9aa89e; }
.footer-mail { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 2px; }
footer .call-link { color: var(--brass-bright); }
.footer-heading {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--cream); margin-bottom: 0.7rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-nav a { color: #cfd8d0; text-decoration: none; font-size: 0.9rem; line-height: 1.35; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.footer-bar {
  max-width: 1120px; margin: 1.9rem auto 0; padding-top: 1.3rem;
  border-top: 1px solid rgba(247, 244, 236, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: end;
}
.footer-truth { max-width: 60ch; font-size: 0.82rem; color: #9aa89e; }
.footer-powered { font-size: 0.85rem; opacity: 0.85; }
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------- Legal / privacy page (S297) ---------- */
.legal-page { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
.legal-hero { padding: 2.75rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0.5rem 0; }
.legal-body { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; padding: 2rem 0 3rem; align-items: start; }
.legal-index { position: sticky; top: 1.25rem; }
.legal-index h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--status); font-family: var(--sans); }
.legal-index ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.legal-index a { color: var(--pine-deep); text-decoration: none; font-size: 0.92rem; }
.legal-index a:hover { text-decoration: underline; text-underline-offset: 2px; }
.legal-content section { margin-bottom: 1.9rem; }
.legal-content h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.legal-content p { max-width: 68ch; margin-bottom: 0.7rem; }
.legal-content a { color: var(--brass); text-underline-offset: 2px; }
.legal-note { font-size: 0.86rem; color: var(--status); border-top: 1px solid var(--line); padding-top: 1rem; max-width: 68ch; }
@media (max-width: 720px) { .legal-body { grid-template-columns: 1fr; } .legal-index { position: static; } }

/* ---------- FAQ page (S297) ----------
   FORM NOTE (owner law: no two demos alike, even inside a shared feature). Estate's FAQ is a
   single ruled column of native <details> accordions with a serif question and a sticky
   "book a valuation" aside — the editorial estate voice, not the florist's bordered cards. */
.faq-page { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
.faq-hero { padding: 2.75rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.faq-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0.5rem 0; }
.faq-body { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; padding: 2rem 0 3rem; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-family: var(--serif); font-size: 1.12rem; color: var(--pine-deep); font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.4rem; color: var(--brass); line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--brass); }
.faq-answer { padding: 0 2.5rem 1.2rem 0; }
.faq-answer p { max-width: 68ch; color: var(--ink); }
.faq-answer a { color: var(--brass); text-underline-offset: 2px; }
.faq-aside {
  position: sticky; top: 1.25rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
}
.faq-aside h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.faq-aside p { font-size: 0.95rem; margin-bottom: 1rem; }
.faq-aside .button { width: 100%; text-align: center; }
.faq-call { font-size: 0.9rem; color: var(--status); margin-top: 0.9rem; }
@media (max-width: 720px) { .faq-body { grid-template-columns: 1fr; } .faq-aside { position: static; } }

/* ---------- Content pages (S297: selling / buying / landlords / guides / about / contact) ---------- */
.content-page { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
.content-hero { padding: 2.75rem 0 1.75rem; border-bottom: 1px solid var(--line); }
.content-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0.5rem 0; }
.content-hero .hero-sub { max-width: 60ch; }
.content-hero .hero-sub, .legal-hero .hero-sub { color: #33443c; }
.content-hero .hero-actions { margin-top: 1.3rem; }
.content-page > section { padding: 2.4rem 0; }
.about-media img { display: block; width: 100%; height: auto; }
.market-lead { color: var(--status); }
.market-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.2rem; }
.market-list h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.market-list p { max-width: 48ch; color: var(--ink); }
.steps-numbered { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1.05rem; margin-top: 1.4rem; }
.steps-numbered > li { position: relative; padding-left: 3.1rem; }
.steps-numbered > li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.05rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--pine); color: var(--cream);
  font-family: var(--serif); font-weight: 700; display: grid; place-items: center;
}
.steps-numbered h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
@media (max-width: 640px) { .market-list { grid-template-columns: 1fr; } }

/* ---------- Homepage services band (S297) — premium hover-lift cards ---------- */
.services { padding: 3rem 1.25rem; max-width: 1180px; margin: 0 auto; }
.services-grid { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.service-card a {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.4rem 1.3rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.service-card a:hover, .service-card a:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 40px -24px rgba(23, 37, 31, 0.5); border-color: var(--pine); }
.service-index { font-family: var(--serif); font-size: 0.95rem; color: var(--brass); font-weight: 700; letter-spacing: 0.04em; }
.service-card h3 { font-size: 1.2rem; margin: 0.6rem 0 0.4rem; color: var(--pine-deep); }
.service-card p { font-size: 0.92rem; color: var(--status); flex: 1; }
.service-go { margin-top: 0.9rem; font-size: 1.3rem; color: var(--brass); transition: transform 0.35s ease; }
.service-card a:hover .service-go { transform: translateX(6px); }
.service-card-accent a { background: var(--pine-deep); color: var(--cream); border-color: var(--pine-deep); }
.service-card-accent h3 { color: var(--cream); }
.service-card-accent p { color: #cfd8d0; }
.service-card-accent .service-index, .service-card-accent .service-go { color: var(--brass-bright); }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .services-grid { grid-template-columns: 1fr; } }

/* ---------- Deep footer (S297) — trust strip · 5 columns · reg line ---------- */
.footer-cols { grid-template-columns: 1.6fr repeat(4, 1fr); max-width: 1160px; }
.footer-trust { max-width: 1160px; margin: 0 auto 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(247, 244, 236, 0.14); }
.footer-trust-inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: space-between; }
.footer-portals-label { font-size: 0.82rem; color: #9aa89e; margin-bottom: 0.5rem; }
.footer-portals ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; padding: 0; margin: 0; }
.footer-portals ul li { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--cream); }
.footer-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; padding: 0; margin: 0; }
.footer-badges li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: #cfd8d0; }
.fbadge { display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; padding: 0 0.4rem; border: 1px solid var(--brass-bright); border-radius: 4px; color: var(--brass-bright); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; }
.footer-social { margin-top: 0.9rem; font-size: 0.82rem; color: #9aa89e; }
.footer-social span { color: var(--brass-bright); }
.footer-bar { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.footer-reg { max-width: 92ch; font-size: 0.76rem; color: #8f9d92; }
.footer-truth { max-width: 92ch; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

/* ---------- Contact page (S297) ---------- */
.contact-body { display: grid; grid-template-columns: 340px 1fr; gap: 2.5rem; padding: 2rem 0 3rem; align-items: start; }
.contact-details h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.contact-lines { font-style: normal; }
.contact-lines p { margin-bottom: 0.7rem; line-height: 1.55; }
.contact-lines .footer-hours { color: var(--status); }
.contact-lines .footer-mail, .contact-lines .call-link { color: var(--brass); }
.contact-note { font-size: 0.85rem; color: var(--status); margin-top: 1rem; }
.contact-body .inquiry-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
@media (max-width: 720px) { .contact-body { grid-template-columns: 1fr; } }

/* ---------- Meet your agent band (S297) — the human element ---------- */
.agent-band { display: grid; grid-template-columns: 360px 1fr; gap: 3rem; align-items: center; max-width: 1120px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.agent-portrait { margin: 0; }
.agent-portrait img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; box-shadow: 0 24px 50px -30px rgba(23, 37, 31, 0.55); }
.agent-portrait figcaption { font-size: 0.76rem; color: var(--status); margin-top: 0.55rem; }
.agent-copy h2 { font-size: clamp(1.6rem, 3.5vw, 2.35rem); margin: 0.4rem 0 0.85rem; }
.agent-copy p { max-width: 56ch; color: var(--ink); }
.agent-points { list-style: none; padding: 0; margin: 1.15rem 0 1.5rem; display: grid; gap: 0.5rem; }
.agent-points li { position: relative; padding-left: 1.7rem; color: var(--pine-deep); }
.agent-points li::before { content: "\2713"; position: absolute; left: 0; color: var(--brass); font-weight: 700; }
@media (max-width: 720px) { .agent-band { grid-template-columns: 1fr; gap: 1.75rem; } .agent-portrait { max-width: 300px; } }

/* ---------- Sticky header + fuller nav bar (S297) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(23, 37, 31, 0.04); }
.nav-disclosure.nav-inline nav { gap: 0.1rem; align-items: center; flex-wrap: nowrap; }
.nav-disclosure.nav-inline nav a:not(.button) { padding: 0.4rem 0.5rem; font-size: 0.9rem; white-space: nowrap; }
.nav-disclosure.nav-inline nav a.button { margin-left: 0.45rem; }
@media (min-width: 1080px) and (max-width: 1280px) {
  .nav-disclosure.nav-inline nav a:not(.button) { padding: 0.35rem 0.42rem; font-size: 0.85rem; }
  .header-call { display: none; }
}

/* ---------- Client stories (S287) — illustrative, see footer notice ----------
   Featured-first (one wide testimonial + two standard) so the row breaks its own rhythm rather
   than reading as a third equal 3-up grid (the harsh-CD "repeated grid" tell). Serif quotes keep
   the editorial voice; the pine featured card and brass rule make the warm accent structural. */
.stories { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.75rem; }
.stories-head { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
@media (min-width: 720px) { .stories-head { grid-template-columns: 1fr auto; align-items: end; } }
.stories-head h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-top: 0.35rem; }
.stories-score { display: grid; gap: 0.15rem; align-content: start; }
@media (min-width: 720px) { .stories-score { justify-items: end; text-align: right; } }
.stories-stars { color: var(--brass-bright); font-size: 1.15rem; letter-spacing: 0.12em; }
.stories-num { font-size: 1rem; color: var(--status); }
.stories-num strong { font-family: var(--serif); font-size: 2rem; color: var(--pine-deep); font-weight: 700; }
.stories-sub { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--status); }
.stories-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .stories-grid { grid-template-columns: 1.5fr 1fr; grid-auto-rows: 1fr; } }
.story {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: 0.6rem; align-content: start;
}
.story-stars { color: var(--brass-bright); font-size: 0.9rem; letter-spacing: 0.1em; }
.story blockquote { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.story-by { font-size: 0.85rem; font-weight: 700; color: var(--pine-deep); }
.story-by span { color: var(--status); font-weight: 400; }
/* Featured: wider (spans both columns as the lead), tinted pine, larger pull-quote. */
@media (min-width: 820px) { .story-featured { grid-column: 1 / -1; } }
.story-featured {
  background: var(--pine-deep); border-color: var(--pine-deep); color: var(--cream);
  padding: 1.7rem 1.8rem 1.8rem;
}
.story-featured .story-stars { color: var(--brass-bright); }
.story-featured blockquote { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; color: #f4efe2; }
.story-featured .story-by { color: #cbb489; }
.story-featured .story-by span { color: #9fb0a6; }

/* Standards row — honest, illustrative trust signals (not the trademarked marks of any named body). */
.standards {
  margin-top: 1.6rem; display: grid; gap: 1rem 1.4rem; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
@media (min-width: 760px) { .standards { grid-template-columns: repeat(4, 1fr); } }
.standards li { display: flex; gap: 0.7rem; align-items: center; }
.standard-mark {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--cream); background: var(--pine); font-family: var(--sans);
}
.standard-copy { display: grid; line-height: 1.25; }
.standard-copy strong { font-size: 0.92rem; color: var(--ink); }
.standard-copy small { font-size: 0.76rem; color: var(--status); }

/* ---------- Motion (S287) — the estate comes alive: a slow Ken-Burns on the hero, cards + stories
   settle in as they enter. Native view()/compositor-only (no JS), transform/opacity only → zero CLS.
   Every 0%/at-rest state == the static layout, so the fold paints its exact self at load. ---------- */
@keyframes bv-kenburns { from { transform: scale(1.075); } to { transform: scale(1); } }
@keyframes bv-enter { from { clip-path: inset(0 0 100% 0); transform: translateY(10px) scale(0.985); opacity: 0; } to { clip-path: inset(0); transform: translateY(0) scale(1); opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media img { animation: bv-kenburns linear both; animation-timeline: view(); animation-range: cover; transform-origin: 58% 38%; }
    .listing-grid > .card, .why-grid > li, .stories-grid > .story, .standards > li {
      animation: bv-enter linear both; animation-timeline: view(); animation-range: entry 4% cover 26%;
    }
    .listing-grid > .card:nth-child(3n+2), .why-grid > li:nth-child(2), .stories-grid > .story:nth-child(2) { animation-range: entry 10% cover 30%; }
    .listing-grid > .card:nth-child(3n+3), .why-grid > li:nth-child(3), .stories-grid > .story:nth-child(3) { animation-range: entry 15% cover 34%; }
  }
}

/* Card image zoom on hover/focus (premium gallery feel; hover/focus only — no idle, no CLS). */
.card { overflow: hidden; }
.card .card-art { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-art, .card:focus-within .card-art { transform: scale(1.05); }

/* ---- S9+2 signature #1 — a 3D card TILT on the listing cards. Fine-pointer only (a touchscreen
   has no hover to drive it), perspective lives on the grid so every card tilts around its own
   centre rather than the page's. transform-only, hover/focus-triggered -> no idle CPU. */
@media (hover: hover) and (pointer: fine) {
  .listing-grid { perspective: 1400px; }
  .card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
  }
  .card:hover, .card:focus-within {
    transform: perspective(1400px) rotateX(5deg) rotateY(-7deg) translateY(-6px);
    box-shadow: 0 26px 48px rgba(23, 37, 31, 0.24);
  }
}

/* ---- S9+2 signature #2 — a "SOLD" stamp presses onto the recently-sold band as it scrolls into
   view: overshoots big and rotated, then settles at a fixed diagonal, like an ink stamp landing
   on paper. The resting rotate is a STATIC rule (not just the animation's end state) so the
   diagonal reads correctly even under reduced motion. Distinct family from sold-chip-enter/
   sold-kenburns already on this band — layered on TOP of them, not replacing either. */
.sold-flag { transform: rotate(-8deg); }
@keyframes sold-stamp-press {
  0%   { opacity: 0; transform: rotate(-32deg) scale(2.6); }
  55%  { opacity: 1; transform: rotate(-3deg) scale(0.9); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sold-flag {
      animation: sold-stamp-press linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
    .sold-chip:nth-child(2) .sold-flag { animation-range: entry 14% cover 34%; }
    .sold-chip:nth-child(3) .sold-flag { animation-range: entry 22% cover 38%; }
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover, .card:hover, .card:focus-within { transform: none; }
  .hero-media img, .listing-grid > .card, .why-grid > li, .stories-grid > .story, .standards > li {
    animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important;
  }
  .hero-media-stage video { display: none; }
  .card .card-art, .card:hover .card-art, .card:focus-within .card-art { transition: none; transform: none; }
  .sold-flag { animation: none !important; opacity: 1 !important; transform: rotate(-8deg) !important; }
}

/* Build credit — carried by every template in this library, matching the deployed demos.
   Colour is inherited rather than fixed so this single rule works on every footer palette. */
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; opacity: 0.8; }
.footer-powered a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { opacity: 0.85; }

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* A call link sitting beside a button is a standalone tap target, not prose (S116). */
@media (max-width: 799px) {
  .property-cta .call-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. These two must name THIS template's own variables — the 20
   templates do not share a vocabulary. check-library-a11y.mjs fails the build without both.
   ⚠ A boundary token goes to INK even when its value is light. */
html[data-a11y-contrast="high"] {
  --ink: #000; --pine: #000; --pine-deep: #000; --brass: #000; --brass-bright: #000;
  --status: #000; --line: #000;
  --cream: #fff; --card: #fff;
}
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] footer a,
html[data-a11y-contrast="high"] .footer-line,
html[data-a11y-contrast="high"] .footer-hours,
html[data-a11y-contrast="high"] .footer-heading,
html[data-a11y-contrast="high"] .footer-truth,
html[data-a11y-contrast="high"] .footer-powered { color: #fff; }

/* Okabe-Ito. ⚠ Pine green and brass is a green/yellow pair — the deuteranopia collapse. */
html[data-a11y-colour="safe"] {
  --pine: #23282a; --pine-deep: #16191a; --brass: #0072b2; --brass-bright: #3a97ce;
  --status: #005a8d;
}

/* S290 (S288 Kimi plan §3, rank 1) — RECENTLY SOLD statement band. Reuses the listing-card motif
   (Sold flag + address + figure) as a full-bleed recent-sales beat over a real UK terraced street.
   Warm/editorial, in-token, gate-safe: cream ink on a heavy pine scrim; chips sit in the scrimmed
   left column so their text keeps AA over the photo. No idle animation (S121). */
.sold-band { position: relative; isolation: isolate; overflow: hidden; background: var(--pine-deep); color: var(--cream); }
.sold-media { position: absolute; inset: 0; z-index: -2; }
.sold-media img { width: 100%; height: 100%; object-fit: cover; }
.sold-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(102deg, var(--pine-deep) 0%, color-mix(in oklab, var(--pine-deep) 90%, transparent) 46%, color-mix(in oklab, var(--pine-deep) 30%, transparent) 100%);
}
.sold-inner { max-width: 1100px; margin: 0 auto; padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.25rem, 4vw, 2.5rem); }
.eyebrow-light { color: var(--brass-bright); }
.sold-band h2 { font-family: var(--serif); font-size: clamp(1.75rem, 4vw, 2.7rem); line-height: 1.08; margin: .35rem 0 .65rem; max-width: 20ch; }
.sold-sub { max-width: 48ch; color: color-mix(in oklab, var(--cream) 82%, transparent); margin: 0 0 1.6rem; }
.sold-list { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; margin: 0; }
.sold-chip { display: flex; align-items: center; gap: .65rem; background: color-mix(in oklab, var(--ink) 66%, transparent); border: 1px solid color-mix(in oklab, var(--cream) 18%, transparent); border-radius: var(--radius); padding: .55rem .85rem; }
.sold-flag { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); background: var(--brass-bright); padding: .22rem .5rem; border-radius: 5px; }
.sold-detail { display: flex; flex-direction: column; line-height: 1.25; }
.sold-addr { font-weight: 600; }
.sold-fig { font-size: .82rem; color: color-mix(in oklab, var(--cream) 72%, transparent); }
@media (max-width: 620px) { .sold-chip { flex: 1 1 100%; } }

/* S290 (Kimi effects §2) — scroll-linked cinematic pace on the Recently-sold band: a slow Ken-Burns
   on the street photo + a staggered rise of the SOLD chips as the band enters view. Below-fold, so
   view() is safe; transform/opacity only; prefers-reduced-motion strips it (chips fall back to
   fully visible so nothing is ever stuck at opacity:0). */
.sold-media img {
  transform: scale(1.1);
  transform-origin: 55% 40%;
  animation: sold-kenburns linear both;
  animation-timeline: view();
  animation-range: cover;
}
@keyframes sold-kenburns { to { transform: scale(1); } }
.sold-chip {
  opacity: 0;
  transform: translateY(18px);
  animation: sold-chip-enter linear both;
  animation-timeline: view();
  animation-range: entry 6% cover 30%;
}
.sold-chip:nth-child(2) { animation-range: entry 14% cover 34%; }
.sold-chip:nth-child(3) { animation-range: entry 22% cover 38%; }
@keyframes sold-chip-enter { to { opacity: 1; transform: translateY(0); } }
.estate-utility { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .48rem clamp(1rem, 4vw, 3rem); color: var(--cream); background: var(--pine-deep); font-size: .72rem; letter-spacing: .04em; }
.estate-utility a { color: var(--cream); font-weight: 800; text-decoration: none; }
.estate-utility__label { color: var(--brass-bright); font-weight: 800; letter-spacing: .12em; }
@media (max-width: 620px) { .estate-utility { align-items: flex-start; flex-direction: column; gap: .2rem; padding-block: .6rem; } }
@media (prefers-reduced-motion: reduce) {
  .sold-media img, .sold-chip { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* S301 parity repair — keep property-market controls in the opening viewport. */
.estate-hero-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem; width:min(72rem,calc(100% - 2rem)); margin:-1.25rem auto 0; position:relative; z-index:4; padding:.35rem; background:#fff; border:1px solid rgba(23,37,31,.16); box-shadow:0 .9rem 2rem rgba(23,37,31,.12); }
.estate-hero-controls a { display:inline-flex; align-items:center; min-height:2.4rem; padding:.45rem .78rem; color:#17251f; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.estate-hero-controls a:hover, .estate-hero-controls a.is-active { background:#17251f; color:#fff; }
.estate-hero-controls a:last-child { margin-left:auto; color:#476d3c; }
@media (max-width:680px) { .estate-hero-controls { width:calc(100% - 1rem); margin:-.7rem auto 0; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; } .estate-hero-controls a { white-space:nowrap; font-size:.58rem; } .estate-hero-controls a:last-child { margin-left:0; } }

/* S301 search-first closeout — keep the property instrument visually attached to the
   opening seam, as in the benchmark, while the hero remains a warm editorial split. */
.search-card { margin-top:-2.8rem; max-width:64rem; border-top:4px solid var(--brass); border-radius:.2rem; }
.search-card::before { display:block; margin-bottom:.6rem; color:var(--brass); content:"BELLBROOK / LIVE SEARCH PREVIEW"; font-size:.58rem; font-weight:900; letter-spacing:.12em; }
@media (max-width:680px) { .search-card { margin-top:-1.25rem; } }

/* S301 property-parity closeout — Bellbrook's market utility is burgundy-led and the first image
   role is an interior viewing moment. Pull the search instrument closer to that opening seam. */
.estate-utility { background:#5b1938; }
.estate-utility__label, .estate-utility a { color:#f5d4a0; }
.hero-media img { object-position:52% 48%; filter:saturate(.9) contrast(1.04); }
@media (min-width:860px) {
  .hero { overflow:hidden; }
  .hero-inner { min-height:clamp(30rem,52vh,38rem); }
  .hero-media { min-height:30rem; }
  .search-card { margin-top:-4.1rem; }
}

/* S301 reference-detail closeout — Northwood opens with a dimmed privacy choice over the
   property image. This neutral, preview-only panel keeps that layer honest and dismissible. */
.estate-privacy-backdrop { position:fixed; inset:0; z-index:88; background:rgba(22,12,34,.48); }
.estate-privacy { position:fixed; top:50%; left:50%; z-index:89; width:min(27.5rem,calc(100% - 2rem)); padding:1.35rem 1.5rem 1.2rem; transform:translate(-50%,-50%); background:#fff; color:#39254b; border-radius:.3rem; box-shadow:0 1rem 3rem rgba(0,0,0,.32); }
.estate-privacy h2 { color:#39254b; font-size:1.12rem; }
.estate-privacy p { margin-top:.75rem; color:#5b4a68; font-size:.82rem; line-height:1.55; }
.estate-privacy-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1rem; }
.estate-privacy-actions button { min-height:2.65rem; padding:.55rem .75rem; border:1px solid #9b174f; border-radius:.25rem; background:#fff; color:#941347; font:800 .76rem/1.2 var(--sans); text-transform:capitalize; cursor:pointer; }
.estate-privacy-actions button:last-child { grid-column:1 / -1; background:#941347; color:#fff; }
@media (max-width:560px) { .estate-privacy { padding:1.1rem; } .estate-privacy p { font-size:.76rem; } }
/* S301 universal parity repair — tighten the listing instrument against the opening
   seam on desktop, then put utility shortcuts and search before the property image on
   narrow screens so the market task is visible in the first viewport. */
@media (min-width:860px) {
  .hero-inner { min-height:clamp(27rem,46vh,34rem); grid-template-columns:minmax(22rem,.76fr) minmax(0,1.24fr); }
  .hero-copy { padding-top:3rem; padding-bottom:3.5rem; }
  .hero h1 { font-size:clamp(2.15rem,4.35vw,3.35rem); max-width:17ch; }
  .hero-sub { max-width:40ch; font-size:1.02rem; }
  .search-card { max-width:72rem; margin-top:-3.25rem; }
}
@media (max-width:859px) {
  .hero { display:flex; flex-direction:column; }
  .hero-inner { display:contents; }
  .hero-copy { order:1; padding-top:2.35rem; padding-bottom:1.8rem; }
  .hero h1 { font-size:clamp(2rem,8.6vw,2.55rem); }
  .hero-sub { margin-top:.8rem; font-size:1rem; }
  .hero-actions { margin-top:1.1rem; }
  .hero-trust { margin-top:.75rem; }
  .estate-hero-controls { order:2; }
  .search-card { order:3; margin-top:.55rem; }
  .hero-media { order:4; }
}

/* S301 parity refinement — Northwood's first impression is a photographic property moment
   with the message sitting over the image, not a conventional split landing page. Keep
   Bellbrook's fictional rebrand, agent card and search instrument, but restore that opening
   grammar on both viewports so the first frame carries the same visual weight as the reference. */
@media (min-width:860px) {
  .hero-inner {
    display:block;
    position:relative;
    min-height:clamp(35rem,62vh,43rem);
  }
  .hero-media {
    position:absolute;
    inset:0;
    min-height:0;
    background:#2b1a37;
  }
  .hero-media img {
    aspect-ratio:auto;
    object-position:54% 47%;
    filter:saturate(.86) brightness(.78) contrast(1.05);
  }
  .hero-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(32,17,43,.88) 0%,rgba(32,17,43,.62) 34%,rgba(32,17,43,.12) 68%,rgba(32,17,43,.28) 100%),linear-gradient(0deg,rgba(32,17,43,.58),transparent 42%);
    pointer-events:none;
  }
  .hero-copy {
    position:relative;
    z-index:2;
    min-height:clamp(35rem,62vh,43rem);
    max-width:40rem;
    justify-content:flex-end;
    padding:clamp(8rem,15vh,11rem) 1.5rem 5.8rem clamp(1.25rem,7vw,6rem);
    color:#fff;
  }
  .hero h1 { color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.28); }
  .hero-sub { color:rgba(255,255,255,.9); }
  .hero-trust { color:#f5d4a0; }
  .hero .button-ghost { color:#fff; border-color:rgba(255,255,255,.72); }
  .hero .button-ghost:hover { background:rgba(255,255,255,.14); }
  .hero-agent { left:auto; right:clamp(1.25rem,5vw,4rem); bottom:2rem; }
  .hero-tag { right:1rem; padding-inline:1.2rem; }
  .hero-media figcaption { z-index:1; }
  .estate-hero-controls { margin-top:-1.25rem; }
  .search-card { margin-top:.9rem; }
}
@media (max-width:859px) {
  .hero { display:block; background:#2b1a37; overflow:hidden; }
  .hero-inner { display:block; position:relative; min-height:min(39rem,calc(100vh - 9rem)); }
  .hero-media { position:absolute; inset:0; min-height:0; aspect-ratio:auto; }
  .hero-media img { height:100%; aspect-ratio:auto; object-position:58% 44%; filter:saturate(.86) brightness(.72) contrast(1.04); }
  .hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(32,17,43,.18),rgba(32,17,43,.22) 35%,rgba(32,17,43,.9) 100%); pointer-events:none; }
  .hero-copy { position:relative; z-index:2; min-height:min(39rem,calc(100vh - 9rem)); max-width:34rem; justify-content:flex-end; padding:7rem 1.25rem 4.6rem; color:#fff; }
  .hero h1 { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.3); }
  .hero-sub { color:rgba(255,255,255,.9); }
  .hero-trust { color:#f5d4a0; }
  .hero .button-ghost { color:#fff; border-color:rgba(255,255,255,.72); }
  /* The desktop floating agent card is a useful image overlap; on a narrow hero it collides
     with the CTA and trust line, so the same promise remains in the copy without a second
     competing layer. */
  .hero-agent { display:none; }
  .hero-media figcaption { z-index:1; }
  .estate-hero-controls { margin-top:-.7rem; }
  .search-card { margin-top:.55rem; }
}

/* S301 visual gate repair — keep the selling proposition and market shortcuts legible at the
   narrow capture width. The small kicker sits over a photographic frame, so it needs its own
   contrast plate; the final shortcut is given a full row rather than hiding beneath the fixed
   accessibility control. */
.hero .eyebrow {
  width: fit-content;
  max-width: 100%;
  padding: .28rem .48rem;
  color: #fff7e9;
  background: rgba(32, 17, 43, .72);
  border-left: 3px solid #f5d4a0;
  text-shadow: none;
}
@media (max-width: 480px) {
  .estate-hero-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100% - 1rem);
    overflow: visible;
    /* The shared LifeBuoy sits in the lower-right corner. Reserve its footprint
       so the fourth shortcut remains a complete, tappable label at 390px. */
    padding: .3rem 4.35rem .3rem .3rem;
  }
  .estate-hero-controls a {
    justify-content: center;
    min-width: 0;
    padding: .5rem .2rem;
    font-size: .54rem;
    letter-spacing: .04em;
    text-align: center;
  }
  .estate-hero-controls a:last-child {
    grid-column: 1 / -1;
    margin-left: 0;
    border-top: 1px solid rgba(23, 37, 31, .12);
    color: #476d3c;
  }
}

/* The photographic-home rules above intentionally set `.hero-sub` to cream for the
   landing hero. The FAQ lead is editorial copy on the paper canvas, so restore the
   ink pair explicitly instead of inheriting the hero treatment. */
.faq-hero .hero-sub { color: #33443c; }