:root {
  --de-soot: #0f0f0f;
  --de-soft-white: #eeeeee;
  --de-gray: #a7a5a5;
  --de-dark-gray: #5e5f5e;
  --de-light-gray: #d6d5d5;
  --de-sand: #d8cdc0;
  --de-wheat: #e8dcc8;
  --de-autumn: #8b6a4a;
  --de-red: #a2261c;
  --de-red-soft: #f0b2aa;
  --de-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --de-body: "Poppins", system-ui, sans-serif;
  --de-shadow: 0 18px 38px rgba(15, 15, 15, 0.16);
  --de-action-shadow: 0 3px 0 rgba(15, 15, 15, 0.28), 0 9px 18px rgba(15, 15, 15, 0.16);
  /* Matches design-system gate/card radius (tokens/source.json radius.gate) */
  --de-radius-card: 12px;

  /* ------------------------------------------------------------------
     Semantic UI colors for status pills + callouts
     These are purpose-built hues, not aliases of primary brand colors.
     Brand red remains only for Active / note-critical moments.
  ------------------------------------------------------------------- */
  --ui-blue: #2f5d8c;
  --ui-blue-soft: #d9e6f4;
  --ui-teal: #2f6f68;
  --ui-teal-soft: #d7ece8;
  --ui-cyan: #1f7a8c;
  --ui-cyan-soft: #d3eef2;
  --ui-green: #2f6b45;
  --ui-green-soft: #d8eddf;
  --ui-amber: #a66a12;
  --ui-amber-soft: #f4e3c2;
  --ui-orange: #b35a1f;
  --ui-orange-soft: #f3dcc8;
  --ui-violet: #5b4a8a;
  --ui-violet-soft: #e4ddf4;
  --ui-slate: #4d5a66;
  --ui-slate-soft: #dde3e8;
  --ui-rose: #9b3a4a;
  --ui-rose-soft: #f3d8de;

  /* Status pills (filled) */
  --status-active-bg: var(--ui-green);
  --status-active-fg: #ffffff;
  --status-preview-bg: var(--ui-cyan);
  --status-preview-fg: #ffffff;
  --status-coming-bg: var(--ui-amber);
  --status-coming-fg: #ffffff;
  --status-contract-bg: var(--ui-blue);
  --status-contract-fg: #ffffff;
  --status-sold-bg: var(--de-red);
  --status-sold-fg: #ffffff;
  --status-draft-bg: var(--ui-slate);
  --status-draft-fg: #ffffff;
  --status-hold-bg: var(--ui-orange);
  --status-hold-fg: #ffffff;
  --status-contingent-bg: var(--ui-teal);
  --status-contingent-fg: #ffffff;
  --status-reduced-bg: var(--ui-rose);
  --status-reduced-fg: #ffffff;

  /* Callouts (bar + soft wash) */
  --callout-note-bar: var(--de-red);
  --callout-note-bg: rgba(162, 38, 28, 0.08);
  --callout-info-bar: var(--ui-blue);
  --callout-info-bg: var(--ui-blue-soft);
  --callout-success-bar: var(--ui-green);
  --callout-success-bg: var(--ui-green-soft);
  --callout-warning-bar: var(--ui-amber);
  --callout-warning-bg: var(--ui-amber-soft);
  --callout-tip-bar: var(--ui-teal);
  --callout-tip-bg: var(--ui-teal-soft);
  --callout-meta-bar: var(--ui-slate);
  --callout-meta-bg: var(--ui-slate-soft);
  --callout-urgent-bar: var(--ui-orange);
  --callout-urgent-bg: var(--ui-orange-soft);
  --callout-special-bar: var(--ui-violet);
  --callout-special-bg: var(--ui-violet-soft);
  --callout-quiet-bar: var(--de-gray);
  --callout-quiet-bg: rgba(167, 165, 165, 0.14);
  --callout-strong-bar: var(--de-soot);
  --callout-strong-bg: rgba(15, 15, 15, 0.06);
}

body.de-visual {
  background: var(--de-soft-white);
  color: var(--de-soot);
  font-family: var(--de-body);
}

.de-visual :focus-visible {
  outline: 3px solid var(--de-red);
  outline-offset: 3px;
}

/* Shared typography */
.de-visual .display,
.de-visual .heading,
.de-visual .subheading,
.de-visual .addr,
.de-visual h1,
.de-visual h2,
.de-visual .hero__price,
.de-visual .fact__value,
.de-visual .update__year,
.de-visual .contact-card h3,
.de-visual .plan__copy h3 {
  font-family: var(--de-display);
}

