/* About Us preview: the warm palette from the Two Ways Home cinematic study.
   This is scoped to the preview and does not change the main-site theme. */
:root {
  --paper: #171410;
  --ink: #faf6ef;
  --muted: #e3d7c8;
  --accent: #f5dfb9;
  --night: #28221b;
  --canvas: #28221b;
  --soft: #51412f;
  --line: #675a48;
  --action: #f4eee4;
  --on-action: #27211b;
  --action-hover: #e8cc9f;
  --menu-shadow: #00000055;
  color-scheme: dark;
  scrollbar-color: #a99477 var(--paper);
}
body { background: var(--paper); }
::selection { background: var(--accent); color: #171410; }
.hero { padding-bottom: clamp(48px, 5vw, 80px); }
.hero-intro p, .team-hero figcaption { color: var(--muted); }
.skip { background: var(--action); color: var(--on-action); }
.action, .nav-partner { background: var(--action); color: var(--on-action); }
.action:hover, .nav-partner:hover { background: var(--action-hover); color: var(--on-action); }
.preview-header { border-bottom-color: var(--line); }
.nav-dropdown { box-shadow: 0 18px 48px var(--menu-shadow); }
.nav-simple a + a, .nav-brand-choice + .nav-brand-choice,
.nav-list > li, .footer-preview-note { border-color: var(--line); }
.nav-dropdown, .brand-story-surface, .values, .preview-footer {
  --paper: #faf6ef;
  --ink: #29241e;
  --muted: #645849;
  --accent: #704f27;
  --canvas: #efe9df;
  --soft: #e3d7c8;
  --line: #c7baa7;
  color: var(--ink);
  color-scheme: light;
}
.nav-dropdown { background: var(--paper); }
.nav-brand-art img[src$="keyhome-logo-confirmed.png"],
.brand-identity img[src$="keyhome-logo-confirmed.png"] { mix-blend-mode: multiply; }
.brand-story-surface, .values, .preview-footer { background: var(--canvas); }
.brand-story-surface ::selection, .values ::selection, .preview-footer ::selection {
  background: #704f27;
  color: #faf6ef;
}
.journey { color: var(--ink); }
.journey-heading p, .journey-panels article > p:not(.journey-year) { color: var(--muted); }
.journey-year, .journey .text-link:hover { color: var(--accent); }
.year-controls button { color: var(--muted); }
.year-controls button:hover { background: var(--soft); color: var(--ink); }
.year-controls button[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.journey :focus-visible { outline-color: var(--accent); }
.portrait-rail { scrollbar-color: #a99477 var(--canvas); }
.value-details details { background: var(--soft); }
.value-details details[open] { background: var(--paper); }
@media (max-width: 1100px) {
  .nav-enhanced .primary-nav { background: var(--paper); box-shadow: 0 18px 32px var(--menu-shadow); }
  .nav-group[open] { padding-bottom: 16px; }
  .nav-dropdown { box-shadow: none; }
  .nav-simple, .nav-brands { padding: 8px; }
}