/* ═══════════════════════════════════════════════════════════════════════════
   SENZING NEW THEME — SALIENT / WPBAKERY ADAPTATION LAYER
   new-theme.css  |  v2.0  |  May 2026

   Load order: senzing-tokens.css → senzing-global.css → main.css → this file

   Purpose: Bridges the Obsidian & Ember design system to Salient's specific
   HTML structure. Does NOT redefine tokens — uses only var() references from
   senzing-tokens.css. All colours and spacing come from there.

   Dark / light rule (apply without exception):
     Navigation              → always dark (Obsidian)
     Page hero / banner      → always dark (Obsidian & Ember)
     Page body content       → light (white / warm off-white)
     Closing CTA band        → always dark (.closing-row WPBakery class)
     Footer                  → always dark

   WPBakery row helper classes (add via "Extra class" in row settings):
     dark-row     → var(--obsidian) background, light text
     deep-row     → var(--deep) background, light text
     closing-row  → var(--deep) background, closing CTA styling
     light-section → forces light-card variants of senzing-global components
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. GLOBAL FONT ──────────────────────────────────────────────────────── */
/* Set the brand font as the body baseline via inheritance — no !important.
   This lets Salient's own CSS still control its components (nectar-post-grid,
   nectar-icon-list, etc.) with whatever Google Font is configured in Salient
   Theme Options → Typography. Only WPBakery elements that receive inline
   style="font-family:..." overrides from the editor need a targeted !important
   to bring them back to the brand font. */
body {
  font-family: var(--font-sans);
}

/* WPBakery text block — keep body copy on the brand sans (Helvetica Neue),
   overriding WPBakery's inline font-family from the editor font picker. */
.wpb_text_column {
  font-family: var(--font-sans) !important;
}

/* ── 1a. HEADING FONT — Roboto brand headings ─────────────────────────────────
   All headlines/titles use Roboto, at brand weights: H1 700, H2/H3 (and H4–H6)
   500. The family is forced (!important) to beat both --font-sans inheritance
   and WPBakery's inline font-family. Weights are forced so WPBakery Custom
   Heading modules (which carry an inline font-weight, often 800) normalise to
   the brand weight. Font-SIZE is never touched here — only family + weight.
   .vc_custom_heading is the class WPBakery puts on the heading tag itself, so
   tag-qualified selectors (h2.vc_custom_heading) outrank its inline style. */
h1, h2, h3, h4, h5, h6,
.vc_custom_heading {
  font-family: var(--font-heading) !important;
}
h1, h1.vc_custom_heading { font-weight: 700 !important; }
h2, h3, h4, h5, h6,
h2.vc_custom_heading, h3.vc_custom_heading,
h4.vc_custom_heading, h5.vc_custom_heading, h6.vc_custom_heading {
  font-weight: 500 !important;
}

/* Salient "Split Line Heading" — restore the custom font size.
   This element sets the chosen size (e.g. 55px) as an inline font-size on the
   .nectar-split-heading WRAPPER and expects the inner <h3>/<span> to INHERIT it.
   But Salient's base h3 typography puts an explicit font-size on every h3, which
   overrides that inheritance — so split headings collapse to the small base h3
   size (~23px). Force the inner h3/span to inherit the wrapper's size + leading
   again. Scoped to split headings only, so no other heading is affected. */
.nectar-split-heading h3,
.nectar-split-heading h3 span,
.nectar-split-heading .heading-line h3,
.nectar-split-heading .heading-line span {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* ── 1b. TEXT COLORS ─────────────────────────────────────────────────────── */
/* Heading and body text colours are intentionally NOT set here.
   Salient's parent theme + editor inline styles govern all colours.
   The ONLY colour logic we add is the orange gradient on <strong> (section 7). */

/* -webkit-text-fill-color fix for inline-coloured heading spans.
   When a heading has -webkit-text-fill-color set (e.g. by Salient JS or a
   parent rule), child <span style="color:#f43014"> can't override it with
   `color` alone. Setting currentColor syncs -webkit-text-fill-color to each
   span's own colour property so WPBakery colour spans render correctly. */
.vc_row h1 span[style*="color"],
.vc_row h2 span[style*="color"],
.vc_row h3 span[style*="color"],
.vc_row h4 span[style*="color"],
.vc_row h5 span[style*="color"],
.vc_row h6 span[style*="color"] {
  -webkit-text-fill-color: currentColor !important;
}


/* ── 2. BODY — LIGHT DEFAULT ─────────────────────────────────────────────── */
/* senzing-global.css sets body { background: var(--obsidian); color: var(--text) }
   for its standalone prototype. For WordPress, default body to light so that
   editorial page content (WPBakery rows without explicit dark class) looks correct.
   Dark sections handle their own backgrounds and text colours independently.      */
body {
  background: var(--light-bg);
  color: var(--light-text);
  overflow-x: hidden;
}

#ajax-content-wrap,
.container-wrap {
  background: transparent;
}

/* ── 2b. HOMEPAGE ────────────────────────────────────────────────────────── */
/* Architecture: homepage now uses the same light-default behaviour as inner
   pages. The body background is the same warm off-white (section 2 base rule).
   Dark sections are marked explicitly with dark-row / deep-row / closing-row
   class names in WPBakery "Extra Class Name" — those classes carry their own
   background-color and white heading rules (see sections 1b and 7).

   This means:
   • Editor-set title colours are always respected (no !important blanket override).
   • Headings default to dark charcoal on all rows without an explicit dark class.
   • Any row that should be visually dark needs dark-row or deep-row class added.

   Salient wrapper divs are kept transparent so row-level backgrounds show. */
body.home #ajax-content-wrap,
body.home .container-wrap,
body.home .ocm-effect-wrap,
body.home #wrapper-inner,
body.home #content,
body.home #inner-content,
body.home #main-content,
body.home #content-area,
body.home .page-template-default #content-area,
body.home .nectar-page-transform {
  background: transparent !important;
  background-color: transparent !important;
}




/* ── 3. OLD THEME VARIABLE REMAPPING ─────────────────────────────────────── */
/* Maps the old --colorPX CSS variables (referenced throughout main.css and
   legacy WPBakery inline content) to the new Obsidian & Ember tokens.        */
:root {
  --colorBlack: #000000;
  --colorWhite: #ffffff;
  --colorP1:    var(--light-text);    /* was #1A1A1C dark body → now light text   */
  --colorP2:    var(--ember-hot);     /* was #F43014 red → ember orange           */
  --colorP3:    var(--ember-warm);    /* was #003D89 blue → amber warm            */
  --colorP4:    var(--muted);         /* was #03D8FF cyan → muted text            */
  --colorS1:    var(--signal);        /* was yellow → signal green                */
  --colorS2:    #8DC435;
  --colorS3:    var(--ember-hot);     /* was orange #ED852C → ember orange        */
  --colorT1:    var(--light-surface); /* was #F7F7F7 light-bg → warm off-white   */
  --colorT2:    var(--light-meta);    /* was muted grey → light meta              */
  --colorT3:    var(--light-text);    /* was dark blue → dark text on light bg    */
  --colorT4:    var(--ember-warm);    /* was teal → amber                         */
  --colorE1:    var(--ember-core);    /* was dark-red → solid ember on light bg   */
  --colorE2:    var(--light-meta);    /* was grey text                            */
  --colorE3:    var(--light-surface); /* was #E8E8E8 pale card → light surface   */

  /* Font-weight scale (kept from old theme) */
  --extralight: 200;
  --light:      300;
  --regular:    400;
  --medium:     500;
  --semibold:   600;
  --bold:       700;
  --extrabold:  800;
}


/* ── 4. TYPOGRAPHY ───────────────────────────────────────────────────────── */
/* senzing-global.css section-header sets color: var(--white) for dark bg.
   Override to light-theme colours for the default editorial context.
   Dark row classes (below) restore the dark-bg typography.                  */

h1, h2, h3, h4, h5, h6 {
  /* color intentionally omitted — Salient's parent theme CSS handles heading
     colours in both light and dark section contexts. Setting it here (even
     without !important) wins the cascade because our stylesheet loads later,
     overriding Salient's dark-section white-heading rules. */
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800 !important;
}

h1 {
  font-size: clamp(38px, 5.5vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

h2 {
  font-size: clamp(30px, 3.5vw, 44px) !important;
  line-height: 1.1 !important;
}

h3 {
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 700 !important;
}

p {
  font-size: 16px;
  line-height: 1.7;
}

strong {
  font-weight: 700;
}

a {
  color: var(--ember-core);
  transition: color .2s;
}

a:hover {
  color: var(--ember-hot);
}

/* WPBakery text block links */

.wpb_text_column a:not(.nectar-button):not(.btn-primary):not(.btn-ghost):not(.btn-primary-light):not(.btn-ghost-light) {
  color: var(--ember-core);
  text-decoration: underline;
}

.wpb_text_column a:hover {
  color: var(--ember-hot);
}

/* .vc_custom_heading default colour — intentionally not forced.
   A global !important rule here overrides Salient dark-section CSS
   for any WPBakery Custom Heading that has no editor-set colour. */

/* Section label — light variant (ember-core on light bg, not ember-hot) */
.section-label {
  color: var(--ember-core);
}
.section-label::after {
  background: var(--ember-core);
}


/* ── 5. SALIENT SECONDARY HEADER BAR ────────────────────────────────────── */
/* Edit content in: Salient → Header Navigation → Secondary Header Bar
   → Secondary Header Text. Salient renders #header-secondary-outer inside
   #header-outer (already position:fixed), above the main nav.
   Salient adds html.top-bar-disabled when "Permanent Transparent" header is
   active — we override that hide rule here so the bar always shows. */
/* #header-secondary-outer — Salient JS resets background-image to none so
   any background-image approach fails. Use ::after pseudo-element instead.
   position:relative + z-index:1 makes the ::after paint above header#top
   (which overlaps the secondary bar in DOM z-order). */
html body #header-outer #header-secondary-outer,
html body #header-outer #header-secondary-outer.default,
html.top-bar-disabled body #header-outer #header-secondary-outer,
html.top-bar-disabled body #header-outer #header-secondary-outer.default {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 44px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: var(--deep) !important;
  box-shadow: none !important;
  border: none !important;
}

/* Salient uses nav::before inside the secondary bar as its own accent stripe —
   it renders at the TOP of the bar with whatever gradient we've set. Kill it. */
html body #header-outer #header-secondary-outer nav::before {
  background: transparent !important;
  background-image: none !important;
}

/* senzing-global.css has a generic "nav" rule that sets background:rgba(15,13,12,.96)
   and backdrop-filter:blur(16px) on EVERY nav element. Two problems:
   1. backdrop-filter promotes the nav to its own GPU compositing layer, which breaks
      -webkit-background-clip:text on gradient headings anywhere near that layer.
   2. The dark background covers whatever gradient does try to paint through.
   Fix: zero both out on all nav elements inside the header. Visual backgrounds are
   already applied to the container elements (header#top, #header-secondary-outer). */
html body #header-outer nav {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

/* Orange gradient stripe at the BOTTOM of the announcement bar.
   z-index:2 ensures it paints above header#top even when that element overlaps. */
html body #header-outer #header-secondary-outer::after,
html.top-bar-disabled body #header-outer #header-secondary-outer::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #FF4E1F 0%, #E8640A 45%, #F0920A 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Inner text content */
html body #header-outer #header-secondary-outer .nectar-center-text,
html body #header-outer #header-secondary-outer .nectar-center-text > a {
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
}

