/**
 * MANOVA — canonical White / Black / Teal design system.
 *
 * This is the final colour authority on every route. Page styles own layout;
 * this layer owns colour, contrast, interactive state and theme adaptation.
 */

:root {
  /* Fixed brand primitives — components never consume these directly. */
  --palette-white: #ffffff;
  --palette-white-soft: #f4f7f6;
  --palette-black: #050808;
  --palette-black-soft: #0a0f0f;
  --palette-black-raised: #101717;
  --palette-teal: #00827e;
  --palette-teal-dark: #006e6c;
  --palette-teal-bright: #35d5c8;

  /* Stable interaction semantics. */
  --accent-teal: var(--palette-teal);
  --accent-hover: var(--palette-teal-dark);
  --accent-on-dark: var(--palette-teal-bright);
  --focus-ring: var(--palette-teal-bright);
  --media-text: var(--palette-white);
  --media-text-secondary: color-mix(in srgb, var(--palette-white) 74%, transparent);
  --media-border: color-mix(in srgb, var(--palette-white) 18%, transparent);
  --transition-theme: 280ms ease;

  /* Compatibility aliases for legacy components. */
  --brand-cyan-300: var(--accent-on-dark);
  --brand-cyan-400: var(--accent-on-dark);
  --brand-cyan-500: var(--accent-teal);
  --brand-cyan-600: var(--accent-hover);
  --brand-cyan-700: var(--accent-hover);
  --color-primary: var(--accent-teal);
  --color-primary-hover: var(--accent-hover);
  --color-secondary: var(--accent-teal);
  --color-accent: var(--accent-on-dark);
  --color-cta: var(--accent-teal);
  --color-cta-hover: var(--accent-hover);
  --color-focus: var(--focus-ring);
  --blue: var(--accent-teal);
  --blue-light: var(--accent-on-dark);
  --blue-bright: var(--accent-on-dark);
  --purple: var(--accent-hover);
  --cyan: var(--accent-on-dark);
  --emerald: var(--accent-teal);
  --rose: var(--accent-teal);
  --blue-glow: color-mix(in srgb, var(--accent-teal) 30%, transparent);
  --blue-dim: color-mix(in srgb, var(--accent-teal) 8%, transparent);
  accent-color: var(--accent-teal);
}

html[data-theme="light"] {
  color-scheme: light;
  --background-primary: var(--palette-white);
  --background-secondary: #f7f9f8;
  --background-inverse: var(--palette-black);
  --surface: var(--palette-white);
  --surface-raised: var(--palette-white-soft);
  --surface-hover: #edf4f2;
  --surface-inverse: var(--palette-black-soft);
  --surface-inverse-raised: var(--palette-black-raised);
  --text-primary: #070b0b;
  --text-secondary: #344443;
  --text-muted: #5b6c6a;
  --text-inverse: var(--palette-white-soft);
  --text-inverse-secondary: #adb9b7;
  --border: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--text-primary) 28%, transparent);
  --border-inverse: color-mix(in srgb, var(--palette-white) 15%, transparent);
  --shadow: color-mix(in srgb, var(--palette-black) 14%, transparent);
  --input-background: var(--palette-white);
  --button-background: var(--palette-black);
  --button-text: var(--palette-white);
  --button-hover-background: var(--accent-teal);
  --button-hover-text: var(--palette-white);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background-primary: var(--palette-black);
  --background-secondary: var(--palette-black-soft);
  --background-inverse: var(--palette-white);
  --surface: var(--palette-black-soft);
  --surface-raised: var(--palette-black-raised);
  --surface-hover: #14201f;
  --surface-inverse: var(--palette-white-soft);
  --surface-inverse-raised: var(--palette-white);
  --text-primary: var(--palette-white-soft);
  --text-secondary: #b4bfbd;
  --text-muted: #879795;
  --text-inverse: #070b0b;
  --text-inverse-secondary: #43514f;
  --border: color-mix(in srgb, var(--palette-white) 13%, transparent);
  --border-strong: color-mix(in srgb, var(--accent-on-dark) 34%, transparent);
  --border-inverse: color-mix(in srgb, var(--palette-black) 16%, transparent);
  --shadow: color-mix(in srgb, var(--palette-black) 52%, transparent);
  --input-background: var(--palette-black-soft);
  --button-background: var(--accent-teal);
  --button-text: var(--palette-white);
  --button-hover-background: var(--accent-on-dark);
  --button-hover-text: var(--palette-black);
}

/* One compatibility bridge for every older page-family namespace. */
html[data-theme] {
  --theme-bg: var(--background-primary);
  --theme-surface: var(--surface);
  --theme-surface-raised: var(--surface-raised);
  --theme-surface-hover: var(--surface-hover);
  --theme-text: var(--text-primary);
  --theme-muted: var(--text-secondary);
  --theme-faint: var(--text-muted);
  --theme-border: var(--border);
  --theme-border-strong: var(--border-strong);
  --theme-shadow: var(--shadow);
  --theme-input: var(--input-background);
  --theme-overlay-text: var(--media-text);
  --color-background: var(--background-primary);
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-border: var(--border);
  --black: var(--background-primary);
  --white: var(--text-primary);
  --gray-50: var(--surface);
  --gray-100: var(--surface-raised);
  --gray-200: var(--surface-hover);
  --gray-300: var(--border-strong);
  --gray-400: var(--text-muted);
  --gray-500: var(--text-secondary);
  --gray-600: var(--text-primary);
}

html[data-theme] body,
html[data-theme] main {
  background: var(--background-primary);
  color: var(--text-primary);
}

/* Semantic section surfaces, assigned by design-system.js. */
html[data-theme] [data-design-surface="primary"] {
  --section-background: var(--background-primary);
  --section-surface: var(--surface);
  --section-surface-raised: var(--surface-raised);
  --section-text: var(--text-primary);
  --section-secondary: var(--text-secondary);
  --section-muted: var(--text-muted);
  --section-border: var(--border);
  --section-border-strong: var(--border-strong);
  --section-accent: var(--accent-teal);
}

html[data-theme="light"] [data-design-surface="contrast"],
html[data-theme] [data-design-surface="media"] {
  --section-background: var(--palette-black);
  --section-surface: var(--palette-black-soft);
  --section-surface-raised: var(--palette-black-raised);
  --section-text: var(--text-inverse, var(--media-text));
  --section-secondary: var(--text-inverse-secondary, var(--media-text-secondary));
  --section-muted: var(--text-inverse-secondary, var(--media-text-secondary));
  --section-border: var(--border-inverse);
  --section-border-strong: color-mix(in srgb, var(--accent-on-dark) 35%, transparent);
  --section-accent: var(--accent-on-dark);
}

