/* This experiment is isolated from the two fixed palettes. */
html[data-dynamic] {
  --page-bg: #fff;
  --page-ink: #202020;
  --page-muted: #71675c;
  --page-accent: #89672d;
  --soft-bg: #f2f0eb;
  --soft-ink: #202020;
  --soft-muted: #71675c;
  --soft-accent: #89672d;
  --raised-bg: #eeece7;
  --raised-ink: #202020;
  --raised-muted: #71675c;
  --raised-accent: #89672d;
  --scene-line: #ded2bd;
  --surface-ink: var(--page-ink);
  --surface-muted: var(--page-muted);
  --surface-accent: var(--page-accent);
  --line: var(--scene-line);
  background: var(--page-bg);
}
html[data-dynamic] body,
html[data-dynamic] header,
html[data-dynamic] .hero,
html[data-dynamic] footer,
html[data-dynamic] dialog,
html[data-dynamic] #nav {
  background: var(--page-bg);
  color: var(--surface-ink);
  border-color: var(--scene-line);
}
html[data-dynamic] .search-wrap,
html[data-dynamic] .agents,
html[data-dynamic] .partners {
  --surface-ink: var(--soft-ink);
  --surface-muted: var(--soft-muted);
  --surface-accent: var(--soft-accent);
  background: var(--soft-bg);
  color: var(--surface-ink);
}
html[data-dynamic] .about,
html[data-dynamic] .empty {
  --surface-ink: var(--raised-ink);
  --surface-muted: var(--raised-muted);
  --surface-accent: var(--raised-accent);
  background: var(--raised-bg);
  color: var(--surface-ink);
}
html[data-dynamic] footer { border-top: 1px solid var(--scene-line); padding-bottom: 115px; }
html[data-dynamic] .agents { border-block: 1px solid var(--scene-line); }
html[data-dynamic] select { color: var(--surface-ink); }
html[data-dynamic] select option { background: var(--soft-bg); color: var(--soft-ink); }
html[data-dynamic] .intro,
html[data-dynamic] .hero-foot,
html[data-dynamic] .section-heading .eyebrow,
html[data-dynamic] .services .eyebrow,
html[data-dynamic] .service-list summary span,
html[data-dynamic] .service-list details p,
html[data-dynamic] #result-count,
html[data-dynamic] .catalog-note,
html[data-dynamic] .card-meta,
html[data-dynamic] .card-bottom span,
html[data-dynamic] .about-copy p:not(.eyebrow),
html[data-dynamic] .agent-intro > p:not(.eyebrow):not(.agent-hook),
html[data-dynamic] .agent-intro small,
html[data-dynamic] .agent-panel p,
html[data-dynamic] .agent-professional,
html[data-dynamic] .partners-intro,
html[data-dynamic] .partner-card:not(.brand-partner) p,
html[data-dynamic] .pending-label,
html[data-dynamic] .email,
html[data-dynamic] .branches p,
html[data-dynamic] .dialog-body p,
html[data-dynamic] .social-block p,
html[data-dynamic] .social-slot small { color: var(--surface-muted); }
html[data-dynamic] .agent-intro .agent-hook,
html[data-dynamic] .social-slot span { color: var(--surface-ink); }
html[data-dynamic] h1 em,
html[data-dynamic] .hero .eyebrow,
html[data-dynamic] .about-copy .eyebrow,
html[data-dynamic] .agents .eyebrow,
html[data-dynamic] .agents h2 em,
html[data-dynamic] .agent-panel > div > span,
html[data-dynamic] .agent-sign,
html[data-dynamic] .partner-number,
html[data-dynamic] .social-block .eyebrow,
html[data-dynamic] footer > p,
html[data-dynamic] .creator > span:last-child,
html[data-dynamic] .brand-arrow { color: var(--surface-accent); }
html[data-dynamic] .button.gold .brand-arrow,
html[data-dynamic] .button.dark .brand-arrow,
html[data-dynamic] .circle .brand-arrow,
html[data-dynamic] .whatsapp-float .brand-arrow { color: #fff; }
html[data-dynamic] .sale-tag,
html[data-dynamic] .card-open,
html[data-dynamic] .close { background: var(--raised-bg); color: var(--raised-ink); }
html[data-dynamic] .filter { color: var(--page-ink); }
html[data-dynamic] .filter.active { background: var(--gold-satin); color: #171717; border-color: #b48641; }
html[data-dynamic] .text-link,
html[data-dynamic] .header-contact,
html[data-dynamic] #search label,
html[data-dynamic] .filter,
html[data-dynamic] .card-bottom,
html[data-dynamic] .service-list details,
html[data-dynamic] .agent-panel,
html[data-dynamic] .agent-panel > div,
html[data-dynamic] .agent-professional,
html[data-dynamic] .partner-card,
html[data-dynamic] .pending-label,
html[data-dynamic] .branches,
html[data-dynamic] .branches select,
html[data-dynamic] .social-block,
html[data-dynamic] .social-slot,
html[data-dynamic] .creator,
html[data-dynamic] .footer-bottom,
html[data-dynamic] footer .version-switch { border-color: var(--scene-line); }
html[data-dynamic] .footer-professional { background: var(--soft-bg); color: var(--soft-ink); border-color: var(--scene-line); border-left-color: #b48641; }
html[data-dynamic] footer .version-switch { background: transparent; color: var(--page-muted); }
html[data-dynamic] .brand-partner { background: #fbf8f1; color: #292521; border-color: #d5b77e; }
html[data-dynamic] .brand-partner .brand-arrow { color: #89672d; }