/*
 * brand.css , Vanwebdev brutalist brand source-of-truth.
 * Single governing stylesheet. Replaces the dead Command-Grade dark theme
 * (navy / cyan / amber / Inter Tight) that previously lived in WP Custom CSS.
 *
 * Locked brand palette (2026-05-10):
 *   near-black     #0d0d0d
 *   concrete-white #f5f5f0
 *   signal red     #b5281c
 *   graphite       #3a3a3a
 * Type: IBM Plex Mono / Courier Prime for display labels, Inter for body.
 * Brutalist: no gradients, no glow, no rounded corners, heavy borders.
 */

/* ===================================================================
   1. Brand tokens , remap the dead --vw-* vars to brand values so any
      surviving reference resolves to brand colours instead of navy/cyan.
   =================================================================== */
:root {
  --vw-bg: #0d0d0d;
  --vw-surface: #1a1a1a;
  --vw-border: #3a3a3a;
  --vw-muted: #8a8a85;
  --vw-text: #f5f5f0;
  --vw-heading: #f5f5f0;
  --vw-accent-cyan: #b5281c;   /* cyan killed , now signal red */
  --vw-accent-amber: #b5281c;  /* amber killed , now signal red */
  --vw-red: #b5281c;
  --vw-red-dark: #8c1e15;
  --vw-near-black: #0d0d0d;
  --vw-concrete: #f5f5f0;
  --vw-graphite: #3a3a3a;

  /* Mono display stack (loaded font is monospace fallback; brand mono = Plex/Courier) */
  --vw-mono: 'IBM Plex Mono', 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vw-body-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===================================================================
   2. Kadence 9 + slot global palette remapped to the brand ramp.
      Blocks reference these via var(--global-paletteN) and the classes
      has-theme-palette-N-color / -background-color.
      palette8 -> concrete-white is the hero-subhead contrast fix:
      the hero subhead uses has-theme-palette-8-color on a dark hero.
   =================================================================== */
:root {
  --global-palette1: #b5281c;   /* primary accent , signal red */
  --global-palette2: #8c1e15;   /* secondary accent , darker red */
  --global-palette3: #0d0d0d;   /* darkest / heading text */
  --global-palette4: #1a1a1a;   /* strong text / lifted near-black */
  --global-palette5: #3a3a3a;   /* graphite mid */
  --global-palette6: #cfcfc8;   /* subtle border */
  --global-palette7: #e8e8e2;   /* light bg */
  --global-palette8: #f5f5f0;   /* concrete-white surface / light-on-dark text */
  --global-palette9: #ffffff;   /* white */
  --global-palette10: #ffffff;
}

/* ===================================================================
   3. Global base , kill the dead navy body + Inter Tight.
   =================================================================== */
html,
body {
  background: #0d0d0d;
  color: #f5f5f0;
  font-family: var(--vw-body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: concrete-white by default (dark page). Light sections re-state below. */
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .wp-block-heading {
  font-family: var(--vw-body-font);
  color: #f5f5f0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Mono display labels / eyebrows / menu headings per brand spec. */
.kt-blocks-info-box-title,
.wp-block-kadence-iconlist .kt-svg-icon-list-item-text,
.vw-eyebrow,
.kadence-blocks-form-field label {
  font-family: var(--vw-mono);
  letter-spacing: 0.08em;
}

/* Code stays mono on a dark slab. */
code, pre, kbd, samp, .wp-block-code, .wp-block-preformatted {
  font-family: var(--vw-mono);
  font-size: 0.92em;
  background: #1a1a1a;
  color: #f5f5f0;
  border: 1px solid #3a3a3a;
  border-radius: 0;
  padding: 0.15em 0.4em;
}
pre code { border: 0; padding: 0; background: transparent; }

/* ===================================================================
   4. Links , signal red, brutalist (no rounding, sharp hover).
   =================================================================== */
a {
  color: #b5281c;
  text-decoration: none;
  transition: color .15s ease;
}
a:hover {
  color: #8c1e15;
}

/* ===================================================================
   5. Site identity + header chrome (dark register).
   =================================================================== */
.site-title a {
  font-family: var(--vw-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f5f5f0;
}
.site-title a::after { content: "."; color: #b5281c; }

.site-header,
.site-header-row-container,
#masthead {
  background: #0d0d0d;
  border-bottom: 1px solid #3a3a3a;
}
.site-header.site-header-active-scroll,
.site-header-sticky-active {
  background: #0d0d0d;
  border-bottom: 1px solid #3a3a3a;
}

/* Header CTA button , solid signal red, square. */
.site-header-row .site-header-item .header-button,
.header-button.button {
  background: #b5281c;
  color: #f5f5f0;
  border: 0;
  border-radius: 0;
  padding: 0.7rem 1.5rem;
  font-family: var(--vw-body-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: background .15s ease;
}
.site-header-row .site-header-item .header-button:hover,
.header-button.button:hover {
  background: #8c1e15;
  color: #f5f5f0;
}

/* Primary nav links , concrete-white on the dark header, red on hover. */
.header-navigation .menu > li > a {
  color: #f5f5f0;
  font-family: var(--vw-body-font);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.header-navigation .menu > li > a:hover { color: #b5281c; }

/* ===================================================================
   6. Buttons , square, mono-adjacent, signal red fill / ghost.
   =================================================================== */
.wp-block-button__link,
.kadence-blocks-btn-link,
button, input[type="submit"], .button {
  font-family: var(--vw-body-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0;
}
.vw-cta-primary, .button.cta-primary,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: #b5281c;
  color: #f5f5f0;
  padding: 1rem 2rem;
  border: 0;
}
.vw-cta-primary:hover, .button.cta-primary:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: #8c1e15;
  color: #f5f5f0;
}
.vw-cta-ghost, .button.cta-ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #f5f5f0;
  border: 1px solid #3a3a3a;
  padding: 1rem 2rem;
}
.vw-cta-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: #b5281c;
  color: #b5281c;
}

/* ===================================================================
   7. Contrast enforcement for row-layout sections (catch rogue blocks).
      Kadence emits has-theme-palette-N-background-color on the inner wrap.
      Dark slabs -> concrete-white text; light slabs -> near-black text.
   =================================================================== */

/* Dark slabs (near-black, lifted-black, graphite backgrounds). */
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette3-background-color,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette4-background-color,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette5-background-color,
.wp-block-kadence-column .kt-inside-inner-col.has-theme-palette3-background-color,
.wp-block-kadence-column .kt-inside-inner-col.has-theme-palette4-background-color {
  color: #f5f5f0;
}
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette3-background-color h1,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette3-background-color h2,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette3-background-color h3,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette4-background-color h1,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette4-background-color h2,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette4-background-color h3 {
  color: #f5f5f0;
}

/* Light / concrete slabs -> near-black text + headings. */
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette7-background-color,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette8-background-color,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette9-background-color,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette10-background-color {
  color: #0d0d0d;
}
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette7-background-color h1,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette7-background-color h2,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette7-background-color h3,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette8-background-color h1,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette8-background-color h2,
.wp-block-kadence-rowlayout .kt-row-layout-inner.has-theme-palette8-background-color h3 {
  color: #0d0d0d;
}

/* The site-content default canvas is the dark register. */
.content-bg, .content-area, #primary, .site-content {
  background: transparent;
}

/* ===================================================================
   8. Surfaces / cards , square, heavy graphite border.
   =================================================================== */
.kadence-blocks-row-layout-wrap[data-vw-card], .vw-card {
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-radius: 0;
  padding: 2rem;
}

/* ===================================================================
   9. Forms , dark fields, red focus.
   =================================================================== */
input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="search"], textarea, select {
  background: #1a1a1a;
  color: #f5f5f0;
  border: 1px solid #3a3a3a;
  border-radius: 0;
  font-family: var(--vw-body-font);
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: #b5281c;
  box-shadow: 0 0 0 2px rgba(181, 40, 28, 0.3);
}

/* ===================================================================
   10. Tables.
   =================================================================== */
table { border-collapse: collapse; width: 100%; }
table th, table td { border: 1px solid #3a3a3a; padding: 0.5rem 0.75rem; }
table th { background: #1a1a1a; color: #f5f5f0; text-align: left; }

/* ===================================================================
   11. Selection + scrollbar , brand red, square thumb.
   =================================================================== */
::selection { background: #b5281c; color: #f5f5f0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #b5281c; }

/* ===================================================================
   12. Footer brutalist register , preserved verbatim from Wave 2.0.
        The operator confirmed this section looks correct; do not regress.
   =================================================================== */
#colophon .footer-top,
#colophon .footer-middle,
#colophon .footer-bottom {
  font-family: 'Inter', sans-serif;
}
#colophon .widget-title,
#colophon .footer-widget-area h2,
#colophon .footer-widget-area h3,
#colophon .footer-widget-area h4 {
  font-family: 'Courier Prime', 'IBM Plex Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  margin: 0 0 18px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #3a3a3a !important;
}
#colophon .footer-widget-area .menu,
#colophon .footer-widget-area ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#colophon .footer-widget-area .menu li,
#colophon .footer-widget-area ul li {
  padding: 4px 0 !important;
  border: 0 !important;
}
#colophon .footer-widget-area .menu li a,
#colophon .footer-widget-area ul li a {
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: 0 !important;
  display: inline-block !important;
}
#colophon .footer-widget-area .menu li a:hover,
#colophon .footer-widget-area ul li a:hover {
  color: #c8102e !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
#colophon .vw-footer-cta h4 {
  font-family: 'Courier Prime', 'IBM Plex Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #3a3a3a !important;
}
#colophon .vw-footer-cta p {
  margin: 0 0 16px 0 !important;
}
#colophon .vw-footer-cta a {
  display: inline-block !important;
  background: #1a1a1a !important;
  color: #f5f5f0 !important;
  padding: 12px 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  letter-spacing: 0.04em !important;
}
#colophon .vw-footer-cta a:hover {
  background: #c8102e !important;
  border-color: #c8102e !important;
  color: #f5f5f0 !important;
}
#colophon .footer-social-wrap {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
#colophon .footer-social-inner-wrap .social-button {
  border-radius: 0 !important;
}
#colophon .footer-html {
  width: 100% !important;
}
#colophon .vw-footer-bottom-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #3a3a3a !important;
}
@media (max-width: 767px) {
  #colophon .vw-footer-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* ============================================================
   CONTRAST GUARD v2 (2026-05-28) , light sections force dark text.
   Kadence bg class = .has-theme-paletteN-background-color (NO hyphen before N).
   Text class       = .has-theme-palette-N-color (hyphen before N).
   A light bg (palette 6/7/8/9) must never carry light text (palette 8/9/10).
   ============================================================ */
.has-theme-palette6-background-color :where(p,li,blockquote,figcaption,cite,dd,dt,td,th,address),
.has-theme-palette7-background-color :where(p,li,blockquote,figcaption,cite,dd,dt,td,th,address),
.has-theme-palette8-background-color :where(p,li,blockquote,figcaption,cite,dd,dt,td,th,address),
.has-theme-palette9-background-color :where(p,li,blockquote,figcaption,cite,dd,dt,td,th,address) { color:#0d0d0d; }


.has-theme-palette6-background-color .has-theme-palette-8-color,
.has-theme-palette6-background-color .has-theme-palette-9-color,
.has-theme-palette6-background-color .has-theme-palette-10-color,
.has-theme-palette7-background-color .has-theme-palette-8-color,
.has-theme-palette7-background-color .has-theme-palette-9-color,
.has-theme-palette7-background-color .has-theme-palette-10-color,
.has-theme-palette8-background-color .has-theme-palette-8-color,
.has-theme-palette8-background-color .has-theme-palette-9-color,
.has-theme-palette8-background-color .has-theme-palette-10-color,
.has-theme-palette9-background-color .has-theme-palette-8-color,
.has-theme-palette9-background-color .has-theme-palette-9-color,
.has-theme-palette9-background-color .has-theme-palette-10-color { color:#0d0d0d !important; }

.has-theme-palette6-background-color :where(h1,h2,h3,h4,h5,h6):not([class*="-background-color"]),
.has-theme-palette7-background-color :where(h1,h2,h3,h4,h5,h6):not([class*="-background-color"]),
.has-theme-palette8-background-color :where(h1,h2,h3,h4,h5,h6):not([class*="-background-color"]),
.has-theme-palette9-background-color :where(h1,h2,h3,h4,h5,h6):not([class*="-background-color"]) { color:#0d0d0d !important; }

.has-theme-palette6-background-color .vw-eyebrow,
.has-theme-palette7-background-color .vw-eyebrow,
.has-theme-palette8-background-color .vw-eyebrow,
.has-theme-palette9-background-color .vw-eyebrow { color:#b5281c !important; }

/* Symmetric guard: dark bg (palette 3/4/5) never carries dark text (palette 3/4) */
.has-theme-palette3-background-color .has-theme-palette-3-color,
.has-theme-palette3-background-color .has-theme-palette-4-color,
.has-theme-palette4-background-color .has-theme-palette-3-color,
.has-theme-palette4-background-color .has-theme-palette-4-color,
.has-theme-palette5-background-color .has-theme-palette-3-color { color:#f5f5f0 !important; }

/* ============================================================
   HEADING WRAP FIX (2026-06-02) — kill mid-word shattering on
   Kadence advanced-headings sat in narrow columns. Kadence parent
   sets word-break:break-word; in narrow 2-col rowlayouts the heading
   column gets ~220-290px which shatters "engagements" mid-word.
   Restore normal whole-word wrapping, allow proper soft-hyphenation.
   ============================================================ */
.wp-block-kadence-advancedheading,
.kt-adv-heading-text {
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* H2 font cap for narrow-column home headings (FLAGSHIP PRODUCTS, CONTENT HUBS).
   These sit in a 220-290px left column at desktop. At 42px the word
   "engagements" shatters. Cap at 28px so longest word fits whole-word. */
.kt-adv-heading-home-prod-h2,
.kt-adv-heading-home-hubs-h2,
.kt-adv-heading-home-svc-h2 {
  font-size: 28px !important;
  line-height: 1.15 !important;
}
@media (max-width: 768px) {
  .kt-adv-heading-home-prod-h2,
  .kt-adv-heading-home-hubs-h2,
  .kt-adv-heading-home-svc-h2 { font-size: 26px !important; }
}

/* Hero H1 responsive cap — wireframe spec [56,44,32] not being honoured; H1
   renders at 80px even on 390px mobile, shattering "Intelligence" mid-word.
   Cap at 56/44/32 per the original spec. */
.kt-adv-heading-home-hero-h1 { font-size: 56px !important; line-height: 1.1 !important; }
@media (max-width: 1024px) { .kt-adv-heading-home-hero-h1 { font-size: 44px !important; } }
@media (max-width: 600px)  { .kt-adv-heading-home-hero-h1 { font-size: 32px !important; } }

/* ============================================================
   CARD TREATMENT (2026-06-02) — full brutalist card style for
   the rebuilt homepage section cards (vw-card on each column).
   ============================================================ */
.vw-card {
  border: 1px solid var(--vw-graphite, #3a3a3a);
  padding: 24px 20px;
  background: transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Light-section cards: hover tints near-white slightly darker */
.has-theme-palette7-background-color .vw-card,
.has-theme-palette8-background-color .vw-card,
.has-theme-palette9-background-color .vw-card {
  background: rgba(255,255,255,0.5);
}
.has-theme-palette7-background-color .vw-card:hover,
.has-theme-palette8-background-color .vw-card:hover,
.has-theme-palette9-background-color .vw-card:hover {
  background: rgba(13,13,13,0.04);
  border-color: var(--vw-red, #b5281c);
}
/* Dark-section cards: hover tints near-black slightly lighter */
.has-theme-palette3-background-color .vw-card,
.has-theme-palette4-background-color .vw-card {
  background: rgba(255,255,255,0.02);
}
.has-theme-palette3-background-color .vw-card:hover,
.has-theme-palette4-background-color .vw-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--vw-red, #b5281c);
}
/* Card link affordance ("Read") at bottom */
.vw-card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--vw-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vw-red, #b5281c) !important;
  text-decoration: none;
  border-top: 1px solid var(--vw-graphite, #3a3a3a);
}
.vw-card-link::after { content: " \2192"; }
.vw-card:hover .vw-card-link { color: var(--vw-near-black, #0d0d0d) !important; }
.has-theme-palette3-background-color .vw-card:hover .vw-card-link,
.has-theme-palette4-background-color .vw-card:hover .vw-card-link { color: var(--vw-concrete, #f5f5f0) !important; }
/* Section-intro paragraph (the centered short intro under the H2) */
.vw-section-intro {
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--vw-graphite, #3a3a3a);
}
.has-theme-palette3-background-color .vw-section-intro,
.has-theme-palette4-background-color .vw-section-intro { color: rgba(245,245,240,0.78); }