/* ═══════════════════════════════════════════════════════════════════════════
   Bluvium v2 design system — sitewide
   Source: bluvium.com brand spec (Confluence) + index-v2 mockup.

   Cascade: this file is loaded LAST in <head>, after assets/style.css and any
   per-page inline <style> block. Selectors use compound forms (.btn.btn-p)
   and !important where needed to win against existing inline overrides that
   inherited the older teal-primary palette.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Brand spec palette (canonical names) */
  --bv-coral: #E8854A;
  --bv-coral-hover: #D67438;
  --bv-coral-deep: #B8602F;
  --bv-teal: #2D8A9C;
  --bv-teal-deep: #246B7A;
  --bv-cream: #F2EDE3;
  --bv-cream-cool: #ECE9E1;
  --bv-cream-card: #FBF8F2;
  --bv-cream-card-alt: #FFFFFF;
  --bv-navy: #0A1422;
  --bv-navy-warm: #122236;
  --bv-navy-deep: #07101C;
  --bv-text-near-black: #0D1B2A;
  --bv-text-cream-sub: #5A4F3F;
  --bv-text-cream-dim: rgba(13,27,42,0.55);
  --bv-text-white-soft: rgba(255,255,255,0.85);
  --bv-text-white-dim: rgba(255,255,255,0.55);
  --bv-border-navy: rgba(255,255,255,0.08);
  --bv-border-cream: rgba(13,27,42,0.10);

  --bv-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --bv-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Aliases used by per-page inline styles — re-point to v2 palette */
  --accent-coral: var(--bv-coral);
  --accent-coral-hover: var(--bv-coral-hover);
  --accent-coral-deep: var(--bv-coral-deep);
  /* Legacy --accent-teal was the primary accent in the old palette.
     Rebind to coral so any per-page inline style="color:var(--accent-teal)"
     or class rule resolves to v2 primary. True teal usages in v2 CSS use
     --bv-teal directly (data viz, before-state markers, ATTOM nested card). */
  --accent-teal: var(--bv-coral);
  --accent-teal-deep: var(--bv-teal-deep);
  --accent-teal-dark: var(--bv-coral-deep);
  --accent-teal-hover: var(--bv-coral-hover);
  --accent-teal-dark-hover: var(--bv-coral-deep);
  --bg-cream: var(--bv-cream);
  --bg-cream-card: var(--bv-cream-card);
  --bg-cream-card-alt: var(--bv-cream-card-alt);
  --bg-navy: var(--bv-navy);
  --bg-navy-warm: var(--bv-navy-warm);
  --bg-navy-deep: var(--bv-navy-deep);
  --bg-dark: var(--bv-navy);
  --bg-surface: var(--bv-navy-warm);
  --bg-light: var(--bv-cream);
  --text-near-black: var(--bv-text-near-black);
  --text-cream-sub: var(--bv-text-cream-sub);
  --text-cream-dim: var(--bv-text-cream-dim);
  --text-white: #FFFFFF;
  --text-white-soft: var(--bv-text-white-soft);
  --text-white-dim: var(--bv-text-white-dim);
  --text-muted: var(--bv-text-white-soft);
  --text-dark: var(--bv-text-near-black);
  --text-dark-sub: var(--bv-text-cream-sub);
  --border-dark: var(--bv-border-navy);
  --border-light: var(--bv-border-cream);
  --border-navy: var(--bv-border-navy);
  --border-cream: var(--bv-border-cream);

  /* Legacy variable name overrides */
  --navy: var(--bv-navy);
  --navy-mid: var(--bv-navy-warm);
  --navy-light: var(--bv-navy-warm);
  --blue: var(--bv-coral);
  --blue-light: var(--bv-coral-hover);
  --blue-faint: rgba(232,133,74,0.10);
  --teal: var(--bv-coral);
  --teal-dark: var(--bv-coral-deep);
  --off-white: var(--bv-cream);
  --gray-50: var(--bv-cream);
  --gray-100: rgba(13,27,42,0.06);
  --gray-200: rgba(13,27,42,0.10);
  --gray-300: rgba(255,255,255,0.78);
  --gray-500: rgba(255,255,255,0.55);
  --gray-700: rgba(255,255,255,0.40);
  --text: var(--bv-text-near-black);
  --text-mid: var(--bv-text-cream-sub);
  --text-light: var(--bv-text-cream-dim);

  /* Typography token aliases */
  --font-serif: var(--bv-serif);
  --font-sans: var(--bv-sans);
}

/* ─── BASE ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--bv-sans) !important;
  background: var(--bv-navy) !important;
  color: var(--bv-text-white-soft) !important;
  overflow-x: hidden !important;
}
html { overflow-x: hidden; }

/* ─── .fade DEFENSIVE FALLBACK ─────────────────────────────────────────
   Per-page IntersectionObserver adds .vis when an element scrolls into
   view. If the observer never fires (no JS, slow connection, print, SEO
   crawler, screen reader), force-reveal kicks in via inline script in
   nav.js at 1.5s. Rules below guarantee visible state. */
.fade.vis,
html.bv-force-reveal .fade,
html.no-js .fade {
  opacity: 1 !important;
  transform: none !important;
}
@media print {
  .fade { opacity: 1 !important; transform: none !important; }
}

/* ─── TYPOGRAPHY ───────────────────────────────────────────────────────── */
h1, h2, h3,
.title,
.s-title,
.hero h1,
.page-hero h1,
.testi-quote {
  font-family: var(--bv-serif) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.s-title { font-weight: 700; line-height: 1.2; }
h3 { font-weight: 600; line-height: 1.25; }
h4 { font-family: var(--bv-sans) !important; font-weight: 600; line-height: 1.3; }
.testi-quote { font-weight: 400; letter-spacing: 0; font-style: italic; }

/* These are <div> meta labels styled like headings in legacy markup — keep Inter */
.labs-card-name,
.svc-featured-proof-name,
.footer-col-title { font-family: var(--bv-sans) !important; }

.hero h1, .page-hero h1 { font-size: 64px !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; }
.title, .s-title { font-size: 36px !important; }

/* Hero highlight: legacy uses .hl span with gradient text — flip to flat coral */
.hero h1 .hl,
.hero h1 .hl-italic {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--bv-coral) !important;
  color: var(--bv-coral) !important;
}
.hero h1 .hl-italic { font-style: italic !important; }