html[data-theme="dark"] [data-design-surface="contrast"] {
  --section-background: var(--background-secondary);
  --section-surface: var(--surface-raised);
  --section-surface-raised: var(--surface-hover);
  --section-text: var(--text-primary);
  --section-secondary: var(--text-secondary);
  --section-muted: var(--text-muted);
  --section-border: var(--border);
  --section-border-strong: var(--border-strong);
  --section-accent: var(--accent-on-dark);
}

html[data-theme] [data-design-surface="media"] {
  --section-text: var(--media-text);
  --section-secondary: var(--media-text-secondary);
  --section-muted: var(--media-text-secondary);
  --section-border: var(--media-border);
  --section-border-strong: var(--media-border);
  --section-accent: var(--accent-on-dark);
}

/* Fixed editorial rhythm: theme preference may change surrounding browser/UI
   chrome, but major page sections always alternate true white and true black. */
html[data-theme] [data-design-surface="primary"] {
  --section-background:var(--palette-white);
  --section-surface:var(--palette-white-soft);
  --section-surface-raised:#edf4f2;
  --section-text:#070b0b;
  --section-secondary:#344443;
  --section-muted:#5b6c6a;
  --section-border:rgba(7,11,11,.14);
  --section-border-strong:rgba(7,11,11,.28);
  --section-accent:var(--accent-teal);
  --section-scheme:light;
  --button-background:var(--palette-black);
  --button-text:var(--palette-white);
  --button-hover-background:var(--accent-teal);
  --button-hover-text:var(--palette-white);
  --shadow:rgba(5,8,8,.14);
}
html[data-theme] [data-design-surface="contrast"] {
  --section-background:var(--palette-black);
  --section-surface:var(--palette-black-soft);
  --section-surface-raised:var(--palette-black-raised);
  --section-text:var(--palette-white);
  --section-secondary:#b4bfbd;
  --section-muted:#879795;
  --section-border:rgba(255,255,255,.13);
  --section-border-strong:rgba(53,213,200,.34);
  --section-accent:var(--accent-on-dark);
  --section-scheme:dark;
  --button-background:var(--accent-teal);
  --button-text:var(--palette-white);
  --button-hover-background:var(--accent-on-dark);
  --button-hover-text:var(--palette-black);
  --shadow:rgba(0,0,0,.52);
}

html[data-theme] [data-design-surface]:not([data-design-surface="media"]) {
  /* A shorthand is intentional: it clears legacy gradients and decorative
     colour washes as well as their fallback colour. */
  background: var(--section-background) !important;
  color: var(--section-text) !important;
  border-color: var(--section-border) !important;
  color-scheme:var(--section-scheme);
}

html[data-theme] [data-design-surface="media"] {
  /* Media remains real markup above this solid base; images are never moved,
     replaced, filtered or converted into CSS backgrounds. */
  background: var(--palette-black) !important;
  color: var(--media-text) !important;
  border-color: var(--media-border) !important;
}

html[data-theme] [data-design-surface]:not([data-design-surface="media"]) :where(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--section-text) !important;
}

html[data-theme] [data-design-surface]:not([data-design-surface="media"]) :where(p,li,dd,figcaption,blockquote,label) {
  color: var(--section-secondary) !important;
}

/* Catch legacy one-off text colours. Component roles below deliberately
   refine this base into secondary, muted and accent treatments. */
html[data-theme] [data-design-surface] :where(a,button,summary,span,b,em) {
  color: var(--section-text) !important;
}

/* Heading contrast contract.
   Dark semantic surfaces use one clear white heading hierarchy, including
   nested accent spans/emphasis that older components rendered as teal or
   black gradients. Light primary surfaces keep their authored black + teal
   hierarchy. This changes colour only; no type or layout properties. */
html[data-theme] [data-design-surface="contrast"] :is(h1,h2,h3,h4,h5,h6),
html[data-theme] [data-design-surface="contrast"] :is(h1,h2,h3,h4,h5,h6) :where(span,em,strong,b,i),
html[data-theme] [data-design-surface="media"] :is(h1,h2,h3,h4,h5,h6),
html[data-theme] [data-design-surface="media"] :is(h1,h2,h3,h4,h5,h6) :where(span,em,strong,b,i) {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background-image:none!important;
}

/* Permanent dark/media canvases that are not always represented by a
   top-level <section> and therefore are outside the automatic surface pass. */
html[data-theme] :is(
  .ed-hero,.page-hero,.case-hero,.service-hero,.cap-hero,.faq-hero,.sx-hero,
  .resources-hub-hero,.resource-single-hero,.industry-hero,.industry-index-hero,
  .ed-cta,.process-delivery__card,.sx-cta__panel,.sx-final,.svcx-stories,
  .resource-closing,.contact-cta
) :is(h1,h2,h3,h4,h5,h6),
html[data-theme] :is(
  .ed-hero,.page-hero,.case-hero,.service-hero,.cap-hero,.faq-hero,.sx-hero,
  .resources-hub-hero,.resource-single-hero,.industry-hero,.industry-index-hero,
  .ed-cta,.process-delivery__card,.sx-cta__panel,.sx-final,.svcx-stories,
  .resource-closing,.contact-cta
) :is(h1,h2,h3,h4,h5,h6) :where(span,em,strong,b,i) {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background-image:none!important;
}

/* The shared contact CTA sits inside a true light section. Its legacy title
   gradient and the permanent-media fallback above otherwise leave the
   heading white on white. Keep this one composition on the light-surface
   ink hierarchy while preserving its typography, spacing and decoration. */
html[data-theme] [data-design-surface="primary"] .contact-cta .section-title {
  color:var(--section-text)!important;
  -webkit-text-fill-color:var(--section-text)!important;
  background-image:none!important;
}
html[data-theme] [data-design-surface="primary"] .contact-cta .section-sub {
  color:var(--section-secondary)!important;
}

/* Homepage dark technology showcase and filled About CTA retain their
   component roles instead of inheriting the broad legacy span colour. */
