/* ─────────────────────────────────────────────────────────────────────────────
   DELANA WINSLOW HOMES — front-of-house composition
   Implements doctrine/front-of-house-flagship.md on REbuilder tokens.
   No literal color values here — everything reads var(--token).
   ──────────────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; overflow-x: clip; }

/* Intrinsic width/height attributes exist on every <img> so the browser can
   reserve space before the bytes arrive (prevents layout shift). But a height
   ATTRIBUTE is a specified height, and a specified height beats CSS
   aspect-ratio — so an image styled `aspect-ratio: 4/3` was rendering at its
   attribute height (e.g. 532x1280) and object-fit was cropping a landscape
   photo into a tall portrait slot. `height: auto` demotes the attributes to a
   ratio hint, which is what they are meant to be, and lets aspect-ratio or the
   intrinsic ratio govern. Rules that set an explicit height (heroes) still win
   on specificity. */
img { max-width: 100%; height: auto; }
/* clip, not hidden: hidden on the root makes it a scroll container (and can
   break position:sticky); clip contains bleeding decoration without that cost.
   Both are set because overflow-x on body alone does not stop the documentElement
   from growing — a decorative element with a negative offset widened the page
   and showed as an empty strip down the right edge. */
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
body > main { flex: 1 0 auto; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: none; }

/* ============================== Type helpers ============================== */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--premium-text, var(--premium));
}
.eyebrow--muted { color: var(--muted); }
.band--ink .eyebrow, .footer .eyebrow, .prose-head .eyebrow { color: var(--premium); }

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0;
}
.display--caps { text-transform: uppercase; letter-spacing: 0.14em; }

.script {
  font-family: var(--font-script);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--muted);
}

.measure { max-width: 62ch; }

/* ============================== Buttons ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
  transition: background var(--motion-micro), border-color var(--motion-micro),
    color var(--motion-micro), transform var(--motion-micro);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--accent); color: var(--accent-fg); }

.btn--on-ink { background: transparent; border-color: var(--hairline-on-ink); color: var(--ink-band-fg); }
.btn--on-ink:hover { background: var(--ink-band-fg); border-color: var(--ink-band-fg); color: var(--ink); }

.btn--solid-on-ink { background: var(--ink-band-fg); border-color: var(--ink-band-fg); color: var(--ink); }
.btn--solid-on-ink:hover { background: var(--paper); border-color: var(--paper); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--premium);
  transition: gap var(--motion-micro), color var(--motion-micro);
}
.arrow-link:hover { gap: 18px; color: var(--premium-text, var(--premium)); }
.arrow-link--on-ink { color: var(--ink-band-fg); }

/* ============================== Monogram lockup ============================== */

.dw-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.dw-mono {
  position: relative;
  display: inline-block; /* width/height are ignored on an inline box — without
                            this the lockup collapses and following text overlaps
                            it anywhere the mono isn't inside a flex container */
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: 1;
  width: 2.1em;
  height: 1.16em;
}
.dw-mono span { position: absolute; }
.dw-mono .dw-d { font-size: 1em; left: 0.18em; top: -0.08em; z-index: 2; }
.dw-mono .dw-w { font-size: 0.92em; left: 0.52em; top: 0.18em; letter-spacing: 0; }
.dw-word {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-top: 10px;
  text-indent: 0.34em; /* optically recenters tracked caps */
  white-space: nowrap;
}
.dw-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  opacity: 0.82;
}
.dw-sub::before, .dw-sub::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55; }

