/* Light/dark theme tokens and theme-specific component surfaces. */

[data-theme-icon-light] {
  opacity: 1;
  transform: rotate(0deg);
}

[data-theme-icon-dark] {
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
}

[data-theme="dark"] [data-theme-icon-light] {
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}

[data-theme="dark"] [data-theme-icon-dark] {
  opacity: 1;
  transform: rotate(0deg);
}

/* ─── Dark mode surface overrides ─── */
[data-theme="dark"] .concept-page {
  background-color: var(--paper);
  background-image: none;
}

[data-theme="dark"] .concept-page .site-header.concept-header,
[data-theme="dark"] .concept-page .site-header.concept-header.scrolled {
  background: var(--surface-glass);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .concept-page .site-header.concept-header.scrolled {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--palette-black) 25%, transparent);
}

[data-theme="dark"] .concept-nav-cta {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink-on-bright);
}

[data-theme="dark"] .concept-page .lang-current {
  border-color: var(--line);
  background: var(--paper-bright);
}

[data-theme="dark"] .concept-page .lang-menu {
  border-color: var(--line);
  background: var(--paper-bright);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--palette-black) 40%, transparent);
}

[data-theme="dark"] .concept-page .lang-option.is-active {
  color: var(--ink-on-bright);
}

[data-theme="dark"] .concept-hero h1 em {
  color: var(--blue);
  text-shadow: 0 10px 40px color-mix(in srgb, var(--acid) 20%, transparent);
}

[data-theme="dark"] .concept-hero::before {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 6%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--palette-forest-deep) 20%, transparent), color-mix(in srgb, var(--palette-forest-deep) 0%, transparent)),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--palette-soft-ivory-bright) 4%, transparent) 0 1px, transparent 1px 18px);
}

[data-theme="dark"] .concept-hero-visual {
  opacity: .45;
}

[data-theme="dark"] .concept-hero-facts {
  border-color: var(--line);
}

[data-theme="dark"] .concept-hero-facts article + article {
  border-left-color: var(--line);
}

[data-theme="dark"] .concept-primary-action {
  background: var(--acid);
  color: var(--ink-on-bright);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--acid) 48%, transparent);
}

[data-theme="dark"] .concept-primary-action:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  box-shadow: 4px 4px 0 var(--acid);
}

[data-theme="dark"] .concept-viewer-shell {
  border-color: var(--line);
  background: var(--paper-bright);
  box-shadow:
    0 34px 84px color-mix(in srgb, var(--palette-black) 30%, transparent),
    0 10px 26px color-mix(in srgb, var(--acid) 6%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .viewer-topbar,
[data-theme="dark"] .concept-viewer-shell .viewer-bottombar {
  background: var(--paper-bright);
  border-color: var(--line);
}

[data-theme="dark"] .concept-viewer-shell .viewer-stage {
  background: var(--paper-dim);
}

[data-theme="dark"] .concept-viewer-shell .viewer-back,
[data-theme="dark"] .concept-viewer-shell .topbar-button {
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 8%, transparent);
  border-color: var(--line);
}

[data-theme="dark"] .concept-viewer-shell .view-button {
  border-color: var(--line);
}

[data-theme="dark"] .concept-viewer-shell .view-button.active {
  background: color-mix(in srgb, var(--acid) 14%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button {
  border-color: var(--line);
  background: var(--paper-bright);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button.active {
  background: var(--blue-surface);
  border-color: var(--blue-surface);
  color: white;
}

[data-theme="dark"] .brand-lockup-primary {
  display: none !important;
}

[data-theme="dark"] .brand-lockup-reverse {
  display: block !important;
}

/* ─── Dark mode surface & text contrast overrides ───
   The --ink/--paper/--line dark-theme token block that used to live here
   moved to design-tokens.css — it duplicated (with different values) the
   dead first pass in core.css. See design-tokens.css for the note. */
/* Was `background-color: var(--palette-forest-deep)` — a literal that duplicated --paper and
   silently won over it, so changing the token had no effect on the page
   background at all. Now driven by the token, same for the text colour. */
[data-theme="dark"] body,
[data-theme="dark"] .concept-page {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
}

[data-theme="dark"] .concept-page .site-header.concept-header,
[data-theme="dark"] .concept-page .site-header.concept-header.scrolled {
  background: var(--surface-glass);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .concept-page .site-header.concept-header.scrolled {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--palette-black) 40%, transparent);
}

[data-theme="dark"] .concept-nav a {
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-nav-cta {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink-on-bright);
}

[data-theme="dark"] .concept-page .lang-current {
  border-color: var(--line);
  background: var(--palette-forest-surface);
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-page .lang-menu {
  border-color: var(--line);
  background: var(--palette-forest-surface);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--palette-black) 60%, transparent);
}

[data-theme="dark"] .concept-page .lang-option {
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-page .lang-option.is-active {
  background: var(--acid);
  color: var(--ink-on-bright);
}

[data-theme="dark"] .concept-eyebrow {
  color: var(--palette-sand-linen);
}

[data-theme="dark"] .concept-hero h1 {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-hero h1 em {
  color: var(--blue);
  text-shadow: 0 10px 40px color-mix(in srgb, var(--acid) 25%, transparent);
}

[data-theme="dark"] .concept-hero-lead {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 88%, transparent);
}

[data-theme="dark"] .concept-hero::before {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 6%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--palette-forest-deep) 20%, transparent), color-mix(in srgb, var(--palette-forest-deep) 0%, transparent)),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--palette-soft-ivory-bright) 4%, transparent) 0 1px, transparent 1px 18px);
}

