/* Shared navigation palette. Keep the header and mega menus consistent on every page. */
:root {
    --primary: #7027B9;
    --color-gray: #7027B9;
}

/* Global project-estimate announcement bar. Keep it pinned above the main
   navigation for the full page so the estimate action is always available. */
:root {
    --deployed-project-bar-height: 54px;
}

.deployed-project-estimate-bar {
    position: sticky;
    top: 0;
    z-index: 10001;
    display: flex;
    width: 100%;
    min-height: var(--deployed-project-bar-height);
    align-items: center;
    overflow: hidden;
    color: #1A0F2E;
    border-bottom: 1px solid rgba(43, 0, 77, 0.14);
    background: #FFFFFF;
    box-shadow:
        inset 0 -1px 0 rgba(112, 39, 185, 0.06),
        0 8px 24px rgba(43, 0, 77, 0.08);
    isolation: isolate;
}

.deployed-project-estimate-bar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 1360px);
    min-height: var(--deployed-project-bar-height);
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 2.4vw, 38px);
    margin: 0 auto;
    padding: 8px clamp(28px, 4vw, 64px);
}

.deployed-project-estimate-bar__message {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #4A4358;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.deployed-project-estimate-bar__message strong {
    color: #1A0F2E;
    font-weight: 750;
}

.deployed-project-estimate-bar__cta {
    position: relative;
    display: inline-flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 17px 10px 19px !important;
    cursor: pointer;
    overflow: hidden;
    color: #3A0B5A !important;
    border: 1.5px solid #2B004D;
    /* Square, like every other button the site ships — the privacy page, the
       consent dialog, the forms. The sweeping sheen and the bouncing arrow
       that used to live here were the only animated CTA anywhere on the site,
       which is what made it read as a bolted-on widget rather than page
       furniture. The corner radius also used to change on hover. */
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96) !important;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.deployed-project-estimate-bar__cta span {
    position: relative;
    color: inherit !important;
}

.deployed-project-estimate-bar__cta:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    border-color: #7027B9;
    background: #7027B9 !important;
}

/* Estimate dock — a small bar pinned beside the AI chat launcher, so the free
   estimate stays reachable once the header bar has scrolled away.
   The launcher is a 68px circle sitting at max(24px, safe-area) from the
   bottom-right; these offsets place the dock immediately to its left and
   centre it on the same axis. */
.deployed-estimate-dock {
    position: fixed;
    /* One below the chat widget's z-index so the open panel always wins. */
    z-index: 2147482999;
    right: calc(max(24px, env(safe-area-inset-right)) + 68px + 12px);
    bottom: calc(max(24px, env(safe-area-inset-bottom)) + 14px);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 18px 0 24px;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    /* Flat, square and one solid purple, matching the site's own buttons. The
       three-stop gradient, the pill radius and the drop glow made this the
       loudest element on the page. */
    border: 1px solid #7027B9;
    border-radius: 0;
    /* !important on both this and the hover below: the mirrored theme ships a
       broad `[type="button"]:hover, [type="button"]:focus { background-color:
       inherit }` rule at equal specificity but later in the cascade, which
       resolves to the white page background. The old gradient hid this — a
       background-image paints over an inherited background-color — so
       flattening to a solid colour exposed it as white-on-white text. The
       banner CTA above already guards itself the same way. */
    background: #7027B9 !important;
    font-family: "Plus Jakarta Sans", Inter, sans-serif;
    /* Fluid so the label scales down on narrow phones and never crowds the
       launcher, while staying at its intended size on desktop. */
    font-size: clamp(11px, 3.2vw, 13.5px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 180ms ease, border-color 180ms ease, opacity 160ms ease;
}

/* The mirrored theme carries broad `span { color: var(--service-home-ink)
   !important }` rules that otherwise darken this label. Pin the pill's own
   text white with matching importance so it stays legible on the purple. */
.deployed-estimate-dock,
.deployed-estimate-dock__text,
.deployed-estimate-dock__text strong {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.deployed-estimate-dock__text strong {
    font-weight: 800;
    letter-spacing: 0.02em;
}

.deployed-estimate-dock:is(:hover, :focus-visible) {
    border-color: #5C1F9A;
    background: #5C1F9A !important;
}

/* Hidden while the chat panel itself is open. */
.deployed-estimate-dock.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 600px) {
    .deployed-estimate-dock {
        height: 36px;
        gap: 7px;
        padding: 0 14px 0 18px;
        right: calc(max(16px, env(safe-area-inset-right)) + 68px + 8px);
        bottom: calc(max(24px, env(safe-area-inset-bottom)) + 16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .deployed-estimate-dock { transition: none; }
}

.deployed-project-estimate-bar__cta:is(:hover, :focus-visible)::before {
    opacity: 0;
    animation-play-state: paused;
}

.deployed-project-estimate-bar__cta:is(:hover, :focus-visible) svg {
    animation-duration: 0.85s;
}

.deployed-project-estimate-bar__cta:focus-visible {
    outline: 3px solid rgba(112, 39, 185, 0.28);
    outline-offset: 2px;
}

#site-header .header-wrapper-alt:not(.sticky) {
    top: var(--deployed-project-bar-height);
}

#site-header .header-wrapper-alt.sticky,
#site-header.sticky .header-wrapper-alt {
    top: var(--deployed-project-bar-height);
}

/* The imported theme pins desktop mega menus to the viewport at 48px, which
   places them on top of the navigation after the project bar moves the header
   down. Anchor every top-level mega menu to the actual bottom of that stack. */
@media (min-width: 1025px) {
    .header-wrapper-alt .menu-item-has-children.hovered > .sub-menu {
        top: calc(var(--deployed-project-bar-height) + var(--header-height-li)) !important;
        max-height: calc(100vh - var(--deployed-project-bar-height) - var(--header-height-li)) !important;
    }
}

@media (max-width: 700px) {
    :root {
        --deployed-project-bar-height: 50px;
    }

    .deployed-project-estimate-bar__inner {
        padding: 7px 20px;
    }

    .deployed-project-estimate-bar__message {
        display: none;
    }

    .deployed-project-estimate-bar__cta {
        min-height: 34px;
        padding: 9px 17px 9px 19px !important;
        font-size: 12px;
        letter-spacing: 0.04em;
    }
}

@media (prefers-reduced-motion: reduce) {

    .deployed-project-estimate-bar__cta::before,
    .deployed-project-estimate-bar__cta svg {
        animation: none;
    }
}

.cta-contact-us a,
.header-wrapper-alt.menu-open .cta-contact-us a,
.header-wrapper-alt.menu-open.blue-header .cta-contact-us a,
.white-header .header-wrapper-alt .cta-contact-us a,
.site-header.sticky .header-wrapper-alt .cta-contact-us a {
    background-color: #7027B9 !important;
    border-color: #7027B9 !important;
    color: #fff !important;
}

#menu-main-menu>li::after,
.tabs-content-card .card-item:hover h4::before,
.tabs-content-card .card-item:hover .header-service-title::before {
    background-color: #7027B9 !important;
}

#menu-main-menu>li.hovered>a,
.header-wrapper-alt.menu-open #menu-main-menu>li.hovered>a,
.tabs-content-card .card-item:hover h4,
.tabs-content-card .card-item:hover .header-service-title,
.mega-ai-btn:hover,
.popular-tag.new {
    color: #7027B9 !important;
}

#menu-main-menu>li.hovered>a svg path,
.mega-ai-btn:hover svg path {
    fill: #7027B9 !important;
}

.menu-vertical-tabs .tabs-menu li.active,
.mobile-menu-wrp ul li.submenu-heading.open>span {
    background: radial-gradient(140.86% 125.07% at 10.25% 0%,
            #2B004D 0%,
            #7027B9 100%) !important;
}

.spotlight-card {
    background-color: #EEE6FB !important;
}

.popular-tag.new {
    background: rgba(112, 39, 185, 0.22) !important;
}

.resource-banner-mobile a {
    overflow: hidden;
    background: linear-gradient(110deg,
            #2B004D 0%,
            #7027B9 48%,
            #9F43F0 100%) !important;
}

/* Remove every original/optimized variant of the legacy blue artwork without
   altering the shared banner layout or its separate white arrow icon. */
.resource-banner-mobile img[data-src*="resource-shape"],
.resource-banner-mobile img[bv-data-src*="resource-shape"],
.resource-banner-mobile img[src*="resource-shape"] {
    display: none !important;
}

/* Resources navigation now exposes Blogs only. The remaining legacy entries
   are retained as HTML comments by the server-side renderer. */
.hovered .res-sub-menu.resource-menu--blogs-only {
    width: 430px !important;
    height: auto !important;
}

.res-sub-menu.resource-menu--blogs-only .mega-menu-wrp,
.res-sub-menu.resource-menu--blogs-only .tabs-content {
    display: block;
    width: 100%;
    min-height: 0;
}

.res-sub-menu.resource-menu--blogs-only .tabs-content {
    padding: 20px;
}

.res-sub-menu.resource-menu--blogs-only .tabs-content-card {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

/* Keep the Blogs destination visible on the left, with one related article as
   the right-hand feature. The retired resource links remain server comments. */
.hovered .res-sub-menu.resource-menu--blogs-featured {
    width: min(1140px, calc(100vw - 32px)) !important;
}

.res-sub-menu.resource-menu--blogs-featured .mega-menu-wrp {
    display: flex !important;
    align-items: stretch;
}

.res-sub-menu.resource-menu--blogs-featured .tabs-content {
    width: auto !important;
    flex: 1 1 auto;
    padding: 28px 34px;
}

.res-sub-menu.resource-menu--blogs-featured .tabs-content-card {
    max-width: none;
}

.res-sub-menu.resource-menu--blogs-featured .spotlight-card.resources-blog-spotlight {
    display: block;
    width: min(420px, 38%);
    max-width: none;
    flex: 0 0 min(420px, 38%);
    padding: 28px 34px 32px;
    background: #eee6fb !important;
}

.resources-blog-spotlight .spotlight-main-text {
    margin-bottom: 18px !important;
}

.resources-blog-spotlight .spotlight-item {
    display: grid;
    gap: 16px;
}

.resources-blog-spotlight .thumb-wrap {
    display: block;
    overflow: hidden;
    height: 155px;
    background: #d9c8ee;
}

.resources-blog-spotlight .thumb-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.resources-blog-spotlight .spotlight-link-title {
    margin-bottom: 11px !important;
}

.resources-blog-spotlight .mega-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.resources-blog-spotlight .mega-ai-btn svg {
    top: auto;
}

/* The Services menu no longer includes its right-hand Spotlight white paper. */
#menu-main-menu>li.service-menu--without-spotlight .content-main-wrapper .tabs-content {
    width: 100%;
}

#menu-main-menu>li.service-menu--without-spotlight .content-main-wrapper .tabs-content-card {
    max-width: none;
}

/* Individual blog posts include consultation promotions in the article and
   sidebar, plus an optional sidebar subscription form. Remove these detail-only
   blocks while preserving newsletter forms in the global site footer. */
.blog-single-wrapper .single-template-content-blog .blog-single-cta,
.blog-single-wrapper .single-template-content-blog .single-template-subscription {
    display: none !important;
}

/* Some individual blog posts end with the shared consultation form template.
   Keep its outer CTA artwork untouched, but give the complete right-side form
   panel an opaque white surface so its dark copy and controls remain legible. */
.white-paper-review-form [data-id="bcb5451"],
.white-paper-review-form [data-id="93a03e9"],
.white-paper-review-form [data-id="93a03e9"]>.e-con-inner,
.white-paper-review-form [data-id="25355c1"],
.white-paper-review-form [data-id="25355c1"]>.elementor-widget-container,
.white-paper-review-form [data-id="25355c1"] .elementor-shortcode,
.white-paper-review-form #contact-custom-form {
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
}

.white-paper-review-form [data-id="bcb5451"],
.white-paper-review-form [data-id="93a03e9"] {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate;
}

.white-paper-review-form [data-id="bcb5451"]::before,
.white-paper-review-form [data-id="bcb5451"]::after,
.white-paper-review-form [data-id="93a03e9"]::before,
.white-paper-review-form [data-id="93a03e9"]::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

.white-paper-review-form #contact-custom-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.white-paper-review-form #contact-custom-form select,
.white-paper-review-form #contact-custom-form textarea {
    background-color: #F7F2FC !important;
    color: #1A0F2E !important;
}

.white-paper-review-form #contact-custom-form label,
.white-paper-review-form #contact-custom-form .checkbox-field label,
.white-paper-review-form [data-id="25355c1"] .custom-label label {
    color: #1A0F2E !important;
    opacity: 1 !important;
}

.white-paper-review-form [data-id="25355c1"] .custom-label a {
    color: #8331D9 !important;
}

/* Remove only the compact article-level subscribe card from newsroom detail
   pages. The separate global footer newsletter remains available. */
.news-single-wrapper .news-bottom-wrapper-single .single-template-subscription {
    display: none !important;
}

.header-search-panel {
    border-top-color: rgba(131, 49, 217, 0.12) !important;
}

.global-search-form button,
.global-search-form button:hover {
    background-color: #8331D9 !important;
}

/* The homepage slider toggles `blue-header` when returning to the top. Its
   legacy rule turns the navigation white even when the hero/header area is
   light. Keep the top-level navigation readable without recoloring megamenus. */
.home .header-wrapper-alt.blue-header:not(.menu-open) #menu-main-menu>li>a,
.home .header-wrapper-alt.blue-header:not(.menu-open) .header-search-toggle,
.home .header-wrapper-alt.blue-header:not(.menu-open) .header-search-toggle:hover,
.home .header-wrapper-alt.blue-header:not(.menu-open) .header-search-toggle:focus {
    color: #1A0F2E !important;
}

.home .header-wrapper-alt.blue-header:not(.menu-open) .header-logo svg path {
    fill: #8331D9 !important;
}

.home .header-wrapper-alt.blue-header:not(.menu-open) #menu-main-menu>li.menu-item-has-children>a svg path,
.home .header-wrapper-alt.blue-header:not(.menu-open) .header-menu-cta svg path {
    fill: #1A0F2E !important;
}

@media (max-width: 1024px) {
    .mobile-menu-wrp ul li.submenu-heading li::before {
        background-color: #8331D9 !important;
    }

    .header-wrapper-alt {
        box-shadow: 0 2px 4px rgba(131, 49, 217, 0.12) !important;
    }
}

/* Customers archive: color substitution only; retain its original design. */
.page-id-36343 .filter-dropdown input[type="checkbox"] {
    accent-color: #8331D9;
}

.page-id-36343 :is(button, a, input):focus-visible {
    outline-color: #8331D9;
}

/* Customers hero: replace the blue half-circle with purple faceted ribbons. */
.page-id-36343 .featured-section.featured-slider.case-study-main-wrapper {
    position: relative;
    overflow: hidden;
    background-image: none !important;
}

.page-id-36343 .case-study-main-wrapper::before,
.page-id-36343 .case-study-main-wrapper::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.page-id-36343 .case-study-main-wrapper::before {
    width: min(760px, 50vw);
    height: min(420px, 48vw);
    top: -10%;
    right: -7%;
    background: linear-gradient(135deg, #3B1F5C 0%, #8331D9 55%, #A855F7 100%);
    clip-path: polygon(18% 0, 100% 0, 100% 68%, 72% 100%, 0 74%);
    opacity: 0.96;
}

.page-id-36343 .case-study-main-wrapper::after {
    width: min(460px, 32vw);
    height: min(250px, 28vw);
    top: 16%;
    right: 18%;
    background: linear-gradient(135deg, rgba(232, 211, 255, 0.88), rgba(168, 85, 247, 0.24));
    clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
    filter: blur(18px);
}

.page-id-36343 .case-study-main-wrapper .featured-section-container {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .page-id-36343 .case-study-main-wrapper::before {
        width: 72vw;
        height: 52vw;
        top: 2%;
        right: -28%;
        opacity: 0.82;
    }

    .page-id-36343 .case-study-main-wrapper::after {
        width: 46vw;
        height: 28vw;
        top: 19%;
        right: 2%;
    }
}

/* The Contact Us page currently has one location, so keep its location tab
   concise rather than leaving the wide multi-office control in place. */
.map-wrapper--lahore-only .map-tabs {
    justify-content: flex-start;
}

.map-wrapper--lahore-only .map-tabs>button:only-child {
    min-width: min(100%, 260px);
}

/* Webinars archive: extend the homepage violet system through the complete
   archive without recolouring speaker photography or webinar thumbnails. */
:root:has(.webinar-archive) {
    --webinar-deep: #2B004D;
    --webinar-primary: #7027B9;
    --webinar-highlight: #9F43F0;
    --webinar-soft: #EEE6FB;
    --webinar-hover: #5B149B;
    --webinar-ink: #1A0F2E;
}

:root:has(.webinar-archive) body {
    color: var(--webinar-ink);
    background: #FFFFFF;
}

:root:has(.webinar-archive) .archive-hero-section.webinar-archive {
    color: #FFFFFF;
    background: linear-gradient(120deg,
            #4B176E 0%,
            var(--webinar-primary) 56%,
            var(--webinar-highlight) 100%) !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-left {
    background:
        radial-gradient(circle at 10% 4%, rgba(255, 255, 255, 0.12), transparent 31%),
        linear-gradient(128deg, #4B176E 0%, var(--webinar-primary) 72%, #8732D5 100%) !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-left :is(h1, p) {
    color: #FFFFFF !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-left-top h1 {
    letter-spacing: -0.045em;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-left-top p {
    color: rgba(255, 255, 255, 0.88) !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-left-bottom>p {
    color: rgba(255, 255, 255, 0.72) !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-hero-logo-wrap {
    align-items: center;
}

:root:has(.webinar-archive) .webinar-archive .archive-hero-logo-wrap img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.92;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-right {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #4B176E 0%, var(--webinar-primary) 55%, var(--webinar-highlight) 100%) !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-right::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(43, 0, 77, 0.18), rgba(159, 67, 240, 0.18));
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-right::after {
    z-index: 2;
    background: rgba(112, 39, 185, 0.48) !important;
    mix-blend-mode: color !important;
}

:root:has(.webinar-archive) .webinar-archive .archive-wrapper-right img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: hue-rotate(44deg) saturate(0.92) contrast(1.03) !important;
}

/* Match the homepage header contract over the purple webinar hero. */
:root:has(.webinar-archive) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
    background: transparent !important;
    box-shadow: none !important;
}

:root:has(.webinar-archive) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.webinar-archive) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

:root:has(.webinar-archive) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.webinar-archive) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
    color: var(--webinar-ink) !important;
    -webkit-text-fill-color: var(--webinar-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

:root:has(.webinar-archive) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--webinar-hover) !important;
    border-color: var(--webinar-hover) !important;
}

:root:has(.webinar-archive) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 7px 24px rgba(43, 0, 77, 0.11) !important;
    backdrop-filter: blur(16px);
}

:root:has(.webinar-archive) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: var(--webinar-ink) !important;
    -webkit-text-fill-color: var(--webinar-ink) !important;
}

:root:has(.webinar-archive) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(#menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: var(--webinar-ink) !important;
    stroke: var(--webinar-ink) !important;
}

:root:has(.webinar-archive) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .header-logo svg path {
    fill: var(--webinar-primary) !important;
}

:root:has(.webinar-archive) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .deployed-site-logo {
    filter: none !important;
}

:root:has(.webinar-archive) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .cta-contact-us a {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--webinar-primary) !important;
    border-color: var(--webinar-primary) !important;
}

/* Featured webinar slider. */
:root:has(.webinar-archive) .webinar-featured {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 67, 240, 0.13), transparent 32%),
        #FAF7FD !important;
}

:root:has(.webinar-archive) .webinar-featured::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    bottom: -260px;
    border: 1px solid rgba(112, 39, 185, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 0 54px rgba(112, 39, 185, 0.035), 0 0 0 108px rgba(112, 39, 185, 0.025);
    pointer-events: none;
}

:root:has(.webinar-archive) .webinar-featured :is(.featured-section-top h2, .whitepaper-post-title) {
    color: var(--webinar-ink) !important;
}

:root:has(.webinar-archive) .webinar-featured .featured-single-slide {
    position: relative;
    padding: 28px;
    border: 1px solid rgba(112, 39, 185, 0.20);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(43, 0, 77, 0.08);
}

:root:has(.webinar-archive) .webinar-featured .featured-image-wrap {
    overflow: hidden;
    background: var(--webinar-soft);
}

:root:has(.webinar-archive) .webinar-featured .featured-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

:root:has(.webinar-archive) .webinar-featured .featured-single-slide:hover .featured-image-wrap img {
    transform: scale(1.025);
}

:root:has(.webinar-archive) .webinar-featured .webinar-category {
    width: fit-content;
    padding: 7px 12px;
    color: var(--webinar-primary) !important;
    background: var(--webinar-soft);
    border: 1px solid rgba(112, 39, 185, 0.22);
    border-radius: 999px;
}

:root:has(.webinar-archive) .webinar-featured .webi-description {
    color: #554B63 !important;
}

:root:has(.webinar-archive) .webinar-featured .featured-permalink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    background: var(--webinar-primary) !important;
    border: 1px solid var(--webinar-primary);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

:root:has(.webinar-archive) .webinar-featured .featured-permalink:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--webinar-hover) !important;
    border-color: var(--webinar-hover);
    transform: translateY(-2px);
}

:root:has(.webinar-archive) .webinar-featured .featured-permalink img {
    filter: brightness(0) invert(1) !important;
}

:root:has(.webinar-archive) .webinar-featured :is(.swiper-button-next, .swiper-button-prev) {
    background: #FFFFFF !important;
    border-color: rgba(112, 39, 185, 0.34) !important;
    box-shadow: 0 9px 25px rgba(43, 0, 77, 0.07);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

:root:has(.webinar-archive) .webinar-featured :is(.swiper-button-next, .swiper-button-prev):is(:hover, :focus-visible) {
    background: var(--webinar-primary) !important;
    border-color: var(--webinar-primary) !important;
}

:root:has(.webinar-archive) .webinar-featured :is(.swiper-button-next, .swiper-button-prev) img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(77%) saturate(3264%) hue-rotate(265deg) brightness(86%) contrast(92%);
}

:root:has(.webinar-archive) .webinar-featured :is(.swiper-button-next, .swiper-button-prev):is(:hover, :focus-visible) img {
    filter: brightness(0) invert(1) !important;
}

:root:has(.webinar-archive) .webinar-featured .swiper-pagination-bullet {
    background: rgba(112, 39, 185, 0.30) !important;
}

:root:has(.webinar-archive) .webinar-featured .swiper-pagination-bullet-active {
    background: var(--webinar-primary) !important;
}

/* All-webinars filter row and responsive card grid. */
:root:has(.webinar-archive) .white-paper-bottom.webinar-bottom {
    background:
        radial-gradient(circle at 0% 100%, rgba(159, 67, 240, 0.08), transparent 28%),
        #FFFFFF !important;
}

:root:has(.webinar-archive) .webinar-bottom .all-white {
    color: var(--webinar-ink) !important;
}

:root:has(.webinar-archive) .webinar-bottom .all-white span {
    color: var(--webinar-primary) !important;
}

:root:has(.webinar-archive) .webinar-bottom .filter-wrap {
    padding: 18px;
    border: 1px solid rgba(112, 39, 185, 0.15);
    background: #F8F3FC;
}