/* ============================== Navigation ============================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 44px;
  color: var(--ink-band-fg);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--motion-entrance), color var(--motion-entrance),
    border-color var(--motion-entrance), padding var(--motion-entrance);
}
.nav .dw-mono { font-size: 26px; }
.nav .dw-word { font-size: 0.6875rem; margin-top: 6px; }
.nav .dw-sub { display: none; }

.nav--solid, .nav--static {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--border);
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.71875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.92;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-micro), opacity var(--motion-micro);
}
.nav-links a:hover { border-bottom-color: var(--premium); opacity: 1; }
.nav-links a[aria-current="page"] { border-bottom-color: var(--premium); }

.nav-cta { display: flex; align-items: center; gap: 22px; }
.nav-cta .btn {
  padding: 11px 22px;
  font-size: 0.6875rem;
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.nav-cta .btn:hover { background: var(--premium); border-color: var(--premium); color: var(--accent-fg); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px;
}

/* Full-screen menu (mobile / overflow) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-micro);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; pointer-events: auto; }
.menu a {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 0;
  transition: color var(--motion-micro), letter-spacing var(--motion-micro);
}
.menu a:hover { color: var(--premium); letter-spacing: 0.2em; }
.menu-close {
  position: absolute;
  top: 26px;
  right: 34px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 10px;
}
.menu .script { color: var(--premium); font-size: 2rem; margin-bottom: 18px; }

/* ============================== Hero ============================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--ink-band-fg);
  isolation: isolate;
  overflow: hidden; /* the Ken Burns scale on .hero-media img must never widen the page */
}
.hero--short { min-height: 72svh; align-items: flex-end; }

.hero-media, .hero-media img, .hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-media img { transform: scale(1.02); animation: hero-drift 26s var(--ease-out) forwards; }
@keyframes hero-drift { to { transform: scale(1.09); } }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Vertical ramp for the nav and the caption row, PLUS a left-edge wash.
     The headline sits in the left third, so its legibility shouldn't depend
     on that part of the photograph happening to be dark — a bright wall or
     a white door there would strand the type. The horizontal layer makes
     any hero image safe for white text. */
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 0, 0, 0.30) 34%,
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.50) 0%,
      rgba(0, 0, 0, 0.18) 38%,
      rgba(0, 0, 0, 0.30) 68%,
      rgba(0, 0, 0, 0.62) 100%
    );
}
.subhero .hero-scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

/* Inset hairline frame (observed: David Hatef) */
.hero-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid var(--hairline-on-ink);
  z-index: 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px 92px;
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.30);
}
.hero .eyebrow { color: var(--ink-band-fg); opacity: 0.85; }
.hero-title {
  font-size: clamp(2.1rem, 6.2vw, 4.9rem);
  margin-top: 20px;
  max-width: 20ch;
  overflow-wrap: break-word;
}
.hero-script {
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--premium);
  filter: brightness(1.35);
  margin: 14px 0 0 6px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

.hero-caption {
  position: absolute;
  left: 64px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.66;
}
.hero-caption::before { content: ""; width: 3px; height: 16px; background: var(--premium); }

.hero-license {
  position: absolute;
  right: 64px;
  bottom: 34px;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border: 1px solid var(--hairline-on-ink);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-band-fg);
  animation: cue-float 2.6s ease-in-out infinite;
}
@keyframes cue-float { 50% { transform: translate(-50%, 7px); } }

/* Sub-hero for interior pages */
.subhero {
  position: relative;
  min-height: 46svh;
  display: flex;
  align-items: flex-end;
  color: var(--ink-band-fg);
  isolation: isolate;
}
.subhero .hero-inner { padding-bottom: 56px; }
.subhero-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-top: 16px; }

/* ============================== Bands ============================== */

.band { padding: 108px 0; }
.band--tight { padding: 84px 0; }
.band--white { background: var(--surface); }
.band--sunken { background: var(--surface-sunken); }
.band--ink { background: var(--ink-band); color: var(--ink-band-fg); }
.band--ink .lede { color: var(--ink-band-muted); }
.band--hairline-top { border-top: 1px solid var(--border); }

.shell { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
.shell--narrow { max-width: 940px; }

.band-head { text-align: center; margin-bottom: 64px; }
.band-head .display { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-top: 16px; }
.band-head .lede { margin: 18px auto 0; max-width: 56ch; }

.rule-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  color: var(--premium);
}
.rule-ornament::before, .rule-ornament::after { content: ""; width: 54px; height: 1px; background: currentColor; opacity: 0.7; }
.rule-ornament svg { display: block; }

/* Editorial manifesto */
.manifesto { text-align: center; padding: 30px 0; }
.manifesto .display { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.34; }
.manifesto .script { color: var(--premium); font-size: clamp(2.6rem, 4.4vw, 3.6rem); margin-bottom: 26px; }

/* ============================== Media cards ============================== */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card-grid--two { grid-template-columns: repeat(2, 1fr); }