[data-theme="dark"] .concept-hero-visual {
  opacity: .45;
}

[data-theme="dark"] .concept-hero-facts {
  border-color: var(--line);
}

[data-theme="dark"] .concept-hero-facts article + article {
  border-left-color: var(--line);
}

[data-theme="dark"] .concept-hero-facts strong {
  color: var(--acid);
}

[data-theme="dark"] .concept-hero-facts span {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-primary-action {
  background: var(--acid);
  color: var(--ink-on-bright);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--acid) 48%, transparent);
}

[data-theme="dark"] .concept-primary-action:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  box-shadow: 4px 4px 0 var(--acid);
}

[data-theme="dark"] .concept-text-link {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 18%, transparent);
  background: var(--palette-forest-surface);
  box-shadow:
    0 34px 84px color-mix(in srgb, var(--palette-black) 45%, transparent),
    0 10px 26px color-mix(in srgb, var(--acid) 8%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .viewer-topbar,
[data-theme="dark"] .concept-viewer-shell .viewer-bottombar {
  background: var(--palette-forest-surface);
  border-color: var(--line);
}

[data-theme="dark"] .concept-viewer-shell .viewer-title strong {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .viewer-title .viewer-kicker {
  color: var(--acid);
}

[data-theme="dark"] .building-draft-note {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 60%, transparent);
}

[data-theme="dark"] .viewer-meta span {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .viewer-stage {
  background: var(--paper);
}

[data-theme="dark"] .concept-viewer-shell .viewer-back,
[data-theme="dark"] .concept-viewer-shell .topbar-button {
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 10%, transparent);
  border-color: var(--line);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .view-button {
  border-color: var(--line);
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 82%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .view-button.active {
  background: color-mix(in srgb, var(--acid) 18%, transparent);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button {
  border-color: var(--line);
  background: var(--palette-forest-surface);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button.active {
  background: var(--blue-surface);
  border-color: var(--blue-surface);
  color: white;
}

[data-theme="dark"] .concept-viewer-shell .room-button {
  border-color: var(--line);
  background: var(--palette-forest-surface);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .room-button.active {
  background: color-mix(in srgb, var(--acid) 18%, transparent);
  border-color: color-mix(in srgb, var(--acid) 38%, transparent);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .viewer-hint {
  background: color-mix(in srgb, var(--palette-forest-abyss) 85%, transparent);
  border-color: var(--line);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-frame-beam {
  background: conic-gradient(
    from var(--concept-beam-angle),
    transparent 0deg 238deg,
    color-mix(in srgb, var(--acid) 20%, transparent) 252deg,
    var(--blue) 276deg,
    var(--acid) 296deg,
    transparent 320deg
  );
}

[data-theme="dark"] .concept-frame-corner::before,
[data-theme="dark"] .concept-frame-corner::after {
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 40%, transparent);
}

/* Capabilities Section Dark Mode */
[data-theme="dark"] .concept-capabilities {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--acid) 12%, transparent), transparent 48%),
    var(--palette-forest-deep);
  border: 1px solid color-mix(in srgb, var(--palette-soft-ivory-bright) 12%, transparent);
}

[data-theme="dark"] .concept-capabilities > header h2 {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-capabilities > header p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 88%, transparent);
}

[data-theme="dark"] .concept-capability {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 12%, transparent);
}

[data-theme="dark"] .concept-capability-primary {
  background: var(--palette-forest-surface) !important;
  color: var(--palette-white) !important;
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 15%, transparent) !important;
}

[data-theme="dark"] .concept-capability-primary h3 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-capability-primary p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 85%, transparent) !important;
}