/* "Apply now →" style link inside the bar */
html body #header-outer #header-secondary-outer .nectar-center-text > a {
  color: var(--ember-hot) !important;
  font-weight: 600 !important;
}

html body #header-outer #header-secondary-outer .nectar-center-text > a:hover {
  color: var(--white) !important;
}

/* Span badge (e.g. "CORE CONCEPT") inside the bar text */
html body #header-outer #header-secondary-outer .nectar-center-text > a span {
  background: rgba(255, 78, 31, .15) !important;
  color: var(--ember-hot) !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Hide the close button — the bar is permanent */
html body #header-outer #header-secondary-outer .close-bar,
html body #header-outer #header-secondary-outer button.close-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* ── 6. SALIENT NAV (always dark) ───────────────────────────────────────── */

/* Dark glass background — override Salient's transparent header in all states.
   Uses html body prefix to beat header-perma-transparent.css specificity.    */

html body #header-outer,
html body #header-outer.transparent,
html body #header-outer.scrolled,
html body #header-outer #header-inner-group,
html body #header-outer header,
html body #header-outer header#top,
html body #header-outer.small-nav header,
html body #header-outer.scrolled-down header {
  background: rgba(15, 13, 12, 0.96) !important;
  background-color: rgba(15, 13, 12, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Salient injects .bg-color-stripe inside #header-outer for its transparent-header
   color-band feature. In permanent-transparent mode it renders as a solid black
   rectangle that overlays the secondary bar. We handle backgrounds ourselves. */
html body #header-outer .bg-color-stripe {
  display: none !important;
}

/* Kill any Salient white pseudo-element overlays on the header */
#header-outer header::before,
#header-outer #header-inner-group::before {
  background: rgba(15, 13, 12, 0.96) !important;
  background-color: rgba(15, 13, 12, 0.96) !important;
  opacity: 1 !important;
}

#header-outer header::after,
#header-outer #header-inner-group::after {
  display: none !important;
}

/* Logo */
#header-outer #logo img {
  max-height: 28px;
  width: auto;
}

/* Nav link text */
header .sf-menu > .menu-item:not(.menu-button) > a > .menu-title-text {
  color: var(--text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

header .sf-menu > .menu-item:not(.menu-button) > a:hover > .menu-title-text,
header .sf-menu > .menu-item:not(.menu-button).current-menu-item > a > .menu-title-text,
header .sf-menu > .menu-item:not(.menu-button).current-menu-ancestor > a > .menu-title-text {
  color: var(--ember-hot) !important;
}

/* Nav chevrons */
header .sf-menu > .menu-item:not(.menu-button) > a .nectar-menu-icon::before {
  color: var(--text) !important;
}

header .sf-menu > .menu-item:not(.menu-button):hover > a .nectar-menu-icon::before,
header .sf-menu > .menu-item:not(.menu-button).current-menu-item > a .nectar-menu-icon::before {
  color: var(--ember-hot) !important;
}

/* Make each top-level nav item the positioning context for its dropdown.
   With the li as the containing block, left:0 on the sub-menu means
   "align to the li's left edge" regardless of window width. */
html body #header-outer header .sf-menu > li.menu-item-has-children:not(.menu-button) {
  position: relative !important;
}

/* Dropdown panel — left:0 aligns to the li above (its containing block).
   transform and margin-left are reset to neutralize Salient's centering CSS.
   MutationObserver in functions.php re-asserts left:0 after Salient's JS fires. */
html body #header-outer header .sf-menu > li:not(.menu-button) > ul,
html body #header-outer header .sf-menu > .menu-item:not(.menu-button) > .sub-menu {
  left: 0 !important;
  transform: none !important;
  margin-left: 0 !important;
  background: #1a1614 !important;
  background-color: #1a1614 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4) !important;
}

header .sf-menu > .menu-item:not(.menu-button) > .sub-menu > .menu-item {
  background-color: transparent !important;
}

header .sf-menu > .menu-item:not(.menu-button) > .sub-menu > .menu-item .menu-title {
  border-bottom-color: var(--border) !important;
}

header .sf-menu > .menu-item:not(.menu-button) > .sub-menu > .menu-item .menu-title > a .menu-title-text,
header .sf-menu > .menu-item:not(.menu-button) > .sub-menu > .menu-item > .sub-menu > li > a .menu-title-text {
  color: var(--text) !important;
}

header .sf-menu > .menu-item:not(.menu-button) > .sub-menu > .menu-item > .sub-menu > li > a:hover .menu-title-text {
  color: var(--ember-hot) !important;
}

/* When a dropdown is open, Salient's SuperFish adds .sfHover to the parent li and
   injects a white background on the <a>. This makes our light nav text invisible.
   Strip that background and keep the ember active colour on the label. */
html body #header-outer header .sf-menu > li.sfHover:not(.menu-button) > a,
html body #header-outer header .sf-menu > li.sfHover:not(.menu-button) > a:focus {
  background-color: transparent !important;
  background: transparent !important;
}
html body #header-outer header .sf-menu > li.sfHover:not(.menu-button) > a .menu-title-text,
html body #header-outer header .sf-menu > li.sfHover:not(.menu-button) > a .nectar-menu-icon::before {
  color: var(--ember-hot) !important;
}

/* Mega-menu: pack columns to the left instead of spreading across full header width */
html body #header-outer header .sf-menu > li:not(.menu-button) > ul.sub-menu {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
html body #header-outer header .sf-menu > li:not(.menu-button) > ul.sub-menu > li.menu-item-has-children {
  width: auto !important;
  min-width: 160px !important;
  max-width: 260px !important;
  padding-left: 24px !important;
  padding-right: 32px !important;
  box-sizing: content-box !important;
}

/* Dropdown link typography — smaller and lighter to match design target */
html body #header-outer header .sf-menu > li:not(.menu-button) > ul.sub-menu a .menu-title-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Nav CTA button */
header .sf-menu > .menu-item.menu-button > a {
  background: var(--grad) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 20px !important;
  margin-left: 8px;
}

header .sf-menu > .menu-item.menu-button > a .menu-title-text {
  color: var(--obsidian) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  font-size: 13px !important;
}

header .sf-menu > .menu-item.menu-button > a:hover {
  opacity: .9;
}

/* Search button */
header .sf-menu #search-btn > a {
  background-color: rgba(255, 255, 255, .07) !important;
  border-radius: var(--radius-sm) !important;
}

header .sf-menu #search-btn > a .icon-salient-search::before {
  color: var(--text) !important;
}

header .sf-menu #search-btn > a:hover {
  background-color: rgba(255, 78, 31, .12) !important;
}

header .sf-menu #search-btn > a:hover .icon-salient-search::before {
  color: var(--ember-hot) !important;
}

/* Search overlay */
#search-outer {
  background-color: rgba(15, 13, 12, .97) !important;
}

#search-outer .widget_search .search-field {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
}

#search-outer .widget_search .search-field:focus {
  border-color: var(--ember-hot) !important;
}

/* Mobile / off-canvas menu */
#slide-out-widget-area {
  background-color: var(--deep) !important;
  border-left: 1px solid var(--border) !important;
}

#slide-out-widget-area .off-canvas-menu-container a {
  color: var(--text) !important;
}

#slide-out-widget-area .off-canvas-menu-container a:hover,
#slide-out-widget-area .off-canvas-menu-container .current-menu-item > a {
  color: var(--ember-hot) !important;
}

#slide-out-widget-area .off-canvas-menu-container .sub-menu {
  background: rgba(255, 255, 255, .04) !important;
}

/* Mobile hamburger */
#mobile-menu-icon span,
.nectar-burger span {
  background-color: var(--text) !important;
}

@media only screen and (max-width: 999px) {
  #header-outer header {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}


/* ── 6. PAGE HERO / BANNER (always dark) ────────────────────────────────── */
/* Salient renders page titles / banners in #page-header-bg / #page-header-wrap */
#page-header-bg,
#page-header-wrap,
.page-header-bg-color {
  background-color: var(--deep) !important;
  border-bottom: 1px solid var(--border) !important;
}

#page-header-wrap h1 {
  font-size: clamp(36px, 4.5vw, 60px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}

#page-header-wrap .page-subheading,
#page-header-wrap p {
  font-size: 17px !important;
  line-height: 1.7 !important;
}

