/* ==========================================================================
   alexascalone.com — components. Requires tokens.css first.

   COMPLIANCE-DRIVEN DESIGN NOTE (FL Rule 61J2-10.025)
   The rule requires the licensed brokerage name adjacent to every point of
   contact, AND the licensee's personal name to be no larger than the
   brokerage name. So:
     - .lockup__name and .lockup__firm are locked to the SAME font-size via
       one shared custom property. Do not give the name its own size.
     - The oversized hero headline is a VALUE STATEMENT, never her name. That
       keeps the display type dramatic without breaking the rule.
   Changing either of these is a compliance regression, not a style tweak.
   ========================================================================== */

/* Pending-fact marker — deliberately ugly so an unfinished build is obvious. */
.pending {
  background: #FFE8A3; color: #6B4A00; border: 1px dashed #A9761B;
  padding: 0 .35em; font-family: var(--font-body); font-size: .85em;
  font-weight: 600; border-radius: 2px; white-space: nowrap;
}

/* ==========================================================================
   Brand lockup — name + firm at enforced parity
   ========================================================================== */

.lockup { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; }
.lockup { --lockup-size: 1.0625rem; }          /* the single shared size */

.lockup__name,
.lockup__firm {
  font-size: var(--lockup-size);                /* parity — see note above */
  line-height: 1.2;
  font-family: var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.lockup__name { font-weight: 700; color: var(--navy); }
.lockup__firm { font-weight: 400; color: var(--muted); letter-spacing: .05em; }
.lockup__rule { width: 2rem; border-top: 1px solid var(--brass); margin: .1rem 0; }

.on-dark .lockup__name, .site-header--over .lockup__name { color: var(--white); }
.on-dark .lockup__firm, .site-header--over .lockup__firm { color: rgba(255,255,255,.82); }
.on-dark .lockup__rule, .site-header--over .lockup__rule { border-top-color: var(--brass-bright); }

/* ==========================================================================
   Site header (brand pages only — ad landing pages use .lp-bar instead)
   ========================================================================== */

.site-header {
  position: relative; z-index: var(--z-sticky);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--sand);
  background: var(--bone);
}
/* Transparent variant that sits over a hero image */
.site-header--over {
  background: transparent; border-bottom-color: rgba(255,255,255,.18);
  position: absolute; inset: 0 0 auto 0;
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }

/* The lockup carries two uppercase lines at parity, so it needs room. Cap it
   and let the firm name wrap inside its own block rather than squeezing nav. */
.site-header .lockup { flex: 0 1 auto; max-width: 20rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.nav a {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--navy);
  padding: var(--s-2) 0; position: relative;
  white-space: nowrap;   /* two-line nav items read as broken */
}
.site-header--over .nav a { color: rgba(255,255,255,.92); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 1px solid var(--brass);
  transition: right var(--t-mid) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.site-header--over .nav a::after { border-bottom-color: var(--brass-bright); }

.nav-toggle { display: none; }

/* Six uppercase nav items plus the two-line compliance lockup run out of
   room well before 860px, so the hamburger takes over at 1024px. */
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bone); border-bottom: 1px solid var(--sand);
    padding: var(--s-5) var(--gutter); gap: var(--s-4);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open a { color: var(--navy); font-size: var(--fs-body); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 1px solid currentColor;
    border-radius: var(--r-sm); cursor: pointer; color: var(--navy);
  }
  .site-header--over .nav-toggle { color: var(--white); }
}

/* ==========================================================================
   Hero — full-bleed photo, layered overlay, ASYMMETRIC text (not centered)
   ========================================================================== */

.hero { position: relative; isolation: isolate; background: var(--navy-deep); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two-layer overlay: a directional gradient for text legibility plus a warm
   tint so the photo sits in the palette instead of fighting it. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,18,33,.90) 0%, rgba(8,18,33,.72) 38%,
                    rgba(8,18,33,.30) 68%, rgba(8,18,33,.12) 100%),
    linear-gradient(to top, rgba(8,18,33,.55) 0%, rgba(8,18,33,0) 45%);
}

.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end; gap: var(--s-8);
  padding-block: clamp(8rem, 20vh, 13rem) clamp(6rem, 13vh, 9.5rem);
  min-height: min(88vh, 900px);
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; gap: var(--s-6);
                 padding-block: clamp(7rem, 18vh, 10rem) var(--s-8);
                 min-height: auto; }
}

