/*
 * Global public colour system.
 * Change only --site-bg to update the base background across every public page.
 */
:root {
    --site-bg: #050917;
    --site-bg-soft: color-mix(in srgb, var(--site-bg) 86%, #13234a);
    --site-panel: color-mix(in srgb, var(--site-bg) 72%, #1b2b59);
    --site-panel-raised: color-mix(in srgb, var(--site-bg) 58%, #27386d);
    --site-card: color-mix(in srgb, var(--site-bg) 62%, #24204f);
    --site-text: #f5f7ff;
    --site-muted: #aeb9d1;
    --site-cyan: #19d8ff;
    --site-blue: #5978ff;
    --site-pink: #ff3f9f;
    --site-orchid: #d95cff;
    --site-line: color-mix(in srgb, var(--site-blue) 24%, transparent);
    --site-line-strong: color-mix(in srgb, var(--site-cyan) 38%, transparent);
    --site-section-lights:
        radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--site-cyan) 6%, transparent), transparent 30rem),
        radial-gradient(circle at 90% 78%, color-mix(in srgb, var(--site-pink) 5%, transparent), transparent 32rem);
    --site-section-lights-alt:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--site-blue) 7%, transparent), transparent 28rem),
        radial-gradient(circle at 12% 86%, color-mix(in srgb, var(--site-cyan) 5%, transparent), transparent 26rem);
    --site-category-hero-gradient:
        linear-gradient(90deg, color-mix(in srgb, var(--site-bg) 56%, transparent), color-mix(in srgb, var(--site-bg) 20%, transparent) 48%, color-mix(in srgb, var(--site-bg) 44%, transparent)),
        radial-gradient(circle at 14% 55%, color-mix(in srgb, var(--site-blue) 22%, transparent), transparent 35%),
        radial-gradient(circle at 84% 48%, color-mix(in srgb, var(--site-pink) 18%, transparent), transparent 34%),
        url('/assets/images/generated/menu-submenu-premium-bg-v2.webp') center / cover no-repeat;
    --site-card-gradient:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--site-pink) 10%, transparent), transparent 32%),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--site-cyan) 8%, transparent), transparent 32%),
        linear-gradient(145deg, var(--site-card), var(--site-panel));

    /* Shared aliases used by older component styles. */
    --ink: var(--site-bg);
    --ink-soft: var(--site-bg-soft);
    --ink-raised: var(--site-panel-raised);
    --white: var(--site-text);
    --muted: var(--site-muted);
    --accent: var(--site-cyan);
    --accent-soft: var(--site-blue);
    --line: var(--site-line);
    --cards-background-card: var(--site-card);
}

/* Map each page family back to the single global theme. */
body.home-page {
    --home-bg: var(--site-bg) !important;
    --home-bg-soft: var(--site-bg-soft) !important;
    --home-section-bg: var(--site-bg) !important;
    --home-panel: var(--site-panel) !important;
    --home-panel-raised: var(--site-panel-raised) !important;
    --home-text: var(--site-text) !important;
    --home-muted: var(--site-muted) !important;
    --home-cyan: var(--site-cyan) !important;
    --home-periwinkle: var(--site-blue) !important;
    --home-orchid: var(--site-orchid) !important;
    --home-line: var(--site-line) !important;
    --home-line-strong: var(--site-line-strong) !important;
    --cards-background-card: var(--site-card) !important;
}

body.premium-page {
    --premium-bg: var(--site-bg) !important;
    --premium-bg-deep: var(--site-bg) !important;
    --premium-panel: var(--site-panel) !important;
    --premium-panel-blue: var(--site-panel) !important;
    --premium-panel-teal: var(--site-panel) !important;
    --premium-raised: var(--site-panel-raised) !important;
    --premium-text: var(--site-text) !important;
    --premium-muted: var(--site-muted) !important;
    --premium-cyan: var(--site-cyan) !important;
    --premium-blue: var(--site-blue) !important;
    --premium-orchid: var(--site-orchid) !important;
    --premium-line: var(--site-line) !important;
    --premium-line-strong: var(--site-line-strong) !important;
    --cards-background-card: var(--site-card) !important;
}

body.about-page {
    --about-bg: var(--site-bg) !important;
    --about-bg-soft: var(--site-bg-soft) !important;
    --about-panel: var(--site-panel) !important;
    --about-panel-raised: var(--site-panel-raised) !important;
    --about-text: var(--site-text) !important;
    --about-muted: var(--site-muted) !important;
    --about-cyan: var(--site-cyan) !important;
    --about-periwinkle: var(--site-blue) !important;
    --about-orchid: var(--site-orchid) !important;
    --about-line: var(--site-line) !important;
}