.showcase {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--motion-entrance), box-shadow var(--motion-entrance);
}
.showcase:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.showcase-media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.showcase:hover .showcase-media img { transform: scale(1.045); }
.showcase-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.59375rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.showcase-body { padding: 22px 24px 24px; }
.showcase-place {
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.showcase-name { font-family: var(--font-display); font-size: var(--text-xl); margin: 8px 0 10px; }
.showcase-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  /* specs drop to their own line rather than ragged-wrapping against the
     price — a two-word orphan under a headline figure reads as a bug */
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.showcase-specs { flex: 1 1 auto; min-width: 0; }
/* the price is a headline figure, not a wrapping phrase — the serif set it
   wider than the mono did and it began breaking mid-range ("$700K –" / "$2M+") */
.showcase-price { white-space: nowrap; flex: none; }
.showcase-specs { text-align: right; }
.showcase-price {
  /* display serif, not mono — monospace price figures read as a data table */
  font-family: var(--font-display);
  font-size: calc(var(--text-md) * 1.12);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.showcase-specs { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.04em; }

/* Communities — tall editorial cards */
.place-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink-band-fg);
  isolation: isolate;
}
.place-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 800ms var(--ease-out);
}
.place-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.66) 100%);
  transition: background var(--motion-entrance);
}
.place-card:hover img { transform: scale(1.05); }
.place-body { padding: 26px; width: 100%; }
.place-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}
.place-note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--motion-entrance), max-height var(--motion-entrance);
}
.place-card:hover .place-note, .place-card:focus-visible .place-note { opacity: 0.92; max-height: 90px; }
.place-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-band-fg);
}
.place-cue::after { content: ""; width: 30px; height: 1px; background: var(--premium); transition: width var(--motion-micro); }
.place-card:hover .place-cue::after { width: 48px; }

/* ============================== Split editorial ============================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}
.split > * { min-width: 0; }
.split--tilt { grid-template-columns: 1.08fr 0.92fr; }
.split-media { position: relative; }
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}
.split-media--frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--premium);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.55;
}
.split-body .display { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 16px 0 0; }
.split-body .script { display: block; color: var(--premium); font-size: clamp(2.2rem, 3.6vw, 3rem); margin-top: 10px; }
.split-body .lede { margin-top: 24px; }
.split-body .arrow-link { margin-top: 34px; }

/* Portrait placeholder (until supplied assets are dropped in) */
.portrait { position: relative; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; display: block; border-radius: var(--radius-lg); }
.portrait-fallback {
  display: none;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, var(--surface) 0%, var(--surface-sunken) 100%);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  color: var(--muted);
  text-align: center;
  padding: 32px;
}
.portrait.is-empty img { display: none; }
.portrait.is-empty .portrait-fallback { display: flex; }
.portrait-fallback .dw-mono { font-size: 64px; color: var(--premium); }
.band--ink .portrait-fallback {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-color: var(--hairline-on-ink);
  color: var(--ink-band-muted);
}
.portrait-fallback .fallback-script {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  color: var(--premium-text, var(--premium));
  opacity: 0.9;
}
.band--ink .portrait-fallback .fallback-script { color: var(--premium); }

/* ============================== Stats ============================== */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 5vw, 72px);
  padding: 4px 0;
}
.stat { position: relative; }
/* hairline between figures instead of boxing each one — the boxed grid of
   equal cells is the tell that reads as a template stat block */
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(15px, 2.5vw, 36px));
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}
.band--ink .stat + .stat::before { background: var(--hairline-on-ink); }

.stat b {
  display: block;
  /* display serif, NOT mono — monospace numerals read as dashboard telemetry,
     which is exactly the machine-generated look this brand should never have */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.012em;
  font-feature-settings: "lnum" 1;
}
.stat span {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  max-width: 26ch;
}
.band--ink .stat span { color: var(--ink-band-muted); opacity: 0.9; }

@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; gap: 34px; }
  .stat + .stat::before { left: 0; right: 0; top: -17px; bottom: auto; width: auto; height: 1px; }
}

/* ============================== Quote / testimonial ============================== */

