/*
 * Carbon Nexus brand system
 *
 * Loaded immediately after styles.css on every production page.  Page
 * styles may compose their own surfaces and industry materials, while the
 * shared shell, interaction language and semantic colors stay locked here.
 */

:root {
  /* Brand: graphite + carbon cyan */
  --brand-graphite-950: #0e1014;
  --brand-graphite-900: #171a20;
  --brand-graphite-850: #1e222a;
  --brand-graphite-800: #262b34;
  --brand-graphite-700: #333944;
  --brand-paper: #f2f4f7;
  --brand-paper-muted: #e4e8ee;
  --brand-text-strong: #f2f4f7;
  --brand-text: #c3cad4;
  --brand-text-muted: #a8b0bc;
  --brand-text-subtle: #767f8c;
  --brand-accent-700: #0b7263;
  --brand-accent-600: #14776a;
  --brand-accent-500: #1fa894;
  --brand-accent-400: #34d3c0;
  --brand-accent-300: #5fe3d2;
  --brand-accent-100: #b8f0e7;
  --brand-accent-rgb: 52 211 192;
  --brand-line: rgb(242 244 247 / 0.12);
  --brand-line-accent: rgb(var(--brand-accent-rgb) / 0.22);

  /* Semantic colors are not interchangeable with the brand accent. */
  --semantic-cost: #c9a227;
  --semantic-cost-soft: #e8ce7a;
  --semantic-positive: #14776a;
  --semantic-negative: #b63f32;
  --semantic-warning: #8a6b18;
  --semantic-critical: #b83a2b;
  --semantic-info: #416ea8;

  /* Shared interaction and shell contract. */
  --focus-ring: var(--brand-accent-300);
  --focus-ring-contrast: var(--brand-graphite-950);
  --focus-width: 3px;
  --focus-offset: 3px;
  --shell-height: 76px;
  --shell-background: rgb(14 16 20 / 0.94);
  --shell-background-solid: rgb(14 16 20 / 0.985);
  --shell-border: rgb(242 244 247 / 0.13);
  --footer-background: var(--brand-graphite-950);

  /* Default page composition accent. Industry pages override this explicitly. */
  --page-accent: var(--brand-accent-600);
  --page-accent-strong: var(--brand-accent-700);
  --page-accent-soft: var(--brand-accent-400);
  --page-accent-tint: rgb(var(--brand-accent-rgb) / 0.1);
  --page-focus: var(--brand-accent-300);
  --page-on-accent: #ffffff;

  /* Canonical aliases used by the newer page families. */
  --cn-bg-primary: var(--brand-graphite-950);
  --cn-bg-secondary: var(--brand-graphite-900);
  --cn-bg-elevated: var(--brand-graphite-850);
  --cn-surface-primary: var(--brand-graphite-800);
  --cn-surface-secondary: var(--brand-graphite-700);
  --cn-text-primary: var(--brand-text-strong);
  --cn-text-secondary: var(--brand-text);
  --cn-text-tertiary: var(--brand-text-muted);
  --cn-text-muted: var(--brand-text-subtle);
  --cn-paper: var(--brand-paper);
  --cn-paper-secondary: var(--brand-paper-muted);
  --cn-paper-ink: var(--brand-graphite-900);
  --cn-paper-copy: #4a5058;
  --cn-accent: var(--brand-accent-400);
  --cn-accent-bright: var(--brand-accent-300);
  --cn-accent-deep: var(--brand-accent-700);
  --cn-accent-pale: var(--brand-accent-100);
  --cn-positive: var(--semantic-positive);
  --cn-negative: var(--semantic-negative);
  --cn-warning: var(--semantic-warning);
  --cn-critical: var(--semantic-critical);
  --cn-info: var(--semantic-info);

  /* Temporary compatibility aliases for legacy components. */
  --gold: var(--brand-accent-600);
  --gold-mid: var(--brand-accent-500);
  --gold-lt: var(--brand-accent-400);
  --gold-bright: var(--brand-accent-300);
  --gold-pale: var(--brand-accent-100);
  --gold-glow: rgb(var(--brand-accent-rgb) / 0.07);
  --gold-line: rgb(var(--brand-accent-rgb) / 0.16);
  --ey-gold-signal: var(--brand-accent-400);
  --cyan: var(--brand-accent-400);
  --cyan-dark: var(--brand-accent-700);
  --teal: var(--brand-accent-600);
  --teal-lt: var(--brand-accent-400);
  --teal-pale: var(--brand-accent-100);
  --teal-glow: rgb(var(--brand-accent-rgb) / 0.07);
  --orange: var(--brand-accent-400);
  --amber: var(--brand-accent-300);
  --copper: var(--brand-accent-500);
  --copper-lt: var(--brand-accent-400);
  --copper-pale: var(--brand-accent-100);
  --copper-glow: rgb(var(--brand-accent-rgb) / 0.07);
  --cost: var(--semantic-cost);
  --cost-pale: var(--semantic-cost-soft);
}