[data-theme="dark"] .concept-capability-acid {
  background: var(--acid) !important;
  color: var(--ink-on-bright) !important;
}

[data-theme="dark"] .concept-capability-acid h3 {
  color: var(--ink-on-bright) !important;
}

[data-theme="dark"] .concept-capability-acid p {
  color: color-mix(in srgb, var(--palette-forest-deep) 88%, transparent) !important;
}

/* Matches the light-theme rules in business.css. Both cards previously sat on
   --blue-surface here, which is why the dark bento showed four panels in
   three colours. Terracotta carries white at 5.45:1 and Forest at 8.6:1, so
   neither needs a separate dark value. */
[data-theme="dark"] .concept-capability-coral {
  background: var(--coral) !important;
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-capability-coral h3 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-capability-coral p {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-capability-blue {
  background: var(--palette-forest) !important;
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-capability-blue h3 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-capability-blue p {
  color: var(--palette-white) !important;
}

/* Why Section & Thesis Quote Dark Mode */
[data-theme="dark"] .concept-why {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--acid) 25%, transparent), transparent 31rem),
    radial-gradient(circle at 86% 24%, color-mix(in srgb, var(--acid) 6%, transparent), transparent 26rem),
    linear-gradient(135deg, var(--palette-forest-abyss) 0%, var(--palette-forest-deep) 52%, var(--palette-forest-deep) 100%);
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 10%, transparent);
  box-shadow: 0 40px 110px color-mix(in srgb, var(--palette-black) 40%, transparent);
}

[data-theme="dark"] .concept-why-copy > span {
  color: var(--acid);
}

[data-theme="dark"] .concept-why h2 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-why > header > p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 88%, transparent) !important;
}

/* Viewer elevation is theme-neutral: the fill and hairline define the frame,
   while the shared token keeps only the restrained inner light. */
[data-theme="dark"] .concept-why-media-stage {
  background: var(--palette-forest-abyss);
  box-shadow: var(--viewer-stage-shadow);
}

[data-theme="dark"] .concept-why-quote {
  background: color-mix(in srgb, var(--palette-white) 4%, transparent) !important;
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 15%, transparent) !important;
}

[data-theme="dark"] .concept-why-quote p,
[data-theme="dark"] #sales-thesis-title {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 92%, transparent) !important;
}

[data-theme="dark"] .concept-why-quote strong,
[data-theme="dark"] #sales-thesis-title strong {
  color: var(--palette-white) !important;
  font-weight: var(--fw-strong);
}

[data-theme="dark"] .concept-why-quote footer {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 72%, transparent) !important;
  border-left-color: var(--acid) !important;
}

/* Card fills are derived from palette tokens, not literals. The previous
   var(--palette-forest-surface) / #162722 / #251b27 were an off-palette dark green and mauve left
   over from an earlier colourway — the ones that stood out in review. Tinting
   --paper-bright with a palette hue keeps every value traceable to
   design-tokens.css and makes both themes follow automatically. */
