/* ==========================================================================
   UNIBRIGHT SOLUTIONS — BRAND OVERRIDE
   Source: brand template.pptx (every slide audited)
   ==========================================================================

   PPT BRAND PALETTE (every slide audited)
   -------------------------------------------------------------------------
   Dark family (backgrounds, navy text):
     #05053E  primary dark         #0B0B2E  off-deep
     #111133  secondary dark        #1A1547  deep violet-navy
     #1A1A4D  tertiary dark         #25255F  lighter navy
     #2D1F70  violet-tinted dark    #2F2F75  steel navy
     #3B3B8C  blue-navy

   Violet family (primary accent + variants):
     #7B61FF  primary accent
     #846BFF  #8B72FF  #8C75FF  #937CFF  #957FFF  #9B85FF
     #9D7BFF  #9E89FF  #A38FFF  #A793FF  #A893FF
     #AA98FF  #AC95FF  #AF9DFF  #B2A2FF
     #B8A7FF  primary lighter violet

   Lavender family (very light accents):
     #BAABFF  #C2B5FF  #D1C7FF  #D8D8FF  #E6E2FF

   Soft tints:
     #DDE1F7  soft border / card background
     #F5F6FF  off-white tint

   Muted text on dark: #A8AED0
   White: #FFFFFF

   FONTS (every slide):
     Headings   : Space Grotesk (weights 500-800)
     Body / UI  : Inter (weights 300-700)
     Fallback   : Calibri, system-ui

   PPT SIZE SCALE (sz=value÷100 = pt; web px ≈ pt × 1.33):
     sz=600  → 6pt  → 11px   (micro labels)
     sz=700  → 7pt  → 13px   (eyebrow tag, h6)
     sz=800  → 8pt  → 14px   (small body)
     sz=900  → 9pt  → 15px   (body)
     sz=1100 → 11pt → 18px   (body large)
     sz=1200 → 12pt → 20px   (subhead)
     sz=1400 → 14pt → 22px
     sz=1500 → 15pt → 24px
     sz=1800 → 18pt → 28px   (h3)
     sz=2100 → 21pt → 32px   (h2)
     sz=2700 → 27pt → 40px
     sz=3000 → 30pt → 44px   (h1 section)
     sz=4500 → 45pt → 60px   (banner h1)
     sz=5400 → 54pt → 72px   (huge hero)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   1. BRAND TOKENS + REMAP OF EXISTING THEME VARIABLES
   Every existing page declares its own --navy, --cyn, --gold etc. in its
   inline <style>. We override those NAMES at :root with brand values so
   every `var(--cyn)` already in the codebase silently inherits the brand
   palette without touching individual page templates.
   -------------------------------------------------------------------------- */