html {
  scroll-padding-top: calc(var(--shell-height) + 24px);
}

:where([id]) {
  scroll-margin-top: calc(var(--shell-height) + 24px);
}

/* A two-tone ring remains visible on both light and dark page materials. */
html :where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring) !important;
  outline-offset: var(--focus-offset) !important;
  box-shadow: 0 0 0 2px var(--focus-ring-contrast) !important;
}

@media (forced-colors: active) {
  html :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------------------------------
 * Explicit, approved page-composition palettes
 * These variables are for content structure only; the shared shell below
 * never reads --page-accent.
 * ---------------------------------------------------------------------- */

html body[data-page="steel"],
html body[data-page="aluminium"],
html body[data-page="cement"],
html body[data-page="fertilizer"] {
  --page-accent: #a32020;
  --page-accent-strong: #7f1717;
  --page-accent-soft: #d93954;
  --page-accent-tint: rgb(163 32 32 / 0.1);
  --ci-burgundy: var(--page-accent) !important;
  --ci-burgundy-dark: var(--page-accent-strong) !important;
  --ci-rose: var(--page-accent-soft) !important;
}

html body[data-page="steel"] {
  --steel-page-blue: var(--page-accent-soft) !important;
  --steel-page-blue-dark: var(--page-accent) !important;
  --stgy-burgundy: var(--page-accent) !important;
  --stgy-rose: var(--page-accent-soft) !important;
}

html body[data-page="hydrogen"] {
  --page-accent: #0d777a;
  --page-accent-strong: #0b5e62;
  --page-accent-soft: #7bc5c0;
  --page-accent-tint: rgb(13 119 122 / 0.11);
}

html body[data-page="battery"] {
  --page-accent: #cf6d42;
  --page-accent-strong: #9d472c;
  --page-accent-soft: #f0b094;
  --page-accent-tint: rgb(207 109 66 / 0.11);
}

html body[data-page="auto"] {
  --page-accent: #d94932;
  --page-accent-strong: #b93627;
  --page-accent-soft: #f3a092;
  --page-accent-tint: rgb(217 73 50 / 0.1);
}

html body[data-page="textile"] {
  --page-accent: #9b5b32;
  --page-accent-strong: #764326;
  --page-accent-soft: #d2a07f;
  --page-accent-tint: rgb(155 91 50 / 0.12);
}

html body[data-page="chemical"] {
  --page-accent: #e69a22;
  --page-accent-strong: #8c4b13;
  --page-accent-soft: #f2c66e;
  --page-accent-tint: rgb(230 154 34 / 0.12);
}

html body[data-page="electronics"] {
  --page-accent: #d5b25e;
  --page-accent-strong: #9a7424;
  --page-accent-soft: #ecd798;
  --page-accent-tint: rgb(213 178 94 / 0.12);
}

/* Feed the approved palette into the shared post-hero industry construction. */
html body[data-industry-solution] .is-page {
  --build-accent: var(--page-accent) !important;
  --build-accent-dark: var(--page-accent-strong) !important;
}

/* Existing structural accents now resolve through the explicit page tokens. */
html body[data-page="battery"] .is-stack-layer button :is(span, i) {
  color: var(--page-accent) !important;
}

html body[data-page="auto"] .is-auto-title-card {
  border-top-color: var(--page-accent) !important;
}

html body[data-page="auto"] :is(
  .is-auto-network .is-tablist button[aria-selected="true"],
  .is-auto-focus-copy a
) {
  color: var(--page-accent-strong) !important;
}

html body[data-page="auto"] .is-engagement--auto {
  background: var(--page-accent-strong) !important;
}

html body[data-page="textile"] .is-textile-copy blockquote {
  border-left-color: var(--page-accent) !important;
}

html body[data-page="textile"] .is-textile-chain {
  background: var(--page-accent) !important;
}

html body[data-page="chemical"] :is(
  .is-chemical-branches .is-tablist button[aria-selected="true"],
  .is-chemical-branch-mark span,
  .is-chemical-route-panel strong
) {
  color: var(--page-accent) !important;
}

html body[data-page="chemical"] .is-chemical-branch-mark i,
html body[data-page="chemical"] .is-chemical-branch-mark i::after {
  background: var(--page-accent) !important;
}

html body[data-page="chemical"] .is-engagement--chemical {
  background: var(--page-accent-strong) !important;
}

html body[data-page="electronics"] :is(
  .is-electronics-lattice .is-tablist button[aria-selected="true"],
  .is-lattice-panel a
) {
  color: var(--page-accent) !important;
}

html body[data-page="electronics"] .is-lattice-map b {
  background: var(--page-accent) !important;
}

html body[data-page="electronics"] .is-lattice-map span {
  border-color: color-mix(in srgb, var(--page-accent) 55%, transparent) !important;
}

/* -------------------------------------------------------------------------
 * Shared brand shell: one visual and interaction contract on every page.
 * Page files load later, therefore the locked shell declarations are scoped
 * and important by design.
 * ---------------------------------------------------------------------- */

html body[data-page] .site-header {
  height: var(--shell-height) !important;
  color: var(--brand-text-strong) !important;
  background: var(--shell-background) !important;
  border-bottom: 1px solid var(--shell-border) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

html body[data-page] .nav-shell {
  height: var(--shell-height) !important;
  padding-inline: clamp(24px, 4.6vw, 72px) !important;
}

html body[data-page] .brand {
  color: var(--brand-text-strong) !important;
}

html body[data-page] .brand strong {
  color: var(--brand-text-strong) !important;
  font-family: var(--font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
}

html body[data-page] .main-nav {
  gap: clamp(18px, 2.3vw, 34px) !important;
  font-family: var(--font-label) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

html body[data-page] .main-nav > a,
html body[data-page] .nav-group > .nav-trigger {
  padding: 9px 0 !important;
  color: var(--brand-text-muted) !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  font: inherit !important;
}

html body[data-page] .main-nav > a:hover,
html body[data-page] .main-nav > a.active,
html body[data-page] .nav-group:hover > .nav-trigger,
html body[data-page] .nav-group:focus-within > .nav-trigger,
html body[data-page] .nav-group.active > .nav-trigger {
  color: var(--brand-text-strong) !important;
  border-bottom-color: var(--brand-accent-400) !important;
}

html body[data-industry] {
  --industry-nav-ink: var(--brand-text-strong) !important;
  --industry-nav-muted: var(--brand-text-muted) !important;
  --industry-nav-line: var(--shell-border) !important;
  --industry-nav-green: var(--brand-accent-400) !important;
  --industry-nav-green-dark: var(--brand-accent-600) !important;
  --industry-nav-green-soft: rgb(var(--brand-accent-rgb) / 0.1) !important;
}

html body[data-page] .nav-cta {
  min-height: 38px !important;
  padding: 0 18px !important;
  color: var(--brand-accent-300) !important;
  background: transparent !important;
  border: 1px solid rgb(var(--brand-accent-rgb) / 0.48) !important;
  border-radius: 0 !important;
  font-family: var(--font-label) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

html body[data-page] .nav-cta:hover,
html body[data-page] .nav-cta:focus-visible {
  color: var(--brand-graphite-950) !important;
  background: var(--brand-accent-300) !important;
  border-color: var(--brand-accent-300) !important;
}

html body[data-page] .nav-menu {
  color: var(--brand-text) !important;
  background: var(--shell-background-solid) !important;
  border-color: var(--brand-line-accent) !important;
}

html body[data-page] .nav-menu a,
html body[data-page] .nav-menu a span:last-child {
  color: var(--brand-text) !important;
}

html body[data-page] .nav-menu a span:first-child {
  color: var(--brand-accent-400) !important;
}

html body[data-page] .nav-menu a small {
  color: var(--brand-text-subtle) !important;
}

html body[data-page] .nav-menu a:hover,
html body[data-page] .nav-menu a:focus-visible {
  color: var(--brand-text-strong) !important;
  background: rgb(var(--brand-accent-rgb) / 0.08) !important;
}

html body[data-page] .lang-toggle {
  color: var(--brand-text-muted) !important;
  background: rgb(242 244 247 / 0.04) !important;
  border-color: rgb(242 244 247 / 0.22) !important;
  opacity: 1 !important;
  transform: none !important;
}

html body[data-page] .lang-btn {
  color: var(--brand-text-muted) !important;
}

html body[data-page] .lang-btn:hover {
  color: var(--brand-text-strong) !important;
}

html body[data-page] .lang-btn.active {
  color: var(--brand-graphite-950) !important;
  background: var(--brand-text-strong) !important;
}

html body[data-page] .lang-divider {
  color: rgb(242 244 247 / 0.28) !important;
}

html body[data-page] .menu-button {
  color: var(--brand-text-strong) !important;
  background: transparent !important;
  border-color: rgb(242 244 247 / 0.28) !important;
  border-radius: 999px !important;
}

html body[data-page] .site-footer {
  color: var(--brand-text) !important;
  background-color: var(--footer-background) !important;
  border-top-color: var(--brand-line) !important;
}

html body[data-page] .site-footer .footer-grid h4 {
  color: var(--brand-text-strong) !important;
}

html body[data-page] .site-footer .footer-grid :is(a, span) {
  color: var(--brand-text-muted) !important;
}

html body[data-page] .site-footer .footer-grid a:hover,
html body[data-page] .site-footer .footer-grid a:focus-visible {
  color: var(--brand-accent-300) !important;
}

html body[data-page] .site-footer .footer-bottom {
  color: var(--brand-text-subtle) !important;
  border-top-color: var(--brand-line) !important;
}

/* Shared accessible helper: several page families previously defined their
 * own version, leaving product and homepage live regions visibly unstyled. */
html body[data-page] .visually-hidden,
html body[data-page] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Client experience and rules practice share one editorial field, while their
 * meaning remains visibly separate. The mark wall is intentionally transparent:
 * no white cards, glow or outbound-link treatment competes with the brands. */
html body[data-page="home"] .trust-marks {
  padding: clamp(72px, 8vw, 116px) 0;
  color: var(--brand-text-strong);
  background: var(--brand-graphite-900);
  border-block: 1px solid var(--brand-line);
}

html body[data-page="home"] .trust-mark-group + .trust-mark-group {
  margin-top: clamp(58px, 7vw, 86px);
  padding-top: clamp(52px, 6vw, 74px);
  border-top: 1px solid var(--brand-line);
}

html body[data-page="home"] .trust-mark-kicker {
  margin: 0 0 14px;
  color: var(--brand-accent-400);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
}

html body[data-page="home"] .trust-mark-group > h2 {
  max-width: 18ch;
  margin: 0 0 18px;
  color: var(--brand-text-strong);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 400;
  line-height: 1.08;
}

html body[data-page="home"] .rules-mark-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--brand-line);
}

html body[data-page="home"] .rules-mark {
  min-height: 138px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  color: var(--brand-text-strong);
  background: transparent;
}

html body[data-page="home"] .rules-mark + .rules-mark {
  border-left: 1px solid var(--brand-line);
}

html body[data-page="home"] .rules-mark-symbol {
  min-height: 72px;
  display: grid;
  place-items: center;
}

html body[data-page="home"] .rules-mark-symbol img {
  width: 84px;
  height: 68px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transform: none;
}

html body[data-page="home"] [data-rule-mark="eu-market"] .rules-mark-symbol img {
  width: 92px;
  height: 58px;
}

html body[data-page="home"] [data-rule-mark="iso-standards"] .rules-mark-symbol img {
  width: 76px;
  height: 76px;
}

html body[data-page="home"] .rules-mark-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

html body[data-page="home"] .rules-mark-label {
  font-family: var(--font-label);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

html body[data-page="home"] .rules-mark small {
  color: var(--brand-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

html body[data-page="home"] .rules-mark-intro,
html body[data-page="home"] .rules-disclaimer {
  max-width: 78ch;
  color: var(--brand-text-muted);
  line-height: 1.65;
}

html body[data-page="home"] .rules-mark-intro {
  margin: 0 0 28px;
  color: var(--brand-text);
  font-size: 15px;
}

html body[data-page="home"] .rules-disclaimer {
  margin: 18px 0 0;
  color: var(--brand-text-muted);
  font-size: 12px;
}

html body[data-page="home"] .client-marquee-toolbar {
  min-height: 30px;
  margin: -16px 0 10px;
  display: flex;
  justify-content: flex-end;
}

html body[data-page="home"] .client-marquee-toggle {
  min-height: 30px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-text-muted);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  cursor: pointer;
}

html body[data-page="home"] .client-marquee-toggle:hover,
html body[data-page="home"] .client-marquee-toggle[aria-pressed="true"] {
  color: var(--brand-text-strong);
  border-color: rgb(var(--brand-accent-rgb) / 0.52);
}

html body[data-page="home"] .client-marquee-toggle:focus-visible {
  outline: 2px solid var(--page-focus);
  outline-offset: 3px;
}

html body[data-page="home"] .client-marquee-toggle-icon {
  width: 11px;
  display: inline-grid;
  place-items: center;
  color: var(--brand-accent-400);
  font-size: 10px;
}

html body[data-page="home"] .client-logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: #11151a;
  background: rgb(243 245 246 / 0.84);
  border-block: 1px solid rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(0.92);
  backdrop-filter: blur(10px) saturate(0.92);
}

html body[data-page="home"] .client-logo-marquee::before,
html body[data-page="home"] .client-logo-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
}

html body[data-page="home"] .client-logo-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgb(243 245 246 / 0.96) 10%, rgb(243 245 246 / 0));
}

html body[data-page="home"] .client-logo-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgb(243 245 246 / 0.96) 10%, rgb(243 245 246 / 0));
}