html[data-theme] .tech :is(.section-title) { color:var(--section-text)!important }
html[data-theme] .tech .section-sub { color:var(--section-secondary)!important }
html[data-theme] .tech .tech-node-name { color:#000!important }
html[data-theme] .tech .section-label { color:var(--section-accent)!important }
html[data-theme] .about .btn-fill > span { color:var(--button-text)!important }
html[data-theme] .about .btn-fill:is(:hover,:focus-visible) > span { color:var(--button-hover-text)!important }

html[data-theme] [data-design-surface] :where(.section-label,.eyebrow,[class*="eyebrow"],[class*="kicker"],[class*="label"],dt) {
  color: var(--section-accent) !important;
}

html[data-theme] [data-design-surface] :where(small,time,[class*="meta"],[class*="caption"],[class*="role"]) {
  color: var(--section-muted) !important;
}

html[data-theme] [data-design-surface] :where(
  [class*="description"],[class*="excerpt"],[class*="support"],[class*="subtitle"]
) {
  color: var(--section-secondary) !important;
}

/* Authored surface attributes now resolve through the same semantics. */
html[data-theme] [data-surface] {
  --s-bg: var(--section-background, var(--background-primary));
  --s-fg: var(--section-text, var(--text-primary));
  --s-soft: var(--section-secondary, var(--text-secondary));
  --s-rule: var(--section-border, var(--border));
  --s-seam: var(--section-border, var(--border));
  --s-panel: var(--section-surface, var(--surface));
  --s-panel-2: var(--section-surface-raised, var(--surface-raised));
  --s-panel-3: var(--section-surface-raised, var(--surface-raised));
  --s-panel-brd: var(--section-border, var(--border));
  --s-accent: var(--section-accent, var(--accent-teal));
  --s-ink: var(--section-text, var(--text-primary));
  --s-ink-soft: var(--section-secondary, var(--text-secondary));
}

/* Page-family variables all terminate at the canonical tokens. */
html[data-theme] .editorial-page { --ed-ink:var(--text-primary);--ed-paper:var(--surface);--ed-muted:var(--text-secondary);--ed-rule:var(--border);--ed-accent-ink:var(--accent-teal) }
html[data-theme] :is(.resources-hub,.resource-archive,.resource-single) { --res-paper:var(--surface);--res-ink:var(--text-primary);--res-line:var(--border);--res-muted:var(--text-secondary) }
html[data-theme] .faq-page { --faq-bg:var(--background-primary);--faq-panel:var(--surface);--faq-card:var(--surface-raised);--faq-line:var(--border);--faq-muted:var(--text-secondary) }
html[data-theme] .svc-exp { --sx-line:var(--border);--sx-line-2:var(--border-strong);--sx-panel:var(--surface);--sx-panel-2:var(--surface-raised);--sx-ink:var(--text-primary);--sx-soft:var(--text-secondary);--sx-faint:var(--text-muted) }
html[data-theme] .svcx { --svcx-dark:var(--background-primary);--svcx-dark-2:var(--background-secondary);--svcx-panel:var(--surface-raised);--svcx-light:var(--background-primary);--svcx-light-2:var(--surface);--svcx-ink:var(--text-primary);--svcx-ink-soft:var(--text-secondary);--svcx-mut:var(--text-secondary);--svcx-mut-d:var(--text-muted);--svcx-line:var(--border);--svcx-line-2:var(--border-strong);--svcx-line-ink:var(--border);--related-start:var(--accent-teal);--related-end:var(--accent-on-dark) }
html[data-theme] :is(.service-landing,.svc-exp,.svcx,.service-capability-page) { --svc-accent-start:var(--accent-teal)!important;--svc-accent-end:var(--accent-on-dark)!important;--svcx-a:var(--accent-teal)!important;--svcx-b:var(--accent-on-dark)!important;--svcx-teal:var(--accent-teal)!important;--svcx-teal-2:var(--accent-on-dark)!important;--svcx-teal-ink:var(--accent-hover)!important;--cap-a:var(--accent-teal)!important;--cap-b:var(--accent-on-dark)!important }
html[data-theme] :is(.hs-row,.hs-card,.hs-sheet) { --service-accent:var(--accent-teal)!important }
html[data-theme] :is(.resources-hub,.resource-archive,.resource-single,.case-studies-page) { --res-accent:var(--accent-teal)!important }
html[data-theme] .editorial-page { --ed-accent:var(--accent-teal)!important;--ed-accent-ink:var(--accent-teal)!important }

/*
 * Inline values are allowed to describe geometry, but not to create a second
 * colour system. These aliases deliberately outrank template style attributes
 * and the old per-service/per-industry palettes.
 */
html[data-theme] [style*="--service-accent"] { --service-accent:var(--accent-teal)!important }
html[data-theme] [style*="--service-menu-accent"] { --service-menu-accent:var(--accent-teal)!important }
html[data-theme] [style*="--nav-industry-accent"] { --nav-industry-accent:var(--accent-teal)!important }
html[data-theme] [style*="--industry-accent"] { --industry-accent:var(--accent-teal)!important;--industry-accent-2:var(--accent-hover)!important }
html[data-theme] [style*="--related-start"] { --related-start:var(--accent-teal)!important;--related-end:var(--accent-on-dark)!important }
html[data-theme] [style*="--process-accent"] { --process-accent:var(--section-accent,var(--accent-teal))!important }
html[data-theme] [style*="--av-a"] { --av-a:var(--accent-teal)!important;--av-b:var(--accent-on-dark)!important }
html[data-theme] [style*="--a1"] { --a1:var(--accent-teal)!important;--a2:var(--accent-on-dark)!important }
html[data-theme] [style*="--cap-a"] { --cap-a:var(--accent-teal)!important;--cap-b:var(--accent-on-dark)!important }

/* Image-led sections preserve art direction and always use overlay-safe text. */
html[data-theme] [data-design-surface="media"] :where(h1,h2,h3,h4,h5,h6,strong,a,button) { color:var(--media-text)!important }
html[data-theme] [data-design-surface="media"] :where(p,li,small,time,figcaption,label) { color:var(--media-text-secondary)!important }
html[data-theme] [data-design-surface="media"] :where(.section-label,.eyebrow,[class*="eyebrow"],[class*="kicker"]) { color:var(--accent-on-dark)!important }

/* Text sitting on photography or video remains overlay-safe in every mode. */
html[data-theme] :is(
  .resource-tile--overlay,.case-library-card,.project-card,.project-card--featured,
  .svcx-story,.svcx-ind__card,.nav-about-feature,.resources-mega__photo,
  .ed-media,.case-showcase__media,.service-hero-media
) :where(h1,h2,h3,h4,p,li,span,strong,small,a,button,figcaption) { color:var(--media-text)!important }
html[data-theme] :is(
  .resource-tile--overlay,.case-library-card,.project-card,.project-card--featured,
  .svcx-story,.svcx-ind__card,.nav-about-feature,.resources-mega__photo,
  .ed-media,.case-showcase__media,.service-hero-media
) :where(p,small,figcaption,[class*="meta"]) { color:var(--media-text-secondary)!important }

/* Navigation follows the selected theme, including every mega panel. */
html[data-theme] .nav,
html[data-theme] .nav[data-transparent="1"],
html[data-theme] .nav.scrolled,
html[data-theme] .nav[data-transparent="1"].scrolled {
  background: color-mix(in srgb, var(--background-primary) 94%, transparent) !important;
  border-color: var(--border) !important;
  color: var(--text-primary);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--shadow) 48%, transparent);
}