.quote { text-align: center; }
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.45;
  margin: 26px auto 0;
  max-width: 24em;
}
.quote figcaption {
  margin-top: 26px;
  font-family: var(--font-sans);
  font-size: 0.71875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.band--ink .quote figcaption { color: var(--ink-band-muted); }
.quote-mark { font-family: var(--font-script); font-size: 3.4rem; color: var(--premium); line-height: 0.6; }

/* ============================== Process / steps ============================== */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: step; }
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px 34px;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: calc(var(--text-lg) * 1.05);
  letter-spacing: 0.02em;
  color: var(--premium);
}
.step h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 16px 0 10px; }
.step p { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.7; color: var(--muted); margin: 0; }

/* ============================== Forms ============================== */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-grid .field--full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--motion-micro);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--premium); }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); line-height: 1.7; }
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.consent-field label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
}
.consent-field input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
}
.consent-field a { color: var(--ink); text-decoration-color: var(--premium); }

/* ============================== Footer ============================== */

.footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--ink-band);
  color: var(--ink-band-fg);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 72px;
  padding: 96px 0 72px;
}
.footer .dw-mark { color: var(--ink-band-fg); align-items: flex-start; }
.footer .dw-mark .dw-mono { font-size: 40px; }
.footer .dw-mark .dw-word { font-size: 0.8125rem; }
.footer-tag { margin-top: 22px; font-family: var(--font-script); font-size: 1.9rem; color: var(--premium); filter: brightness(1.25); }
.footer h3,
.footer h4 {
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-band-muted);
  margin: 0 0 22px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.footer-list a, .footer-list span {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-band-fg);
  text-decoration: none;
  opacity: 0.85;
}
.footer-list a:hover { opacity: 1; color: var(--premium); }
.footer-social { display: flex; gap: 18px; margin-top: 26px; }
.footer-social a { color: var(--ink-band-fg); opacity: 0.75; transition: opacity var(--motion-micro), color var(--motion-micro); }
.footer-social a:hover { opacity: 1; color: var(--premium); }

.footer-legal {
  border-top: 1px solid var(--hairline-on-ink);
  padding: 34px 0 44px;
  display: grid;
  gap: 14px;
}
.footer-legal p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--ink-band-muted);
}
/* Platform credit (Will, 2026-10-13): only "REbuilder" links, to
   velocity-builders.com, as Luxury Presence credits its sites. Underlined
   inside the sentence so the link is not told apart by colour. */
.footer-legal p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.footer-legal p a:hover { color: var(--premium); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.footer-legal .marks { display: flex; align-items: center; gap: 16px; }
.footer-legal .marks svg { opacity: 0.7; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-band-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--premium); }

/* ============================== Prose pages ============================== */