#page-header-wrap .section-label {
  color: var(--ember-hot) !important;
}
#page-header-wrap .section-label::after {
  background: var(--ember-hot) !important;
}


/* ── 7. DARK ROW CLASSES ─────────────────────────────────────────────────── */
/* Add these via WPBakery row → Design Options → Extra class name            */

/* ── DARK SECTION ROW COLOUR — single source of truth ──────────────────────
   Per boss request (2026-06-18): every dark / onyx SECTION-row background uses
   #251E1A — EXCEPT the nav top bar and the footer, which keep their own obsidian
   rules (--deep / --obsidian) untouched (§5 nav, §31.9 footer floor). Change
   this ONE value to restyle every dark section at once. */
:root { --onyx-row: #251E1A; }

/* dark-row: dark section surface (hero-level) */
.vc_row.dark-row,
.full-width-section.dark-row {
  background-color: var(--onyx-row) !important;
}

/* deep-row: secondary dark surface */
.vc_row.deep-row,
.full-width-section.deep-row {
  background-color: var(--onyx-row) !important;
}

/* closing-row: dark CTA band — always at bottom of page before footer */
.vc_row.closing-row,
.full-width-section.closing-row {
  background-color: var(--onyx-row) !important;
  border-top: 1px solid var(--border) !important;
}


.vc_row.dark-row a:not(.nectar-button):not(.btn-primary):not(.btn-ghost),
.vc_row.deep-row a:not(.nectar-button):not(.btn-primary):not(.btn-ghost),
.vc_row.closing-row a:not(.nectar-button):not(.btn-primary):not(.btn-ghost) {
  color: var(--ember-hot) !important;
}

/* Section labels in dark rows */
.vc_row.dark-row .section-label,
.vc_row.deep-row .section-label,
.vc_row.closing-row .section-label {
  color: var(--ember-hot) !important;
}
.vc_row.dark-row .section-label::after,
.vc_row.deep-row .section-label::after,
.vc_row.closing-row .section-label::after {
  background: var(--ember-hot) !important;
}



/* ── 8. BUTTONS — SALIENT REMAP ──────────────────────────────────────────── */
/* Salient's .nectar-button → ember gradient primary */

.nectar-button,
.nectar-button.large,
.nectar-button.extra-large {
  background: var(--grad) !important;
  color: var(--obsidian) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  border-radius: var(--radius-sm) !important;
  transition: opacity .2s, transform .2s !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.nectar-button:hover,
.nectar-button.large:hover,
.nectar-button.extra-large:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
  color: var(--obsidian) !important;
}

/* Ghost / see-through button variant (dark background context) */
.vc_row.dark-row .nectar-button.see-through,
.vc_row.dark-row .nectar-button.see-through-2,
.vc_row.dark-row .nectar-button.border-see-through,
.vc_row.deep-row .nectar-button.see-through,
.vc_row.deep-row .nectar-button.see-through-2,
.vc_row.deep-row .nectar-button.border-see-through,
.vc_row.closing-row .nectar-button.see-through,
.vc_row.closing-row .nectar-button.see-through-2 {
  background: transparent !important;
  color: var(--white) !important;
  border: 1.5px solid rgba(255, 255, 255, .25) !important;
}

.vc_row.dark-row .nectar-button.see-through:hover,
.vc_row.dark-row .nectar-button.see-through-2:hover,
.vc_row.dark-row .nectar-button.border-see-through:hover,
.vc_row.deep-row .nectar-button.see-through:hover,
.vc_row.deep-row .nectar-button.see-through-2:hover {
  border-color: var(--ember-hot) !important;
  background: rgba(255, 78, 31, .06) !important;
  color: var(--white) !important;
}

/* Ghost button — light background context */
.nectar-button.see-through,
.nectar-button.see-through-2,
.nectar-button.border-see-through {
  background: transparent !important;
  color: var(--light-text) !important;
  border: 1.5px solid var(--light-border) !important;
}

.nectar-button.see-through:hover,
.nectar-button.see-through-2:hover,
.nectar-button.border-see-through:hover {
  border-color: var(--ember-hot) !important;
  background: rgba(255, 78, 31, .04) !important;
  color: var(--light-text) !important;
}

/* WPBakery vc_btn */
.vc_btn3 {
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  font-size: 14px !important;
  transition: opacity .2s, transform .2s !important;
}

.vc_btn3-color-juicy-pink,
.vc_btn3-color-danger,
.vc_btn3-color-primary,
.vc_btn3-style-flat,
.vc_btn3-color-orange {
  background: var(--grad) !important;
  color: var(--obsidian) !important;
  border: none !important;
}

.vc_btn3-color-juicy-pink:hover,
.vc_btn3-color-danger:hover,
.vc_btn3-color-primary:hover {
  opacity: .9 !important;
}

/* rdy-button (WPBakery custom shortcode from old theme) */
.rdy-btn,
.rdy-button,
[class*="rdy-btn-"] {
  background: var(--grad) !important;
  color: var(--obsidian) !important;
  border-color: transparent !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  font-family: var(--font-sans) !important;
  transition: opacity .2s, transform .2s !important;
}

.rdy-btn:hover,
.rdy-button:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}


/* ── 9. LIGHT-SECTION CARD OVERRIDES ─────────────────────────────────────── */
/* senzing-global.css card components default to dark surfaces.
   Add class "light-section" to WPBakery rows containing these components
   to activate light-card variants.                                           */

.vc_row.light-section .problem-card,
.vc_row.light-section .cap-card,
.vc_row.light-section .usecase-card,
.vc_row.light-section .proof-card {
  background: var(--light-surface) !important;
  border-color: var(--light-border) !important;
}

.vc_row.light-section .stat-card {
  background: var(--light-bg) !important;
  border-color: var(--light-border) !important;
}

.vc_row.light-section .problem-card h3,
.vc_row.light-section .cap-card h3,
.vc_row.light-section .usecase-card h4,
.vc_row.light-section .proof-card .proof-name {
  color: var(--light-text) !important;
}

.vc_row.light-section .problem-card p,
.vc_row.light-section .cap-card p,
.vc_row.light-section .usecase-card p,
.vc_row.light-section .proof-card blockquote,
.vc_row.light-section .proof-card .proof-title {
  color: var(--light-body) !important;
}

.vc_row.light-section .stat-card .stat-label {
  color: var(--light-body) !important;
}


/* ── 10. SALIENT FOOTER (always dark) ────────────────────────────────────── */
#footer-outer {
  background: var(--deep) !important;
  border-top: 1px solid var(--border) !important;
  padding: 60px 0 36px !important;
}

/* Footer column headings */
#footer-outer h1, #footer-outer h2, #footer-outer h3,
#footer-outer h4, #footer-outer h5, #footer-outer h6 {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* Footer links */
#footer-outer a {
  color: var(--text) !important;
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s;
}

#footer-outer a:hover {
  color: var(--ember-hot) !important;
}

/* Footer brand / description text */
#footer-outer p {
  color: var(--muted) !important;
  font-size: 13px;
  line-height: 1.7;
}

/* WPBakery text in the footer Global Section.
   Salient renders the footer Global Section in .nectar-global-section — not
   #footer-outer, which is EMPTY when a Global Section is used as the footer.
   Mirroring the :not() chain from the broad body-text rule gives this selector
   specificity 0,6,1 vs the broad rule's 0,5,1, so var(--white) wins here. */
.nectar-global-section .vc_row:not(.dark-row):not(.deep-row):not(.closing-row) .wpb_text_column p,
.nectar-global-section .vc_row:not(.dark-row):not(.deep-row):not(.closing-row) .wpb_text_column li,
.nectar-global-section .vc_row:not(.dark-row):not(.deep-row):not(.closing-row) .wpb_text_column p span,
.nectar-global-section .vc_row:not(.dark-row):not(.deep-row):not(.closing-row) .wpb_text_column li span {
  color: var(--white) !important;
}

/* Copyright bar */
#footer-outer #copyright {
  border-top: 1px solid var(--border) !important;
  padding-top: 24px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

#footer-outer #copyright p,
#footer-outer #copyright span,
#footer-outer #copyright a {
  color: var(--muted) !important;
  font-size: 12px !important;
}

#footer-outer #copyright a:hover {
  color: var(--text) !important;
}


/* ── 11. BLOG / ARCHIVE / SEARCH HEADERS (dark) ─────────────────────────── */
.single-post #page-header-bg,
.single-post #page-header-wrap,
.blog #page-header-bg,
.blog #page-header-wrap,
.archive #page-header-bg,
.archive #page-header-wrap,
.search-results #page-header-bg,
.search-results #page-header-wrap,
.tax-category #page-header-bg,
.tag #page-header-bg,
.page-template-legal #page-header-bg,
.page-template-policy #page-header-bg {
  background-color: var(--deep) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Search hero: the PARENT Salient search.css (themes/salient/css/build/search.css,
   not the child) paints a navy gradient `background:linear-gradient(... #003d89)`
   on #page-header-bg.search-hero-section. `background` shorthand carries a
   background-IMAGE, which the background-COLOR rule above can't clear — so the
   navy still shows. Override with our obsidian + ember-glow via `background`
   shorthand at higher specificity (id + 2 classes beats the parent's 1 class). */
.search-results #page-header-bg.search-hero-section {
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 78, 31, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 78% 92%, rgba(240, 146, 10, 0.10) 0%, transparent 55%),
    var(--obsidian) !important;
}

.single-post #page-header-wrap h1,
.blog #page-header-wrap h1,
.archive #page-header-wrap h1,
.search-results #page-header-wrap h1 {
  color: var(--white) !important;
}