:root,
body {
    /* ===== PPT brand tokens — every value verified in slide xml ===== */
    /* Dark family */
    --brand-bg-deep:  #05053E !important;  /* primary slide bg */
    --brand-bg-2:     #111133 !important;  /* secondary dark */
    --brand-bg-3:     #1A1A4D !important;  /* tertiary */
    --brand-bg-4:     #25255F !important;
    --brand-bg-5:     #3B3B8C !important;
    --brand-bg-ink:   #0B0B2E !important;
    --brand-bg-violet:#2D1F70 !important;

    /* Violet family */
    --brand-violet:   #7B61FF !important;  /* primary accent */
    --brand-violet-1: #846BFF !important;
    --brand-violet-2: #8B72FF !important;
    --brand-violet-3: #9D7BFF !important;
    --brand-violet-4: #B8A7FF !important;  /* light accent */
    --brand-violet-5: #C2B5FF !important;

    /* Lavender family */
    --brand-lavender:    #D8D8FF !important;
    --brand-lavender-2:  #E6E2FF !important;

    /* Soft tints */
    --brand-soft:     #F5F6FF !important;
    --brand-soft-2:   #DDE1F7 !important;

    --brand-muted:    #A8AED0 !important;
    --brand-white:    #FFFFFF !important;

    /* PPT FONTS */
    --brand-font-h:   'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --brand-font:     'Inter', 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;

    /* ── Remap reference-page tokens (page-ai-sales-agent-b2b.php etc.) ── */
    --navy:       #05053E !important;
    --navy2:      #111133 !important;
    --navy-2:     #111133 !important;
    --navy-3:     #1A1A4D !important;
    --dark:       #05053E !important;
    --muted:      #05053Ea6 !important;
    --offwhite:   #F5F6FF !important;
    --light:      #DDE1F7 !important;

    --gold:       #B8A7FF !important;
    --gold2:      #7B61FF !important;
    --gold-lt:    #D8D8FF !important;

    --cyn:        #7B61FF !important;
    --cyn2:       #B8A7FF !important;
    --cyn3:       #D8D8FF !important;
    --cyn4:       #DDE1F7 !important;
    --cyn5:       #F5F6FF !important;

    --ind:        #05053E !important;
    --ind2:       #111133 !important;
    --ind3:       #7B61FF !important;

    --grn:        #7B61FF !important;
    --grn2:       #B8A7FF !important;
    --grn3:       #D8D8FF !important;

    /* Header / single-service tokens */
    --accent:     #7B61FF !important;
    --lavender:   #D8D8FF !important;
    --lav-dim:    rgba(123, 97, 255, 0.12) !important;
    --lav-border: rgba(216, 216, 255, 0.22) !important;
    --white:      #FFFFFF !important;
    --off-white:  #F5F6FF !important;
    --text-body:  #05053E !important;
    --text-muted: #6C6C8E !important;

    /* UniBright header variables */
    --ub-navy:        #05053E !important;
    --ub-navy-deep:   #05053E !important;
    --ub-navy-light:  #111133 !important;
    --ub-gold:        #7B61FF !important;
    --ub-gold-light:  #B8A7FF !important;
    --ub-gold-dark:   #5b46d6 !important;
    --ub-purple:      #7B61FF !important;
    --ub-purple-light:#B8A7FF !important;
    --ub-white:       #FFFFFF !important;
    --ub-light:       #D8D8FF !important;
    --ub-border:      rgba(123, 97, 255, 0.18) !important;
    --ub-gradient-gold:   linear-gradient(135deg, #7B61FF 0%, #B8A7FF 100%) !important;
    --ub-gradient-purple: linear-gradient(135deg, #7B61FF 0%, #B8A7FF 100%) !important;
    --ub-gradient-navy:   linear-gradient(135deg, #05053E 0%, #111133 100%) !important;

    /* Generic font var used in inline styles */
    --font: 'Inter', 'Space Grotesk', system-ui, sans-serif !important;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY (PPT)
   Headings  → Space Grotesk
   Body / UI → Inter
   Fallback  → Calibri, system-ui
   -------------------------------------------------------------------------- */
body,
body.sdp-wrap, .sdp-wrap,
p, li, td, th, span, label, input, textarea, select, button, blockquote, address {
    font-family: 'Inter', 'Space Grotesk', Calibri, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.sdp-wrap h1, .sdp-wrap h2, .sdp-wrap h3, .sdp-wrap h4, .sdp-wrap h5, .sdp-wrap h6,
.faq-question, .stat-num, .pc-title, .blog-title, .more-name,
.ub-logo-name, .ub-mega-title {
    font-family: 'Space Grotesk', 'Inter', Calibri, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.btn, .btn-cyn, .btn-gold, .btn-prim, .btn-ghost, .btn-cta-prim, .btn-cta-ghost,
.claim-btn, .theme-btn, .link-btn, .ub-cta-btn, .ub-mobile-cta, .button-89,
.wp-block-button__link, .elementor-button {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
}

[class*="fa-"], .fas, .far, .fab, .fal, .fad,
i.icon, [class^="icon-"], [class*=" icon-"] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', 'icomoon' !important;
}

/* --------------------------------------------------------------------------
   3. GLOBAL SPACING & WIDTH
   User requested:
     - Banner padding = 10px (top/bottom). Nothing more.
     - No gap between sections anywhere else.
     - Every content container width = 90%, no max-width restriction.
   -------------------------------------------------------------------------- */

/* Section spacing — STRICT 50px top + 50px bottom max, nothing more */
.sec, .sdp-section, .section-padding,
.services-area, .case-studies-section-2, .service-section, .stats-section,
.service-detail, .sdp-cta, .sdp-faq, .sdp-blogs, .sdp-more, .sdp-portfolio,
.sdp-tools, .sdp-why, .sdp-process, .sdp-testi,
section, .section, [class*="section-py"], [class*="-section"] {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Bootstrap-style spacing helpers — capped at 50px max */
.pt-5, .pt-10, .pt-15, .pt-20, .pt-25, .pt-30, .pt-35, .pt-40, .pt-45,
.pt-50, .pt-55, .pt-60, .pt-65, .pt-70, .pt-75, .pt-80, .pt-85, .pt-90,
.pt-95, .pt-100, .pt-105, .pt-110, .pt-115, .pt-120, .pt-125, .pt-130,
.pt-135, .pt-140, .pt-145, .pt-150, .pt-155, .pt-160, .pt-165, .pt-170,
.pt-175, .pt-180, .pt-185, .pt-190, .pt-195, .pt-200 { padding-top: 50px !important; }

.pb-5, .pb-10, .pb-15, .pb-20, .pb-25, .pb-30, .pb-35, .pb-40, .pb-45,
.pb-50, .pb-55, .pb-60, .pb-65, .pb-70, .pb-75, .pb-80, .pb-85, .pb-90,
.pb-95, .pb-100, .pb-105, .pb-110, .pb-115, .pb-120, .pb-125, .pb-130,
.pb-135, .pb-140, .pb-145, .pb-150, .pb-155, .pb-160, .pb-165, .pb-170,
.pb-175, .pb-180, .pb-185, .pb-190, .pb-195, .pb-200 { padding-bottom: 50px !important; }

.mt-50, .mt-55, .mt-60, .mt-70, .mt-75, .mt-80, .mt-90, .mt-100,
.mt-110, .mt-120, .mt-130, .mt-140, .mt-150 { margin-top: 0 !important; }
.mb-50, .mb-55, .mb-60, .mb-70, .mb-75, .mb-80, .mb-90, .mb-100,
.mb-110, .mb-120, .mb-130, .mb-140, .mb-150 { margin-bottom: 0 !important; }





.sdp-sub    { margin-bottom: 8px !important; }

/* CONTENT WIDTH — 90% everywhere, no max-width caps */
.wrap,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.hero-inner,
.inner-banner-container,
.sdp-container,
.ub-header-inner,
.ub-mega-inner,
.ub-topbar-inner,
.hero-c,
.banner-container,
.faq-layout,
.what-layout,
.workflow-g,
.lead-g,
.deliver-g,
.custom-rows,
.week-g {
    width: 90% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Bootstrap row width — keep at 100% inside container */
.row { width: 100% !important; max-width: none !important; }

/* --------------------------------------------------------------------------
   4. PAGE BACKGROUND / TEXT COLOR DEFAULTS
   -------------------------------------------------------------------------- */
body {
    background: var(--brand-white) !important;
    color: var(--brand-bg-deep) !important;
}

.bg-navy   { background: var(--brand-bg-deep) !important; }
.bg-off    { background: var(--brand-soft) !important; }

/* --------------------------------------------------------------------------
   5. BANNERS / HERO — raw Gemini image, no overlay, no spacing
   -------------------------------------------------------------------------- */

/* Banner text colors */
.inner-banner .page-title, .hero .page-title, .hero-section .page-title {
    color: #FFFFFF !important;
}
.inner-banner .breadcrumb, .hero .breadcrumb {
    color: var(--brand-lavender) !important;
}
.inner-banner .breadcrumb a, .hero .breadcrumb a {
    color: var(--brand-lavender) !important;
}
.inner-banner .breadcrumb a:hover, .hero .breadcrumb a:hover { color: #FFFFFF !important; }
.inner-banner .breadcrumb .current, .hero .breadcrumb .current { color: #FFFFFF !important; }

/* Hero typography overrides — make sure all heros have white text on the image */
.hero h1, .hero h2, .hero h3, .hero p,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section p,
.banner-area h1, .banner-area h2, .banner-area h3, .banner-area p {
    color: #FFFFFF !important;
}
.hero p, .hero-section p, .banner-area p { color: rgba(255, 255, 255, 0.78) !important; }



/* ========================================================================
   6. TYPOGRAPHY — EXACT PPT brand spec (from "Sizes & Weights" slide)

       Level   Desktop   Mobile    Weight     Use
       H1      55px      34px      Bold       Page hero
       H2      44px      26px      Bold       Section heading
       H3      24px      20px      Semibold   Subsection
       H4      20px      19px      Semibold   Card title
       H5      17px      16px      Semibold   Small heading
       Lead    18px      15px      Regular    Intro paragraph
       Body    15px      14px      Regular    Default text
       Small   12px      11px      Regular    Captions

   Fonts: Space Grotesk (headings) · Inter (body)
   Mobile breakpoint: ≤ 768px
   ======================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Space Grotesk', 'Inter', Calibri, system-ui, sans-serif !important;
    color: var(--brand-bg-deep);
    margin: 0 0 14px;
    padding: 0;
    text-transform: none !important;
    text-rendering: optimizeLegibility;
}

h1, .h1 {
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 16px !important;
}
h2, .h2 {
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    margin-bottom: 14px !important;
}
h3, .h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 12px !important;
}
h4, .h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
    margin-bottom: 10px !important;
}
h5, .h5 {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}
h6, .h6 {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

/* Lead paragraph (intro / hero subhead) */
.lead, .lead-p, p.lead, .hero-sub, .hero-subhead, .hero-tagline,
.au-hsub, .inner-banner h2, .breadcrumb-wrapper h2 {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
p.hero-tagline{font-size:15px !important;}
/* Body */
p {
    font-family: 'Inter', 'Space Grotesk', Calibri, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    margin: 0 0 12px;
    color: var(--brand-bg-deep);
}

/* Small / caption */
small, .small, .caption, .micro {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Mobile (≤ 768px) — PPT mobile column */
@media (max-width: 768px) {
    h1, .h1     { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; }
    h2, .h2     { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
    h3, .h3     { font-size: 20px !important; }
    h4, .h4     { font-size: 19px !important; }
    h5, .h5     { font-size: 16px !important; }
    h6, .h6     { font-size: 11px !important; }
    .lead, .lead-p, p.lead, .hero-sub, .hero-subhead, .hero-tagline,
    .au-hsub, .inner-banner h2, .breadcrumb-wrapper h2 { font-size: 15px !important; }
    p           { font-size: 14px; }
    small, .small, .caption, .micro { font-size: 11px !important; }
}

/* Dark backgrounds — invert heading + paragraph color */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.sdp-process h1, .sdp-process h2, .sdp-process h3, .sdp-process h4,
.sdp-testi  h1, .sdp-testi  h2, .sdp-testi  h3, .sdp-testi  h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.hero-section h1, .hero-section h2, .hero-section h3,
.banner-area h1, .banner-area h2, .banner-area h3,
.inner-banner h1, .inner-banner h2, .inner-banner h3,
.breadcrumb-wrapper h1, .breadcrumb-wrapper h2, .breadcrumb-wrapper h3,
[class$="-hero"] h1, [class$="-hero"] h2, [class$="-hero"] h3,
[class*="-banner"] h1, [class*="-banner"] h2, [class*="-banner"] h3 {
    color: #FFFFFF !important;
}
.bg-navy p, .sdp-process p, .sdp-testi p,
.hero p, .hero-section p, .banner-area p,
.inner-banner p, .breadcrumb-wrapper p,
[class$="-hero"] p, [class*="-banner"] p {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Banner h1 = page hero — PPT 55px (34px mobile), Bold */
.hero h1, .hero-section h1, .banner-area h1,
.inner-banner h1, .breadcrumb-wrapper h1, .inner-banner .page-title,
[class$="-hero"] h1, [class*="-banner"] h1 {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1.5px !important;
}

/* Banner h2 (subtitle) — PPT Lead 18px (Regular) */
.hero h2, .hero-section h2, .banner-area h2,
.inner-banner h2, .breadcrumb-wrapper h2,
[class$="-hero"] h2, [class*="-banner"] h2 {
   
   
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--brand-lavender) !important;
    margin-bottom: 14px !important;
}

@media (max-width: 768px) {
    .hero h1, .hero-section h1, .banner-area h1,
    .inner-banner h1, .breadcrumb-wrapper h1, .inner-banner .page-title,
    [class$="-hero"] h1, [class*="-banner"] h1 {
        font-size: 34px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.8px !important;
    }
    .hero h2, .hero-section h2, .banner-area h2,
    .inner-banner h2, .breadcrumb-wrapper h2,
    [class$="-hero"] h2, [class*="-banner"] h2 { font-size: 15px !important; }
}

/* .lbl — section label (PPT H2 = 44px Bold) */
.lbl {
    display: block;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
/*     font-size: 44px !important; */
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    color: var(--brand-bg-deep) !important;
    margin: 0 0 14px !important;
    text-transform: none !important;
}
.lbl::before { display: none !important; }
.lbl-w { color: #FFFFFF !important; }
.lbl-c { text-align: center !important; }
.lbl-g { color: var(--brand-violet) !important; }

/* H1 with .lbl wins (PPT H1 = 55px) */
h1.lbl {
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1.5px !important;
}

/* .st — subhead (PPT H3 = 24px Semibold) */
.st {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    color: var(--brand-bg-deep) !important;
    margin: 0 0 12px !important;
}
.st-w { color: #FFFFFF !important; }
.st-wh2 { color: var(--brand-violet-4) !important; }

/* H1.st wins (PPT H1) */
h1.st {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1.5px !important;
    color: #FFFFFF !important;
}


@media (max-width: 768px) {
    .lbl    { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
    h1.lbl  { font-size: 34px !important; }
    .st     { font-size: 20px !important; }
    h1.st   { font-size: 34px !important; }
    h2.st   { font-size: 20px !important; }
}

.tc { text-align: center !important; }
.tl { text-align: left   !important; }
.tr { text-align: right  !important; }

/* ------------------------------------------------------------------------
   5b. INNER BANNER (banner.php) — left content / right image grid
   Mirrors page-ai-sales-agent-b2b.php hero pattern.
   ------------------------------------------------------------------------ */
.inner-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    position: relative;
}
.inner-banner-container { width: 90% !important; max-width: none !important; }
.inner-banner-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    gap: 40px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 30px 0 !important;
    position: relative;
    z-index: 2;
}
.inner-banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inner-banner-content .page-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: clamp(34px, 4.4vw, 60px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -1.5px !important;
    color: #FFFFFF !important;
    margin: 0 0 14px !important;
}
.inner-banner-content .breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--brand-lavender) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.inner-banner-content .breadcrumb a {
    color: var(--brand-lavender) !important;
    text-decoration: none !important;
}
.inner-banner-content .breadcrumb a:hover { color: #FFFFFF !important; }
.inner-banner-content .breadcrumb .current { color: #FFFFFF !important; font-weight: 700; }
.inner-banner-image {
    position: relative;
}
.inner-banner-image {
    margin: 0 !important;
    padding: 0 !important;
}
.inner-banner-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .inner-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .inner-banner-image img { max-height: 320px; }
}

/* ------------------------------------------------------------------------
   5c. ENSURE ALL HEROES SHOW THEIR CONTENT 90% WIDE
   ------------------------------------------------------------------------ */
.hero-inner,
.hero-section .container,
.hero-section .container-fluid {
    width: 90% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------------------
   5d. SIMPLE-CENTERED BANNERS (templates like about.php that use
   .breadcrumb-wrapper) — convert to left content / right image grid via
   pseudo-element so they match the AI Sales Agent layout.
   ------------------------------------------------------------------------ */
.breadcrumb-wrapper {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.breadcrumb-wrapper .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    gap: 40px !important;
    padding: 30px 0 !important;
    margin: 0 auto !important;
    align-items: center !important;
    width: 90% !important;
    max-width: none !important;
    position: relative;
    z-index: 2;
}
.breadcrumb-wrapper .container::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        url('https://unibrightsolutions.io/wp-content/uploads/2026/05/01-2.jpg') center / cover no-repeat;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    margin: 0;
}
.breadcrumb-wrapper .page-heading {
    text-align: left !important;
}
.breadcrumb-wrapper .page-heading h1,
.breadcrumb-wrapper .breadcrumb-sub-title h1 {
    color: #FFFFFF !important;
    text-align: left !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-size: clamp(34px, 4.4vw, 60px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -1.5px !important;
    margin: 0 0 14px !important;
    text-transform: capitalize !important;
}
.breadcrumb-wrapper .breadcrumb-items {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.breadcrumb-wrapper .breadcrumb-items li {
    display: inline-flex !important;
    align-items: center;
    color: var(--brand-lavender) !important;
}
.breadcrumb-wrapper .breadcrumb-items li a,
.breadcrumb-wrapper .breadcrumb-items li {
    color: var(--brand-lavender) !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.breadcrumb-wrapper .breadcrumb-items li a:hover { color: #FFFFFF !important; }
/* Hide decorative shapes (trophy/target) on small banner — keep clean */
.breadcrumb-wrapper .left-shape,
.breadcrumb-wrapper .right-shape { display: none !important; }

@media (max-width: 1024px) {
    .breadcrumb-wrapper .container {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .breadcrumb-wrapper .container::after { aspect-ratio: 16/9; max-height: 280px; }
}

/* --------------------------------------------------------------------------
   7. UNIVERSAL BUTTON STYLE
   Every button on the site mirrors the header CTA: violet gradient pill,
   white text, 50px radius, 600 weight Montserrat.
   -------------------------------------------------------------------------- */
.btn,
.btn-cyn,
.btn-gold,
.btn-out-w,
.btn-prim,
.btn-ghost,
.btn-cta-prim,
.btn-cta-ghost,
.claim-btn,
.theme-btn,
.link-btn,
.ub-cta-btn,
.ub-mobile-cta,
.btn-cta,
.main-button .theme-btn,
.hero-button a,
.hero-bts a,
.hero-btn,
.button-89,
a.button-89,
.wp-block-button__link,
.elementor-button,
.elementor-button-link,
.elementor-cta__button,
button.theme-btn,
button[type="submit"],
input[type="submit"],
input[type="button"],
.form-submit input,
.submit-btn,
.book-btn,
.read-more,
.services-btn-4 a,
a.btn,
a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    /* PPT button: horizontal indigo → soft purple gradient */
    background: linear-gradient(90deg, #6B5BFF 0%, #B8A7FF 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    white-space: nowrap;
}

.btn:hover,
.btn-cyn:hover,
.btn-gold:hover,
.btn-out-w:hover,
.btn-prim:hover,
.btn-ghost:hover,
.btn-cta-prim:hover,
.btn-cta-ghost:hover,
.claim-btn:hover,
.theme-btn:hover,
.link-btn:hover,
.ub-cta-btn:hover,
.ub-mobile-cta:hover,
.btn-cta:hover,
.main-button .theme-btn:hover,
.hero-button a:hover,
.hero-bts a:hover,
.hero-btn:hover,
.button-89:hover,
a.button-89:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button-link:hover,
.elementor-cta__button:hover,
button.theme-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.form-submit input:hover,
.submit-btn:hover,
.book-btn:hover,
.read-more:hover,
.services-btn-4 a:hover,
a.btn:hover,
a.button:hover {
    /* PPT hover: lifts up, soft purple glow underneath */
    background: linear-gradient(90deg, #6B5BFF 0%, #B8A7FF 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 0 -6px rgba(123, 97, 255, 0.40), 0 18px 30px -10px rgba(123, 97, 255, 0.45) !important;
}

/* arrow-btn pairs commonly used with .theme-btn — make the arrow circle match */
.arrow-btn,
.main-button .arrow-btn,
.hero-button .arrow-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin-left: 8px !important;
    background: #FFFFFF !important;
    color: var(--brand-violet) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(216, 216, 255, 0.55) !important;
    font-size: 13px !important;
}

/* Hero button container — keep the theme-btn + arrow-btn pair on one row */
.main-button > a,
.hero-button > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.main-button > a:hover,
.hero-button > a:hover { background: transparent !important; box-shadow: none !important; transform: none !important; }
.main-button > a .arrow-btn,
.hero-button > a .arrow-btn { margin-left: -10px !important; position: relative; z-index: 0; }

/* Circle button used on home (e.g. AI logos) keep brand colors */
.circle-button {
    background: linear-gradient(135deg, #7B61FF 0%, #B8A7FF 100%) !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
}

/* --------------------------------------------------------------------------
   8. LINK COLORS
   -------------------------------------------------------------------------- */
a.btn-cyn, a.claim-btn, a.ub-cta-btn, a.btn-prim, a.btn-cta-prim,
a.btn-gold, a.btn-out-w, a.ub-mobile-cta, a.button-89, a.theme-btn,
.ub-menu > li > a, .ub-mobile-menu > li > a, .ub-dropdown a, .ub-mega-col a,
.footer-menu a, .breadcrumb a, .page-title a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   9. HEADINGS + UTILITY GRADIENT TEXT
   Reference uses `.gc`, `.gg`, `.gi`, `.ggrn` for gradient text on white/dark.
   -------------------------------------------------------------------------- */
.gc, .gi, .gg, .ggrn {
    background: linear-gradient(135deg, #7B61FF, #B8A7FF, #D8D8FF) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-bg-deep);
}
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.hero h1, .hero h2, .hero h3, .hero h4 {
    color: #FFFFFF !important;
}

/* Labels & subheadings used across reference */
.lbl   { color: var(--brand-bg-deep) !important; }
.lbl-w { color: #FFFFFF !important; }
.lbl-g { color: var(--brand-violet-2) !important; }
.st    { color: #6F6BB8 !important; }
.st-w  { color: #FFFFFF !important; }
.st-wh2{ color: #B8A7FF !important; }

/* --------------------------------------------------------------------------
   10. STAT / HIGHLIGHT COLORS — strip green/cyan/red from reference page
   -------------------------------------------------------------------------- */
.hsr-n.c, .hsr-n.g, .hsr-n.grn, .hsr-n.i { color: var(--brand-violet-2) !important; }

/* --------------------------------------------------------------------------
   11. SCROLLBAR — brand color
   -------------------------------------------------------------------------- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--brand-soft) !important; }
::-webkit-scrollbar-thumb { background: var(--brand-violet) !important; border-radius: 4px; }

/* --------------------------------------------------------------------------
   12. FOOTER — keep dark, force brand
   -------------------------------------------------------------------------- */
footer, .site-footer, .footer-area {
    background: var(--brand-bg-deep) !important;
    color: var(--brand-soft) !important;
}
footer a, .site-footer a, .footer-area a {
    color: var(--brand-lavender) !important;
}
footer a:hover, .site-footer a:hover, .footer-area a:hover {
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   13. HEADER — keep light bg, brand purple highlights
   -------------------------------------------------------------------------- */
.ub-header { background: #FFFFFF !important; }
.ub-menu > li > a { color: var(--brand-bg-deep) !important; }
.ub-menu > li:hover > a,
.ub-menu > li.active > a { background: rgba(216, 216, 255, 0.55) !important; color: var(--brand-bg-deep) !important; }
.ub-menu > li > a::after { background: var(--brand-violet) !important; }
.ub-dropdown { border-top: 3px solid var(--brand-violet) !important; }
.ub-dropdown a { color: var(--brand-bg-deep) !important; }
.ub-dropdown a:hover {
    background: linear-gradient(90deg, rgba(123, 97, 255, 0.08), transparent) !important;
    color: var(--brand-violet) !important;
}
.ub-dropdown a i { color: var(--brand-violet) !important; }
.ub-mega { border-top: 3px solid var(--brand-violet) !important; }
.ub-mega-col a { color: var(--brand-bg-deep) !important; }
.ub-mega-col a:hover { color: var(--brand-violet) !important; }
.ub-mega-col a::before { color: var(--brand-violet) !important; }
.ub-mega-title { color: var(--brand-violet) !important; -webkit-text-fill-color: var(--brand-violet) !important; }
.ub-mega-title i { color: var(--brand-violet) !important; -webkit-text-fill-color: var(--brand-violet) !important; }

/* --------------------------------------------------------------------------
   14. CARDS / BORDERS — strip cyan/teal/green tints
   -------------------------------------------------------------------------- */
.lead-c, .week-c, .fi, .faq-cta-box, .stat-card, .wf-metric,
.testi-card, .blog-card, .more-card, .why-feat {
    border-color: rgba(123, 97, 255, 0.18) !important;
}
.lead-c:hover, .week-c:hover {
    border-color: rgba(123, 97, 255, 0.45) !important;
}
.fi.open { border-color: var(--brand-violet) !important; }
.fi.open .fi-ico {
    background: linear-gradient(135deg, #7B61FF, #B8A7FF) !important;
    border-color: var(--brand-violet) !important;
}

/* Lead tag / cr-tag / del-tag — replace cyan tint */
.lead-tag, .cr-tag, .del-tag, .week-num, .lead-c-badge {
    background:transparent !important;
    border:none;
    color: var(--brand-violet) !important;
	
}
.week-num { background: linear-gradient(135deg, #7B61FF, #B8A7FF) !important; color: #fff !important; }

/* Hero pills / badges */
.hero-badge {
    background: rgba(123, 97, 255, 0.12) !important;
    border-color: rgba(216, 216, 255, 0.35) !important;
    color: var(--brand-lavender) !important;
}
.hpill {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(216, 216, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}
.hbdot, .hpill-dot { background: var(--brand-violet) !important; }

/* Workflow / step numbers */
/* .wf-step-num   { color: rgba(216, 216, 255, 0.50) !important; } */
.wf-step-label { color: var(--brand-violet-2) !important; }
.wf-step-body h3 { color: var(--brand-bg-deep) !important; }

/* --------------------------------------------------------------------------
   15. RGBA HARDCODED COLOR PURGES
   Many pages use rgba(14,165,233,…) (sky), rgba(56,189,248,…) (cyan),
   rgba(22,163,74,…) (green), rgba(201,168,76,…) (gold) — these survived
   the var() remap. Override common selectors that use them.
   -------------------------------------------------------------------------- */
.hero-glow {
    background: radial-gradient(circle, rgba(123, 97, 255, 0.10) 0%, transparent 70%) !important;
}
.hero-glow2 {
    background: radial-gradient(circle, rgba(184, 167, 255, 0.10) 0%, transparent 70%) !important;
}
.hero-grid {
    background-image:
        linear-gradient(rgba(216, 216, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 216, 255, 0.04) 1px, transparent 1px) !important;
}
.snav { box-shadow: 0 2px 16px rgba(5, 5, 62, 0.07) !important; }
.stab:hover, .stab.on { color: var(--brand-bg-deep) !important; border-bottom-color: var(--brand-violet) !important; }

/* Image strip overlays default to dark navy */
.img-strip-ov { background: linear-gradient(135deg, rgba(5, 5, 62, 0.88), rgba(17, 17, 51, 0.80)) !important; }

/* What/Custom rows */
.what-img-ov  { background: linear-gradient(160deg, rgba(5, 5, 62, 0.12), rgba(5, 5, 62, 0.65)) !important; }
.what-img-badge {
    background: rgba(5, 5, 62, 0.55) !important;
    border-color: rgba(216, 216, 255, 0.28) !important;
}
.wib-pt::before { color: var(--brand-violet-2) !important; }
.wf-ico {
    background: rgba(123, 97, 255, 0.14) !important;
    border-color: rgba(184, 167, 255, 0.35) !important;
}
.wf:hover {
    background: rgba(123, 97, 255, 0.09) !important;
    border-color: rgba(184, 167, 255, 0.30) !important;
}

/* Custom row body bg */
.custom-row-body          { background: var(--brand-soft) !important; }
.custom-row.even .custom-row-body { background: #FFFFFF !important; }
.custom-row.odd  .custom-row-img-ov { background: linear-gradient(90deg, transparent, rgba(5, 5, 62, 0.04)) !important; }
.custom-row.even .custom-row-img-ov { background: linear-gradient(90deg, rgba(5, 5, 62, 0.04), transparent) !important; }

/* Final CTA */
.final-cta-ov { background: linear-gradient(135deg, rgba(5, 5, 62, 0.95), rgba(123, 97, 255, 0.10)) !important; }

/* Pipe badges */
.pipe-badge {
    background: rgba(5, 5, 62, 0.88) !important;
    border-color: rgba(216, 216, 255, 0.18) !important;
}

/* Hero right stats */
.hero-r-stats {
    background: rgba(5, 5, 62, 0.92) !important;
    border-color: rgba(216, 216, 255, 0.22) !important;
}
.hrs-card:hover { background: rgba(123, 97, 255, 0.07) !important; }

/* Service detail page (single-service.php) */
.sdp-wrap            { background: var(--brand-lavender) !important; }
.sdp-process         { background: var(--brand-bg-deep) !important; }
.sdp-tools, .sdp-portfolio, .sdp-faq, .sdp-more { background: var(--brand-soft) !important; }
.sdp-why, .sdp-blogs, .sdp-cta { background: #FFFFFF !important; }
.sdp-testi           { background: var(--brand-bg-deep) !important; }
.sdp-eyebrow {
    color: var(--brand-violet) !important;
    background: rgba(123, 97, 255, 0.10) !important;
    border-color: rgba(123, 97, 255, 0.25) !important;
}
.sdp-eyebrow::before { background: var(--brand-violet) !important; }
.ps-circle           { background: var(--brand-bg-2) !important; color: var(--brand-lavender) !important; }
.process-step:hover .ps-circle {
    background: var(--brand-violet) !important;
    border-color: var(--brand-violet) !important;
    color: #FFFFFF !important;
}
.tool-chip          { color: var(--brand-bg-deep) !important; background: #FFFFFF !important; }
.tool-chip:hover    { background: var(--brand-bg-deep) !important; color: var(--brand-lavender) !important; border-color: var(--brand-bg-deep) !important; }
.cta-box {
    background: linear-gradient(125deg, #05053E 0%, #1A1A4D 60%, #2D1F70 100%) !important;
}
.testi-av {
    background: linear-gradient(135deg, #D8D8FF, #7B61FF) !important;
    color: #05053E !important;
}
.testi-stars { color: var(--brand-violet-2) !important; }
.blog-cat    { background: var(--brand-bg-deep) !important; color: var(--brand-lavender) !important; }
.more-card:hover { background: var(--brand-bg-deep) !important; border-color: var(--brand-bg-deep) !important; }
.more-card:hover .more-name { color: var(--brand-lavender) !important; }

/* --------------------------------------------------------------------------
   16. SHADOWS — brand-tinted
   -------------------------------------------------------------------------- */
.lead-c, .week-c, .fi, .faq-cta-box, .stat-card, .wf-metric,
.faq-img-main, .testi-card, .blog-card, .more-card {
    box-shadow: 0 8px 30px rgba(5, 5, 62, 0.08) !important;
}
.lead-c:hover, .week-c:hover, .blog-card:hover, .more-card:hover,
.testi-card:hover, .stat-card:hover, .why-feat:hover {
    box-shadow: 0 16px 48px rgba(123, 97, 255, 0.18) !important;
}

/* --------------------------------------------------------------------------
   17. PRELOADER — brand colors
   -------------------------------------------------------------------------- */
#mainPreloader            { background: #FFFFFF !important; }
.circle-border            { border-color: var(--brand-violet) !important; }
.circle-border::before    { background: var(--brand-violet) !important; }
.preloader-title          { color: var(--brand-bg-deep) !important; }
.preloader-subtitle       { color: var(--brand-violet) !important; }

/* --------------------------------------------------------------------------
   18. SOCIAL SLIDER / STICKY NAV
   -------------------------------------------------------------------------- */
.snav            { background: #FFFFFF !important; border-bottom-color: var(--brand-soft-2) !important; }
.stab            { color: rgba(5, 5, 62, 0.55) !important; }
.stab.on, .stab:hover { color: var(--brand-bg-deep) !important; }

/* --------------------------------------------------------------------------
   19. FORM CONTROLS
   -------------------------------------------------------------------------- */
input, textarea, select, button {
    font-family: 'Inter', 'Space Grotesk', sans-serif !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--brand-violet) !important;
    outline: none;
}

/* --------------------------------------------------------------------------
   20. PROMOTE non-brand inline gradients that referenced --bik01-* tokens
   -------------------------------------------------------------------------- */
[style*="--bik01-"], [style*="bik01"] {
    --bik01-navy:   #05053E !important;
    --bik01-purple: #7B61FF !important;
    --bik01-purple2:#B8A7FF !important;
}

/* ==========================================================================
   20.5  CARD HEADINGS — forced 20px site-wide
   Every card-like container's heading (h3/h4/h5) gets a uniform 20px size.
   ========================================================================== */
.lead-c-body h3, .lead-c-body h4, .lead-c-body h5,
.del-c-body  h3, .del-c-body  h4, .del-c-body  h5,
.week-c-body h3, .week-c-body h4, .week-c-body h5,
.faq-cta-box h3, .faq-cta-box h4,
.service-box-items .content h3, .service-box-items .content h4,
.services-item-4 h5,
.services-content-4 .title, .services-content-4 h5,
.value-box-items .content h3, .value-box-items .content h4,
.icon-items .content h3, .icon-items .content h4,
.why-card h3, .why-card h4,
.feature-card h3, .feature-card h4,
.au-card h3, .au-card h4,
.au-city h3, .au-city h4,
.au-why  h3, .au-why  h4,
.au-mt-card h2, .au-mt-card h3,
.stat-card h3, .stat-card h4,
.testi-card h3, .testi-card h4,
.blog-card  h3, .blog-card  h4, .blog-title,
.more-card  h3, .more-card  h4, .more-name,
.pc-title, .pc-card h3, .pc-card h4,
.proc-card h3, .proc-card h4,
.team-card h3, .team-card h4,
.case-card h3, .case-card h4,
.tool-card h3, .tool-card h4,
.fi .fq,
.wf-step-body h3, .wf-step-body h4,
.custom-row-body h3:not(.lbl):not(.st),
.cta-box h3, .cta-box h4,
.sdp-cta-card h3, .sdp-cta-card h4,
.sdp-blog-card h3, .sdp-blog-card h4,
.sdp-more-card h3, .sdp-more-card h4,
.sdp-process-step h3, .sdp-process-step h4,
.sdp-tool-card h3, .sdp-tool-card h4,
.sdp-why-card h3, .sdp-why-card h4,
.sdp-faq-q,
.au-mt-card h3,
.bik01-card h3, .bik01-card h4,
.card h3, .card h4, .card h5,
.card-body h3, .card-body h4, .card-body h5,
[class*="-card"] h3,
[class*="-card"] h4,
[class*="-card"] h5,
[class*="-box-items"] h3,
[class*="-box-items"] h4 {
    /* PPT H4 (card title) — 20px desktop / 19px mobile, Semibold */
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 10px !important;
}
@media (max-width: 768px) {
    .lead-c-body h3, .lead-c-body h4, .lead-c-body h5,
    .del-c-body  h3, .del-c-body  h4, .del-c-body  h5,
    .week-c-body h3, .week-c-body h4, .week-c-body h5,
    .au-card h3, .au-card h4,
    .au-city h3, .au-city h4,
    .au-why  h3, .au-why  h4,
    .card h3, .card h4, .card h5,
    [class*="-card"] h3, [class*="-card"] h4, [class*="-card"] h5,
    [class*="-box-items"] h3, [class*="-box-items"] h4 {
        font-size: 19px !important;
    }
}

/* ==========================================================================
   21. FROSTED-GLASS BACKDROP FOR TEXT OVER IMAGES (site-wide)
   Any text element sitting on top of a hero/banner image gets a translucent
   blurred panel behind it so the text reads clearly regardless of the image
   underneath.
   ========================================================================== */

/* ── Banner LEFT content stays transparent — no panel, no blur, no border ── */
.hero-l,
.hero-c,
.hero-left,
.hero-content,
.hero-text,
.hero-info,
.hero-copy,
.hero-section .hero-content,
.hero-area .hero-content,
.banner-area .banner-content,
.inner-banner-content,
.au-hc,
.breadcrumb-wrapper .page-heading,
[class$="-hero"] .hero-content,
[class$="-hero"] .hero-left,
[class$="-hero"] .hero-text,
[class$="-hero-left"],
[class*="-hero"] > .hero-left,
[class*="-banner"] .banner-content {
    position: relative;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: 2;
}

/* ── Image strip section — pure white block (image hidden) ── */
.img-strip {
    background: #FFFFFF !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: relative !important;
}
.img-strip > img,
.img-strip .img-strip-ov {
    display: none !important;
}
.img-strip-cnt {
    position: relative !important;
    inset: auto !important;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 40px 5% !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    color: var(--brand-bg-deep) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    z-index: 2;
}
.img-strip-cnt h1, .img-strip-cnt h2, .img-strip-cnt h3,
.img-strip-cnt h4, .img-strip-cnt h5, .img-strip-cnt h6 {
    color: var(--brand-bg-deep) !important;
}
.img-strip-cnt p, .img-strip-cnt span {
    color: rgba(5, 5, 62, 0.72) !important;
}
.img-strip-cnt .gc, .img-strip-cnt .gi, .img-strip-cnt .gg {
    background: linear-gradient(135deg, var(--brand-violet), var(--brand-violet-4)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Small badges / pills overlaid on images ── */
.au-hf,
.lead-c-badge,
.del-c-n,
.week-num,
.pipe-badge,
.hero-badge,
.hpill,
.au-story-badge,
.au-banner-floater,
[class*="-overlay-badge"],
[class*="-img-badge"] {
    background: rgba(5, 5, 62, 0.55) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(216, 216, 255, 0.22) !important;
}

/* ── Larger callout cards / stat boxes overlaid on images ── */
.what-img-badge,
.hero-r-stats,
.au-stat-card,
.what-img-overlay,
.hero-img-card,
[class*="-img-overlay"]:not(img):not([class*="-img-overlay-gradient"]) {
    background: rgba(5, 5, 62, 0.55) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border: 1px solid rgba(216, 216, 255, 0.22) !important;
}

/* ── Mobile — image-strip text overlay slightly less padding ── */
@media (max-width: 640px) {
    .img-strip-cnt { padding: 16px 18px !important; }
}