[data-theme="dark"] .concept-why-grid article {
  background: var(--paper-bright) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .concept-why-grid article:nth-child(2) {
  background: color-mix(in srgb, var(--acid) 14%, var(--paper-bright)) !important;
}

[data-theme="dark"] .concept-why-grid article:nth-child(3) {
  background: color-mix(in srgb, var(--coral) 14%, var(--paper-bright)) !important;
}

[data-theme="dark"] .concept-why-grid article:nth-child(4) {
  background: var(--blue-surface) !important;
  color: var(--on-blue) !important;
}

/* This card inverts to blue in the dark theme, where the acid eyebrow it
   inherits drops to 4.3:1. It reads as the card's own foreground instead. */
[data-theme="dark"] .concept-why-grid article:nth-child(4) > span {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-why-grid h3 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-why-grid p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 88%, transparent) !important;
}

[data-theme="dark"] .concept-why-grid article:nth-child(4) p {
  color: color-mix(in srgb, var(--palette-white) 92%, transparent) !important;
}

[data-theme="dark"] .concept-why-grid article > span {
  color: var(--acid) !important;
}

/* Workflow Section Dark Mode */
[data-theme="dark"] .concept-workflow {
  background: var(--palette-forest-deep);
}

[data-theme="dark"] .concept-workflow-copy > span {
  color: var(--acid);
}

[data-theme="dark"] .concept-workflow h2 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-workflow-copy p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 85%, transparent) !important;
}

[data-theme="dark"] .concept-workflow-plan {
  --plan-ink: var(--acid);
  --plan-accent: var(--coral);
}

[data-theme="dark"] .concept-plan-sheet {
  background: color-mix(in srgb, var(--palette-forest-surface) 84%, transparent);
  box-shadow:
    14px 14px 0 color-mix(in srgb, var(--acid) 4%, transparent),
    0 24px 50px color-mix(in srgb, #000 24%, transparent);
}

[data-theme="dark"] .concept-workflow-track article {
  background: var(--palette-forest-surface) !important;
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent) !important;
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-workflow-track h3 {
  color: var(--palette-white) !important;
}

[data-theme="dark"] .concept-workflow-track p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 85%, transparent) !important;
}

[data-theme="dark"] .concept-workflow-track article:nth-of-type(3) {
  background: var(--acid) !important;
  color: var(--ink-on-bright) !important;
}

[data-theme="dark"] .concept-workflow-track article:nth-of-type(3) h3 {
  color: var(--ink-on-bright) !important;
}

[data-theme="dark"] .concept-workflow-track article:nth-of-type(3) p {
  color: color-mix(in srgb, var(--palette-forest-deep) 88%, transparent) !important;
}

/* Contact Section & Footer Dark Mode */
[data-theme="dark"] .concept-contact {
  background:
    radial-gradient(circle at 82% 35%, color-mix(in srgb, var(--acid) 70%, transparent), transparent 28rem),
    var(--acid);
  color: var(--ink-on-bright);
}

[data-theme="dark"] .concept-contact h2 {
  color: var(--ink-on-bright) !important;
}

[data-theme="dark"] .concept-contact h2 em {
  color: var(--blue-surface);
}

[data-theme="dark"] .concept-contact p {
  color: color-mix(in srgb, var(--palette-forest-deep) 88%, transparent) !important;
}

[data-theme="dark"] .concept-contact-action {
  border-color: var(--ink-on-bright);
  background: var(--ink-on-bright);
  color: var(--acid);
}

[data-theme="dark"] .concept-footer {
  border-top-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 15%, transparent);
}

[data-theme="dark"] .concept-footer p {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 70%, transparent);
}

[data-theme="dark"] .concept-footer > a:last-child {
  color: var(--palette-white);
}

[data-theme="dark"] .concept-page .page-progress span {
  background: var(--blue);
}

[data-theme="dark"] .theme-toggle {
  border-color: var(--line);
  background: var(--palette-forest-surface);
  color: var(--palette-white);
}