.single-post #page-header-wrap .page-subheading,
.single-post #page-header-wrap .post-meta {
  color: var(--muted) !important;
}


/* ── 12. SINGLE BLOG POST BODY ───────────────────────────────────────────── */
/* Article body is a light editorial reading context */
.single-post article .post-content h2,
.single-post article .post-content h3,
.single-post article .post-content h4 {
  color: var(--light-text);
  font-weight: 700;
}

.single-post article .post-content p,
.single-post article .post-content li {
  color: var(--light-body);
  font-size: 17px;
  line-height: 1.85;
}

.single-post article .post-content a {
  color: var(--ember-core);
  text-decoration: underline;
}

.single-post article .post-content a:hover {
  color: var(--ember-hot);
}

.single-post article .post-content blockquote {
  border-left: 3px solid var(--ember-hot);
  padding: 4px 0 4px 20px;
  color: var(--light-body);
  font-style: italic;
}

/* Post meta / categories */
.single-post .post-meta a,
.single-post .blog-tag {
  color: var(--ember-hot) !important;
}


/* ── 13. BLOG INDEX & ARCHIVE ────────────────────────────────────────────── */
/* Post cards in the blog listing grid */
.blog-items-wrap .post-item {
  background: var(--light-bg) !important;
  border: 1px solid var(--light-border) !important;
  border-radius: var(--radius-lg) !important;
}

.blog-items-wrap .post-item h3 a,
.blog-items-wrap .post-item h2 a {
  color: var(--light-text) !important;
}

.blog-items-wrap .post-item h3 a:hover,
.blog-items-wrap .post-item h2 a:hover {
  color: var(--ember-hot) !important;
}

.blog-items-wrap .post-item .p-info,
.blog-items-wrap .post-item .p-info a {
  color: var(--light-meta) !important;
}

.blog-items-wrap .post-item .p-info a:hover {
  color: var(--ember-hot) !important;
}

/* Nectar post grid */
.nectar-post-grid-item .item-wrap {
  background: var(--light-bg) !important;
  border: 1px solid var(--light-border) !important;
  border-radius: var(--radius-lg) !important;
}

.nectar-post-grid-item .item-wrap h3 a,
.nectar-post-grid-item .item-wrap h2 a {
  color: var(--light-text) !important;
}


/* ── 14. HOMEPAGE HERO ROW (sz-hero-row) ─────────────────────────────────── */
/* Add classes "sz-hero-row dark-row" to the WPBakery row that contains the
   hero content. The left column holds normal WPBakery elements; the right
   column holds the canvas embed. Glow circles are injected by the JS. */

/* Contain the absolutely-positioned glow circles.
   overflow:clip clips visually without creating a new block formatting context,
   so Salient's negative-margin full-width row stretching still works.
   overflow:hidden would break full-width rows — don't use it here.
   Background comes from the dark-row class — do not hard-code it here so
   it remains overridable per row.
   padding-top accounts for: fixed nav (~80px) + announcement bar (~44px) + breathing room */
