/* ─────────────────────────────────────────────────────────────────────────────
   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; }
/* 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 { overflow-x: clip; }

/* ============================== 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: 400;
  line-height: 1;
  letter-spacing: 0;
  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-entrance);
}
.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;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.56) 0%,
    rgba(0, 0, 0, 0.22) 38%,
    rgba(0, 0, 0, 0.34) 68%,
    rgba(0, 0, 0, 0.66) 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--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; }

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

.footer { 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 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);
}
.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); }
.prose a { color: var(--ink); text-decoration-color: var(--premium); }
.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) {
  .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; }
}