.prose-head { background: var(--ink-band); color: var(--ink-band-fg); padding: 170px 0 70px; }
.prose-head .display { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 14px; }
.prose { padding: 72px 0 108px; }
.prose h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 44px 0 12px; }
.prose p, .prose li { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.75; color: var(--muted); }
.prose strong { color: var(--ink); font-weight: var(--weight-semibold); }
.prose a { color: var(--ink); text-decoration-color: var(--premium); }
.prose a.btn { color: var(--accent-fg); text-decoration: none; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-family: var(--font-sans); color: var(--muted); vertical-align: top; }
.prose th { font-size: 0.65625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.prose td a { color: var(--ink); }

/* Search page filter bar (demo state) */
.search-bar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--e1);
  overflow: hidden;
}
.search-bar .field { flex: 1; }
.search-bar .field input, .search-bar .field select {
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 18px;
}
.search-bar .btn { border-radius: 0; }
@media (max-width: 680px) {
  .search-bar { flex-direction: column; }
  .search-bar .field input, .search-bar .field select { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ============================== Reveals ============================== */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 90ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img { animation: none; }
  .scroll-cue { animation: none; }
  html { scroll-behavior: auto; }
}

/* Per-image crop control for locally hosted NoVA photography */
img[data-slot="place-leesburg"] { object-position: 82% 42%; }
img[data-slot="place-greatfalls"] { object-position: center 28%; }
img[data-slot="place-ashburn"] { object-position: 60% 55%; }
img[data-slot="place-purcellville"] { object-position: 42% 45%; }
img[data-slot="subhero-communities"] { object-position: center 62%; }
img[data-slot="subhero-sell"] { object-position: center 38%; }
img[data-slot="home-hero"] { object-position: center 58%; }

/* Flat mode — full-page capture / comp export (?flat=1) */
.is-flat .hero { min-height: 880px; }
.is-flat .subhero { min-height: 560px; }
.is-flat .reveal { opacity: 1; transform: none; transition: none; }
.is-flat .hero-media img { animation: none; transform: scale(1.04); }
.is-flat .scroll-cue { animation: none; }

/* ============================== Responsive ============================== */

@media (max-width: 1080px) {
  .shell, .hero-inner { padding-left: 40px; padding-right: 40px; }
  .hero-caption { left: 40px; }
  .hero-license { right: 40px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .split--tilt { grid-template-columns: 1fr; gap: 48px; }
  /* stacked: portraits stay portraits — constrain width so 4:5 never crops to a slab */
  .split-media, .portrait { max-width: 448px; }
  .split-media img, .portrait img, .portrait-fallback { max-height: 560px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr; gap: 48px; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

@media (max-width: 680px) {
  .shell, .hero-inner { padding-left: 22px; padding-right: 22px; }
  .hero-inner { padding-bottom: 108px; }
  .hero-caption { left: 22px; bottom: 26px; }
  .hero-license { display: none; }
  .band { padding: 76px 0; }
  .band--tight { padding: 60px 0; }
  .card-grid, .card-grid--two, .steps, .form-grid { grid-template-columns: 1fr; }
  .form-grid .field--full { grid-column: auto; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .nav { padding-left: 22px; padding-right: 22px; }
  .nav-cta .btn { display: none; }
  .band-head { margin-bottom: 40px; }
  .hero-actions .btn { width: 100%; }
}

/* Credits colophon */
.credits-list { list-style: none; padding: 0; margin: 36px 0 0; }
.credits-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 28px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
}
.credits-list .credit-title { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
.credits-list .credit-meta { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--muted); }
.credits-list .credit-meta a { color: var(--muted); text-decoration-color: var(--premium); }

/* ============================== Paper grain ==============================
   A 3.5% fractal-noise layer over everything. Turns flat ivory into stock
   with a tooth — the cheapest, most reliable "printed, not rendered" signal. */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media print { body::after { display: none; } }

/* ============================== Botanical ornament ==============================
   Lifted from Delana's own brand kit (engraved peony / rose / sprig) and masked
   so a single asset tints from tokens — champagne on ivory, warm light on ink.
   Doctrine: ornament is the one place this brand is allowed to be decorative,
   so it stays low-contrast and never competes with photography or headlines. */

.ornament {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
  background-color: var(--premium);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.13;
}
.ornament--cluster {
  -webkit-mask-image: url("../assets/ornament/floral-cluster.png?v=09eaecf5?v=09eaecf5");
  mask-image: url("../assets/ornament/floral-cluster.png?v=09eaecf5?v=09eaecf5");
}
.ornament--corner {
  -webkit-mask-image: url("../assets/ornament/floral-corner.png?v=0d04237a?v=0d04237a");
  mask-image: url("../assets/ornament/floral-corner.png?v=0d04237a?v=0d04237a");
}
.ornament--sprig {
  -webkit-mask-image: url("../assets/ornament/floral-sprig.png?v=721591cd?v=721591cd");
  mask-image: url("../assets/ornament/floral-sprig.png?v=721591cd?v=721591cd");
}

/* mirrored variants so two assets cover four corners */
.ornament--flip-x { transform: scaleX(-1); }
.ornament--flip-y { transform: scaleY(-1); }
.ornament--flip-xy { transform: scale(-1, -1); }

/* placements */
/* kept inside their band: bleeding past the edge gets hard-cut by the next
   section's background, which reads as a crop rather than a watermark */
/* Sit fully inside the clip box. These were at left:-34px / right:-26px
   against `.manifesto { overflow: clip }`, so each flower was sliced by the
   section edge and read as a rendering artifact rather than ornament. A
   botanical either shows its whole silhouette or it shouldn't be there. */
/* Sized by HEIGHT as a fraction of the section, not by width. Fixed widths
   made the flower taller than the box, so `overflow: clip` sliced it flat top
   and bottom — the "incomplete" look. Height-first guarantees the whole
   silhouette fits at any viewport; padding gives it room to breathe. */
.ornament--manifesto {
  height: 74%; width: auto; aspect-ratio: 372 / 384;
  left: 1.5%; bottom: 13%; opacity: 0.15;
}
.ornament--manifesto-2 {
  height: 56%; width: auto; aspect-ratio: 374 / 304;
  right: 1.5%; top: 13%; opacity: 0.13;
}
.ornament--card-corner {
  width: 170px; aspect-ratio: 374 / 304;
  right: -14px; top: -14px; opacity: 0.16;
}
.ornament--footer {
  width: min(360px, 28vw); aspect-ratio: 372 / 384;
  right: 1.5%; bottom: 0; opacity: 0.07;
  background-color: var(--ink-band-fg);
}
.ornament--band-sprig {
  width: 210px; aspect-ratio: 208 / 184;
  opacity: 0.14;
}

/* ornaments live behind content — hosts need a stacking context.
   :not(.ornament) matters: without it this rule out-specifies .ornament and
   resets it to position:relative, collapsing the span to zero size.
   overflow:clip contains the deliberate bleed so it crops at the host edge
   instead of widening the document. */
.band, .footer, .manifesto { position: relative; }
.manifesto, .footer { overflow: clip; }
.manifesto > *:not(.ornament),
.band-head > *:not(.ornament),
.footer-main, .footer-legal { position: relative; z-index: 1; }

@media (max-width: 680px) {
  .ornament--manifesto, .ornament--manifesto-2, .ornament--footer { opacity: 0.06; }
}

/* ============================== Editorial bio (About / Home) ==============================
   Replaces the generic two-column split for the agent introduction. The old
   version cropped her small under a ceiling, floated an offset rule that read
   as a misalignment, and stranded the portrait beside a void when stacked.
   This is a considered portrait + captioned plate + signed text column. */

.bio {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(44px, 5.5vw, 88px);
  align-items: center;
}

.bio-media { position: relative; }
.bio-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  border-radius: var(--radius-lg);
}

/* captioned like an editorial plate — the rule reads as intent, the old
   offset border read as an accident */
.bio-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.bio-caption::before {
  content: "";
  flex: none;
  width: 34px;
  height: 1px;
  background: var(--premium);
}

.bio-body .display { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 16px 0 0; }
.bio-body .lede + .lede { margin-top: 20px; }
.bio-lead {
  font-size: calc(var(--text-md) * 1.075);
  color: var(--ink);
  margin-top: 26px;
}
.bio-sign {
  display: block;
  color: var(--premium-text, var(--premium));
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  margin-top: 30px;
}

@media (max-width: 1080px) {
  /* centered when stacked — a half-width portrait pinned left with empty space
     beside it reads as a layout bug, not a composition */
  .bio { grid-template-columns: 1fr; gap: 46px; }
  .bio-media { max-width: 460px; margin: 0 auto; }
  .bio-caption { justify-content: center; }
  .bio-body { text-align: left; max-width: 62ch; margin: 0 auto; }
}

/* ============================== Header phone ==============================
   Doctrine: real-estate business is phone-led — the number is visible in the
   header, dot-formatted. Mono matches how the contact card sets data. */

.nav-phone {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-micro), opacity var(--motion-micro);
  opacity: 0.94;
}
.nav-phone:hover { color: var(--premium); opacity: 1; }

.menu-phone {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  color: var(--premium-text, var(--premium));
  text-decoration: none;
  margin-top: 22px;
}

@media (max-width: 1080px) {
  /* nav links collapse into the burger here; the phone goes with them and is
     surfaced in the menu instead, so the header never crowds */
  .nav-phone { display: none; }
}

/* ============================== Motion: clip reveals ==============================
   The clip lives on the IMAGE, never on the observed element. Clipping the
   observed box to zero area drops its intersectionRatio to 0, so it can never
   cross the observer's threshold and the reveal never fires — the image stays
   permanently invisible to real visitors while screenshots (which force
   .is-in) still look correct. Verified with tools/check_reveals.py. */

.reveal.reveal-clip { opacity: 1; transform: none; transition: none; }
.reveal.reveal-clip img {
  clip-path: inset(0 0 101% 0);
  transition: clip-path 1000ms var(--ease-out);
  will-change: clip-path;
}
.reveal.reveal-clip.is-in img { clip-path: inset(0 0 0 0); }

/* a touch more air in the cascade — 90ms steps read hurried at this scale */
.reveal-d1 { transition-delay: 120ms; }
.reveal-d2 { transition-delay: 240ms; }
.reveal-d3 { transition-delay: 360ms; }

/* hero parallax target; JS drives the offset, this just smooths it */
.hero-media { will-change: transform; }

/* ============================== Motion: coordinated hover ==============================
   One gesture, several parts moving together — image settles, name lifts,
   cue extends — rather than a lone scale. */

.showcase-media img { transition: transform 900ms var(--ease-out); }
.showcase:hover .showcase-media img { transform: scale(1.055); }
.showcase-name { transition: color var(--motion-micro); }
.showcase:hover .showcase-name { color: var(--premium-text, var(--premium)); }

.place-card img { transition: transform 1100ms var(--ease-out); }
.place-card:hover img { transform: scale(1.07); }
.place-name { transition: transform var(--motion-micro); }
.place-card:hover .place-name { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-clip img { clip-path: none; transition: none; }
  .hero-media { transform: none !important; }
  .showcase:hover .showcase-media img,
  .place-card:hover img,
  .place-card:hover .place-name { transform: none; }
}

/* ============================== Journal ============================== */

.post-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-band-muted, var(--muted));
  margin-top: 16px;
}
.prose-head .post-meta { color: rgba(255,255,255,0.62); }

