/* Site-wide theme. Artwork keeps its own palette; UI uses semantic materials.
 * The existing preference/controller and page-transition lifecycles are shared.
 */
html[data-site-theme] body:not(.services-page) .header-theme{grid-column:4}
html[data-site-theme] body:not(.services-page) .topbar-inner{grid-template-columns:auto minmax(0,1fr) auto 48px}
html[data-site-theme] body:not(.services-page) .topbar.is-compact .topbar-inner{grid-template-columns:auto auto auto 48px}
/* A nested backdrop filter cannot sample the page beyond its parent's glass.
   Release that backdrop root while the theme menu is open. */
html[data-site-theme] .topbar-inner:has(.header-theme.is-open){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition-property:width,padding,transform,background-color,box-shadow,color}
html[data-site-theme] .header-theme.is-open .header-theme-options{backdrop-filter:blur(28px) saturate(130%);-webkit-backdrop-filter:blur(28px) saturate(130%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-site-theme="light"] .header-theme-options{background:#f5f5f5}
 html[data-site-theme="dark"] .header-theme-options{background:#24262a}
}
@media(prefers-reduced-transparency:reduce){
 html[data-site-theme] .header-theme.is-open .header-theme-options{backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-site-theme="light"] .header-theme-options{background:#f5f5f5}
 html[data-site-theme="dark"] .header-theme-options{background:#24262a}
}
/* Light page, dark media: retain a readable switch over the hero imagery. */
html[data-site-theme="light"] .topbar:not(.is-light) .header-theme{
 color:#eef0eb;--theme-panel:#202421eb;--theme-line:#ffffff1c;--theme-hover:#ffffff12;--theme-muted:#aeb6ae;
 --theme-control:linear-gradient(135deg,#303338e6,#202226e0);
}
@media(max-width:1366px){
 html[data-site-theme] body:not(.services-page) .topbar.mg-menu-host .topbar-inner{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
 html[data-site-theme] body:not(.services-page) .header-theme{grid-column:2;grid-row:1}
 html[data-site-theme] body:not(.services-page) .mg-burger-anchor{grid-column:3;grid-row:1}
}
html[data-site-theme="dark"]{
 --bg:#101112;--ink:var(--pro-label);--muted:var(--pro-secondary);--line:var(--pro-separator);
 --surface:var(--pro-content);--surface-alt:var(--pro-control);--case-muted:var(--pro-secondary);
 background:var(--bg);color:var(--ink);--page-transition-bg:var(--bg);
}
html[data-site-theme="dark"] body,
html[data-site-theme="dark"] :is(.page,.editorial-main,.site-footer,.work-hero,.work-page .work-hero-sticky,.lab-atmosphere){background:var(--bg);color:var(--ink)}
html[data-site-theme="dark"] .site-footer{--footer-rule:var(--line)}
html[data-site-theme="dark"] .footer-links a{color:var(--ink)}
html[data-site-theme="dark"] .footer-all>span:first-child{background:var(--surface-alt)}
html[data-site-theme="dark"] .footer-dot{background:#e2e6ea}
html[data-site-theme="dark"] :is(.footer-legal,.ed-muted,.ed-breadcrumb,.ed-masthead-copy .ed-mono,.ed-cta p:not(.ed-mono),.work-demo-note){color:var(--muted)}
html[data-site-theme="dark"] :is(.ed-button,.ed-card-button,.ed-skip,.lab-skip,.article-byline-mark){background:var(--surface-alt);color:var(--ink)}
html[data-site-theme="dark"] :is(.ed-button,.ed-card-button):hover{background:#454b52}
html[data-site-theme="dark"] :is(a,button,input,textarea,[tabindex]):focus-visible{outline-color:#c9d9ed}
html[data-site-theme="dark"] ::selection{background:#526980;color:#fff}

/* Portfolio: only surrounding UI changes; brand imagery and logos are intact. */
html[data-site-theme="dark"] .work-page .portfolio-copy{color:var(--ink)}
html[data-site-theme="dark"] .work-page .portfolio::after{background:linear-gradient(to bottom,#101112,transparent 160px,transparent calc(100% - 160px),#101112)}
html[data-site-theme="dark"] :is(.work-detail,.work-overview,.work-counter,.work-view-all,.work-arrow){background:var(--pro-glass-surface);color:var(--ink);backdrop-filter:var(--pro-glass-filter);-webkit-backdrop-filter:var(--pro-glass-filter);box-shadow:var(--pro-glass-shadow)}
html[data-site-theme="dark"] :is(.work-tab:hover,.work-tab[aria-current=true],.work-action:hover,.work-view-all:hover,.work-view-all[aria-expanded=true],.work-arrow:not(:disabled):hover){background:var(--surface-alt);color:var(--ink)}

/* About: the title still transitions with the ocean, including live theme changes. */
.about-motion .about-manifesto{color:color-mix(in srgb,#fff calc((1 - var(--about-text-progress,0))*100%),var(--ink))}
html[data-site-theme="dark"] .about-manifesto-copy,
html[data-site-theme="dark"] .about-page .about-manifesto-copy p{color:var(--ink)}
html[data-site-theme="dark"] :is(.about-body,.about-arrows>span,.about-stage-number,.about-stage p,.about-person-card p,.about-person-copy>p,.about-person-copy dd){color:var(--muted)}
html[data-site-theme="dark"] :is(.about-arrows button,.about-person-card){background:var(--surface);color:var(--ink)}
html[data-site-theme="dark"] .about-arrows button:hover{background:var(--surface-alt)}
html[data-site-theme="dark"] .about-values{background:var(--surface)}

/* Blog and all article routes retain their page-turn animation and cover art. */
html[data-site-theme="dark"] :is(.news-meta>span:not(.news-arrow),.news-article-meta>span,.news-demo,.news-next small,.article-meta,.article-source,.article-share-status,.article-byline small,.article-toc a,.blog-feature-copy p,.blog-demo){color:var(--muted)}
html[data-site-theme="dark"] .article-page .article-copy section>p{color:var(--ink)}
html[data-site-theme="dark"] .article-toc a[aria-current]{color:var(--ink)}
html[data-site-theme="dark"] .article-toc a[aria-current]::before{background:currentColor}
html[data-site-theme="dark"] .blog-filters button{color:var(--ink)}
html[data-site-theme="dark"] .blog-filters button:is(:hover,[aria-pressed=true]){background:var(--surface-alt)}
html[data-site-theme="dark"] .blog-search input{color:var(--ink)}

/* Contacts and inline briefs use the same matte surface as the homepage. */
html[data-site-theme="dark"] :is(.contact-ref-card,.contact-tile){background:var(--surface);color:var(--ink)}
html[data-site-theme="dark"] :is(.contact-page-nav,.contact-tile-note,.contact-test-note,.contact-details dt,.contact-brief-copy>p,.contact-steps li::before,.brief-consent){color:var(--muted)}
html[data-site-theme="dark"] .contact-copy-status{color:var(--muted)!important}
html[data-site-theme="dark"] .contact-page-nav a:is([aria-current],:hover){color:var(--ink)}
html[data-site-theme="dark"] .brief-topics label{background:#25282c;color:var(--ink)}
html[data-site-theme="dark"] :is(.brief-topics input,.brief-consent input){accent-color:#dfe5ec}
html[data-site-theme="dark"] .brief-form :is(legend,.brief-fields label,input,textarea){color:var(--ink)}
html[data-site-theme="dark"] .brief-status{background:#242e2a;color:#d1e5d7}
@media(max-width:767px){
 html[data-site-theme="dark"] .brief-form{background:var(--surface);box-shadow:none}
 html[data-site-theme="dark"] .brief-fields :is(input,textarea){background:#292c30}
 html[data-site-theme="dark"] .contact-steps li::before{background:var(--surface-alt);color:var(--muted)}
}

/* Every case shares these UI surfaces; demo designs inside the case stay original. */
html[data-site-theme="dark"] .case-page{--case-muted:var(--muted)}
html[data-site-theme="dark"] :is(.case-sidebar,.case-result){background:var(--surface);color:var(--ink)}
html[data-site-theme="dark"] :is(.case-mini,.case-result .case-cta){background:var(--surface-alt);color:var(--ink)}
html[data-site-theme="dark"] :is(.case-demo,.case-mini small){color:var(--muted)}
html[data-site-theme="dark"] .case-chapter button[aria-expanded=true],
html[data-site-theme="dark"] .case-chapter button[aria-expanded=true]>span:last-child{color:var(--ink)}
html[data-site-theme="dark"] .case-sidebar{scrollbar-color:var(--pro-control-edge) transparent}
@media(max-width:1023px){
 html[data-site-theme="dark"] .case-crumbs{background:var(--bg)}
 html[data-site-theme="dark"] .case-mobile-toggle{background:var(--pro-glass-surface);color:var(--ink);backdrop-filter:var(--pro-glass-filter);-webkit-backdrop-filter:var(--pro-glass-filter);box-shadow:var(--pro-glass-shadow)}
 html[data-site-theme="dark"] .case-mobile-links a{background:var(--surface);color:var(--ink)}
 html[data-site-theme="dark"] .case-mobile-links a[aria-current]{background:var(--surface-alt)}
 html[data-site-theme="dark"] .case-mobile-links a>span{color:var(--muted)}
}

/* Published contact experiment: preserve tinted categories, darken their material. */
html[data-site-theme="dark"] .lab-card{color:var(--ink);border-color:transparent;--light:68 72 80}
html[data-site-theme="dark"] .lab-card[data-channel=project]{--card-color:#252f24;--light:58 70 50}
html[data-site-theme="dark"] .lab-card[data-channel=partnership]{--card-color:#2f2836;--light:69 57 80}
html[data-site-theme="dark"] .lab-card[data-channel=support]{--card-color:#222e38;--light:50 66 80}
html[data-site-theme="dark"] .lab-card[data-channel=general]{--card-color:#332d26;--light:76 66 54}
html[data-site-theme="dark"] :is(.lab-eyebrow a,.lab-intro-grid>p>span,.lab-card-label,.lab-card-contact button,.lab-copy-status,.lab-footer){color:var(--muted)}
html[data-site-theme="dark"] .lab-footer a{color:var(--ink)}
html[data-site-theme="dark"] :is(.lab-card-arrow,.lab-back){background:var(--surface-alt);color:var(--ink);border-color:transparent}
html[data-site-theme="dark"] .lab-fields :is(input,textarea){background:var(--surface);border-color:transparent;color:var(--ink)}
html[data-site-theme="dark"] .lab-fields :is(input,textarea):focus{background:var(--surface-alt);outline:2px solid #c9d9ed;outline-offset:2px}
html[data-site-theme="dark"] .lab-fields :is(input,textarea)::placeholder{color:var(--muted)}
html[data-site-theme="dark"] .lab-topics span{border-color:transparent}
html[data-site-theme="dark"] .lab-topics input:checked+span{background:var(--ink);color:var(--bg);border-color:transparent}
html[data-site-theme="dark"] .lab-topics input:focus-visible+span{outline-color:#c9d9ed}
html[data-site-theme="dark"] .lab-consent input{accent-color:var(--ink)}
html[data-site-theme="dark"] .lab-submit{background:var(--ink);color:var(--bg)}
@media(prefers-contrast:more){
 html[data-site-theme="dark"]{--ink:#fff;--muted:#e0e4ea;--line:#8b95a0}
}