/* ==========================================================================
   9wickets — /agent-list/ (page 54) "Premium Dark" redevelop (2026-07)
   --------------------------------------------------------------------------
   This page (hero, search bar, agent-card grid, trust panel, closing CTA)
   was still on the OLD navy #08415C / gold palette from before this pass's
   site-wide redesign (home page hero → video-hero.css, "বাংলাদেশ × 9WICKETS"
   → seo-special.css, final CTA → cta-premium.css, all converted to a dark
   #17150F→#0E0C09 / gold #F9E900 identity). This file brings the agent-list
   page in line with that same identity, and gives the agent CARD itself a
   genuinely different shape/treatment — the old design was a solid gold
   "pill" (border-radius:999px, gold fill, navy ink text) repeated 78 times,
   which reads as one undifferentiated wall of yellow at a glance. New
   design: a dark rounded-rect card (not a stretched capsule), tier-accented
   border-glow instead of an all-over tier fill, gold rating stars, and a
   circular contact button — same family as the home page's agents-cards-v4
   "Dark Blob Grid" cards, just adapted for a dense 78-item list instead of
   4 hero-sized tiles.

   Loads LAST for this page (enqueued right after 'w9-agent-pages' in
   w9-agent-pages.php, same closure, so it's guaranteed queued after it —
   see that file). Every selector below matches or exceeds the specificity
   of whatever it's overriding (checked against agent-list.css /
   agent-list-page.css / sections-glass.css directly) rather than assuming
   load order alone wins — this codebase has a real history of !important
   vs. !important specificity ties silently losing on class-count, so this
   file follows the same "match their selector, then let load order break
   the tie" rule established elsewhere this pass.
   ========================================================================== */

/* ==========================================================================
   1. HERO — dark/black gradient replaces the navy-teal one
   ========================================================================== */
.w9a-hero2 {
    background:
        radial-gradient(120% 180% at 100% -20%, rgba(249, 233, 0, .10), transparent 55%),
        linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}
/* decorative blob (was navy→slate gradient) — dark charcoal instead, still
   reads as a soft shape behind the portrait, no navy anywhere */