.vc_row.sz-hero-row {
  position: relative !important;
  overflow: clip !important;
  padding-top: 160px !important;
  padding-bottom: 100px !important;
  /* Explicitly zero top/left/right so border-image only renders on the bottom */
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 6px solid transparent !important;
  border-image: linear-gradient(90deg, #FF4E1F 0%, #E8640A 45%, #F0920A 100%) 1 !important;
}

/* Lift column content above the injected glow circle divs */
.vc_row.sz-hero-row .vc_column_container,
.vc_row.sz-hero-row .vc_column-inner,
.vc_row.sz-hero-row .wpb_wrapper {
  position: relative;
  z-index: 1;
}

/* ── Gradient headline trick ─────────────────────────────────────────────── */
/* In WPBakery's heading element, bold the words you want in gradient.
   This rule catches the <strong> tag and renders it as the Ember gradient.
   No HTML editing required — just select the words and click Bold in the toolbar.
   The heading is already font-weight:800 throughout, so bolding a word inside
   it changes nothing visually except applying the gradient. */
.vc_row.sz-hero-row h1 strong,
.vc_row.sz-hero-row h2 strong,
.vc_row.sz-hero-row h3 strong {
  font-weight: 800 !important;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient bold trick — dark/deep rows only.
   Bold any words in a WPBakery heading to get the Ember orange gradient on them.
   -webkit-text-fill-color: transparent is required; it overrides the parent's
   -webkit-text-fill-color: var(--white) so the gradient shows through. */
.vc_row.dark-row h1 strong,
.vc_row.dark-row h2 strong,
.vc_row.dark-row h3 strong,
.vc_row.deep-row h1 strong,
.vc_row.deep-row h2 strong,
.vc_row.deep-row h3 strong {
  font-weight: 800 !important;
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Gradient on Custom Heading modules — site-wide ──────────────────────────
   The rules above only fire inside hero/dark/deep rows, which is why the many
   pages built with WPBakery "Custom Heading" modules never picked up the ember
   treatment. These two rules close that gap:

   (1) BOLD-A-WORD, anywhere: bolding text inside ANY heading (standard or a
       Custom Heading module) renders those words as the ember gradient — the
       same authoring gesture as the home page, now available on every page.
   (2) WHOLE-HEADING opt-in: add the Extra Class "sz-grad-heading" to a Custom
       Heading element (WPBakery → element → Design Options/Extra class field)
       and the entire title renders as the gradient. Use this for the red-accent
       sub-headlines (e.g. the SDK page's "Unparalleled Accuracy") so they get
       the gradient instead of a flat fill. Inner color spans are overridden. */

/* (1) bold word → gradient, in any content heading or custom heading */
.vc_row h1 strong, .vc_row h2 strong, .vc_row h3 strong,
.vc_custom_heading strong {
  font-weight: 800 !important;
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* (2) whole Custom Heading → gradient (opt-in via Extra Class) */
.sz-grad-heading,
.sz-grad-heading span,
.sz-grad-heading a,
.sz-grad-heading strong {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* (3) AUTO — the site-wide "red H2 byline" pattern → gradient.
   Across the article pages, the sub-headline under each H1 is a Custom Heading
   carrying an inline red color (the old #F43014, or #FD4D1F after the recolor
   pass). Rather than hand-add a class to dozens of pages, match that inline red
   directly and convert those sub-heads to the ember gradient. Matches both the
   old and new red, case-insensitively, so it works before OR after pass 6.
   Scoped to h2/h3 Custom Headings only — never body copy, never the dark H1. */
h2.vc_custom_heading[style*="f43014" i],
h3.vc_custom_heading[style*="f43014" i],
h2.vc_custom_heading[style*="fd4d1f" i],
h3.vc_custom_heading[style*="fd4d1f" i],
h2.vc_custom_heading[style*="f43014" i] span,
h3.vc_custom_heading[style*="f43014" i] span,
h2.vc_custom_heading[style*="fd4d1f" i] span,
h3.vc_custom_heading[style*="fd4d1f" i] span {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.vc_row.sz-hero-row p {
  font-size: clamp(16px, 1.8vw, 19px) !important;
  line-height: 1.7 !important;
}

/* ── Hero CTA buttons ────────────────────────────────────────────────────── */
/* Two approaches supported:
   A) Custom HTML wrapper div: <div class="sz-hero-ctas"><a ...>...</a><a ...>...</a></div>
   B) WPBakery RDY button: add sz-hero-ctas on the primary button, sz-hero-ghost on the secondary */

/* ── A: Custom HTML wrapper (div.sz-hero-ctas) ───────────────────────────── */
div.sz-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
div.sz-hero-ctas a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 13px 20px !important;
  min-width: 178px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity .18s, transform .18s, border-color .18s, background .18s;
  color: inherit !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
div.sz-hero-ctas a:first-child {
  background: var(--grad) !important;
  color: var(--obsidian) !important;
  -webkit-text-fill-color: var(--obsidian) !important;
  border: 1.5px solid transparent !important;
}
div.sz-hero-ctas a:first-child:hover {
  opacity: .88;
  transform: translateY(-1px);
}
div.sz-hero-ctas a:last-child {
  background: transparent !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
}
div.sz-hero-ctas a:last-child:hover {
  border-color: var(--ember-hot) !important;
  background: rgba(255,78,31,.06) !important;
  transform: translateY(-1px);
}

/* ── B: WPBakery RDY button — primary (sz-hero-ctas on the <a> itself) ───── */
a.rdy_button.sz-hero-ctas {
  background: var(--grad) !important;
  background-color: transparent !important; /* let background shorthand win */
  color: var(--obsidian) !important;
  -webkit-text-fill-color: var(--obsidian) !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  min-width: 178px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  transition: opacity .18s, transform .18s !important;
}
a.rdy_button.sz-hero-ctas span {
  color: var(--obsidian) !important;
  -webkit-text-fill-color: var(--obsidian) !important;
}
a.rdy_button.sz-hero-ctas:hover,
a.rdy_button.sz-hero-ctas.flat-dimension:hover {
  background: var(--grad) !important;
  color: var(--obsidian) !important;
  opacity: .88 !important;
  transform: translateY(-1px) !important;
}

/* ── B: WPBakery RDY button — ghost (sz-hero-ghost on the <a> itself) ─────── */
/* Add "sz-hero-ghost" as Extra class name on the second hero button in WPBakery */
a.rdy_button.sz-hero-ghost {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  border-style: solid !important;
  border-color: rgba(255,255,255,.28) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  min-width: 178px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  transition: border-color .18s, background .18s, transform .18s !important;
}
a.rdy_button.sz-hero-ghost span {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
a.rdy_button.sz-hero-ghost:hover,
a.rdy_button.sz-hero-ghost.flat-dimension:hover {
  border-color: var(--ember-hot) !important;
  background: rgba(255,78,31,.06) !important;
  background-color: rgba(255,78,31,.06) !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}

/* ── Left column vertical centering ─────────────────────────────────────── */
/* Aligns the text/button column to the vertical midpoint of the canvas column */
.vc_row.sz-hero-row .vc_col-sm-6:first-child .vc_column-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.nectar-post-grid-item .item-wrap h3 a:hover {
  color: var(--ember-hot) !important;
}

.nectar-post-grid-item .item-wrap .p-info,
.nectar-post-grid-item .item-wrap .p-info a {
  color: var(--light-meta) !important;
}


/* ── 14. SEARCH RESULTS ──────────────────────────────────────────────────── */
#search-results .search-entry h3 a {
  color: var(--light-text) !important;
}

#search-results .search-entry h3 a:hover {
  color: var(--ember-hot) !important;
}

#search-results .search-entry p {
  color: var(--light-body) !important;
}


/* ── 15. GRAVITY FORMS — LIGHT CONTEXT ──────────────────────────────────── */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper .gfield_label {
  color: var(--light-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea,
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea {
  background: var(--light-bg) !important;
  border: 1px solid var(--light-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--light-text) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  font-family: var(--font-sans) !important;
  transition: border-color .2s !important;
  box-shadow: none !important;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus,
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--ember-hot) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 78, 31, .08) !important;
}

/* GF submit button */
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit],
.gform_wrapper button[type=submit] {
  background: var(--grad) !important;
  color: var(--obsidian) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  font-family: var(--font-sans) !important;
  transition: opacity .2s !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type=submit]:hover {
  opacity: .9 !important;
}

/* Gravity Forms — dark row context */
.vc_row.dark-row .gform_wrapper input,
.vc_row.dark-row .gform_wrapper select,
.vc_row.dark-row .gform_wrapper textarea,
.vc_row.deep-row .gform_wrapper input,
.vc_row.deep-row .gform_wrapper select,
.vc_row.deep-row .gform_wrapper textarea {
  background: var(--deep) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}

.vc_row.dark-row .gform_wrapper .gfield_label,
.vc_row.deep-row .gform_wrapper .gfield_label {
  color: var(--text) !important;
}


/* ── 16. SALIENT ACCORDION ───────────────────────────────────────────────── */
/* Light context (default) */
.nectar-accordion-wrap .question {
  background: var(--light-surface) !important;
  border: 1px solid var(--light-border) !important;
  color: var(--light-text) !important;
}

.nectar-accordion-wrap .question h4 {
  color: var(--light-text) !important;
  font-weight: 600 !important;
}

.nectar-accordion-wrap .question.active,
.nectar-accordion-wrap .question:hover {
  background: var(--light-bg) !important;
  border-color: var(--ember-hot) !important;
}

.nectar-accordion-wrap .answer {
  background: var(--light-bg) !important;
  border-color: var(--light-border) !important;
}

.nectar-accordion-wrap .answer p {
  color: var(--light-body) !important;
}

/* Dark row accordion */
.vc_row.dark-row .nectar-accordion-wrap .question,
.vc_row.deep-row .nectar-accordion-wrap .question {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.vc_row.dark-row .nectar-accordion-wrap .question h4,
.vc_row.deep-row .nectar-accordion-wrap .question h4 {
  color: var(--white) !important;
}

.vc_row.dark-row .nectar-accordion-wrap .answer,
.vc_row.deep-row .nectar-accordion-wrap .answer {
  background: var(--deep) !important;
  border-color: var(--border) !important;
}

.vc_row.dark-row .nectar-accordion-wrap .answer p,
.vc_row.deep-row .nectar-accordion-wrap .answer p {
  color: var(--muted) !important;
}


/* ── 17. SALIENT TABS ────────────────────────────────────────────────────── */
.nectar-tabs-wrap .tabs-nav li a {
  color: var(--light-body) !important;
  border-color: var(--light-border) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
}

.nectar-tabs-wrap .tabs-nav li.active a,
.nectar-tabs-wrap .tabs-nav li a:hover {
  color: var(--ember-hot) !important;
  border-bottom-color: var(--ember-hot) !important;
}


/* ── 18. ICON LIST ───────────────────────────────────────────────────────── */
.wpb_content_element.icon-list .icon-list-item .icon,
.nectar-icon-list .icon-list-item .icon-default-style {
  color: var(--ember-hot) !important;
}

.wpb_content_element.icon-list .icon-list-item p {
  color: var(--light-body);
}

.vc_row.dark-row .wpb_content_element.icon-list .icon-list-item p,
.vc_row.deep-row .wpb_content_element.icon-list .icon-list-item p {
  color: var(--muted) !important;
}


/* ── 19. DIVIDERS & SEPARATORS ───────────────────────────────────────────── */
hr,
.vc_separator .vc_sep_holder .vc_sep_line {
  border-color: var(--light-border) !important;
}

.vc_row.dark-row hr,
.vc_row.dark-row .vc_separator .vc_sep_holder .vc_sep_line,
.vc_row.deep-row hr,
.vc_row.deep-row .vc_separator .vc_sep_holder .vc_sep_line {
  border-color: var(--border) !important;
}


/* ── 20. BREADCRUMBS ─────────────────────────────────────────────────────── */
#breadcrumb {
  background: transparent !important;
  border-bottom: 1px solid var(--light-border) !important;
}

#breadcrumb a,
#breadcrumb span {
  color: var(--light-meta) !important;
  font-size: 12px !important;
}

#breadcrumb a:hover {
  color: var(--ember-hot) !important;
}


/* ── 21. PAGINATION ──────────────────────────────────────────────────────── */
.pagination .page-numbers,
.wc-pagination .page-numbers {
  color: var(--light-body) !important;
  border: 1px solid var(--light-border) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--ember-hot) !important;
  color: var(--white) !important;
  border-color: var(--ember-hot) !important;
}


/* ── 22. TABLES ──────────────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
}

table th {
  background: var(--light-surface) !important;
  color: var(--light-text) !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 2px solid var(--light-border);
}

table td {
  color: var(--light-body);
  font-size: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--light-border);
}

.vc_row.dark-row table th,
.vc_row.deep-row table th {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.vc_row.dark-row table td,
.vc_row.deep-row table td {
  color: var(--muted) !important;
  border-color: var(--border) !important;
}


/* ── 23. NECTAR SLIDER CONTROLS ──────────────────────────────────────────── */
.nectar-slider-wrap .slide-control-bullet.active,
.nectar-slider-wrap .slide-control-bullet:hover {
  background: var(--ember-hot) !important;
}

.nectar-slider-wrap .pause-button span {
  background: var(--ember-hot) !important;
}


/* ── 24. PROGRESS BARS ───────────────────────────────────────────────────── */
.nectar-progress-bar .progress-bar-wrap {
  background: var(--light-border) !important;
  border-radius: var(--radius-pill) !important;
}

.nectar-progress-bar .progress-bar-wrap .fill {
  background: var(--grad) !important;
}


/* ── 25. GRAD TEXT UTILITY ───────────────────────────────────────────────── */
/* Ensure .grad-text works on both dark and light backgrounds */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 26. LOGO PLACEHOLDER (until real logos are supplied) ────────────────── */
.logo-placeholder {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--light-meta);
}

.vc_row.dark-row .logo-placeholder,
.vc_row.deep-row .logo-placeholder {
  color: var(--muted) !important;
}


/* ── 27. WPBAKERY ROW DEFAULTS ───────────────────────────────────────────── */
/* Clear any Salient-applied backgrounds on rows without explicit colour class */
.vc_row.wpb_row:not(.dark-row):not(.deep-row):not(.closing-row),
.full-width-section:not(.dark-row):not(.deep-row):not(.closing-row) {
  background-color: transparent;
}


/* ── 28. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-header-wrap h1 {
    font-size: clamp(28px, 6vw, 44px) !important;
  }

  .vc_row.dark-row,
  .vc_row.deep-row,
  .vc_row.closing-row {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #footer-outer {
    padding: 48px 24px 28px !important;
  }
}


/* ── 29. NO-LINE QUOTE UTILITY ───────────────────────────────────────────── */
/* Add class="no-line-quote" to any <blockquote> that should appear without
   Salient's default left-border accent. Safe to use anywhere on the site
   without affecting other blockquotes. */