.hero__title {
  font-size: var(--fs-hero); color: var(--white);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-5); max-width: 22ch;
}
.hero__title em {
  font-style: italic; color: var(--brass-bright);   /* 8.07:1 on navy-deep */
}
.hero__lead {
  color: rgba(255,255,255,.90); font-size: var(--fs-lead);
  max-width: 46ch; margin: 0 0 var(--s-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }

/* Secondary hero action is a quiet text link, not a second button. Two equal
   buttons split attention (conversion research: ONE explicit CTA per view) and
   at 1440px they overflowed the 7fr column and wrapped under the primary. */
.hero__alt {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .02em; color: var(--white); text-decoration: none;
  border-bottom: 1px solid rgba(201,165,95,.6); padding-bottom: 2px;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.hero__alt:hover { color: var(--brass-bright); border-bottom-color: var(--brass-bright); }
.hero__alt svg { transition: transform var(--t-mid) var(--ease); }
.hero__alt:hover svg { transform: translateX(3px); }

/* Small stat/credential strip in the hero's right column. Only renders facts
   that exist — never a fabricated number. */
.hero__aside {
  border-left: 1px solid rgba(201,165,95,.45);
  padding-left: var(--s-5);
}
.hero__aside dl { margin: 0; display: grid; gap: var(--s-5); }
.hero__aside dt {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--brass-bright); font-weight: 600;
  margin-bottom: .2rem;
}
.hero__aside dd {
  margin: 0; color: var(--white); font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1.25;
}
@media (max-width: 900px) {
  .hero__aside { border-left: 0; border-top: 1px solid rgba(201,165,95,.45);
                 padding-left: 0; padding-top: var(--s-5); }
  .hero__aside dl { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
}

/* ==========================================================================
   Overlapping panel — depth via layered surfaces (required quality #3)
   ========================================================================== */

.overlap {
  position: relative; z-index: var(--z-raised);
  margin-top: clamp(-4rem, -5vw, -2.5rem);
  background: var(--bone); box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 62rem;
}
@media (max-width: 700px) { .overlap { margin-top: -2rem; padding: var(--s-6) var(--s-5); } }

/* ==========================================================================
   Editorial / bento composition — deliberately NOT a uniform card grid
   ========================================================================== */

.markets { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .markets { grid-template-columns: 1fr; } }

/* Grid-breaking: the middle card sits lower and taller. */
.market { position: relative; display: block; text-decoration: none; overflow: hidden;
          background: var(--navy); }
.markets .market:nth-child(2) { transform: translateY(var(--s-6)); }
@media (max-width: 900px) { .markets .market:nth-child(2) { transform: none; } }

.market__media { aspect-ratio: 4 / 3; overflow: hidden; }
.markets .market:nth-child(2) .market__media { aspect-ratio: 4 / 4.6; }
@media (max-width: 900px) { .markets .market:nth-child(2) .market__media { aspect-ratio: 4/3; } }

.market__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
  filter: saturate(.94);
}
/* Zoom the IMAGE inside a fixed frame — no layout shift on hover. */
.market:hover .market__media img { transform: scale(1.05); filter: saturate(1.04); }

.market__body {
  position: absolute; inset: auto 0 0 0; padding: var(--s-8) var(--s-5) var(--s-5);
  /* Strengthened: the offset middle card puts its eyebrow over bright water,
     where the previous ramp left the brass label under 4.5:1. */
  background: linear-gradient(to top, rgba(8,18,33,.96) 0%, rgba(8,18,33,.88) 42%,
                              rgba(8,18,33,.55) 75%, rgba(8,18,33,0) 100%);
}
.market__name {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--white);
  margin: 0 0 .25rem; line-height: 1.15;
}
.market__meta {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--brass-bright); font-weight: 600;
}
.market__cue {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s-3);
  font-size: var(--fs-small); font-weight: 600; color: var(--white);
}
.market__cue svg { transition: transform var(--t-mid) var(--ease); }
.market:hover .market__cue svg { transform: translateX(4px); }

/* ==========================================================================
   Editorial split — asymmetric two-column with generous negative space
   ========================================================================== */

.split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(2rem,6vw,5rem); align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split--reverse > :first-child { order: 0; }
}
.split__media { position: relative; }
.split__media img { width: 100%; box-shadow: var(--shadow-lg); }
/* Offset brass frame behind the image — depth without a drop-shadow cliche. */
.split__media::before {
  content: ""; position: absolute; inset: auto auto -14px -14px;
  width: 62%; height: 62%; border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass); z-index: -1;
}