html[data-theme] .nav :is(.nav-trigger,.nav-trigger-plain,.nav-cta) { color:var(--text-primary)!important }
html[data-theme] .nav :is(.nav-trigger,.nav-trigger-plain):is(:hover,:focus-visible,.is-active) { color:var(--accent-teal)!important }
html[data-theme="dark"] .nav :is(.nav-trigger,.nav-trigger-plain):is(:hover,:focus-visible,.is-active) { color:var(--accent-on-dark)!important }
html[data-theme] .nav-caret { border-color:currentColor!important }
html[data-theme] .hamburger i { background:var(--text-primary)!important }
html[data-theme] .nav-panel,
html[data-theme] .mobile-menu,
html[data-theme] .nav-industries-menu,
html[data-theme] .resources-mega--editorial {
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text-primary)!important;
  box-shadow:0 28px 80px var(--shadow)!important;
}
html[data-theme] .nav-panel :where(h2,h3,h4,strong,b,a,button),
html[data-theme] .mobile-menu :where(a,button,strong) { color:var(--text-primary)!important }
html[data-theme] .nav-panel :where(p,small,.nav-panel-kicker),
html[data-theme] .mobile-menu :where(small) { color:var(--text-muted)!important }
html[data-theme] .nav-panel :where(.nav-panel-kicker,.mega-panel-cta),
html[data-theme] .mobile-industries-all { color:var(--accent-teal)!important }
html[data-theme] .nav-industries-intro { background:var(--surface-raised)!important;border-color:var(--border)!important }
html[data-theme] .nav-industries-grid>a,
html[data-theme] .services-mega-card,
html[data-theme] .nav-about-pill,
html[data-theme] .mobile-accordion-panel>a { border-color:var(--border)!important;background-color:transparent!important;color:var(--text-primary)!important }
html[data-theme] .nav-industries-grid>a:is(:hover,:focus-visible),
html[data-theme] .services-mega-card:is(:hover,:focus-visible),
html[data-theme] .nav-about-pill:is(:hover,:focus-visible),
html[data-theme] .mobile-accordion-panel>a:is(:hover,:focus-visible) { background-color:var(--surface-hover)!important;border-color:var(--accent-teal)!important }
html[data-theme] :is(.nav-industries-grid>a,.services-mega-card,.mobile-service-link) { --nav-industry-accent:var(--accent-teal)!important;--service-menu-accent:var(--accent-teal)!important }
html[data-theme] :is(.services-mega-card-icon,.mobile-service-icon,.nav-industries-grid small,.nav-industries-grid i) { color:var(--accent-teal)!important;background-color:color-mix(in srgb,var(--accent-teal) 12%,transparent)!important }