blockquote.no-line-quote,
blockquote.no-line-quote::before,
blockquote.no-line-quote::after {
  border: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ── 30. EMBER GLOW ROW BACKGROUND ──────────────────────────────────────── */
/* Applied to [vc_row] sections that previously had blue/navy background      */
/* images. CRITICAL: Salient `full_width_background` rows paint the visible   */
/* background onto their OWN internal `.row-bg` element — setting a bg on the  */
/* outer .vc_row alone is insufficient (the transparent .row-bg sits on top   */
/* and the page shows through white). So we force `.row-bg` to obsidian       */
/* directly, and also set the outer row as a fallback for in-container rows   */
/* that have no .row-bg. The ember glow animates on ::before, layered ABOVE   */
/* the obsidian bg (z-index 1) but BELOW the column content (Salient cols are */
/* z-index 2+), so text stays readable.                                       */

.sz-ember-glow {
  background-color: var(--onyx-row) !important;
  position: relative;
}

/* Salient's actual painted background element — force dark-row colour, kill image */
.sz-ember-glow .row-bg,
.sz-ember-glow > .row-bg-wrap .row-bg {
  background-image: none !important;
  background-color: var(--onyx-row) !important;
  opacity: 1 !important;
}

/* Animated ember glow overlay — sits above the obsidian bg, below content */
.sz-ember-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 55%, rgba(255, 78, 31, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 72% 28%, rgba(240, 146, 10, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 5% 95%,  rgba(255, 78, 31, 0.10) 0%, transparent 40%);
  animation: szEmberPulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes szEmberPulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

/* Keep all column content above the ember ::before overlay */
.sz-ember-glow > .col,
.sz-ember-glow > .row-bg-wrap ~ .col,
.sz-ember-glow .vc_column_container,
.sz-ember-glow .wpb_column,
.sz-ember-glow .col.span_12 {
  position: relative;
  z-index: 2;
}


/* ── 30b. EMBER FEATURE FIELD — TALL SECTION BACKGROUND ─────────────────────
   Opt-in class for BIG feature sections (e.g. /senzing-sdk/) where a single
   `sz-ember-glow` would stretch into one giant blob and go monotone as you
   scroll. This treatment is height-proof: NOTHING is positioned as a % of the
   section, so a 600px or a 4000px row look equally good.

   Three stacked, static background layers painted directly on Salient's
   `.row-bg`:
     1+2. A 2px ember rule pinned to the section's top (0 0) and bottom (0 100%).
     3.   A faint white node/dot matrix (26px grid) — the "entity graph" texture.
     4+5. The glow field: one ember glow upper-left + one amber glow lower-right,
          tiled at 1000px with `repeat-y`. Because it tiles, the glows alternate
          ember→amber→ember diagonally ALL THE WAY DOWN, never fading to flat.

   SEAMLESS-TILE RULE (do not break): for a repeat-y radial glow to tile without
   a visible horizontal seam, each glow must be FULLY TRANSPARENT before BOTH the
   top and bottom tile edges — i.e. the glow centre must sit at least one fade-
   radius from each edge. Fade-radius = (transparent-stop% × vertical-radius). The
   first version seamed because the ember centre (20% = 176px of an 880px tile)
   was closer to the top than its ~282px fade-radius, so it was still coloured at
   the tile boundary. Now: 1000px tile, ember at 30% (300px) / amber at 70%
   (700px), vertical-radius ≤420px × 60% = ≤252px fade → both clear of the edges.

   Anchored on `#ajax-content-wrap` (an ID) so it always out-specifies the §31.8
   surface engine, which would otherwise repaint `.row-bg` light. No animation —
   static reads as serious B2B. Glow intensity is deliberately low (ember .13 /
   amber .09); dial the 1000px tile height for glow spacing (keep the seamless-
   tile rule above when you change centres or fade stops).                      */

#ajax-content-wrap .vc_row.sz-ember-feature {
  background-color: #0F0D0C !important;
  position: relative;
}

/* SCOPED to the parent row's OWN .row-bg only (`> .row-bg-wrap`). Do NOT use a
   descendant `.sz-ember-feature .row-bg` selector here — inner_rows have their
   own .row-bg and would each inherit the field + top/bottom ember rule, drawing
   a stack of horizontal ember lines between every sub-row. */
#ajax-content-wrap .vc_row.sz-ember-feature:not(.inner_row) > .row-bg-wrap .row-bg {
  background-color: #0F0D0C !important;
  background-image:
    linear-gradient(90deg, #FF4E1F, #F0920A),
    linear-gradient(90deg, #F0920A, #FF4E1F),
    radial-gradient(rgba(255, 255, 255, 0.05) 1.3px, transparent 1.4px),
    radial-gradient(640px 420px at 14% 30%, rgba(255, 78, 31, 0.13), transparent 60%),
    radial-gradient(600px 400px at 86% 70%, rgba(240, 146, 10, 0.09), transparent 60%) !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat-y, repeat-y !important;
  background-size: 100% 2px, 100% 2px, 26px 26px, 100% 1000px, 100% 1000px !important;
  background-position: 0 0, 0 100%, 0 0, 0 0, 0 0 !important;
  opacity: 1 !important;
}

/* Keep column content above the painted field */
#ajax-content-wrap .vc_row.sz-ember-feature > .col,
#ajax-content-wrap .vc_row.sz-ember-feature .vc_column_container,
#ajax-content-wrap .vc_row.sz-ember-feature .wpb_column,
#ajax-content-wrap .vc_row.sz-ember-feature .col.span_12 {
  position: relative;
  z-index: 2;
}


/* ── 31. OBSIDIAN & EMBER — SAFE GLOBAL TRANSFORMS (site-wide) ──────────────
   Lesson from the first global attempt: you CANNOT infer a section's intended
   surface colour from Salient's data-midnight flag — that flag only means "use
   light text", and many readable LIGHT sections carry it. Forcing backgrounds
   from it painted light sections black and hid their dark text.

   So this section does ONLY transforms that are universally correct regardless
   of section intent:
     • cards   → 10px radius + theme border
     • bands   → square corners; colour bands go full-width
     • legacy values recoloured in place (#e8e8e8 grey → beige, black → onyx)
     • dotted sections → beige, dots removed, text forced dark (readable)
     • cramped Learn More / Read More buttons → real padding

   Per-section beige/white/onyx ALTERNATION is intentionally NOT done here — it
   requires tagging each section row with an el_class (.sz-beige-row /
   .sz-white-row / .sz-onyx-row, defined at the end) in WPBakery, because only a
   human knows which white section should become beige vs stay white vs go dark.
   ────────────────────────────────────────────────────────────────────────── */

/* 31.1 — CARD RADIUS: corner-radius columns (inner box AND colour fill) → 10px.
   This is what finally squares the ember quote boxes whose fill kept the old
   radius, and drops any 24/40/74px card to 10px. */
[class*="_br_"] .vc_column-inner,
[class*="_br_"] .column-bg-overlay-wrap,
[class*="_br_"] .column-bg-overlay {
  border-radius: var(--radius-lg) !important;   /* 10px */
}

/* 31.2 — CARD BORDER: recolor the near-black inline border globally */
.vc_column-inner[style*="1a1a1c" i] {
  border-color: var(--light-border) !important;  /* #DDD8D3 */
}

/* 31.2b — STRONGER CARD BORDERS ON DARK SECTIONS (boss request 2026-06-18).
   With dark sections now #251E1A (= the card colour), the cards — which are
   transparent and whose "border" is a box-shadow driven by --boxCardBorderColor
   (main.css .box--* classes, default 1px #1A1A1C) — blend into the section. We
   brighten that edge to a clear light hairline, ONLY inside dark sections, so
   light-section cards keep their dark outline. Overriding the VARIABLE (not the
   box-shadow) preserves the ember hover (which re-sets the var on :hover). */
#ajax-content-wrap [data-midnight="light"] [class*="box--"],
#ajax-content-wrap .dark-row [class*="box--"],
#ajax-content-wrap .deep-row [class*="box--"],
#ajax-content-wrap .closing-row [class*="box--"],
#ajax-content-wrap .sz-onyx-row [class*="box--"],
#ajax-content-wrap .sz-ember-glow [class*="box--"] {
  --boxCardBorderColor: 0px 0px 0px 1px rgba(255, 255, 255, 0.22) !important;
}

/* 31.3 — BANDS → FULL-WIDTH.
   Salient rounds the band on .row-bg-wrap (border-radius + overflow:hidden), NOT
   .row-bg — squaring .row-bg did nothing. Square the wrapper, then force it to
   full viewport width (100vw centring trick), and re-constrain the content
   (which Salient inset 10–15% via .row_col_wrap_12 padding) to the centred max
   width so the colour runs edge-to-edge while text stays centered. */
[data-br-applies="bg"] > .row-bg-wrap {
  border-radius: 0 !important;
}
/* Full-bleed applies to ALL rounded bands, not just full-width-section rows —
   the contained content boxes (data-quality etc.) are data-br-applies="bg" but
   NOT full-width-section, so they were squared but never widened. */
.vc_row[data-br-applies="bg"] > .row-bg-wrap {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  margin-left: -50vw !important;
}
.vc_row[data-br-applies="bg"] > .row_col_wrap_12 {
  max-width: var(--max-content) !important;   /* 1200px */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* 31.4 — DOTTED SECTIONS: just strip the dot pattern (::after) and the white
   text "chips" (--backgroundColor). The dotted column is transparent, so its
   SECTION COLOUR comes from the unified surface engine (31.8) like every other
   row — no per-dotted beige/white/text rules needed anymore. */
.dotted-background::after,
.dotted-background-dark::after {
  content: none !important;
}
.dotted-background,
.dotted-background-dark {
  --backgroundColor: transparent !important;
}

/* 31.6 — CRAMPED BUTTONS: Learn More / Read More etc.
   These are `.nectar-button large ... arrow-button` — the previous rule wrongly
   EXCLUDED .large, so nothing applied. Give every nectar button comfortable
   padding and space the trailing arrow icon. */
.nectar-button {
  padding: 13px 30px !important;
  line-height: 1.2 !important;
}
.nectar-button.has-icon i,
.nectar-button.arrow-button i {
  margin-left: 9px !important;
}

/* 31.7 — OPT-IN SURFACE HELPERS (add as a row Extra Class in WPBakery).
   These are the deliberate per-section override. They MUST out-specify the
   surface engine below — rule (c) ":has(img)→white" reaches (0,9,1), so these
   are written to (0,9,2) via an `html body` prefix + the same brand guards.
   (The earlier (0,5,0) versions silently lost to the engine and did nothing.)
   `.full-width-section` is dropped so they work on any row type. */
#ajax-content-wrap .vc_row.sz-beige-row:not(.inner_row) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--light-surface) !important; background-image: none !important; opacity: 1 !important;
}
#ajax-content-wrap .vc_row.sz-white-row:not(.inner_row) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--light-bg) !important; background-image: none !important; opacity: 1 !important;
}
#ajax-content-wrap .vc_row.sz-onyx-row:not(.inner_row) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--onyx-row) !important; background-image: none !important; opacity: 1 !important;
}
/* Text colour helpers to pair with the surface helpers */
.sz-beige-row h1, .sz-beige-row h2, .sz-beige-row h3, .sz-beige-row h4, .sz-beige-row h5, .sz-beige-row h6,
.sz-white-row h1, .sz-white-row h2, .sz-white-row h3, .sz-white-row h4, .sz-white-row h5, .sz-white-row h6 {
  color: var(--light-text) !important;
}
.sz-beige-row p:not([style*="color"]), .sz-beige-row li:not([style*="color"]),
.sz-white-row p:not([style*="color"]), .sz-white-row li:not([style*="color"]) {
  color: var(--light-body) !important;
}
.sz-onyx-row h1, .sz-onyx-row h2, .sz-onyx-row h3, .sz-onyx-row h4, .sz-onyx-row h5, .sz-onyx-row h6 {
  color: var(--white) !important;
}
.sz-onyx-row p:not([style*="color"]), .sz-onyx-row li:not([style*="color"]) {
  color: var(--muted) !important;
}


