/* Fixed graphite surfaces. Product media and brand colours stay intact. */
html[data-appearance=graphite]{color-scheme:dark;--page-bg:#202327;--page-fg:#f4f1eb;--surface-bg:#272b30;--panel-bg:#2d3238;--panel-alt:#22262b;--selected-bg:#3a3e44;--text-muted:#c1c6cd;--text-faint:#a8b1ba;--theme-border:#5a626d;--theme-gold:#e1b873;--hero-glow:#62677336;--hero-end:#181b20;--theme-deep:#191c20;--primary-bg:#f4efe4;--primary-fg:#202327}
html[data-appearance=graphite]{--gold:var(--theme-gold);--muted:var(--text-muted);--line:var(--theme-border)}
html[data-appearance=graphite] body{background:var(--page-bg);color:var(--page-fg)}
html[data-appearance=graphite] .site-header,
html[data-appearance=graphite] .site-header nav{background:var(--page-bg);border-color:var(--theme-border);color:var(--page-fg)}
html[data-appearance=graphite] .site-header nav,
html[data-appearance=graphite] .wordmark,
html[data-appearance=graphite] .site-footer .wordmark{color:var(--page-fg)}
html[data-appearance=graphite] .language-control select,
html[data-appearance=graphite] .language-control option{background:var(--page-bg);color:var(--page-fg)}
html[data-appearance=graphite] .language-control select{width:110px;max-width:130px;min-height:36px;border:1px solid var(--theme-border);border-radius:999px;padding:8px 12px;padding-inline-end:28px;font-size:11px;appearance:auto;outline:none;box-shadow:none}
html[data-appearance=graphite] .language-control select:focus-visible{outline:2px solid var(--text-muted);outline-offset:3px}
html[data-appearance=graphite] .hero{color:var(--page-fg);background:radial-gradient(ellipse at 70% 45%,var(--hero-glow),transparent 50%),linear-gradient(130deg,var(--page-bg),var(--hero-end))}
html[data-appearance=graphite] h1 em,
html[data-appearance=graphite] .eyebrow,
html[data-appearance=graphite] .section-heading .eyebrow,
html[data-appearance=graphite] .studio-compact .eyebrow{color:var(--theme-gold)}
html[data-appearance=graphite] .hero-description,
html[data-appearance=graphite] .hero-footnote,
html[data-appearance=graphite] .scroll-hint,
html[data-appearance=graphite] .visual-bottomline,
html[data-appearance=graphite] .visual-topline,
html[data-appearance=graphite] .visual-bottomline .motion-toggle,
html[data-appearance=graphite] .product-studio-label,
html[data-appearance=graphite] .product-studio-label span,
html[data-appearance=graphite] .product-studio-action button,
html[data-appearance=graphite] .section-number{color:var(--text-muted);border-color:var(--theme-border)}
html[data-appearance=graphite] .hero-modes button{background:var(--panel-bg);color:var(--page-fg);border-color:var(--theme-border)}
html[data-appearance=graphite] .hero-modes button:hover,
html[data-appearance=graphite] .hero-modes button[aria-pressed=true]{background:var(--selected-bg);color:var(--page-fg);border-color:var(--theme-gold)}
html[data-appearance=graphite] .discipline-strip,
html[data-appearance=graphite] .stack-strip{background:var(--panel-alt);color:var(--text-muted);border-color:var(--theme-border)}
html[data-appearance=graphite] .capabilities-section,
html[data-appearance=graphite] .products,
html[data-appearance=graphite] .approach-section{background:var(--surface-bg);color:var(--page-fg)}
html[data-appearance=graphite] .capability-workbench,
html[data-appearance=graphite] .capability-tabs{background:var(--panel-alt);border-color:var(--theme-border)}
html[data-appearance=graphite] .capability-panel{background:radial-gradient(ellipse at 85% 70%,var(--hero-glow),transparent 65%),var(--panel-bg);color:var(--page-fg)}
html[data-appearance=graphite] .capability-tabs>button{color:var(--text-muted)}
html[data-appearance=graphite] .capability-tabs>button:hover,
html[data-appearance=graphite] .capability-tabs>button[aria-pressed=true]{background:var(--selected-bg);color:var(--page-fg);border-color:var(--theme-gold);box-shadow:inset 3px 0 var(--theme-gold)}
html[data-appearance=graphite] .capability-copy>.capability-description,
html[data-appearance=graphite] .capability-skill-list,
html[data-appearance=graphite] .capability-evidence-note,
html[data-appearance=graphite] .capability-tab-index,
html[data-appearance=graphite] .capability-small-note{color:var(--text-muted);border-color:var(--theme-border)}
html[data-appearance=graphite] .capability-tags span{background:var(--panel-alt);color:var(--page-fg);border-color:var(--theme-border)}
html[data-appearance=graphite] .capability-product-link{color:var(--theme-gold);border-color:var(--theme-border)}
html[data-appearance=graphite] .product-category,
html[data-appearance=graphite] .product-description{color:var(--text-muted);opacity:1}
html[data-appearance=graphite] .product-filters button,
html[data-appearance=graphite] .product-count,
html[data-appearance=graphite] .button-outline{color:var(--page-fg);border-color:var(--theme-border)}
html[data-appearance=graphite] .product-filters button[aria-pressed=true],
html[data-appearance=graphite] .button-cream{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-bg)}
html[data-appearance=graphite] .showcase{background:linear-gradient(135deg,var(--page-bg),var(--panel-bg));color:var(--page-fg)}
html[data-appearance=graphite] .showcase-copy>p:not(.eyebrow),
html[data-appearance=graphite] .gallery-caption,
html[data-appearance=graphite] .delivery-number,
html[data-appearance=graphite] .delivery-step p{color:var(--text-muted)}
html[data-appearance=graphite] .delivery-step{border-color:var(--theme-border)}
html[data-appearance=graphite] .delivery-dot{background:var(--surface-bg);border-color:var(--theme-gold)}
html[data-appearance=graphite] .studio-compact{background:var(--panel-alt);color:var(--page-fg);border-color:var(--theme-border)}
html[data-appearance=graphite] .studio-summary,
html[data-appearance=graphite] .studio-signature .location-tag{color:var(--text-muted)}
html[data-appearance=graphite] .contact,
html[data-appearance=graphite] .site-footer{background:var(--theme-deep);color:var(--page-fg);border-color:var(--theme-border)}
html[data-appearance=graphite] .contact-copy>p:not(.eyebrow),
html[data-appearance=graphite] .site-footer>p{color:var(--text-muted)}
html[data-appearance=graphite] .contact input,
html[data-appearance=graphite] .contact textarea{background:var(--panel-bg);color:var(--page-fg);border-color:var(--theme-border)}
html[data-appearance=graphite] .contact :is(input,textarea)::placeholder{color:var(--text-muted);opacity:1}
html[data-appearance=graphite] .hero .text-link,
html[data-appearance=graphite] .contact .checkbox,
html[data-appearance=graphite] .engineering-scene-fallback>p{color:var(--text-muted)}
@media(max-width:440px){.header-actions{gap:10px}}