/* Theme control is a compact black/white switch with a teal active cue. */
html[data-theme] .theme-toggle { background:#050505!important;border-color:transparent!important;box-shadow:none!important }
html[data-theme] .theme-toggle__thumb { background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.22)!important }
html[data-theme] .theme-toggle:hover { background:#050505!important;border-color:transparent!important;box-shadow:none!important }
html[data-theme] .theme-toggle:focus-visible { border-color:transparent!important;box-shadow:none!important }

/* Common cards and interactive panels. */
html[data-theme] main :is(
  .story-card,.case-study-card,.blog-lead-card,.blog-list-card,.faq-item,.faq-card,
  .service-card,.service-related-card-body,.knowledge-item,.popular-questions a,
  .hub-intelligence__grid a,.process-card__surface,.sx-card,.sx-reason,.sx-step,
  .svcx-cap,.svcx-why__item,.process-delivery__card,.industry-card,.industry-solution,
  .ed-pillar,.team-discipline,.proof-card,.resource-tile:not(.resource-tile--overlay),
  .blog-compact-card,.hub-feature__story,.hub-handbooks__stack>a,.resource-index a,
  .ab-standard,.service-related-toggle
) {
  background-color:var(--section-surface,var(--surface))!important;
  border-color:var(--section-border,var(--border))!important;
  color:var(--section-text,var(--text-primary))!important;
  box-shadow:0 18px 50px -38px var(--shadow)!important;
}
html[data-theme] main :is(
  .story-card,.case-study-card,.blog-lead-card,.blog-list-card,.faq-item,.faq-card,
  .service-card,.knowledge-item,.popular-questions a,.hub-intelligence__grid a,
  .process-card__surface,.sx-card,.sx-reason,.sx-step,.svcx-cap,.industry-card,
  .industry-solution,.ed-pillar,.team-discipline,.proof-card,.blog-compact-card,
  .hub-feature__story,.hub-handbooks__stack>a,.resource-index a,.ab-standard
):is(:hover,:focus-within) {
  background-color:var(--section-surface-raised,var(--surface-hover))!important;
  border-color:var(--section-accent,var(--accent-teal))!important;
  box-shadow:0 20px 52px -34px color-mix(in srgb,var(--section-accent,var(--accent-teal)) 45%,transparent)!important;
}

/* Work cards deliberately stay flat and image-led in both colour themes. */
html[data-theme] main .work-grid .case-study-card,
html[data-theme] main .work-grid .case-study-card:is(:hover,:focus-within) {
  background-color:#0a0b0d!important;
  border-color:rgba(255,255,255,.2)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html[data-theme] main .work-grid .case-study-card:is(:hover,:focus-within) {
  border-color:rgba(255,255,255,.5)!important;
}
html[data-theme] main .work-grid :is(.case-study-title,.case-study-cta) {
  color:#fff!important;
}
html[data-theme] main .work-grid :is(.case-study-tag,.case-study-row) {
  color:rgba(255,255,255,.78)!important;
}
html[data-theme] main .case-library-card,
html[data-theme] main .case-library-card:is(:hover,:focus-within) {
  background-color:#0a0b0d!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html[data-theme] main .case-library-card .case-eyebrow,
html[data-theme] main .case-library-card .case-library-card__copy>p {
  color:rgba(255,255,255,.78)!important;
}

/* Inputs and forms share one complete state model. */
html[data-theme] :where(input,textarea,select) {
  background:var(--section-surface,var(--input-background))!important;
  border-color:var(--section-border,var(--border))!important;
  color:var(--section-text,var(--text-primary))!important;
  caret-color:var(--section-accent,var(--accent-teal));
}
html[data-theme] :where(input,textarea,select)::placeholder { color:var(--section-muted,var(--text-muted))!important;opacity:1 }
html[data-theme] :where(input,textarea,select):is(:hover,:focus) { background:var(--section-surface-raised,var(--surface-raised))!important;border-color:var(--section-accent,var(--accent-teal))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--section-accent,var(--accent-teal)) 13%,transparent)!important }
html[data-theme] :where(button,input,textarea,select,summary):disabled,
html[data-theme] [aria-disabled="true"] { color:var(--text-muted)!important;border-color:var(--border)!important;opacity:.65 }
html[data-theme] :where(a,button,input,textarea,select,summary):focus-visible { outline:2px solid var(--focus-ring)!important;outline-offset:3px }

/* CTA hierarchy. */
html[data-theme] :is(.btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,.sx-button--primary) {
  background:var(--button-background)!important;
  border-color:var(--button-background)!important;
  color:var(--button-text)!important;
}
html[data-theme] .nav .nav-cta,
html[data-theme] .nav .nav-cta > :where(span,strong,b) { color:var(--button-text)!important }
html[data-theme] :is(.btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,.sx-button--primary):is(:hover,:focus-visible) {
  background:var(--button-hover-background)!important;
  border-color:var(--button-hover-background)!important;
  color:var(--button-hover-text)!important;
}
html[data-theme] [data-design-surface="contrast"] :is(.btn-fill,.industry-button,button[type="submit"],.sx-button--primary) { --button-background:var(--accent-teal);--button-text:var(--palette-white);--button-hover-background:var(--accent-on-dark);--button-hover-text:var(--palette-white) }
html[data-theme] :is(.btn-outline,.sx-button--ghost,.industry-text-link) { background:transparent!important;border-color:var(--section-border-strong,var(--border-strong))!important;color:var(--section-text,var(--text-primary))!important }
html[data-theme] :is(.btn-outline,.sx-button--ghost,.industry-text-link):is(:hover,:focus-visible) { background:color-mix(in srgb,var(--section-accent,var(--accent-teal)) 10%,transparent)!important;border-color:var(--section-accent,var(--accent-teal))!important;color:var(--section-accent,var(--accent-teal))!important }

/* Tabs, filters, chips and disclosure controls share the selected state. */
html[data-theme] :is(.faq-tab,.work-filter-btn,.resource-filter,.service-filter,.tag-chip,.case-tech-chips li) { background:transparent!important;border-color:var(--section-border,var(--border))!important;color:var(--section-secondary,var(--text-secondary))!important }
html[data-theme] :is(.faq-tab,.work-filter-btn,.resource-filter,.service-filter,.tag-chip):is(:hover,:focus-visible,.is-active,.active,[aria-selected="true"]) { background:color-mix(in srgb,var(--section-accent,var(--accent-teal)) 11%,transparent)!important;border-color:var(--section-accent,var(--accent-teal))!important;color:var(--section-accent,var(--accent-teal))!important }
html[data-theme] :is(.faq-item__chev,.faq-panel__icon,.accordion-icon,[class*="step-number"],[class*="step__number"]) { background:color-mix(in srgb,var(--section-accent,var(--accent-teal)) 10%,transparent)!important;border-color:color-mix(in srgb,var(--section-accent,var(--accent-teal)) 28%,transparent)!important;color:var(--section-accent,var(--accent-teal))!important }

/* Dialogs and detached UI participate in the active theme too. */
html[data-theme] :is(dialog,.case-request-dialog,.modal,.lightbox) { background:var(--surface)!important;border-color:var(--border)!important;color:var(--text-primary)!important;box-shadow:0 30px 100px var(--shadow)!important }
html[data-theme] :is(dialog,.case-request-dialog,.modal,.lightbox) :where(h1,h2,h3,h4,strong,label) { color:var(--text-primary)!important }
html[data-theme] :is(dialog,.case-request-dialog,.modal,.lightbox) :where(p,small) { color:var(--text-secondary)!important }

/* Decorative product diagrams are constrained to monochrome + teal. */
html[data-theme] :is([class*="service-hero--"],.sx-panel,.mega-preview,.process-visual) { --purple:var(--accent-teal)!important;--cyan:var(--accent-on-dark)!important;--emerald:var(--accent-teal)!important;--rose:var(--accent-teal)!important }
html[data-theme] :is(.service-hero-fx__one,.service-hero-fx__two,.service-hero-fx__three) { border-color:color-mix(in srgb,var(--accent-on-dark) 34%,transparent)!important }

/* Important links, numbers, indicators and icons use teal beyond hover. */
html[data-theme] main :where(a:not([class*="button"]):not([class*="card"]):not(.industry-tile)):hover { color:var(--section-accent,var(--accent-teal))!important }
html[data-theme] :where(a,button,summary,[role="button"],input,textarea,select) {
  transition:color 260ms ease,background-color 260ms ease,border-color 260ms ease,box-shadow 260ms ease,transform 260ms ease;
}
html[data-theme] main :where(.accent,[class*="number"],[class*="index"],[class*="count"],[class*="step"]>small,[class*="icon"]):not(.industry-hero__number) { color:var(--section-accent,var(--accent-teal)) }
html[data-theme] :where(.scroll-progress,.industry-progress span) { background:var(--accent-teal)!important }
html[data-theme] :where(.marquee-item .dot) { background:var(--section-accent,var(--accent-teal))!important }
html[data-theme] ::selection { background:var(--accent-teal);color:var(--palette-white) }

/* Final contrast contract: paper sections use black-led typography, dark
   sections use white-led typography, and interactive text resolves to the
   surface-appropriate teal. Component layout and motion remain untouched. */
html[data-theme] [data-design-surface="primary"] :where(h1,h2,h3,h4,h5,h6,strong) {
  color:#000!important;
}
html[data-theme] [data-design-surface="primary"] :where(p,li,dd,figcaption,label) {
  color:#273433!important;
}
html[data-theme] [data-design-surface="primary"] :where(a) {
  color:#000!important;
}
html[data-theme] [data-design-surface="contrast"] :where(h1,h2,h3,h4,h5,h6,strong) {
  color:#fff!important;
}
html[data-theme] [data-design-surface="contrast"] :where(p,li,dd,figcaption,label) {
  color:#b4bfbd!important;
}
html[data-theme] [data-design-surface] :where(a,button,summary,[role="button"]):is(:hover,:focus-visible),
html[data-theme] [data-design-surface] :where(a,button,summary,[role="button"]):is(:hover,:focus-visible) :where(h1,h2,h3,h4,h5,h6,span,strong,b,em,small) {
  color:var(--section-accent,var(--accent-teal))!important;
}
html[data-theme] [data-design-surface] :where(.story-card,.service-card,.case-study-card,.blog-card,.resource-tile):is(:hover,:focus-within) :where(h1,h2,h3,h4,h5,h6,.story-author,[class*="title"],[class*="name"]) {
  color:var(--section-accent,var(--accent-teal))!important;
}

/* Filled controls keep white lettering over teal on hover; this prevents the
   former pure-black hover state without sacrificing button contrast. */
html[data-theme] [data-design-surface] :is(.btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,.sx-button--primary,.sx-button--light,.hs-sheet-cta:not(.hs-sheet-cta--ghost)):is(:hover,:focus-visible),
html[data-theme] [data-design-surface] :is(.btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,.sx-button--primary,.sx-button--light,.hs-sheet-cta:not(.hs-sheet-cta--ghost)):is(:hover,:focus-visible) :where(span,strong,b) {
  color:#fff!important;
}

/* Navigation and footer sit outside main's section wrappers but follow the
   same interaction rule. Dark-theme teal is deliberately brighter. */
html[data-theme] :is(.nav,.mobile-menu,.site-footer) :where(a,button,summary):is(:hover,:focus-visible),
html[data-theme] :is(.nav,.mobile-menu,.site-footer) :where(a,button,summary):is(:hover,:focus-visible) :where(span,strong,b,small) {
  color:var(--accent-teal)!important;
}
html[data-theme="dark"] :is(.nav,.mobile-menu,.site-footer) :where(a,button,summary):is(:hover,:focus-visible),
html[data-theme="dark"] :is(.nav,.mobile-menu,.site-footer) :where(a,button,summary):is(:hover,:focus-visible) :where(span,strong,b,small) {
  color:var(--accent-on-dark)!important;
}
html[data-theme] .site-footer :where(h1,h2,h3,h4,h5,h6,strong,a) { color:#fff!important }
html[data-theme] .site-footer :where(p,li,small) { color:#b4bfbd!important }

/* Filled navbar/footer actions keep legible white text over teal. */
html[data-theme] :is(.nav,.mobile-menu,.site-footer) :is(.nav-cta,button[type="submit"],.footer-newsletter button):is(:hover,:focus-visible),
html[data-theme] :is(.nav,.mobile-menu,.site-footer) :is(.nav-cta,button[type="submit"],.footer-newsletter button):is(:hover,:focus-visible) :where(span,strong,b) {
  color:#fff!important;
}

/* Pseudo-elements are part of the component state, so they consume the same
   semantic accent/border values as the visible element that owns them. */
html[data-theme] :where(
  .section-label,.ed-eyebrow,.ed-kicker,.faq-hero__eyebrow,.faq-eyebrow,
  .sx-eyebrow,.svcx-eyebrow,.service-hero-eyebrow
)::before { background:var(--section-accent,var(--accent-teal))!important;border-color:var(--section-accent,var(--accent-teal))!important }
html[data-theme] :where(
  .nav-links a,.proj-link,.sx-textlink,.service-subnav-list a
)::after { background:var(--section-accent,var(--accent-teal))!important }
html[data-theme] :where(
  .faq-item__chev,.faq-panel__icon,.accordion-icon,.service-faq-icon,
  .svcx-faq__item summary i,.knowledge-item button i,.guide-faq summary i
)::before,
html[data-theme] :where(
  .faq-item__chev,.faq-panel__icon,.accordion-icon,.service-faq-icon,
  .svcx-faq__item summary i,.knowledge-item button i,.guide-faq summary i
)::after { background:var(--section-accent,var(--accent-teal))!important }

/* Remove legacy page-level gradient shorthands from non-media sections. A
   background-color override alone cannot suppress an older background-image. */
html[data-theme] [data-design-surface]:not([data-design-surface="media"]):is(
  .svcx-intro,.svcx-capabilities,.svcx-process,.svcx-stories,.svcx-cta,
  .sx-build,.sx-process,.sx-final,.faq-cta,.resource-closing,
  .resource-newsletter,.industry-challenges,.industry-solutions,.industry-contact
) { background:var(--section-background)!important }

/* Older service-page controls predate the semantic component contract. */
html[data-theme] .svcx .service-subnav,
html[data-theme] .svcx .service-subnav.is-stuck { background:color-mix(in srgb,var(--background-primary) 92%,transparent)!important;border-color:var(--border)!important;box-shadow:0 18px 44px -30px var(--shadow)!important }
html[data-theme] .svcx .service-subnav-inner { background:var(--surface)!important;border-color:var(--border)!important;box-shadow:none!important }
html[data-theme] .svcx .service-subnav-list a { color:var(--text-secondary)!important }
html[data-theme] .svcx .service-subnav-list a:is(:hover,.active,:focus-visible) { color:var(--accent-teal)!important;background:color-mix(in srgb,var(--accent-teal) 10%,transparent)!important }
html[data-theme] :is(.service-related-toggle,.svcx-cap,.svcx-tech__tile,.svcx-faq__item) { background:var(--section-surface,var(--surface))!important;border-color:var(--section-border,var(--border))!important;color:var(--section-text,var(--text-primary))!important }
html[data-theme] :is(.service-related-toggle,.svcx-cap,.svcx-tech__tile,.svcx-faq__item):is(:hover,:focus-visible,:focus-within) { background:var(--section-surface-raised,var(--surface-raised))!important;border-color:var(--section-accent,var(--accent-teal))!important }
html[data-theme] :is(.faq-infobar,.case-request-status,.case-request-dialog__close) { background:var(--section-surface-raised,var(--surface-raised))!important;border-color:var(--section-border,var(--border))!important;color:var(--section-text,var(--text-primary))!important }
html[data-theme] :is(.cap-detail ol,.cap-detail li,.hub-feature__copy dl,.hub-feature__copy dl div) { border-color:var(--section-border,var(--border))!important }

/* Industry pages now participate fully in the global system. */
html[data-theme] .industry-experience { --ix-ink:var(--text-primary);--ix-paper:var(--background-primary);--ix-line:var(--border);--industry-accent:var(--accent-teal)!important;--industry-accent-2:var(--accent-hover)!important;background:var(--background-primary)!important;color:var(--text-primary)!important }
html[data-theme] .industry-experience [style*="--industry-accent"] { --industry-accent:var(--accent-teal)!important;--industry-accent-2:var(--accent-hover)!important }
html[data-theme] .industry-subnav { background:color-mix(in srgb,var(--background-primary) 90%,transparent)!important;border-color:var(--border)!important }
html[data-theme] .industry-subnav a { color:var(--text-secondary)!important }
html[data-theme] .industry-subnav a:is(:hover,:focus-visible) { color:var(--accent-teal)!important;border-color:var(--accent-teal)!important }
html[data-theme] .industry-directory__grid { background:var(--border)!important;border-color:var(--border)!important }
html[data-theme] .industry-solutions { background:var(--background-secondary)!important }
html[data-theme] .industry-contact,
html[data-theme] .industry-index-cta { background:var(--palette-black)!important }

/* Loader is intentionally cinematic and remains brand-consistent. */
html[data-theme] .loader { background-color:var(--palette-black-soft)!important;color:var(--palette-white-soft)!important }
html[data-theme] .loader-bar { background:var(--accent-on-dark)!important }

/* Footer is the deliberate dark anchor; its secondary tones still change. */
html[data-theme] body > footer {
  --footer-background:var(--palette-black);
  --footer-surface:var(--palette-black-soft);
  --footer-text:var(--palette-white-soft);
  --footer-secondary:var(--text-inverse-secondary);
  --footer-border:color-mix(in srgb,var(--palette-white) 13%,transparent);
  background:var(--footer-background)!important;
  color:var(--footer-text)!important;
  border-color:var(--footer-border)!important;
}
html[data-theme="dark"] body > footer { --footer-background:var(--background-secondary);--footer-secondary:var(--text-muted) }
html[data-theme] body > footer :where(h1,h2,h3,h4,strong,a,button) { color:var(--footer-text)!important }
html[data-theme] body > footer :where(p,li,small,label) { color:var(--footer-secondary)!important }
html[data-theme] body > footer a:is(:hover,:focus-visible) { color:var(--accent-on-dark)!important }
html[data-theme] body > footer :where(input,textarea,select) { --section-surface:var(--footer-surface);--section-border:var(--footer-border);--section-text:var(--footer-text);--section-muted:var(--footer-secondary);--section-accent:var(--accent-on-dark) }

/* Contact photography uses tokenized overlay primitives rather than a
   template-owned teal literal. */
html[data-theme] .contact-map-shade { position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--palette-black) 72%,transparent),color-mix(in srgb,var(--accent-teal) 12%,transparent));pointer-events:none }
html[data-theme] .about-image-shade { position:absolute;inset:0;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-teal) 15%,transparent),color-mix(in srgb,var(--accent-hover) 10%,transparent));mix-blend-mode:overlay;pointer-events:none }