[data-theme="dark"] .concept-viewer-shell .topbar-button {
  background: color-mix(in srgb, var(--palette-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--palette-white) 12%, transparent);
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-viewer-shell .topbar-button:hover {
  background: color-mix(in srgb, var(--palette-white) 14%, transparent);
  border-color: var(--acid);
}

[data-theme="dark"] .concept-viewer-shell .topbar-button.active {
  background: var(--acid);
  color: var(--ink-on-bright);
  border-color: var(--acid);
  box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 35%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .view-button.active {
  background: color-mix(in srgb, var(--acid) 14%, transparent);
  border-color: color-mix(in srgb, var(--acid) 35%, transparent);
  color: var(--acid);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acid) 15%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .topbar-button.active {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink-on-bright);
  box-shadow: none;
}

[data-theme="dark"] .concept-viewer-shell .view-button.active {
  border-color: color-mix(in srgb, var(--acid) 48%, transparent);
  background: color-mix(in srgb, var(--acid) 14%, transparent);
  color: var(--acid);
  box-shadow: none;
}

.concept-why-quote #sales-thesis-title strong,
[data-theme="dark"] .concept-why-quote #sales-thesis-title strong {
  font: 400 clamp(26px, 2.3vw, 38px)/1.06 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}

html[data-theme="light"] .concept-capabilities {
  border: 1px solid color-mix(in srgb, var(--palette-forest-deep) 12%, transparent);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--coral) 14%, transparent), transparent 30rem),
    linear-gradient(135deg, var(--palette-soft-ivory-dim), var(--palette-soft-ivory) 58%, var(--palette-soft-ivory-dim));
  color: var(--ink);
}

html[data-theme="light"] .concept-capabilities::before {
  color: color-mix(in srgb, var(--palette-forest-deep) 3.5%, transparent);
}

html[data-theme="light"] .concept-capabilities > header > span {
  color: var(--blue);
}

html[data-theme="light"] .concept-capabilities > header h2 {
  color: var(--ink);
}

html[data-theme="light"] .concept-capabilities > header h2 em {
  color: var(--blue);
}

html[data-theme="light"] .concept-capabilities > header p {
  color: color-mix(in srgb, var(--palette-forest-deep) 74%, transparent);
}

/* Cinematic hero: keep the object vivid while adapting its atmosphere. */
[data-theme="dark"] .concept-hero h1 em {
  color: var(--acid);
  text-shadow: none;
}

[data-theme="dark"] .concept-hero-visual {
  opacity: 1;
}

/* This literal (#4057c8) was the most prominent blue text on the site — the
   emphasised half of the hero headline — and it bypassed --blue entirely,
   which is why the token swap never reached it. Follows the accent now. */
html[data-theme="light"] .concept-hero h1 em {
  color: var(--blue);
}

html[data-theme="light"] .concept-hero-visual {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--coral) 20%, transparent), transparent 38%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--acid) 18%, transparent), transparent 34%),
    var(--palette-soft-ivory-dim);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--palette-terracotta) 20%, transparent),
    0 38px 90px -52px color-mix(in srgb, var(--palette-terracotta) 42%, transparent);
}

html[data-theme="light"] .concept-hero-scan img {
  mix-blend-mode: multiply;
  filter:
    contrast(1.04)
    saturate(.86)
    drop-shadow(0 28px 44px color-mix(in srgb, var(--palette-terracotta) 20%, transparent));
}

html[data-theme="light"] .concept-hero-visual .concept-shader-root.is-ready {
  opacity: .24;
}

[data-theme="dark"] .concept-primary-action {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink-on-bright);
  box-shadow: none;
}

[data-theme="dark"] .concept-primary-action:hover {
  border-color: var(--palette-white);
  background: var(--palette-white);
  color: var(--ink-on-bright);
  box-shadow: none;
}

[data-theme="dark"] .concept-capabilities {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent);
  background: var(--palette-forest-deep);
}

[data-theme="dark"] .concept-capabilities > header h2 em {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 72%, transparent);
  font-style: normal;
}