.post-lede {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.prose blockquote {
  margin: 34px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--premium);
}
.prose blockquote p {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.prose ul { margin: 20px 0; padding-left: 22px; }
.prose li { margin-bottom: 10px; }

.post-end {
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.post-end .script { font-size: 2rem; color: var(--premium-text, var(--premium)); }
.post-end p { margin-top: 12px; font-size: var(--text-sm); }

/* Index */
.post-list { display: grid; gap: 2px; }
.post-card {
  display: block;
  padding: 34px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--motion-micro), padding-left var(--motion-micro);
}
.post-card:hover { background: var(--surface); padding-left: 16px; }
.post-card-kicker {
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--premium-text, var(--premium));
  margin: 0 0 12px;
}
.post-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.post-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 14px;
  max-width: 62ch;
  text-wrap: pretty;
}
.post-card-meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
  opacity: 0.8;
}

/* ============================== Lead-capture containment ============================== */

.lead-unavailable {
  max-width: 44rem;
  margin-top: 34px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--border);
  scroll-margin-top: 96px;
  text-align: left;
}
.lead-unavailable--compact {
  max-width: 40rem;
  margin-right: auto;
  margin-left: auto;
}
.lead-unavailable h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--ink);
}
.lead-unavailable p {
  max-width: 58ch;
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--muted);
}
.lead-unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.contact-card .footer-list li,
.contact-card .footer-list li > a,
.contact-card .footer-list li > span {
  min-width: 0;
}
.contact-card .footer-list li > a,
.contact-card .footer-list li > span {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .lead-unavailable-actions .btn {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}
/* deliberate drift */

/* ============================== Valuation ask (Sell) ==============================
   One address, one button; the contact question opens beneath it only once an
   address exists. Same flow as the REbuilder home-value template, in Delana's type
   and palette. */

.val-hero { align-items: center; justify-content: center; text-align: center; }
.val-scrim {
  background:
    radial-gradient(ellipse 72% 66% at 50% 55%, rgba(12, 12, 14, 0.62) 0%, rgba(12, 12, 14, 0.38) 60%, rgba(12, 12, 14, 0.22) 100%),
    linear-gradient(180deg, rgba(12, 12, 14, 0.5) 0%, rgba(12, 12, 14, 0) 32%);
}
.val-inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: clamp(120px, 16vh, 170px) 64px clamp(56px, 9vh, 100px);
}
.val-title { font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1.08; margin: 0; max-width: 16ch; }
.val-script { margin: -6px 0 0; font-size: clamp(2rem, 3.6vw, 3rem); }
.val-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  margin: 4px 0 0; padding: 0; list-style: none;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.06em;
}
.val-points li::before { content: "\2713"; color: var(--premium); filter: brightness(1.35); margin-right: 8px; }