/* Italic emphasis — em phrases inside section titles get the coral italic.
   Testimonial quote body is near-black italic (not coral); only an inner
   .testi-quote em (if used) gets coral. */
.title em,
.s-title em,
.s-title-white em,
.s-title-dark em,
.hero h1 em,
.page-hero h1 em,
h1 em, h2 em, h3 em {
  font-style: italic !important;
  color: var(--bv-coral) !important;
  -webkit-text-fill-color: var(--bv-coral) !important;
  background: none !important;
}
/* Testimonial quote: italic, near-black, NOT coral. Coral lives in the
   '"' quote-mark accent on .testi-card::before only. */
.testi-quote {
  font-style: italic !important;
  color: var(--bv-text-near-black) !important;
}
.testi-quote em {
  color: var(--bv-coral) !important;
  font-style: italic !important;
}
/* .ra-transition emphasis line italic but inherits surface text color
   (white on navy). Coral nodes inside the diagram already carry the load. */
.ra-transition {
  font-style: italic !important;
  color: var(--bv-text-white-soft) !important;
}
.title.light em { color: var(--bv-coral) !important; }
.title.light { color: #fff !important; }

/* Big stat numerals */
.hero-stat-val, .hero-stat-val span {
  font-family: var(--bv-serif) !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.hero-stat-val span { opacity: 0.6; }
.hero-stat-lbl { color: var(--bv-text-white-dim) !important; }

/* Body sub */
.sub { font-family: var(--bv-sans) !important; font-size: 18px !important; line-height: 1.55 !important; color: var(--bv-text-white-soft) !important; max-width: 640px; }
.sub.light { color: var(--bv-text-white-soft) !important; }
.s-sub-dark { color: var(--bv-text-cream-sub) !important; }

/* Inter family for everything that's not a heading */
.s-label, .s-sub, .hero-desc, .hero-eyebrow, .hero-tag, .hero-stat-lbl,
.btn, .nav-cta, .nav-link,
.labs-card-body, .labs-card-cta,
.svc-featured p, .svc-featured-link, .svc-featured-eyebrow,
.svc-featured-proof-label, .svc-featured-proof-desc, .svc-featured-proof-link,
.case-v2-tag, .case-v2 p, .case-v2-outcome, .case-v2-link, .case-v2-flow-label,
.testi-name, .testi-role,
.footer-tagline, .footer-link, .footer-copy, .footer-badge,
.ra-stage-label, .ra-stage-system, .ra-callout, .ra-caption, .ra-layer,
.seo-aeo p, .vertical-tag, .trust-badge,
.clients-lbl, .attom-rail-label, .attom-rail-presenter, .attom-rail-note, .attom-rail-cta a,
.ao-col h3, .ao-col p,
.svc-supporting-label,
.label, .breadcrumb, .back-link {
  font-family: var(--bv-sans) !important;
}

/* ─── EYEBROW (the brand furniture) ────────────────────────────────────── */
/* All eyebrow classes share the coral-text + coral-dot pattern. */
.label,
.s-label,
.s-label-teal,
.s-label-tealdark,
.svc-featured-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--bv-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--bv-coral) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}
.label::before,
.s-label::before,
.svc-featured-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--bv-coral) !important;
  flex-shrink: 0 !important;
}
.s-light .s-label,
.s-light .s-label-tealdark { color: var(--bv-coral) !important; }
.s-light .s-label::before { background: var(--bv-coral) !important; }
/* Teal exception: callout eyebrows nested inside cards on cream sections */
.label.teal,
.label.callout,
.attom-rail-label,
.svc-featured-proof-label {
  color: var(--bv-teal) !important;
}
.label.teal::before,
.label.callout::before { background: var(--bv-teal) !important; }

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-family: var(--bv-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  box-shadow: none !important;
}
/* Primary: filled coral. One per viewport rule. */
.btn.btn-p,
.btn.btn-t {
  background: var(--bv-coral) !important;
  color: var(--bv-navy) !important;
  border: 1px solid var(--bv-coral) !important;
}
.btn.btn-p:hover,
.btn.btn-t:hover {
  background: var(--bv-coral-hover) !important;
  border-color: var(--bv-coral-hover) !important;
  transform: translateY(-1px);
}
/* Nav CTA: SECONDARY treatment so the hero primary CTA stays the only
   filled-coral on first viewport. (Spec rule 3: one primary per viewport.) */