html[data-theme="light"] .concept-capabilities {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  background: var(--palette-soft-ivory-dim);
}

html[data-theme="light"] .concept-capabilities > header h2 em {
  color: color-mix(in srgb, var(--palette-forest-deep) 68%, transparent);
  font-style: normal;
}

html[data-theme="light"] .concept-why {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  background:
    radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 32rem),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--acid) 20%, transparent), transparent 27rem),
    linear-gradient(135deg, var(--palette-soft-ivory-dim) 0%, var(--palette-soft-ivory) 52%, var(--palette-soft-ivory-dim) 100%);
  color: var(--ink);
  box-shadow: 0 38px 100px color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
}

html[data-theme="light"] .concept-why::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--palette-forest-deep) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--palette-forest-deep) 4.5%, transparent) 1px, transparent 1px);
}

html[data-theme="light"] .concept-why-copy > span {
  color: var(--blue);
}

html[data-theme="light"] .concept-why h2 {
  color: var(--ink);
}

html[data-theme="light"] .concept-why h2 em {
  color: var(--blue);
}

html[data-theme="light"] .concept-why-copy > p {
  color: color-mix(in srgb, var(--palette-forest-deep) 76%, transparent);
}

html[data-theme="light"] .concept-twin-beam {
  background: color-mix(in srgb, var(--palette-forest-deep) 16%, transparent);
}

html[data-theme="light"] .concept-twin-node {
  color: color-mix(in srgb, var(--palette-forest-deep) 72%, transparent);
}

html[data-theme="light"] .concept-twin-node > .ph {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 18%, transparent);
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 90%, transparent);
  color: var(--ink);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--palette-soft-ivory) 72%, transparent);
}

html[data-theme="light"] .concept-twin-node:nth-of-type(2) > .ph {
  border-color: color-mix(in srgb, var(--coral) 38%, transparent);
  color: var(--blue);
}

html[data-theme="light"] .concept-twin-node:nth-of-type(3) > .ph {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 24%, transparent);
  color: var(--ink);
}

html[data-theme="light"] .concept-twin-node[data-finance-direction="positive"] > .ph {
  border-color: var(--finance-positive);
  background: var(--finance-positive);
  color: var(--on-finance-positive);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--finance-positive) 14%, transparent);
}

html[data-theme="light"] .concept-twin-node[data-finance-direction="positive"] > span {
  color: var(--ink);
}

html[data-theme="light"] .concept-why-media figcaption {
  color: color-mix(in srgb, var(--palette-forest-deep) 74%, transparent);
}

html[data-theme="light"] .concept-why-quote {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--coral) 10%, transparent), color-mix(in srgb, var(--palette-soft-ivory-bright) 76%, transparent) 50%, color-mix(in srgb, var(--acid) 18%, transparent));
}

html[data-theme="light"] .concept-why-quote p,
html[data-theme="light"] .concept-why-quote strong {
  color: var(--ink);
}

html[data-theme="light"] .concept-why-quote > .ph {
  color: var(--blue);
}

html[data-theme="light"] .concept-why-quote footer {
  border-left-color: color-mix(in srgb, var(--coral) 42%, transparent);
  color: color-mix(in srgb, var(--palette-forest-deep) 74%, transparent);
}

html[data-theme="light"] .concept-why-grid {
  background: color-mix(in srgb, var(--palette-forest-deep) 12%, transparent);
}

html[data-theme="light"] .concept-why-grid article,
html[data-theme="light"] .concept-why-grid article:nth-child(2),
html[data-theme="light"] .concept-why-grid article:nth-child(3) {
  color: var(--ink);
}

html[data-theme="light"] .concept-why-grid article {
  background: var(--paper-bright);
}

/* Same palette-tint derivation as the dark block above; var(--palette-soft-ivory-dim) / var(--palette-soft-ivory-dim)
   were the light-theme halves of the same off-palette green and mauve. */
html[data-theme="light"] .concept-why-grid article:nth-child(2) {
  background: color-mix(in srgb, var(--acid) 14%, var(--paper-bright));
}