/* Preserve the black + teal treatment of the white band below Contact. */
html[data-theme] .footer-marquee[data-design-surface="primary"] .footer-marquee-text {
  color:#0b1112!important;
  -webkit-text-fill-color:#0b1112!important;
}
html[data-theme] .footer-marquee[data-design-surface="primary"] .footer-marquee-text span {
  color:var(--accent-teal)!important;
  -webkit-text-fill-color:var(--accent-teal)!important;
}

/* Article cards: image-only squares at rest, title reveal on interaction.
   Covers the homepage teaser, Blog archive compositions, resource hub article
   tiles, article archives and related-article grids. Non-article resources are
   deliberately excluded by the resource-tile--article class. */
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article) {
  position:relative!important;
  display:block!important;
  aspect-ratio:1/1!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#111!important;
  box-shadow:none!important;
  isolation:isolate;
  text-decoration:none;
  transform:none!important;
}

:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article)::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:rgba(0,0,0,.64);
  opacity:0;
  transition:opacity .48s var(--ease-expo);
}

:is(.blog-card-img,.blog-lead-card__media,.blog-compact-card__media,.resource-tile--article .resource-tile__media) {
  position:absolute!important;
  z-index:1;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}

:is(.blog-card-img-bg,.blog-lead-card__media img,.blog-compact-card__media img,.resource-tile--article .resource-tile__media img) {
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transform:scale(1.001);
  transition:transform .7s var(--ease-expo),filter .48s ease!important;
}
.blog-card-img-bg img { display:block;width:100%;height:100%;object-fit:cover }