.w9a-hero2__blob--b {
    background: linear-gradient(135deg, #4FD8E3 0%, #17150F 100%) !important;
}
/* inline SVG badge icons shipped with a literal stroke="#08415C" attribute
   in the page markup — a plain CSS rule targeting the svg element itself
   overrides an inline presentation attribute without needing !important,
   but it's added anyway for parity with every other override in this file */
.w9a-hero2__badge-ic svg { stroke: #1A1813 !important; }

/* ==========================================================================
   2. SEARCH BAR — keep the light glass-pill (works fine on the cream page
   background), just swap the navy ink for the site's standard dark ink so
   nothing on this page still reads #08415C
   ========================================================================== */
body.vk .w9a-searchbox .w9a-search-count,
body.vk .w9a-searchbox .w9a-search-count b { color: #1A1813; }

/* the "এজেন্ট লিস্ট" pill above the search bar (.b9g-head--center
   .b9g-eyebrow) was missed by the original site-wide navy pass — it's
   still #08415C on agent-list (54) itself today, not just on the tier-page
   copies of this same block, so this is fixed at the shared class rather
   than per-page. `.b9g-eyebrow`'s own rule sets `color` with !important
   (sections-glass.css); background has none, so that alone would be
   enough to win, but !important is added anyway for consistency with the
   rest of this file's overrides.
   Scoped to `.b9g-head--center .b9g-eyebrow` specifically (NOT a blanket
   `body.w9-agentpage .b9g-eyebrow`) — the closing-CTA panels on these same
   pages (new-account, the tier pages) reuse `.b9g-eyebrow` too, but with
   their OWN correct gold-on-dark inline `style="background:...;color:
   #F9E900"` already set per-instance; an earlier, broader version of this
   rule's `!important` beat those inline styles (inline styles carry no
   !important of their own) and silently turned that gold pill invisible
   (dark ink on the dark glass panel) — confirmed live on new-account's
   "প্রস্তুত?" CTA. */
body.w9-agentpage .b9g-head--center .b9g-eyebrow {
    color: #1A1813 !important;
    background: rgba(26, 24, 19, .07) !important;
}

/* ==========================================================================
   3. AGENT CARD — full redesign: dark rounded-rect card, tier-accented
   border/glow instead of an all-over tier-colored fill, gold rating stars,
   circular gold contact button. Selectors match agent-list.css's own
   (`.w9a-card`, `.w9a-photo`, etc. — same specificity, later file wins).
   ========================================================================== */
.w9a-card {
    background: linear-gradient(160deg, #1A170F 0%, #0E0C09 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
.w9a-card::before {
    /* ambient tier-tinted glow reused from agent-list.css's own ::before,
       just brighter (was tuned for a barely-visible glow on a white card;
       needs more presence to read against a near-black one) */
    opacity: .12 !important;
}
body:not(.w9a-modal-open) .w9a-card:hover {
    border-color: var(--w9a-tint-30, rgba(249, 233, 0, .4)) !important;
    box-shadow: 0 18px 40px -10px var(--w9a-tint-30, rgba(249, 233, 0, .30)), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}
body:not(.w9a-modal-open) .w9a-card:hover::before { opacity: .22 !important; }

.w9a-main { padding: 14px 16px 14px 14px; }

/* avatar ring — was white-on-white-card; needs to sit on dark now */
.w9a-photo,
.w9a-card .w9a-photo {
    box-shadow: 0 0 0 2px #17150F, 0 0 0 4px var(--w9a-tint-30, rgba(249, 233, 0, .35)) !important;
}
.w9a-verified-badge,
.w9a-card .w9a-verified-badge {
    box-shadow: 0 0 0 2px #17150F !important;
}
/* one avatar-placeholder gradient (v1) ended in navy — swapped for a
   charcoal so no gradient on this page still contains #08415C */
.w9a-avatar-v1 { background: linear-gradient(135deg, #8C92AC 0%, #2E3242 100%); }

.w9a-name,
.w9a-card .w9a-name { color: #FFFFFF !important; }
.w9a-crown { filter: drop-shadow(0 0 4px rgba(249, 233, 0, .4)); }

/* tier badge — was a light tint pill with dark-on-light ink (designed for
   the old solid-gold card); on a dark card that reads as a low-contrast
   smudge, so it becomes a glass chip with the tier's own bright accent as
   the text color instead of the darker "ink" variant */
.w9a-group,
.w9a-card .w9a-group {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--w9a-tint-30, rgba(249, 233, 0, .3));
    color: var(--w9a-c, #F9E900) !important;
}

/* rating stars — plain gold regardless of tier, the conventional color for
   a star rating; tier identity already carries fully on the badge + glow */
.w9a-rating,
.w9a-card .w9a-rating { color: #F9E900 !important; }
.w9a-rating::before,
.w9a-idrow::before { background: rgba(255, 255, 255, .22); }

.w9a-idrow { color: rgba(255, 255, 255, .48); }
.w9a-idlabel { color: rgba(255, 255, 255, .62); }

/* contact toggle — dark glass circle, tier-accented border/icon, fills with
   the tier gradient on hover (same interaction as before, new resting look) */
.w9a-toggle {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--w9a-tint-30, rgba(255, 255, 255, .16)) !important;
    color: var(--w9a-c, #F9E900) !important;
}
.w9a-toggle:hover,
.w9a-card .w9a-toggle:hover,
body .w9a-card .w9a-toggle:hover {
    background: linear-gradient(135deg, var(--w9a-c, #F9E900), var(--w9a-c2, #E6D200)) !important;
    color: var(--w9a-ink, #1A1813) !important;
    border-color: transparent !important;
}

/* ---------- contact modal — dark panel to match ---------- */
.w9a-contact {
    background: linear-gradient(180deg, #1A170F 0%, #0E0C09 100%) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55) !important;
}
.w9a-modal-header {
    background: radial-gradient(120% 140% at 0% 0%, rgba(249, 233, 0, .16), transparent 65%), rgba(255, 255, 255, .04) !important;
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}
.w9a-modal-photo { box-shadow: 0 0 0 2px #17150F, 0 0 0 4px rgba(249, 233, 0, .30) !important; }
.w9a-modal-id b { color: #FFFFFF !important; }
.w9a-modal-id span { color: rgba(255, 255, 255, .55) !important; }
.w9a-contact-item {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .10) !important;
}
.w9a-contact-number { color: #FFFFFF !important; }
.w9a-col-wa .w9a-col-head { color: #34D399 !important; }
.w9a-col-msn .w9a-col-head { color: #F9E900 !important; }
.w9a-copy-btn {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .70) !important;
}
.w9a-copy-btn:hover,
.w9a-copy-btn.w9a-copied { color: var(--w9a-ink, #1A1813) !important; }
.w9a-msg-msn { color: var(--w9a-ink, #1A1813) !important; }

/* ==========================================================================
   4. TRUST PANEL + CLOSING CTA — both reuse the shared `.b9g-glass--dark
   .b9g-mesh--navy` utility (sections-glass.css); this page is the only
   place that combo still renders literal navy, so it's repainted dark here
   rather than touching the shared utility class (kept available for
   whatever originally used it elsewhere).
   ========================================================================== */
/* Elementor's own "lazy-load background images" optimization injects an
   inline <style> rule — `.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded)
   :not(.e-no-lazyload) *{ background-image:none !important }` — targeting
   every descendant of containers past the first couple, at specificity
   (0,5,0) (four :not()/pseudo-class components). That beats this rule's
   (0,3,0) even with !important on both sides, so a `background:` SHORTHAND
   here would have its background-image half silently blanked (and, since
   shorthand resets background-color to transparent when no solid color is
   given, the panel would render as fully invisible — which is exactly what
   happened first attempt). Split into two longhands: background-color is a
   property Elementor's rule never touches, so it wins immediately and
   unconditionally; background-image carries the gradient for once
   Elementor's own JS adds `.e-lazyloaded` on scroll-into-view and the
   blocking rule stops matching. */
.w9a-trust.b9g-glass--dark.b9g-mesh--navy,
.b9g-mesh--navy.w9a-trust,
body.w9-agentpage .b9g-glass--dark.b9g-mesh--navy {
    background-color: #17150F !important;
    background-image: linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}
body.w9-agentpage .b9g-mesh--navy::before {
    /* the dotted gold mesh overlay still works fine on dark — kept, just
       confirming it isn't accidentally scoped out */
    opacity: .5;
}
.w9a-trust__media { border-color: rgba(249, 233, 0, .4) !important; }

/* ==========================================================================
   5. TIER PAGES HERO (master/super/admin/sub-admin-agent-list) — these 4
   pages don't use `.w9a-hero2` at all; their hero is `.s5-ihero`, the
   shared cream/gold "s5" component from w9-site5.php ALSO used by About/
   Terms/FAQ/Blog. Repainting `.s5-ihero` globally would hit those unrelated
   pages, so every rule here is scoped to `body.w9-agentpage` — a body class
   `w9-agent-pages.php` already adds only on the 8 agent-family page IDs,
   and of those, only the 4 tier pages (+ customer-service/new-account/
   complaints-feedback, which share the identical hero template) actually
   contain an `.s5-ihero`; page 54 uses `.w9a-hero2` instead, so this can't
   double-apply there. Structure stays exactly as-is (eyebrow → h1 → lede →
   .s5-herometa stat line) — only the color identity changes, matching
   `.w9a-hero2` / video-hero.css's dark gradient + gold accents.
   ========================================================================== */
body.w9-agentpage .s5-ihero {
    background:
        radial-gradient(820px 400px at 70% 0%, rgba(249, 233, 0, .16), transparent 64%),
        linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}
/* agent-pages.css carries a SEPARATE `@media(min-width:1025px)` rule on
   `body.w9-agentpage:not(.w9-agentpage-cs) .s5-ihero` (the right-bleed
   decorative photo wash) whose `:not()` adds a class of specificity —
   (0,3,1) vs. the plain rule above's (0,2,1) — so it wins at desktop
   widths regardless of `!important` or load order, same class of bug as
   the mobile-menu `li a` tie (see mobile-menu-premium.css). Matching its
   exact selector text (both the `:not()` and the `-cs` variant) is the
   only way to beat it. Structure is kept identical — same radial glow +
   left-to-right wash + right-bleed photo + solid fallback, same
   position/size/repeat layer order — only the cream (`var(--s5-cream)`)
   stops recolored to the dark palette so the decorative photo survives
   but reads as a premium dark bleed instead of the old cream card. */
@media (min-width: 1025px) {
    body.w9-agentpage:not(.w9-agentpage-cs) .s5-ihero {
        background:
            radial-gradient(820px 400px at 70% 0%, rgba(249, 233, 0, .18), transparent 64%),
            linear-gradient(90deg, #17150F 0%, #17150F 46%, rgba(23, 21, 15, .55) 64%, transparent 88%),
            url("../../uploads/2026/07/Woman-Black-Sequin-Dress-Casino-Table.jpg"),
            #17150F !important;
        background-position: 0 0, 0 0, right center, 0 0 !important;
        background-size: auto, auto, auto 100%, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
    }
    body.w9-agentpage-cs .s5-ihero {
        background:
            radial-gradient(820px 400px at 70% 0%, rgba(249, 233, 0, .18), transparent 64%),
            linear-gradient(90deg, #17150F 0%, #17150F 46%, rgba(23, 21, 15, .55) 64%, transparent 88%),
            url("../../uploads/2026/07/ai-generated-beautiful-girl-in-a-casino-photo.jpg"),
            #17150F !important;
        background-position: 0 0, 0 0, right center, 0 0 !important;
        background-size: auto, auto, auto 100%, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
    }
}
/* the hero's own bottom "wave" divider is a literal white SVG shape, drawn
   to blend a CREAM hero into the cream section below it (colors a hair
   apart) — on a dark hero that same white shape would read as a stray pale
   blob instead of a smooth transition, so it's removed rather than
   recolored (the dark hero already sits flush against the cream search
   section below with no divider, same as `.w9a-hero2` on page 54). */
body.w9-agentpage .s5-ihero.s5-wave-b::after { background-image: none !important; }

body.w9-agentpage .s5-ihero .s5-eyebrow .elementor-heading-title {
    background: rgba(249, 233, 0, .16) !important;
    color: #F9E900 !important;
}
body.w9-agentpage .s5-ihero h1.elementor-heading-title {
    color: #FFFFFF !important;
}
body.w9-agentpage .s5-ihero .s5-lede p {
    color: rgba(255, 255, 255, .76) !important;
}
/* .s5-herometa's own bold/icon accents (var(--s5-gold-3)/var(--s5-gold))
   already read fine on dark — only the plain text + separator dot (both
   tuned for cream) need repainting */
body.w9-agentpage .s5-ihero .s5-herometa { color: rgba(255, 255, 255, .68) !important; }
body.w9-agentpage .s5-ihero .s5-herometa span + span::before { background: rgba(255, 255, 255, .3) !important; }

@media (max-width: 767px) {
    body.w9-agentpage .s5-ihero .s5-lede p,
    body.w9-agentpage .s5-ihero .s5-herometa { text-align: center; }
}

/* ==========================================================================
   6. RESPONSIVE — carry the dark-card sizing through the existing mobile
   breakpoints (agent-list.css already handles layout/size at these widths,
   this only needs to confirm colors, which are unconditional above and
   already apply at every width)
   ========================================================================== */
@media (max-width: 767px) {
    .w9a-photo,
    .w9a-card .w9a-photo { box-shadow: 0 0 0 2px #17150F, 0 0 0 3px var(--w9a-tint-30, rgba(249, 233, 0, .35)) !important; }
}

/* ==========================================================================
   7. TIER PAGES — SECTIONS BELOW THE AGENT GRID (district-trust / local-
   trust 3-card grid / closing CTA). These 3 blocks were authored fresh for
   the 4 tier pages rather than copied from an already-dark page, and their
   wrapping Elementor containers were never given a background of their own
   (confirmed directly in the DB — the district-trust and CTA wrappers carry
   no background_background key at all; the 3-card grid's wrapper only has
   the inert `s5-sec--white` class, which has no matching rule anywhere in
   site5.php, so it was just showing the base `.s5-sec` cream gradient).
   With no dark backdrop under them, .vk-story's hard-coded white text
   (seo-special.css, built for a dark photo it never got here) read as
   near-invisible white-on-cream, and the 3-card grid looked like a plain,
   unstyled leftover next to the dark hero/cards above it.
   Scoped to `body.w9a-tier` (master/super/admin/sub-admin only, added in
   w9-agent-pages.php) for the 3-card grid/CTA below — customer-service/
   complaints-feedback/new-account don't use that specific component.
   The `.vk-story` rules just below are scoped to the wider `body.w9-
   agentpage` instead: complaints-feedback and new-account both ship their
   own `.vk-story` instance with the exact same missing-background bug
   (customer-service has no `.vk-story` at all, so it's simply unaffected
   by the wider selector — confirmed via a live DOM check, not assumed). */

/* ---------- district trust (.vk-story, no media/photo on these pages) --- */
body.w9-agentpage .vk-story {
    /* wickets-home.css's generic `body.vk .vk-section{background:...!important}`
       (2 classes, !important) otherwise wins over this — match !important.
       Split into color+image (not the `background` shorthand): Elementor's
       lazy-load feature injects `.e-con...:not(.e-lazyloaded) *{
       background-image:none!important}` at higher specificity than this
       rule for any section below the fold on first paint — background-color
       is untouched by that rule and wins immediately, same fix as the
       trust-panel lazy-load bug in section 4 above. */
    background-color: #17150F !important;
    background-image:
        radial-gradient(700px 380px at 20% 0%, rgba(249, 233, 0, .10), transparent 60%),
        linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}
/* `.vk-section{ max-width:var(--vk-max); margin:0 auto }` (wickets-home.css)
   boxes EVERY `.vk-section`, including this one — on the home page's own
   copy of this component that's invisible (the photo is `position:absolute;
   inset:0` against `.vk-story`, so it's boxed too, just nobody's compared
   it to the viewport edge). Explicitly requested full-bleed here, so the
   max-width is lifted on the outer element and reapplied to `__inner`
   instead, keeping the heading/lede/stat-grid at a readable width while
   the dark background now spans edge to edge. */
body.w9-agentpage .vk-story { max-width: none !important; }
body.w9-agentpage .vk-story__inner {
    max-width: var(--vk-max, 1280px);
    margin: 0 auto;
}
/* .vk-story__note lost its styling sitewide when the element was deleted
   from the home page's own copy of this section (its CSS went with it) —
   these pages still ship the element, so it was rendering as unstyled
   fallback text; given a light pill treatment instead of removing the
   content outright, since it carries a real customer-service link */
body.w9-agentpage .vk-story__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 26px auto 0;
    max-width: 68ch;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .68);
    font-size: 13.5px;
    text-align: center;
}
body.w9-agentpage .vk-story__note svg { flex: none; color: #F9E900; }
body.w9-agentpage .vk-story__note a { color: #F9E900; font-weight: 600; }
body.w9-agentpage .vk-story__note a:hover { color: #FFFFFF; }
@media (max-width: 560px) {
    body.w9-agentpage .vk-story__note { flex-direction: column; gap: 4px; border-radius: 18px; }
}

/* ---------- local-trust 3-card grid (currently the bare `.s5-sec` cream
   gradient — `s5-sec--white` itself has no matching rule in site5.php) --- */
body.w9a-tier .s5-sec--white {
    /* background-color/background-image split — see .vk-story above for
       why (Elementor lazy-load blanks background-image below the fold) */
    background-color: #17150F !important;
    background-image:
        radial-gradient(820px 420px at 50% 0%, rgba(232, 162, 0, .18), transparent 66%),
        linear-gradient(180deg, #17150F 0%, #0E0C09 100%) !important;
}
/* the connecting wave divider is a hard-coded white SVG shape (site5.php),
   drawn to blend a white section into the cream one below — on a dark
   section it would read as a stray pale blob, so it's suppressed rather
   than recolored (same call as the .s5-ihero wave in section 5 above) */
body.w9a-tier .s5-sec--white.s5-wave-t::before,
body.w9a-tier .s5-sec--white.s5-wave-b::after { background-image: none !important; }

body.w9a-tier .s5-sec--white .s5-eyebrow .elementor-heading-title { color: #F9E900 !important; }
body.w9a-tier .s5-sec--white .s5-sechead .elementor-heading-title { color: #FFFFFF !important; }

body.w9a-tier .s5-sec--white .s5-card {
    background: linear-gradient(160deg, #1A170F 0%, #0E0C09 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
body.w9a-tier .s5-sec--white .s5-card:hover {
    box-shadow: 0 18px 40px -10px rgba(249, 233, 0, .22), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}
body.w9a-tier .s5-sec--white .s5-card h3 { color: #FFFFFF !important; }
body.w9a-tier .s5-sec--white .s5-card p { color: rgba(255, 255, 255, .68) !important; }
/* `.s5-chip` has no rule at all outside `.s5-tier .s5-chip` (site5.php) —
   these cards' icon badge was rendering as a bare unstyled <i> glyph;
   gives it the same gold-chip treatment `.s5-tier` gets elsewhere */
body.w9a-tier .s5-sec--white .s5-card .s5-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    margin-bottom: 14px;
    background: rgba(249, 233, 0, .14);
    color: #F9E900;
    font-size: 17px;
}

/* NOTE: closing CTA (.vk-cta--premium) intentionally left untouched here —
   confirmed on the home page that this component's own background is
   transparent and its `.vk-h1`/`.vk-eyebrow`/`.vk-lead` text is dark ink
   (#1A1813) by design, meant to sit on the page's light/cream backdrop.
   An earlier version of this file gave it a dark background to match the
   other two sections, which broke contrast (dark ink on a dark bg) instead
   of fixing anything — this section was never actually broken. */

/* ==========================================================================
   8. CLOSING CTA — gradient-dependent text/button invisible before lazy-
   load fires. Confirmed live on customer-service (and by construction, on
   every page reusing `.vk-cta--premium`, so scoped to the whole family
   rather than one page): the highlighted word in the CTA heading
   (`.vk-h1 em`, wickets-home.css) uses `background:var(--vk-grad-em);
   -webkit-background-clip:text; -webkit-text-fill-color:transparent;` —
   text-fill-color is unconditionally transparent, so if the background
   layer doesn't paint, the text is 100% invisible, not just less colorful.
   Same story for `.vk-btn--whatsapp` (buttons.css): its green fill is
   `background:var(--btn-wa-grad) !important` with no solid color under it,
   so white button text sits on nothing.
   Root cause, confirmed live (isLazyloaded:false, backgroundImage:"none"
   on first paint before scrolling): Elementor's own lazy-load feature
   injects `.e-con...:not(.e-lazyloaded) *{ background-image:none
   !important }` for any container below the fold — this specificity
   (0,5,0) beats the base rules above even with matching !important, and
   neither variable itself is broken (both resolve fine once checked). This
   is the exact background-color/background-image split used throughout
   this file for the same underlying Elementor behavior — background-color
   is a property that rule never touches, so a solid approximation of each
   gradient shows immediately and gets replaced by the prettier gradient
   the instant `.e-lazyloaded` is added on scroll-into-view. */
body.w9-agentpage .vk-h1 em,
body.w9-agentpage .vk-h2 em {
    /* !important on both: reset.css's `*, ::after, ::before{ background:
       transparent !important }` decomposes to background-color:transparent
       !important too — non-important would lose to that despite higher
       specificity, since !important always wins specificity ties. */
    background-color: #B8860B !important;
    background-image: var(--vk-grad-em) !important;
}
body.w9-agentpage .vk-btn--whatsapp {
    background-color: #25D366 !important;
    background-image: var(--btn-wa-grad) !important;
}