.val-ask { width: 100%; max-width: 44rem; margin-top: 10px; text-align: left; text-shadow: none; }
.val-bar { display: grid; gap: 12px; }
@media (min-width: 640px) { .val-bar { grid-template-columns: minmax(0, 1fr) auto; } }
.val-bar input {
  min-height: 60px; padding: 0 20px; border: 0; border-radius: var(--radius);
  background: rgba(250, 248, 243, 0.96); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-base);
}
.val-bar input::placeholder { color: var(--muted); }
.val-bar input:focus-visible { outline: 2px solid var(--premium); outline-offset: 2px; }
.val-btn { min-height: 60px; }
.val-hero .val-btn { background: var(--ink); border-color: var(--ink); color: var(--ink-band-fg); }
.val-hero .val-btn:hover { background: #000; border-color: #000; }
.val-hero .val-btn:focus-visible { outline: 2px solid var(--ink-band-fg); outline-offset: 2px; }
.val-btn[disabled] { opacity: 0.55; cursor: default; }
.val-btn[hidden] { display: none; }

.val-step2 { display: none; margin-top: 12px; padding: 30px 32px; background: var(--paper); color: var(--ink); border-radius: var(--radius); }
.val-step2[data-open="true"] { display: block; }
.val-step2 h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0 0 6px; }
.val-sub { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
.val-step2 .field + .field { margin-top: 14px; }
.val-step2 .field input { max-width: 520px; font-size: var(--text-base); }
.val-opt { text-transform: none; letter-spacing: 0; font-weight: var(--weight-medium); }
.val-notice { margin: 16px 0 0; max-width: 36rem; }
.val-notice a { color: var(--ink); text-decoration-color: var(--premium); }
.val-step2 .val-btn { margin-top: 18px; }

.val-status { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; margin: 12px 0 0; color: var(--ink); }
.val-status[hidden] { display: none; }
.val-status--error { color: var(--danger, #B4402F); }

@media (max-width: 640px) {
  .val-inner { padding-left: 22px; padding-right: 22px; }
  .val-points { flex-direction: column; align-items: center; gap: 6px; }
  .val-btn { width: 100%; }
  .val-step2 { padding: 24px 20px; }
}

/* Address suggestions under the valuation box */
.addr-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 4px 0; list-style: none; text-align: left; text-shadow: none;
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.addr-list[hidden] { display: none; }
.addr-list [role="option"] {
  display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline;
  padding: 11px 20px; cursor: pointer; border-top: 1px solid var(--border);
  font-family: var(--font-sans); font-size: var(--text-sm);
}
.addr-list [role="option"]:first-child { border-top: 0; }
.addr-list [role="option"]:hover, .addr-list [aria-selected="true"] { background: var(--premium-soft); }
.addr-main { font-weight: var(--weight-semibold); color: var(--ink); }
.addr-sub { color: var(--muted); }
.addr-credit {
  padding: 8px 20px 6px; text-align: right; border-top: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--muted);
}
.val-bar { position: relative; }

/* ============================== Winslow Letter signup ============================== */

.newsletter-form { max-width: 600px; margin-left: auto; margin-right: auto; text-align: left; }
.newsletter-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.newsletter-form-row .field label { text-align: left; }
.newsletter-form-row .field input { min-height: 52px; }
.newsletter-form-row .btn { min-height: 52px; padding-left: 30px; padding-right: 30px; }
.newsletter-form .consent-field { margin-top: 20px; }
.newsletter-form .consent-field .form-note { margin: 10px 0 0 28px; }
.newsletter-form > .form-note { margin: 14px 0 0; text-align: center; }
.newsletter-form .val-status { text-align: center; }
@media (max-width: 560px) {
  .newsletter-form-row { grid-template-columns: 1fr; }
  .newsletter-form-row .btn { width: 100%; }
}

/* Email typo / deliverability hint under any form's email box */
.email-hint { margin: 8px 0 0; font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.5; color: var(--muted); text-align: left; text-shadow: none; }
.email-hint[hidden] { display: none; }
.email-hint--error { color: var(--danger, #B4402F); }
.email-hint-fix {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: var(--weight-semibold); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--premium); text-underline-offset: 2px;
}
.email-hint-fix:focus-visible { outline: 2px solid var(--premium); outline-offset: 2px; }