.nav-cta,
a.nav-cta,
.btn.nav-cta {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.nav-cta:hover,
a.nav-cta:hover,
.btn.nav-cta:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn.btn-o {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.btn.btn-o:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn.btn-ol {
  background: transparent !important;
  color: var(--bv-text-near-black) !important;
  border: 1px solid rgba(13,27,42,0.30) !important;
}
.btn.btn-ol:hover {
  background: rgba(13,27,42,0.04) !important;
  border-color: var(--bv-text-near-black) !important;
  color: var(--bv-text-near-black) !important;
}
.btn.btn-g {
  background: transparent !important;
  color: var(--bv-coral) !important;
  padding: 10px 0 !important;
  border: none !important;
}
.btn.btn-g:hover { color: var(--bv-coral-hover) !important; gap: 12px !important; }

/* .btn-cta legacy class on callouts — render as primary coral with navy text */
.btn-cta {
  background: var(--bv-coral) !important;
  color: var(--bv-navy) !important;
  border: 1px solid var(--bv-coral) !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-family: var(--bv-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.btn-cta:hover {
  background: var(--bv-coral-hover) !important;
  border-color: var(--bv-coral-hover) !important;
  color: var(--bv-navy) !important;
}

/* ─── NAV ─────────────────────────────────────────────────────────────── */
.nav { background: rgba(10,20,34,0.92) !important; backdrop-filter: blur(14px); }
.nav.scrolled { background: rgba(10,20,34,0.97) !important; }
.nav-link { color: var(--bv-text-white-soft) !important; }
.nav-link:hover, .nav-link.active { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
.hamburger span { background: #fff !important; }

/* ─── HERO ────────────────────────────────────────────────────────────── */
.hero { background: var(--bv-navy) !important; }
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px) !important;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, rgba(0,0,0,0.5) 55%, transparent 85%);
          mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, rgba(0,0,0,0.5) 55%, transparent 85%);
}
.hero-glow1 { background: radial-gradient(circle, rgba(232,133,74,0.025) 0%, transparent 70%) !important; }
.hero-glow2 { background: radial-gradient(circle, rgba(232,133,74,0.018) 0%, transparent 70%) !important; }

a.hero-eyebrow,
.hero .hero-eyebrow {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 100px !important;
  text-decoration: none !important;
}
a.hero-eyebrow:hover,
.hero .hero-eyebrow:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.50) !important;
}
.hero-eyebrow .hero-tag,
.hero .hero-tag { color: #fff !important; font-weight: 500 !important; letter-spacing: 0.08em !important; }
.hero-eyebrow .hero-dot,
.hero .hero-dot { background: var(--bv-coral) !important; animation: none !important; }

.hero-stats { border-top-color: rgba(255,255,255,0.07) !important; }

/* Hero side panel (legacy hv-card) */
.hero-visual { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.06) !important; }
.hv-title { color: var(--bv-coral) !important; font-family: var(--bv-sans) !important; letter-spacing: 0.08em !important; font-weight: 500 !important; }
.hv-card { background: var(--bv-navy-warm) !important; border-color: var(--bv-border-navy) !important; }
.hv-card:hover { border-color: rgba(232,133,74,0.30) !important; background: rgba(255,255,255,0.06) !important; }
.hv-card-val { color: #fff !important; }
.hv-card-val span { color: var(--bv-coral) !important; }
.hv-tag.tl { background: rgba(45,138,156,0.12) !important; color: var(--bv-teal) !important; }
.hv-tag.bl { background: rgba(232,133,74,0.12) !important; color: var(--bv-coral) !important; }
.hv-tag.wt { background: rgba(255,255,255,0.06) !important; color: var(--bv-text-white-soft) !important; }

/* ─── PAGE HERO (child pages) ─────────────────────────────────────────── */
.page-hero { background: var(--bv-navy) !important; }
.page-hero .hero-grid { background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px) !important; }
.page-hero .label { color: var(--bv-coral) !important; }
.page-hero h1 { color: #fff !important; }
.page-hero p { color: var(--bv-text-white-soft) !important; }

/* Default: child-page hero <em> is plain serif white, NOT italic coral.
   The italic-coral signature is reserved for the homepage hero +
   designated thesis pages (lead-to-cash, what-we-do) via body.bv-hero-emphasis.
   This kills the "every page has coral italic" pattern fatigue. */
.page-hero h1 em {
  font-style: normal !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
body.bv-hero-emphasis .page-hero h1 em {
  font-style: italic !important;
  color: var(--bv-coral) !important;
  -webkit-text-fill-color: var(--bv-coral) !important;
}

/* ─── CLIENT STRIP ─────────────────────────────────────────────────────── */
.clients { background: var(--bv-cream) !important; border-top: 1px solid var(--bv-border-cream) !important; border-bottom: 1px solid var(--bv-border-cream) !important; }
.clients-lbl { color: var(--bv-text-cream-sub) !important; }
.client-name { color: rgba(13,27,42,0.30) !important; }
.client-name:hover { color: rgba(13,27,42,0.55) !important; }
.client-logo { filter: grayscale(100%) opacity(0.55) !important; }
.client-logo:hover { filter: grayscale(0%) opacity(1) !important; }

/* ─── SECTION SHELLS ──────────────────────────────────────────────────── */
.s-dark { background: var(--bv-navy) !important; padding: 96px 0 !important; }
.s-light { background: var(--bv-cream) !important; color: var(--bv-text-cream-sub) !important; padding: 96px 0 !important; }
.s-surface { background: var(--bv-navy-warm) !important; padding: 96px 0 !important; }
.s-light h2, .s-light h3, .s-light h4 { color: var(--bv-text-near-black) !important; }
/* Navy callout cards embedded inside cream sections: white headings.
   These take precedence over the cream-section color rule above. */
.s-light .managed-callout h2,
.s-light .managed-callout h3,
.s-light .managed-callout h4,
.s-light .bv-on-navy h2,
.s-light .bv-on-navy h3,
.s-light .bv-on-navy h4 {
  color: #fff !important;
}
.s-light .managed-callout p,
.s-light .bv-on-navy p { color: var(--bv-text-white-soft) !important; }
.s-title-dark, .s-title-dark em { color: var(--bv-text-near-black) !important; }
.s-title-dark em { color: var(--bv-coral) !important; }
.s-title-white em { color: var(--bv-coral) !important; }

.services, .insights, .awards { background: var(--bv-cream) !important; padding: 96px 0 !important; }
.cases { background: var(--bv-cream-cool) !important; padding: 96px 0 !important; }
.why { background: var(--bv-navy) !important; padding: 96px 0 !important; }
.cta { background: var(--bv-navy) !important; padding: 96px 0 64px !important; }
.cta-bar { background: var(--bv-navy) !important; padding: 96px 0 !important; }
.content-section { padding: 96px 0 !important; }
.content-section.alt { background: var(--bv-cream) !important; }
.content-section.dark { background: var(--bv-navy) !important; }
.attom { background: var(--bv-cream) !important; padding: 96px 0 !important; }
.labs-section { background: var(--bv-navy-warm) !important; padding: 96px 0 !important; }
.seo-aeo {
  background: var(--bv-navy-warm) !important;
  border-top: 1px solid rgba(232,133,74,0.10) !important;
  border-bottom: 1px solid rgba(232,133,74,0.10) !important;
  padding: 56px 0 !important;
}
.seo-aeo p { color: var(--bv-text-white-soft) !important; }
.seo-aeo p strong { color: #fff !important; }

/* Section title color rules */
.services .title, .cases .title, .insights .title, .awards .title { color: var(--bv-text-near-black) !important; }
.why .title, .cta h2, .cta-bar h2 { color: #fff !important; }
.services .sub, .cases .sub, .insights .sub { color: var(--bv-text-cream-sub) !important; }
.why .sub, .cta p, .cta-bar p { color: var(--bv-text-white-soft) !important; }

/* ─── ATTOM PROOF (cream) ─────────────────────────────────────────────── */
.attom-body p { color: var(--bv-text-cream-sub) !important; }
.attom-rail { background: var(--bv-cream-card-alt) !important; border: 1px solid var(--bv-border-cream) !important; }
.attom-rail-label { color: var(--bv-teal) !important; }
.attom-rail-presenter { color: var(--bv-text-near-black) !important; }
.attom-rail-x { color: var(--bv-text-cream-dim) !important; }
.attom-rail-note { color: var(--bv-text-cream-sub) !important; border-bottom-color: var(--bv-border-cream) !important; }
.attom-rail-cta a { color: var(--bv-coral) !important; }

/* ─── BLUVIUM LABS — navy-surface variant (homepage) ──────────────────── */
.s-dark .labs-card,
.s-surface .labs-card,
.labs-section .labs-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bv-border-navy) !important;
  padding: 24px !important;
}
.s-dark .labs-card::before,
.s-surface .labs-card::before,
.labs-section .labs-card::before { background: var(--bv-coral) !important; width: 1px !important; }
.s-dark .labs-card:hover,
.s-surface .labs-card:hover,
.labs-section .labs-card:hover { border-color: rgba(255,255,255,0.18) !important; }
.s-dark .labs-card .labs-card-name,
.s-surface .labs-card .labs-card-name,
.labs-section .labs-card .labs-card-name { color: #fff !important; }
.s-dark .labs-card .labs-card-body,
.s-surface .labs-card .labs-card-body,
.labs-section .labs-card .labs-card-body { color: var(--bv-text-white-soft) !important; }
.s-dark .labs-card .labs-card-cta,
.s-surface .labs-card .labs-card-cta,
.labs-section .labs-card .labs-card-cta { color: #fff !important; opacity: 0.85; }
.s-dark .labs-card .labs-card-cta:hover,
.s-surface .labs-card .labs-card-cta:hover,
.labs-section .labs-card .labs-card-cta:hover { color: #fff !important; opacity: 1; }

/* ─── BLUVIUM LABS — cream-surface variant (/labs index) ──────────────── */
.s-light .labs-card {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid var(--bv-border-cream) !important;
  padding: 24px !important;
  box-shadow: 0 1px 0 rgba(13,27,42,0.03);
}
.s-light .labs-card::before { background: var(--bv-coral) !important; width: 1px !important; }
.s-light .labs-card:hover {
  border-color: var(--bv-border-cream) !important;
  box-shadow: 0 4px 18px rgba(13,27,42,0.06) !important;
  transform: translateY(-1px);
}
.s-light .labs-card .labs-card-name { color: var(--bv-text-near-black) !important; font-family: var(--bv-serif) !important; font-weight: 600 !important; font-size: 1.25rem !important; }
.s-light .labs-card .labs-card-body { color: var(--bv-text-cream-sub) !important; }
.s-light .labs-card .labs-card-cta { color: var(--bv-coral) !important; opacity: 1; font-weight: 500 !important; }
.s-light .labs-card .labs-card-cta:hover { color: var(--bv-coral-deep) !important; }

.labs-grid { gap: 24px !important; }

/* ─── ARCHITECTURE DIAGRAM (navy, inverted: coral=connected, teal=broken) */
.ra-panel { background: var(--bv-navy-warm) !important; border-color: var(--bv-border-navy) !important; }
.ra-stage-label { color: var(--bv-text-white-dim) !important; }
.ra-stage-system { color: var(--bv-text-white-dim) !important; }

.ra-panel-broken .ra-panel-title { color: var(--bv-teal) !important; }
.ra-panel-broken .ra-panel-dot { background: var(--bv-teal) !important; }
.ra-panel-broken .ra-stage-node,
.ra-panel-broken .ra-stage-node-hollow {
  background: transparent !important;
  border: 1.5px solid var(--bv-teal) !important;
  box-sizing: border-box !important;
}
.ra-panel-broken .ra-connector,
.ra-panel-broken .ra-connector-broken {
  background: none !important;
  border-top: 1.5px dashed rgba(45,138,156,0.55) !important;
  height: 0 !important;
}
.ra-panel-broken .ra-callout { background: rgba(45,138,156,0.06) !important; color: var(--bv-text-white-soft) !important; }
.ra-panel-broken .ra-callout svg { color: var(--bv-teal) !important; }

.ra-panel-connected .ra-panel-title { color: var(--bv-coral) !important; }
.ra-panel-connected .ra-panel-dot { background: var(--bv-coral) !important; }
.ra-panel-connected .ra-stage-node { background: var(--bv-coral) !important; }
.ra-panel-connected .ra-stage-node-start { background: var(--bv-coral-deep) !important; }
.ra-panel-connected .ra-connector { background: var(--bv-coral) !important; opacity: 0.7 !important; }
.ra-panel-connected .ra-callout { background: rgba(232,133,74,0.06) !important; color: var(--bv-text-white-soft) !important; }
.ra-panel-connected .ra-callout svg { color: var(--bv-coral) !important; }

.ra-layer {
  background: var(--bv-navy) !important;
  color: var(--bv-coral) !important;
  border: 1px solid var(--bv-coral) !important;
  font-weight: 500 !important;
}
.ra-caption { color: var(--bv-text-white-dim) !important; border-top-color: var(--bv-border-navy) !important; }
.ra-closing strong { color: #fff !important; }
.ra-closing p { color: var(--bv-text-white-soft) !important; }

/* ─── PRACTICES (cream) — wheelhouse + supporting grid ────────────────── */
.svc-featured {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid rgba(13,27,42,0.08) !important;
  box-shadow: 0 1px 0 rgba(13,27,42,0.03);
}
.svc-featured h3 { color: var(--bv-text-near-black) !important; }
.svc-featured p { color: var(--bv-text-cream-sub) !important; }
.svc-featured-link { color: var(--bv-coral) !important; }
.svc-featured-proof {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid var(--bv-border-cream) !important;
  position: relative;
  padding-left: 26px !important;
}
.svc-featured-proof::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--bv-teal);
}
.svc-featured-proof-label { color: var(--bv-teal) !important; }
.svc-featured-proof-name { color: var(--bv-text-near-black) !important; }
.svc-featured-proof-desc { color: var(--bv-text-cream-sub) !important; }
.svc-featured-proof-link { color: var(--bv-coral) !important; }

/* Industry chips + practice tags: text only, separated by middots.
   Spec rule 4: pill containers reserved for primary CTAs / active filters /
   status badges. Never for category labels. */
.verticals,
.practice-tags { gap: 0 !important; align-items: baseline !important; margin-top: 20px !important; flex-wrap: wrap; }
.vertical-tag,
.practice-tag {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--bv-coral) !important;
  font-family: var(--bv-sans) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0;
  border-radius: 0 !important;
}
.vertical-tag + .vertical-tag::before,
.practice-tag + .practice-tag::before {
  content: '·';
  display: inline-block;
  margin: 0 12px;
  color: rgba(13,27,42,0.30);
  font-weight: 400;
}

/* Beyond ARM — stripped grid, anchored by 01-05 serif numerals */
.svc-supporting-label { color: var(--bv-text-cream-sub) !important; }
.svc-supporting-grid { gap: 40px 32px !important; margin-top: 8px; counter-reset: practice; }
.svc-item-sm {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.svc-item-sm::before {
  display: block !important;
  position: static !important;
  counter-increment: practice;
  content: counter(practice, decimal-leading-zero);
  font-family: var(--bv-serif);
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  color: rgba(13,27,42,0.16) !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.02em !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  opacity: 1 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
}
.svc-item-sm h4 {
  color: var(--bv-text-near-black) !important;
  font-family: var(--bv-serif);
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 8px !important;
  line-height: 1.3;
}
.svc-item-sm p { color: var(--bv-text-cream-sub) !important; font-size: 0.92rem !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
.svc-item-sm a { color: var(--bv-coral) !important; font-weight: 500 !important; font-size: 0.85rem !important; text-decoration: none; }
.svc-item-sm a:hover { color: var(--bv-coral-deep) !important; }
@media (max-width: 1024px) { .svc-supporting-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .svc-supporting-grid { grid-template-columns: 1fr !important; gap: 28px !important; } }

/* ─── CASE STUDIES (homepage v2 grid) ─────────────────────────────────── */
.case-v2 { background: var(--bv-navy-warm) !important; border-color: var(--bv-border-navy) !important; padding: 24px !important; }
.case-v2 p { color: rgba(255,255,255,0.85) !important; }
.case-v2-tag { color: var(--bv-coral) !important; font-weight: 500 !important; }
/* Tertiary link/outcome inside navy card: inherit text color. Coral edge does the job. */
.case-v2-outcome { color: #fff !important; opacity: 0.85; border-top-color: var(--bv-border-navy) !important; }
.case-v2-link { color: #fff !important; opacity: 0.85; }
.case-v2-link:hover, .case-v2-outcome:hover { opacity: 1; }
.case-v2-flow-label,
.case-v2-flow-label-broken,
.case-v2-flow-label-fixed { color: #6B7785 !important; font-weight: 500 !important; letter-spacing: 0.08em !important; }
.case-v2-flow-dot-broken { border-color: var(--bv-teal) !important; background: transparent !important; }
.case-v2-flow-dot-filled { background: var(--bv-coral) !important; }
.case-v2-flow-dash { border-top-color: rgba(45,138,156,0.55) !important; }
.case-v2-flow-line { background: var(--bv-coral) !important; }
.cases-grid-v2 { gap: 24px !important; }
/* All case-study cards share a 1px coral left edge */
.card-conn::before { width: 1px !important; background: var(--bv-coral) !important; top: 0 !important; bottom: 0 !important; }
.card-conn::after { display: none !important; }

/* ─── CASE STUDIES (legacy index grid) ────────────────────────────────── */
.case {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid var(--bv-border-cream) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(13,27,42,0.03);
}
.case::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--bv-coral);
}
.case:hover {
  box-shadow: 0 4px 18px rgba(13,27,42,0.06) !important;
  transform: translateY(-1px);
}
.case-industry { color: var(--bv-coral) !important; font-family: var(--bv-sans) !important; font-weight: 500 !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; }
.case h3 { font-family: var(--bv-serif) !important; font-weight: 600 !important; color: var(--bv-text-near-black) !important; font-size: 1.05rem !important; }
.case p { color: var(--bv-text-cream-sub) !important; }
.case-link { color: var(--bv-coral) !important; }

/* ─── INSIGHTS GRID ───────────────────────────────────────────────────── */
.ins {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid var(--bv-border-cream) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(13,27,42,0.03);
}
.ins:hover {
  box-shadow: 0 4px 18px rgba(13,27,42,0.06) !important;
  transform: translateY(-1px);
}
.ins-img { background: var(--bv-navy) !important; }
.ins-img-pat { background-image: linear-gradient(rgba(232,133,74,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,133,74,0.04) 1px, transparent 1px) !important; }
.ins-img-ico { background: rgba(232,133,74,0.18) !important; border-color: rgba(232,133,74,0.32) !important; }
.ins-img-ico svg { color: var(--bv-coral) !important; }
.ins-cat { color: var(--bv-coral) !important; font-family: var(--bv-sans) !important; font-weight: 500 !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; }
.ins h3 { font-family: var(--bv-serif) !important; font-weight: 600 !important; color: var(--bv-text-near-black) !important; }
.ins-ex { color: var(--bv-text-cream-sub) !important; }
.ins-foot { color: var(--bv-text-cream-dim) !important; border-top-color: var(--bv-border-cream) !important; }

/* ─── SERVICES (cream surface, plain text grid) ───────────────────────── */
.srv {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.srv::after { display: none !important; }
.srv:hover { box-shadow: none !important; transform: none !important; border: none !important; }
.srv-icon { width: auto !important; height: auto !important; background: none !important; margin-bottom: 14px !important; }
.srv-icon svg { color: var(--bv-coral) !important; }
.srv h3 { font-family: var(--bv-sans) !important; font-size: 1.05rem !important; font-weight: 600 !important; color: var(--bv-text-near-black) !important; }
.srv p { color: var(--bv-text-cream-sub) !important; }
.srv-tags { display: none !important; }
.srv-link { color: var(--bv-coral) !important; font-weight: 500 !important; }

/* ─── WHY — navy-surface variant (homepage .why section) ──────────────── */
.s-dark .why-card,
.s-surface .why-card,
.why .why-card {
  background: var(--bv-navy-warm) !important;
  border: 1px solid var(--bv-border-navy) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
}
.s-dark .why-card::before,
.s-surface .why-card::before,
.why .why-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--bv-coral);
}
.s-dark .why-card:hover,
.s-surface .why-card:hover,
.why .why-card:hover { background: var(--bv-navy-warm) !important; border-color: rgba(255,255,255,0.18) !important; transform: none !important; }
.s-dark .why-card h3,
.s-dark .why-card h4,
.s-surface .why-card h3,
.s-surface .why-card h4,
.why .why-card h3,
.why .why-card h4 { color: #fff !important; font-family: var(--bv-serif) !important; font-weight: 600 !important; font-size: 1.2rem !important; }
.s-dark .why-card p,
.s-surface .why-card p,
.why .why-card p { color: var(--bv-text-white-soft) !important; }

/* ─── WHY — cream-surface variant (/careers Why Bluvium) ──────────────── */
.s-light .why-card {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid var(--bv-border-cream) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(13,27,42,0.03);
}
.s-light .why-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--bv-coral);
}
.s-light .why-card:hover {
  border-color: var(--bv-border-cream) !important;
  box-shadow: 0 4px 18px rgba(13,27,42,0.06) !important;
  transform: translateY(-1px);
}
.s-light .why-card h3,
.s-light .why-card h4 { color: var(--bv-text-near-black) !important; font-family: var(--bv-serif) !important; font-weight: 600 !important; font-size: 1.15rem !important; }
.s-light .why-card p { color: var(--bv-text-cream-sub) !important; }

.why-num { font-family: var(--bv-serif) !important; font-weight: 400 !important; font-size: 2.25rem !important; color: rgba(255,255,255,0.20) !important; letter-spacing: -0.02em !important; }
.s-light .why-num { color: rgba(13,27,42,0.16) !important; }
.why-accent { color: var(--bv-coral) !important; }
.why-grid-bg { display: none !important; }

/* ─── AWARDS ──────────────────────────────────────────────────────────── */
.award { background: var(--bv-cream-card-alt) !important; border-color: var(--bv-border-cream) !important; border-radius: 8px !important; }
.award-icon { background: rgba(232,133,74,0.10) !important; }
.award-icon svg { color: var(--bv-coral) !important; }
.award h4 { color: var(--bv-text-near-black) !important; font-family: var(--bv-sans) !important; }
.award span { color: var(--bv-text-cream-sub) !important; }

/* ─── TESTIMONIALS (cooler cream) ─────────────────────────────────────── */
section[aria-labelledby="testi-h"].s-light { background: var(--bv-cream-cool) !important; }
.testi-card {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid rgba(13,27,42,0.15) !important;
  box-shadow: 0 1px 0 rgba(13,27,42,0.04);
  padding: 56px 24px 24px 24px !important;
  position: relative;
}
.testi-card::before {
  content: '\201C' !important;
  position: absolute !important;
  top: 28px !important; left: 24px !important;
  font-family: var(--bv-serif) !important;
  font-size: 3.5rem !important; font-weight: 700 !important;
  color: var(--bv-coral) !important;
  line-height: 0.5 !important;
  width: auto !important; height: auto !important;
  background: none !important;
  border-radius: 0 !important;
}
.testi-card::after { display: none !important; }
.testi-grid { gap: 24px !important; }
.testi-quote { color: var(--bv-text-near-black) !important; }
.testi-name { color: var(--bv-text-near-black) !important; }
.testi-role { color: var(--bv-text-cream-sub) !important; }
.testi-author { border-top-color: var(--bv-border-cream) !important; }

/* ─── CTA / FINAL CTA ─────────────────────────────────────────────────── */
.cta-glow { background: radial-gradient(circle, rgba(232,133,74,0.05) 0%, transparent 70%) !important; }
.cta h2,
.cta-bar h2 { color: #fff !important; font-family: var(--bv-serif) !important; font-weight: 700 !important; }
.cta h2 span,
.cta h2 em,
.cta-bar h2 span,
.cta-bar h2 em {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--bv-coral) !important;
  color: var(--bv-coral) !important;
  font-style: italic !important;
}
.cta p, .cta-bar p { color: var(--bv-text-white-soft) !important; }
.cta .s-label, .cta .s-label-teal { color: var(--bv-text-white-dim) !important; }
.cta .s-label::before, .cta .s-label-teal::before { background: var(--bv-text-white-dim) !important; }

/* Trust badges (in CTA) */
.trust-badge {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--bv-text-white-soft) !important;
}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
.footer { background: var(--bv-navy-deep) !important; border-top-color: var(--bv-border-navy) !important; }
.footer-tagline { color: var(--bv-text-white-soft) !important; }
.footer-col-title { color: #fff !important; font-family: var(--bv-sans) !important; font-weight: 600 !important; }
.footer-link { color: var(--bv-text-white-soft) !important; }
.footer-link:hover { color: var(--bv-coral) !important; }
.footer-copy { color: var(--bv-text-white-dim) !important; }
.footer-badge {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--bv-text-white-soft) !important;
}
.footer-bottom { border-top-color: var(--bv-border-navy) !important; }
.footer-social a { background: rgba(255,255,255,0.04) !important; color: var(--bv-text-white-soft) !important; }
.footer-social a:hover { background: rgba(232,133,74,0.18) !important; color: #fff !important; }
.footer-top { border-bottom-color: var(--bv-border-navy) !important; }

/* ─── CHILD-PAGE CONTENT ──────────────────────────────────────────────── */
.text-content h2,
.text-content h3 {
  font-family: var(--bv-serif) !important;
  font-weight: 600 !important;
  color: var(--bv-text-near-black) !important;
  letter-spacing: -0.015em;
}
.text-content h2 { font-size: 1.6rem !important; }
.text-content p, .text-content li { color: var(--bv-text-cream-sub) !important; }
.text-content strong { color: var(--bv-text-near-black) !important; }
.text-content blockquote { border-left-color: var(--bv-coral) !important; background: var(--bv-cream) !important; }

/* Article content (insight subpages) */
.article h2 { font-family: var(--bv-serif) !important; font-weight: 600 !important; color: var(--bv-text-near-black) !important; }
.article p, .article li { color: var(--bv-text-cream-sub) !important; }
.article strong { color: var(--bv-text-near-black) !important; }
.article-meta { color: var(--bv-text-cream-dim) !important; border-bottom-color: var(--bv-border-cream) !important; }
.article a { color: var(--bv-coral) !important; }

/* Lifecycle steps */
.lifecycle-steps { gap: 32px !important; counter-reset: lcstep; }
.lc-step { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; text-align: left !important; }
.lc-step::after { display: none !important; }
.lc-step::before { counter-increment: lcstep; content: counter(lcstep, decimal-leading-zero); display: block; font-family: var(--bv-serif); font-size: 2.25rem; font-weight: 400; color: rgba(13,27,42,0.16); line-height: 1; margin-bottom: 14px; letter-spacing: -0.02em; }
.lc-step-num { display: none !important; }
.lc-step h3 { font-family: var(--bv-serif) !important; font-weight: 600 !important; color: var(--bv-text-near-black) !important; font-size: 1.05rem !important; }
.lc-step p { color: var(--bv-text-cream-sub) !important; }

/* Case meta tags — strip pill chrome to text + middot */
.case-meta { gap: 0 !important; align-items: baseline !important; flex-wrap: wrap; }
.case-meta-tag,
.case-meta-tag.industry {
  background: transparent !important;
  color: var(--bv-coral) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}
.case-meta-tag + .case-meta-tag::before {
  content: '·';
  display: inline-block;
  margin: 0 12px;
  color: rgba(13,27,42,0.30);
  font-weight: 400;
}

.srv-tag {
  background: transparent !important;
  color: var(--bv-coral) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
}

.breadcrumb { color: var(--bv-text-white-dim) !important; }
.breadcrumb a { color: var(--bv-text-white-soft) !important; }
.breadcrumb a:hover { color: #fff !important; }

.back-link { color: var(--bv-coral) !important; }
.back-link:hover { color: var(--bv-coral-hover) !important; }

/* Contact form */
.contact-info-item svg { color: var(--bv-coral) !important; }
.form-placeholder { background: var(--bv-cream-card-alt) !important; border: 1px solid var(--bv-border-cream) !important; border-radius: 12px !important; }

/* Contact form Submit button — coral primary, navy text, per spec.
   Belt-and-suspenders override for legacy .form-submit rules. */
.form-submit,
.contact-form button[type="submit"],
.contact-form-wrap button[type="submit"] {
  background: var(--bv-coral) !important;
  color: var(--bv-navy) !important;
  border: 1px solid var(--bv-coral) !important;
  border-radius: 8px !important;
  font-family: var(--bv-sans) !important;
  font-weight: 600 !important;
}
.form-submit:hover,
.contact-form button[type="submit"]:hover,
.contact-form-wrap button[type="submit"]:hover {
  background: var(--bv-coral-hover) !important;
  border-color: var(--bv-coral-hover) !important;
}
/* Form input focus uses coral, not legacy teal */
.form-input:focus { border-color: var(--bv-coral) !important; }

/* AO row (homepage adoption + outcomes) */
.ao-row { background: var(--bv-navy) !important; }
.ao-grid { border-top-color: var(--bv-border-navy) !important; }
.ao-col h3 { color: var(--bv-coral) !important; font-family: var(--bv-sans) !important; }
.ao-col p { color: var(--bv-text-white-soft) !important; }

/* Pain cards (ai-revenue-workflows, quote-to-cash, data-and-integrations,
   service-and-experience): hardcoded #E8695A left edge → brand coral #E8854A */
.pain-card { border-color: var(--bv-border-cream) !important; }
.pain-card::before { background: var(--bv-coral) !important; width: 1px !important; }
.s-dark .pain-card { background: var(--bv-navy-warm) !important; border-color: var(--bv-border-navy) !important; }
.s-dark .pain-card::before { background: var(--bv-coral) !important; width: 1px !important; }

/* lead-to-cash breakdown cards — off-brand #E8695A → brand coral #E8854A */
.breakdown-card-who {
  color: var(--bv-coral) !important;
  font-family: var(--bv-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
.breakdown-card { border-color: var(--bv-border-cream) !important; }
.breakdown-card::before { background: var(--bv-coral) !important; width: 1px !important; }
.s-dark .breakdown-card { background: var(--bv-navy-warm) !important; border-color: var(--bv-border-navy) !important; }
.s-dark .breakdown-card::before { background: var(--bv-coral) !important; width: 1px !important; }

/* Cookie banner override.
   Accept stays the primary action of the banner but demoted to coral text
   on transparent fill so it doesn't compete with the hero primary CTA on
   first viewport (rule 3: one filled-coral primary per viewport). */
#cookie-banner { background: var(--bv-navy-warm) !important; border-top-color: rgba(232,133,74,0.18) !important; }
#cookie-accept {
  background: transparent !important;
  color: var(--bv-coral) !important;
  border: 1px solid var(--bv-coral) !important;
  font-weight: 600 !important;
}
#cookie-accept:hover {
  background: var(--bv-coral) !important;
  color: var(--bv-navy) !important;
}
#cookie-decline {
  background: transparent !important;
  color: var(--bv-text-white-soft) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* ─── CASE-STUDIES INDEX (filters + cs-card + cs-featured) ────────────── */
/* Filter pills: inactive = navy text on transparent + 1px navy border 30%
   Active = coral fill, navy text. */
.filters { gap: 8px !important; }
.filter-btn {
  background: transparent !important;
  color: var(--bv-text-near-black) !important;
  border: 1px solid rgba(13,27,42,0.30) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: var(--bv-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.filter-btn:hover {
  background: rgba(13,27,42,0.04) !important;
  color: var(--bv-text-near-black) !important;
  border-color: var(--bv-text-near-black) !important;
}
.filter-btn.active {
  background: var(--bv-coral) !important;
  color: var(--bv-navy) !important;
  border-color: var(--bv-coral) !important;
}

/* Featured case study card (top of /case-studies). Type B navy on cream. */
.cs-featured {
  background: var(--bv-navy) !important;
  border: 1px solid var(--bv-border-navy) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  position: relative;
  overflow: hidden;
}
.cs-featured::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--bv-coral);
}
.cs-featured-tag { color: var(--bv-coral) !important; font-family: var(--bv-sans) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.08em !important; }
.cs-featured h3 { color: #fff !important; font-family: var(--bv-serif) !important; font-weight: 600 !important; }
.cs-featured p { color: var(--bv-text-white-soft) !important; }
.cs-featured-outcome { color: var(--bv-coral) !important; }
.cs-featured-link { color: var(--bv-coral) !important; }
/* Tech chips inside featured card: strip pill chrome to text + middot */
.cs-featured-techs { gap: 0 !important; align-items: baseline !important; flex-wrap: wrap; }
.cs-featured-tech {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--bv-text-white-soft) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  border-radius: 0 !important;
}
.cs-featured-tech + .cs-featured-tech::before {
  content: '·';
  display: inline-block;
  margin: 0 10px;
  color: rgba(255,255,255,0.30);
  font-weight: 400;
}

/* Featured stat blocks */
.cs-featured-stat {
  background: var(--bv-navy-warm) !important;
  border: 1px solid var(--bv-border-navy) !important;
  border-radius: 10px !important;
}
.cs-featured-stat-val { color: var(--bv-coral) !important; font-family: var(--bv-serif) !important; font-weight: 600 !important; }
.cs-featured-stat-lbl { color: var(--bv-text-white-soft) !important; }

/* Case study card (legacy .cs-card on cream) — Type A cream surface */
.cs-card {
  background: var(--bv-cream-card-alt) !important;
  border: 1px solid var(--bv-border-cream) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(13,27,42,0.03);
}
.cs-card::before {
  width: 1px !important;
  background: var(--bv-coral) !important;
}
.cs-card:hover {
  box-shadow: 0 4px 18px rgba(13,27,42,0.06) !important;
  transform: translateY(-1px);
}
.cs-card-tag { color: var(--bv-coral) !important; font-family: var(--bv-sans) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.08em !important; }
.cs-card h4 { color: var(--bv-text-near-black) !important; font-family: var(--bv-serif) !important; font-weight: 600 !important; }
.cs-card p { color: var(--bv-text-cream-sub) !important; }
.cs-card-client { color: var(--bv-text-cream-sub) !important; }
.cs-card-outcome { color: var(--bv-coral) !important; }
.cs-card-link { color: var(--bv-coral) !important; }
/* Tech chips inside cs-card: strip pill chrome to text + middot */
.cs-card-techs { gap: 0 !important; align-items: baseline !important; flex-wrap: wrap; }
.cs-card-tech {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--bv-text-cream-sub) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
}
.cs-card-tech + .cs-card-tech::before {
  content: '·';
  display: inline-block;
  margin: 0 10px;
  color: rgba(13,27,42,0.30);
  font-weight: 400;
}

/* Generic cta-section (legacy) — same as .cta */
.cta-section { background: var(--bv-navy) !important; padding: 96px 0 !important; }
.cta-section h2 { color: #fff !important; font-family: var(--bv-serif) !important; font-weight: 700 !important; }
.cta-section h2 em { color: var(--bv-coral) !important; font-style: italic !important; }
.cta-section p { color: var(--bv-text-white-soft) !important; }

/* ─── UTILITIES ───────────────────────────────────────────────────────── */
.bv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bv-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-coral);
}
.bv-eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bv-coral); flex-shrink: 0; }
.bv-eyebrow.teal { color: var(--bv-teal); }
.bv-eyebrow.teal::before { background: var(--bv-teal); }

/* ─── MOBILE BREAKPOINTS ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hide the desktop nav CTA on mobile/tablet — the .btn display:inline-flex
     in this stylesheet was preventing the legacy media query from hiding it,
     which caused horizontal overflow ("Salesforce Platform Diagnostic" too long). */
  .nav-cta { display: none !important; }
}
@media (max-width: 768px) {
  .hero h1, .page-hero h1 { font-size: 40px !important; line-height: 1.1 !important; }
  .title, .s-title { font-size: 28px !important; }
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .services, .why, .cases, .insights, .cta, .cta-bar,
  .content-section, .s-dark, .s-light, .s-surface,
  .attom, .labs-section { padding: 64px 0 !important; }
  .seo-aeo { padding: 48px 0 !important; }
  .awards { padding: 48px 0 !important; }
  .lifecycle-steps { gap: 28px !important; }
  .hero-stats { flex-wrap: wrap; gap: 20px !important; }
  .testi-grid, .cases-grid-v2, .labs-grid { gap: 20px !important; }
  .testi-card { padding: 48px 20px 20px 20px !important; }
  .case-v2 { padding: 20px !important; }
  /* Defensive: cap any element from forcing horizontal scroll */
  body { overflow-x: hidden !important; }
  .hero-glow1, .hero-glow2, .cta-glow { max-width: 100vw; }
  /* Long primary CTAs on mobile: allow wrap so they fit */
  .btn { white-space: normal !important; text-align: center; }
  /* CSS Grid tracks default to min-content sizing on children, which makes
     form inputs blow out the column. Allow grid items to shrink. */
  .contact-main > *,
  .contact-form-wrap,
  .form-row > *,
  .form-field,
  .form-input,
  .form-textarea,
  .form-select { min-width: 0 !important; max-width: 100% !important; }
  .contact-main, .form-row { min-width: 0 !important; }
  /* Same defensive pattern for any grid-based layout that may carry inputs. */
  main, section, .wrap { min-width: 0; }
  /* Lifecycle flow on lead-to-cash has 8 stages + connectors, won't fit
     <500px. Wrap to multiple rows and hide connectors for mobile. */
  .lifecycle-flow {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 16px !important;
    max-width: 100% !important;
  }
  .lifecycle-flow .lf-connector { display: none !important; }
  /* Two-column grids that need to collapse below the legacy 768 breakpoint */
  .breakdown-grid, .offices-grid, .form-row { grid-template-columns: 1fr !important; }
}
/* Tablet: collapse contact main and 3-column case grids below 1024 */
@media (max-width: 1024px) {
  .contact-main { grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-form-wrap { width: 100% !important; }
  .cases-grid-v2, .cs-grid, .testi-grid, .labs-grid, .srv-grid, .why-cards, .ins-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .cases-grid-v2, .cs-grid, .testi-grid, .labs-grid, .srv-grid, .why-cards, .ins-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .hero h1, .page-hero h1 { font-size: 36px !important; }
  .title, .s-title { font-size: 24px !important; }
}