/* 31.8 — SURFACE ENGINE ──────────────────────────────────────────────────────
   ONE engine decides every section/box colour site-wide. No per-page, per-id,
   per-class-of-build rules — just these inputs per row:
     • text scheme  : data-midnight / .light column-wrap = the headline colour
     • content      : does it contain a REAL image?
   Outputs: ONYX (light headline) · WHITE (dark headline + image) · BEIGE (else).

   Definitions reused throughout:
     REAL IMAGE = .column-image-bg  OR  a non-icon <img> that is NOT a PNG/logo.
                  Icons are .nectar-text-inline-images__image / data: URIs.
                  PNGs are EXCLUDED because they're almost always transparent
                  graphics/logos — forcing the row white defeats the transparency
                  (this is what wrongly whitened the footer logo row). PNG is
                  matched on data-nectar-img-src (Salient lazy-loads; src is an
                  SVG placeholder until swapped) AND on src, plus any "logo" in
                  the filename. So only opaque photos (jpg/webp) trigger WHITE.
     PRESERVE   = background images (photos/heroes) and ember/red brand fills
                  (#FD4D1F / #F43014) are never repainted.

   We paint the row's .row-bg directly (NOT excluding using-bg-color), so legacy
   greys (#e8e8e8), black bands and dotted sections all converge here instead of
   needing their own rules. Override order: grey-normalise → beige → white → onyx. */

/* (a) Normalise any leftover legacy grey (#e8e8e8) → beige baseline (covers
   column-level boxes and nested inner-row fills the row engine doesn't reach). */
[style*="e8e8e8" i] { background-color: var(--light-surface) !important; }

/* ESCAPE HATCH: a row tagged `sz-custom-bg` (Extra class name) is skipped by the
   default-paint rules (b)+(c), so its OWN WPBakery Background color shows through.
   Use this when you want a custom row colour the sz-beige/white/onyx-row classes
   don't cover. (It does NOT defer to old leftover colours globally — that would
   resurface ~83 rows of #e6ecf3/#e8e8e8; this is opt-in per row only.) */

/* PAGES ONLY: `body:not(.single)` keeps the surface engine OFF single posts /
   CPTs (Graph Power Hour, press releases, blog posts, etc.) so they render their
   native white article background instead of the rebrand beige. body.single is
   present on every single post/CPT and never on pages/home/archives. */

/* (b) DEFAULT — every top-level row → beige (unless opted out via sz-custom-bg) */
body:not(.single) .vc_row:not(.inner_row):not(.sz-custom-bg) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--light-surface) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* (c) OVERRIDE — row contains a REAL image → white (and flip any grey box in it) */
body:not(.single) .vc_row:not(.inner_row):not(.sz-custom-bg):has(.column-image-bg, img:not(.nectar-text-inline-images__image):not([data-nectar-img-src$=".png" i]):not([src$=".png" i]):not([data-nectar-img-src*="logo" i]):not([src*="logo" i])) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--light-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
}
.vc_row:has(.column-image-bg, img:not(.nectar-text-inline-images__image):not([data-nectar-img-src$=".png" i]):not([src$=".png" i]):not([data-nectar-img-src*="logo" i]):not([src*="logo" i])) [style*="e8e8e8" i] {
  background-color: var(--light-bg) !important;
}

/* (d) OVERRIDE (wins) — light-headline rows → onyx, even if they have an image.
   #ajax-content-wrap (an ID) is required: rule (c)'s :has(img:not()...) chain
   reached ~(0,13,1) once PNG/logo exclusions were added, which out-specified a
   class-only (d) and whitened dark rows that contain an opaque photo (e.g. the
   /about/ "for Developers" row). An ID anchor gives (d) (1,..) so it always wins;
   everything we target lives inside #ajax-content-wrap (incl. global footer). */
/* sz-ember-feature self-excludes: it's an explicit opt-in field treatment that
   paints its OWN .row-bg background-image (§30b). These rows carry
   data-midnight="light" + a .row_col_wrap_12.light child, so without the
   :not(.sz-ember-feature) guard rule (d) would blank their field with
   `background-image: none` and win on specificity (both are #ajax-anchored). */
#ajax-content-wrap .vc_row:not(.inner_row):not(.sz-ember-feature)[data-midnight="light"] > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]),
#ajax-content-wrap .vc_row:not(.inner_row):not(.sz-ember-feature):has(> .row_col_wrap_12.light) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]) {
  background-color: var(--onyx-row) !important;   /* boss request: #251E1A (nav + footer keep obsidian) */
  background-image: none !important;
  opacity: 1 !important;
}

/* 31.9 — FOOTER NEVER-WHITE FLOOR.
   The footer is a Salient Global Section containing the Senzing logo <img>, so
   it matches the site-wide surface-engine normaliser rule (c) above —
   ":has(img...) → var(--light-bg)" (WHITE). Rule (c)'s :has(img) carries an
   ELEMENT in its specificity → (0,9,1), beating a class-only footer override
   (0,9,0). That's why earlier footer fixes lost: the row-bg was being painted
   white because the footer has a logo image, and the animated-gradient <canvas>
   only masked it where the canvas actually painted. We anchor on #ajax-content-wrap
   (an ID) so these win even after rule (c) inflated to ~(0,13,1) via its PNG/logo
   :not() chain; a class-only override would lose. Element-level floor backs it up. */
#ajax-content-wrap .vc_row.footer-section:not(.inner_row) > .row-bg-wrap .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--obsidian) !important;
  background-image: none !important;
  opacity: 1 !important;
}
#ajax-content-wrap .vc_row.footer-section { background-color: var(--obsidian); }

/* Animated-gradient rows that are NOT the footer (e.g. the partner-page SI/ISV
   "Partners" bands) are dark SECTIONS, not the footer — boss request: → #251E1A.
   The animated-gradient canvas uses color_1 #0F0D0C; the visible floor is .row-bg
   (that's how the footer floor works), so recolouring it shifts the band to
   #251E1A. Footer keeps obsidian via the rule above. */
#ajax-content-wrap .vc_row:not(.inner_row):not(.footer-section) > .row-bg-wrap.has-animated-gradient .row-bg:not(.using-bg-image):not([style*="background-image"]):not([style*="FD4D1F" i]):not([style*="F43014" i]) {
  background-color: var(--onyx-row) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* 31.9b — ANIMATED-GRADIENT ROWS ARE ALWAYS DARK.
   The Salient animated gradient (.row-bg-wrap.has-animated-gradient) is only
   ever used as a dark ember/obsidian backdrop, so any row carrying it gets an
   obsidian floor regardless of how data-midnight is flagged — same (0,9,2)
   escalation as the footer (covered by the 2nd selector above). NOTE: this does
   NOT fix sections whose only "animation" is a Lottie or img-with-animation
   (e.g. /knowledge-graph/, /risk-fraud-detection/ Lottie row) — those are
   tagged data-midnight="dark" (light section) and img-with-animation is used
   site-wide, so they can't be auto-darkened safely. Tag those rows with the
   sz-onyx-row Extra Class (now repaired in §31.7) to force them dark. */

/* 31.10 — FOOTER NAV TYPOGRAPHY.
   Smaller footer link text (nav columns + legal line) and tighter spacing
   between stacked nav items. Salient sets line-height:2 !important on the
   split-heading (.font_line_height_2px) and its children, so we override with
   an #ajax-content-wrap anchor + !important. The orange all-caps section
   headings are <h6 class="vc_custom_heading"> — NOT matched here — so their
   margins (the gaps between sections) stay larger. */
#ajax-content-wrap .footer-section .nectar-split-heading a {
  font-size: 14px !important;
}
#ajax-content-wrap .footer-section .nectar-split-heading.font_line_height_2px,
#ajax-content-wrap .footer-section .nectar-split-heading.font_line_height_2px * {
  line-height: 1.6 !important;
}


/* ── 32. HOME PAGE — RESTORE WHITE ALTERNATION + SMALLER LOGO CAROUSEL ──────
   Scoped to body.home (page-id-2) so nothing else on the site is affected.    */

/* 32.1 — WHITE ROW RESTORE.
   The home's body sections alternate beige (#f7f5f2) and white (#ffffff); the
   designer's intent is already inline on each row's .row-bg. The white sections
   used to get white from §31.8 rule (c) ("row has a real image → white"), but
   those sections are illustrated with PNGs, and rule (c) now excludes PNG/logo
   images (footer-fix session) — so they fell through to rule (b) → beige, and
   the page lost all its white (read as "beige + black, no alternation").
   Fix: on the home page, honor the inline #ffffff the row already carries.
   #ajax-content-wrap (ID) + body.home easily out-specifies rule (b) (0,7,0). */