html body[data-page="home"] .client-logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

html body[data-page="home"] .client-logo-set {
  display: flex;
  flex: 0 0 auto;
}

html body[data-page="home"] .client-logo {
  width: clamp(168px, 15vw, 210px);
  min-height: 108px;
  padding: 13px 22px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

html body[data-page="home"] .client-logo img {
  width: min(116px, 76%);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transform: none;
}

html body[data-page="home"] .client-logo-marquee.is-static {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

html body[data-page="home"] .client-logo-marquee.is-static::-webkit-scrollbar {
  display: none;
}

html body[data-page="home"] .client-logo-marquee.is-static::before,
html body[data-page="home"] .client-logo-marquee.is-static::after,
html body[data-page="home"] .client-logo-marquee.is-static .client-logo-set-clone {
  display: none;
}

html body[data-page="home"] .client-logo-marquee.is-static .client-logo-track {
  width: max-content;
  transform: none !important;
  will-change: auto;
}

html body[data-page="home"] .client-logo-marquee.is-static .client-logo-set:first-child {
  display: flex;
}

html body[data-page="home"] .client-marks-intro {
  max-width: 72ch;
  margin: 0 0 30px;
  color: var(--brand-text);
  font-size: 15px;
  line-height: 1.7;
}

html body[data-page="home"] .client-marks-disclaimer {
  max-width: 82ch;
  margin: 18px 0 0;
  color: var(--brand-text-muted);
  font-size: 12px;
  line-height: 1.65;
}

/* About keeps its integrated closing composition, but uses the same brand. */
html body[data-page="about"] .cn-about-page .cn-about-cta {
  background:
    radial-gradient(circle at 11% 105%, rgb(var(--brand-accent-rgb) / 0.2), transparent 28%),
    var(--brand-graphite-950) !important;
}

html body[data-page="about"] .cn-about-page .cn-about-cta::before {
  background: rgb(var(--brand-accent-rgb) / 0.09) !important;
}

html body[data-page="about"] .cn-about-page .cn-about-cta-footer {
  border-top-color: var(--brand-line) !important;
}

html body[data-page="about"] .cn-about-page .cn-about-cta-footer nav a:hover {
  color: var(--brand-accent-300) !important;
}

/* Shared primary action language; industry colors remain structural only. */
html body[data-page] :is(
  .is-button,
  .ci-button,
  .cost-profit-button--solid,
  .trade-clone-button--solid,
  .wp-button--primary,
  .platform-os-button:not(.ghost),
  .cn-about-cta-button
) {
  color: #ffffff !important;
  background: var(--brand-accent-600) !important;
  border-color: var(--brand-accent-600) !important;
}

html body[data-page] :is(
  .is-button,
  .ci-button,
  .cost-profit-button--solid,
  .trade-clone-button--solid,
  .wp-button--primary,
  .platform-os-button:not(.ghost),
  .cn-about-cta-button
):hover {
  color: var(--brand-graphite-950) !important;
  background: var(--brand-accent-300) !important;
  border-color: var(--brand-accent-300) !important;
}

html body[data-page="steel"] .replica-outline-cta {
  color: var(--brand-accent-300) !important;
  background: transparent !important;
  border-color: var(--brand-accent-300) !important;
}

html body[data-page="steel"] .replica-outline-cta:hover {
  color: var(--brand-graphite-950) !important;
  background: var(--brand-accent-300) !important;
}

/* Home chrome previously bypassed the theme with literal gold values. */
html body[data-page="home"] .apex-slide-cta {
  color: var(--brand-accent-100) !important;
  border-bottom-color: rgb(var(--brand-accent-rgb) / 0.52) !important;
}

/* Keep the primary message available at first paint. The legacy hero waited
 * up to 700 ms before revealing its heading, which left mobile captures (and
 * slower devices) showing a photograph with no proposition. Slide changes
 * retain a short fade through the parent slide transition. */
html body[data-page="home"] .apex-slide.is-active :is(
  .apex-slide-eyebrow,
  .apex-slide-h1,
  .apex-slide-sub,
  .apex-slide-cta
) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body[data-page="home"] .apex-slide-meta {
  border-top-color: rgb(var(--brand-accent-rgb) / 0.18) !important;
}

html body[data-page="home"] .apex-counter-current,
html body[data-page="home"] :is(
  .home-insights-eyebrow,
  .home-cap-strip-eyebrow,
  .role-kicker,
  .case-kicker,
  .service-path-kicker,
  .subscribe-kicker
) {
  color: rgb(var(--brand-accent-rgb) / 0.78) !important;
}

html body[data-page="home"] .home-capabilities-strip {
  border-top-color: rgb(var(--brand-accent-rgb) / 0.22) !important;
}

html body[data-page="home"] .home-cap-strip-grid {
  border-top-color: rgb(var(--brand-accent-rgb) / 0.84) !important;
}

/* Trade consumes the old aliases, but the mapping is explicit at route scope. */
html body[data-page="trade"] {
  --gold: var(--brand-accent-600) !important;
  --gold-mid: var(--brand-accent-500) !important;
  --gold-lt: var(--brand-accent-400) !important;
  --gold-bright: var(--brand-accent-300) !important;
  --gold-pale: var(--brand-accent-100) !important;
  --gold-glow: rgb(var(--brand-accent-rgb) / 0.07) !important;
  --gold-line: rgb(var(--brand-accent-rgb) / 0.16) !important;
  --amber: var(--brand-accent-300) !important;
}

/* Platform: remove decorative legacy gold while retaining semantic data hues. */
html body[data-page="platform"] .platform-product-icon {
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.08) 34%),
    radial-gradient(circle at 80% 82%, rgb(var(--brand-accent-rgb) / 0.28), transparent 34%),
    linear-gradient(135deg, #1d2638, #35425f 52%, #1a2131) !important;
}

html body[data-page="platform"] :is(
  .status-dot,
  .network-node-head i,
  .command-core-top span i,
  .platform-cta-command em::before,
  .platform-capability-node i
) {
  background: var(--brand-accent-400) !important;
  box-shadow: 0 0 14px rgb(var(--brand-accent-rgb) / 0.56) !important;
}

html body[data-page="platform"] .vault-seal span {
  background: radial-gradient(circle, var(--brand-accent-400) 0 36%, transparent 38%) !important;
}

html body[data-page="platform"] :is(
  .platform-module-card .module-mini-agent strong::before,
  .platform-module-card .module-mini-agent span::before,
  .platform-module-card .module-mini-agent em::before,
  .network-node-screen > em,
  .command-status-table em
) {
  color: var(--brand-accent-300) !important;
}

/* A cost-specific visualization keeps gold as an explicit semantic color. */
html body[data-page="platform"] .platform-module-card .module-mini-cost .cost-orbit {
  background: conic-gradient(
    from 20deg,
    var(--semantic-cost) 0 68%,
    rgb(255 255 255 / 0.11) 69% 100%
  ) !important;
}

@media (max-width: 1080px) {
  :root {
    --shell-height: 72px;
  }

  html body[data-page] .main-nav.open {
    top: var(--shell-height) !important;
    color: var(--brand-text) !important;
    background: var(--shell-background-solid) !important;
    border-top-color: var(--shell-border) !important;
    border-bottom-color: var(--shell-border) !important;
  }

  html body[data-page] .main-nav.open > a,
  html body[data-page] .main-nav.open .nav-trigger {
    width: 100% !important;
    color: var(--brand-text) !important;
    border-bottom-color: var(--brand-line) !important;
  }

  html body[data-page] .main-nav.open .nav-menu {
    color: var(--brand-text) !important;
    background: var(--shell-background-solid) !important;
  }

  html body[data-page] .nav-cta {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body[data-page] .nav-shell {
    width: 100% !important;
    padding-inline: 20px !important;
  }

  /* Fixes Platform's previous light-on-light mobile header override. */
  html body[data-page="platform"] .site-header {
    color: var(--brand-text-strong) !important;
    background: var(--shell-background) !important;
  }

  /* The former dark-to-grey hero placed dark copy across the dark half of the
   * gradient. A controlled light surface keeps the live-product proposition
   * and supporting copy above AA contrast at every mobile scroll position. */
  html body[data-page="platform"] .platform-os-hero {
    background:
      radial-gradient(circle at 20% 4%, rgb(var(--brand-accent-rgb) / 0.12), transparent 22rem),
      radial-gradient(circle at 82% 12%, rgb(65 110 168 / 0.10), transparent 24rem),
      linear-gradient(180deg, #dfe6ed 0%, #edf1f5 58%, #f7f8f8 100%) !important;
  }

  html body[data-page="home"] .rules-mark-rail {
    grid-template-columns: 1fr;
  }

  html body[data-page="home"] .rules-mark {
    min-height: 104px;
    padding: 16px 18px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 18px;
  }

  html body[data-page="home"] .rules-mark + .rules-mark {
    border-top: 1px solid var(--brand-line);
    border-left: 0;
  }

  html body[data-page="home"] .rules-mark-symbol {
    min-height: 58px;
  }

  html body[data-page="home"] [data-rule-mark="eu-market"] .rules-mark-symbol img {
    width: 74px;
    height: 48px;
  }

  html body[data-page="home"] [data-rule-mark="iso-standards"] .rules-mark-symbol img {
    width: 58px;
    height: 58px;
  }

  html body[data-page="home"] .client-marquee-toolbar {
    margin-top: -12px;
  }

  html body[data-page="home"] .client-logo-marquee::before,
  html body[data-page="home"] .client-logo-marquee::after {
    width: 22px;
  }

  html body[data-page="home"] .client-logo {
    width: 156px;
    min-height: 94px;
    padding: 10px 18px;
  }

  html body[data-page="home"] .client-logo img {
    width: min(98px, 74%);
  }

}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="home"] :is(.client-marquee-toggle, .client-logo, .client-logo img) {
    transition: none !important;
  }

  html body[data-page="home"] .client-marquee-toggle {
    display: none;
  }
}