:root:has(.webinar-archive) .webinar-bottom .filter-toggle {
    color: var(--webinar-ink) !important;
    background-color: #FFFFFF !important;
    border: 1px solid rgba(112, 39, 185, 0.20) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

:root:has(.webinar-archive) .webinar-bottom .filter-toggle:is(:hover, :focus-visible),
:root:has(.webinar-archive) .webinar-bottom .filter-box:has(.filter-dropdown.show) .filter-toggle {
    color: var(--webinar-primary) !important;
    border-color: var(--webinar-primary) !important;
    box-shadow: 0 0 0 3px rgba(112, 39, 185, 0.10);
}

:root:has(.webinar-archive) .webinar-bottom .filter-toggle::before {
    filter: brightness(0) saturate(100%) invert(18%) sepia(77%) saturate(3264%) hue-rotate(265deg) brightness(86%) contrast(92%);
}

:root:has(.webinar-archive) .webinar-bottom .filter-dropdown {
    border-color: rgba(112, 39, 185, 0.22) !important;
    box-shadow: 0 16px 38px rgba(43, 0, 77, 0.14) !important;
}

:root:has(.webinar-archive) .webinar-bottom .filter-dropdown label {
    color: var(--webinar-ink);
    transition: background-color 0.2s ease, color 0.2s ease;
}

:root:has(.webinar-archive) .webinar-bottom .filter-dropdown label:is(:hover, :focus-within) {
    color: var(--webinar-primary);
    background: var(--webinar-soft);
}

:root:has(.webinar-archive) .webinar-bottom input[type="checkbox"] {
    accent-color: var(--webinar-primary);
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item {
    max-height: none;
    padding-bottom: 24px;
    border: 1px solid rgba(112, 39, 185, 0.16);
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(43, 0, 77, 0.06);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item:is(:hover, :focus-within) {
    transform: translateY(-6px);
    border-color: rgba(112, 39, 185, 0.44);
    box-shadow: 0 20px 42px rgba(43, 0, 77, 0.12);
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item .featured-image-wrap {
    overflow: hidden;
    background: var(--webinar-soft);
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item .featured-image-wrap img {
    width: 100%;
    transition: transform 0.45s ease;
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item:is(:hover, :focus-within) .featured-image-wrap img {
    transform: scale(1.035);
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item> :is(.whitepaper-category, .whp-title) {
    margin-left: 22px;
    margin-right: 22px;
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item .whitepaper-category {
    color: var(--webinar-primary) !important;
    background: var(--webinar-soft);
    border-color: rgba(112, 39, 185, 0.23);
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item .whp-title h3 {
    color: var(--webinar-ink) !important;
    transition: color 0.25s ease;
}

:root:has(.webinar-archive) .webinar-bottom .whitepaper-item:is(:hover, :focus-within) .whp-title h3 {
    color: var(--webinar-primary) !important;
}

:root:has(.webinar-archive) .webinar-bottom .pagination .page-numbers {
    color: var(--webinar-ink);
    background: var(--webinar-soft);
}

:root:has(.webinar-archive) .webinar-bottom .pagination :is(.page-numbers.current, .page-numbers.prev, .page-numbers.next) {
    color: #FFFFFF !important;
    background: var(--webinar-primary) !important;
}

:root:has(.webinar-archive) .webinar-bottom .pagination .page-numbers:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--webinar-hover) !important;
}

/* Archive consultation section and consent UI use the same accessible palette. */
:root:has(.webinar-archive) .white-paper-review-form {
    background: linear-gradient(128deg, var(--webinar-deep) 0%, var(--webinar-primary) 64%, var(--webinar-highlight) 100%) !important;
}

/* The shared Elementor template adds a second radial gradient to its inner
   `.contact-form`, producing a dark rectangular panel inside this section.
   Keep a single gradient on the outer section and make its structural left
   wrappers transparent; the actual form column remains deliberately white. */
:root:has(.webinar-archive) .white-paper-review-form>.elementor,
:root:has(.webinar-archive) .white-paper-review-form :is(.elementor-element-baeb164.contact-form,
    .elementor-element-0075163,
    .elementor-element-3fdacf0,
    .elementor-element-c43c5ff,
    .elementor-element-f39ae21,
    .elementor-element-51e5355) {
    background-color: transparent !important;
    background-image: none !important;
}

:root:has(.webinar-archive) .white-paper-review-form :is(.review-cta-title, .review-cta-title *, .hc-quote, .hc-name, .hc-designation) {
    color: #FFFFFF !important;
}

:root:has(.webinar-archive) .white-paper-review-form #contact-custom-form input[type="submit"] {
    color: #FFFFFF !important;
    background: var(--webinar-primary) !important;
}

:root:has(.webinar-archive) .white-paper-review-form #contact-custom-form input[type="submit"]:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--webinar-hover) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .main-cookies-section {
    color: #FFFFFF !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 67, 240, 0.45), transparent 40%),
        linear-gradient(126deg, var(--webinar-deep) 0%, #4B176E 55%, var(--webinar-primary) 100%) !important;
    border: 1px solid rgba(238, 230, 251, 0.24);
    box-shadow: 0 28px 80px rgba(43, 0, 77, 0.38) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .main-cookies-section :is(.elementor-heading-title, p, a) {
    color: #FFFFFF !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .accept-cookies .elementor-button {
    color: var(--webinar-ink) !important;
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .accept-cookies .elementor-button:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--webinar-hover) !important;
    border-color: var(--webinar-hover) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .manage-cookies .elementor-button {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .manage-cookies .elementor-button:is(:hover, :focus-visible) {
    color: var(--webinar-ink) !important;
    background: var(--webinar-soft) !important;
    border-color: var(--webinar-soft) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .manage-cookies-setting {
    color: var(--webinar-ink) !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(112, 39, 185, 0.20);
    box-shadow: 0 28px 80px rgba(43, 0, 77, 0.28) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .manage-cookies-setting :is(.elementor-heading-title, .faq_title) {
    color: var(--webinar-ink) !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .manage-cookies-setting .faq_answer {
    color: #63596F !important;
}

:root:has(.webinar-archive) .tkxel-cookie-container .manage-cookies-setting .switch input:checked+.slider {
    background: var(--webinar-primary) !important;
}

@media (max-width: 1024px) {
    :root:has(.webinar-archive) #site-header .header-wrapper-alt:not(.menu-open) {
        background: #FFFFFF !important;
        box-shadow: 0 5px 20px rgba(43, 0, 77, 0.09) !important;
    }

    :root:has(.webinar-archive) #site-header .header-wrapper-alt:not(.menu-open) :is(.deployed-logo-lockup,
        .deployed-logo-name,
        .header-search-toggle) {
        color: var(--webinar-ink) !important;
        -webkit-text-fill-color: var(--webinar-ink) !important;
    }

    :root:has(.webinar-archive) #site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
        filter: none !important;
    }

    :root:has(.webinar-archive) #site-header .header-wrapper-alt:not(.menu-open) .hamburger-icon span,
    :root:has(.webinar-archive) #site-header .header-wrapper-alt:not(.menu-open) .hamburger-icon span::before,
    :root:has(.webinar-archive) #site-header .header-wrapper-alt:not(.menu-open) .hamburger-icon span::after {
        background: var(--webinar-ink) !important;
    }

    :root:has(.webinar-archive) #site-header .header-wrapper-alt.menu-open .hamburger-icon span {
        background: transparent !important;
    }

    :root:has(.webinar-archive) .webinar-featured .featured-single-slide {
        padding: 22px;
    }
}

@media (max-width: 767px) {
    :root:has(.webinar-archive) .webinar-archive .archive-wrapper-left {
        background: linear-gradient(142deg, #4B176E 0%, var(--webinar-primary) 74%, var(--webinar-highlight) 100%) !important;
    }

    :root:has(.webinar-archive) .webinar-archive .archive-wrapper-right {
        min-height: 320px;
    }

    :root:has(.webinar-archive) .webinar-featured .featured-single-slide {
        padding: 16px;
    }

    :root:has(.webinar-archive) .webinar-featured .webinar-category {
        border-radius: 18px;
    }

    :root:has(.webinar-archive) .webinar-bottom .filter-wrap {
        padding: 14px;
    }

    :root:has(.webinar-archive) .webinar-bottom .whitepaper-item> :is(.whitepaper-category, .whp-title) {
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    :root:has(.webinar-archive) .webinar-featured .featured-image-wrap img,
    :root:has(.webinar-archive) .webinar-bottom .whitepaper-item,
    :root:has(.webinar-archive) .webinar-bottom .whitepaper-item .featured-image-wrap img,
    :root:has(.webinar-archive) .webinar-featured .featured-permalink {
        transition: none !important;
    }
}

/* Resources overview: extend the established Home violet system through the
   complete page while preserving every real resource thumbnail and all white
   catalog/reading surfaces. */
:root:has(.resources-hero) {
    --resources-deep: #2B004D;
    --resources-primary: #7027B9;
    --resources-highlight: #9F43F0;
    --resources-hover: #5B149B;
    --resources-soft: #EEE6FB;
    --resources-pale: #F8F3FC;
    --resources-ink: #1A0F2E;
    --resources-muted: #62586F;
    --resources-border: rgba(112, 39, 185, 0.22);
    --resources-ribbon:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a");
}

/* Full-width top ribbon and matching transparent-header contrast. */
:root:has(.resources-hero) .resources-hero {
    min-height: 520px;
    padding: 190px 52px 120px !important;
    background-color: var(--resources-deep) !important;
    background-image: var(--resources-ribbon) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:root:has(.resources-hero) .resources-hero::before,
:root:has(.resources-hero) .resources-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

:root:has(.resources-hero) .resources-hero :is(h1, p) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.resources-hero) .resources-hero p {
    width: 100%;
    max-width: 720px;
    margin-inline: auto !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 0.86) !important;
}

:root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
    background: transparent !important;
    box-shadow: none !important;
}

:root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

:root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
    color: var(--resources-ink) !important;
    -webkit-text-fill-color: var(--resources-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* Featured resources remain a light, highly legible section. Its media keeps
   the authored photograph/cover while the card and controls use violet. */
:root:has(.resources-hero) .section-resources-feature {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 96px !important;
    background: var(--resources-pale) !important;
}

:root:has(.resources-hero) .section-resources-feature .container-wrap {
    height: auto !important;
    min-height: 0 !important;
}

:root:has(.resources-hero) .section-resources-feature .featured-post-swiper {
    height: 500px !important;
    min-height: 0 !important;
    max-height: 500px !important;
}

:root:has(.resources-hero) .section-resources-feature .featured-post-swiper .swiper-wrapper {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}

:root:has(.resources-hero) .section-resources-feature .featured-post-swiper .swiper-dots {
    padding-top: 36px !important;
}

:root:has(.resources-hero) .section-resources-feature .res-featured-item {
    gap: 0 !important;
    align-items: stretch;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--resources-border);
    box-shadow: 0 22px 58px rgba(43, 0, 77, 0.10);
}

:root:has(.resources-hero) .section-resources-feature .res-featured-thumbnail {
    flex: 0 0 50%;
    width: 50%;
    height: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: 420px !important;
    aspect-ratio: auto;
    overflow: hidden;
    background: #E9E1F2;
}

:root:has(.resources-hero) .section-resources-feature .res-featured-thumbnail::after {
    content: none !important;
    display: none !important;
}

:root:has(.resources-hero) .section-resources-feature .res-featured-thumbnail img {
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
}

:root:has(.resources-hero) .section-resources-feature .content-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 48px;
}

:root:has(.resources-hero) .section-resources-feature .content-wrap :is(h2, h3) {
    color: var(--resources-ink) !important;
    -webkit-text-fill-color: var(--resources-ink) !important;
}

:root:has(.resources-hero) .section-resources-feature .content-wrap p {
    color: var(--resources-muted) !important;
}

:root:has(.resources-hero) :is(.section-resources-feature .post-type-chip,
    .filter-wrapper .type-label span,
    .filter-wrapper .whitepaper-category) {
    color: #4C1D95 !important;
    -webkit-text-fill-color: #4C1D95 !important;
    background: var(--resources-soft) !important;
    border: 1px solid rgba(112, 39, 185, 0.16);
}

:root:has(.resources-hero) :is(.section-resources-feature .post-btn,
    .filter-wrapper #search-btn) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--resources-primary) !important;
    border-color: var(--resources-primary) !important;
    transition: background-color 0.24s ease, border-color 0.24s ease;
}

:root:has(.resources-hero) :is(.section-resources-feature .post-btn,
    .filter-wrapper #search-btn):is(:hover, :focus-visible) {
    background: var(--resources-hover) !important;
    border-color: var(--resources-hover) !important;
}

:root:has(.resources-hero) .featured-post-swiper .swiper-pagination-bullet {
    background: rgba(112, 39, 185, 0.22) !important;
}

:root:has(.resources-hero) .featured-post-swiper .swiper-pagination-bullet-active {
    background: var(--resources-primary) !important;
}

/* Browse-by-type is an authored purple section, so it receives the exact same
   ribbon rather than a separate radial gradient or legacy blue cards. */
:root:has(.resources-hero) .resources-by-type {
    background-color: var(--resources-deep) !important;
    background-image: var(--resources-ribbon) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:root:has(.resources-hero) .resources-by-type .resource-type-card {
    display: block !important;
    overflow: visible !important;
}

:root:has(.resources-hero) .resources-by-type .resource-type-card>.swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
}

:root:has(.resources-hero) .resources-by-type .card-item {
    width: auto !important;
    min-width: 0 !important;
    min-height: 240px;
    color: #FFFFFF !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 16px 38px rgba(20, 0, 36, 0.18);
    transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease;
}

:root:has(.resources-hero) .resources-by-type .card-item:is(:hover, :focus-visible) {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.58);
}

:root:has(.resources-hero) .resources-by-type .card-item :is(h3, p) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.resources-hero) .resources-by-type .card-media img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

:root:has(.resources-hero) .resources-by-type .shape-img {
    display: none !important;
}

:root:has(.resources-hero) .resources-by-type :is(.swiper-btn-next-rest, .swiper-btn-prev-rest) {
    display: none !important;
}

:root:has(.resources-hero) .resources-by-type :is(.swiper-btn-next-rest, .swiper-btn-prev-rest):is(:hover, :focus-visible) {
    background: #FFFFFF !important;
}

:root:has(.resources-hero) .resources-by-type :is(.swiper-btn-next-rest, .swiper-btn-prev-rest):is(:hover, :focus-visible) svg path {
    fill: var(--resources-primary) !important;
}

/* Searchable catalog: white canvas, lavender support surfaces, and consistent
   violet selection/hover states. Resource thumbnails are never recolored. */
:root:has(.resources-hero) .filter-wrapper {
    padding: 72px 0 96px !important;
    background: #FFFFFF !important;
}

:root:has(.resources-hero) .filter-wrapper .container-wrap {
    width: 100% !important;
    max-width: 1776px !important;
    margin-inline: auto !important;
    padding-inline: clamp(24px, 3.8vw, 64px) !important;
    box-sizing: border-box !important;
}

:root:has(.resources-hero) .filter-wrapper h2 {
    color: var(--resources-ink) !important;
    -webkit-text-fill-color: var(--resources-ink) !important;
}

:root:has(.resources-hero) .resources-filter .filter-btn {
    color: var(--resources-ink) !important;
    background: #FFFFFF !important;
    border-color: var(--resources-border) !important;
    transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

:root:has(.resources-hero) .resources-filter .filter-btn:is(:hover, :focus-visible) {
    color: var(--resources-primary) !important;
    background: var(--resources-pale) !important;
    border-color: var(--resources-primary) !important;
}

:root:has(.resources-hero) .resources-filter .filter-btn.active {
    color: #FFFFFF !important;
    background: var(--resources-primary) !important;
    border-color: var(--resources-primary) !important;
}

:root:has(.resources-hero) .filter-wrapper #resource-search {
    color: var(--resources-ink) !important;
    background: var(--resources-pale) !important;
    border: 1px solid var(--resources-border) !important;
    outline: none;
}

:root:has(.resources-hero) .filter-wrapper #resource-search:focus {
    border-color: var(--resources-primary) !important;
    box-shadow: 0 0 0 3px rgba(112, 39, 185, 0.14);
}

:root:has(.resources-hero) .filter-wrapper .resource-item {
    height: 100%;
    padding: 16px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(112, 39, 185, 0.16);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

:root:has(.resources-hero) .filter-wrapper .resource-item:is(:hover, :focus-visible) {
    transform: translateY(-5px);
    border-color: rgba(112, 39, 185, 0.45);
    box-shadow: 0 18px 40px rgba(43, 0, 77, 0.10);
}

:root:has(.resources-hero) .filter-wrapper .resource-item .thumb {
    overflow: hidden;
    background: var(--resources-soft);
}

:root:has(.resources-hero) .filter-wrapper .resource-item .thumb img {
    filter: none !important;
    transition: transform 0.28s ease;
}

:root:has(.resources-hero) .filter-wrapper .resource-item:is(:hover, :focus-visible) .thumb img {
    transform: scale(1.025);
}

:root:has(.resources-hero) .filter-wrapper .resource-item h3 {
    color: var(--resources-ink) !important;
    -webkit-text-fill-color: var(--resources-ink) !important;
    transition: color 0.22s ease;
}

:root:has(.resources-hero) .filter-wrapper .resource-item:is(:hover, :focus-visible) h3 {
    color: var(--resources-primary) !important;
    -webkit-text-fill-color: var(--resources-primary) !important;
}

:root:has(.resources-hero) #resource-pagination .resource-page-btn {
    min-width: 36px;
    color: var(--resources-ink) !important;
    background: var(--resources-soft) !important;
    border-radius: 0 !important;
}

:root:has(.resources-hero) #resource-pagination :is(.resource-page-btn.active,
    .resource-page-btn.prev,
    .resource-page-btn.next) {
    color: #FFFFFF !important;
    background: var(--resources-primary) !important;
}

:root:has(.resources-hero) #resource-pagination .resource-page-btn:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--resources-hover) !important;
}