/* Pull quote / statement block */
.statement {
  font-family: var(--font-display); font-size: var(--fs-h2);
  line-height: 1.22; letter-spacing: var(--ls-display);
  max-width: 34ch; margin: 0;
}
.section--dark .statement, .section--ink .statement { color: var(--white); }

/* Numbered process list — editorial, not a card grid */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-6); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-4); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.5rem; color: var(--brass);
  line-height: 1; padding-top: .15rem;
}
.section--dark .steps li::before, .section--ink .steps li::before { color: var(--brass-bright); }
.steps h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; margin: 0 0 .3rem; }
.section--dark .steps h3 { color: var(--white); }
.steps p { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 44ch; }
.section--dark .steps p, .section--ink .steps p { color: rgba(228,220,205,.86); }

/* ==========================================================================
   Landing-page chrome — NO nav, single exit. Conversion research: remove
   every competing link from an ad destination.
   ========================================================================== */

.lp-bar {
  background: var(--ink); color: var(--white);
  padding-block: var(--s-4); position: relative; z-index: var(--z-sticky);
}
.lp-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.lp-bar .lockup__name { color: var(--white); }
.lp-bar .lockup__firm { color: rgba(255,255,255,.82); }
.lp-bar .lockup__rule { border-top-color: var(--brass-bright); }
.lp-bar__contact {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  font-size: var(--fs-small);
}
/* These two ARE the conversion on mobile (click-to-call / click-to-text), so
   they get full 44px targets rather than inline-link treatment. Measured at
   38px and 24px before this rule. */
.lp-bar__contact a {
  color: var(--white); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--s-2);
}
.lp-bar__contact a:hover { color: var(--brass-bright); }

/* ==========================================================================
   Multi-step form — research: +40-60% completion vs a single long form
   ========================================================================== */

.leadform {
  background: var(--white); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 3px solid var(--brass);
}
.leadform__head { margin-bottom: var(--s-5); }
.leadform__title { font-size: 1.5rem; margin: 0 0 var(--s-2); }
.leadform__sub { font-size: var(--fs-small); color: var(--muted); margin: 0; }

/* Progress — reserved height so advancing a step never shifts layout */
.progress { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.progress__seg { flex: 1; height: 3px; background: var(--sand); position: relative; overflow: hidden; }
.progress__seg::after {
  content: ""; position: absolute; inset: 0; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.progress__seg.is-done::after, .progress__seg.is-current::after { transform: scaleX(1); }
.progress__label {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}

.step__h {
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600;
  color: var(--navy); margin: 0 0 var(--s-4); letter-spacing: .01em;
}
.step__h:focus { outline: none; }   /* focused programmatically on step change */

.step { display: none; }
.js-stepped .step { display: none; }
.step.is-active { display: block; animation: stepIn var(--t-mid) var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.is-active { animation: none; } }

.step__actions { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.btn-back {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  padding: var(--s-3) var(--s-2); min-height: 44px;
}
.btn-back:hover { color: var(--navy); }

/* Choice chips — larger tap targets than a select, and faster to answer */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label {
  display: inline-flex; align-items: center; min-height: 46px;
  padding: var(--s-2) var(--s-5); margin: 0; cursor: pointer;
  border: 1px solid #B9B2A4; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 500; color: var(--navy);
  background: var(--white);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chips label:hover { border-color: var(--brass); }
.chips input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chips input:focus-visible + label { outline: 2px solid var(--brass); outline-offset: 3px; }

.trust-line {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-micro); color: var(--muted); margin-top: var(--s-4);
}
.trust-line svg { flex: 0 0 auto; margin-top: .15em; color: var(--brass); }

/* Benefit bullets beside the form */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.benefits li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); align-items: start; }
.benefits svg { color: var(--brass-bright); margin-top: .2em; }
.section--dark .benefits li, .hero .benefits li { color: rgba(255,255,255,.92); }
.benefits strong { display: block; font-weight: 600; margin-bottom: .15rem; }

/* LP hero variant: copy left, form right */
.lp-hero__inner {
  display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3.5rem, 9vh, 6rem);
}
@media (max-width: 960px) { .lp-hero__inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ — native details/summary, keyboard-accessible for free
   ========================================================================== */

.faq { border-top: 1px solid var(--sand); }
.faq details { border-bottom: 1px solid var(--sand); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-6) var(--s-5) 0;
  font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem;
  color: var(--navy); position: relative; min-height: 44px;
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: rotate(45deg); transition: transform var(--t-mid) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq summary:hover { color: var(--brass); }
.faq__body { padding: 0 var(--s-6) var(--s-5) 0; }
.faq__body p { font-size: var(--fs-body); color: var(--muted); margin: 0 0 var(--s-3); }
.faq__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Compliance footer — brokerage name ADJACENT to every contact point
   ========================================================================== */

.site-footer { background: var(--ink); color: rgba(228,220,205,.84); padding-block: var(--s-8) var(--s-6); }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--brass-bright); }