body.editorial-page {
    --editorial-bg: var(--site-bg) !important;
    --editorial-soft: var(--site-bg-soft) !important;
    --editorial-panel: var(--site-panel) !important;
    --editorial-raised: var(--site-panel-raised) !important;
    --editorial-text: var(--site-text) !important;
    --editorial-muted: var(--site-muted) !important;
    --editorial-cyan: var(--site-cyan) !important;
    --editorial-blue: var(--site-blue) !important;
    --editorial-orchid: var(--site-orchid) !important;
    --editorial-line: var(--site-line) !important;
}

/* Every public page and section uses the same base canvas. */
html,
body,
body.home-page,
body.inner-page,
body.premium-page,
body.about-page,
body.editorial-page,
#main-content,
body.home-page main,
body.inner-page main,
body.premium-page main,
body.about-page main,
body.editorial-page main,
.premium-content-stack,
.home-page-wrapper,
.page-wrapper,
.page-content {
    background-color: var(--site-bg) !important;
}

body main > section,
body main > div.tl-accordion-wrapper,
body.home-page main > section,
body.inner-page main > section,
body.premium-page main > section,
body.about-page main > section,
body.editorial-page main > section {
    background-color: var(--site-bg) !important;
}

/* Beat legacy ID-scoped black rules without removing section media layers. */
body.home-page #main-content,
body.inner-page #main-content,
body.home-page #main-content > section[class],
body.home-page #main-content > section[id][class],
body.inner-page #main-content > section[class],
body.inner-page #main-content > section[id][class] {
    background-color: #050917 !important;
}

html body.home-page main#main-content,
html body.inner-page main#main-content {
    background: var(--site-bg) !important;
}

/* Home category presentation inherits the same base and neon accent family. */
body.home-page section#work.category-accordion {
    background-color: var(--site-bg) !important;
}

body.home-page section#work.category-accordion::before {
    background: var(--site-pink) !important;
}

body.home-page section#work.category-accordion::after {
    background: var(--site-cyan) !important;
}

body.home-page :is(
    .service-card,
    .industry-bento-card,
    .industry-card,
    .story-card,
    .home-news-card,
    .editorial-card,
    .voice-card,
    .honest-card,
    .partner-quote,
    .results-card-box
) {
    border-color: var(--site-line) !important;
    background: var(--site-card-gradient) !important;
}

body.home-page #main-content :is(
    .service-card,
    .industry-bento-card,
    .industry-card,
    .story-card,
    .home-news-card,
    .editorial-card,
    .voice-card,
    .honest-card,
    .partner-quote,
    .results-card-box
) {
    border-color: var(--site-line) !important;
    background-color: var(--site-card) !important;
    background-image: var(--site-card-gradient) !important;
}

/* Category and subcategory pages share one gradient language. */
body.premium-page .premium-hero--menu,
body.premium-page .premium-hero--submenu {
    background: var(--site-category-hero-gradient) !important;
    background-color: var(--site-bg) !important;
}

body.premium-page :is(
    .premium-directory,
    .premium-content--submenu-showcase,
    .premium-content--submenu-card,
    .premium-contact-showcase,
    .premium-contact,
    .premium-cta--rubiks
) {
    background-color: var(--site-bg) !important;
    background-image: var(--site-section-lights) !important;
}

body.premium-page .premium-content-stack > section:nth-child(even),
body.editorial-page main > section:nth-child(even),
body.about-page main > section:nth-child(even) {
    background-color: var(--site-bg) !important;
    background-image: var(--site-section-lights-alt) !important;
}

body.inner-page.premium-page #main-content .premium-content-stack > section.premium-content {
    background-color: var(--site-bg) !important;
    background-image: var(--site-section-lights) !important;
}

body.inner-page.premium-page #main-content .premium-content-stack > section.premium-content:nth-child(even) {
    background-image: var(--site-section-lights-alt) !important;
}

body.premium-page :is(
    .premium-directory-card,
    .premium-editorial,
    .premium-content__grid,
    .premium-contact-showcase__grid,
    .premium-contact__form
) {
    border-color: var(--site-line) !important;
    background: var(--site-card-gradient) !important;
}

body.inner-page.premium-page #main-content :is(
    .premium-directory-card,
    .premium-editorial,
    .premium-content__grid,
    .premium-contact-showcase__grid,
    .premium-contact__form
) {
    border-color: var(--site-line) !important;
    background-color: var(--site-card) !important;
    background-image: var(--site-card-gradient) !important;
}

body.premium-page :is(.premium-editorial__content, .premium-content__copy) {
    background-color: transparent !important;
}

/* About, editorial, search and footer surfaces stay within the same palette. */
body.about-page :is(.about-section, .about-leadership),
body.editorial-page :is(.editorial-trusted, .editorial-feature, .editorial-stream, .case-library, .editorial-newsletter, .editorial-case-cta),
body.search-page :is(.search-hero, .search-results-section) {
    background-color: var(--site-bg) !important;
}