:root:has(.resources-hero) :is(a, button, input):focus-visible {
    outline: 3px solid rgba(159, 67, 240, 0.48) !important;
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    :root:has(.resources-hero) .resources-by-type .resource-type-card>.swiper-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :root:has(.resources-hero) .section-resources-feature .featured-post-swiper {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    :root:has(.resources-hero) .section-resources-feature .featured-post-swiper .swiper-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    :root:has(.resources-hero) .section-resources-feature .res-featured-item {
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    :root:has(.resources-hero) .section-resources-feature .res-featured-thumbnail {
        flex-basis: auto;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9;
    }

    :root:has(.resources-hero) .section-resources-feature .content-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    :root:has(.resources-hero) .resources-hero {
        min-height: 430px;
        padding: 130px 20px 72px !important;
    }

    :root:has(.resources-hero) .resources-hero p {
        width: auto;
        max-width: calc(100vw - 40px);
    }

    :root:has(.resources-hero) .section-resources-feature {
        padding-top: 56px !important;
    }

    :root:has(.resources-hero) .section-resources-feature .container-wrap {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 20px !important;
    }

    :root:has(.resources-hero) .section-resources-feature .content-wrap {
        padding: 28px 22px 32px;
    }

    :root:has(.resources-hero) .filter-wrapper .resource-item {
        padding: 12px;
    }

    :root:has(.resources-hero) .filter-wrapper .filter-outer-wrap {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    :root:has(.resources-hero) .resources-filter {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        overflow: visible;
    }

    :root:has(.resources-hero) .filter-wrapper .search-wrap {
        display: flex;
        width: 100%;
    }

    :root:has(.resources-hero) .filter-wrapper #resource-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    :root:has(.resources-hero) .resources-by-type .resource-type-card>.swiper-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    :root:has(.resources-hero) .resources-by-type .card-item {
        min-height: 180px;
    }

    :root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span,
    :root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::before,
    :root:has(.resources-hero) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::after {
        background: #FFFFFF !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    :root:has(.resources-hero) :is(.resources-by-type .card-item,
        .filter-wrapper .resource-item,
        .filter-wrapper .resource-item .thumb img) {
        transition: none !important;
    }
}

/* Runtime resource marker. Some mirrored documents begin with a stylesheet
   before their original body tag, so Chrome normalizes away body classes.
   This marker lives on the real hero node and keeps the ribbon/header contract
   reliable on every resource archive and detail route. */
:root:has(.site-resource-ribbon) {
    --resource-home-deep: #2B004D;
    --resource-home-primary: #7027B9;
    --resource-home-highlight: #9F43F0;
    --resource-home-ink: #1A0F2E;
    --resource-home-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a");
}

:is(.site-resource-ribbon.featured-section.featured-slider,
    .site-resource-ribbon.archive-hero-section.webinar-archive,
    .site-resource-ribbon.news-top-wrapper-single,
    .site-resource-ribbon.white-paper-single-wrapper-top) {
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:is(.site-resource-ribbon.featured-section.featured-slider,
    .site-resource-ribbon.archive-hero-section.webinar-archive,
    .site-resource-ribbon.news-top-wrapper-single,
    .site-resource-ribbon.white-paper-single-wrapper-top)::before,
:is(.site-resource-ribbon.featured-section.featured-slider,
    .site-resource-ribbon.archive-hero-section.webinar-archive,
    .site-resource-ribbon.news-top-wrapper-single,
    .site-resource-ribbon.white-paper-single-wrapper-top)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.site-resource-ribbon.featured-section .featured-section-top :is(h1, h2, p, span),
.site-resource-ribbon.news-top-wrapper-single :is(h1, h2, p, a, span, strong),
.site-resource-ribbon.white-paper-single-wrapper-top :is(h1, h2, p, a, span, strong) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.site-resource-ribbon.news-top-wrapper-single .breadcrumbs-wrap img {
    filter: brightness(0) invert(1) !important;
}

:root:has(.site-resource-ribbon) .archive-hero-section.webinar-archive .archive-wrapper-left {
    background-color: transparent !important;
    background-image: none !important;
}

:root:has(.site-resource-ribbon) :is(.white-paper-review-form, .blog-cta-section) {
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
    background: transparent !important;
    box-shadow: none !important;
}

:root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

:root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
    color: var(--resource-home-ink) !important;
    -webkit-text-fill-color: var(--resource-home-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

@media (max-width: 767px) {

    :root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span,
    :root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::before,
    :root:has(.site-resource-ribbon) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::after {
        background: #FFFFFF !important;
    }
}

/* Resource archives and details: use the exact Home hero ribbon on authored
   purple surfaces. White listings, filters, reading areas, and real imagery
   deliberately remain outside this scope. */
:is(body.site-webinar-page, body.site-purple-resource-page) {
    --resource-home-deep: #2B004D;
    --resource-home-primary: #7027B9;
    --resource-home-highlight: #9F43F0;
    --resource-home-ink: #1A0F2E;
    --resource-home-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a");
}

/* Webinars retain the event photograph on the right; only its authored
   purple half inherits the shared Home ribbon. */
body.site-webinar-page.post-type-archive-webinar .archive-hero-section.webinar-archive {
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.site-webinar-page.post-type-archive-webinar .webinar-archive .archive-wrapper-left {
    background-color: transparent !important;
    background-image: none !important;
}

/* White Papers, Podcasts, Blogs, and Newsroom share this archive hero. The
   legacy purple orbit is removed so the same ribbon is visible on every one. */
body.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-blog,
    .post-type-archive-news) .featured-section.featured-slider {
    position: relative;
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-blog,
    .post-type-archive-news) .featured-section.featured-slider::before,
body.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-blog,
    .post-type-archive-news) .featured-section.featured-slider::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

body.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-blog,
    .post-type-archive-news) .featured-section.featured-slider .featured-section-top :is(h1, h2, p, span) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Webinar, white-paper, and podcast entries share one detail hero template. */
:is(body.site-webinar-page.single-webinar,
    body.site-purple-resource-page.single-white-paper,
    body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top {
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:is(body.site-webinar-page.single-webinar,
    body.site-purple-resource-page.single-white-paper,
    body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top::before,
:is(body.site-webinar-page.single-webinar,
    body.site-purple-resource-page.single-white-paper,
    body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Blog and Newsroom entries share their own compact title hero. Article
   thumbnails and the complete reading body stay on their original surfaces. */
body.site-purple-resource-page:is(.single-blog, .single-news) .news-single-wrapper .news-top-wrapper-single {
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.site-purple-resource-page:is(.single-blog, .single-news) .news-single-wrapper .news-top-wrapper-single :is(h1,
    h2,
    p,
    a,
    span,
    strong,
    .news-single-title,
    .news-date,
    .breadcrumbs-wrap) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body.site-purple-resource-page:is(.single-blog, .single-news) .news-single-wrapper .news-top-wrapper-single .breadcrumbs-wrap img {
    filter: brightness(0) invert(1) !important;
}

/* Resource article consultation ribbons and inline blog CTAs are already
   purple sections in the source design, so they receive the same treatment. */
:is(body.site-webinar-page, body.site-purple-resource-page) :is(.white-paper-review-form,
    .blog-cta-section) {
    background-color: var(--resource-home-deep) !important;
    background-image: var(--resource-home-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:is(body.site-webinar-page, body.site-purple-resource-page) .white-paper-review-form>.elementor,
:is(body.site-webinar-page, body.site-purple-resource-page) .white-paper-review-form :is(.elementor-element-baeb164.contact-form,
    .elementor-element-0075163,
    .elementor-element-3fdacf0,
    .elementor-element-c43c5ff,
    .elementor-element-f39ae21,
    .elementor-element-51e5355) {
    background-color: transparent !important;
    background-image: none !important;
}

:is(body.site-webinar-page, body.site-purple-resource-page) :is(.white-paper-review-form,
    .blog-cta-section) :is(h1, h2, h3, h4, h5, h6, p, li, .review-cta-title, .hc-quote, .hc-name, .hc-designation) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Fix text visibility on purple resource hero sections */
body.site-webinar-page.post-type-archive-webinar .archive-hero-section.webinar-archive :is(h1, h2, h3, h4, h5, h6, p, li, .webinar-featured-title, .webinar-featured-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-blog,
    .post-type-archive-news) .featured-section.featured-slider :is(h1, h2, h3, h4, h5, h6, p, li) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:is(body.site-webinar-page.single-webinar,
    body.site-purple-resource-page.single-white-paper,
    body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top :is(h1, h2, h3, h4, h5, h6, p, li) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Fix button visibility on purple resource sections */
:is(body.site-webinar-page.post-type-archive-webinar .archive-hero-section.webinar-archive,
    body.site-purple-resource-page:is(.post-type-archive-white-paper, .post-type-archive-podcast, .post-type-archive-blog, .post-type-archive-news) .featured-section.featured-slider,
    :is(body.site-webinar-page.single-webinar, body.site-purple-resource-page.single-white-paper, body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top,
    body.site-purple-resource-page:is(.single-blog, .single-news) .news-single-wrapper .news-top-wrapper-single,
    :is(body.site-webinar-page, body.site-purple-resource-page) :is(.white-paper-review-form, .blog-cta-section)) :is(.elementor-button,
    .cta-btn,
    .tkxel-btn,
    .submit-btn,
    input[type="submit"],
    input[type="button"],
    button[type="submit"]) {
    color: var(--resource-home-ink) !important;
    fill: var(--resource-home-ink) !important;
    -webkit-text-fill-color: var(--resource-home-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

:is(body.site-webinar-page.post-type-archive-webinar .archive-hero-section.webinar-archive,
    body.site-purple-resource-page:is(.post-type-archive-white-paper, .post-type-archive-podcast, .post-type-archive-blog, .post-type-archive-news) .featured-section.featured-slider,
    :is(body.site-webinar-page.single-webinar, body.site-purple-resource-page.single-white-paper, body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top,
    body.site-purple-resource-page:is(.single-blog, .single-news) .news-single-wrapper .news-top-wrapper-single,
    :is(body.site-webinar-page, body.site-purple-resource-page) :is(.white-paper-review-form, .blog-cta-section)) :is(.elementor-button,
    .cta-btn,
    .tkxel-btn,
    .submit-btn,
    input[type="submit"],
    input[type="button"],
    button[type="submit"]):is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--resource-home-primary) !important;
    border-color: var(--resource-home-primary) !important;
}

:is(body.site-webinar-page.post-type-archive-webinar .archive-hero-section.webinar-archive,
    body.site-purple-resource-page:is(.post-type-archive-white-paper, .post-type-archive-podcast, .post-type-archive-blog, .post-type-archive-news) .featured-section.featured-slider,
    :is(body.site-webinar-page.single-webinar, body.site-purple-resource-page.single-white-paper, body.site-purple-resource-page.single-podcast) .white-paper-single-parent-wrapper .white-paper-single-wrapper-top,
    body.site-purple-resource-page:is(.single-blog, .single-news) .news-single-wrapper .news-top-wrapper-single,
    :is(body.site-webinar-page, body.site-purple-resource-page) :is(.white-paper-review-form, .blog-cta-section)) :is(.elementor-button,
    .cta-btn,
    .tkxel-btn,
    .submit-btn,
    input[type="submit"],
    input[type="button"],
    button[type="submit"]) :is(span, svg path) {
    color: inherit !important;
    fill: inherit !important;
}

/* The resource pages now start on a dark ribbon, so their initial transparent
   header follows the same white-on-purple contract as Home. Sticky and open
   menu states keep their existing light treatment. */
:is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
    background: transparent !important;
    box-shadow: none !important;
}

:is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

:is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
    color: var(--resource-home-ink) !important;
    -webkit-text-fill-color: var(--resource-home-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

@media (max-width: 767px) {

    :is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span,
    :is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::before,
    :is(body.site-webinar-page, body.site-purple-resource-page) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::after {
        background: #FFFFFF !important;
    }
}

/* Company detail pages: reuse the exact dark-violet homepage slider artwork
   only on sections that are already authored as purple. These selectors are
   deliberately page- and container-specific so light heroes, photography,
   onboarding/process content, lifecycle content, and recognition areas retain
   their original treatments. */
:is(.elementor.elementor-37316,
    .elementor.elementor-42231,
    .elementor.elementor-41275) {
    --company-purple-ribbon:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a");
}

:is(.elementor.elementor-37316 > .elementor-element.elementor-element-9181b12,
    .elementor.elementor-37316 > .elementor-element.elementor-element-9d6bad4,
    .elementor.elementor-37316 > .elementor-element.elementor-element-a057b21,
    .elementor.elementor-42231 > .elementor-element.elementor-element-53bf6bd,
    .elementor.elementor-42231 > .elementor-element.elementor-element-1fe723b,
    .elementor.elementor-42231 > .elementor-element.elementor-element-6858998,
    .elementor.elementor-42231 #services-outcomes.elementor-element.elementor-element-20e21a5,
    .elementor.elementor-42231 > .elementor-element.elementor-element-a397064,
    .elementor.elementor-41275 > .elementor-element.elementor-element-4f74523,
    .elementor.elementor-41275 > .elementor-element.elementor-element-6b5850a,
    .elementor.elementor-41275 .elementor-element.elementor-element-7b39044.featured-whitepaper,
    .elementor.elementor-41275 #services-outcomes.elementor-element.elementor-element-20e21a5,
    .elementor.elementor-41275 #our-solution.elementor-element.elementor-element-df57a80,
    .elementor.elementor-41275 > .elementor-element.elementor-element-d3080b6) {
    background-color: #2B004D !important;
    background-image: var(--company-purple-ribbon) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
}

/* Remove the superseded star/gain/orb artwork so one uninterrupted homepage
   ribbon is visible behind each section. */
:is(.elementor.elementor-37316 > .elementor-element.elementor-element-9d6bad4,
    .elementor.elementor-42231 > .elementor-element.elementor-element-1fe723b,
    .elementor.elementor-42231 > .elementor-element.elementor-element-6858998,
    .elementor.elementor-41275 > .elementor-element.elementor-element-6b5850a,
    .elementor.elementor-41275 #services-outcomes.elementor-element.elementor-element-20e21a5,
    .elementor.elementor-41275 #our-solution.elementor-element.elementor-element-df57a80,
    .elementor.elementor-41275 > .elementor-element.elementor-element-d3080b6)::before,
:is(.elementor.elementor-41275 #services-outcomes.elementor-element.elementor-element-20e21a5,
    .elementor.elementor-41275 #our-solution.elementor-element.elementor-element-df57a80)::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

.elementor.elementor-37316>.elementor-element.elementor-element-a057b21>.elementor-element-b41d713 {
    display: none !important;
}

:is(.elementor.elementor-42231,
    .elementor.elementor-41275) #services-outcomes>.e-con-inner>.elementor-element-bfb9e38,
.elementor.elementor-41275 #our-solution>.e-con-inner>.elementor-element-c981f7d {
    display: none !important;
}

/* The gain components have their own legacy gradient wrappers. Make them
   transparent so the outer section presents one continuous ribbon image. */
:is(.elementor.elementor-42231,
    .elementor.elementor-41275) #services-outcomes :is(.cloud-gain-section, .cloud-gain-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
}

/* Preserve contrast on the interactive cards; the source hover state becomes
   nearly white on a bright portion of the ribbon. */
:is(.elementor.elementor-42231,
    .elementor.elementor-41275) #services-outcomes .gain-card:is(:hover, :focus-within),
:is(.elementor.elementor-37316 > .elementor-element.elementor-element-a057b21,
    .elementor.elementor-42231 > .elementor-element.elementor-element-a397064,
    .elementor.elementor-41275 > .elementor-element.elementor-element-d3080b6) .plan-card-single:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: linear-gradient(145deg, rgba(43, 0, 77, 0.94), rgba(91, 20, 155, 0.90)) !important;
    border-color: rgba(216, 180, 254, 0.72) !important;
}

:is(.elementor.elementor-42231,
    .elementor.elementor-41275) #services-outcomes .gain-card:is(:hover, :focus-within) :is(.gain-title, .gain-desc),
:is(.elementor.elementor-37316 > .elementor-element.elementor-element-a057b21,
    .elementor.elementor-42231 > .elementor-element.elementor-element-a397064,
    .elementor.elementor-41275 > .elementor-element.elementor-element-d3080b6) .plan-card-single:is(:hover, :focus-visible) :is(.plan-title, .plan-description, .plan-link) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Homepage purple hero: match the supplied reference composition while
   keeping the other two slides and their content untouched. */
.home .hero-slider .swiper-slide.hero-reference-dark {
    background:
        #260044 url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") center / cover no-repeat !important;
}

.home .hero-slider .hero-reference-dark .hero-cta-cardWrap {
    display: none !important;
}

.home .hero-slider .hero-reference-dark .slide-content .container {
    width: 100%;
    max-width: none !important;
}

.home .hero-slider .hero-reference-dark .slide-heading {
    width: min(100%, 940px);
    margin: 0 0 clamp(20px, 1.45vw, 28px) !important;
    color: #FFFFFF !important;
    font-size: clamp(54px, 3.9vw, 80px) !important;
    font-weight: 700 !important;
    line-height: 1.13 !important;
    letter-spacing: -2.4px !important;
}

.home .hero-slider .hero-reference-dark .slide-content p {
    width: min(100%, 930px);
    margin: 0 0 clamp(24px, 1.75vw, 34px) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: clamp(18px, 1.27vw, 26px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.home .hero-slider .hero-reference-dark .slide-cta {
    display: inline-flex !important;
    align-items: center;
    min-height: 58px;
    padding: 16px 18px !important;
    color: #1A0F2E !important;
    background: #FFFFFF !important;
    font-size: clamp(17px, 1.05vw, 21px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.home .hero-slider .hero-reference-dark .slide-cta svg {
    width: 17px;
    height: 15px;
    margin-left: 10px;
    top: 0;
}

.home .hero-slider .hero-reference-dark .awards-list {
    gap: clamp(28px, 2.2vw, 46px) !important;
}

.home .hero-slider .hero-reference-dark .hero-awards h6 {
    margin-bottom: 22px !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.home .hero-slider .hero-reference-dark .awards-list.logos img {
    width: auto !important;
    height: clamp(34px, 2.2vw, 44px) !important;
    max-width: none !important;
    filter: brightness(0) invert(1) !important;
}

.home .hero-slider .hero-reference-dark .awards-list.logos img.inspiring-logo {
    height: clamp(31px, 2vw, 40px) !important;
}

.home .hero-slider .hero-slider-nav {
    position: absolute;
    z-index: 14;
    top: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(39, 4, 71, 0.84);
    box-shadow: 0 10px 28px rgba(22, 0, 43, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.home .hero-slider .hero-slider-prev {
    left: clamp(18px, 3.2vw, 66px);
}

.home .hero-slider .hero-slider-next {
    right: clamp(18px, 3.2vw, 66px);
}

.home .hero-slider .swiper:has(.hero-reference-dark.swiper-slide-active) .hero-slider-nav {
    opacity: 1;
    pointer-events: auto;
}

.home .hero-slider .hero-slider-nav:hover,
.home .hero-slider .hero-slider-nav:focus-visible {
    background: rgba(26, 0, 50, 0.96);
    transform: translateY(-50%) scale(1.06);
}

.home .hero-slider .hero-slider-nav:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* White navigation on the dark slide. The full Deployed lockup (symbol plus
   wordmark) is kept here so the brand name reads the same on every hero slide,
   rather than collapsing to a symbol-only corner mark. */
.home:has(.hero-reference-dark.swiper-slide-active) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) :is(#menu-main-menu > li > a, .header-search-toggle, .deployed-logo-lockup, .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.home:has(.hero-reference-dark.swiper-slide-active) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) :is(#menu-main-menu > li.menu-item-has-children > a svg path, .header-menu-cta svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.home:has(.hero-reference-dark.swiper-slide-active) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    width: 30px !important;
    filter: brightness(0) invert(1) !important;
}


.home:has(.hero-reference-dark.swiper-slide-active) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

@media (min-width: 1025px) {
    .home .hero-slider .hero-reference-dark .slide-content {
        justify-content: flex-start !important;
        padding: clamp(132px, 14.5vh, 150px) clamp(72px, 4.7vw, 96px) 170px !important;
    }

    .home .hero-slider .hero-reference-dark .hero-awards {
        bottom: clamp(88px, 9.8vh, 108px) !important;
    }
}

/* Customer listing and case-study details: use the same violet language as
   the homepage slider while preserving each customer's logo and project media. */
.page-id-36343 .filter-wrap .filter-toggle {
    background: #FFFFFF !important;
    border-color: rgba(112, 39, 185, 0.34) !important;
    color: #1A0F2E !important;
}

.page-id-36343 .filter-wrap .filter-toggle:is(:hover, :focus-visible),
.page-id-36343 .filter-box:focus-within .filter-toggle {
    background: #5B149B !important;
    border-color: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-id-36343 .case-study-listing-wrapper .whitepaper-item {
    border-color: rgba(112, 39, 185, 0.24) !important;
}

.page-id-36343 .case-study-listing-wrapper .customer-sd-wrap:is(:hover, :focus-visible),
.page-id-36343 .case-study-listing-wrapper .whitepaper-item:focus-within .customer-sd-wrap {
    background: linear-gradient(145deg, #260044 0%, #5B149B 100%) !important;
    border-color: rgba(232, 211, 255, 0.78) !important;
}

.page-id-36343 .case-study-listing-wrapper .customer-sd-wrap:is(:hover, :focus-visible) :is(.whitepaper-category, .whp-title, .whp-title h3),
.page-id-36343 .case-study-listing-wrapper .whitepaper-item:focus-within .customer-sd-wrap :is(.whitepaper-category, .whp-title, .whp-title h3) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study {
    --case-study-violet-deep: #260044;
    --case-study-violet: #7027B9;
    --case-study-violet-hover: #5B149B;
    --case-study-lavender: #E8D3FF;
    --case-study-ink: #1A0F2E;
}

/* Replace the old pink/blue ellipse in every case-study hero. */
.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] {
    background-color: var(--case-study-violet-deep) !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"]>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background: transparent !important;
    background-image: none !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] :is(.elementor-heading-title,
    .elementor-heading-title a,
    .results-delivered h2,
    .results-delivered h3,
    .results-delivered p) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] [data-id="55f72a9"]>.elementor-widget-container {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(232, 211, 255, 0.78);
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .single-results-list {
    border-color: rgba(232, 211, 255, 0.34) !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .results-delivered .single-results-left img {
    /* The source SVGs already use a white tile with a dark pictogram. Keeping
       their native colors preserves the pictogram on the dark-violet panel. */
    filter: none !important;
}

/* Light content sections use violet headings, borders, and technology chips. */
.elementor-2103.elementor-location-single.case_study .case-study-content-wrap :is(h2,
    .elementor-heading-title,
    .single-results-left h3,
    .case-study-stats) {
    color: var(--case-study-violet) !important;
    -webkit-text-fill-color: var(--case-study-violet) !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap .single-results-list {
    border-color: rgba(112, 39, 185, 0.26) !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap .single-stack {
    background: #F3E8FF !important;
    border: 1px solid rgba(112, 39, 185, 0.24) !important;
    color: var(--case-study-violet-deep) !important;
}

/* The sticky request form becomes a clean violet panel with no legacy
   decorative strips. Its functional inputs and submit behavior are unchanged. */
.elementor-2103.elementor-location-single.case_study [data-id="a22dcdc"],
.elementor-2103.elementor-location-single.case_study .success-story-form {
    background-color: var(--case-study-violet-deep) !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 1px solid rgba(232, 211, 255, 0.48) !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="d239581"] {
    --padding-top: 0px !important;
}

.elementor-2103.elementor-location-single.case_study :is([data-id="2fb8c2f"],
    [data-id="c0e95b4"],
    [data-id="ee0461d"]) {
    display: none !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form input:not([type="submit"]) {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(232, 211, 255, 0.36) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form input:not([type="submit"]):focus {
    border-color: var(--case-study-lavender) !important;
    outline: 2px solid rgba(232, 211, 255, 0.52) !important;
    outline-offset: 1px;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form button[type="submit"] {
    background: var(--case-study-violet) !important;
    border-color: #A855F7 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form button[type="submit"] :is(span, .submit-text) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form button[type="submit"]:is(:hover, :focus-visible) {
    background: var(--case-study-violet-hover) !important;
    border-color: var(--case-study-lavender) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Bottom project CTA uses the exact homepage-slider surface. */
.elementor-2103.elementor-location-single.case_study .partnership-sec {
    background-color: var(--case-study-violet-deep) !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec::before,
.elementor-2103.elementor-location-single.case_study .partnership-sec::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec :is(h1,
    h2,
    h3,
    p,
    .elementor-heading-title) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec .elementor-button {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--case-study-ink) !important;
    -webkit-text-fill-color: var(--case-study-ink) !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec .elementor-button :is(span, .elementor-button-text, .elementor-button-icon, svg, svg path) {
    color: var(--case-study-ink) !important;
    fill: var(--case-study-ink) !important;
    stroke: var(--case-study-ink) !important;
    -webkit-text-fill-color: var(--case-study-ink) !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec .elementor-button:is(:hover, :focus-visible) {
    background: var(--case-study-violet-hover) !important;
    border-color: var(--case-study-lavender) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec .elementor-button:is(:hover, :focus-visible) :is(span, .elementor-button-text, .elementor-button-icon, svg, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study :is(a, button, input):focus-visible {
    outline: 3px solid rgba(168, 85, 247, 0.68) !important;
    outline-offset: 3px;
}

/* Match Home's initial transparent/white navigation over the new dark hero. */
@media (min-width: 1025px) {
    :root:has(.elementor-2103.elementor-location-single.case_study) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    :root:has(.elementor-2103.elementor-location-single.case_study) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
        .header-search-toggle,
        .deployed-logo-lockup,
        .deployed-logo-name) {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    :root:has(.elementor-2103.elementor-location-single.case_study) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
        #menu-main-menu > li.menu-item-has-children > a svg path,
        .header-menu-cta svg path,
        .header-search-toggle svg path) {
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

    :root:has(.elementor-2103.elementor-location-single.case_study) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
        filter: brightness(0) invert(1) !important;
    }

    :root:has(.elementor-2103.elementor-location-single.case_study) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
        background: #FFFFFF !important;
        border-color: #FFFFFF !important;
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.elementor-2103.elementor-location-single.case_study) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a:is(:hover, :focus-visible) {
        background: #5B149B !important;
        border-color: #5B149B !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
}

/* Cloud Security: use the homepage slider's exact dark-violet artwork on each
   authored dark section. Decorative blue/pink hero, gain, and CTA imagery is
   removed while certifications, client marks, and content icons remain. */
.elementor-32782 :is(.subpage-hero-section,
    #services-outcomes,
    .assesment,
    #cta-form,
    .blog-cta-section) {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor-32782 :is(.banner-bg-gr-image,
    #services-outcomes > .e-con-inner > .elementor-widget-image,
    #services-outcomes img[src*="gain"],
    #services-outcomes img[data-src*="gain"],
    #services-outcomes img[bv-data-src*="gain"]) {
    display: none !important;
}

.elementor-32782 :is(.subpage-hero-section,
    #services-outcomes,
    .assesment,
    #cta-form,
    .blog-cta-section)::before,
.elementor-32782 :is(.subpage-hero-section,
    #services-outcomes,
    .assesment,
    #cta-form,
    .blog-cta-section)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.elementor-32782 .subpage-hero-section :is(.service-banner-main-wrapper,
    .service-inner-wrapper),
.elementor-32782 #services-outcomes :is(.cloud-gain-section,
    .cloud-gain-wrapper),
.elementor-32782 .blog-cta-section> :is(.e-con-inner,
    .elementor-element) {
    background-color: transparent !important;
    background-image: none !important;
}

.elementor-32782 :is(#services-outcomes .gain-card,
    .assesment .assesment_list_card,
    #cta-form .hc-testimonial) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.48) !important;
}

.elementor-32782 #services-outcomes .gain-card:is(:hover, :focus-within) {
    background: linear-gradient(145deg, #260044 0%, #4B176E 100%) !important;
    border-color: rgba(232, 211, 255, 0.82) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

.elementor-32782 #services-outcomes .gain-card :is(.gain-title, .gain-desc),
.elementor-32782 #services-outcomes .gain-card:is(:hover, :focus-within) :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Cloud Security button interactions: several mirrored button widgets retain
   a dark text token on hover. Force the complete label/icon group to follow
   the violet hover surface's white-contrast contract. */
.elementor-32782 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]):is(:hover, :focus-visible) {
    background: #5B149B !important;
    border-color: #E8D3FF !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-32782 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn):is(:hover, :focus-visible) :is(span,
    strong,
    b,
    .elementor-button-text,
    .elementor-button-icon,
    svg,
    svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* The three challenge-source widgets ship their label and SVG path colors on
   the nested Elementor template itself. Target those widgets directly so the
   IBM, Accenture, and IBM Newsroom actions cannot retain that dark token. */
.elementor-32782 .elementor-28637 :is(.elementor-element-f8e6dd1,
    .elementor-element-83a359e,
    .elementor-element-a05a8f3) .elementor-button:is(:hover, :focus-visible) {
    background-color: #5B149B !important;
    background-image: none !important;
    border-color: #E8D3FF !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-32782 .elementor-28637 :is(.elementor-element-f8e6dd1,
    .elementor-element-83a359e,
    .elementor-element-a05a8f3) .elementor-button:is(:hover, :focus-visible) :is(.elementor-button-content-wrapper,
    .elementor-button-text,
    .elementor-button-icon,
    svg,
    svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Application Security & Penetration Testing: match every authored dark
   surface to the homepage slider and keep its action hierarchy consistent. */
.elementor-32801 :is(.subpage-hero-section,
    #our-solution,
    .featured-whitepaper,
    .comon-gradient,
    #services-outcomes,
    #cta-form) {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Remove only the template's decorative hero/solution/outcomes artwork. */
.elementor-32801 :is(.banner-bg-gr-image,
    #our-solution > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"],
    #services-outcomes > .e-con-inner > .elementor-widget-image,
    #services-outcomes img[src*="gain"],
    #services-outcomes img[data-src*="gain"],
    #services-outcomes img[bv-data-src*="gain"],
    .featured-whitepaper > .comon-gradient) {
    display: none !important;
}

.elementor-32801 :is(.subpage-hero-section,
    #our-solution,
    .featured-whitepaper,
    .comon-gradient,
    #services-outcomes,
    #cta-form)::before,
.elementor-32801 :is(.subpage-hero-section,
    #our-solution,
    .featured-whitepaper,
    .comon-gradient,
    #services-outcomes,
    #cta-form)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.elementor-32801 .subpage-hero-section :is(.service-banner-main-wrapper,
    .service-inner-wrapper),
.elementor-32801 #services-outcomes :is(.cloud-gain-section,
    .cloud-gain-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
}

.elementor-32801 :is(#our-solution .solution-card,
    #services-outcomes .gain-card,
    #cta-form .hc-testimonial) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.48) !important;
}

.elementor-32801 :is(#our-solution .solution-card,
    #services-outcomes .gain-card):is(:hover, :focus-within) {
    background: linear-gradient(145deg, #260044 0%, #4B176E 100%) !important;
    border-color: rgba(232, 211, 255, 0.82) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

.elementor-32801 :is(#our-solution .solution-card,
    #services-outcomes .gain-card) :is(.title, .sub-title, .gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Purple actions on light sections. */
.elementor-32801 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]) {
    background: linear-gradient(135deg, #3B1F5C 0%, #7027B9 64%, #A855F7 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-32801 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]) :is(span, strong, b, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* White inverse actions on the homepage-slider surfaces. */
.elementor-32801 :is(.subpage-hero-section,
    #our-solution,
    .featured-whitepaper,
    .comon-gradient,
    #services-outcomes,
    #cta-form) :is(.elementor-button, .cta-btn, .report-submit-btn) {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-32801 :is(.subpage-hero-section,
    #our-solution,
    .featured-whitepaper,
    .comon-gradient,
    #services-outcomes,
    #cta-form) :is(.elementor-button, .cta-btn, .report-submit-btn) :is(span, strong, b, svg path) {
    color: #1A0F2E !important;
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-32801 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]):is(:hover, :focus-visible),
.elementor-32801 :is(.subpage-hero-section,
    #our-solution,
    .featured-whitepaper,
    .comon-gradient,
    #services-outcomes,
    #cta-form) :is(.elementor-button, .cta-btn, .report-submit-btn):is(:hover, :focus-visible) {
    background: #5B149B !important;
    border-color: #E8D3FF !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-32801 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn):is(:hover, :focus-visible) :is(span, strong, b, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Data Security & Encryption: carry the homepage slider's exact violet
   artwork through the authored dark sections and remove the legacy blue/pink
   decorative layers without hiding content imagery or certification marks. */
.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form) {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor-33075 :is(.banner-bg-gr-image,
    #our-solution > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"],
    #services-outcomes > .e-con-inner > .elementor-widget-image,
    #services-outcomes img[src*="gain"],
    #services-outcomes img[data-src*="gain"],
    #services-outcomes img[bv-data-src*="gain"]) {
    display: none !important;
}

.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form)::before,
.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.elementor-33075 .subpage-hero-section :is(.service-banner-main-wrapper,
    .service-inner-wrapper),
.elementor-33075 #services-outcomes :is(.cloud-gain-section,
    .cloud-gain-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
}

/* Stable dark cards keep every title and description readable at rest and on
   hover, resolving the benefits-box surface/text mismatch. */
.elementor-33075 :is(#our-solution .solution-card,
    #services-outcomes .gain-card,
    .assesment .assesment_list_card,
    #cta-form .hc-testimonial) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.48) !important;
}

.elementor-33075 :is(#our-solution .solution-card,
    #services-outcomes .gain-card):is(:hover, :focus-within) {
    background: linear-gradient(145deg, #260044 0%, #4B176E 100%) !important;
    border-color: rgba(232, 211, 255, 0.82) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

.elementor-33075 :is(#our-solution .solution-card,
    #services-outcomes .gain-card) :is(.title, .sub-title, .gain-title, .gain-desc),
.elementor-33075 #services-outcomes .gain-card:is(:hover, :focus-within) :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Every page action starts as a white button with dark copy, regardless of
   whether it sits on a light section or on the slider artwork. */
.elementor-33075 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]) {
    background: #FFFFFF !important;
    border-color: #D4C9E8 !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

/* The consultation form keeps the primary filled treatment at rest. */
.elementor-33075 #contact-custom-form input[type="submit"] {
    background: #7027B9 !important;
    border-color: #A855F7 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-33075 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn) :is(span, strong, b, .elementor-button-text, .elementor-button-icon, svg, svg path) {
    color: #1A0F2E !important;
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form) :is(.elementor-button, .cta-btn, .report-submit-btn) {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form) :is(.elementor-button, .cta-btn, .report-submit-btn) :is(span, strong, b, .elementor-button-text, .elementor-button-icon, svg, svg path) {
    color: #1A0F2E !important;
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-33075 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]):is(:hover, :focus-visible) {
    background: #5B149B !important;
    border-color: #E8D3FF !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-33075 :is(.elementor-button,
    .cta-btn,
    .report-submit-btn):is(:hover, :focus-visible) :is(span,
    strong,
    b,
    .elementor-button-text,
    .elementor-button-icon,
    svg,
    svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Dark-section defaults carry an ID-level selector, so mirror that specificity
   for hover/focus. This covers Secure my data, Book your free assessment, and
   Get free assessment as well as any future CTA added to these sections. */
.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form) :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    #contact-custom-form input[type="submit"]):is(:hover, :focus-visible) {
    background: #5B149B !important;
    border-color: #E8D3FF !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-33075 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form) :is(.elementor-button,
    .cta-btn,
    .report-submit-btn):is(:hover, :focus-visible) :is(span,
    strong,
    b,
    .elementor-button-content-wrapper,
    .elementor-button-text,
    .elementor-button-icon,
    svg,
    svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 1024px) {
    .home .hero-slider .hero-reference-dark .slide-content {
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 34px 0 0 !important;
    }

    .home .hero-slider .hero-reference-dark .slide-heading {
        width: min(100%, 700px);
        font-size: clamp(42px, 7vw, 60px) !important;
        letter-spacing: -1.6px !important;
    }

    .home .hero-slider .hero-reference-dark .slide-content p {
        width: min(100%, 720px);
        font-size: clamp(18px, 2.3vw, 22px) !important;
    }

    .home .hero-slider .hero-reference-dark .hero-awards {
        gap: 10px !important;
        padding: 46px 0 0 !important;
    }
}

@media (max-width: 767px) {
    .home .hero-slider .swiper-slide.hero-reference-dark {
        background-position: 56% center !important;
    }

    .home .hero-slider .hero-reference-dark .slide-content {
        padding-top: 44px !important;
    }

    .home .hero-slider .hero-reference-dark .slide-heading {
        font-size: clamp(35px, 10.7vw, 46px) !important;
        line-height: 1.1 !important;
        letter-spacing: -1.2px !important;
    }

    .home .hero-slider .hero-reference-dark .slide-content p {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .home .hero-slider .hero-reference-dark .slide-content p br {
        display: none;
    }

    .home .hero-slider .hero-reference-dark .slide-cta {
        min-height: 52px;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }

    .home .hero-slider .hero-reference-dark .awards-list {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 16px 24px !important;
    }

    .home .hero-slider .hero-reference-dark .awards-list.logos img,
    .home .hero-slider .hero-reference-dark .awards-list.logos img.inspiring-logo {
        height: 28px !important;
        max-width: 125px !important;
    }

    .home .hero-slider .hero-slider-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .hero-slider .hero-slider-nav {
        transition: none;
    }
}

/* AI & Data Innovation overview: this route contains two legacy blue feature
   sections whose nested Elementor surfaces and artwork layers sit below the
   shared service wrappers. Keep the report/whitepaper artwork intact while
   replacing the surrounding UI chrome with the homepage violet palette. */
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper,
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper>.e-con-inner,
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 [data-id="b90ccaa"] {
    background-color: #1E0633 !important;
    background-image:
        radial-gradient(78% 112% at 0% 100%, rgba(112, 39, 185, 0.34) 0%, transparent 58%),
        linear-gradient(136deg, #170226 0%, #2B004D 56%, #4A0D72 100%) !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 [data-id="bea678e"].comon-gradient {
    background-color: #7027B9 !important;
    background-image:
        radial-gradient(82% 100% at 86% 8%, rgba(159, 67, 240, 0.72) 0%, transparent 58%),
        linear-gradient(138deg, #2B004D 0%, #7027B9 58%, #9F43F0 100%) !important;
}

/* These two on-page publication previews contain the old blue artwork. Shift
   only their blue hue into violet; whites, dark typography, and layout remain
   intact, and the source files are not modified. */
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 :is(img[alt="ai workshop report"],
    img[alt*="C-suite’s guide"]) {
    filter: hue-rotate(48deg) saturate(1.08) !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper .linear-gradient {
    color: #B96BFF !important;
    background-image: linear-gradient(100deg, #EEE6FB 0%, #C58BFF 34%, #9F43F0 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper .reports-form-wrap input[type="email"] {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(238, 230, 251, 0.32) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    caret-color: #FFFFFF;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper .reports-form-wrap input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.70) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.70) !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper .report-submit-btn {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .featured-whitepaper .report-submit-btn:is(:hover, :focus-visible) {
    background: #5B149B !important;
    border-color: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* The assessment template paints its old blue glow on a pseudo-element, not
   on the section itself, so it needs an explicit purple replacement. */
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-29346 .elementor-element.elementor-element-ae0931e.assesment::before,
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-29346 .elementor-element.elementor-element-ae0931e.assesment>.e-con-inner::before {
    background-image:
        radial-gradient(68% 88% at 82% 4%, rgba(238, 230, 251, 0.42) 0%, rgba(159, 67, 240, 0.30) 42%, transparent 72%) !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: 62% 100% !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-29346 .assesment_list_card+.assesment_list_card {
    border-color: rgba(238, 230, 251, 0.28) !important;
}

/* The hero's attached whitepaper card used a navy caption even after the hero
   itself was purple. It now follows the same deep-to-primary violet surface. */
:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .white-paper-sc :is(.promo-card,
    .promo-border,
    .promo-text) {
    border-color: rgba(238, 230, 251, 0.28) !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) .elementor-33178 .white-paper-sc .promo-text {
    background-color: #2B004D !important;
    background-image: linear-gradient(145deg, #2B004D 0%, #4B0F78 56%, #7027B9 100%) !important;
}

/* Dynamic hero/sticky logo contrast for this overview page. The lockup is
   white over the violet hero and returns to its dark version on white after
   either mirrored sticky class is applied. */
:root:has(.site-ai-data-catalog-scope.elementor-33178) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.deployed-logo-lockup--header,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(.deployed-logo-lockup--header,
    .deployed-logo-name) {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.site-ai-data-catalog-scope.elementor-33178) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .deployed-site-logo {
    filter: none !important;
}

/* Homepage hero artwork rebuilt from the three approved references. The
   decorative layers contain no copy, so slide content remains selectable and
   the compositions can crop responsively without stretching text. */
.hero-slider .swiper-slide.hero-reference-dark {
    background: #2B004D url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg") center / cover no-repeat !important;
}

.hero-slider .swiper-slide.hero-reference-waves {
    background: #FFFFFF url("/bg_this.png") center / cover no-repeat !important;
}

.hero-slider .swiper-slide.hero-reference-dots {
    background: #FFFFFF url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dot-field.svg") center / cover no-repeat !important;
}

.hero-slider .swiper-slide:is(.hero-reference-dark, .hero-reference-waves, .hero-reference-dots)::before,
.hero-slider .swiper-slide:is(.hero-reference-dark, .hero-reference-waves, .hero-reference-dots)::after {
    content: none !important;
}

.hero-slider .swiper-slide:is(.hero-reference-dark, .hero-reference-waves, .hero-reference-dots)>.video-bg {
    display: none !important;
}

/* The dark first reference uses white foreground elements. */
.hero-slider .hero-reference-dark :is(.slide-heading, .slide-content p, .hero-awards h6) {
    color: #FFFFFF !important;
}

.hero-slider .hero-reference-dark .slide-cta {
    color: #1A0F2E !important;
    background-color: #FFFFFF !important;
}

.hero-slider .hero-reference-dark .slide-cta svg path {
    fill: #1A0F2E !important;
}

.hero-slider .hero-reference-dark .awards-list.logos img {
    filter: brightness(0) invert(1);
}

.header-wrapper-alt.blue-header:not(.menu-open) #menu-main-menu>li>a,
.header-wrapper-alt.blue-header:not(.menu-open) .header-search-toggle,
.header-wrapper-alt.blue-header:not(.menu-open) .header-search-toggle:hover,
.header-wrapper-alt.blue-header:not(.menu-open) .header-search-toggle:focus {
    color: #FFFFFF !important;
}

.header-wrapper-alt.blue-header:not(.menu-open) .header-logo svg path,
.header-wrapper-alt.blue-header:not(.menu-open) #menu-main-menu>li.menu-item-has-children>a svg path,
.header-wrapper-alt.blue-header:not(.menu-open) .header-menu-cta svg path {
    fill: #FFFFFF !important;
}

.header-wrapper-alt.blue-header:not(.menu-open) .cta-contact-us a {
    color: #1A0F2E !important;
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.header-wrapper-alt.blue-header:not(.menu-open) .deployed-logo-lockup {
    color: #FFFFFF !important;
}

.header-wrapper-alt.blue-header:not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

/* Once the header is pinned it sits on a white bar, so the over-hero white
   logo treatment above must not carry over — a white mark and white wordmark
   otherwise vanish against white. This surfaced on /leap-2026/ at desktop,
   where `blue-header` persists into the sticky state (the phone breakpoint
   already corrects it). Restore the dark lockup whenever the header is sticky. */
#site-header.sticky .header-wrapper-alt.blue-header:not(.menu-open) .deployed-logo-lockup,
#site-header .header-wrapper-alt.blue-header.sticky:not(.menu-open) .deployed-logo-lockup {
    color: #3b1f5c !important;
    -webkit-text-fill-color: #3b1f5c !important;
}

#site-header.sticky .header-wrapper-alt.blue-header:not(.menu-open) .deployed-site-logo,
#site-header .header-wrapper-alt.blue-header.sticky:not(.menu-open) .deployed-site-logo {
    filter: none !important;
}

/* The mirrored document is serialized as a fragment at runtime, so use the
   actual active slide as a second, body-class-independent header theme hook. */
:root:has(.hero-reference-dark.swiper-slide-active) .header-wrapper-alt:not(.menu-open) #menu-main-menu>li>a,
:root:has(.hero-reference-dark.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .header-search-toggle {
    color: #FFFFFF !important;
}

:root:has(.hero-reference-dark.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .menu-item-has-children>a svg path {
    fill: #FFFFFF !important;
}

:root:has(.hero-reference-dark.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup {
    color: #FFFFFF !important;
}

:root:has(.hero-reference-dark.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.hero-reference-dark.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    color: #1A0F2E !important;
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

:root:has(.hero-reference-waves.swiper-slide-active, .hero-reference-dots.swiper-slide-active) .header-wrapper-alt:not(.menu-open) #menu-main-menu>li>a,
:root:has(.hero-reference-waves.swiper-slide-active, .hero-reference-dots.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .header-search-toggle,
:root:has(.hero-reference-waves.swiper-slide-active, .hero-reference-dots.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup {
    color: #1A0F2E !important;
}

:root:has(.hero-reference-waves.swiper-slide-active, .hero-reference-dots.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .menu-item-has-children>a svg path {
    fill: #1A0F2E !important;
}

:root:has(.hero-reference-waves.swiper-slide-active, .hero-reference-dots.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: none !important;
}

:root:has(.hero-reference-waves.swiper-slide-active, .hero-reference-dots.swiper-slide-active) .header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    color: #FFFFFF !important;
    background-color: #7027B9 !important;
    border-color: #7027B9 !important;
}

/* Slide-aware header colors apply only while the homepage header overlays the
   hero. Once it becomes sticky, its surface is white and every foreground
   element must return to the dark/violet navigation palette. */
:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) {
    background-color: #FFFFFF !important;
    box-shadow: 0 7px 24px rgba(43, 0, 77, 0.10) !important;
}

:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) #menu-main-menu>li>a,
:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle,
:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle:hover,
:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle:focus {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) #menu-main-menu>li.menu-item-has-children>a svg path,
:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-menu-cta svg path {
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
}

:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-logo svg path {
    fill: #7027B9 !important;
}

:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: none !important;
}

:root:has(.hero-slider) #site-header.sticky .header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-color: #7027B9 !important;
    border-color: #7027B9 !important;
}

@media (max-width: 1024px) {

    :root:has(.hero-slider) #site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
    :root:has(.hero-slider) #site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.hero-slider) #site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
        filter: none !important;
    }

    :root:has(.hero-slider) #site-header .header-wrapper-alt:not(.menu-open) .header-logo svg path {
        fill: #7027B9 !important;
    }
}

/* The contour reference is a light slide even though it previously carried
   the dark-slide class. Restore its black copy and violet controls. */
.hero-slider .hero-reference-waves :is(.slide-heading, .slide-content p, .hero-awards h6) {
    color: #000000 !important;
}

.hero-slider .hero-reference-waves .slide-cta {
    color: #FFFFFF !important;
    background-color: #7027B9 !important;
}

.hero-slider .hero-reference-waves .slide-cta svg path {
    fill: #FFFFFF !important;
}

.hero-slider .hero-reference-waves .ai-service-list li a {
    color: #7027B9 !important;
    border-color: #8331D9 !important;
    background-color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767px) {
    .hero-slider .swiper-slide.hero-reference-dark {
        background-position: 58% center !important;
    }

    .hero-slider .swiper-slide.hero-reference-waves {
        background-position: center !important;
        background-size: cover !important;
    }

    .hero-slider .swiper-slide.hero-reference-dots {
        background-position: 62% center !important;
    }
}

/* Homepage palette lock: carry the approved hero violet family through every
   existing purple surface and accent without recoloring neutral UI or media. */
:root:has(.elementor-12),
.elementor-12 {
    --homepage-violet-deep: #2B004D;
    --homepage-violet-primary: #7027B9;
    --homepage-violet-highlight: #9F43F0;
    --homepage-violet-soft: #EEE6FB;
    --primary: var(--homepage-violet-primary);
    --color-gray: var(--homepage-violet-primary);
    --swiper-theme-color: var(--homepage-violet-primary);
    --e-global-color-primary: var(--homepage-violet-primary);
    --homepage-violet-gradient:
        radial-gradient(75% 110% at 82% 8%, rgba(159, 67, 240, 0.72) 0%, rgba(112, 39, 185, 0.22) 48%, transparent 72%),
        linear-gradient(128deg, #210039 0%, var(--homepage-violet-deep) 36%, var(--homepage-violet-primary) 72%, var(--homepage-violet-highlight) 100%);
}

.elementor-12 :is(.home-cta-section,
    .partnership-sec,
    .featured-whitepaper,
    #cta-form) {
    background-color: var(--homepage-violet-deep) !important;
    background-image: var(--homepage-violet-gradient) !important;
}

.elementor-12 :is(.home-cta-section,
    .partnership-sec,
    .featured-whitepaper)::before,
.elementor-12 :is(.home-cta-section,
    .partnership-sec,
    .featured-whitepaper)::after {
    background-image: none !important;
}

.elementor-12 :is(.report-submit-btn,
    .contact-page-form .btn-primary,
    #sib_signup_form_2 input[type="submit"]),
:root:has(.elementor-12) :is(.global-search-form button,
    .global-search-form button:hover) {
    color: #FFFFFF !important;
    background-color: var(--homepage-violet-primary) !important;
    border-color: var(--homepage-violet-primary) !important;
}

.elementor-12 :is(.report-submit-btn,
    .contact-page-form .btn-primary,
    #sib_signup_form_2 input[type="submit"]):hover {
    background-color: #5B149B !important;
    border-color: #5B149B !important;
}

.elementor-12 :is(.cta-vertical-slider p span,
    .industry-item.active .industry-number,
    .industry-item.active .industry-header h3,
    .pd-column-forward .pd-column-title) {
    color: var(--homepage-violet-primary) !important;
}

.elementor-12 :is(.process-progress-bar-fill,
    .swiper-pagination-bullet-active) {
    background-color: var(--homepage-violet-primary) !important;
}

.elementor-12 :is(.industry-btn,
    .engagement-model-btn,
    .view-all-btn):hover {
    color: #FFFFFF !important;
    background-color: var(--homepage-violet-primary) !important;
    border-color: var(--homepage-violet-primary) !important;
}

.elementor-12 :is(input,
    select,
    textarea):focus {
    border-color: var(--homepage-violet-primary) !important;
    outline-color: var(--homepage-violet-primary) !important;
}

/* Homepage button hover contrast: every button that adopts the violet hover
   surface must also switch its label and icon to white. */
.elementor-12 :is(button,
    input[type="button"],
    input[type="submit"],
    a[class*="btn"],
    a[class*="button"],
    .elementor-button,
    .slide-cta,
    .report-submit-btn,
    .view-all-btn,
    .industry-btn,
    .engagement-model-btn,
    .contact-page-form .btn-primary,
    #sib_signup_form_2 input[type="submit"]):hover,
:root:has(.elementor-12) :is(.cta-contact-us a,
    .global-search-form button):hover {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-color: #5B149B !important;
    border-color: #5B149B !important;
}

.elementor-12 :is(button,
    a[class*="btn"],
    a[class*="button"],
    .elementor-button,
    .slide-cta,
    .report-submit-btn,
    .view-all-btn,
    .industry-btn,
    .engagement-model-btn,
    .contact-page-form .btn-primary):hover :is(span,
    strong,
    .elementor-button-text,
    .elementor-button-icon) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-12 :is(button,
    a[class*="btn"],
    a[class*="button"],
    .elementor-button,
    .slide-cta,
    .report-submit-btn,
    .view-all-btn,
    .industry-btn,
    .engagement-model-btn,
    .contact-page-form .btn-primary):hover svg :is(path, line, polyline) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Engagement Models landing page: replace blue background surfaces and their
   decorative artwork with a consistent purple gradient. Genuine content
   photography, technology logos, model cards, and buttons remain intact. */
.elementor-35296 {
    --engagement-models-purple-gradient:
        radial-gradient(88% 118% at 94% 2%, rgba(216, 180, 254, 0.32) 0%, transparent 48%),
        radial-gradient(72% 94% at 3% 100%, rgba(168, 85, 247, 0.25) 0%, transparent 56%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 32%, #7027B9 69%, #8331D9 100%);
}

.elementor-35296 :is(.elementor-element-89d782a,
    .elementor-element-b35ed98,
    .assesment,
    #our-solution,
    #cta-form) {
    background-color: #3B1F5C !important;
    background-image: var(--engagement-models-purple-gradient) !important;
}

/* Engagement Models: keep only the form column on a clean white surface while
   the surrounding contact section retains its purple gradient. */
.elementor-35296 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9,
    .contact-page-form,
    .homeform,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

.elementor-35296 #cta-form #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-35296 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9,
    .contact-page-form,
    .homeform,
    #contact-custom-form) :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    label,
    .custom-label,
    .checkbox-field) {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-35296 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9,
    .contact-page-form,
    .homeform,
    #contact-custom-form) a:not(.elementor-button) {
    color: #7027B9 !important;
    -webkit-text-fill-color: #7027B9 !important;
}

/* The hero raster and solution illustration are decorative background layers.
   Keep their files in the project while preventing them from rendering. */
.elementor-35296 :is(#our-solution > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"]) {
    display: none !important;
}

.elementor-35296 :is(.elementor-element-89d782a,
    .elementor-element-b35ed98,
    .assesment,
    #our-solution) :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    strong,
    b,
    a,
    .elementor-heading-title):not(.elementor-button, .elementor-button *) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-35296 :is(.elementor-element-89d782a,
    .elementor-element-b35ed98,
    .assesment,
    #our-solution)::before,
.elementor-35296 :is(.elementor-element-89d782a,
    .elementor-element-b35ed98,
    .assesment,
    #our-solution)::after {
    background-image: none !important;
}

.elementor-35296 .tool-tech-left .highlighted-text {
    background-image: linear-gradient(90deg, #D8B4FE 0%, #A855F7 48%, #8331D9 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 767px) {

    .elementor-35296 :is(.elementor-element-89d782a,
        .elementor-element-b35ed98,
        .assesment,
        #our-solution,
        #cta-form) {
        background-image:
            radial-gradient(110% 78% at 100% 0%, rgba(216, 180, 254, 0.28) 0%, transparent 52%),
            linear-gradient(152deg, #241036 0%, #4C1D6F 52%, #8331D9 100%) !important;
    }
}

/* Customer detail CTA: the case-study template is shared by every page under
   Our Customers. Keep its layout, but replace the original blue-lit artwork
   with a soft Deployed plum/violet treatment. */
.elementor-2103 .elementor-element.elementor-element-896cea0 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 72% 18%, rgba(233, 213, 255, 0.38) 0%, rgba(192, 132, 252, 0.18) 26%, transparent 55%),
        radial-gradient(ellipse at 92% 86%, rgba(168, 85, 247, 0.28) 0%, transparent 48%),
        linear-gradient(135deg, #35164f 0%, #572086 46%, #7d2bc7 100%) !important;
}

.elementor-2103 .elementor-element.elementor-element-896cea0::before,
.elementor-2103 .elementor-element.elementor-element-896cea0>.elementor-background-video-container::before,
.elementor-2103 .elementor-element.elementor-element-896cea0>.e-con-inner>.elementor-background-video-container::before,
.elementor-2103 .elementor-element.elementor-element-896cea0>.elementor-background-slideshow::before,
.elementor-2103 .elementor-element.elementor-element-896cea0>.e-con-inner>.elementor-background-slideshow::before,
.elementor-2103 .elementor-element.elementor-element-896cea0>.elementor-motion-effects-container>.elementor-motion-effects-layer::before {
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* Customer detail hero and gated case-study form share the same Elementor
   template. Replace the remaining legacy blue ellipse and form-header wash
   without changing the layout or the existing folder illustration. */
.elementor-2103 .elementor-element.elementor-element-67d3452:not(.elementor-motion-effects-element-type-background),
.elementor-2103 .elementor-element.elementor-element-67d3452>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url("/wp-content/themes/tkxel-theme/assets/images/resources-hero-purple-orbit.svg") !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: 46% auto !important;
}

.elementor-2103 .elementor-element.elementor-element-a22dcdc {
    background: linear-gradient(135deg, #35164f 0%, #572086 52%, #7d2bc7 100%) !important;
}

.elementor-2103 .elementor-element.elementor-element-d239581 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 72% 16%, rgba(243, 232, 255, 0.48) 0%, rgba(216, 180, 254, 0.22) 30%, transparent 62%),
        linear-gradient(135deg, #3b1f5c 0%, #6725a4 54%, #8b3bd1 100%) !important;
}

@media (max-width: 767px) {

    .elementor-2103 .elementor-element.elementor-element-67d3452:not(.elementor-motion-effects-element-type-background),
    .elementor-2103 .elementor-element.elementor-element-67d3452>.elementor-motion-effects-container>.elementor-motion-effects-layer {
        background-size: 82% auto !important;
        background-position: 128% top !important;
    }
}

/* Service detail templates use transparent raster artwork for several shared
   decorative sections. Keep each original silhouette and responsive source,
   while shifting its baked-in blue pixels into the violet palette. */
:where(.site-service-detail, .site-nav-service-scope) img:is([src*="solution-section-1"],
    [data-src*="solution-section-1"],
    [bv-data-src*="solution-section-1"],
    [bv-data-srcset*="solution-section-1"],
    [src*="/gain"],
    [data-src*="/gain"],
    [bv-data-src*="/gain"],
    [bv-data-srcset*="/gain"],
    [src*="banner-gradient"],
    [data-src*="banner-gradient"],
    [bv-data-src*="banner-gradient"],
    [bv-data-srcset*="banner-gradient"],
    [src$="/engineering.webp"],
    [data-src*="/engineering.webp"],
    [bv-data-src*="/engineering.webp"],
    [src$="/advisory.webp"],
    [data-src*="/advisory.webp"],
    [bv-data-src*="/advisory.webp"],
    [src$="/optimization-quality.webp"],
    [data-src*="/optimization-quality.webp"],
    [bv-data-src*="/optimization-quality.webp"],
    [src$="/cloud.webp"],
    [data-src*="/cloud.webp"],
    [bv-data-src*="/cloud.webp"]) {
    filter: hue-rotate(48deg) saturate(1.16) drop-shadow(0 9px 20px rgba(112, 39, 185, 0.12)) !important;
}

/* Service UI illustrations are external SVGs, including assets loaded lazily.
   Recolor only icon-bearing component slots; branded technology, customer,
   award, certification, header, and footer artwork remains untouched. */
:where(.site-service-detail, .site-nav-service-scope) :is(.thumbnail-wrap,
    .why-it-matters-single,
    .service_platform_card,
    .wf-icon) img:is([src*=".svg"],
    [data-src*=".svg"],
    [bv-data-src*=".svg"],
    [bv-data-srcset*=".svg"]),
:where(.site-service-detail, .site-nav-service-scope) img:is(.cs-img,
    .cust_img):is([src*=".svg"],
    [data-src*=".svg"],
    [bv-data-src*=".svg"],
    [bv-data-srcset*=".svg"]) {
    filter: hue-rotate(48deg) saturate(1.16) drop-shadow(0 8px 16px rgba(112, 39, 185, 0.12)) !important;
}

/* Process layers are recolored inside their SVG response. Do not hue-shift
   those purple SVGs a second time, which would turn violet into magenta. */
:where(.site-nav-service-detail, .site-nav-service-scope) img.step-img {
    filter: drop-shadow(0 8px 16px rgba(112, 39, 185, 0.12)) !important;
}

/* Shared treatment for the service detail pages linked from the navigation.
   The renderer applies this scope only to the exact menu destinations, which
   keeps unrelated legacy service snapshots unchanged. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) {
    --deployed-plum: #3B1F5C;
    --deployed-violet: #7027B9;
    --deployed-purple: #8331D9;
    --deployed-orchid: #A855F7;
    --deployed-mist: #F3E8FF;
    accent-color: var(--deployed-purple);
}

/* Keep the established white hero composition while replacing the blue star
   wash with a softer Deployed glow behind the purple artwork. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .service-main-banner {
    background-color: #FFFFFF !important;
    background-image:
        radial-gradient(ellipse at 88% 12%, rgba(216, 180, 254, 0.38) 0%, rgba(192, 132, 252, 0.16) 31%, transparent 62%),
        radial-gradient(ellipse at 72% 35%, rgba(131, 49, 217, 0.10) 0%, transparent 48%) !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.service-hero-btn,
    .cta-contact-us,
    .contact-custom-form button[type="submit"],
    .contact-custom-form input[type="submit"]) {
    background-color: var(--deployed-purple) !important;
    background-image: linear-gradient(135deg, var(--deployed-plum) 0%, var(--deployed-purple) 58%, var(--deployed-orchid) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

/* Purple interactive language for offering, challenge, and process cards. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .offer-card:hover,
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .offer-card:focus-within {
    border-color: rgba(168, 85, 247, 0.72) !important;
    background: linear-gradient(145deg, var(--deployed-plum) 0%, var(--deployed-violet) 52%, var(--deployed-purple) 100%) !important;
    box-shadow: 0 18px 38px rgba(59, 31, 92, 0.18);
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.Challenges-cards,
    .service_platform_card,
    .gain-card) {
    border-color: rgba(131, 49, 217, 0.28) !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .process-two-single-step.active-step .step-title,
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.offer-tab-btn.active, .offer-tab-btn:hover) {
    background-image: linear-gradient(90deg, var(--deployed-violet), var(--deployed-orchid)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(a,
    button,
    input,
    select,
    textarea):focus-visible {
    outline: 3px solid rgba(168, 85, 247, 0.58) !important;
    outline-offset: 3px;
}

/* Shared blue raster decorations retain their silhouettes and grain. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) img:is([src*="solution-section-1"],
    [data-src*="solution-section-1"],
    [bv-data-src*="solution-section-1"],
    [bv-data-srcset*="solution-section-1"],
    [src*="/gain"],
    [data-src*="/gain"],
    [bv-data-src*="/gain"],
    [bv-data-srcset*="/gain"],
    [src*="progress.webp"],
    [data-src*="progress.webp"],
    [bv-data-src*="progress.webp"]) {
    filter: hue-rotate(52deg) saturate(1.22) contrast(1.03) drop-shadow(0 12px 28px rgba(112, 39, 185, 0.14)) !important;
}

/* Page-specific UI icon groups; technology/vendor logos and case-study
   photography are intentionally excluded. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is([data-id="d14fc90"],
    [data-id="b48444e"],
    .challenge-icon,
    .faq-plus,
    .faq-minus) img {
    filter: hue-rotate(52deg) saturate(1.24) drop-shadow(0 7px 15px rgba(112, 39, 185, 0.15)) !important;
}

/* AI Pods uses a people-and-workflow illustration, so filtering the complete
   image would distort the portraits. Cover only its small blue bot badge with
   a responsive Deployed sparkle badge. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) [data-id="2024491b"] .elementor-widget-container {
    position: relative;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) [data-id="2024491b"] .elementor-widget-container::after {
    content: "✦";
    position: absolute;
    z-index: 3;
    left: 42.8%;
    top: 50%;
    width: clamp(28px, 3.1vw, 38px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 25%, #D8B4FE 0%, #A855F7 33%, #7027B9 72%, #3B1F5C 100%);
    box-shadow: 0 8px 22px rgba(112, 39, 185, 0.34);
    color: #FFFFFF;
    font-size: clamp(14px, 1.55vw, 20px);
    line-height: 1;
    pointer-events: none;
}

/* Purple sections keep high-contrast white typography. Shared form roots are
   reset immediately below so form controls retain dark readable copy. */
.site-ai-data-service-scope.comon-gradient,
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .comon-gradient {
    background-color: var(--deployed-plum) !important;
    background-image:
        radial-gradient(ellipse at 78% 8%, rgba(216, 180, 254, 0.34) 0%, transparent 48%),
        linear-gradient(135deg, #35164F 0%, #572086 48%, #8331D9 100%) !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .comon-gradient :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    .elementor-heading-title) {
    color: #FFFFFF !important;
}

/* Every remaining purple surface in this service family uses white copy.
   White CTA buttons and the white consultation form are excluded so their
   intentionally dark labels remain readable. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.blue-gradient,
    .gradient-primary,
    .subpage-hero-section,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .offer-card:hover,
    .offer-card:focus-within,
    .white-paper-sc,
    a.interactive-cards-single,
    .welcome_number-wrapper.active) {
    color: #FFFFFF !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.blue-gradient,
    .gradient-primary,
    .subpage-hero-section,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .offer-card:hover,
    .offer-card:focus-within,
    .white-paper-sc,
    a.interactive-cards-single,
    .welcome_number-wrapper.active) :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    label,
    .title,
    .sub-title,
    .offer-tagline,
    .offer-title,
    .offer-description,
    .gain-title,
    .gain-desc,
    .elementor-heading-title,
    .elementor-widget-text-editor,
    a):not(.cta-btn, .cta-btn *, .elementor-button, .elementor-button *) {
    color: #FFFFFF !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.blue-gradient,
    .gradient-primary,
    .subpage-hero-section,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .offer-card:hover,
    .offer-card:focus-within,
    .white-paper-sc,
    a.interactive-cards-single,
    .welcome_number-wrapper.active) :is(h1, h2, h3, h4, h5, h6, .title, .offer-title, .gain-title, .elementor-heading-title) {
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) .service-technologies-tab .tabs-header :is(.tab:hover,
    .tab.active),
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is(.engagement-model-btn:hover,
    .industry-btn:hover) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* The consultation form is a shared Elementor document. Keep its surrounding
   purple CTA, but make the full form column an opaque white panel. */
:where(.site-ai-data-service-detail, .site-ai-data-service-scope) [data-id="bcb5451"] {
    position: relative !important;
    z-index: 4 !important;
    isolation: isolate;
    overflow: hidden;
    background: #FFFFFF !important;
    box-shadow: 0 20px 48px rgba(36, 16, 54, 0.18);
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) :is([data-id="bcb5451"],
    [data-id="93a03e9"],
    [data-id="93a03e9"] > .e-con-inner,
    [data-id="25355c1"],
    [data-id="25355c1"] > .elementor-widget-container,
    [data-id="25355c1"] .elementor-shortcode,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    border-color: rgba(112, 39, 185, 0.22) !important;
    color: #1A0F2E !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) #contact-custom-form :is(label, p, .custom-label) {
    color: #1A0F2E !important;
    opacity: 1 !important;
}

:where(.site-ai-data-service-detail, .site-ai-data-service-scope) #contact-custom-form a {
    color: var(--deployed-purple) !important;
}

/* The complete service form sits on an opaque white panel inside #cta-form.
   Its copy must stay dark even though the surrounding CTA uses white text. */
:where(.site-nav-service-detail, .site-nav-service-scope) #cta-form [data-id="bcb5451"] :is(p, label, span, .custom-label),
:where(.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(p, label, span, option) {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 1 !important;
}

:where(.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea) {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
}

:where(.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(input, textarea)::placeholder {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 0.72 !important;
}

:where(.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(input[type="submit"], button[type="submit"]) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 767px) {
    :where(.site-ai-data-service-detail, .site-ai-data-service-scope) .service-main-banner {
        background-image: radial-gradient(ellipse at 105% 5%, rgba(192, 132, 252, 0.34) 0%, transparent 55%) !important;
    }

    :where(.site-ai-data-service-detail, .site-ai-data-service-scope) [data-id="2024491b"] .elementor-widget-container::after {
        width: clamp(25px, 7vw, 34px);
    }
}

/* All Services uses nine optimized PNG illustrations rather than the SVG icon
   components used by service-detail pages. Keep their existing silhouettes and
   animation, but move every one from blue into the shared violet palette. */
.page-id-7297 .ai-data-section .ai-data-left>img {
    filter: hue-rotate(62deg) saturate(1.28) contrast(1.04) drop-shadow(0 8px 18px rgba(112, 39, 185, 0.16)) !important;
}

/* Homepage hero pagination: retain the existing timed fill and pill geometry,
   while overriding Swiper's default blue active-progress paint. */
.home .hero-slider .swiper-pagination .swiper-pagination-bullet-active,
.page-id-12 .hero-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #DCDCE2 !important;
    background-image: linear-gradient(90deg, #7027B9 0%, #8B35D4 55%, #A855F7 100%) !important;
}

/* The two white-slide hero PNGs are opaque and their artwork reaches the
   bottom pixel row. Fade that edge into the slide instead of exposing a hard
   rectangular crop, while preserving the original composition and sizing. */
.hero-slider .swiper-slide>img.video-bg:is([src*="hero-orbital-ribbon-purple"],
    [src*="hero-prism-wave-purple"]) {
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 68%,
            rgba(0, 0, 0, 0.96) 76%,
            rgba(0, 0, 0, 0.68) 86%,
            rgba(0, 0, 0, 0.24) 94%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 68%,
            rgba(0, 0, 0, 0.96) 76%,
            rgba(0, 0, 0, 0.68) 86%,
            rgba(0, 0, 0, 0.24) 94%,
            transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    backface-visibility: hidden;
    transform: translateZ(0);
}

@media (min-width: 768px) {

    .hero-slider .swiper-slide>img.video-bg:is([src*="hero-orbital-ribbon-purple"],
        [src*="hero-prism-wave-purple"]) {
        top: 0 !important;
        right: -1px !important;
        width: auto !important;
        height: 104% !important;
        max-width: none !important;
        object-fit: cover;
        object-position: right top;
    }
}

@media (max-width: 767px) {

    .hero-slider .swiper-slide>img.video-bg:is([src*="hero-orbital-ribbon-purple"],
        [src*="hero-prism-wave-purple"]) {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
    }
}

/* Purpose-built middle-slide artwork: a dark readable text field on the left
   and polished glass-ribbon depth on the right. */
.hero-slider .swiper-slide.blue-bg {
    isolation: isolate;
}

.hero-slider .swiper-slide.blue-bg::before,
.hero-slider .swiper-slide.blue-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hero-slider .swiper-slide.blue-bg::before {
    z-index: 0;
    inset: 0;
    background-image: url("/wp-content/uploads/2026/07/hero-ai-glass-ribbons-purple-v3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-slider .swiper-slide.blue-bg::after {
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(112, 39, 185, 0.04) 0%, transparent 62%),
        linear-gradient(to bottom, transparent 82%, rgba(112, 39, 185, 0.04) 100%);
}

.hero-slider .swiper-slide.blue-bg>.slide-content {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .hero-slider .swiper-slide.blue-bg::before {
        background-position: 62% center;
    }

    .hero-slider .swiper-slide.blue-bg::after {
        background: linear-gradient(90deg, rgba(76, 29, 111, 0.10) 0%, rgba(112, 39, 185, 0.04) 58%, transparent 100%);
    }
}

/* Homepage podcast portraits contain a legacy blue wash along the lower edge.
   Fade that baked band into the card's purple field and disable the old blue
   animated hover overlay, while preserving the portraits and card layout. */
.home .podcast_slider_2 .participants-wrap::before,
.home .podcast_slider_2 .participants-wrap::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

.home .podcast_slider_2 .participant img {
    display: block;
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 62%,
            rgba(0, 0, 0, 0.72) 67%,
            transparent 76%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 62%,
            rgba(0, 0, 0, 0.72) 67%,
            transparent 76%,
            transparent 100%);
}

/* Homepage purple sections: apply the signature glowing violet hero background
   with atmospheric lighting, multi-stage radial glows, and fluid luminous ribbons. */
:is(.home, .page-id-12) :is(.partnership-sec,
    .partnership-sec.elementor-element-33c2a73,
    .home-cta-section,
    .elementor-element-8167901,
    .elementor-element-1fe4615,
    #webinar-section,
    .elementor-element-03d4d4b,
    .latest-webinar,
    .elementor-element-ce68072,
    .whitpaper .featured-whitepaper,
    .elementor-element-1c2751c,
    .elementor-element-6dcad5b,
    .comon-gradient) {
    position: relative;
    overflow: hidden;
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:is(.home, .page-id-12) :is(.partnership-sec,
    .partnership-sec.elementor-element-33c2a73,
    .home-cta-section,
    .elementor-element-8167901,
    .elementor-element-1fe4615,
    #webinar-section,
    .elementor-element-03d4d4b,
    .latest-webinar,
    .elementor-element-ce68072,
    .whitpaper .featured-whitepaper,
    .elementor-element-1c2751c,
    .elementor-element-6dcad5b,
    .comon-gradient)::before,
:is(.home, .page-id-12) :is(.partnership-sec,
    .partnership-sec.elementor-element-33c2a73,
    .home-cta-section,
    .elementor-element-8167901,
    .elementor-element-1fe4615,
    #webinar-section,
    .elementor-element-03d4d4b,
    .latest-webinar,
    .elementor-element-ce68072,
    .whitpaper .featured-whitepaper,
    .elementor-element-1c2751c,
    .elementor-element-6dcad5b,
    .comon-gradient)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

:is(.home, .page-id-12) :is(.partnership-sec,
    .partnership-sec.elementor-element-33c2a73,
    .home-cta-section,
    .elementor-element-8167901,
    .elementor-element-1fe4615,
    #webinar-section,
    .elementor-element-03d4d4b,
    .latest-webinar,
    .elementor-element-ce68072,
    .whitpaper .featured-whitepaper,
    .elementor-element-1c2751c,
    .elementor-element-6dcad5b,
    .comon-gradient)> :is(.elementor-background-video-container,
    .elementor-background-slideshow,
    .elementor-motion-effects-container),
:is(.home, .page-id-12) :is(.partnership-sec,
    .partnership-sec.elementor-element-33c2a73,
    .home-cta-section,
    .elementor-element-8167901,
    .elementor-element-1fe4615,
    #webinar-section,
    .elementor-element-03d4d4b,
    .latest-webinar,
    .elementor-element-ce68072,
    .whitpaper .featured-whitepaper,
    .elementor-element-1c2751c,
    .elementor-element-6dcad5b,
    .comon-gradient) .elementor-motion-effects-layer {
    background: none !important;
    background-image: none !important;
}

/* Homepage CTA: make the complete form column an opaque white card. Elementor
   paints this area through several nested containers, so each surface must be
   reset rather than only changing the innermost form wrapper. */
:is(.home, .page-id-12) #cta-form :is(.elementor-element-bcb5451, [data-id="bcb5451"]) {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate;
    overflow: hidden;
    background: #FFFFFF !important;
    box-shadow: 0 18px 48px rgba(36, 16, 54, 0.16);
}

:is(.home, .page-id-12) #cta-form :is(.elementor-element-bcb5451,
    [data-id="bcb5451"],
    .elementor-element-93a03e9,
    [data-id="93a03e9"],
    [data-id="93a03e9"] > .e-con-inner,
    .elementor-element-25355c1,
    [data-id="25355c1"],
    .elementor-element-25355c1 > .elementor-widget-container,
    .elementor-element-25355c1 .elementor-shortcode,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
}

:is(.home, .page-id-12) #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9)::before,
:is(.home, .page-id-12) #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9)::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

:is(.home, .page-id-12) #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9)> :is(.elementor-background-video-container,
    .elementor-background-slideshow,
    .elementor-motion-effects-container),
:is(.home, .page-id-12) #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9) .elementor-motion-effects-layer {
    display: none !important;
    background: none !important;
}

:is(.home, .page-id-12) #cta-form #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    color: #1A0F2E !important;
}

/* Contact page: retain the original two-column layout, but put the complete
   form on an opaque white surface and restore readable text contrast. */
.page-id-10367 [data-id="0411fb4"] .elementor-heading-title {
    color: #FFFFFF !important;
}

.page-id-10367 :is([data-id="e6d25ea"],
    [data-id="e6d25ea"] > .e-con-inner,
    [data-id="19afb06"],
    [data-id="19afb06"] > .elementor-widget-container,
    [data-id="19afb06"] .elementor-shortcode,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
}

.page-id-10367 [data-id="e6d25ea"] {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate;
}

.page-id-10367 [data-id="e6d25ea"]::before,
.page-id-10367 [data-id="e6d25ea"]::after {
    content: none !important;
    display: none !important;
}

.page-id-10367 #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    color: #1A0F2E !important;
}

.page-id-10367 #contact-custom-form label,
.page-id-10367 #contact-custom-form .checkbox-field label,
.page-id-10367 [data-id="19afb06"] .custom-label label {
    color: #1A0F2E !important;
    opacity: 1 !important;
}

.page-id-10367 [data-id="19afb06"] .custom-label a {
    color: #8331D9 !important;
}

/* Contact page: use the same violet system as the homepage. The renderer
   serializes this page without its body class, so anchor these rules to the
   persistent Elementor page wrapper instead. */
.elementor-10367 {
    --contact-violet-deep: #2B004D;
    --contact-violet-primary: #7027B9;
    --contact-violet-highlight: #9F43F0;
    --contact-violet-hover: #5B149B;
    --contact-violet-soft: #EEE6FB;
    --e-global-color-primary: var(--contact-violet-primary);
    accent-color: var(--contact-violet-primary);
}

.elementor.elementor-10367>.elementor-element.elementor-element-aa6986f.contact-us-page {
    background-color: var(--contact-violet-deep) !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor.elementor-10367>.elementor-element.elementor-element-aa6986f.contact-us-page::before,
.elementor.elementor-10367>.elementor-element.elementor-element-aa6986f.contact-us-page>.elementor-background-video-container,
.elementor.elementor-10367>.elementor-element.elementor-element-aa6986f.contact-us-page>.elementor-background-slideshow,
.elementor.elementor-10367>.elementor-element.elementor-element-aa6986f.contact-us-page>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    content: none !important;
    display: none !important;
}

.elementor-10367 .contact-us-page :is([data-id="37e927f"],
    [data-id="d4df204"]) :is(.elementor-heading-title, h1, h2, h3, h4, h5, h6, p) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-10367 :is([data-id="e6d25ea"],
    [data-id="e6d25ea"] > .e-con-inner,
    [data-id="19afb06"],
    [data-id="19afb06"] > .elementor-widget-container,
    [data-id="19afb06"] .elementor-shortcode,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
}

.elementor-10367 [data-id="e6d25ea"] {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate;
    box-shadow: 0 28px 70px rgba(33, 0, 57, 0.24);
}

.elementor-10367 [data-id="e6d25ea"]::before,
.elementor-10367 [data-id="e6d25ea"]::after {
    content: none !important;
    display: none !important;
}

.elementor-10367 #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    border-color: rgba(112, 39, 185, 0.20) !important;
    color: #1A0F2E !important;
}

.elementor-10367 #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea):focus {
    border-color: var(--contact-violet-primary) !important;
    box-shadow: 0 0 0 3px rgba(112, 39, 185, 0.14) !important;
    outline: none !important;
}

.elementor-10367 #contact-custom-form :is(label, .checkbox-field label),
.elementor-10367 [data-id="19afb06"] .custom-label label {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
    opacity: 1 !important;
}

.elementor-10367 [data-id="19afb06"] .custom-label a {
    color: var(--contact-violet-primary) !important;
    -webkit-text-fill-color: var(--contact-violet-primary) !important;
}

.elementor-10367 [data-id="19afb06"] .custom-label a:hover {
    color: var(--contact-violet-hover) !important;
    -webkit-text-fill-color: var(--contact-violet-hover) !important;
}

.elementor-10367 #contact-custom-form input[type="submit"],
.elementor-10367 .elementor-button {
    background-color: var(--contact-violet-primary) !important;
    background-image: linear-gradient(135deg, var(--contact-violet-deep), var(--contact-violet-primary) 64%, var(--contact-violet-highlight)) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-10367 #contact-custom-form input[type="submit"]:hover,
.elementor-10367 #contact-custom-form input[type="submit"]:focus-visible,
.elementor-10367 .elementor-button:hover,
.elementor-10367 .elementor-button:focus-visible {
    background: var(--contact-violet-hover) !important;
    border-color: var(--contact-violet-hover) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-10367 .elementor-button:hover :is(span, .elementor-button-text),
.elementor-10367 .elementor-button:focus-visible :is(span, .elementor-button-text),
.elementor-10367 .elementor-button:hover :is(svg, svg path),
.elementor-10367 .elementor-button:focus-visible :is(svg, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.elementor-10367) .cta-contact-us a {
    background-color: var(--contact-violet-primary, #7027B9) !important;
    border-color: var(--contact-violet-primary, #7027B9) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.elementor-10367) .cta-contact-us a:hover,
:root:has(.elementor-10367) .cta-contact-us a:focus-visible {
    background-color: var(--contact-violet-hover, #5B149B) !important;
    border-color: var(--contact-violet-hover, #5B149B) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.elementor-10367) #site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
:root:has(.elementor-10367) #site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.elementor-10367) #site-header .header-wrapper-alt:not(.menu-open) .header-logo svg path {
    fill: #FFFFFF !important;
}

:root:has(.elementor-10367) #site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

/* Once the Contact page header becomes sticky it sits on an opaque white
   surface, so return the navigation and brand to their dark/violet state. */
:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) #menu-main-menu>li>a,
:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle,
:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle:hover,
:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle:focus {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) #menu-main-menu>li.menu-item-has-children>a svg path,
:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-menu-cta svg path {
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
}

:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-logo svg path {
    fill: var(--contact-violet-primary, #7027B9) !important;
}

:root:has(.elementor-10367) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: none !important;
}

/* Homepage Our Services: keep the artwork centered on larger screens. On
   phones it becomes the soft top-right background used by the mobile design. */
.elementor-12 .od-service-card .od-service-icon img {
    transition: filter 400ms ease, opacity 400ms ease, transform 400ms ease !important;
}

@media screen and (min-width: 768px) {
    .elementor-12 .od-service-card .od-service-icon {
        width: 302px !important;
        height: 302px !important;
    }
}

.elementor-12 .od-service-card.card-number-1 .od-service-icon {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
}

.elementor-12 .od-service-card.card-number-1 .od-service-icon img {
    content: url("/icon2.png") !important;
    width: 302px !important;
    height: 302px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: scale(0.81) !important;
    transform-origin: center center !important;
    filter: none !important;
}

.elementor-12 .od-service-card.card-number-1:hover .od-service-icon img {
    content: url("/icon2.png") !important;
    filter: blur(8px) saturate(1.1) !important;
    opacity: 0.9;
    transform: scale(0.88) !important;
}

.elementor-12 .od-service-card.card-number-2 .od-service-icon {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
}

.elementor-12 .od-service-card.card-number-2 .od-service-icon img {
    content: url("/icon3.png") !important;
    width: 302px !important;
    height: 302px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: scale(1.02) !important;
    transform-origin: center center !important;
    filter: none !important;
}

.elementor-12 .od-service-card.card-number-2:hover .od-service-icon img {
    content: url("/icon3.png") !important;
    filter: blur(8px) saturate(1.1) !important;
    opacity: 0.9;
    transform: scale(1.08) !important;
}

.elementor-12 .od-service-card.card-number-3 .od-service-icon {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
}

.elementor-12 .od-service-card.card-number-3 .od-service-icon img {
    content: url("/icon4.png") !important;
    width: 302px !important;
    height: 302px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: scale(0.77) !important;
    transform-origin: center center !important;
    filter: none !important;
}

.elementor-12 .od-service-card.card-number-3:hover .od-service-icon img {
    content: url("/icon4.png") !important;
    filter: blur(8px) saturate(1.1) !important;
    opacity: 0.9;
    transform: scale(0.84) !important;
}

.elementor-12 .od-service-card.card-number-4 .od-service-icon {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
}

.elementor-12 .od-service-card.card-number-4 .od-service-icon img {
    content: url("/icon1.png") !important;
    width: 302px !important;
    height: 302px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: scale(0.84) !important;
    transform-origin: center center !important;
    filter: none !important;
}

.elementor-12 .od-service-card.card-number-4:hover .od-service-icon img {
    content: url("/icon1.png") !important;
    filter: blur(8px) saturate(1.1) !important;
    opacity: 0.9;
    transform: scale(0.92) !important;
}

@media screen and (max-width: 767px) {

    :root:has(.elementor-12),
    :root:has(.elementor-12) body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    .elementor-12 [data-id="69f37082"] {
        width: 100% !important;
        max-width: 100% !important;
        --padding-left: 16px !important;
        --padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .elementor-12 [data-id="70ce38d2"],
    .elementor-12 [data-id="70ce38d2"]>.e-con-inner,
    .elementor-12 [data-id="58b69346"],
    .elementor-12 [data-id="58b69346"]>.elementor-widget-container,
    .elementor-12 [data-id="58b69346"] .elementor-shortcode,
    .elementor-12 .od-services-slider,
    .elementor-12 .od-swiper-wrapper,
    .elementor-12 .od-swiper-slide,
    .elementor-12 .od-service-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-12 [data-id="70ce38d2"] {
        --gap: 28px !important;
        --row-gap: 28px !important;
        --padding-bottom: 56px !important;
    }

    .elementor-12 [data-id="e98d2eb"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        --gap: 16px !important;
        --row-gap: 16px !important;
        --padding-top: 44px !important;
        --padding-right: 0 !important;
    }

    .elementor-12 [data-id="171d7000"] .elementor-heading-title {
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    .elementor-12 .od-swiper-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        transform: none !important;
    }

    .elementor-12 .od-swiper-slide {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .elementor-12 .od-swiper-wrapper .od-service-card {
        position: relative !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(26, 15, 46, 0.22) !important;
        background: #fff !important;
        box-shadow: 0 18px 42px rgba(26, 15, 46, 0.08) !important;
    }

    .elementor-12 .od-swiper-wrapper .od-service-card .od-service-icon {
        position: absolute !important;
        z-index: 0 !important;
        top: -82px !important;
        left: auto !important;
        right: -88px !important;
        width: min(59vw, 224px) !important;
        height: min(59vw, 224px) !important;
        max-width: 224px !important;
        max-height: 224px !important;
        margin: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        pointer-events: none !important;
    }

    #homepage-services .od-swiper-wrapper .od-service-card .od-service-icon img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin-top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        object-fit: contain !important;
        opacity: 0.66 !important;
        filter: blur(7px) saturate(1.12) !important;
        transform: scale(1.08) !important;
        transform-origin: center !important;
    }

    .elementor-12 .od-swiper-wrapper .od-service-card .od-service-btn {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 30px 18px 28px !important;
        box-sizing: border-box !important;
    }

    .elementor-12 .od-service-card .headWrap {
        display: flex !important;
        min-height: 116px !important;
        align-items: flex-start !important;
    }

    .elementor-12 .od-service-card h3 {
        position: relative;
        z-index: 2;
        max-width: 76%;
        margin: 0 !important;
        font-size: clamp(25px, 7.5vw, 30px) !important;
        line-height: 1.14 !important;
        overflow-wrap: anywhere;
    }

    .elementor-12 .od-service-card .sub-services-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        position: relative;
        z-index: 2;
        align-items: flex-start;
        gap: 10px !important;
        margin-top: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .elementor-12 .od-service-card .sub-services-container>div[style*="display: flex"] {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .elementor-12 .od-service-card .sub-service {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .elementor-12 .od-service-card .sub-service a {
        display: inline-flex !important;
        align-items: center !important;
        width: fit-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        justify-content: flex-start !important;
        padding: 10px 15px !important;
        color: #2f174d !important;
        border: 1px solid rgba(47, 23, 77, 0.28) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.62) !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        text-align: left;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        box-sizing: border-box !important;
    }
}

/* Site-wide Deployed symbol supplied as the public/black.png asset. */
.deployed-brand-logo {
    width: 30px !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain;
}

.deployed-brand-logo--inverse {
    filter: brightness(0) invert(1) !important;
}

.deployed-logo-lockup {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    color: #1A0F2E;
    white-space: nowrap;
}

.deployed-logo-lockup--inverse {
    color: #FFFFFF;
}

.deployed-logo-name {
    color: inherit !important;
    font-family: "Plus Jakarta Sans", "Manrope", Arial, sans-serif !important;
    font-size: 22px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.55px;
}

.deployed-logo-lockup--header {
    gap: 9px;
}

#site-header .header-logo .deployed-site-logo {
    display: block;
    width: 30px !important;
    height: auto !important;
    max-height: 38px !important;
    object-fit: contain;
    object-position: left center;
}

@media screen and (max-width: 767px) {
    #site-header .header-logo .deployed-site-logo {
        width: 27px !important;
        max-height: 35px !important;
    }

    #site-header .deployed-logo-name {
        font-size: 19px;
    }
}

/* About Us: force the final CTA artwork to remain purple even when Elementor's
   cached page CSS restores its original blue pseudo-element image. */
.site-company-page .elementor-element-9d6bad4 {
    background: linear-gradient(135deg, #3B1F5C 0%, #7027B9 48%, #8331D9 100%) !important;
}

.site-company-page .elementor-element-9d6bad4::before,
.site-company-page .elementor-element-9d6bad4>.elementor-background-video-container::before,
.site-company-page .elementor-element-9d6bad4>.e-con-inner>.elementor-background-video-container::before,
.site-company-page .elementor-element-9d6bad4>.elementor-background-slideshow::before,
.site-company-page .elementor-element-9d6bad4>.e-con-inner>.elementor-background-slideshow::before,
.site-company-page .elementor-element-9d6bad4>.elementor-motion-effects-container>.elementor-motion-effects-layer::before {
    content: none !important;
    display: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

.site-company-page .elementor-element-9d6bad4 .plan-card-single {
    background: linear-gradient(135deg,
            rgba(232, 211, 255, 0.18),
            rgba(112, 39, 185, 0.38)) !important;
}

/* AI-First Company: these lifecycle illustrations now use dedicated purple
   assets, so do not apply an additional browser color filter. */
.site-company-page.elementor-page-42231 img:is([alt="AI strategy & direction"],
    [alt="AI validation & early execution"],
    [alt="AI-enabled operations"],
    [alt="AI-powered products & platforms"]) {
    filter: none !important;
}

:is(.site-company-page.elementor-page-42231, .elementor-42231) :is([data-id="53bf6bd"], .elementor-element-53bf6bd) {
    position: relative;
    background-color: #2B004D !important;
    background-image: var(--company-purple-ribbon, linear-gradient(135deg, #1A0F2E 0%, #2B004D 50%, #4B176E 100%)) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
}

/* Webinars: preserve the archive and detail templates while shifting their
   shared accents and the blue-lit archive photograph into the purple palette. */
.site-webinar-page .webinar-archive .archive-wrapper-right {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3B1F5C 0%, #7027B9 52%, #A855F7 100%);
}

.site-webinar-page .webinar-archive .archive-wrapper-right::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(131, 49, 217, 0.55);
    mix-blend-mode: color;
}

.site-webinar-page .webinar-archive .archive-wrapper-right img {
    display: block;
    filter: hue-rotate(42deg) saturate(0.92);
}

.site-webinar-page input[type="checkbox"] {
    accent-color: #8331D9;
}

.site-webinar-page :is(a, button, input):focus-visible {
    outline-color: #A855F7;
}

/* Podcasts and white papers retain their original archive/detail structures;
   these controls cover browser-native states not represented in source CSS. */
.site-purple-resource-page input[type="checkbox"] {
    accent-color: #8331D9;
}

.site-purple-resource-page :is(a, button, input):focus-visible {
    outline-color: #A855F7;
}

/* News logos and article artwork remain separate foreground assets. Replace
   the shared blue backdrop across the archive and every news detail page.
   Blog articles share the news wrapper but carry their own hero artwork, so
   they are excluded rather than given the shared backdrop. */
:is(.news_room_bottom .featured-image-wrap,
    .news-featured-slider .featured-image-wrap,
    .resources-list .news .thumb,
    .news-single-wrapper:not(.blog-single-wrapper) .news-thumbnail) {
    background-image: url("/wp-content/uploads/2025/12/news-bg-purple.png") !important;
}

.news-single-wrapper .news-top-wrapper-single {
    background-image:
        radial-gradient(circle at 88% 0%, rgba(216, 180, 254, 0.58) 0%, rgba(168, 85, 247, 0.26) 34%, rgba(131, 49, 217, 0.10) 53%, rgba(255, 255, 255, 0) 72%) !important;
}

.news_room_bottom .news-paper-item .font-ibx--plex__mono.news-type {
    background: linear-gradient(135deg, #6D28D9 0%, #8331D9 52%, #A855F7 100%) !important;
}

/* Resource Center: retain real content imagery and controls while replacing
   template-level blue/pink surfaces and decorative background artwork. */
.resources-hero {
    background-image:
        radial-gradient(circle at 88% 0%, rgba(216, 180, 254, 0.62) 0%, rgba(168, 85, 247, 0.30) 34%, rgba(131, 49, 217, 0.11) 53%, rgba(255, 255, 255, 0) 72%) !important;
}

.resources-by-type {
    background:
        radial-gradient(82% 120% at 92% 8%, rgba(216, 180, 254, 0.24) 0%, transparent 48%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 34%, #7027B9 72%, #8331D9 100%) !important;
}

.resources-by-type .card-item {
    background: linear-gradient(145deg, #3B1F5C 0%, #6D28D9 54%, #9333EA 100%) !important;
}

.resources-by-type .shape-img {
    display: none !important;
}

:is(.section-resources-feature, .filter-wrapper) .post-type-chip {
    background: linear-gradient(135deg, rgba(216, 180, 254, 0.62), rgba(168, 85, 247, 0.34)) !important;
    color: #4C1D95 !important;
}

/* All white-paper details share this hero. Keep the original blue artwork in
   the repository, but remove it from presentation and use color alone. */
.white-paper-single-parent-wrapper .white-paper-single-wrapper-top {
    background:
        radial-gradient(86% 128% at 96% 3%, rgba(216, 180, 254, 0.34) 0%, transparent 48%),
        radial-gradient(72% 104% at 2% 100%, rgba(168, 85, 247, 0.26) 0%, transparent 58%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 32%, #7027B9 70%, #8331D9 100%) !important;
    background-image:
        radial-gradient(86% 128% at 96% 3%, rgba(216, 180, 254, 0.34) 0%, transparent 48%),
        radial-gradient(72% 104% at 2% 100%, rgba(168, 85, 247, 0.26) 0%, transparent 58%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 32%, #7027B9 70%, #8331D9 100%) !important;
}

.white-paper-single-parent-wrapper .white-paper-single-wrapper-top::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Some white-paper details place the download card over the hero. The cover
   remains untouched; every code-rendered surface uses the purple system. */
.white-paper-single-parent-wrapper .white-paper-magnet>.tkxel__container {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(168, 85, 247, 0.42);
    border-radius: 18px;
    background: linear-gradient(145deg, #F7F0FF 0%, #E9D5FF 100%);
    box-shadow:
        0 24px 54px rgba(36, 16, 54, 0.20),
        0 7px 18px rgba(109, 40, 217, 0.12);
}

.white-paper-single-parent-wrapper .white-paper-magnet>.tkxel__container>img {
    display: block;
    width: 100%;
    margin: 0;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form {
    padding: 28px !important;
    border: 0 !important;
    border-top: 1px solid rgba(168, 85, 247, 0.30) !important;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(216, 180, 254, 0.23) 0%, transparent 52%),
        linear-gradient(180deg, #FFFFFF 0%, #FBF7FF 100%) !important;
    box-shadow: none !important;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form h3 {
    margin-bottom: 22px;
    color: #241036;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form input:not([type="hidden"]) {
    min-height: 58px;
    padding: 23px 16px 7px !important;
    border: 1px solid rgba(131, 49, 217, 0.14) !important;
    border-radius: 10px !important;
    background: #F3E8FF !important;
    color: #241036 !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form input:not([type="hidden"]):focus {
    border-color: #9333EA !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16);
    outline: none !important;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form .form-group>p>label {
    color: #5B5268 !important;
    opacity: 1 !important;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form :is(button[type="submit"], .submit-btn) {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 14px 24px !important;
    border: 1px solid rgba(216, 180, 254, 0.54) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6D28D9 0%, #8331D9 48%, #A855F7 100%) !important;
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.24);
    color: #FFFFFF !important;
    font-size: 16px !important;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form :is(button[type="submit"], .submit-btn):hover {
    background: linear-gradient(135deg, #5B21B6 0%, #7E22CE 50%, #9333EA 100%) !important;
    box-shadow: 0 13px 28px rgba(91, 33, 182, 0.30);
    transform: translateY(-1px);
}

.white-paper-single-parent-wrapper .white-paper-magnet-form :is(button[type="submit"], .submit-btn):focus-visible {
    outline: 3px solid rgba(216, 180, 254, 0.95);
    outline-offset: 3px;
}

.white-paper-single-parent-wrapper .white-paper-magnet-form :is(button[type="submit"], .submit-btn):disabled {
    cursor: wait;
    filter: saturate(0.65);
    opacity: 0.72;
    transform: none;
}

@media (max-width: 767px) {
    .white-paper-single-parent-wrapper .white-paper-magnet>.tkxel__container {
        border-radius: 14px;
    }

    .white-paper-single-parent-wrapper .white-paper-magnet-form {
        padding: 22px 18px !important;
    }
}

/* Selected service-detail pages share one scoped visual layer for sections
   already authored as purple. Buttons, white sections, logos, content imagery,
   and every other service retain their existing treatment. */
:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) {
    --ai-data-purple-surface:
        radial-gradient(88% 120% at 92% 4%, rgba(216, 180, 254, 0.30) 0%, transparent 48%),
        radial-gradient(68% 92% at 4% 100%, rgba(168, 85, 247, 0.24) 0%, transparent 56%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 31%, #7027B9 68%, #8331D9 100%);
}

/* The ten AI/Data service-detail destinations are separate Elementor pages.
   Override the shared purple-surface token on every exact page root so each
   page receives the homepage slider artwork without affecting other service
   families or the AI/Data overview page. */
.elementor-50451,
/* AI Pods */
.elementor-23377,
/* AI Agents (legacy service URL) */
.elementor-50606,
/* AI Agents, Workflows & Agentic OS */
.elementor-50495,
/* AI Discovery, Strategy & Roadmap */
.elementor-30561,
/* Intelligent Automation */
.elementor-14049,
/* AI PoC & MVP Development */
.elementor-5669,
/* Machine Learning Solutions */
.elementor-13969,
/* MLOps & AI Infrastructure */
.elementor-5630,
/* Data Science & Predictive Analytics */
.elementor-30658,
/* Data Engineering & Integration */
.elementor-50653

/* AI Ops, Governance & Gateway */
    {
    --ai-data-purple-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
}

/* Apply the artwork only to surfaces that each source page already identifies
   as purple. The process/step component shown in the reference is intentionally
   absent from this list and therefore keeps its original white background. */
:is(.elementor-50451,
    .elementor-23377,
    .elementor-50606,
    .elementor-50495,
    .elementor-30561,
    .elementor-14049,
    .elementor-5669,
    .elementor-13969,
    .elementor-5630,
    .elementor-30658,
    .elementor-50653) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Engineering service details are also distinct pages. Keep their mapping
   explicit so every page can be audited independently and unrelated service
   pages continue using their existing surfaces. */
.elementor-10258,
/* UX/UI Design */
.elementor-5673,
/* POC Development */
.elementor-13982,
/* Product Development */
.elementor-5611,
/* Application Development */
.elementor-18731,
/* Application Modernization */
.elementor-21875,
/* AI Software Development */
.elementor-33980

/* Quality Assurance & Continuous Delivery */
    {
    --ai-data-purple-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
}

/* Only the sections authored as purple receive the slider artwork. Process,
   case-study, technology, recognition, FAQ, and resource sections stay on
   their original white backgrounds. */
:is(.elementor-10258,
    .elementor-5673,
    .elementor-13982,
    .elementor-5611,
    .elementor-18731,
    .elementor-21875,
    .elementor-33980) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Advisory service details use the same homepage slider artwork on the exact
   surfaces authored as purple. Their white discovery/process content is not
   part of this selector and remains unchanged. */
.elementor-5651,
/* Discovery Workshops */
.elementor-14009,
/* Technical Feasibility Study */
.elementor-5679,
/* Product Strategy */
.elementor-1392,
/* UI/UX Design Workshops */
.elementor-5583,
/* Digital Transformation Consulting */
.elementor-31631

/* Innovation & Emerging Tech Advisory */
    {
    --ai-data-purple-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
}

:is(.elementor-5651,
    .elementor-14009,
    .elementor-5679,
    .elementor-1392,
    .elementor-5583,
    .elementor-31631) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Cloud & Infrastructure service details are mapped page by page as well.
   This keeps the refresh scoped to each page's existing purple surfaces and
   deliberately excludes white process, technology, FAQ, and resource areas. */
.elementor-31296,
/* Cloud Strategy & Architecture */
.elementor-5626,
/* Cloud Migration */
.elementor-31239,
/* Infrastructure Modernization */
.elementor-5624,
/* Cloud Engineering */
.elementor-24280,
/* CloudOps & DevOps */
.elementor-31435,
/* Support & Managed Cloud Services */
.elementor-26334,
/* Cloud Cost Optimization */
.elementor-31876

/* Multi-Cloud Security & Compliance */
    {
    --ai-data-purple-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
}

:is(.elementor-31296,
    .elementor-5626,
    .elementor-31239,
    .elementor-5624,
    .elementor-24280,
    .elementor-31435,
    .elementor-26334,
    .elementor-31876) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Optimization & Quality service details follow the same exact-page mapping.
   Existing purple surfaces receive the homepage artwork; white audit/process,
   technology, FAQ, and resource sections retain their source backgrounds. */
.elementor-6223,
/* Software Audit */
.elementor-32412,
/* UX Audit */
.elementor-32489,
/* Process Optimization */
.elementor-33342,
/* Application Performance Optimization */
.elementor-6385,
/* Quality Assurance & Testing */
.elementor-5689

/* Support & Maintenance */
    {
    --ai-data-purple-surface:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
}

:is(.elementor-6223,
    .elementor-32412,
    .elementor-32489,
    .elementor-33342,
    .elementor-6385,
    .elementor-5689) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) {
    background-color: #3B1F5C !important;
    background-image: var(--ai-data-purple-surface) !important;
}

/* Remove only decorative layers that live inside those purple surfaces. The
   asset URLs and files remain in place for future reuse. */
:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) :is(.banner-bg-gr-image,
    .elementor-background-video-container,
    .elementor-background-slideshow,
    .elementor-motion-effects-container > .elementor-motion-effects-layer) {
    display: none !important;
}

/* The ten AI & Data menu destinations share a large raster hero backdrop.
   Suppress both its wrapper and image directly so lazy-loading or page-specific
   markup cannot reintroduce it. Genuine content imagery remains untouched. */
:is(body.site-ai-data-catalog-detail .elementor[data-elementor-post-type="page"],
    .site-ai-data-catalog-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) :is(.banner-bg-gr-image,
    img.lcp-banner-bg,
    img.pod-image,
    .promo-image) {
    display: none !important;
}

:is(body.site-ai-data-catalog-detail .elementor[data-elementor-post-type="page"],
    .site-ai-data-catalog-scope[data-elementor-post-type="page"]) .featured-whitepaper .elementor-widget-image {
    display: none !important;
}

:is(body.site-ai-data-catalog-detail .elementor[data-elementor-post-type="page"],
    .site-ai-data-catalog-scope[data-elementor-post-type="page"]) .subpage-hero-section .white-paper-sc {
    display: none !important;
}

/* Outcome cards draw their small ticks and accent strokes as pseudo-element
   background images. Keep the cards and copy, but remove that artwork. */
:is(body.site-ai-data-catalog-detail .elementor[data-elementor-post-type="page"],
    .site-ai-data-catalog-scope[data-elementor-post-type="page"]) :is(#services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .blue-gradient) .gain-title::before,
:is(body.site-ai-data-catalog-detail .elementor[data-elementor-post-type="page"],
    .site-ai-data-catalog-scope[data-elementor-post-type="page"]) :is(#services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .blue-gradient) .gain-title::after {
    content: none !important;
    background-image: none !important;
}

:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) :is(.challenge-icon,
    .thumbnail-wrap,
    .wf-icon,
    .why-matters-single-top img,
    .why-it-matters-single > img,
    .service_platform_card img,
    .step-images-wrap) {
    display: none !important;
}

:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc) img:is([src*="solution-section-1"],
    [data-src*="solution-section-1"],
    [bv-data-src*="solution-section-1"],
    [src*="/gain"],
    [data-src*="/gain"],
    [bv-data-src*="/gain"],
    [src*="banner-gradient"],
    [data-src*="banner-gradient"],
    [bv-data-src*="banner-gradient"],
    [src*="progress.webp"],
    [data-src*="progress.webp"],
    [bv-data-src*="progress.webp"]) {
    display: none !important;
}

:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc)::before,
:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc)::after {
    background-image: none !important;
}

@media (max-width: 767px) {

    :is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
        .site-purple-section-refresh-scope[data-elementor-post-type="page"]) :is(.subpage-hero-section,
        .comon-gradient,
        .blue-gradient,
        .assesment,
        #cta-form,
        .featured-whitepaper,
        #our-solution,
        #services-outcomes,
        .cloud-gain-section,
        .cloud-gain-wrapper,
        .white-paper-sc) {
        background-image:
            radial-gradient(110% 78% at 100% 0%, rgba(216, 180, 254, 0.28) 0%, transparent 52%),
            linear-gradient(152deg, #241036 0%, #4C1D6F 52%, #8331D9 100%) !important;
    }
}

/* AI & Data Innovation landing page: replace its decorative blue/purple image
   layers with gradients. Content imagery, logos, case studies, and controls
   remain untouched. */
.elementor-33178 {
    --ai-data-innovation-gradient:
        radial-gradient(82% 118% at 88% 5%, rgba(216, 180, 254, 0.38) 0%, transparent 52%),
        radial-gradient(64% 90% at 2% 100%, rgba(168, 85, 247, 0.24) 0%, transparent 58%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 32%, #7027B9 69%, #8331D9 100%);
}

.elementor-33178 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes) {
    background-color: #3B1F5C !important;
    background-image: var(--ai-data-innovation-gradient) !important;
}

.elementor-33178 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes) :is(.banner-bg-gr-image,
    .elementor-element-c981f7d,
    .elementor-element-bfb9e38,
    .elementor-background-video-container,
    .elementor-background-slideshow,
    .elementor-motion-effects-container > .elementor-motion-effects-layer) {
    display: none !important;
}

.elementor-33178 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes)::before,
.elementor-33178 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes)::after {
    background-image: none !important;
}

.elementor-33178 :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes) :is(h1,
    h2,
    h3,
    h4,
    p,
    li,
    .title,
    .sub-title,
    .gain-title,
    .gain-desc,
    .elementor-heading-title):not(.elementor-button, .elementor-button *) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* The process artwork was four purple SVG diamonds. Preserve its space and
   interaction with a color-only panel centered on the active step number. */
.elementor-33178 .our-process-two-left {
    background-color: #3B1F5C !important;
    background-image:
        radial-gradient(circle at 72% 24%, rgba(216, 180, 254, 0.48) 0%, transparent 34%),
        linear-gradient(145deg, #35164F 0%, #7027B9 58%, #A855F7 100%) !important;
    min-height: clamp(250px, 29vw, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.elementor-33178 .our-process-two-left .step-images-wrap {
    display: none !important;
}

.elementor-33178 .our-process-two-left .process-tow-step-index {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    position: relative;
    z-index: 1;
}

/* Benefits use image-backed ticks in addition to the large gain artwork. Use
   a small CSS mark so no blue or purple asset remains in the background. */
.elementor-33178 #services-outcomes .gain-title::before,
.elementor-33178 #services-outcomes .gain-title::after {
    background-image: none !important;
}

/* Keep the surrounding consultation section purple, but give the actual form
   column an opaque white panel with readable controls. */
.elementor-33178 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9,
    .elementor-element-93a03e9 > .e-con-inner,
    .elementor-element-25355c1,
    .elementor-element-25355c1 > .elementor-widget-container,
    .elementor-element-25355c1 .elementor-shortcode,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
}

.elementor-33178 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9) {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate;
}

.elementor-33178 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9)::before,
.elementor-33178 #cta-form :is(.elementor-element-bcb5451,
    .elementor-element-93a03e9)::after {
    content: none !important;
    display: none !important;
}

.elementor-33178 #cta-form #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    background-image: none !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.elementor-33178 #cta-form :is(#contact-custom-form label,
    #contact-custom-form .checkbox-field label,
    .elementor-element-25355c1 .custom-label,
    .elementor-element-25355c1 .custom-label label,
    .elementor-element-25355c1 .custom-label p) {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
    opacity: 1 !important;
}

.elementor-33178 #cta-form .elementor-element-25355c1 .custom-label a {
    color: #8331D9 !important;
    -webkit-text-fill-color: #8331D9 !important;
}

/* The assessment CTA sits on a purple gradient, so its source dark headings
   need a high-contrast treatment. Keep the white button label dark. */
.elementor-33178 .assesment :is(h1,
    h2,
    h3,
    h4,
    p,
    .elementor-heading-title,
    .assesment_list_title,
    .assesment-tagline):not(.elementor-button, .elementor-button *) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Digital Product Engineering and Cloud Infrastructure Management landing
   pages: use the shared purple color language only in their existing colored
   sections. Their white process components are intentionally outside every
   selector here, preserving copy, artwork, numbering, and interactions. */
:is(.elementor-32020, .elementor-7849) {
    --digital-product-purple-gradient:
        radial-gradient(82% 112% at 92% 5%, rgba(216, 180, 254, 0.32) 0%, transparent 48%),
        radial-gradient(72% 92% at 4% 100%, rgba(168, 85, 247, 0.24) 0%, transparent 57%),
        linear-gradient(132deg, #241036 0%, #3B1F5C 32%, #7027B9 69%, #8331D9 100%);
}

:is(.elementor-32020, .elementor-7849) :is(.subpage-hero-section,
    .comon-gradient,
    #our-solution,
    .blog-cta-section) {
    background-color: #3B1F5C !important;
    background-image: var(--digital-product-purple-gradient) !important;
}

/* Keep the source assets available, but do not render the decorative blue or
   pink artwork over the new gradients. */
:is(.elementor-32020, .elementor-7849) :is(.subpage-hero-section .banner-bg-gr-image,
    #our-solution > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"]) {
    display: none !important;
}

:is(.elementor-32020, .elementor-7849) :is(.subpage-hero-section,
    .comon-gradient,
    #our-solution,
    .blog-cta-section) :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    strong,
    b,
    a,
    .elementor-heading-title):not(.elementor-button, .elementor-button *) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:is(.elementor-32020, .elementor-7849) :is(.subpage-hero-section,
    .comon-gradient,
    #our-solution,
    .blog-cta-section)::before,
:is(.elementor-32020, .elementor-7849) :is(.subpage-hero-section,
    .comon-gradient,
    #our-solution,
    .blog-cta-section)::after {
    background-image: none !important;
}

/* The contact form remains a clear white surface rather than inheriting a
   colored section background. Buttons retain their existing styling. */
:is(.elementor-32020, .elementor-7849) #cta-form :is(.elementor-element-baeb164,
    .elementor-element-3fdacf0,
    .elementor-element-93a03e9,
    .contact-page-form,
    .homeform,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

/* Cloud Infrastructure contact area: the review artwork and testimonial copy
   are authored in white. Keep the form itself white, but restore the left
   review column to a purple surface so none of that content appears blank. */
.elementor-7849 #cta-form .elementor-element-0075163 {
    background-color: #3B1F5C !important;
    background-image: var(--digital-product-purple-gradient) !important;
}

.elementor-7849 #cta-form .elementor-element-0075163 .elementor-element-3fdacf0 {
    background-color: transparent !important;
    background-image: none !important;
}

.elementor-7849 #cta-form .elementor-element-0075163 :is(.review-cta-title,
    .hc-quote,
    .hc-name,
    .hc-designation) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 767px) {

    :is(.elementor-32020, .elementor-7849) :is(.subpage-hero-section,
        .comon-gradient,
        #our-solution,
        .blog-cta-section) {
        background-image:
            radial-gradient(110% 78% at 100% 0%, rgba(216, 180, 254, 0.28) 0%, transparent 52%),
            linear-gradient(152deg, #241036 0%, #4C1D6F 52%, #8331D9 100%) !important;
    }
}

@media (max-width: 767px) {

    .elementor-33178 :is(.subpage-hero-section,
        #our-solution,
        #services-outcomes) {
        background-image:
            radial-gradient(100% 72% at 100% 0%, rgba(216, 180, 254, 0.30) 0%, transparent 54%),
            linear-gradient(152deg, #241036 0%, #4C1D6F 54%, #8331D9 100%) !important;
    }
}

/* Technical Feasibility Study uses a separate purple assessment CTA whose
   source headings are explicitly dark. Correct only that copy; the white CTA
   button and its existing dark label remain unchanged. */
:is(body.site-purple-section-refresh-detail .elementor[data-elementor-post-type="page"],
    .site-purple-section-refresh-scope[data-elementor-post-type="page"]) .assesment :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .elementor-heading-title) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Resource archives use the exact Home ribbon instead of the legacy orbit. */
.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-news,
    .post-type-archive-blog) .featured-section.featured-slider {
    position: relative;
    background-color: #2B004D !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-news,
    .post-type-archive-blog) .featured-section.featured-slider::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.site-purple-resource-page:is(.post-type-archive-white-paper,
    .post-type-archive-podcast,
    .post-type-archive-news,
    .post-type-archive-blog) .featured-section-container {
    position: relative;
    z-index: 1;
}

/* Services overview: extend the homepage violet system through the complete
   page while preserving the existing service taxonomy and content layout. */
.elementor-7297 {
    --services-violet-deep: #2B004D;
    --services-violet-primary: #7027B9;
    --services-violet-highlight: #9F43F0;
    --services-violet-hover: #5B149B;
    --services-violet-soft: #EEE6FB;
    --services-ink: #1A0F2E;
    --e-global-color-primary: var(--services-violet-primary);
    accent-color: var(--services-violet-primary);
}

.elementor.elementor-7297>.elementor-element.elementor-element-7be0d05.subpage-hero-section {
    background-color: var(--services-violet-deep) !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Replace the overview hero's legacy banner overlay so the shared artwork is
   visible in the same way as on the individual service pages. */
.elementor.elementor-7297>.elementor-element.elementor-element-7be0d05.subpage-hero-section::before,
.elementor.elementor-7297>.elementor-element.elementor-element-7be0d05.subpage-hero-section>.elementor-background-video-container,
.elementor.elementor-7297>.elementor-element.elementor-element-7be0d05.subpage-hero-section>.elementor-background-slideshow,
.elementor.elementor-7297>.elementor-element.elementor-element-7be0d05.subpage-hero-section>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    content: none !important;
    display: none !important;
}

.elementor-7297>[data-id="7be0d05"] :is(h1,
    h2,
    h3,
    h4,
    h5,
    p,
    .elementor-heading-title) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-7297>[data-id="7be0d05"] .elementor-button {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--services-ink) !important;
    -webkit-text-fill-color: var(--services-ink) !important;
}

.elementor-7297>[data-id="7be0d05"] .elementor-button :is(span, svg, svg path) {
    color: var(--services-ink) !important;
    fill: var(--services-ink) !important;
    stroke: var(--services-ink) !important;
    -webkit-text-fill-color: var(--services-ink) !important;
}

.elementor-7297>[data-id="7be0d05"] .elementor-button:hover,
.elementor-7297>[data-id="7be0d05"] .elementor-button:focus-visible {
    background: var(--services-violet-hover) !important;
    border-color: var(--services-violet-hover) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-7297>[data-id="7be0d05"] .elementor-button:hover :is(span, svg, svg path),
.elementor-7297>[data-id="7be0d05"] .elementor-button:focus-visible :is(span, svg, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-7297 #section-navigation-sticky {
    background: #FFFFFF !important;
    border-color: rgba(112, 39, 185, 0.16) !important;
}

.elementor-7297 #section-navigation-sticky.sticky {
    box-shadow: 0 10px 28px rgba(43, 0, 77, 0.10) !important;
}

.elementor-7297 .section-navigation-single a {
    border-color: rgba(112, 39, 185, 0.28) !important;
    color: var(--services-ink) !important;
    -webkit-text-fill-color: var(--services-ink) !important;
}

.elementor-7297 .section-navigation-single a:hover,
.elementor-7297 .section-navigation-single a:focus-visible,
.elementor-7297 .section-navigation-single.active a {
    background-color: var(--services-violet-primary) !important;
    border-color: var(--services-violet-primary) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-7297 .ai-data-section:nth-of-type(even) {
    background-color: #FBF8FF !important;
    background-image: linear-gradient(100deg, rgba(238, 230, 251, 0.55), rgba(255, 255, 255, 0.92)) !important;
}

.elementor-7297 .ai-data-section .ai-data-left h2 {
    color: var(--services-ink) !important;
    -webkit-text-fill-color: var(--services-ink) !important;
}

.elementor-7297 .ai-data-section .ai-data-left>img {
    filter: drop-shadow(0 10px 22px rgba(112, 39, 185, 0.20)) !important;
}

.elementor-7297 .ai-data-section .ai-link {
    color: var(--services-violet-primary) !important;
    -webkit-text-fill-color: var(--services-violet-primary) !important;
}

.elementor-7297 .ai-data-section .ai-link:hover,
.elementor-7297 .ai-data-section .ai-link:focus-visible {
    color: var(--services-violet-hover) !important;
    -webkit-text-fill-color: var(--services-violet-hover) !important;
}

.elementor-7297 .ai-data-right li {
    border-color: rgba(112, 39, 185, 0.22) !important;
}

.elementor-7297 .ai-data-right li::before {
    background-color: var(--services-violet-highlight) !important;
}

.elementor-7297 .ai-data-right .card-item {
    color: var(--services-ink) !important;
    -webkit-text-fill-color: var(--services-ink) !important;
    transition: background-color 180ms ease, color 180ms ease, padding 180ms ease;
}

.elementor-7297 .ai-data-right .card-item span {
    color: #5F526F !important;
    -webkit-text-fill-color: #5F526F !important;
}

.elementor-7297 .ai-data-right .card-item:hover,
.elementor-7297 .ai-data-right .card-item:focus-visible {
    background-color: var(--services-violet-soft) !important;
    color: var(--services-violet-hover) !important;
    -webkit-text-fill-color: var(--services-violet-hover) !important;
}

.elementor-7297 #cta-form {
    background-color: var(--services-violet-deep) !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Let one continuous CTA artwork show behind its content rather than restarting
   the image independently on each nested Elementor container. */
.elementor-7297 #cta-form :is([data-id="baeb164"],
    [data-id="3fdacf0"]) {
    background-color: transparent !important;
    background-image: none !important;
}

.elementor-7297 #cta-form :is(.review-cta-title, .hc-quote, .hc-name, .hc-designation) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-7297 #cta-form :is([data-id="bcb5451"],
    [data-id="93a03e9"],
    [data-id="93a03e9"] > .e-con-inner,
    [data-id="25355c1"],
    [data-id="25355c1"] > .elementor-widget-container,
    [data-id="25355c1"] .elementor-shortcode,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

.elementor-7297 #cta-form [data-id="bcb5451"] {
    box-shadow: 0 28px 70px rgba(33, 0, 57, 0.26) !important;
}

.elementor-7297 #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea) {
    background-color: #F7F2FC !important;
    border-color: rgba(112, 39, 185, 0.20) !important;
    color: var(--services-ink) !important;
}

.elementor-7297 #contact-custom-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    select,
    textarea):focus {
    border-color: var(--services-violet-primary) !important;
    box-shadow: 0 0 0 3px rgba(112, 39, 185, 0.14) !important;
    outline: none !important;
}

.elementor-7297 #contact-custom-form input[type="submit"] {
    background: linear-gradient(135deg, var(--services-violet-deep), var(--services-violet-primary) 64%, var(--services-violet-highlight)) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-7297 #contact-custom-form input[type="submit"]:hover,
.elementor-7297 #contact-custom-form input[type="submit"]:focus-visible {
    background: var(--services-violet-hover) !important;
    border-color: var(--services-violet-hover) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Header contrast for the Services hero and its white sticky state. */
:root:has(.elementor-7297) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) #menu-main-menu>li>a,
:root:has(.elementor-7297) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) .header-search-toggle,
:root:has(.elementor-7297) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
:root:has(.elementor-7297) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.elementor-7297) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path) {
    fill: #FFFFFF !important;
}

:root:has(.elementor-7297) #site-header:not(.sticky) .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) {
    background-color: #FFFFFF !important;
    box-shadow: 0 7px 24px rgba(43, 0, 77, 0.10) !important;
}

:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) #menu-main-menu>li>a,
:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-search-toggle,
:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
    color: var(--services-ink, #1A0F2E) !important;
    -webkit-text-fill-color: var(--services-ink, #1A0F2E) !important;
}

:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) #menu-main-menu>li.menu-item-has-children>a svg path,
:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-menu-cta svg path {
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
}

:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .header-logo svg path {
    fill: var(--services-violet-primary, #7027B9) !important;
}

:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: none !important;
}

:root:has(.elementor-7297) #site-header .header-wrapper-alt:not(.menu-open) .cta-contact-us a,
:root:has(.elementor-7297) #site-header.sticky .header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    background-color: var(--services-violet-primary, #7027B9) !important;
    border-color: var(--services-violet-primary, #7027B9) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.elementor-7297) #site-header .header-wrapper-alt:not(.menu-open) .cta-contact-us a:hover,
:root:has(.elementor-7297) #site-header .header-wrapper-alt:not(.menu-open) .cta-contact-us a:focus-visible {
    background-color: var(--services-violet-hover, #5B149B) !important;
    border-color: var(--services-violet-hover, #5B149B) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 1024px) {

    :root:has(.elementor-7297) #site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup,
    :root:has(.elementor-7297) #site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.elementor-7297) #site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
        filter: none !important;
    }
}

/* Navigation service details: carry the exact homepage violet language through
   every destination exposed by the Services menu families, engagement models,
   and solution implementation pages. The renderer
   adds this scope only to those routes, so legacy service pages stay intact. */
:root:has(.site-nav-service-scope),
body.site-nav-service-detail,
.site-nav-service-scope {
    --service-home-deep: #2B004D;
    --service-home-primary: #7027B9;
    --service-home-highlight: #9F43F0;
    --service-home-hover: #5B149B;
    --service-home-soft: #EEE6FB;
    --service-home-ink: #1A0F2E;
    --service-home-muted: #5F526F;
    --service-home-surface:
        radial-gradient(86% 112% at 88% 4%, rgba(159, 67, 240, 0.50) 0%, transparent 48%),
        radial-gradient(64% 88% at 3% 100%, rgba(112, 39, 185, 0.30) 0%, transparent 56%),
        linear-gradient(132deg, #210039 0%, #2B004D 38%, #7027B9 75%, #9F43F0 100%);
    --deployed-plum: var(--service-home-deep);
    --deployed-violet: var(--service-home-primary);
    --deployed-purple: var(--service-home-primary);
    --deployed-orchid: var(--service-home-highlight);
    --deployed-mist: var(--service-home-soft);
    --primary: var(--service-home-primary);
    --color-gray: var(--service-home-primary);
    --e-global-color-primary: var(--service-home-primary);
    accent-color: var(--service-home-primary);
}

/* Optimization & Quality uses the exact approved homepage-slider violet
   gradient: deep aubergine at the left, electric violet at the right. */
:is(body.site-optimization-quality-catalog-detail,
    .site-optimization-quality-catalog-scope) {
    --service-home-surface:
        radial-gradient(75% 110% at 82% 8%, rgba(159, 67, 240, 0.72) 0%, rgba(112, 39, 185, 0.22) 48%, transparent 72%),
        linear-gradient(128deg, #210039 0%, #2B004D 36%, #7027B9 72%, #9F43F0 100%);
    --ai-data-purple-surface: var(--service-home-surface);
}

/* All authored blue/dark surfaces retain their section geometry but share the
   homepage gradient. The service hero remains a full-bleed colored surface so
   the transparent fixed header has the same relationship it has on Home. */
:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .gradient-primary,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc,
    .blog-cta-section,
    .process-box,
    a.interactive-cards-single,
    .welcome_number-wrapper.active) {
    background-color: var(--service-home-deep) !important;
    background-image: var(--service-home-surface) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) .service-main-banner {
    background-color: #FFFFFF !important;
    background-image:
        radial-gradient(ellipse at 88% 10%, rgba(238, 230, 251, 0.90) 0%, transparent 54%),
        linear-gradient(#FFFFFF, #FFFFFF) !important;
}

/* Engagement Models use a dedicated Elementor hero instead of the shared
   subpage hero. Give that component the same full-bleed violet surface and
   contrast contract as the service pages above. */
:where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] {
    background-color: var(--service-home-deep) !important;
    background-image: var(--service-home-surface) !important;
}

:where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] :is(h1,
    h2,
    p,
    .elementor-heading-title,
    .elementor-widget-text-editor) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] .elementor-button {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] .elementor-button :is(span, svg, svg path) {
    color: var(--service-home-ink) !important;
    fill: var(--service-home-ink) !important;
    stroke: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] .elementor-button:is(:hover, :focus-visible) {
    background: var(--service-home-hover) !important;
    border-color: var(--service-home-hover) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] .elementor-button:is(:hover, :focus-visible) :is(span, svg, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 767px) {

    :root:has(.site-engagement-model-scope),
    :root:has(.site-engagement-model-scope) body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) :is(.service-main-banner,
        .facing-box,
        .facing-box > .elementor-widget-container,
        .facing-box .elementor-template,
        .elementor-35500,
        .elementor-35500 [data-id="89d782a"]) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] {
        --padding-top: 108px !important;
        --padding-right: 20px !important;
        --padding-bottom: 52px !important;
        --padding-left: 20px !important;
        padding-block-start: 108px !important;
        padding-block-end: 52px !important;
        padding-inline: 20px !important;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"]>.elementor-element {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        --container-widget-width: 100% !important;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] h1.elementor-heading-title {
        max-width: 100% !important;
        font-size: clamp(29px, 8vw, 34px) !important;
        line-height: 1.14 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] h1.elementor-heading-title br {
        display: none;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] :is(.elementor-widget-heading,
        .elementor-widget-heading > .elementor-widget-container,
        .elementor-widget-text-editor,
        .elementor-widget-text-editor > .elementor-widget-container,
        .elementor-widget-text-editor p) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] .elementor-widget-text-editor {
        font-size: 16px !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] [data-id="5170af2"] {
        width: auto !important;
        max-width: 100% !important;
        --container-widget-width: auto !important;
        align-self: flex-start !important;
    }

    :where(body.site-engagement-model-detail, .site-engagement-model-scope) .elementor-35500 [data-id="89d782a"] [data-id="5170af2"] .elementor-button-wrapper {
        text-align: left !important;
    }
}

/* Solution Implementation pages share a wide desktop hero template. Collapse
   every nested Elementor wrapper to the viewport on phones so long product
   names and descriptions wrap instead of being clipped off-screen. */
@media (max-width: 767px) {

    :root:has(.site-solution-implementation-scope),
    :root:has(.site-solution-implementation-scope) body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    :where(body.site-solution-implementation-detail,
        .site-solution-implementation-scope) :is(.service-main-banner,
        .facing-box,
        .facing-box > .elementor-widget-container,
        .facing-box .elementor-template,
        .elementor-28493,
        .subpage-hero-section,
        .service-banner-main-wrapper,
        .service-inner-wrapper,
        .service-inner-wrapper > .e-con-inner,
        .service-inner-wrapper > .e-con-inner > .elementor-element) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    :where(body.site-solution-implementation-detail,
        .site-solution-implementation-scope) .subpage-hero-section {
        overflow: hidden !important;
    }

    :where(body.site-solution-implementation-detail,
        .site-solution-implementation-scope) .subpage-hero-section :is(.elementor-widget-heading,
        .elementor-widget-heading > .elementor-widget-container,
        h1.elementor-heading-title,
        p.elementor-heading-title) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    :where(body.site-solution-implementation-detail,
        .site-solution-implementation-scope) .subpage-hero-section .s-desc br {
        display: none;
    }
}

/* FinOps and Defensive Security use the same legacy wide service template.
   Keep their hero and opening cards inside the phone viewport while preserving
   the authored desktop layout and horizontal section navigation. */
@media (max-width: 767px) {

    :root:has(.site-finops-scope),
    :root:has(.site-finops-scope) body,
    :root:has(.site-defensive-security-scope),
    :root:has(.site-defensive-security-scope) body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
    }

    :where(body.site-finops-detail,
        .site-finops-scope,
        body.site-defensive-security-detail,
        .site-defensive-security-scope) :is(.service-main-banner,
        .facing-box,
        .facing-box > .elementor-widget-container,
        .facing-box .elementor-template,
        .elementor-28493,
        .subpage-hero-section,
        .service-banner-main-wrapper,
        .service-inner-wrapper,
        .service-inner-wrapper > .e-con-inner,
        .service-inner-wrapper > .e-con-inner > .elementor-element,
        #Challenges,
        #Challenges .elementor-28637,
        #Challenges .challenges,
        #Challenges .challenges > .e-con-inner,
        #Challenges .Challenges-cards,
        #challenges,
        #challenges .elementor-31886,
        #challenges .facing-box,
        #challenges .facing-box > .e-con-inner,
        #challenges .models-wrapper,
        #challenges .models-items) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    :where(body.site-finops-detail,
        .site-finops-scope,
        body.site-defensive-security-detail,
        .site-defensive-security-scope) .subpage-hero-section {
        overflow: hidden !important;
    }

    :where(body.site-finops-detail,
        .site-finops-scope,
        body.site-defensive-security-detail,
        .site-defensive-security-scope) .subpage-hero-section :is(.elementor-widget-heading,
        .elementor-widget-heading > .elementor-widget-container,
        h1.elementor-heading-title,
        p.elementor-heading-title) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    :where(body.site-finops-detail,
        .site-finops-scope,
        body.site-defensive-security-detail,
        .site-defensive-security-scope) :is(.subpage-hero-section .s-desc br, #challenges .h2-link br) {
        display: none;
    }
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .gradient-primary,
    .assesment,
    #cta-form,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .white-paper-sc,
    .blog-cta-section,
    .process-box,
    a.interactive-cards-single,
    .welcome_number-wrapper.active) :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    strong,
    b,
    .title,
    .sub-title,
    .s-tagline,
    .offer-tagline,
    .offer-title,
    .offer-description,
    .gain-title,
    .gain-desc,
    .elementor-heading-title,
    .elementor-widget-text-editor):not(.elementor-button, .elementor-button *) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Failure notice for the contact form. The imported markup only shipped a
   success node, so this element is created by the form script on first error
   and reused afterwards. */
.contact-submit-error {
    display: none;
    margin: 16px 0 0;
    padding: 14px 18px;
    border: 1px solid #f0b4b4;
    border-radius: 8px;
    background: #fdf2f2;
    color: #a11b1b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}
#cta-form .contact-submit-error,
.deployed-blog-contact-form-panel .contact-submit-error {
    background: #fff5f5;
}

/* The imported "Our clients" logo strip used to close out the service hero and
   carried its bottom spacing. It is removed as source-company content, so the
   section supplies that spacing itself -- otherwise the hero CTA ends flush on
   the section edge, against the anchor nav immediately below. */
.subpage-hero-section.service-hero--without-client-logos {
    padding-bottom: clamp(48px, 5vw, 96px);
}

/* Purple is the action color on light sections. Dark sections intentionally
   use the homepage's white CTA, then switch to violet on interaction.
   These are wrapper widgets, not the button itself, so they must stay
   transparent. :is() rather than :where() is deliberate: the ai-data gradient
   rule above reaches 0,2,1 through the button[type="submit"] branch of its
   :is(), so a zero-specificity :where() scope here loses and paints a purple
   band behind the hero CTA. */
:is(body.site-nav-service-detail, .site-nav-service-scope) .service-hero-btn,
:is(body.site-nav-service-detail, .site-nav-service-scope) .cta-contact-us {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.elementor-button,
    .engagement-model-btn,
    .industry-btn,
    .service-btn,
    .cta-btn,
    .contact-custom-form button[type="submit"],
    .contact-custom-form input[type="submit"]) {
    background-color: var(--service-home-primary) !important;
    background-image: linear-gradient(135deg,
            var(--service-home-deep) 0%,
            var(--service-home-primary) 64%,
            var(--service-home-highlight) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.elementor-button,
    .engagement-model-btn,
    .industry-btn,
    .service-btn,
    .cta-btn,
    .contact-custom-form button[type="submit"],
    .contact-custom-form input[type="submit"]) :is(span, strong, b, svg, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:is(body, .elementor, .site-nav-service-scope, [class*="page-id-"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .blog-cta-section) :is(.elementor-button, .engagement-model-btn, .industry-btn, .cta-btn) {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:is(body, .elementor, .site-nav-service-scope, [class*="page-id-"]) :is(.subpage-hero-section,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    .featured-whitepaper,
    #our-solution,
    #services-outcomes,
    .cloud-gain-section,
    .cloud-gain-wrapper,
    .blog-cta-section) :is(.elementor-button, .engagement-model-btn, .industry-btn, .cta-btn) :is(span, strong, b, svg, svg path) {
    color: var(--service-home-ink) !important;
    fill: var(--service-home-ink) !important;
    stroke: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

/* Service Detail Subpages & Global Button Hover: Force text, spans, icons to WHITE on hover */
:is(body, html, #page, .elementor, .site-nav-service-scope, [class*="page-id-"]) :is(
    a.elementor-button,
    .elementor-button,
    .elementor-button-link,
    .service-hero-btn a,
    .service-hero-btn .elementor-button,
    .challenges-hyperlink a,
    .challenges-hyperlink .elementor-button,
    #ai-workflow-btn a,
    #ai-workflow-btn .elementor-button,
    .engagement-model-btn,
    .industry-btn,
    .service-btn,
    .cta-btn,
    .mega-ai-btn,
    .btn,
    .btn-submit,
    .submit-btn-btn,
    .contact-custom-form button[type="submit"],
    .contact-custom-form input[type="submit"],
    .contact-form button[type="submit"],
    .contact-form input[type="submit"],
    .wp-block-button__link,
    .wp-element-button,
    button[type="submit"],
    input[type="submit"]
):is(:hover, :focus, :focus-visible, :active),
:is(body, html, #page, .elementor, .site-nav-service-scope, [class*="page-id-"]) :is(.elementor-widget-button, .service-hero-btn, .challenges-hyperlink, #ai-workflow-btn, .cta-contact-us):is(:hover, :focus-within) :is(a, button, input[type="submit"], .elementor-button) {
    background-color: #5B149B !important;
    background-image: linear-gradient(135deg, #2A0845 0%, #5B149B 50%, #7B2FD1 100%) !important;
    border-color: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(91, 20, 155, 0.35) !important;
}

:is(body, html, #page, .elementor, .site-nav-service-scope, [class*="page-id-"]) :is(
    a.elementor-button,
    .elementor-button,
    .elementor-button-link,
    .service-hero-btn a,
    .service-hero-btn .elementor-button,
    .challenges-hyperlink a,
    .challenges-hyperlink .elementor-button,
    #ai-workflow-btn a,
    #ai-workflow-btn .elementor-button,
    .engagement-model-btn,
    .industry-btn,
    .service-btn,
    .cta-btn,
    .mega-ai-btn,
    .btn,
    .btn-submit,
    .submit-btn-btn,
    .contact-custom-form button[type="submit"],
    .contact-custom-form input[type="submit"],
    .contact-form button[type="submit"],
    .contact-form input[type="submit"],
    .wp-block-button__link,
    .wp-element-button,
    button[type="submit"],
    input[type="submit"]
):is(:hover, :focus, :focus-visible, :active) :is(
    span,
    .elementor-button-text,
    .elementor-button-content-wrapper,
    .elementor-button-icon,
    p,
    strong,
    b,
    svg,
    svg path,
    i,
    *
),
:is(body, html, #page, .elementor, .site-nav-service-scope, [class*="page-id-"]) :is(.elementor-widget-button, .service-hero-btn, .challenges-hyperlink, #ai-workflow-btn, .cta-contact-us):is(:hover, :focus-within) :is(a, button, input[type="submit"], .elementor-button) :is(
    span,
    .elementor-button-text,
    .elementor-button-content-wrapper,
    .elementor-button-icon,
    p,
    strong,
    b,
    svg,
    svg path,
    i,
    *
) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    fill-opacity: 1 !important;
}

/* Detail-page navigation, cards, tabs, FAQs, and progress controls use the
   softer half of the same palette on white so each page stays easy to scan. */
:where(body.site-nav-service-detail, .site-nav-service-scope) #section-navigation-sticky {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(112, 39, 185, 0.18) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) #section-navigation-sticky.sticky {
    box-shadow: 0 10px 28px rgba(43, 0, 77, 0.11) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) .section-navigation-single a {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) .section-navigation-single a:is(:hover, :focus-visible),
:where(body.site-nav-service-detail, .site-nav-service-scope) .section-navigation-single a.active,
:where(body.site-nav-service-detail, .site-nav-service-scope) .section-navigation-single.active a {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--service-home-primary) !important;
    -webkit-text-fill-color: var(--service-home-primary) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.Challenges-cards,
    .service_platform_card,
    .gain-card,
    .why-it-matters-single,
    .plan-card-single,
    .use-case-single,
    .industry-item,
    .faq-item,
    .single-faq,
    .offer-card) {
    border-color: rgba(112, 39, 185, 0.24) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.Challenges-cards,
    .service_platform_card,
    .gain-card,
    .why-it-matters-single,
    .plan-card-single,
    .use-case-single,
    .industry-item,
    .faq-item,
    .single-faq):is(:hover, :focus-within) {
    background-color: var(--service-home-soft) !important;
    box-shadow: 0 16px 34px rgba(43, 0, 77, 0.10) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) .offer-card:is(:hover, :focus-within) {
    background: var(--service-home-surface) !important;
    border-color: var(--service-home-highlight) !important;
    box-shadow: 0 18px 38px rgba(43, 0, 77, 0.18) !important;
}

/* Outcome cards on the dark slider artwork must retain enough contrast when
   hovered. This applies across every explicitly refreshed service detail. */
:is(body.site-purple-section-refresh-detail,
    .site-purple-section-refresh-scope) .cloud-gain-wrapper .gain-card:is(:hover, :focus-within) {
    background:
        linear-gradient(145deg, rgba(43, 0, 77, 0.94) 0%, rgba(91, 20, 155, 0.90) 100%) !important;
    border-color: rgba(216, 180, 254, 0.72) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.32) !important;
}

:is(body.site-purple-section-refresh-detail,
    .site-purple-section-refresh-scope) .cloud-gain-wrapper .gain-card:is(:hover, :focus-within) :is(.gain-title,
    .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) .offer-card:is(:hover, :focus-within) :is(.offer-tagline,
    .offer-title,
    .offer-description,
    .offer-description span) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.offer-tab-btn.active,
    .service-technologies-tab .tabs-header .tab.active,
    .service-technologies-tab .tabs-header .tab:hover,
    .industry-item.active .industry-number,
    .industry-item.active .industry-header h3,
    .pd-column-forward .pd-column-title,
    a:not(.elementor-button):not(.cta-btn):hover) {
    color: var(--service-home-primary) !important;
    -webkit-text-fill-color: var(--service-home-primary) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(.process-progress-bar-fill,
    .swiper-pagination-bullet-active,
    .tabs-header .tab.active::after,
    .offer-tab-btn.active::after) {
    background-color: var(--service-home-primary) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) :is(a,
    button,
    input,
    select,
    textarea):focus-visible {
    outline: 3px solid rgba(159, 67, 240, 0.66) !important;
    outline-offset: 3px;
}

/* Consultation controls are always a clean light surface, even though their
   parent section is purple. This reset is deliberately after the dark-surface
   copy rules to prevent white labels or inputs on the white form card. */
:where(body.site-nav-service-detail, .site-nav-service-scope) #cta-form :is([data-id="bcb5451"],
    [data-id="93a03e9"],
    [data-id="93a03e9"] > .e-con-inner,
    [data-id="25355c1"],
    [data-id="25355c1"] > .elementor-widget-container,
    [data-id="25355c1"] .elementor-shortcode,
    .contact-page-form,
    .homeform,
    #contact-custom-form) {
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(p,
    label,
    span,
    option,
    .custom-label,
    .custom-label *) {
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
    opacity: 1 !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea) {
    background: #F7F2FC !important;
    border-color: rgba(112, 39, 185, 0.22) !important;
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
    caret-color: var(--service-home-primary) !important;
}

:where(body.site-nav-service-detail, .site-nav-service-scope) #cta-form #contact-custom-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea):focus {
    border-color: var(--service-home-primary) !important;
    box-shadow: 0 0 0 3px rgba(112, 39, 185, 0.14) !important;
    outline: none !important;
}

/* Service headers mirror Home: transparent with white navigation over the
   purple hero, then an opaque white header with dark navigation after scroll.
   Both possible sticky-class locations are covered because mirrored scripts
   differ between page generations. */
:root:has(.site-nav-service-scope) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
    background-color: transparent !important;
    box-shadow: none !important;
}

:root:has(.site-nav-service-scope) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.site-nav-service-scope) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

:root:has(.site-nav-service-scope) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.site-nav-service-scope) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:root:has(.site-nav-service-scope) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a:is(:hover, :focus-visible) {
    background: var(--service-home-hover) !important;
    border-color: var(--service-home-hover) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 7px 24px rgba(43, 0, 77, 0.11) !important;
    backdrop-filter: blur(16px);
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: var(--service-home-ink) !important;
    -webkit-text-fill-color: var(--service-home-ink) !important;
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(#menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: var(--service-home-ink) !important;
    stroke: var(--service-home-ink) !important;
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .header-logo svg path {
    fill: var(--service-home-primary) !important;
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .deployed-site-logo {
    filter: none !important;
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .cta-contact-us a {
    background: var(--service-home-primary) !important;
    border-color: var(--service-home-primary) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.site-nav-service-scope) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .cta-contact-us a:is(:hover, :focus-visible) {
    background: var(--service-home-hover) !important;
    border-color: var(--service-home-hover) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* The services mega-menu keeps its white reading surface and uses the exact
   same active/hover colors as the homepage service cards. */
:root:has(.site-nav-service-scope) .menu-vertical-tabs .tabs-menu li.active {
    background:
        radial-gradient(circle at 88% 0%, rgba(159, 67, 240, 0.58), transparent 48%),
        linear-gradient(135deg, var(--service-home-deep), var(--service-home-primary)) !important;
    color: #FFFFFF !important;
}

:root:has(.site-nav-service-scope) .tabs-content-card .card-item:is(:hover, :focus-within) {
    background-color: var(--service-home-soft) !important;
}

:root:has(.site-nav-service-scope) .tabs-content-card .card-item:is(:hover, :focus-within) :is(h4,
    .header-service-title) {
    color: var(--service-home-primary) !important;
    -webkit-text-fill-color: var(--service-home-primary) !important;
}

/* GenAI Consulting CTAs inherit a few later Elementor hover tokens. Keep the
   label and arrow contrast white whenever their violet hover state is active. */
:is(#deployed-genai-consulting-page,
    #deployed-ai-data-innovation-page,
    #deployed-optimization-quality-page,
    #deployed-digital-product-engineering-page) :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    a[class*="btn"],
    a[class*="button"]):is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:is(#deployed-genai-consulting-page,
    #deployed-ai-data-innovation-page,
    #deployed-optimization-quality-page,
    #deployed-digital-product-engineering-page) :is(.elementor-button,
    .cta-btn,
    .report-submit-btn,
    a[class*="btn"],
    a[class*="button"]):is(:hover, :focus-visible) :is(span,
    strong,
    b,
    .elementor-button-text,
    .elementor-button-icon,
    svg,
    svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

@media (max-width: 1024px) {
    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt:not(.menu-open) {
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(43, 0, 77, 0.10) !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt:not(.menu-open) :is(.deployed-logo-lockup,
        .deployed-logo-name,
        .header-search-toggle) {
        color: var(--service-home-ink) !important;
        -webkit-text-fill-color: var(--service-home-ink) !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup--header,
    :root:has(.site-nav-service-scope) #site-header#site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt:not(.menu-open) .header-logo svg path {
        fill: var(--service-home-primary) !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
        filter: none !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt>.container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt .main-menu {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 60px !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .header-logo {
        flex: 0 0 auto !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .mobile-menu {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 60px !important;
        margin-left: auto !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .hamburger-menu {
        position: relative !important;
        display: block !important;
        width: 56px !important;
        height: 60px !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .hamburger-icon {
        top: 0 !important;
        right: 0 !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .hamburger-icon span,
    :root:has(.site-nav-service-scope) #site-header#site-header .hamburger-icon span::before,
    :root:has(.site-nav-service-scope) #site-header#site-header .hamburger-icon span::after {
        background-color: var(--service-home-ink) !important;
    }

    :root:has(.site-nav-service-scope) #site-header#site-header .mobile-menu.open .hamburger-icon span,
    :root:has(.site-nav-service-scope) #site-header#site-header .header-wrapper-alt.menu-open .hamburger-icon span {
        background-color: transparent !important;
    }
}

@media (max-width: 767px) {

    :where(body.site-nav-service-detail, .site-nav-service-scope) :is(.subpage-hero-section,
        .comon-gradient,
        .blue-gradient,
        .gradient-primary,
        .assesment,
        #cta-form,
        .featured-whitepaper,
        #our-solution,
        #services-outcomes,
        .cloud-gain-section,
        .cloud-gain-wrapper,
        .white-paper-sc,
        .blog-cta-section,
        .process-box) {
        background-image:
            radial-gradient(108% 78% at 100% 0%, rgba(159, 67, 240, 0.40) 0%, transparent 54%),
            linear-gradient(152deg, #210039 0%, #2B004D 42%, #7027B9 78%, #9F43F0 100%) !important;
    }
}

/* On small touch layouts Swiper's active slide stands in for hover. Desktop
   and tablet slides remain white until the user actually interacts with them. */
@media (max-width: 550px) {
    :where(body.site-nav-service-detail, .site-nav-service-scope) .offer-card.swiper-slide-active {
        background: var(--service-home-surface) !important;
        border-color: var(--service-home-highlight) !important;
        box-shadow: 0 18px 38px rgba(43, 0, 77, 0.18) !important;
    }

    :where(body.site-nav-service-detail, .site-nav-service-scope) .offer-card.swiper-slide-active :is(.offer-tagline,
        .offer-title,
        .offer-description,
        .offer-description span) {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
}

/* Customers / case-studies archive. This mirrored page is emitted as a
   document fragment, so the archive's own structural classes are the reliable
   scope instead of its WordPress body class. */
:root:has(.case-study-main-wrapper) {
    --customers-violet-deep: #2B004D;
    --customers-violet-primary: #7027B9;
    --customers-violet-highlight: #9F43F0;
    --customers-violet-soft: #EEE6FB;
    --customers-violet-hover: #5B149B;
    --customers-ink: #1A0F2E;
    overflow-x: clip;
}

.featured-section.featured-slider.news-featured-slider.case-study-main-wrapper {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Reuse the home page's dark violet slider artwork so the two top-level
       pages share one unmistakable purple-gradient treatment. */
    background:
        #260044 url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") center / cover no-repeat !important;
}

.featured-section.featured-slider.case-study-main-wrapper::before {
    content: none !important;
}

.featured-section.featured-slider.case-study-main-wrapper::after {
    content: none !important;
}

.case-study-main-wrapper .featured-section-container {
    position: relative;
    z-index: 1;
}

.case-study-main-wrapper .featured-section-top :is(h1, h2) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.case-study-main-wrapper .featured-section-top h1 {
    opacity: 0.76;
}

.case-study-main-wrapper .company-page-logo-slider {
    position: relative;
    width: 100%;
    height: 76px !important;
    margin-top: 46px !important;
    overflow: hidden !important;
}

.case-study-main-wrapper .company-page-logo-slider::before {
    content: none !important;
    display: none !important;
}

.case-study-main-wrapper .company-page-logo-slider .swiper-wrapper {
    height: 76px !important;
    min-height: 76px;
    align-items: center;
}

.case-study-main-wrapper .company-page-logo-slider .swiper-slide {
    height: 76px !important;
    min-height: 76px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px;
    box-sizing: border-box;
    overflow: visible !important;
}

.case-study-main-wrapper .company-page-logo-slider img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 172px !important;
    max-height: 48px !important;
    margin: 0 auto;
    object-fit: contain !important;
    object-position: center !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.92;
}

/* Match the homepage header contract: white controls over the violet hero,
   then an opaque white reading surface with dark controls after scrolling. */
:root:has(.case-study-main-wrapper) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
    background-color: transparent !important;
    box-shadow: none !important;
}

:root:has(.case-study-main-wrapper) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.case-study-main-wrapper) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
    #menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

:root:has(.case-study-main-wrapper) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
    filter: brightness(0) invert(1) !important;
}

:root:has(.case-study-main-wrapper) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.case-study-main-wrapper) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a:is(:hover, :focus-visible) {
    background: #5B149B !important;
    border-color: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.case-study-main-wrapper) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 7px 24px rgba(43, 0, 77, 0.11) !important;
    backdrop-filter: blur(16px);
}

:root:has(.case-study-main-wrapper) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

:root:has(.case-study-main-wrapper) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) :is(#menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: #1A0F2E !important;
    stroke: #1A0F2E !important;
}

:root:has(.case-study-main-wrapper) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .header-logo svg path {
    fill: #7027B9 !important;
}

:root:has(.case-study-main-wrapper) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .deployed-site-logo {
    filter: none !important;
}

:root:has(.case-study-main-wrapper) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) .cta-contact-us a {
    background: #7027B9 !important;
    border-color: #7027B9 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.white-paper-bottom.news_room_bottom {
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 67, 240, 0.10), transparent 27%),
        #FFFFFF !important;
}

.news_room_bottom .white-paper-bottom-wrapper .filter-wrap {
    padding: 18px;
    border: 1px solid rgba(112, 39, 185, 0.18);
    background: #F8F4FD;
}

.news_room_bottom .filter-box .filter-toggle {
    border: 1px solid rgba(112, 39, 185, 0.26) !important;
    background: #FFFFFF !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.news_room_bottom .filter-box .filter-toggle::before {
    filter: brightness(0) saturate(100%) invert(17%) sepia(74%) saturate(4113%) hue-rotate(268deg) brightness(77%) contrast(91%);
}

.news_room_bottom .filter-box .filter-toggle:is(:hover, :focus-visible) {
    border-color: #7027B9 !important;
    background: #EEE6FB !important;
    color: #5B149B !important;
    -webkit-text-fill-color: #5B149B !important;
    box-shadow: 0 0 0 3px rgba(112, 39, 185, 0.12);
}

.news_room_bottom .filter-box:has(.filter-input-check:checked) .filter-toggle,
.news_room_bottom .filter-box .filter-toggle.reset--filters {
    border-color: #7027B9 !important;
    background: #7027B9 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.news_room_bottom .filter-box .filter-toggle.reset--filters span {
    display: none !important;
}

.news_room_bottom .filter-box:has(.filter-input-check:checked) .filter-toggle::before,
.news_room_bottom .filter-box .filter-toggle.reset--filters::before {
    filter: brightness(0) invert(1) !important;
}

.news_room_bottom .filter-box:has(.filter-input-check:checked) .reset-filter--btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.news_room_bottom .filter-box:has(.filter-input-check:checked) .reset-filter--btn img {
    filter: brightness(0) invert(1);
}

.news_room_bottom .filter-dropdown {
    border-color: rgba(112, 39, 185, 0.25) !important;
    background: #FFFFFF !important;
    box-shadow: 0 18px 40px rgba(43, 0, 77, 0.16) !important;
}

.news_room_bottom .filter-dropdown label {
    color: #1A0F2E;
    transition: background-color 160ms ease, color 160ms ease;
}

.news_room_bottom .filter-dropdown label:is(:hover, :focus-within) {
    background-color: #EEE6FB;
    color: #5B149B;
}

.news_room_bottom .filter-dropdown input[type="checkbox"] {
    accent-color: #7027B9;
}

.news_room_bottom .filter-dropdown label:has(input:checked) {
    background-color: #EEE6FB;
    color: #5B149B;
    font-weight: 700;
}

.news_room_bottom #clear-filters {
    color: #7027B9 !important;
    font-weight: 700;
}

.news_room_bottom #clear-filters:is(:hover, :focus-visible) {
    color: #5B149B !important;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item {
    border: 1px solid rgba(112, 39, 185, 0.18);
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(43, 0, 77, 0.08);
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) {
    border-color: #9F43F0;
    box-shadow: 0 22px 48px rgba(43, 0, 77, 0.20);
    transform: translateY(-4px);
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item .outerlayer-dark {
    z-index: 1;
    background:
        linear-gradient(0deg, rgba(43, 0, 77, 0.88), rgba(112, 39, 185, 0.56)),
        linear-gradient(135deg, rgba(43, 0, 77, 0.60), rgba(159, 67, 240, 0.34)) !important;
    transition: transform 300ms ease;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item .customer-sd-wrap::before {
    background-color: #FFFFFF !important;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item .sd-name p {
    color: #7027B9 !important;
    -webkit-text-fill-color: #7027B9 !important;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item .whitepaper-category {
    border-color: rgba(112, 39, 185, 0.28) !important;
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item .whp-title h3 {
    color: #1A0F2E !important;
    -webkit-text-fill-color: #1A0F2E !important;
    transition: color 220ms ease;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) :is(.whp-title h3, .sd-name p) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.news_room_bottom .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) .whitepaper-category {
    border-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #2B004D !important;
    -webkit-text-fill-color: #2B004D !important;
}

.news_room_bottom .pagination .page-numbers {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(112, 39, 185, 0.24);
    color: #1A0F2E !important;
    background: #FFFFFF;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.news_room_bottom .pagination .page-numbers.current,
.news_room_bottom .pagination .page-numbers.next,
.news_room_bottom .pagination .page-numbers.prev {
    border-color: #7027B9 !important;
    background: #7027B9 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.news_room_bottom .pagination .page-numbers:is(:hover, :focus-visible) {
    border-color: #5B149B !important;
    background: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:root:has(.case-study-main-wrapper) :is(button, a, input):focus-visible {
    outline: 3px solid rgba(159, 67, 240, 0.72) !important;
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    :root:has(.case-study-main-wrapper) #site-header#site-header .header-wrapper-alt:not(.menu-open) {
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(43, 0, 77, 0.10) !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .header-wrapper-alt:not(.menu-open) :is(.deployed-logo-lockup,
        .deployed-logo-name,
        .header-search-toggle) {
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup--header,
    :root:has(.case-study-main-wrapper) #site-header#site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
        filter: none !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .header-wrapper-alt>.container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .header-wrapper-alt .main-menu {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 60px !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .header-logo {
        flex: 0 0 auto !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .mobile-menu {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 60px !important;
        margin-left: auto !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .hamburger-menu {
        position: relative !important;
        display: block !important;
        width: 56px !important;
        height: 60px !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .hamburger-icon {
        top: 0 !important;
        right: 0 !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .hamburger-icon span,
    :root:has(.case-study-main-wrapper) #site-header#site-header .hamburger-icon span::before,
    :root:has(.case-study-main-wrapper) #site-header#site-header .hamburger-icon span::after {
        background-color: #1A0F2E !important;
    }

    :root:has(.case-study-main-wrapper) #site-header#site-header .mobile-menu.open .hamburger-icon span,
    :root:has(.case-study-main-wrapper) #site-header#site-header .header-wrapper-alt.menu-open .hamburger-icon span {
        background-color: transparent !important;
    }

    .news_room_bottom .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) {
        transform: none;
    }
}

@media (max-width: 767px) {

    .case-study-main-wrapper .featured-section-top,
    .case-study-main-wrapper .featured-section-top h2 {
        width: 100%;
        max-width: 100%;
    }

    .case-study-main-wrapper .featured-section-top h2 {
        font-size: 30px !important;
        line-height: 38px !important;
        letter-spacing: -0.035em;
        overflow-wrap: normal;
    }

    .featured-section.featured-slider.case-study-main-wrapper::before {
        width: 82vw;
        height: 56vw;
        top: 5%;
        right: -36%;
    }

    .featured-section.featured-slider.case-study-main-wrapper::after {
        width: 52vw;
        height: 32vw;
        top: 23%;
        right: -2%;
    }

    .case-study-main-wrapper .company-page-logo-slider,
    .case-study-main-wrapper .company-page-logo-slider .swiper-wrapper,
    .case-study-main-wrapper .company-page-logo-slider .swiper-slide {
        height: 66px !important;
        min-height: 66px;
    }

    .case-study-main-wrapper .company-page-logo-slider {
        margin-top: 30px !important;
    }

    .case-study-main-wrapper .company-page-logo-slider .swiper-slide {
        padding: 9px 14px;
    }

    .case-study-main-wrapper .company-page-logo-slider img {
        max-width: 132px !important;
        max-height: 40px !important;
    }

    .news_room_bottom .white-paper-bottom-wrapper .filter-wrap {
        padding: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .news_room_bottom .white-paper-bottom-wrapper .filter-box,
    .news_room_bottom .case-study-listing-wrapper,
    .news_room_bottom .case-study-listing-wrapper .whitepaper-item {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* How We Work: a page-specific extension of the homepage purple system.
   Content photography, client marks, certification marks, and delivery-model
   icons remain content assets; only the surrounding UI is recoloured. */
:root:has(.elementor-41275) {
    --hww-deep: #2B004D;
    --hww-primary: #7027B9;
    --hww-highlight: #9F43F0;
    --hww-soft: #EEE6FB;
    --hww-hover: #5B149B;
    --hww-ink: #1A0F2E;
}

:root:has(.elementor-41275) body {
    color: var(--hww-ink);
    background: #FFFFFF;
}

/* The hero is intentionally light, so the initial and sticky header both use
   dark navigation controls and a purple call to action. */
:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 1px 0 rgba(112, 39, 185, 0.10) !important;
    backdrop-filter: blur(16px);
}

:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) :is(#menu-main-menu > li > a,
    .header-search-toggle,
    .deployed-logo-lockup,
    .deployed-logo-name) {
    color: var(--hww-ink) !important;
    -webkit-text-fill-color: var(--hww-ink) !important;
}

:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) :is(#menu-main-menu > li.menu-item-has-children > a svg path,
    .header-menu-cta svg path,
    .header-search-toggle svg path) {
    fill: var(--hww-ink) !important;
    stroke: var(--hww-ink) !important;
}

:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .header-logo svg path {
    fill: var(--hww-primary) !important;
}

:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
    filter: none !important;
}

:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--hww-primary) !important;
    border-color: var(--hww-primary) !important;
}

:root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .cta-contact-us a:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: var(--hww-hover) !important;
    border-color: var(--hww-hover) !important;
}

:root:has(.elementor-41275) :is(#site-header.sticky .header-wrapper-alt:not(.menu-open),
    #site-header .header-wrapper-alt.sticky:not(.menu-open)) {
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 7px 24px rgba(43, 0, 77, 0.11) !important;
}

/* Opening statement. */
.elementor-41275 .elementor-element-c90c224 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #FBF9FD !important;
    background-image:
        radial-gradient(circle at 8% 14%, rgba(159, 67, 240, 0.12), transparent 27%),
        radial-gradient(circle at 92% 78%, rgba(112, 39, 185, 0.10), transparent 26%),
        url("/wp-content/themes/tkxel-theme/assets/images/company-hero-purple-gradient.svg") !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, min(1180px, 88vw) auto !important;
}

.elementor-41275 .elementor-element-c90c224::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(360px, 26vw);
    height: min(360px, 26vw);
    right: -12%;
    bottom: -36%;
    border: 1px solid rgba(112, 39, 185, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(112, 39, 185, 0.025), 0 0 0 96px rgba(112, 39, 185, 0.018);
    pointer-events: none;
}

.elementor-41275 .elementor-element-ea5894b .elementor-heading-title {
    color: var(--hww-primary) !important;
    letter-spacing: 0.12em;
}

.elementor-41275 .elementor-element-204c99f .elementor-heading-title {
    color: var(--hww-ink) !important;
    letter-spacing: -0.045em;
}

/* Do not make the primary message depend on Elementor's delayed animation
   runtime; it must remain visible when scripts are deferred or reduced. */
.elementor-41275 .elementor-element-204c99f,
.elementor-41275 .elementor-element-204c99f.elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.elementor-41275 .elementor-element-53d3552,
.elementor-41275 .elementor-element-53d3552 p {
    color: #554B63 !important;
}

/* Partner story and moving client marks. */
.elementor-41275 .elementor-element-4f74523 {
    position: relative;
    background-color: #2B004D !important;
    background-image: var(--company-purple-ribbon, linear-gradient(135deg, #1A0F2E 0%, #2B004D 50%, #4B176E 100%)) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
}

.elementor-41275 .company-card {
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 22px 55px rgba(24, 0, 43, 0.26);
    transition: transform 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}

.elementor-41275 .company-card-1 {
    background: rgba(255, 255, 255, 0.13) !important;
    backdrop-filter: blur(24px);
}

.elementor-41275 .company-card-2 {
    background: linear-gradient(138deg, var(--hww-deep) 0%, var(--hww-primary) 68%, var(--hww-highlight) 100%) !important;
}

.elementor-41275 .company-card:is(:hover, :focus-within) {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.54);
}

.elementor-41275 .company-card :is(h3, p, span),
.elementor-41275 .company-page-story-section-bottom>p {
    color: #FFFFFF !important;
}

.elementor-41275 .company-card .company-card-bottom p,
.elementor-41275 .company-card-top span {
    color: rgba(255, 255, 255, 0.78) !important;
}

.elementor-41275 .company-page-logo-slider {
    min-height: 88px;
    overflow: hidden !important;
}

.elementor-41275 .company-page-logo-slider .swiper-wrapper,
.elementor-41275 .company-page-logo-slider .swiper-slide {
    min-height: 88px;
    align-items: center;
}

.elementor-41275 .company-page-logo-slider .swiper-slide {
    display: flex;
    justify-content: center;
    padding: 14px 22px;
    box-sizing: border-box;
}

.elementor-41275 .company-page-logo-slider img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 165px !important;
    max-height: 48px !important;
    margin: 0 auto;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.92;
}

/* Practical AI section. */
.elementor-41275 .elementor-element-6b5850a {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(68% 112% at 96% 2%, rgba(159, 67, 240, 0.58) 0%, transparent 58%),
        linear-gradient(128deg, var(--hww-deep) 0%, #4B176E 48%, var(--hww-primary) 100%) !important;
}

.elementor-41275 .elementor-element-6b5850a::before {
    opacity: 0.34 !important;
    background-image: url("/wp-content/themes/tkxel-theme/assets/images/company-banner-purple-gradient.svg") !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: min(840px, 58vw) auto !important;
}

.elementor-41275 .elementor-element-6b5850a :is(.elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor span) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-41275 .elementor-element-6b5850a .focus-word-gr {
    color: #F0D8FF !important;
    -webkit-text-fill-color: #F0D8FF !important;
}

.elementor-41275 .elementor-element-bd7a5f3 .elementor-button {
    color: var(--hww-ink) !important;
    fill: var(--hww-ink) !important;
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
}

.elementor-41275 .elementor-element-bd7a5f3 .elementor-button:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: var(--hww-hover) !important;
    border-color: var(--hww-hover) !important;
}

.elementor-41275 .elementor-element-bd7a5f3 .elementor-button:is(:hover, :focus-visible) svg path {
    fill: #FFFFFF !important;
}

/* Onboarding process. */
.elementor-41275 .elementor-element-2eb1160 {
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 67, 240, 0.10), transparent 29%),
        #FFFFFF !important;
}

.elementor-41275 .elementor-element-2eb1160 .elementor-heading-title {
    color: var(--hww-ink) !important;
}

/* Onboarding process section layout & typography */
.elementor-41275 .elementor-element-3ef173b {
    position: relative !important;
}

.elementor-41275 .elementor-element-3ef173b .e-con-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.elementor-41275 .elementor-element-41def9c {
    width: 100% !important;
    max-width: calc(100% - 150px) !important;
    margin: 0 0 54px 0 !important;
    padding: 0 !important;
}

.elementor-41275 .elementor-element-41def9c > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-41275 .elementor-element-41def9c .elementor-heading-title {
    font-size: clamp(28px, 2.9vw, 54px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    color: var(--hww-ink, #1A0F2E) !important;
    margin: 0 !important;
}

.elementor-41275 .howWorksSwiper {
    position: relative !important;
    overflow: visible !important;
}

.elementor-41275 .howWorksSwiper .swiper-slide {
    height: auto;
    border-top: 3px solid rgba(112, 39, 185, 0.25);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.elementor-41275 .howWorksSwiper .swiper-slide:is(:hover, :focus-within) {
    border-top-color: var(--hww-primary);
    background: #FAF7FD;
}

.elementor-41275 .howWorksSwiper .steps-card {
    height: 100%;
    padding: 42px 24px 28px;
    box-sizing: border-box;
}

.elementor-41275 .howWorksSwiper .steps-card>span {
    color: var(--hww-primary) !important;
}

.elementor-41275 .howWorksSwiper .steps-card h4 {
    color: var(--hww-ink) !important;
}

.elementor-41275 .howWorksSwiper .steps-card p {
    color: #62586F !important;
}

.elementor-41275 .howWorksSwiper :is(.swiper-btn-next-ss, .swiper-btn-prev-ss) {
    position: absolute !important;
    top: -102px !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: 1.5px solid rgba(112, 39, 185, 0.28) !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(26, 15, 46, 0.06) !important;
    transition: all 0.22s ease !important;
}

.elementor-41275 .howWorksSwiper .swiper-btn-next-ss {
    right: 0 !important;
    left: auto !important;
}

.elementor-41275 .howWorksSwiper .swiper-btn-prev-ss {
    right: 60px !important;
    left: auto !important;
}

.elementor-41275 .howWorksSwiper :is(.swiper-btn-next-ss, .swiper-btn-prev-ss):is(:hover, :focus-visible) {
    background: var(--hww-primary) !important;
    border-color: var(--hww-primary) !important;
    box-shadow: 0 4px 14px rgba(112, 39, 185, 0.35) !important;
    transform: translateY(-1px) !important;
}

.elementor-41275 .howWorksSwiper :is(.swiper-btn-next-ss, .swiper-btn-prev-ss) svg path {
    fill: var(--hww-primary) !important;
    transition: fill 0.22s ease !important;
}

.elementor-41275 .howWorksSwiper :is(.swiper-btn-next-ss, .swiper-btn-prev-ss):is(:hover, :focus-visible) svg path {
    fill: #FFFFFF !important;
}

.elementor-41275 .howWorksSwiper .swiper-pagination-bullet-active {
    background: var(--hww-primary) !important;
}

/* Downloadable delivery process. */
.elementor-41275 .elementor-element-b4d22c4 {
    background: #F8F4FC !important;
}

.elementor-41275 .elementor-element-7b39044 {
    overflow: hidden;
    background:
        radial-gradient(70% 100% at 0% 100%, rgba(112, 39, 185, 0.36) 0%, transparent 62%),
        linear-gradient(132deg, #170226 0%, var(--hww-deep) 58%, #4B176E 100%) !important;
    box-shadow: 0 24px 60px rgba(43, 0, 77, 0.16);
}

.elementor-41275 .elementor-element-7b39044 :is(.elementor-heading-title, p, span) {
    color: #FFFFFF !important;
}

.elementor-41275 .elementor-element-7b39044 .linear-gradient {
    color: #D9B2FF !important;
    -webkit-text-fill-color: #D9B2FF !important;
}

.elementor-41275 .tkxel-report-form .reports-form-wrap input {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

.elementor-41275 .tkxel-report-form .reports-form-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.72) !important;
}

.elementor-41275 .tkxel-report-form .reports-form-wrap input:focus {
    border-color: #D9B2FF !important;
    outline: 2px solid rgba(217, 178, 255, 0.28) !important;
}

.elementor-41275 .tkxel-report-form .reports-form-wrap button {
    color: #FFFFFF !important;
    background: var(--hww-primary) !important;
    border-color: var(--hww-primary) !important;
}

.elementor-41275 .tkxel-report-form .reports-form-wrap button:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--hww-hover) !important;
    border-color: var(--hww-hover) !important;
}

.elementor-41275 .elementor-element-234f3a2 {
    isolation: isolate;
    background: linear-gradient(138deg, #4B176E 0%, var(--hww-primary) 57%, var(--hww-highlight) 100%) !important;
}

.elementor-41275 .elementor-element-234f3a2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(112, 39, 185, 0.28);
    mix-blend-mode: color;
}

.elementor-41275 .elementor-element-234f3a2 img {
    filter: hue-rotate(45deg) saturate(0.94) !important;
}

/* Outcomes. */
.elementor-41275 #services-outcomes {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(72% 102% at 100% 0%, rgba(159, 67, 240, 0.54) 0%, transparent 58%),
        linear-gradient(128deg, var(--hww-deep) 0%, #4B176E 52%, var(--hww-primary) 100%) !important;
}

.elementor-41275 #services-outcomes .elementor-heading-title,
.elementor-41275 #services-outcomes :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
}

.elementor-41275 #services-outcomes .gain-card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.28);
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.elementor-41275 #services-outcomes .gain-card:is(:hover, :focus-within) {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.52);
}

.elementor-41275 #services-outcomes .gain-title::before {
    width: 9px;
    height: 9px;
    top: 0.72em;
    border-radius: 50%;
    background: var(--hww-highlight) !important;
}

.elementor-41275 #services-outcomes .gain-title::after {
    background: linear-gradient(90deg, #D9B2FF, var(--hww-highlight)) !important;
}

/* Engagement models. */
.elementor-41275 .why-matter-sec,
.elementor-41275 .elementor-element-e3f668c {
    background: #FFFFFF !important;
}

.elementor-41275 .elementor-element-e3f668c .elementor-heading-title {
    color: var(--hww-ink) !important;
}

.elementor-41275 .elementor-element-1a92852 .elementor-button {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: var(--hww-primary) !important;
    border-color: var(--hww-primary) !important;
}

.elementor-41275 .elementor-element-1a92852 .elementor-button:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: var(--hww-hover) !important;
    border-color: var(--hww-hover) !important;
}

.elementor-41275 .why-it-matters-single {
    background: #FFFFFF;
    border-color: rgba(112, 39, 185, 0.18) !important;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.elementor-41275 .why-it-matters-single:is(:hover, :focus-within) {
    transform: translateY(-5px);
    background: #F8F3FC;
    box-shadow: 0 18px 40px rgba(43, 0, 77, 0.10);
}

.elementor-41275 .why-it-matters-single .why-matters-single-top h3 {
    color: var(--hww-ink) !important;
    transition: color 0.25s ease;
}

.elementor-41275 .why-it-matters-single:is(:hover, :focus-within) .why-matters-single-top h3 {
    color: var(--hww-primary) !important;
}

.elementor-41275 .why-it-matters-single .why-matters-single-bottom p {
    color: #62586F !important;
}

.elementor-41275 .why-it-matters-single img {
    filter: none !important;
}

/* What sets us apart. */
.elementor-41275 #our-solution {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(64% 112% at 100% 100%, rgba(159, 67, 240, 0.42) 0%, transparent 58%),
        linear-gradient(132deg, #170226 0%, var(--hww-deep) 56%, #4B176E 100%) !important;
}

.elementor-41275 #our-solution :is(.elementor-heading-title, .solution-card .title, .solution-card .sub-title) {
    color: #FFFFFF !important;
}

.elementor-41275 #our-solution .solution-card {
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.elementor-41275 #our-solution .solution-card:is(:hover, :focus-within) {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(112, 39, 185, 0.36) !important;
}

.elementor-41275 #our-solution .elementor-button {
    color: var(--hww-ink) !important;
    fill: var(--hww-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.elementor-41275 #our-solution .elementor-button:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: var(--hww-hover) !important;
    border-color: var(--hww-hover) !important;
}

.elementor-41275 #our-solution .elementor-button:is(:hover, :focus-visible) svg path {
    fill: #FFFFFF !important;
}

/* Recognition grid. */
.elementor-41275 .elementor-element-4c5b7f6 {
    background:
        radial-gradient(circle at 0% 0%, rgba(159, 67, 240, 0.08), transparent 27%),
        #FFFFFF !important;
}

.elementor-41275 .elementor-element-4c5b7f6 .elementor-heading-title,
.elementor-41275 .services_certifications_title {
    color: var(--hww-ink) !important;
}

.elementor-41275 .services_certifications_card {
    border-color: rgba(112, 39, 185, 0.18) !important;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.elementor-41275 .services_certifications_card:is(:hover, :focus-within) {
    transform: translateY(-4px);
    background: var(--hww-soft);
}

/* Final next-step cards. */
.elementor-41275 .elementor-element-d3080b6 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(72% 112% at 100% 0%, rgba(159, 67, 240, 0.64) 0%, transparent 58%),
        linear-gradient(128deg, var(--hww-deep) 0%, #4B176E 50%, var(--hww-primary) 100%) !important;
}

.elementor-41275 .elementor-element-d3080b6::before {
    opacity: 0.24 !important;
    background-image: url("/wp-content/themes/tkxel-theme/assets/images/company-next-move-purple.svg") !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
}

.elementor-41275 .elementor-element-d3080b6 .elementor-heading-title,
.elementor-41275 .plan-card-single :is(.plan-title, .plan-description, .plan-link) {
    color: #FFFFFF !important;
}

.elementor-41275 .plan-card-single {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.elementor-41275 .plan-card-single:is(:hover, :focus-visible) {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.52);
}

.elementor-41275 .plan-card-single .plan-title::after {
    background: linear-gradient(90deg, #D9B2FF, var(--hww-highlight)) !important;
}

.elementor-41275 .plan-card-single .plan-link img {
    filter: brightness(0) invert(1) !important;
}

/* Consent UI follows the same page palette. */
:root:has(.elementor-41275) .tkxel-cookie-container .main-cookies-section {
    color: #FFFFFF !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(159, 67, 240, 0.44), transparent 42%),
        linear-gradient(126deg, var(--hww-deep) 0%, #4B176E 56%, var(--hww-primary) 100%) !important;
    border: 1px solid rgba(238, 230, 251, 0.24);
    box-shadow: 0 28px 80px rgba(43, 0, 77, 0.38) !important;
}

:root:has(.elementor-41275) .tkxel-cookie-container .main-cookies-section :is(.elementor-heading-title, p, a) {
    color: #FFFFFF !important;
}

:root:has(.elementor-41275) .tkxel-cookie-container .accept-cookies .elementor-button {
    color: var(--hww-ink) !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

:root:has(.elementor-41275) .tkxel-cookie-container .accept-cookies .elementor-button:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: var(--hww-hover) !important;
    border-color: var(--hww-hover) !important;
}

:root:has(.elementor-41275) .tkxel-cookie-container .manage-cookies .elementor-button {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
}

:root:has(.elementor-41275) .tkxel-cookie-container .manage-cookies .elementor-button:is(:hover, :focus-visible) {
    color: var(--hww-ink) !important;
    background: var(--hww-soft) !important;
    border-color: var(--hww-soft) !important;
}

@media (max-width: 1024px) {

    .elementor-41275 .company-page-logo-slider,
    .elementor-41275 .company-page-logo-slider .swiper-wrapper,
    .elementor-41275 .company-page-logo-slider .swiper-slide {
        min-height: 74px;
    }

    .elementor-41275 .company-page-logo-slider img {
        max-width: 145px !important;
        max-height: 42px !important;
    }

    .elementor-41275 .elementor-element-6b5850a::before {
        background-size: 86vw auto !important;
    }

    .elementor-41275 .howWorksSwiper .steps-card {
        padding: 34px 20px 24px;
    }
}

@media (max-width: 767px) {

    :root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .hamburger-icon span,
    :root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .hamburger-icon span::before,
    :root:has(.elementor-41275) #site-header .header-wrapper-alt:not(.menu-open) .hamburger-icon span::after {
        background: var(--hww-ink) !important;
    }

    :root:has(.elementor-41275) #site-header .header-wrapper-alt.menu-open .hamburger-icon span {
        background: transparent !important;
    }

    .elementor-41275 .elementor-element-c90c224 {
        background-size: cover, cover, 900px auto !important;
        background-position: center, center, 58% center !important;
    }

    .elementor-41275 .elementor-element-4f74523 {
        background-color: #2B004D !important;
        background-image: var(--company-purple-ribbon, linear-gradient(135deg, #1A0F2E 0%, #2B004D 50%, #4B176E 100%)) !important;
    }

    .elementor-41275 .company-card {
        min-height: 380px;
        height: auto;
    }

    .elementor-41275 .company-page-logo-slider,
    .elementor-41275 .company-page-logo-slider .swiper-wrapper,
    .elementor-41275 .company-page-logo-slider .swiper-slide {
        min-height: 64px;
    }

    .elementor-41275 .company-page-logo-slider .swiper-slide {
        padding: 9px 14px;
    }

    .elementor-41275 .company-page-logo-slider img {
        max-width: 125px !important;
        max-height: 36px !important;
    }

    .elementor-41275 .elementor-element-b4d22c4 {
        background: #FFFFFF !important;
    }

    .elementor-41275 .elementor-element-7b39044 {
        box-shadow: none;
    }

    .elementor-41275 .elementor-element-2eb1160 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-41275 .elementor-element-41def9c {
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }

    .elementor-41275 .elementor-element-41def9c .elementor-heading-title {
        font-size: clamp(24px, 5.8vw, 32px) !important;
        line-height: 1.25 !important;
    }

    .elementor-41275 .howWorksSwiper {
        padding-top: 56px !important;
    }

    .elementor-41275 .howWorksSwiper :is(.swiper-btn-next-ss, .swiper-btn-prev-ss) {
        top: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 6px !important;
    }

    .elementor-41275 .howWorksSwiper .swiper-btn-next-ss {
        right: 0 !important;
    }

    .elementor-41275 .howWorksSwiper .swiper-btn-prev-ss {
        right: 52px !important;
    }

    .elementor-41275 .why-it-matters-single,
    .elementor-41275 .services_certifications_card {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .elementor-41275 :is(.company-card,
        .howWorksSwiper .swiper-slide,
        .gain-card,
        .why-it-matters-single,
        .solution-card,
        .services_certifications_card,
        .plan-card-single) {
        transition: none !important;
    }
}

/* Homepage Canvs slide — reference-inspired white editorial composition.
   The other two hero slides and Swiper behavior remain untouched. */
:root:has(.elementor-12) .hero-slider .swiper-slide.hero-reference-dots {
    position: relative;
    isolation: isolate;
    color: #3b1f5c;
    background: #FFFFFF url("/wp-content/themes/tkxel-theme/assets/images/home-hero-canvs-white-gradient.svg?gradient_version=20260804b") center / cover no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Soften the deep purple on the Canvs slide with a translucent white wash */
:root:has(.elementor-12) .hero-slider .swiper-slide.hero-reference-dots::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
    z-index: 1;
    pointer-events: none;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content .container {
    width: 100%;
    max-width: 1776px;
    margin: 0 auto;
    padding: 0;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-heading {
    display: block;
    width: min(100%, 1380px);
    margin: 0 0 24px;
    color: #3b1f5c;
    -webkit-text-fill-color: #3b1f5c;
    font-size: clamp(58px, 4.4vw, 84px);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-heading>span {
    display: block;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .canvs-heading-accent {
    color: #7027B9;
    background: linear-gradient(100deg, #7E22E8 0%, #5D28B5 86%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content>.container>p {
    width: min(100%, 900px);
    margin: 0 0 30px;
    color: #5E5B70;
    -webkit-text-fill-color: #5E5B70;
    font-size: clamp(18px, 1.28vw, 24px);
    font-weight: 400;
    line-height: 1.55;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-cta {
    display: inline-flex;
    min-height: 62px;
    padding: 17px 28px;
    align-items: center;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    background: linear-gradient(108deg, #7E22E8 0%, #6725C8 100%);
    border: 1px solid rgba(112, 39, 185, 0.24);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(84, 27, 153, 0.16);
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-cta svg path {
    fill: #FFFFFF !important;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-wrap {
    right: clamp(52px, 4.8vw, 96px);
    left: clamp(52px, 4.8vw, 96px);
    width: auto;
    padding: 0;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-wrap h6 {
    margin: 0 0 22px;
    color: #706B7E;
    -webkit-text-fill-color: #706B7E;
    opacity: 1;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 1260px);
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list li {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 6px 34px 8px;
    border: 0;
    border-left: 1px solid rgba(26, 15, 46, 0.18);
    background: transparent;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list li:first-child {
    padding-left: 0;
    border-left: 0;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list .header-wrap {
    min-height: 42px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-story-item img:not(.arrow-icon) {
    width: auto;
    max-width: 145px !important;
    max-height: 34px;
}

:root:has(.elementor-12) .hero-slider .hero-reference-dots .case-story-item p {
    color: #3b1f5c;
    -webkit-text-fill-color: #3b1f5c;
    font-size: clamp(15px, 0.94vw, 18px) !important;
    line-height: 1.45;
}

:root:has(.hero-reference-dots.swiper-slide-active) #site-header#site-header:not(.sticky) .header-wrapper-alt.header-wrapper-alt:not(.menu-open) .cta-contact-us a {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: linear-gradient(108deg, #7E22E8 0%, #6725C8 100%) !important;
    border-color: transparent !important;
    border-radius: 8px !important;
}

:root:has(.hero-reference-dots.swiper-slide-active) #site-header#site-header:not(.sticky) .header-wrapper-alt.header-wrapper-alt:not(.menu-open) .header-search-toggle {
    display: grid !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    place-items: center !important;
    color: #1A0F2E !important;
    border: 1px solid rgba(112, 39, 185, 0.24) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

:root:has(.hero-reference-dots.swiper-slide-active) .hero-slider .hero-slider-nav {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 1025px) {
    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content {
        justify-content: flex-start;
        padding: clamp(190px, 21vh, 245px) clamp(52px, 4.8vw, 96px) 210px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-wrap {
        bottom: clamp(42px, 5.8vh, 68px);
    }
}

@media (max-width: 1024px) {
    :root:has(.elementor-12) .hero-slider .swiper-slide.hero-reference-dots {
        height: auto;
        min-height: 900px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content {
        justify-content: flex-start;
        min-height: 900px;
        padding: 160px 32px 74px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-heading {
        font-size: clamp(48px, 7.4vw, 72px);
        letter-spacing: -0.045em;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-wrap {
        position: static;
        width: 100%;
        margin-top: 68px;
    }
}

@media (max-width: 767px) {

    :root:has(.elementor-12) .hero-slider .swiper-slide.hero-reference-dots,
    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content {
        min-height: 860px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content {
        padding: 124px 20px 64px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-heading {
        font-size: clamp(39px, 11.6vw, 52px);
        line-height: 1.02;
        letter-spacing: -0.04em;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content>.container>p {
        font-size: 17px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-content>.container>p br {
        display: none;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .slide-cta {
        min-height: 54px;
        padding: 15px 20px;
        font-size: 16px;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-wrap {
        margin-top: 56px;
        overflow: hidden;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list {
        display: flex;
        gap: 0;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list::-webkit-scrollbar {
        display: none;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list li {
        flex: 0 0 78%;
        padding: 6px 24px 8px;
        scroll-snap-align: start;
    }

    :root:has(.elementor-12) .hero-slider .hero-reference-dots .case-study-list li:first-child {
        padding-left: 0;
    }

    :root:has(.hero-reference-dots.swiper-slide-active) #site-header#site-header:not(.sticky) .header-wrapper-alt.header-wrapper-alt:not(.menu-open) .header-search-toggle {
        width: auto !important;
        height: auto !important;
        border: 0 !important;
        background: transparent !important;
    }
}

/* Mobile navigation always uses an opaque white surface. Keep the Deployed
   lockup dark even when the active desktop hero slide requests white chrome. */
@media (max-width: 1024px) {

    :root:has(.hero-slider) #site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-lockup--header,
    :root:has(.hero-slider) #site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-logo-name {
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.hero-slider) #site-header#site-header .header-wrapper-alt:not(.menu-open) .deployed-site-logo {
        filter: none !important;
    }
}

/* Defensive Security: use the homepage slider's exact dark-violet artwork on
   every authored dark surface. Remove only the legacy blue/pink background
   illustrations; certification marks and meaningful content icons remain. */
:where(body.site-defensive-security-detail, .site-defensive-security-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment,
    #cta-form,
    .comon-gradient,
    .blue-gradient,
    .gradient-primary) {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:where(body.site-defensive-security-detail, .site-defensive-security-scope) :is(.banner-bg-gr-image,
    #our-solution > .e-con-inner > .elementor-widget-image,
    #services-outcomes > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"],
    #services-outcomes img[src*="gain"],
    #services-outcomes img[data-src*="gain"],
    #services-outcomes img[bv-data-src*="gain"]) {
    display: none !important;
}

:where(body.site-defensive-security-detail, .site-defensive-security-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment)::before,
:where(body.site-defensive-security-detail, .site-defensive-security-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .assesment)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Defensive Security benefits sit on the dark homepage-slider artwork. Keep
   their interactive state violet so white copy never lands on a white card. */
:where(body.site-defensive-security-detail, .site-defensive-security-scope) #services-outcomes .gain-card:is(:hover, :focus-within) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.78) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

:where(body.site-defensive-security-detail, .site-defensive-security-scope) #services-outcomes .gain-card:is(:hover, :focus-within) :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(body.site-defensive-security-detail, .site-defensive-security-scope) #services-outcomes .gain-card .gain-title::after {
    background: linear-gradient(90deg, #D8B4FE 0%, #8331D9 100%) !important;
}

/* Remove the legacy nested gradients that otherwise cover the exact homepage
   slider artwork applied to the parent sections. Component panels use the
   slider's same #260044 foundation for a consistent surface at every state. */
:where(body.site-defensive-security-detail, .site-defensive-security-scope) #services-outcomes :is(.cloud-gain-section, .cloud-gain-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
}

:where(body.site-defensive-security-detail, .site-defensive-security-scope) :is(#our-solution .solution-card,
    #services-outcomes .gain-card,
    .assesment .assesment_list_card,
    #cta-form .hc-testimonial) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.42) !important;
}

/* AI Agents legacy route: use the homepage slider's exact dark-violet artwork
   on every authored colored section and remove the old blue/pink decorations. */
:where(body.site-ai-agents-detail, .site-ai-agents-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .blog-cta-section,
    .featured-whitepaper,
    .white-paper-sc) {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:where(body.site-ai-agents-detail, .site-ai-agents-scope) :is(.banner-bg-gr-image,
    #our-solution > .e-con-inner > .elementor-widget-image,
    #services-outcomes > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"],
    #services-outcomes img[src*="gain"],
    #services-outcomes img[data-src*="gain"],
    #services-outcomes img[bv-data-src*="gain"]) {
    display: none !important;
}

:where(body.site-ai-agents-detail, .site-ai-agents-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .blog-cta-section)::before,
:where(body.site-ai-agents-detail, .site-ai-agents-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .blog-cta-section)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Let the section artwork remain continuous; nested wrappers previously
   restarted the legacy gradient and produced visibly different purple bands. */
:where(body.site-ai-agents-detail, .site-ai-agents-scope) #services-outcomes :is(.cloud-gain-section, .cloud-gain-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
}

:where(body.site-ai-agents-detail, .site-ai-agents-scope) :is(#our-solution .solution-card,
    #services-outcomes .gain-card,
    .assesment .assesment_list_card,
    #cta-form .hc-testimonial) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.42) !important;
}

:where(body.site-ai-agents-detail, .site-ai-agents-scope) #services-outcomes .gain-card:is(:hover, :focus-within) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.78) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

:where(body.site-ai-agents-detail, .site-ai-agents-scope) #services-outcomes .gain-card:is(:hover, :focus-within) :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Application Development sidebar CTA: the source template adds a blue cloud
   image in ::after. Remove it and use the homepage slider artwork unchanged. */
.elementor-5611 .blog-cta-section {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor-5611 .blog-cta-section::before,
.elementor-5611 .blog-cta-section::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.elementor-5611 .blog-cta-section>.e-con-inner,
.elementor-5611 .blog-cta-section>.elementor-element {
    background-color: transparent !important;
    background-image: none !important;
}

/* FinOps: align every authored dark section with the exact homepage slider
   artwork and remove the template's legacy decorative background layers. */
:where(body.site-finops-detail, .site-finops-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .blog-cta-section,
    .featured-whitepaper,
    .white-paper-sc) {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

:where(body.site-finops-detail, .site-finops-scope) :is(.banner-bg-gr-image,
    #our-solution > .e-con-inner > .elementor-widget-image,
    #services-outcomes > .e-con-inner > .elementor-widget-image,
    #our-solution img[src*="solution-section-1"],
    #our-solution img[data-src*="solution-section-1"],
    #our-solution img[bv-data-src*="solution-section-1"],
    #services-outcomes img[src*="gain"],
    #services-outcomes img[data-src*="gain"],
    #services-outcomes img[bv-data-src*="gain"]) {
    display: none !important;
}

:where(body.site-finops-detail, .site-finops-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .blog-cta-section)::before,
:where(body.site-finops-detail, .site-finops-scope) :is(.subpage-hero-section,
    #our-solution,
    #services-outcomes,
    .comon-gradient,
    .blue-gradient,
    .assesment,
    #cta-form,
    .blog-cta-section)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

:where(body.site-finops-detail, .site-finops-scope) #services-outcomes :is(.cloud-gain-section, .cloud-gain-wrapper) {
    background-color: transparent !important;
    background-image: none !important;
}

:where(body.site-finops-detail, .site-finops-scope) :is(#our-solution .solution-card,
    #services-outcomes .gain-card,
    .assesment .assesment_list_card,
    #cta-form .hc-testimonial) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.42) !important;
}

/* The newsletter form lives in the shared footer.  Its original template
   button was blue on some service pages; retain the same purple palette as
   the homepage and provide a visible keyboard focus state. */
.footerNewsLetter .blog-subscribe-wrap button,
.footerNewsLette .blog-subscribe-wrap button,
.footerNewsLetter .blog-subscribe-wrap button:hover,
.footerNewsLette .blog-subscribe-wrap button:hover,
.footerNewsLetter .blog-subscribe-wrap button:focus,
.footerNewsLette .blog-subscribe-wrap button:focus {
    background-color: #7027B9 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid #A855F7 !important;
    box-shadow: none !important;
}

.footerNewsLetter .blog-subscribe-wrap button:hover,
.footerNewsLette .blog-subscribe-wrap button:hover {
    background-color: #260044 !important;
    border-color: #E8D3FF !important;
}

.footerNewsLetter .blog-subscribe-wrap button:focus-visible,
.footerNewsLette .blog-subscribe-wrap button:focus-visible {
    outline: 3px solid #E8D3FF !important;
    outline-offset: 3px !important;
}

:where(body.site-finops-detail, .site-finops-scope) #services-outcomes .gain-card:is(:hover, :focus-within) {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.78) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

:where(body.site-finops-detail, .site-finops-scope) #services-outcomes .gain-card:is(:hover, :focus-within) :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Engagement Models: the leading hero CTA inherited a legacy blue token.
   Keep this prominent action aligned with the site's violet action language. */
.elementor-35296 .elementor-35500 [data-id="5170af2"] .elementor-button {
    background: linear-gradient(135deg, #3B1F5C 0%, #7027B9 62%, #A855F7 100%) !important;
    border-color: #A855F7 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-35296 .elementor-35500 [data-id="5170af2"] .elementor-button:is(:hover, :focus-visible) {
    background: #260044 !important;
    border-color: #E8D3FF !important;
}

.elementor-35296 .elementor-35500 [data-id="5170af2"] .elementor-button :is(.elementor-button-text,
    .elementor-button-icon,
    svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* AI-First Company: lifecycle chips receive a white template hover fill while
   the page also forces their text white. Use a lavender hover surface with
   dark text instead, so every linked chip remains legible. */
.elementor-42231 .tkxel-support-ai .chips .chip:is(:hover, :focus-visible) {
    background-color: #E8D3FF !important;
    border-color: #E8D3FF !important;
    color: #260044 !important;
    -webkit-text-fill-color: #260044 !important;
}

.elementor-42231 .tkxel-support-ai .chips .chip:focus-visible {
    outline: 3px solid #FFFFFF !important;
    outline-offset: 3px !important;
}

/* Cloud Security, Application Security, and Data Security all reuse the
   gains template. Its page-wide white-copy rule needs a stable dark panel on
   these three pages, both at rest and while a card is interacted with. */
:is(.elementor-32782,
    .elementor-32801,
    .elementor-33075) #services-outcomes .gain-card {
    background-color: #260044 !important;
    background-image: none !important;
    border-color: rgba(216, 180, 254, 0.48) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

:is(.elementor-32782,
    .elementor-32801,
    .elementor-33075) #services-outcomes .gain-card :is(.gain-title, .gain-desc) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:is(.elementor-32782,
    .elementor-32801,
    .elementor-33075) #services-outcomes .gain-card:is(:hover, :focus-within) {
    background: linear-gradient(145deg, #260044 0%, #4B176E 100%) !important;
    border-color: rgba(232, 211, 255, 0.82) !important;
    box-shadow: 0 18px 38px rgba(26, 0, 48, 0.34) !important;
}

/* Engagement Models has a custom purple hero nested inside the standard
   service shell. Mirror Home's initial header state over that hero: transparent
   chrome with white navigation, then let the existing sticky-header rules take
   over after the visitor scrolls. */
@media (min-width: 1025px) {
    :root:has(.elementor-35296) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    :root:has(.elementor-35296) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(#menu-main-menu > li > a,
        .header-search-toggle,
        .deployed-logo-lockup,
        .deployed-logo-name) {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    :root:has(.elementor-35296) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo svg path,
        #menu-main-menu > li.menu-item-has-children > a svg path,
        .header-menu-cta svg path,
        .header-search-toggle svg path) {
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

    :root:has(.elementor-35296) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
        filter: brightness(0) invert(1) !important;
    }

    :root:has(.elementor-35296) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a {
        background: #FFFFFF !important;
        border-color: #FFFFFF !important;
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    :root:has(.elementor-35296) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .cta-contact-us a:is(:hover, :focus-visible) {
        background: #5B149B !important;
        border-color: #5B149B !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
}

/* Customer theme completion layer. Keep this at the end of the stylesheet so
   every case-study template component wins over its late-loaded legacy rules. */
.page-id-36343 .case-study-listing-wrapper .whitepaper-item {
    overflow: hidden;
    border: 1px solid rgba(112, 39, 185, 0.24) !important;
    background: #FFFFFF !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.page-id-36343 .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) {
    transform: translateY(-4px);
    border-color: rgba(112, 39, 185, 0.68) !important;
    box-shadow: 0 18px 38px rgba(43, 0, 77, 0.16) !important;
}

.page-id-36343 .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) .customer-sd-wrap {
    background: linear-gradient(145deg, #260044 0%, #5B149B 100%) !important;
    border-color: rgba(232, 211, 255, 0.78) !important;
}

.page-id-36343 .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) .customer-sd-wrap :is(.whitepaper-category, .whp-title, .whp-title h3) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.page-id-36343 .case-study-listing-wrapper .customer-sd-wrap .whitepaper-category,
.page-id-36343 #clear-filters,
.page-id-36343 .reset-filter--btn {
    color: #7027B9 !important;
    -webkit-text-fill-color: #7027B9 !important;
}

.page-id-36343 .filter-dropdown {
    border-color: rgba(112, 39, 185, 0.28) !important;
    box-shadow: 0 16px 34px rgba(43, 0, 77, 0.12) !important;
}

.page-id-36343 .filter-dropdown input[type="checkbox"] {
    accent-color: #7027B9 !important;
}

.page-id-36343 .pagination :is(.page-numbers.current, .page-numbers:hover, .page-numbers:focus-visible) {
    background: #7027B9 !important;
    border-color: #7027B9 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"]::before,
.elementor-2103.elementor-location-single.case_study [data-id="67d3452"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] :is([data-id="845fe9b"],
    [data-id="1c7c1ac"],
    [data-id="1967a91"],
    [data-id="a151d92"],
    [data-id="ab9a295"]) {
    background-color: transparent !important;
    background-image: none !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .results-delivered .single-results-list {
    padding: 22px 20px !important;
    background: rgba(38, 0, 68, 0.58) !important;
    border: 1px solid rgba(232, 211, 255, 0.36) !important;
    box-shadow: 0 12px 28px rgba(18, 0, 33, 0.16) !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .results-delivered .single-results-list+.single-results-list {
    margin-top: 12px;
}

.elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .results-delivered .single-results-right p {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="88981a7"] {
    background: #FFFFFF !important;
    background-image: none !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap>.e-con {
    padding: clamp(22px, 2vw, 32px) !important;
    background: #FAF7FF !important;
    background-image: none !important;
    border: 1px solid rgba(112, 39, 185, 0.20) !important;
    border-left: 4px solid #7027B9 !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap :is(.elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .single-results-right,
    .single-results-right p,
    .single-results-right li) {
    color: #34263F !important;
    -webkit-text-fill-color: #34263F !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap .single-results-list {
    padding: 18px 0 !important;
    border-top: 1px solid rgba(112, 39, 185, 0.24) !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap .single-results-list:first-child {
    border-top-color: rgba(112, 39, 185, 0.24) !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap .single-results-left :is(h3, p) {
    color: #7027B9 !important;
    -webkit-text-fill-color: #7027B9 !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap .single-stack {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 4px 6px 4px 0;
    padding: 6px 10px;
    background: #F3E8FF !important;
    border: 1px solid rgba(112, 39, 185, 0.28) !important;
    color: #260044 !important;
    -webkit-text-fill-color: #260044 !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap a {
    color: #7027B9 !important;
    -webkit-text-fill-color: #7027B9 !important;
    text-decoration-color: rgba(112, 39, 185, 0.48) !important;
}

.elementor-2103.elementor-location-single.case_study .case-study-content-wrap a:is(:hover, :focus-visible) {
    color: #5B149B !important;
    -webkit-text-fill-color: #5B149B !important;
    text-decoration-color: #5B149B !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="a37e5af"] img,
.elementor-2103.elementor-location-single.case_study [data-id="430c38c"] .elementor-wrapper {
    border: 1px solid rgba(112, 39, 185, 0.24) !important;
    box-shadow: 0 18px 42px rgba(43, 0, 77, 0.12) !important;
}

.elementor-2103.elementor-location-single.case_study [data-id="a22dcdc"] {
    overflow: hidden;
    border: 1px solid rgba(232, 211, 255, 0.52) !important;
    box-shadow: 0 22px 46px rgba(43, 0, 77, 0.24) !important;
}

.elementor-2103.elementor-location-single.case_study .success-story-form {
    border: 0 !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form .form-group>p>label {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1 !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form input:-webkit-autofill,
.elementor-2103.elementor-location-single.case_study .request-casestudy-form input:-webkit-autofill:hover,
.elementor-2103.elementor-location-single.case_study .request-casestudy-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #4B176E inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study .request-casestudy-form input:-webkit-autofill+label {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

.elementor-2103.elementor-location-single.case_study .partnership-sec> :is(.e-con-inner,
    .elementor-element,
    .elementor-motion-effects-container,
    .elementor-motion-effects-layer) {
    background-color: transparent !important;
    background-image: none !important;
}

@media (max-width: 1024px) {
    .elementor-2103.elementor-location-single.case_study .case-study-content-wrap>.e-con {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-2103.elementor-location-single.case_study [data-id="a22dcdc"] {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .elementor-2103.elementor-location-single.case_study {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .elementor-2103.elementor-location-single.case_study> :is([data-id="67d3452"],
        [data-id="88981a7"],
        [data-id="896cea0"]) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-2103.elementor-location-single.case_study [data-id="f4a5074"] {
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100% !important;
        --flex-basis: auto !important;
        flex: 0 1 auto !important;
        align-self: stretch !important;
    }

    .elementor-2103.elementor-location-single.case_study [data-id="f4a5074"] .elementor-heading-title {
        max-width: 100% !important;
        font-size: clamp(30px, 9vw, 36px) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .elementor-2103.elementor-location-single.case_study [data-id="67d3452"] :is([data-id="845fe9b"],
        [data-id="845fe9b"] > .e-con-inner,
        [data-id="1c7c1ac"],
        [data-id="1967a91"],
        [data-id="a151d92"],
        [data-id="ab9a295"],
        .results-delivered,
        .results-delivered .elementor-widget-container,
        .results-delivered .single-results-list,
        .results-delivered .single-results-left,
        .results-delivered .single-results-right) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .results-delivered .single-results-right :is(p, li) {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .elementor-2103.elementor-location-single.case_study [data-id="67d3452"] .results-delivered .single-results-list {
        padding: 18px 16px !important;
    }

    .elementor-2103.elementor-location-single.case_study .case-study-content-wrap>.e-con {
        padding: 20px 16px !important;
    }

    .page-id-36343 .case-study-listing-wrapper .whitepaper-item:is(:hover, :focus-within) {
        transform: none;
    }
}

/* Final customer-detail guard. The Next.js shell keeps Elementor's template
   marker but not WordPress's original body classes, so this template-root
   selector is the canonical scope for every customer story. */
.elementor-2103.elementor-location-single.case_study>.elementor-element[data-id="67d3452"] {
    background-color: #260044 !important;
    background-image:
        url("/wp-content/themes/tkxel-theme/assets/images/home-hero-dark-violet.svg?hero_version=20260731a") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.elementor-2103.elementor-location-single.case_study>.elementor-element[data-id="67d3452"]>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background: transparent !important;
    background-image: none !important;
}

.elementor-2103.elementor-location-single.case_study>.elementor-element[data-id="67d3452"] :is(h1,
    h2,
    h3,
    p,
    .elementor-heading-title,
    .elementor-widget-text-editor,
    .single-results-left,
    .single-results-right) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.elementor-2103.elementor-location-single.case_study>.elementor-element[data-id="67d3452"] [data-id="55f72a9"]>.elementor-widget-container :is(img, svg) {
    max-width: min(220px, 100%) !important;
}

.elementor-2103.elementor-location-single.case_study>.elementor-element[data-id="88981a7"] {
    background: #FFFFFF !important;
    background-image: none !important;
}

/* Header CTA contrast guard. Several legacy header variants change only the
   link text on hover, which can produce white text on a white button. Keep one
   predictable interaction across normal, transparent, and sticky headers. */
#site-header#site-header .header-wrapper-alt .cta-contact-us>a:is( :hover,
    :focus-visible,
    :active),
#site-header#site-header .header-wrapper-alt .cta-contact-us>a.btn-get-in-touch:is( :hover,
    :focus-visible,
    :active) {
    background: #5B149B !important;
    background-color: #5B149B !important;
    border-color: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Footer layout after retired link groups are commented out. */
.elementor-139.elementor-location-footer .footerInner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: clamp(32px, 4vw, 72px) !important;
}

.elementor-139.elementor-location-footer .footerInner>.e-con {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: initial !important;
    flex-basis: auto !important;
    --width: auto !important;
}

/* The public site currently has one office: Mall of Gulberg, Lahore. */
:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-grid--lahore-only {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-card {
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 16px 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    max-width: 440px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-card__heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-card__heading>span {
    font-size: 16px !important;
    line-height: 1 !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-card h2 {
    margin: 0 !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) .footer-office-card p {
    margin: 0 !important;
    color: #A59DB8 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Remove footer brand summary paragraph */
:is(footer.elementor-location-footer, [data-elementor-type="footer"], .elementor-location-footer, body) :is([data-id="81cbc16"], .elementor-element-81cbc16) {
    display: none !important;
}

@media (max-width: 1024px) {
    .elementor-139.elementor-location-footer .footerInner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 36px 32px !important;
    }
}

@media (max-width: 767px) {
    .elementor-139.elementor-location-footer .footerInner {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 36px !important;
    }

    .elementor-139.elementor-location-footer .footerInner>.e-con {
        padding-right: 0 !important;
    }
}

#site-header#site-header .header-wrapper-alt .cta-contact-us>a:is( :hover,
    :focus-visible,
    :active) :is(span, strong, svg, svg path) {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Keep every shared footer band neutral charcoal. A grayscale value prevents
   the global blue-to-purple palette pass from tinting some footer templates. */
footer.elementor-location-footer,
footer.elementor-location-footer :is([data-id="c2113c9"],
    [data-id="def6463"],
    [data-id="7abecd3"],
    [data-id="292607c"]),
footer.elementor-location-footer :is([data-id="c2113c9"],
    [data-id="def6463"],
    [data-id="7abecd3"],
    [data-id="292607c"])>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background: #1B1B1B !important;
    background-color: #1B1B1B !important;
    background-image: none !important;
}

footer.elementor-location-footer :is([data-id="c2113c9"],
    [data-id="def6463"],
    [data-id="7abecd3"],
    [data-id="292607c"])::before {
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* Global footer color guard. Some archived pages use a div-based Elementor
   footer or additional nested bands instead of the homepage's exact IDs. Keep
   every one of those variants on the same neutral dark surface. */
:is(footer.elementor-location-footer, [data-elementor-type="footer"]) {
    background: #1B1B1B !important;
    background-color: #1B1B1B !important;
    background-image: none !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"]) :is(.e-con, .elementor-section, .elementor-container) {
    background-color: #1B1B1B !important;
    background-image: none !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"]) :is(.elementor-motion-effects-layer, .elementor-background-overlay),
:is(footer.elementor-location-footer, [data-elementor-type="footer"]) :is(.e-con, .elementor-section, .elementor-container)::before {
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"]) :is(.elementor-heading-title, .footer-heading, h2, h3, h4, strong) {
    color: #FFFFFF !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"]) :is(p, li, a, label, .elementor-nav-menu--main .elementor-item) {
    color: #C8C2D3 !important;
}

:is(footer.elementor-location-footer, [data-elementor-type="footer"]) a:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
}

/* ==========================================================================
   Success Stories Section: Larger "View case study" & "All case studies" Buttons
   ========================================================================== */
:is(.success_stories, .home_success_stories, .cs_card, .thumbnail-wrap) :is(.view-case-study, a.view-case-study) {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.3 !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
}

:is(.success_stories, .home_success_stories, .cs_card, .thumbnail-wrap) :is(.view-case-study, a.view-case-study) .cs_card_arrow,
:is(.success_stories, .home_success_stories, .cs_card, .thumbnail-wrap) :is(.view-case-study, a.view-case-study) img {
    width: 14px !important;
    height: 14px !important;
    margin-left: 4px !important;
    transition: transform 0.25s ease !important;
}

:is(.success_stories, .home_success_stories, .cs_card, .thumbnail-wrap) :is(.view-case-study, a.view-case-study):is(:hover, :focus, :active) {
    background-color: #5B149B !important;
    background-image: linear-gradient(135deg, #2A0845 0%, #5B149B 50%, #7B2FD1 100%) !important;
    border-color: #5B149B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(91, 20, 155, 0.3) !important;
    transform: translateY(-2px) !important;
}

:is(.success_stories, .home_success_stories, .cs_card, .thumbnail-wrap) :is(.view-case-study, a.view-case-study):is(:hover, :focus, :active) :is(img, .cs_card_arrow) {
    filter: brightness(0) invert(1) !important;
    transform: translate(2px, -2px) !important;
}

/* Success Stories Section Top Header Button ("All case studies" / "View case studies") */
:is(.elementor-4762, [data-elementor-id="4762"], .elementor-element-f2dfab3, #our-customers, .success-stories-section) :is(.elementor-element-2fedee2, .svg-button-dark) :is(.elementor-button, a.elementor-button) {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.3 !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    border-radius: 32px !important;
    letter-spacing: 0.2px !important;
    transition: all 0.25s ease !important;
}

@media (max-width: 767px) {
    :is(.success_stories, .home_success_stories, .cs_card, .thumbnail-wrap) :is(.view-case-study, a.view-case-study) {
        font-size: 0.9375rem !important; /* 15px */
        padding: 10px 20px !important;
    }
    :is(.elementor-4762, [data-elementor-id="4762"], .elementor-element-f2dfab3, #our-customers, .success-stories-section) :is(.elementor-element-2fedee2, .svg-button-dark) :is(.elementor-button, a.elementor-button) {
        font-size: 1rem !important;
        padding: 12px 24px !important;
    }
}

/* ==========================================================================
   Services Page (/services/index.html) Category Icons Styling
   ========================================================================== */
.ai-data-section .ai-data-left :is(img, .service-cat-icon) {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    margin-bottom: 20px !important;
    display: inline-block !important;
    filter: drop-shadow(0 6px 16px rgba(112, 39, 185, 0.15)) !important;
    transition: transform 0.3s ease !important;
}

.ai-data-section:hover .ai-data-left :is(img, .service-cat-icon) {
    transform: scale(1.06) !important;
}

/* ==========================================================================
   Partnership Banner Heading: Wide & balanced horizontal presentation
   ========================================================================== */
:is(.partnership-sec, .comon-gradient.partnership-sec) :is(.elementor-element-866296e, .elementor-widget-heading) {
    width: 100% !important;
    max-width: min(100%, 1200px) !important;
    --container-widget-width: 100% !important;
    margin-inline: auto !important;
}

:is(.partnership-sec, .comon-gradient.partnership-sec) :is(.elementor-element-866296e, .elementor-widget-heading) > .elementor-widget-container {
    margin-bottom: 48px !important;
}

:is(.partnership-sec, .comon-gradient.partnership-sec) .elementor-heading-title {
    max-width: 1100px !important;
    margin-inline: auto !important;
    font-size: clamp(2rem, 2.6vw, 3rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
}

/* Company page: remove moving image ticker & hero slider sections */
:is([data-id="3529fb4"], .elementor-element-3529fb4, .ticker-swiper, [data-id="691d210"], .elementor-element-691d210, .company-page-hero-slider) {
    display: none !important;
}

/* Mobile headers always have an opaque white surface. Page-specific desktop
   hero rules can otherwise leave the imported brand white-on-white (Contact)
   or hide only its wordmark (Home). Keep the complete Deployed lockup visible
   on every small-screen header, regardless of the page/slider theme. */
@media (max-width: 1024px) {
    #site-header#site-header#site-header .header-wrapper-alt .header-logo {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        flex: 0 0 auto;
        width: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #site-header#site-header#site-header .header-wrapper-alt .header-logo > a,
    #site-header#site-header#site-header .header-wrapper-alt .deployed-logo-lockup--header {
        display: inline-flex !important;
        align-items: center !important;
        width: max-content !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    #site-header#site-header#site-header .header-wrapper-alt .deployed-logo-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #1A0F2E !important;
        -webkit-text-fill-color: #1A0F2E !important;
    }

    #site-header#site-header#site-header .header-wrapper-alt .deployed-site-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: none !important;
    }

    /* Resources starts with a violet hero behind its transparent header. Keep
       the lockup white there, then let the global dark lockup return as soon
       as the header becomes sticky or the mobile menu opens. The page-id
       selector also supports mobile browsers without :has(). */
    body.page-id-32792 #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-logo-lockup--header,
    :root:has(.resources-hero) #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-logo-lockup--header,
    body.page-id-32792 #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-logo-name,
    :root:has(.resources-hero) #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-logo-name {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    body.page-id-32792 #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo,
    :root:has(.resources-hero) #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
        filter: brightness(0) invert(1) !important;
    }

    body.page-id-32792 #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span,
    body.page-id-32792 #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::before,
    body.page-id-32792 #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::after {
        background: #FFFFFF !important;
    }

    /* Mobile navigation and resource filtering are intentionally search-free. */
    #site-header .mobile-nav-wrapper,
    #site-header .header-search-panel.mobile,
    .filter-wrapper .search-wrap,
    .deployed-search-form {
        display: none !important;
    }
}

/* Floating estimate dock: broad imported button rules zero out its declared
   padding. Reinstate a comfortably padded pill and keep its centre aligned
   with the adjacent chat launcher at both launcher sizes. */
#deployed-estimate-dock.deployed-estimate-dock {
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 22px 12px 28px !important;
    bottom: calc(max(24px, env(safe-area-inset-bottom)) + 10px) !important;
}

/* Homepage hero: Swiper and the source theme mix viewport heights, auto
   heights, and per-slide minimums. Use one explicit height for the complete
   carousel so every slide occupies the same space without clipping content. */
:root:has(.elementor-12) {
    --deployed-home-hero-height: 900px;
}

:root:has(.elementor-12) .hero-slider,
:root:has(.elementor-12) .hero-slider > .swiper,
:root:has(.elementor-12) .hero-slider .swiper-wrapper,
:root:has(.elementor-12) .hero-slider .swiper-slide {
    height: var(--deployed-home-hero-height) !important;
    min-height: var(--deployed-home-hero-height) !important;
    max-height: var(--deployed-home-hero-height) !important;
}

:root:has(.elementor-12) .hero-slider .swiper-slide > .slide-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 767px) {
    #deployed-estimate-dock.deployed-estimate-dock {
        min-height: 40px !important;
        padding: 10px 14px 10px 18px !important;
        right: calc(max(16px, env(safe-area-inset-right)) + 60px + 8px) !important;
        bottom: calc(max(18px, env(safe-area-inset-bottom)) + 10px) !important;
    }

    :root:has(.elementor-12) {
        --deployed-home-hero-height: 860px;
    }

    :root:has(.elementor-12) .hero-slider .swiper-slide {
        justify-content: flex-start !important;
    }

    :root:has(.elementor-12) .hero-slider .swiper-slide > .slide-content {
        justify-content: flex-start !important;
        padding: 36px 0 74px !important;
    }

    :root:has(.elementor-12) .hero-slider .slide-content > .container {
        display: flex !important;
        height: 100% !important;
        min-height: 0 !important;
        flex-direction: column !important;
    }

    :root:has(.elementor-12) .hero-slider .slide-cta {
        width: auto !important;
        align-self: flex-start !important;
    }

    :root:has(.elementor-12) .hero-slider :is(.hero-awards, .case-study-wrap) {
        margin-top: auto !important;
    }
}

/* Blog-detail mobile headers begin transparently over a dark violet hero.
   Use the light lockup in that state; when navigation opts into its sticky or
   menu-open surface, the global dark lockup can return on the opaque header. */
@media (max-width: 1024px) {
    :is(body.deployed-blog-detail-page, :root:has(.blog-single-wrapper)) #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) :is(.header-logo > a,
        .deployed-logo-lockup--header,
        .deployed-logo-name) {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    :is(body.deployed-blog-detail-page, :root:has(.blog-single-wrapper)) #site-header#site-header#site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .deployed-site-logo {
        filter: brightness(0) invert(1) !important;
    }

    :is(body.deployed-blog-detail-page, :root:has(.blog-single-wrapper)) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span,
    :is(body.deployed-blog-detail-page, :root:has(.blog-single-wrapper)) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::before,
    :is(body.deployed-blog-detail-page, :root:has(.blog-single-wrapper)) #site-header:not(.sticky) .header-wrapper-alt:not(.sticky):not(.menu-open) .hamburger-icon span::after {
        background: #FFFFFF !important;
    }
}