html[data-theme="light"] .concept-why-grid article:nth-child(3) {
  background: color-mix(in srgb, var(--coral) 14%, var(--paper-bright));
}

html[data-theme="light"] .concept-why-grid article:nth-child(4) {
  background: var(--blue-surface);
  color: var(--on-blue);
}

html[data-theme="light"] .concept-why-grid article:nth-child(-n + 3) > .ph {
  color: var(--blue);
}

html[data-theme="light"] .concept-why-grid article:nth-child(4) > .ph {
  color: var(--on-blue);
}

html[data-theme="light"] .concept-why-grid article > span {
  color: color-mix(in srgb, var(--palette-forest-deep) 74%, transparent);
}

html[data-theme="light"] .concept-why-grid article:nth-child(4) > span,
html[data-theme="light"] .concept-why-grid article:nth-child(4) h3,
html[data-theme="light"] .concept-why-grid article:nth-child(4) p {
  color: var(--on-blue);
}

html[data-theme="light"] .concept-why-grid h3 {
  color: var(--ink);
}

html[data-theme="light"] .concept-why-grid p {
  color: color-mix(in srgb, var(--palette-forest-deep) 72%, transparent);
}

html[data-theme="light"] .concept-workflow-track article:nth-of-type(3) {
  background: color-mix(in srgb, var(--acid) 78%, transparent);
  color: var(--ink);
}

html[data-theme="light"] .concept-workflow-track article:nth-of-type(3) h3,
html[data-theme="light"] .concept-workflow-track article:nth-of-type(3) p {
  color: var(--ink);
}

html[data-theme="light"] .concept-viewer-shell .tool-panel {
  border: 1px solid color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 96%, transparent);
  color: var(--ink);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--palette-forest-deep) 18%, transparent);
}

html[data-theme="light"] .concept-viewer-shell .tool-panel button {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 16%, transparent);
  background: color-mix(in srgb, var(--palette-forest-deep) 3.5%, transparent);
  color: var(--ink);
}

html[data-theme="light"] .concept-viewer-shell .tool-panel button:hover,
html[data-theme="light"] .concept-viewer-shell .tool-panel button.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--coral) 10%, transparent);
}

html[data-theme="light"] .concept-viewer-shell .tool-panel > p,
html[data-theme="light"] .concept-viewer-shell .tool-panel .tool-clear {
  color: color-mix(in srgb, var(--palette-forest-deep) 68%, transparent);
}

html[data-theme="light"] .concept-viewer-shell .tool-panel .tool-clear {
  background: color-mix(in srgb, var(--palette-forest-deep) 2.5%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .floor-panel,
[data-theme="dark"] .concept-viewer-shell .room-panel,
[data-theme="dark"] .concept-viewer-shell .building-legend,
[data-theme="dark"] .concept-viewer-shell .tool-panel {
  border: 1px solid color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent);
  background: color-mix(in srgb, var(--palette-forest-deep) 94%, transparent);
  color: var(--palette-soft-ivory);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--palette-black) 34%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .floor-panel > span,
[data-theme="dark"] .concept-viewer-shell .room-panel > span,
[data-theme="dark"] .concept-viewer-shell .building-legend span,
[data-theme="dark"] .concept-viewer-shell .tool-panel > p {
  color: color-mix(in srgb, var(--palette-soft-ivory) 68%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button,
[data-theme="dark"] .concept-viewer-shell .room-button {
  border-color: transparent;
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 3.5%, transparent);
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button:hover,
[data-theme="dark"] .concept-viewer-shell .room-button:hover {
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 10%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .floor-buttons button.active {
  border-color: var(--blue-surface);
  background: var(--blue-surface);
  color: var(--palette-soft-ivory-bright);
}

[data-theme="dark"] .concept-viewer-shell .room-button.active {
  border-color: color-mix(in srgb, var(--acid) 42%, transparent);
  background: color-mix(in srgb, var(--acid) 16%, transparent);
  color: var(--acid);
}

[data-theme="dark"] .concept-viewer-shell .building-legend i {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--palette-soft-ivory-bright) 8%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .tool-panel button {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 16%, transparent);
  background: color-mix(in srgb, var(--palette-soft-ivory-bright) 4.5%, transparent);
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-viewer-shell .tool-panel button > .ph {
  color: currentColor;
}

[data-theme="dark"] .concept-viewer-shell .tool-panel button:hover,
[data-theme="dark"] .concept-viewer-shell .tool-panel button.active {
  border-color: var(--acid);
  background: color-mix(in srgb, var(--acid) 10%, transparent);
}

[data-theme="dark"] .concept-viewer-shell .tool-panel .tool-clear {
  color: color-mix(in srgb, var(--palette-soft-ivory) 68%, transparent);
}

[data-theme="dark"] .concept-back-to-top {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 16%, transparent);
  background: color-mix(in srgb, var(--palette-forest-deep) 92%, transparent);
  color: var(--palette-soft-ivory);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--palette-black) 38%, transparent);
}

[data-theme="dark"] .concept-back-to-top:hover {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink-on-bright);
}