.resource-tile--article .resource-tile__link {
  position:relative;
  display:block!important;
  width:100%;
  height:100%;
  color:#fff!important;
}

:is(.blog-card-body,.blog-lead-card__body,.blog-compact-card__body,.resource-tile--article .resource-tile__body) {
  position:absolute!important;
  z-index:3;
  inset:0!important;
  display:flex!important;
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
  height:100%;
  padding:clamp(1.15rem,2.2vw,2rem)!important;
  pointer-events:none;
}

.blog-card-body > :not(.blog-card-title),
.blog-lead-card__body > :not(h3),
.blog-compact-card__body > :not(h3),
.resource-tile--article .resource-tile__body > :not(h3),
.resource-tile--article .resource-tile__arrow {
  display:none!important;
}

:is(
  .blog-card-title,
  .blog-lead-card__body h3,
  .blog-compact-card__body h3,
  .resource-tile--article .resource-tile__body h3
) {
  position:relative;
  z-index:1;
  margin:0!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .42s ease,transform .48s var(--ease-expo),color .2s ease!important;
}

:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)::after {
  opacity:1;
}
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)
  :is(.blog-card-title,.blog-lead-card__body h3,.blog-compact-card__body h3,.resource-tile__body h3) {
  color:#fff!important;
  opacity:1;
  transform:translateY(0);
}
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)
  :is(.blog-card-img-bg,.blog-lead-card__media img,.blog-compact-card__media img,.resource-tile__media img) {
  transform:scale(1.035);
  filter:saturate(.88) contrast(1.04);
}

/* The Blog archive now uses the same equal square card grid as every other
   article collection instead of one lead shape plus stacked list shapes. */
.blog-featured__grid {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start!important;
}
.blog-compact-stack { display:contents!important }

@media(max-width:1000px) {
  .blog-featured__grid { grid-template-columns:repeat(2,minmax(0,1fr))!important }
}
@media(max-width:640px) {
  .blog-featured__grid { grid-template-columns:minmax(0,1fr)!important }
}

/* Touch screens have no persistent hover. Keep the title readable over a
   restrained lower overlay rather than leaving the destination unidentified. */
@media(hover:none), (pointer:coarse) {
  :is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article)::after {
    opacity:.52;
    background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.78));
  }
  :is(
    .blog-card-title,
    .blog-lead-card__body h3,
    .blog-compact-card__body h3,
    .resource-tile--article .resource-tile__body h3
  ) {
    opacity:1;
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  :is(
    .blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article,
    .blog-card-img-bg,.blog-lead-card__media img,.blog-compact-card__media img,
    .resource-tile--article .resource-tile__media img,
    .blog-card-title,.blog-lead-card__body h3,.blog-compact-card__body h3,
    .resource-tile--article .resource-tile__body h3
  ),
  :is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article)::after {
    transition:none!important;
  }
}

/* Smooth but restrained theme transition. */
html.theme-transitioning :where(body,main,section,article,aside,nav,footer,a,button,input,textarea,select,svg,path) {
  transition-property:background-color,border-color,color,fill,stroke,box-shadow;
  transition-duration:var(--transition-theme);
  transition-timing-function:ease;
}

@media (prefers-reduced-motion:reduce) {
  html.theme-transitioning :where(body,main,section,article,aside,nav,footer,a,button,input,textarea,select,svg,path) { transition:none!important }
}

/* Article cards: keep the editorial identity visible at rest, then use the
   complete image surface for supporting copy on hover. The card itself is the
   link, so a second button-shaped action inside the thumbnail is unnecessary. */
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article)::after {
  opacity:.68;
  background:linear-gradient(180deg,rgba(3,10,14,.03) 22%,rgba(3,10,14,.24) 50%,rgba(3,10,14,.94) 100%);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1)!important;
}

:is(.blog-card-body,.blog-lead-card__body,.blog-compact-card__body,.resource-tile--article .resource-tile__body) {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:clamp(.45rem,1vw,.7rem)!important;
}

:is(
  .blog-card-tag,.blog-lead-card__tag,.blog-compact-card__tag,
  .resource-tile--article .resource-kicker
) {
  display:flex!important;
  position:relative;
  z-index:1;
  width:100%;
  margin:0!important;
  color:var(--accent-on-dark)!important;
  opacity:1!important;
  transform:none!important;
  transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1)!important;
}
.resource-tile--article .resource-kicker > span:last-child { display:none!important }