.footer__grid {
  display: grid; grid-template-columns: minmax(0,4fr) minmax(0,3fr) minmax(0,4fr);
  gap: var(--s-7); padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.footer__h {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--brass-bright); margin: 0 0 var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.footer__list a { font-size: var(--fs-small); text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }

/* The contact block. The brokerage name sits immediately above the contact
   details — this adjacency is the FL 61J2-10.025 requirement. */
.nap { font-size: var(--fs-small); line-height: 1.7; }
.nap__firm { color: var(--white); font-weight: 700; margin: 0 0 .2rem; }
.nap__agent { color: rgba(228,220,205,.84); margin: 0 0 var(--s-3); }
.nap a { text-decoration: none; font-weight: 600; }

.legal { padding-top: var(--s-6); display: grid; gap: var(--s-4); }
.legal p { font-size: var(--fs-micro); line-height: 1.65; margin: 0; max-width: 88ch;
           color: rgba(228,220,205,.78); }   /* verified >=4.5:1 on --ink */
.legal__badges { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.legal__badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(228,220,205,.9);
}
.legal__badge svg { flex: 0 0 auto; }

/* ==========================================================================
   Thank-you page — speed-to-lead surface. Lead delivery is email-only, so
   this page carries the "reach her right now" job.
   ========================================================================== */

.ty { text-align: center; max-width: 44rem; margin-inline: auto; }
.ty__mark {
  width: 62px; height: 62px; margin: 0 auto var(--s-5);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brass); color: var(--white);
}
.ty__next {
  text-align: left; background: var(--white); box-shadow: var(--shadow-md);
  padding: clamp(1.5rem,4vw,2.25rem); margin-top: var(--s-7);
  border-left: 3px solid var(--brass);
}
.ty__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-top: var(--s-6); }

/* ==========================================================================
   Misc
   ========================================================================== */

.prose { max-width: var(--maxw-text); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li { margin-bottom: var(--s-2); max-width: var(--measure); }

/* Answer block — the <=50-word passage that AI search extracts */
.answer {
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink);
  border-left: 2px solid var(--brass); padding-left: var(--s-5);
  margin: 0 0 var(--s-6); max-width: 52ch;
}

.source-note { font-size: var(--fs-micro); color: var(--muted); font-style: italic; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Area page components
   ========================================================================== */

/* Neighbourhood list — editorial columns with hairline separators rather than
   a uniform card grid (which the banned-patterns rule rules out). */
.hoods {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(2rem, 5vw, 4rem); margin-top: var(--s-7);
}
@media (max-width: 780px) { .hoods { grid-template-columns: 1fr; } }

.hood { padding: var(--s-6) 0; border-top: 1px solid var(--sand); }
.hood h3 {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--navy);
  margin: 0 0 var(--s-3);
}
.hood p { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 42ch; }

/* Checklist — brass ticks, used for the price-driver list on dark */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.checklist li {
  position: relative; padding-left: 2rem; font-size: var(--fs-body);
  color: rgba(228,220,205,.92); max-width: 46ch;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--brass-bright);
  border-bottom: 1.8px solid var(--brass-bright);
  transform: rotate(-45deg);
}
.section--sand .checklist li, .section:not(.section--dark):not(.section--ink) .checklist li {
  color: var(--ink);
}
.section:not(.section--dark):not(.section--ink) .checklist li::before {
  border-left-color: var(--brass); border-bottom-color: var(--brass);
}

/* Market stats — renders em-dashes honestly when no sourced data exists */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5); margin: var(--s-6) 0 var(--s-5);
  border-top: 1px solid var(--sand); padding-top: var(--s-6);
}
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.stat dt {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: var(--s-2);
}
.stat dd {
  margin: 0; font-family: var(--font-display); font-size: 2rem;
  color: var(--navy); line-height: 1;
}

/* An odd final neighbourhood spans both columns rather than sitting orphaned
   beside an empty cell (Highland Beach has three). Reads as intentional
   editorial emphasis instead of a layout gap. */
.hood:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hood:last-child:nth-child(odd) p { max-width: 62ch; }