body.home #ajax-content-wrap .vc_row:not(.inner_row) > .row-bg-wrap .row-bg[style*="ffffff" i] {
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* 32.2 — SMALLER LOGO CAROUSEL.
   Salient Flickity logo bar ("TRUSTED BY ENTERPRISES…"). Cells are sized by the
   element's Desktop Columns (8); we simply cap the logo image height so the
   logos — and therefore the whole band — read smaller. Centered within each
   cell. Dial: change 34px. */
body.home .nectar-flickity.nectar-carousel .img-with-aniamtion-wrap {
  text-align: center !important;
}
body.home .nectar-flickity.nectar-carousel .img-with-animation {
  max-height: 34px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: inline-block !important;
}
/* Tighten the gap between logos. NOTE: the authoritative gutter is the carousel
   element's "data-spacing" (30px) which Flickity reads at init — set that in the
   element (Carousel → spacing/gutter) for the cleanest result; this trims the
   per-cell padding as an immediate visual improvement. */
body.home .nectar-flickity.nectar-carousel .cell {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
/* Reduce the space below the logo bar. */
body.home .nectar-flickity.nectar-carousel.tb-spacing-20px {
  padding-bottom: 4px !important;
}


/* ── 33. FOOTER TOP RULE + CONTEXT-AWARE "LEARN MORE" ARROW BUTTONS ─────────── */

/* 33.1 — FOOTER TOP EMBER RULE.
   A 3px ember-gradient line across the very top of the global footer, matching
   the rule above the site nav — separates the footer from the section above it
   (especially dark ones).
   IMPLEMENTED AS border-top, NOT ::before: the footer is an animated-gradient
   row whose canvas/.row-bg paints over any pseudo-element regardless of z-index
   (tried z-index 50, still hidden). But an absolutely-positioned background
   (inset:0) covers only the PADDING box — never the border — so a border-top is
   always visible above the canvas. border-image keeps it the ember gradient;
   the solid #FF4E1F is the fallback if border-image isn't honored. */
/* DO NOT force width/100vw on .footer-section itself — that stretches the ROW
   and its CONTENT, which jams the footer columns to the screen edges (no margin)
   and opens a white gap above the footer. Only `position: relative` here, so the
   absolutely-positioned .row-bg-wrap can anchor to it. */
#ajax-content-wrap .footer-section {
  position: relative;
}
/* FULL-BLEED BACKGROUND + ORANGE RULE: the bg layer (.row-bg-wrap) is
   position:absolute, so widening IT to the full viewport does NOT affect the
   content column — content keeps its normal container margins. left:50% +
   margin-left:-50vw + width:100vw centres the bg edge-to-edge; the border-top
   (with border-image gradient) rides the top of that full-width bg. Border, not
   ::before, so the animated-gradient canvas (which only covers the padding box)
   can't paint over it. */
#ajax-content-wrap .footer-section > .row-bg-wrap {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  border-top: 3px solid #FF4E1F !important;
  border-image: linear-gradient(90deg, #FF4E1F 0%, #E8640A 45%, #F0920A 100%) 1 !important;
}

/* 33.2 — CONTEXT-AWARE ARROW BUTTONS ("LEARN MORE ›").
   Salient `.nectar-button.arrow-button` cards render with the ember gradient
   everywhere (§8). Per design: on LIGHT sections they should match the ghost /
   outline button (the .see-through style, §8 lines ~707) and drop the chevron;
   on DARK sections they keep the ember gradient. The reliable section hook is
   the TOP-LEVEL row's data-midnight: "dark" = light section (dark text). We
   only restyle inside data-midnight="dark" rows, so a button can never end up
   invisible (transparent + dark text) on a dark background — dark sections keep
   §8's gradient untouched. Scoped with :not(.inner_row) so an inner row's empty
   data-midnight can't trigger the outline inside a dark section. */
/* Salient has TWO arrow variants — `.arrow-button` (SDK use-case cards) and
   `.arrow-button-light` ("READ MORE" Explore-More cards). Treat identically.

   DEFAULT (any section): SOLID ember pill (#FF4E1F), WHITE text, centered, no
   chevron. Section-INDEPENDENT on purpose — dark sections flagged
   data-midnight="" (empty) were missed by the old data-midnight="light" rule,
   so §8's gradient (amber end = "too dark") leaked through. A flat default fixes
   that everywhere. Hover INVERTS → white bg, ember text.
   LIGHT sections (data-midnight="dark") override to the outline ghost below. */
#ajax-content-wrap .nectar-button.arrow-button,
#ajax-content-wrap .nectar-button.arrow-button-light {
  background: var(--ember-hot) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid var(--ember-hot) !important;
  text-shadow: none !important;
  padding-left: 36px !important;   /* symmetric L/R — neutralises the right-pad   */
  padding-right: 36px !important;  /* the now-hidden chevron left behind (centers) */
}
#ajax-content-wrap .nectar-button.arrow-button span,
#ajax-content-wrap .nectar-button.arrow-button-light span {
  color: #ffffff !important;
}
#ajax-content-wrap .nectar-button.arrow-button:hover,
#ajax-content-wrap .nectar-button.arrow-button-light:hover {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #ffffff !important;
  color: var(--ember-hot) !important;
}
#ajax-content-wrap .nectar-button.arrow-button:hover span,
#ajax-content-wrap .nectar-button.arrow-button-light:hover span {
  color: var(--ember-hot) !important;
}

/* LIGHT sections (data-midnight="dark") → outline ghost pill (overrides default).
   Hover fills ember with white text. */
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button,
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button-light {
  background: transparent !important;
  background-image: none !important;
  color: var(--light-text) !important;
  border: 1.5px solid var(--light-border) !important;
}
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button span,
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button-light span {
  color: var(--light-text) !important;
}
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button:hover,
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button-light:hover {
  border-color: var(--ember-hot) !important;
  background: var(--ember-hot) !important;
  color: #ffffff !important;
}
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button:hover span,
#ajax-content-wrap .vc_row:not(.inner_row)[data-midnight="dark"] .nectar-button.arrow-button-light:hover span {
  color: #ffffff !important;
}

/* Drop the › chevron on ALL arrow buttons site-wide (both variants). The "›" is
   the Salient has-icon <i>, NOT literal text — so a copy search/replace wouldn't
   remove it; this does. */
#ajax-content-wrap .nectar-button.arrow-button i,
#ajax-content-wrap .nectar-button.arrow-button-light i {
  display: none !important;
}


/* 33.3 — FOOTER SOCIAL ICONS.
   The footer social row is Salient `.nectar_icon` glyphs (senzing-icon font),
   set to data-color="accent-color" which renders them bright cyan. Recolor to
   WHITE on the dark footer with an ember hover. The glyph is the <i>'s ::before,
   which inherits `color` from the <i>; the <a> is an empty overlay link inside
   `.nectar_icon`, so hovering the wrapper triggers the hover state. */
#ajax-content-wrap .footer-section .nectar_icon i,
#ajax-content-wrap .footer-section .nectar_icon i::before {
  color: #ffffff !important;
}
#ajax-content-wrap .footer-section .nectar_icon:hover i,
#ajax-content-wrap .footer-section .nectar_icon:hover i::before {
  color: var(--ember-hot) !important;
}


/* ── 32. WHITE BAR ABOVE HERO (banner first-row margin) ─────────────────────
   main.css adds `margin-top: 40px !important` to the FIRST content row whenever
   the announcement banner is present (body.header-has-banner). A margin is
   transparent, so that 40px exposes the white page background as a bar above the
   hero — subtle on beige heroes, glaring on dark ones, present on every page
   with the banner. #header-space already reserves the header+banner height and
   each hero carries its own top padding, so this margin is just a white gap.
   Zero it (html-prefixed to outrank main.css's !important). */
html body.header-has-banner #ajax-content-wrap .container.main-content > .row > .wpb_row:first-child {
  margin-top: 0 !important;
}


/* ── 33. EVENTOZILLA CALENDAR FIREWALL (/senzing-event-calendar/) ───────────
   The event calendar page uses the EventoZilla plugin — a pixel-precise jQuery
   calendar that measures element geometry in JS at load and positions the
   month/year labels + mini-calendar from those measurements. The new theme's
   site-wide design-system resets bleed into the widget and break that math:
     • senzing-global.css  §0  `*{box-sizing:border-box;margin:0;padding:0}`
     • senzing-global.css §185 `section{padding: var(--space-2xl) 40px}` (=96px 40px)
   Border-box throws off the plugin's width/height math, and the bare `section`
   padding crushes the mini-calendar (built from <section>s) to ~86px and folds
   the year into the month's flow box — so EventoZilla lifts the month label by
   an inflated height and it overflows up onto the page title. The old theme had
   none of these resets, which is why the live site renders fine.
   Re-insulate the widget so it measures + lays out as the plugin intends. The
   numeric id (lbg_evento_NNNNN) is per-instance, so scope on the id prefix.
   MUST live in CSS (loads in <head> before the plugin's footer JS) — a runtime
   fix only flashes correct then reverts, because the JS already cached geometry. */
#ajax-content-wrap [id^="lbg_evento_"],
#ajax-content-wrap [id^="lbg_evento_"] *,
#ajax-content-wrap [id^="lbg_evento_"] *::before,
#ajax-content-wrap [id^="lbg_evento_"] *::after {
  box-sizing: content-box !important;
}

#ajax-content-wrap [id^="lbg_evento_"] section {
  padding: 0 !important;
}

/* keep the year out of the month's flow box so the month label measures its true
   height and EventoZilla positions it correctly (matches the live site) */
#ajax-content-wrap [id^="lbg_evento_"] .lbg_calendar [class*="curr-year"] {
  position: absolute !important;
  display: block !important;
  float: none !important;
}

/* the absolute year no longer reserves vertical space, so push the mini-calendar
   grid (weekday row + dates) down to clear the big "2026" label below it */
#ajax-content-wrap [id^="lbg_evento_"] .calendar-grid {
  margin-top: 55px !important;
}