/* This chip is now a dark disc on the acid card, so its glyph has to be the
   acid — the old --ink-on-bright value was dark-on-dark and the icon vanished entirely. */
[data-theme="dark"] .concept-workflow-track article:nth-of-type(3) > span,
[data-theme="dark"] .concept-workflow-track article:nth-of-type(3) > span .ph {
  color: var(--acid) !important;
}

html[data-theme="light"] .concept-business-note {
  color: color-mix(in srgb, var(--palette-forest-deep) 74%, transparent);
}

[data-theme="dark"] .concept-capability-primary .concept-business-metric-label {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 64%, transparent);
}

[data-theme="dark"] .concept-faq {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 16%, transparent);
}

[data-theme="dark"] .concept-faq-list,
[data-theme="dark"] .concept-faq-list details {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent);
}

[data-theme="dark"] .concept-faq-intro h2,
[data-theme="dark"] .concept-faq-list summary {
  color: var(--palette-soft-ivory);
}

[data-theme="dark"] .concept-faq-intro p,
[data-theme="dark"] .concept-faq-list details > p {
  color: color-mix(in srgb, var(--palette-soft-ivory) 68%, transparent);
}

[data-theme="dark"] .concept-faq-intro h2 em,
[data-theme="dark"] .concept-faq-intro > span,
[data-theme="dark"] .concept-faq-list summary > span,
[data-theme="dark"] .concept-faq-list details[open] summary > .ph,
[data-theme="dark"] .concept-faq-list summary:hover strong,
[data-theme="dark"] .concept-faq-list summary:focus-visible strong {
  color: var(--acid);
}

/* The scan asset is transparent; the stage now provides the themed backdrop. */
html[data-theme="light"] .concept-why-media-stage {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  background:
    radial-gradient(circle at 52% 42%, color-mix(in srgb, var(--palette-white) 98%, transparent) 0%, color-mix(in srgb, var(--palette-soft-ivory-bright) 96%, transparent) 46%, color-mix(in srgb, var(--palette-soft-ivory-dim) 98%, transparent) 100%);
  box-shadow: var(--viewer-stage-shadow);
}

html[data-theme="light"] .concept-twin-shader-fallback {
  opacity: .16;
  background:
    radial-gradient(circle at 20% 60%, color-mix(in srgb, var(--coral) 52%, transparent), transparent 36%),
    radial-gradient(circle at 77% 36%, color-mix(in srgb, var(--acid) 38%, transparent), transparent 30%),
    radial-gradient(circle at 64% 78%, color-mix(in srgb, var(--coral) 24%, transparent), transparent 28%);
}

html[data-theme="light"] .concept-twin-shader.is-ready {
  opacity: .16;
}

html[data-theme="light"] .concept-why-media-stage > img {
  filter:
    contrast(1.03)
    saturate(.94)
    drop-shadow(0 22px 28px color-mix(in srgb, var(--palette-terracotta) 18%, transparent));
}