.de-visual .display,
.de-visual .heading,
.de-visual h1,
.de-visual h2 {
  letter-spacing: 0.01em;
}

.de-visual .eyebrow,
.de-visual .t-eyebrow {
  color: var(--de-red);
  font-family: var(--de-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.de-visual .muted,
.de-visual .sub,
.de-visual .lede,
.de-visual .copy,
.de-visual .loc {
  color: var(--de-dark-gray);
}

/* Shared co-brand header */
.de-visual .nav,
.de-visual header.site-header {
  background: var(--de-soft-white);
  border-bottom: 1px solid var(--de-gray);
  color: var(--de-soot);
}

.de-visual .nav__brand img {
  height: 50px;
  width: auto;
}

.de-visual .nav__links a {
  color: var(--de-soot);
}

.de-visual .nav__links a:hover,
.de-visual .nav__links a:focus-visible {
  color: var(--de-red);
}

/* Pair + Soft action system */
.de-visual .button,
.de-visual .nav__cta,
.de-visual .hero__cta,
.de-visual .mobile-cta a {
  align-items: center;
  background: var(--de-soot);
  border: 1px solid var(--de-soot);
  border-radius: 8px;
  box-shadow: var(--de-action-shadow);
  color: var(--de-soft-white);
  display: inline-flex;
  font-family: var(--de-body);
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0;
  min-height: 50px;
  padding: 0 22px;
  text-transform: none;
  transform: translateY(-2px);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  white-space: nowrap;
}

.de-visual .button:hover,
.de-visual .button:focus-visible,
.de-visual .nav__cta:hover,
.de-visual .nav__cta:focus-visible,
.de-visual .hero__cta:hover,
.de-visual .hero__cta:focus-visible,
.de-visual .mobile-cta a:hover,
.de-visual .mobile-cta a:focus-visible {
  background: var(--de-dark-gray);
  border-color: var(--de-soot);
  box-shadow: 0 2px 0 rgba(15, 15, 15, 0.25), 0 6px 12px rgba(15, 15, 15, 0.14);
  color: var(--de-soft-white);
  transform: translateY(0);
}

.de-visual .button:active,
.de-visual .nav__cta:active,
.de-visual .hero__cta:active,
.de-visual .mobile-cta a:active {
  box-shadow: none;
  transform: translateY(2px);
}

.de-visual .button--brass,
.de-visual .button--line,
.de-visual .mobile-cta a:first-child {
  background: var(--de-sand);
  border-color: var(--de-soot);
  color: var(--de-soot);
}

.de-visual .button--brass:hover,
.de-visual .button--brass:focus-visible,
.de-visual .button--line:hover,
.de-visual .button--line:focus-visible,
.de-visual .mobile-cta a:first-child:hover,
.de-visual .mobile-cta a:first-child:focus-visible {
  background: var(--de-soft-white);
  border-color: var(--de-soot);
  color: var(--de-soot);
}

/* Listings hub */
.de-visual.listings-hub {
  background: var(--de-soft-white);
  color: var(--de-soot);
  min-height: 100vh;
  overflow-x: hidden;
}

.de-visual.listings-hub .site-header {
  align-items: center;
  display: flex;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 64px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.de-visual.listings-hub .site-header img {
  height: 50px;
  width: auto;
}

.de-visual.listings-hub main {
  max-width: 1320px;
  padding: clamp(70px, 10vw, 130px) clamp(18px, 4vw, 64px);
}

.de-visual.listings-hub h1 {
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 400;
  line-height: 0.84;
  margin: 10px 0 24px;
}

.de-visual.listings-hub .sub {
  font-size: clamp(17px, 2vw, 21px);
  max-width: 680px;
}

.de-visual.listings-hub .grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 58px;
  width: 100%;
}

.de-visual.listings-hub .card {
  background: var(--de-soft-white);
  border: 1px solid var(--de-gray);
  border-radius: var(--de-radius-card);
  box-shadow: var(--de-shadow);
  color: var(--de-soot);
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  transform: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.de-visual.listings-hub .card .ph {
  aspect-ratio: 3 / 2;
  background: var(--de-light-gray);
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.de-visual.listings-hub .card .ph img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  width: 100%;
}

.de-visual.listings-hub .card:hover,
.de-visual.listings-hub .card:focus-visible {
  border-color: var(--de-soot);
  box-shadow: 0 12px 26px rgba(15, 15, 15, 0.18);
}

.de-visual.listings-hub .card .body {
  background: var(--de-soft-white);
  padding: 24px;
}

.de-visual.listings-hub .card .badge {
  background: transparent;
  border: 1px solid var(--de-gray);
  border-radius: 999px;
  color: var(--de-soot);
  margin-bottom: 18px;
}

.de-visual.listings-hub .card .badge.active {
  background: var(--status-active-bg);
  border-color: var(--status-active-bg);
  color: var(--status-active-fg);
}

.de-visual.listings-hub .card .addr {
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 500;
  line-height: 0.98;
}

.de-visual.listings-hub .card .loc {
  color: var(--de-dark-gray);
  margin-top: 12px;
}

.de-visual.listings-hub .card .price {
  border-top: 1px solid var(--de-gray);
  color: var(--de-soot);
  font-family: var(--de-display);
  font-size: 22px;
  margin-top: 22px;
  padding-top: 16px;
}

.de-visual.listings-hub .site-footer {
  background: var(--de-soot);
  border: 0;
  color: var(--de-gray);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(180px, 280px) 1fr;
  padding: 42px clamp(18px, 4vw, 64px);
}

.de-visual.listings-hub .site-footer img {
  max-width: 260px;
  width: 100%;
}

.de-visual.listings-hub .site-footer a {
  color: var(--de-sand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Approved 1924 property-page translation */
.de-visual.property-1924 {
  --ink: var(--de-soot);
  --ink-85: var(--de-soot);
  --ink-65: var(--de-dark-gray);
  --ink-40: var(--de-gray);
  --paper: var(--de-soft-white);
  --paper-warm: var(--de-soft-white);
  --paper-cool: var(--de-light-gray);
  --stone: var(--de-gray);
  --brass: var(--de-sand);
  --brass-soft: var(--de-sand);
  --font: var(--de-body);
}

.de-visual.property-1924 .nav {
  backdrop-filter: none;
}

.de-visual.property-1924 .display {
  font-size: clamp(64px, 8vw, 116px);
  font-weight: 300;
  line-height: 0.84;
  max-width: 9ch;
}

.de-visual.property-1924 .heading {
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 500;
  line-height: 0.94;
}

.de-visual.property-1924 .hero {
  align-items: stretch;
  background: var(--de-soot);
  display: grid;
  grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1.22fr);
  min-height: 760px;
  padding: 0;
}

.de-visual.property-1924 .hero::before {
  content: none;
}

.de-visual.property-1924 .hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(70px, 8vw, 120px) clamp(24px, 5vw, 72px);
  position: relative;
}

.de-visual.property-1924 .hero__copy::before {
  background: var(--de-red);
  content: "";
  height: 7px;
  left: clamp(24px, 5vw, 72px);
  position: absolute;
  right: clamp(24px, 5vw, 72px);
  top: clamp(45px, 6vw, 78px);
}

.de-visual.property-1924 .hero__inner {
  position: relative;
  width: 100%;
  z-index: 1;
}

.de-visual.property-1924 .hero__media {
  min-height: 640px;
}

.de-visual.property-1924 .hero__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.de-visual.property-1924 .hero__deck {
  color: var(--de-soft-white);
}

.de-visual.property-1924 .hero__price span,
.de-visual.property-1924 .hero__eyebrow {
  color: var(--de-sand);
}

.de-visual.property-1924 .facts {
  background: var(--de-soft-white);
  border-bottom: 1px solid var(--de-gray);
  color: var(--de-soot);
}

.de-visual.property-1924 .fact {
  border-color: var(--de-gray);
}

.de-visual.property-1924 .fact__label,
.de-visual.property-1924 .fact__note {
  color: var(--de-dark-gray);
}

.de-visual.property-1924 .section {
  border-bottom: 1px solid var(--de-gray);
}

.de-visual.property-1924 .section--white {
  background: var(--de-soft-white);
}

.de-visual.property-1924 .section--cool {
  background: var(--de-light-gray);
}

.de-visual.property-1924 .section--cool .detail p,
.de-visual.property-1924 .section--cool .muted.lede {
  color: var(--de-soot);
}

.de-visual.property-1924 .section--ink {
  background: var(--de-soot);
}

.de-visual.property-1924 .section--ink .eyebrow,
.de-visual.property-1924 .section--ink .update__year {
  color: var(--de-sand);
}

.de-visual.property-1924 .section--ink .copy,
.de-visual.property-1924 .section--ink .lede,
.de-visual.property-1924 .section--ink .update p {
  color: var(--de-light-gray) !important;
}

.de-visual.property-1924 .feature-image,
.de-visual.property-1924 .photo-pair,
.de-visual.property-1924 .plans,
.de-visual.property-1924 .contact-card,
.de-visual.property-1924 .tour {
  box-shadow: var(--de-shadow);
  transform: translateY(-3px);
}

.de-visual.property-1924 .feature-image,
.de-visual.property-1924 .photo-pair,
.de-visual.property-1924 .tour {
  overflow: hidden;
}

.de-visual.property-1924 .plan,
.de-visual.property-1924 .contact-card,
.de-visual.property-1924 .place {
  background: var(--de-soft-white);
  border-color: var(--de-gray);
}

.de-visual.property-1924 .detail-grid,
.de-visual.property-1924 .detail,
.de-visual.property-1924 .plan__copy,
.de-visual.property-1924 .contact-card {
  border-color: var(--de-gray);
}

.de-visual.property-1924 .tour__copy {
  background: var(--de-soot);
}

.de-visual.property-1924 .tour__copy .eyebrow {
  color: var(--de-sand);
}

.de-visual.property-1924 .contact-actions {
  gap: 14px;
}

.de-visual.property-1924 .footer {
  background: var(--de-soot);
  color: var(--de-gray);
}

.de-visual.property-1924 .footer img {
  filter: none;
  width: 260px;
}

.de-visual.property-1924 .mobile-cta {
  background: var(--de-soft-white);
  border-top: 1px solid var(--de-gray);
  box-shadow: 0 -5px 18px rgba(15, 15, 15, 0.16);
  gap: 8px;
  padding: 9px;
}

@media (max-width: 1000px) {
  .de-visual.property-1924 .hero {
    grid-template-columns: 1fr;
  }

  .de-visual.property-1924 .hero__media {
    min-height: 58vh;
    order: 1;
  }

  .de-visual.property-1924 .hero__copy {
    order: 2;
  }
}

@media (max-width: 640px) {
  .de-visual .nav__brand img {
    height: 38px;
  }

  .de-visual.listings-hub .grid {
    grid-template-columns: 1fr;
  }

  .de-visual.listings-hub main {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .de-visual.listings-hub h1 {
    font-size: clamp(52px, 16vw, 84px);
  }

  .de-visual.listings-hub .hub-section__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .de-visual.listings-hub .site-header img {
    height: 38px;
  }

  .de-visual.listings-hub .site-footer {
    grid-template-columns: 1fr;
  }

  .de-visual.property-1924 .hero {
    min-height: 0;
  }

  .de-visual.property-1924 .hero__media {
    min-height: 54vh;
  }

  .de-visual.property-1924 .hero__copy {
    padding: 70px 18px 58px;
  }

  .de-visual.property-1924 .hero__copy::before {
    left: 18px;
    right: 18px;
    top: 34px;
  }

  .de-visual.property-1924 .display {
    font-size: clamp(58px, 18vw, 82px);
  }

  .de-visual.property-1924 .heading {
    font-size: clamp(44px, 13vw, 66px);
  }

  .de-visual.property-1924 .button {
    width: 100%;
  }

  .de-visual.property-1924 .mobile-cta {
    display: none;
  }

  .de-visual.property-1924 .mobile-cta.is-visible {
    display: grid;
  }
}

/* Shared campaign-mode adapter for legacy property-story structures */
.de-visual.property-story {
  --ink: var(--de-soot);
  --ink-85: var(--de-soot);
  --ink-80: var(--de-soot);
  --ink-65: var(--de-dark-gray);
  --ink-60: var(--de-dark-gray);
  --ink-45: var(--de-gray);
  --ink-40: var(--de-gray);
  --graphite: var(--de-dark-gray);
  --grey: var(--de-gray);
  --stone: var(--de-light-gray);
  --paper: var(--de-soft-white);
  --paper-warm: var(--de-soft-white);
  --paper-cool: var(--de-light-gray);
  --shell: var(--de-soft-white);
  --brass: var(--de-sand);
  --brass-deep: var(--de-red);
  --brass-soft: var(--de-sand);
  --brass-wash: rgba(216, 205, 192, 0.38);
  --display: var(--de-display);
  --ui: var(--de-body);
  --body: var(--de-body);
  --font: var(--de-body);
  --font-display: var(--de-display);
  --font-ui: var(--de-body);
  --font-body: var(--de-body);
  --font-mono: var(--de-body);
  background: var(--de-soft-white);
  color: var(--de-soot);
}

.de-visual.property-story .t-display,
.de-visual.property-story .t-display-light,
.de-visual.property-story .t-h2,
.de-visual.property-story .t-h3,
.de-visual.property-story .hero__title,
.de-visual.property-story .hero__availability,
.de-visual.property-story .section-title,
.de-visual.property-story .agent-card__name,
.de-visual.property-story .agent-card .name,
.de-visual.property-story .spec .v,
.de-visual.property-story .price {
  font-family: var(--de-display);
}

.de-visual.property-story .t-display,
.de-visual.property-story .t-display-light,
.de-visual.property-story .hero__title {
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
}

.de-visual.property-story .t-eyebrow,
.de-visual.property-story .eyebrow {
  color: var(--de-red);
}

.de-visual.property-story .hero__eyebrow,
.de-visual.property-story .hero .loc,
.de-visual.property-story .hero .badge,
.de-visual.property-story .section--ink .t-eyebrow,
.de-visual.property-story .section--ink .eyebrow,
.de-visual.property-story .split .pane .eyebrow {
  color: var(--de-sand);
}

.de-visual.property-story .italic-brass,
.de-visual.property-story .section:not(.section--ink) em,
.de-visual.property-story section:not(.section--ink) .italic-brass {
  color: var(--de-red);
  font-style: normal;
}

.de-visual.property-story .hero em,
.de-visual.property-story .section--ink em,
.de-visual.property-story .split .pane em {
  color: var(--de-sand);
}

.de-visual.property-story .nav,
.de-visual.property-story header.nav {
  background: rgba(238, 238, 238, 0.96);
  border-bottom: 1px solid var(--de-gray);
  color: var(--de-soot);
}

.de-visual.property-story .nav__brand img,
.de-visual.property-story .nav-logo img {
  height: 50px;
  width: auto;
}

.de-visual.property-story .nav__links a,
.de-visual.property-story .nav-links a {
  color: var(--de-soot);
  opacity: 1;
}

.de-visual.property-story .nav__links a:hover,
.de-visual.property-story .nav__links a:focus-visible,
.de-visual.property-story .nav-links a:hover,
.de-visual.property-story .nav-links a:focus-visible {
  color: var(--de-red);
}

.de-visual.property-story .nav__cta,
.de-visual.property-story .nav-cta,
.de-visual.property-story .hero__cta,
.de-visual.property-story .agent-card__cta,
.de-visual.property-story .btn {
  align-items: center;
  background: var(--de-soot);
  border: 1px solid var(--de-soot);
  border-radius: 8px;
  box-shadow: var(--de-action-shadow);
  color: var(--de-soft-white) !important;
  display: inline-flex;
  font-family: var(--de-body);
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0;
  min-height: 50px;
  padding: 0 22px;
  text-transform: none;
  transform: translateY(-2px);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  white-space: nowrap;
}

.de-visual.property-story .nav__cta:hover,
.de-visual.property-story .nav-cta:hover,
.de-visual.property-story .hero__cta:hover,
.de-visual.property-story .agent-card__cta:hover,
.de-visual.property-story .btn:hover,
.de-visual.property-story .nav__cta:focus-visible,
.de-visual.property-story .nav-cta:focus-visible,
.de-visual.property-story .hero__cta:focus-visible,
.de-visual.property-story .agent-card__cta:focus-visible,
.de-visual.property-story .btn:focus-visible {
  background: var(--de-dark-gray);
  border-color: var(--de-soot);
  box-shadow: 0 2px 0 rgba(15, 15, 15, 0.25), 0 6px 12px rgba(15, 15, 15, 0.14);
  color: var(--de-soft-white) !important;
  transform: translateY(0);
}

.de-visual.property-story .btn.ghost {
  background: var(--de-sand);
  border-color: var(--de-soot);
  color: var(--de-soot) !important;
}

.de-visual.property-story .btn.ghost:hover,
.de-visual.property-story .btn.ghost:focus-visible {
  background: var(--de-soft-white);
  color: var(--de-soot) !important;
}

.de-visual.property-story .hero {
  background-color: var(--de-soot);
  border-bottom: 7px solid var(--de-red);
}

.de-visual.property-story .hero::after,
.de-visual.property-story .hero-overlay {
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.2) 0%, rgba(15, 15, 15, 0.08) 34%, rgba(15, 15, 15, 0.82) 100%);
}

.de-visual.property-story .facts,
.de-visual.property-story .specbar,
.de-visual.property-story .section--ink,
.de-visual.property-story .split .pane,
.de-visual.property-story .contact {
  background: var(--de-soot);
}

.de-visual.property-story .section--paper,
.de-visual.property-story .section--white,
.de-visual.property-story section:not(.alt):not(.hero):not(.contact):not(.section--ink):not(.facts) {
  background: var(--de-soft-white);
}

.de-visual.property-story .section--cool,
.de-visual.property-story section.alt {
  background: var(--de-light-gray);
}

.de-visual.property-story .section,
.de-visual.property-story section {
  border-color: var(--de-gray);
}

.de-visual.property-story .gallery__cell,
.de-visual.property-story .media-frame,
.de-visual.property-story .creek-grid__main,
.de-visual.property-story .creek-grid__stack img,
.de-visual.property-story .floorplan__image,
.de-visual.property-story .slot,
.de-visual.property-story .feat,
.de-visual.property-story .level,
.de-visual.property-story .agent-card {
  box-shadow: var(--de-shadow);
  transform: translateY(-3px);
}

.de-visual.property-story .feat,
.de-visual.property-story .level,
.de-visual.property-story .agent-card,
.de-visual.property-story .floorplan__image,
.de-visual.property-story .map__label {
  background: var(--de-soft-white);
  border-color: var(--de-gray);
  color: var(--de-soot);
}

.de-visual.property-story .agent-card {
  border-left: 6px solid var(--de-red);
}

.de-visual.property-story .agent-card__photo,
.de-visual.property-story .agent-card .photo {
  border-color: var(--de-soot);
  filter: none;
}

.de-visual.property-story .feature-list li::before,
.de-visual.property-story .amen-list li::before,
.de-visual.property-story .level li::before {
  background: var(--de-red);
  color: var(--de-red);
}

.de-visual.property-story .rule {
  background: var(--de-red);
  height: 4px;
  width: 62px;
}

.de-visual.property-story .badge {
  background: var(--de-sand);
  color: var(--de-soot);
}

.de-visual.property-story .hero .badge {
  color: var(--de-soot);
}

.de-visual.property-hickory .inquiry .btn.dark {
  background: var(--de-sand);
  border-color: var(--de-sand);
  color: var(--de-soot) !important;
}

.de-visual.property-hickory .inquiry .btn.dark:hover,
.de-visual.property-hickory .inquiry .btn.dark:focus-visible {
  background: var(--de-soft-white);
  border-color: var(--de-soft-white);
  color: var(--de-soot) !important;
}

.de-visual.property-hickory .inquiry .note {
  color: var(--de-gray);
}

.de-visual.property-story .amen span {
  background: var(--de-sand);
  color: var(--de-soot);
}

.de-visual.property-story .inquiry input,
.de-visual.property-story .inquiry textarea {
  background: var(--de-soft-white);
  border-color: var(--de-gray);
  color: var(--de-soot);
}

.de-visual.property-story .footer,
.de-visual.property-story footer.site {
  background: var(--de-soot);
  border-color: var(--de-dark-gray);
  color: var(--de-gray);
}

.de-visual.property-story .footer__brand img,
.de-visual.property-story footer.site img.fl {
  filter: none;
  height: auto;
  max-width: 270px;
  width: 100%;
}

.de-visual.property-story .footer a,
.de-visual.property-story footer.site a {
  color: var(--de-sand);
}

.de-visual.property-story .mobile-cta {
  display: none;
}

@media (max-width: 880px) {
  .de-visual.property-story .nav-links.open {
    background: var(--de-soft-white);
    border-color: var(--de-gray);
  }

  .de-visual.property-story .nav-links.open a {
    border-color: var(--de-light-gray);
  }

  .de-visual.property-story .nav-toggle {
    color: var(--de-soot);
  }
}

@media (max-width: 640px) {
  .de-visual.property-story {
    padding-bottom: 76px;
  }

  .de-visual.property-story .nav__brand img,
  .de-visual.property-story .nav-logo img {
    height: 38px;
  }

  .de-visual.property-story .mobile-cta {
    background: var(--de-soft-white);
    border-top: 1px solid var(--de-gray);
    bottom: 0;
    box-shadow: 0 -5px 18px rgba(15, 15, 15, 0.16);
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    left: 0;
    padding: 9px;
    position: fixed;
    right: 0;
    z-index: 80;
  }

  .de-visual.property-story .mobile-cta.is-visible {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .de-visual *,
  .de-visual *::before,
  .de-visual *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ------------------------------------------------------------------
   Status pills + callouts
   Use semantic modifiers. Keep Active as DE red; other statuses borrow
   MODUS neutrals/warms so pages are not monochrome red.
------------------------------------------------------------------- */
.de-visual .status-pill,
.de-visual .badge.status-pill {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-family: var(--de-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 8px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.de-visual .status-pill--active,
.de-visual .badge.status-pill--active,
.de-visual.listings-hub .card .badge.active {
  background: var(--status-active-bg);
  border-color: var(--status-active-bg);
  color: var(--status-active-fg);
}

.de-visual .status-pill--preview,
.de-visual .badge.status-pill--preview {
  background: var(--status-preview-bg);
  border-color: var(--de-soot);
  color: var(--status-preview-fg);
}

.de-visual .status-pill--coming-soon,
.de-visual .badge.status-pill--coming-soon {
  background: var(--status-coming-bg);
  border-color: var(--de-autumn);
  color: var(--status-coming-fg);
}

.de-visual .status-pill--under-contract,
.de-visual .badge.status-pill--under-contract {
  background: var(--status-contract-bg);
  border-color: var(--status-contract-bg);
  color: var(--status-contract-fg);
}

.de-visual .status-pill--sold,
.de-visual .badge.status-pill--sold {
  background: var(--status-sold-bg);
  border-color: var(--status-sold-bg);
  color: var(--status-sold-fg);
}

.de-visual .status-pill--draft,
.de-visual .badge.status-pill--draft {
  background: var(--status-draft-bg);
  border-color: var(--de-dark-gray);
  color: var(--status-draft-fg);
}

.de-visual .status-pill--hold,
.de-visual .badge.status-pill--hold {
  background: var(--status-hold-bg);
  border-color: var(--status-hold-bg);
  color: var(--status-hold-fg);
}

.de-visual .status-pill--contingent,
.de-visual .badge.status-pill--contingent {
  background: var(--status-contingent-bg);
  border-color: var(--status-contingent-bg);
  color: var(--status-contingent-fg);
}

.de-visual .status-pill--reduced,
.de-visual .badge.status-pill--reduced {
  background: var(--status-reduced-bg);
  border-color: var(--status-reduced-bg);
  color: var(--status-reduced-fg);
}

.de-visual .status-pill--outline,
.de-visual .badge.status-pill--outline {
  background: transparent;
  border-color: var(--de-soot);
  color: var(--de-soot);
}

/* Hub cards: status pills win over legacy .badge chrome */
.de-visual.listings-hub .card .status-pill {
  margin-bottom: 18px;
}
.de-visual.listings-hub .card .status-pill--active {
  background: var(--status-active-bg);
  border-color: var(--status-active-bg);
  color: var(--status-active-fg);
}
.de-visual.listings-hub .card .status-pill--coming-soon {
  background: var(--status-coming-bg);
  border-color: var(--status-coming-bg);
  color: var(--status-coming-fg);
}
.de-visual.listings-hub .card .status-pill--under-contract {
  background: var(--status-contract-bg);
  border-color: var(--status-contract-bg);
  color: var(--status-contract-fg);
}
.de-visual.listings-hub .card .status-pill--contingent {
  background: var(--status-contingent-bg);
  border-color: var(--status-contingent-bg);
  color: var(--status-contingent-fg);
}
.de-visual.listings-hub .card .status-pill--sold {
  background: var(--status-sold-bg);
  border-color: var(--status-sold-bg);
  color: var(--status-sold-fg);
}
.de-visual.listings-hub .card .status-pill--preview {
  background: var(--status-preview-bg);
  border-color: var(--status-preview-bg);
  color: var(--status-preview-fg);
}
.de-visual.listings-hub .card .status-pill--hold {
  background: var(--status-hold-bg);
  border-color: var(--status-hold-bg);
  color: var(--status-hold-fg);
}
.de-visual.listings-hub .hub-section__title {
  color: var(--de-soot);
}


/* Callouts / flagged notes */
.de-visual .callout,
.de-visual .note {
  background: var(--callout-note-bg);
  border-left: 3px solid var(--callout-note-bar);
  border-radius: 0 10px 10px 0;
  color: var(--de-dark-gray);
  font-size: 14px;
  line-height: 1.5;
  margin: 20px 0 0;
  max-width: 62ch;
  padding: 12px 14px;
}

.de-visual .callout--note,
.de-visual .note--note {
  background: var(--callout-note-bg);
  border-left-color: var(--callout-note-bar);
  color: var(--de-soot);
}

.de-visual .callout--info,
.de-visual .note--info {
  background: var(--callout-info-bg);
  border-left-color: var(--callout-info-bar);
  color: var(--de-soot);
}

.de-visual .callout--success,
.de-visual .note--success {
  background: var(--callout-success-bg);
  border-left-color: var(--callout-success-bar);
  color: var(--de-soot);
}

.de-visual .callout--warning,
.de-visual .note--warning {
  background: var(--callout-warning-bg);
  border-left-color: var(--callout-warning-bar);
  color: var(--de-soot);
}

.de-visual .callout--tip,
.de-visual .note--tip {
  background: var(--callout-tip-bg);
  border-left-color: var(--callout-tip-bar);
  color: var(--de-soot);
}

.de-visual .callout--meta,
.de-visual .note--meta {
  background: var(--callout-meta-bg);
  border-left-color: var(--callout-meta-bar);
  color: var(--de-soot);
}

.de-visual .callout--urgent,
.de-visual .note--urgent {
  background: var(--callout-urgent-bg);
  border-left-color: var(--callout-urgent-bar);
  color: var(--de-soot);
}

.de-visual .callout--special,
.de-visual .note--special {
  background: var(--callout-special-bg);
  border-left-color: var(--callout-special-bar);
  color: var(--de-soot);
}

.de-visual .callout--quiet,
.de-visual .note--quiet {
  background: var(--callout-quiet-bg);
  border-left-color: var(--callout-quiet-bar);
  color: var(--de-dark-gray);
}

.de-visual .callout--strong,
.de-visual .note--strong {
  background: var(--callout-strong-bg);
  border-left-color: var(--callout-strong-bar);
  color: var(--de-soot);
}

/* Backward-compatible aliases from first pass */
.de-visual .callout--warm,
.de-visual .note--warm {
  background: var(--callout-warning-bg);
  border-left-color: var(--callout-warning-bar);
  color: var(--de-soot);
}
.de-visual .callout--sand,
.de-visual .note--sand {
  background: var(--callout-special-bg);
  border-left-color: var(--callout-special-bar);
  color: var(--de-soot);
}

.de-visual .section--ink .callout,
.de-visual .section--ink .note {
  color: rgba(238, 238, 238, 0.92);
}
.de-visual .section--ink .callout--note,
.de-visual .section--ink .note--note {
  background: rgba(162, 38, 28, 0.24);
  border-left-color: var(--de-red-soft);
}
.de-visual .section--ink .callout--info,
.de-visual .section--ink .note--info {
  background: rgba(47, 93, 140, 0.28);
  border-left-color: #8fb4d8;
}
.de-visual .section--ink .callout--success,
.de-visual .section--ink .note--success {
  background: rgba(47, 107, 69, 0.28);
  border-left-color: #8fc9a4;
}
.de-visual .section--ink .callout--warning,
.de-visual .section--ink .note--warning,
.de-visual .section--ink .callout--warm,
.de-visual .section--ink .note--warm {
  background: rgba(166, 106, 18, 0.28);
  border-left-color: #e2b56a;
}
.de-visual .section--ink .callout--tip,
.de-visual .section--ink .note--tip {
  background: rgba(47, 111, 104, 0.28);
  border-left-color: #8fd0c6;
}
.de-visual .section--ink .callout--meta,
.de-visual .section--ink .note--meta {
  background: rgba(77, 90, 102, 0.28);
  border-left-color: #a9b6c2;
}
.de-visual .section--ink .callout--urgent,
.de-visual .section--ink .note--urgent {
  background: rgba(179, 90, 31, 0.28);
  border-left-color: #e0a575;
}
.de-visual .section--ink .callout--special,
.de-visual .section--ink .note--special,
.de-visual .section--ink .callout--sand,
.de-visual .section--ink .note--sand {
  background: rgba(91, 74, 138, 0.28);
  border-left-color: #b7a8e0;
}
.de-visual .section--ink .callout--quiet,
.de-visual .section--ink .note--quiet {
  background: rgba(238, 238, 238, 0.08);
  border-left-color: var(--de-gray);
}
.de-visual .section--ink .callout--strong,
.de-visual .section--ink .note--strong {
  background: rgba(238, 238, 238, 0.12);
  border-left-color: var(--de-soft-white);
  color: var(--de-soft-white);
}

/* Hero stack helper: pill above address/title */
.de-visual .hero__status {
  margin: 0 0 14px;
}