body.editorial-page :is(.editorial-feature__grid, .editorial-newsletter__inner, .case-card),
body.search-page .search-result-card {
    border-color: var(--site-line) !important;
    background: var(--site-card-gradient) !important;
}

footer.site-footer-tmx,
.site-footer,
footer#footer.tl-footer,
.tl-footer,
footer.styles-module--footer--e4089 {
    border-color: var(--site-line) !important;
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--site-blue) 7%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--site-bg-soft), var(--site-bg)) !important;
    background-color: var(--site-bg) !important;
}

html body.home-page footer.site-footer-tmx,
html body.inner-page footer.site-footer-tmx,
html body footer#footer.tl-footer,
html body .tl-footer {
    background-color: var(--site-bg) !important;
    background-image:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--site-blue) 7%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--site-bg-soft), var(--site-bg)) !important;
}

/* Trusted marquees fade into the active global background. */
body :is(.trusted, .premium-inner-trusted, .editorial-trusted, .about-trusted) {
    background-color: var(--site-bg) !important;
}

body :is(.trusted, .premium-inner-trusted, .editorial-trusted, .about-trusted) .brand-marquee::before {
    background: linear-gradient(90deg, var(--site-bg), transparent) !important;
}

body :is(.trusted, .premium-inner-trusted, .editorial-trusted, .about-trusted) .brand-marquee::after {
    background: linear-gradient(270deg, var(--site-bg), transparent) !important;
}

/* Keep the existing requested marquee pace. */
body section.tl-brand-v2 .tl-brand-v2__track,
body section#trusted.tl-brand-v2 .tl-brand-v2__track,
body section#premium-trusted.tl-brand-v2 .tl-brand-v2__track,
body .tl-brand-v2 .tl-brand-v2__track {
    animation-duration: 90s !important;
}

/* Final solid-background authority: remove decorative gradients across public pages. */
:root {
    --site-bg: #050917;
    --site-bg-soft: #050917;
    --site-panel: #050917;
    --site-panel-raised: #050917;
    --site-card: #050917;
    --site-section-lights: none;
    --site-section-lights-alt: none;
    --site-category-hero-gradient: #050917;
    --site-card-gradient: #050917;
}

html,
body,
body[class],
main,
#main-content,
body main,
body main > section,
body main > div,
.page-wrapper,
.page-content,
.home-page-wrapper,
.premium-content-stack,
.premium-content-stack > section,
.premium-hero,
.premium-hero--menu,
.premium-hero--submenu,
.premium-directory,
.premium-content,
.premium-contact,
.premium-contact-showcase,
.about-section,
.about-leadership,
.editorial-trusted,
.editorial-feature,
.editorial-stream,
.case-library,
.editorial-newsletter,
.editorial-case-cta,
.search-hero,
.search-results-section,
.site-header .nav-shell,
.site-header .dropdown-panel,
.tl-dropdown,
.dropdown-wide,
.mobile-nav-contact,
footer.site-footer-tmx,
.site-footer,
footer#footer.tl-footer,
.tl-footer,
footer.styles-module--footer--e4089 {
    background: #050917 !important;
    background-color: #050917 !important;
    background-image: none !important;
}

body :is(
    .service-card,
    .industry-bento-card,
    .industry-card,
    .story-card,
    .home-news-card,
    .editorial-card,
    .voice-card,
    .honest-card,
    .partner-quote,
    .results-card-box,
    .premium-directory-card,
    .premium-editorial,
    .premium-content__grid,
    .premium-contact-showcase__grid,
    .premium-contact__form,
    .editorial-feature__grid,
    .editorial-newsletter__inner,
    .case-card,
    .search-result-card,
    .footer-locations-bar
) {
    background: #050917 !important;
    background-color: #050917 !important;
    background-image: none !important;
}

body main > section::before,
body main > section::after,
.premium-hero::before,
.premium-hero::after,
.premium-content::before,
.premium-content::after,
.premium-directory::before,
.premium-directory::after,
.site-footer::before,
.site-footer::after,
footer.site-footer-tmx::before,
footer.site-footer-tmx::after,
footer#footer.tl-footer::before,
footer#footer.tl-footer::after,
.tl-footer::before,
.tl-footer::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .site-header .nav-shell,
html body .site-header.is-scrolled .nav-shell,
html body .site-header .nav-shell .nav-item.has-dropdown > .dropdown-panel,
html body .site-header.is-scrolled .nav-shell .nav-item.has-dropdown > .dropdown-panel,
html body .site-header .nav-item.has-dropdown > .dropdown-panel,
html body .site-header.is-scrolled .nav-item.has-dropdown > .dropdown-panel {
    background: #050917 !important;
    background-color: #050917 !important;
    background-image: none !important;
}

html body footer#footer.tl-footer,
html body .tl-footer {
    background: #050917 !important;
    background-color: #050917 !important;
    background-image: none !important;
}