/* Shared UI palette. Hero poster artwork keeps its own intentional role colors. */
:root {
  --glass-blur: 20px;
  --brand-blue: #0e61d9;
  --brand-cream: #fffdd7;
  --brand-yellow: #fde840;
  --blue-rgb: 14 97 217;
  --ink-rgb: 36 39 38;
  --paper-rgb: 250 249 245;
  --surface-rgb: 255 255 255;
  --paper: rgb(var(--paper-rgb));
  --surface: rgb(var(--surface-rgb));
  --surface-muted: #f0f2f4;
  --ink: rgb(var(--ink-rgb));
  --muted: #606563;
  --accent: var(--brand-blue);
  --accent-hover: var(--brand-blue);
  --accent-soft: #eaf1fc;
  --accent-line: #c8d9f1;
  --brand-line: #dce2e9;
  --on-dark: var(--brand-cream);
  --on-dark-muted: var(--brand-cream);
  --gains-surface: #dbe7dd;
  --gains-line: #c3d6c8;
  --success-label: #cfeadb;
  --status-success: #2f6652;
  --status-success-soft: #e5eee9;
  --status-attention: #805915;
  --cta-hover: #fff075;
  --shadow: 0 3px 8px rgb(var(--ink-rgb) / .025), 0 18px 36px -18px rgb(var(--ink-rgb) / .13);
  --shadow-raised: 0 4px 10px rgb(var(--ink-rgb) / .04), 0 24px 45px -20px rgb(var(--ink-rgb) / .19);
  /* Legacy layout styles inherit the same neutral and blue families. */
  --vermilion: var(--brand-blue);
  --mist: var(--accent-soft);
  --clay: var(--surface-muted);
  --sage: var(--surface-muted);
  --lavender: var(--surface-muted);
  --sand: var(--surface-muted);
}

html { background: var(--brand-blue); }
body {
  background-color: var(--paper);
  background-image: linear-gradient(var(--brand-blue), var(--brand-blue));
  background-repeat: no-repeat;
  background-size: 100% 160px;
}
::selection { background: var(--brand-yellow); color: var(--ink); }

/* Brand blue anchors the opening and closing; yellow identifies primary actions. */
.site-header, .site-header.scrolled, .site-header:not(.scrolled) {
  background: var(--brand-blue);
  color: var(--brand-cream);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition: box-shadow .25s;
}
.site-header.scrolled {
  background: rgb(var(--blue-rgb) / .94);
  box-shadow: 0 8px 24px -16px rgb(var(--ink-rgb) / .2);
}
.site-header.scrolled .button:focus-visible { outline-color: var(--brand-cream); }
.button { box-shadow: 0 5px 12px -5px rgb(var(--ink-rgb) / .2); }
.button:hover { background: var(--accent-hover); box-shadow: var(--shadow); }
.button:before { display: none; }
.site-header .button, .hero-showcase .button, .contact-card .button { box-shadow: 0 6px 14px -7px rgb(var(--ink-rgb) / .24); }
.site-header .button:hover, .hero-showcase .button:hover, .contact-card .button:hover { box-shadow: 0 9px 20px -9px rgb(var(--ink-rgb) / .3); }

.workflow-section { background: var(--paper); }
.workflow-navigation a[aria-current=true] { background: var(--accent-soft); color: var(--brand-blue); box-shadow: none; }
.workflow-navigation a[aria-current=true] .nav-icon { color: var(--brand-blue); }
.workflow-reading:after { background: var(--brand-line); }
.workflow-reading i { background: var(--brand-blue); }
.chapter-image { box-shadow: var(--shadow-raised); }
.placeholder-vermilion, .placeholder-sage, .placeholder-ink, .placeholder-clay { background: var(--surface-muted); }
.workflow-chapter .floating-output { background: var(--surface); color: var(--ink); border: 0; box-shadow: var(--shadow-raised); backdrop-filter: none; }
.floating-meta { color: var(--muted); }
.floating-lines span { background: var(--surface-muted); }
.floating-boundary { color: var(--brand-blue); }
.icon { background: var(--accent-soft); color: var(--brand-blue); box-shadow: none; }
.chapter-copy .outcome-line { border: 0; background: var(--surface-muted); border-radius: 16px; padding: 20px 22px; }

/* Inverse surfaces share the same bright blue; charcoal is reserved for text. */
.image-interlude, .placeholder-interlude { background: var(--brand-blue); }
.interlude-copy { color: var(--on-dark); }
.interlude-copy > .eyebrow { color: var(--on-dark-muted); }
.interlude-copy > span { color: var(--on-dark-muted); }
.interlude-copy .interlude-question { font-size: clamp(15px,1.4vw,19px); line-height: 1.4; color: var(--on-dark-muted); margin: 20px 0 14px; letter-spacing: .01em; }
.interlude-copy .editorial { margin-top: 0; }
.people-section .principle-grid > div { border: 0; }

/* Neutral section rhythm; blue is reserved for navigation, icons, and emphasis. */
.approach-section { background: var(--surface-muted); }
.approach-grid article { background: var(--surface); box-shadow: var(--shadow); border: 0; }
.approach-grid article:hover { box-shadow: var(--shadow-raised); }
.approach-grid > li:before { background: var(--brand-line); }
.approach-grid > li:after { background: var(--surface-muted); color: var(--brand-blue); }
.approach-grid article:hover .icon { background: var(--brand-blue); color: var(--on-dark); box-shadow: none; }
#diagnosis .offer-phases article { background: var(--surface); border: 0; box-shadow: var(--shadow); }
#diagnosis > .commercial-note { border: 0; }
.faq details { background: var(--surface-muted); box-shadow: none; border: 0; }
.faq details[open] { background: var(--surface); box-shadow: var(--shadow); }
.faq details[open] summary { color: var(--brand-blue); }

.contact-section { background: var(--brand-blue); color: var(--on-dark); }
.contact-section:before { display: none; }
.contact-section .eyebrow { color: var(--on-dark-muted); }
.contact-grid > div > p:not(.eyebrow) { color: var(--on-dark-muted); }
.contact-card { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raised); backdrop-filter: none; border: 0; }
.contact-grid > .contact-card > p:not(.eyebrow) { color: var(--muted); }
.contact-card .button { background: var(--brand-yellow); color: var(--ink); }
.contact-card .button:hover { background: var(--cta-hover); color: var(--ink); }
.contact-email a { color: var(--brand-blue); flex-wrap: wrap; column-gap: 7px; row-gap: 0; }
.contact-email a:hover { color: var(--accent-hover); }
.contact-email strong { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .workflow-index { background: var(--paper); backdrop-filter: none; box-shadow: 0 10px 20px -16px rgb(var(--ink-rgb) / .18); border: 0; }
  .interlude-copy .interlude-question { margin: 14px 0 10px; font-size: 15px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.scrolled { background: var(--brand-blue); }
}