:is(
  .blog-card-title,.blog-lead-card__body h3,.blog-compact-card__body h3,
  .resource-tile--article .resource-tile__body > h3
) {
  display:block!important;
  position:relative;
  z-index:1;
  margin:0!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  transform:none!important;
  transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1)!important;
}

:is(
  .blog-card-excerpt,.blog-lead-card__body > p,.blog-compact-card__body > p,
  .resource-tile--article .resource-tile__body > p
) {
  display:flex!important;
  position:absolute!important;
  z-index:2;
  inset:0!important;
  align-items:center;
  width:100%;
  height:100%;
  margin:0!important;
  padding:clamp(1.35rem,2.6vw,2.35rem)!important;
  overflow:hidden;
  color:#fff!important;
  font-family:var(--font-display);
  font-size:clamp(1rem,1.2vw,1.22rem)!important;
  font-weight:560;
  line-height:1.55!important;
  letter-spacing:-.015em;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .38s ease,transform .45s cubic-bezier(.22,1,.36,1)!important;
}

:is(
  .blog-card-meta,.blog-lead-card__meta,.blog-compact-card__meta,
  .blog-card-read,.blog-lead-card__read,.blog-compact-card__read,
  .resource-tile--article .resource-tile__meta,.resource-tile--article .resource-tile__read
) { display:none!important }

:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)::after {
  opacity:.94;
  background:rgba(3,10,14,.86);
}
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)
  :is(.blog-card-tag,.blog-lead-card__tag,.blog-compact-card__tag,.resource-kicker,
      .blog-card-title,.blog-lead-card__body h3,.blog-compact-card__body h3,.resource-tile__body > h3) {
  opacity:0!important;
  transform:translateY(-8px)!important;
}
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)
  :is(.blog-card-excerpt,.blog-lead-card__body > p,.blog-compact-card__body > p,.resource-tile__body > p) {
  opacity:1;
  transform:none;
}
:is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)
  :is(.blog-card-img-bg,.blog-lead-card__media img,.blog-compact-card__media img,.resource-tile__media img) {
  transform:scale(1.025)!important;
  filter:blur(2px) saturate(.82) brightness(.68)!important;
}

@media(hover:none), (pointer:coarse) {
  :is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article)::after {
    opacity:.72;
    background:linear-gradient(180deg,transparent 30%,rgba(3,10,14,.92));
  }
  :is(.blog-card-excerpt,.blog-lead-card__body > p,.blog-compact-card__body > p,.resource-tile--article .resource-tile__body > p) {
    opacity:0;
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  :is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article)::after,
  :is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article) :is(
    .blog-card-tag,.blog-lead-card__tag,.blog-compact-card__tag,.resource-kicker,
    .blog-card-title,.blog-lead-card__body h3,.blog-compact-card__body h3,.resource-tile__body > h3,
    .blog-card-excerpt,.blog-lead-card__body > p,.blog-compact-card__body > p,.resource-tile__body > p
  ) { transition:none!important }
  :is(.blog-card,.blog-lead-card,.blog-compact-card,.resource-tile--article):is(:hover,:focus-visible,:focus-within)
    :is(.blog-card-img-bg,.blog-lead-card__media img,.blog-compact-card__media img,.resource-tile__media img) {
    transform:none!important;
  }
}

/* Canonical CTA contrast. Primary actions consume one semantic foreground for
   both their label and nested spans, preventing page-level link hover rules
   from recolouring only part of a button. */
html[data-theme] :is(
  .btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,
  .sx-button--primary,.svcx-btn--fill,.service-hero-cta,.service-subnav-cta,
  .hs-sheet-cta:not(.hs-sheet-cta--ghost),.guide-download
) {
  background:var(--button-background)!important;
  border-color:var(--button-background)!important;
  color:var(--button-text)!important;
  -webkit-text-fill-color:var(--button-text)!important;
}
html[data-theme] :is(
  .btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,
  .sx-button--primary,.svcx-btn--fill,.service-hero-cta,.service-subnav-cta,
  .hs-sheet-cta:not(.hs-sheet-cta--ghost),.guide-download
) :where(span,strong,b,em,small,svg) {
  color:var(--button-text)!important;
  -webkit-text-fill-color:var(--button-text)!important;
}
html[data-theme] :is(
  .btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,
  .sx-button--primary,.svcx-btn--fill,.service-hero-cta,.service-subnav-cta,
  .hs-sheet-cta:not(.hs-sheet-cta--ghost),.guide-download
):is(:hover,:focus-visible) {
  background:var(--button-hover-background)!important;
  border-color:var(--button-hover-background)!important;
  color:var(--button-hover-text)!important;
  -webkit-text-fill-color:var(--button-hover-text)!important;
}
html[data-theme] :is(
  .btn-fill,.nav-cta,.industry-button,button[type="submit"],.footer-newsletter button,
  .sx-button--primary,.svcx-btn--fill,.service-hero-cta,.service-subnav-cta,
  .hs-sheet-cta:not(.hs-sheet-cta--ghost),.guide-download
):is(:hover,:focus-visible) :where(span,strong,b,em,small,svg) {
  color:var(--button-hover-text)!important;
  -webkit-text-fill-color:var(--button-hover-text)!important;
}

html[data-theme] [data-design-surface="contrast"] :is(
  .btn-fill,.industry-button,button[type="submit"],.sx-button--primary,.svcx-btn--fill,
  .service-hero-cta,.service-subnav-cta,.hs-sheet-cta:not(.hs-sheet-cta--ghost),.guide-download
) {
  --button-background:var(--accent-on-dark);
  --button-text:var(--palette-black);
  --button-hover-background:var(--palette-white);
  --button-hover-text:var(--palette-black);
}

html[data-theme] :is(.sx-button--light,.sx-big-cta .sx-button) {
  color:var(--palette-black)!important;
  -webkit-text-fill-color:var(--palette-black)!important;
}
html[data-theme] :is(.sx-button--light,.sx-big-cta .sx-button) :where(span,strong,b,em,small,svg) {
  color:var(--palette-black)!important;
  -webkit-text-fill-color:var(--palette-black)!important;
}
html[data-theme] :is(.case-request-trigger,.case-request-trigger span) {
  color:var(--palette-white)!important;
  -webkit-text-fill-color:var(--palette-white)!important;
}
html[data-theme] :is(
  .btn-outline,.sx-button--ghost,.svcx-btn--ghost,.hs-sheet-cta--ghost
) :where(span,strong,b,em,small,svg) {
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-theme] .btn-fill .btn-bg,
html[data-theme] .nav-cta::before {
  background:var(--button-hover-background)!important;
}