/* Shared surface roles; brand and client artwork retain their original colors. */
:root {
  --surface: #f4f3f1;
  --surface-alt: #e9e8e4;
  --surface-raised: #ffffff;
  --text: #111111;
  --text-muted: #373737;
  --line: rgba(17, 17, 17, .28);
  --control-line: #767676;
  --accent-text: #9d3f0e;
  --rule-dark: var(--line);
  --rule-light: var(--line);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --surface: #111111;
  --surface-alt: #202020;
  --surface-raised: #292929;
  --text: #f4f3f1;
  --text-muted: #c3c3c3;
  --line: rgba(244, 243, 241, .28);
  --control-line: #8c8c8c;
  --accent-text: #e76928;
  color-scheme: dark;
}
body { background: var(--surface); color: var(--text); }
.site-header, .work-page .site-header { grid-template-columns: minmax(10rem, 1fr) auto auto auto; }
.site-header, .work-page .site-header, .site-footer, .hero, .page-hero,
.work-section, .process-section, .project-brief, .page-section-ink,
.page-section-paper, .well-section, .capabilities-section,
.service-visual-meta .service-visual-copy,
.service-visual-content .service-visual-copy, .service-visual-social .service-visual-copy {
  background: var(--surface); color: var(--text); border-color: var(--line);
}
.section-intro-dark { color: var(--text); }
.primary-nav, .work-page .primary-nav, .nav-services-panel { background: var(--surface); color: var(--text); border-color: var(--line); }
.work-page .site-header .primary-nav > a,
.work-page .site-header .nav-services > summary, .work-page .menu-toggle { color: var(--text); border-color: var(--line); }
.primary-nav a:hover, .primary-nav a:focus-visible,
.page-body .primary-nav a[aria-current="page"],
.work-page .site-header .primary-nav > a[aria-current="page"],
.nav-services > summary:hover, .nav-services > summary:focus-visible,
.nav-services[open] > summary, .nav-services[open].is-current > summary {
  background: var(--surface-alt); color: var(--text);
}
.nav-services.is-current > summary { color: var(--accent-text); }
.header-action, .work-page .site-header .header-action { background: var(--orange); color: var(--ink); border-color: var(--line); }
.header-action:hover, .work-page .site-header .header-action:hover { background: var(--surface-alt); color: var(--text); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 82px; min-height: 44px; padding: 0 14px; border: 0;
  border-left: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--surface-alt); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.theme-moon, [data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }
.theme-toggle:focus-visible, .work-page :is(button, input, a):focus-visible,
.website-viewport:focus-visible { outline: 2px solid var(--text); outline-offset: -5px; }
.skip-link { background: var(--surface); color: var(--text); }
.button-outline, .service-visual-content .button-outline, .service-visual-social .button-outline {
  border-color: currentColor; color: inherit;
}
.button-outline:hover, .button-outline:focus-visible,
.service-visual-content .button-outline:hover, .service-visual-social .button-outline:hover {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.button-dark, .button-paper { background: var(--text); color: var(--surface); border-color: var(--text); }
.button-orange, .button-orange:hover, .button-orange:focus-visible,
.button-dark:hover, .button-paper:hover { color: var(--ink); background: var(--orange); border-color: var(--ink); }
.buildline, .shared-foundation, .service-jump { background: var(--surface-alt); color: var(--text); }
.case-paper, .work-record-paper, .intake-form, .service-world-art figcaption {
  background: var(--surface-raised); color: var(--text);
}
.well-case-plate, .well-case-statement { border-color: var(--line); }
/* Fixed brand plates must keep dark lettering in either mode. */
.build-register, .product-entry, .well-directory article, .pricing-snapshot, .architecture-section,
.case-orange, .page-register, .page-section-orange, .work-record-orange,
.page-close, .pricing-family > header, .pricing-disclosure, .intake-route,
.service-visual-register, .content-plan-boundaries, .deliverable-plan-featured {
  --rule-dark: rgba(17, 17, 17, .28);
  --rule-light: rgba(17, 17, 17, .28);
  color: var(--ink);
}
.page-close .button-paper, .page-section-orange .button-dark {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.work-page .page-close { background: var(--surface-alt); color: var(--text); }
.work-page .page-close .button-paper { background: var(--orange); color: var(--ink); }
.pricing-family li p, .contact-price-register dt, .intake-counter, .intake-privacy { color: var(--text-muted); }
.intake-field input, .intake-field select, .intake-field textarea, .intake-counter {
  background: var(--surface-raised); color: var(--text); border-color: var(--control-line); caret-color: var(--orange);
}
.intake-field input::placeholder, .intake-field textarea::placeholder { color: var(--text-muted); }
.intake-field label span { color: var(--text); }
.brief-questions dt { color: var(--accent-text); }
.intake-form.has-errors :is(input, select, textarea):user-invalid { background: var(--surface-raised); color: var(--text); border-color: var(--accent-text); }
.content-plan-table, .content-plan-table thead th { background: var(--surface); color: var(--text); }
.content-plan-table caption, .content-plan-table .content-plan-group th,
.content-plan-table tbody th[scope="row"], .content-plan-table tfoot th,
.content-plan-table thead .content-plan-feature-heading { background: var(--surface-alt); color: var(--text); }
.content-plan-table thead .content-plan-featured { background: var(--orange); color: var(--ink); }
.content-plan-table tbody td:nth-child(3), .content-plan-table tfoot td:nth-child(3) { background: color-mix(in srgb, var(--orange) 14%, var(--surface)); }
.content-plan-table tbody small { color: var(--text-muted); }
.campaign-creative-stack, .content-format-stack, .social-format, .social-format span,
.campaign-creative-stack span { color: var(--ink); }
/* Client logos and captures are proof assets, with their native backgrounds. */
.client-register li, .linked-roster li { background: var(--paper); color: var(--ink); color-scheme: light; }
@media (min-width: 901px) and (max-width: 1200px) {
  .primary-nav > a, .nav-services > summary, .header-action { padding-inline: 14px; }
  .brand { padding-inline: 20px; }
}
@media (min-width: 901px) and (max-width: 1350px) {
  .primary-nav > a, .nav-services > summary, .header-action { padding-inline: 12px; }
  .brand { padding-inline: 18px; }
  .theme-toggle { min-width: 70px; padding-inline: 10px; }
}
@media (max-width: 900px) {
  .site-header, .work-page .site-header { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .theme-toggle { min-width: 44px; padding-inline: 12px; }
  .theme-toggle [data-theme-label] { display: none; }
  .nav-services-panel { background: var(--surface-alt); }
}
@media (max-width: 480px) {
  .site-header .brand { padding-inline: 12px; }
  .site-header .brand img { width: 116px; }
  .site-header .menu-toggle { padding-inline: 12px; }
  .site-header .header-action { padding-inline: 12px; font-size: 11px; }
}
@media print { .theme-toggle { display: none; } }
@media (max-width: 360px) { .site-header .brand img { width: 96px; } }