/*
 * 21X Website — Redesign iteration 2 (Albatros)
 * Isolated tweaks on top of the light-mode redesign so they are easy to review/revert.
 * Each rule is tagged with its task number from the client brief.
 */

/* ============================================================
   Task 2 — Partner logo grid: neutral (desaturated) by default,
   real brand colours on hover, with a clear, non-layout-shifting
   highlight. Logos are CSS background-images on .partner-logo
   containers, so we filter the container itself.
   ============================================================ */
/* Positioning context for the per-partner colour-logo hover overlay (::after),
 * injected by twentyonex_partner_logo_css() in the plugin. */
.partner-logo {
    position: relative;
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.partner-logo:hover {
    transform: translateY(-2px); /* subtle lift for clear feedback */
}
/* Grey the LOGO IMAGE itself (not the container — a theme/Elementor rule was
 * resetting the container filter to none). `!important` so it can't be overridden.
 * Default = desaturated/dimmed; hover = full brand colour. */
.partner-logo img {
    filter: grayscale(1) !important;
    opacity: 0.55 !important;
    transition: filter 350ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: filter, opacity;
}
.partner-logo:hover img {
    filter: grayscale(0) !important;
    opacity: 1 !important;
}

/* Homepage hero sits over a bright, daytime skyline (WebGL scene). Force the
 * headline + subline dark for contrast against the light sky. We must beat both
 * `color` AND `-webkit-text-fill-color` / any gradient text-fill the theme may
 * apply (that was leaving the text white/grey), and drop the white glow that
 * washed the letters out. Scoped to the hero. The "Powering" accent stays blue. */
.elementor-element-20c6714 .elementor-widget-heading .elementor-heading-title {
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
}
/* Keep only the "Powering" accent a blue gradient. */
.elementor-element-20c6714 .text-gradient__blue,
.elementor-element-20c6714 .elementor-heading-title .text-gradient__blue {
    background: linear-gradient(90deg, #2b5ca8 0%, #5aa7ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
}
/* "capital markets" carries a pink gradient class — force it dark like the rest. */
.elementor-element-20c6714 .text-gradient__pink,
.elementor-element-20c6714 .elementor-heading-title .text-gradient__pink {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    text-shadow: none !important;
}

/* Hero headline ~10% smaller. Both hero headings pull their size from an Elementor
 * global-typography CSS var (which changes per breakpoint), so scale that var by 0.9
 * to shrink proportionally at every breakpoint. */
.elementor-element-20c6714 .elementor-element-3d85ee2 .elementor-heading-title {
    font-size: calc(var(--e-global-typography-5f9a137-font-size) * 0.9) !important;
}
.elementor-element-20c6714 .elementor-element-1851d41 .elementor-heading-title {
    font-size: calc(var(--e-global-typography-d7274b3-font-size) * 0.9) !important;
}

/* Search pill lives inside the nav-menu <ul> as its own list item so it sits on
 * the same line as the menu entries (never dropping to a 2nd row). */
.elementor-element-3e73a56 .tox-search-li {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0 6px !important;
    padding: 0 !important;
}
.elementor-element-3e73a56 .tox-search-li::before,
.elementor-element-3e73a56 .tox-search-li::marker { content: none !important; }

/* Hero call-to-action buttons (injected html widget below the subline). The old
 * "Invest Now" nav button now lives here as the primary CTA, with a secondary
 * ghost "Onboard now →" text-button beside it. */
.tox-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    /* The 3D WebGL canvas is a later, absolutely-positioned sibling in the hero,
     * so it paints over static content. Lift the CTA into its own stacking slot
     * so the buttons sit above the canvas and are actually clickable/visible. */
    position: relative;
    z-index: 3;
}
.tox-hero-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms ease, background 200ms ease, color 200ms ease;
    cursor: pointer;
}
/* Primary — DARK navy-blue surface so the (light-blue) pixel-canvas effect reads
 * clearly on top, matching the original nav "Invest Now" button. Lifts on hover.
 * Force WHITE text (theme link styling was recolouring the label). */
.tox-hero-cta__btn--primary,
.tox-hero-cta__btn--primary:hover,
.tox-hero-cta__btn--primary:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #0a1f52 0%, #14357f 100%);
    box-shadow: 0 8px 22px rgba(43, 92, 168, 0.4);
}
.tox-hero-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(43, 92, 168, 0.55);
}
/* Secondary — plain text button, NO border, dark-blue text. */
.tox-hero-cta__btn--ghost,
.tox-hero-cta__btn--ghost:focus {
    color: #0d1b3e !important;
    -webkit-text-fill-color: #0d1b3e !important;
    background: transparent;
    border: none !important;
    padding: 15px 18px;
}
.tox-hero-cta__btn--ghost:hover {
    color: #2b5ca8 !important;
    -webkit-text-fill-color: #2b5ca8 !important;
    background: rgba(43, 92, 168, 0.06);
}
/* Label span inherits the button's (forced) colour so it can't be recoloured. */
.tox-hero-cta__btn .tox-hero-cta__txt,
.tox-hero-cta__btn .tox-hero-cta__txt * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
.tox-hero-cta__arrow {
    display: inline-block;
    font-size: 1.15em;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tox-hero-cta__btn--ghost:hover .tox-hero-cta__arrow {
    transform: translateX(4px);
}
@media (max-width: 767px) {
    .tox-hero-cta__btn { padding: 13px 24px; font-size: 0.95rem; }
}

/* ===== Feedback R1 (2026-07-20) ===== */
/* "Invest Now" / "Onboard now" as a matched pair: the ghost becomes an OUTLINED twin
 * of the primary (same geometry: padding 15/30 minus the 1.5px border, radius 10). */
.tox-hero-cta__btn--ghost,
.tox-hero-cta__btn--ghost:focus {
    border: 1.5px solid #0a1f52 !important;
    padding: 13.5px 28.5px;
    background: transparent;
}
.tox-hero-cta__btn--ghost:hover {
    background: rgba(43, 92, 168, 0.05);
    border-color: #14357f !important;
}
/* Dot page-navigation removed site-wide (client: "lose the dots on buttons"). */
.sectionNav_container { display: none !important; }

/* ===== Feedback R2 (2026-07-21): all blues mapped to brand navy #2B5CA8 / cyan #1DACE4 ===== */
/* Primary button: brand gradient, navy-dominant (cyan endpoint pushed past the edge
 * so the white label keeps contrast). */
.tox-hero-cta__btn--primary,
.tox-hero-cta__btn--primary:hover,
.tox-hero-cta__btn--primary:focus {
    background: linear-gradient(135deg, #2b5ca8 0%, #1dace4 170%);
    box-shadow: 0 8px 22px rgba(43, 92, 168, 0.35);
}
.tox-hero-cta__btn--primary:hover { box-shadow: 0 12px 30px rgba(43, 92, 168, 0.5); }
/* Outlined twin: navy border, cyan on hover. */
.tox-hero-cta__btn--ghost,
.tox-hero-cta__btn--ghost:focus { border-color: #2b5ca8 !important; }
.tox-hero-cta__btn--ghost:hover {
    border-color: #1dace4 !important;
    color: #2b5ca8 !important;
    -webkit-text-fill-color: #2b5ca8 !important;
}

/* ============================================================
   Feedback R3 (2026-08-10) — CENTERED hero:
   Big glass 21X mark dead-centre in the upper-middle; the headline,
   subline and CTA are centred and sit at the BOTTOM of the hero. On
   scroll the copy rises up to centre-stage while the 3D mark shrinks
   and spins away (initHeroParallax in redesign-v2.js + SceneDragon).
   ============================================================ */
body.page-id-44 .elementor-element-20c6714 {
    min-height: 92vh !important;
}
body.page-id-44 .elementor-element-20c6714 > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;   /* copy anchored to the bottom */
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    min-height: 92vh !important;
    padding-bottom: 7vh !important;
    gap: 6px !important;
}
/* Centre each copy widget and let it span the column. The 3D canvas is an opaque,
   absolutely-positioned sibling that paints OVER static content, so lift the copy
   into its own stacking slot (like the CTA) — otherwise the headline/subline vanish
   behind the canvas. */
body.page-id-44 .elementor-element-20c6714 .elementor-element-3d85ee2,
body.page-id-44 .elementor-element-20c6714 .elementor-element-1851d41,
body.page-id-44 .elementor-element-20c6714 .elementor-element-c7a0f10 {
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    z-index: 3 !important;
}
body.page-id-44 .elementor-element-20c6714 .elementor-element-1851d41 {
    max-width: none !important;
}
body.page-id-44 .elementor-element-20c6714 .tox-hero-cta {
    justify-content: center !important;
}
/* The copy block rises as a unit on scroll — a shared transform origin keeps the
   three widgets moving together (JS sets translateY on each). */
body.page-id-44 .elementor-element-20c6714 .elementor-element-3d85ee2,
body.page-id-44 .elementor-element-20c6714 .elementor-element-1851d41,
body.page-id-44 .elementor-element-20c6714 .tox-hero-cta {
    will-change: transform;
}

/* ===== Feedback R4 (2026-08-28): no purple/pink accents — brand colours only =====
   The theme ships a pink/purple text gradient (.text-gradient__pink) used e.g. in the
   Our-Story mission statement. Map it SITE-WIDE onto the brand blue gradient
   (deep #2B5CA8 → sky #1DACE4). Page-scoped overrides (homepage hero) still win. */
.text-gradient__pink {
    background: linear-gradient(90deg, #2b5ca8 0%, #1dace4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ===== Feedback R4: standardized CTA colours (corporate design) ===== */
/* Every Elementor button uses the approved brand blue — no stray greens/greys/blacks.
   (Announcements included: their buttons inherit this.) */
body a.elementor-button, body .elementor-button.elementor-button,
body .elementor-element.elementor-element .elementor-button,
body .elementor-widget-button .elementor-button {
    background-color: #2B5CA8 !important;
    background-image: linear-gradient(135deg, #2B5CA8 0%, #2278C0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
}
body a.elementor-button:hover, body .elementor-button.elementor-button:hover,
body .elementor-element.elementor-element .elementor-button:hover,
body a.elementor-button:focus, body .elementor-button.elementor-button:focus {
    background-image: linear-gradient(135deg, #234B8A 0%, #1B6AAE 100%) !important;
    color: #ffffff !important;
}
body .elementor-button .elementor-button-text { color: #ffffff !important; }

/* ===== Feedback R4: regulatory archives readability ===== */
/* "Really low contrast and text format" — darken body text + titles on the
   Regulatory page and the announcement/document archives. */
body.page-id-3635 .elementor-widget-theme-post-content,
body.post-type-archive-announcement .elementor-heading-title,
body.post-type-archive-document .elementor-heading-title,
body.page-id-3635 .elementor-heading-title {
    color: #1A1A2E !important;
}
body.post-type-archive-announcement .elementor-post__title,
body.post-type-archive-announcement .elementor-post__title a,
body.post-type-archive-document .elementor-post__title,
body.post-type-archive-document .elementor-post__title a,
body.post-type-archive-announcement .e-loop-item .elementor-heading-title,
body.post-type-archive-document .e-loop-item .elementor-heading-title {
    color: #1A1A2E !important;
    -webkit-text-fill-color: #1A1A2E !important;
}
body.post-type-archive-announcement .elementor-post__excerpt,
body.post-type-archive-document .elementor-post__excerpt,
body.post-type-archive-announcement .e-loop-item p,
body.post-type-archive-document .e-loop-item p {
    color: #4B5563 !important;
}

/* ===== Feedback R4: careers job cards — stronger contrast/readability ===== */
.personio-job-postings .job-posting {
    background: #ffffff !important;
    border: 1px solid #DFE3EA !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(15,23,42,.06) !important;
}
.personio-job-postings .job-posting:hover {
    border-color: #1DACE4 !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.12) !important;
}
.personio-job-postings .job-posting-title {
    color: #1A1A2E !important;
    font-weight: 700 !important;
}
.personio-job-postings .job-posting-meta {
    color: #4B5563 !important;
}

/* ===== Feedback R4: subtle card animations (icon cards + team cards) ===== */
/* First-load reveal: JS (initCardReveals) adds .tox-card-anim, then .in when the
   card scrolls into view (staggered). */
.tox-card-anim {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.tox-card-anim.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .tox-card-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Hover: gentle lift + zoom on icon boxes… */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
    transform: translateY(-4px) scale(1.02);
}
/* …and image zoom on team cards (featured-image loop items; partner cards keep
   their own hover — different class, untouched). */
.e-loop-item .elementor-widget-theme-post-featured-image img {
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.e-loop-item:hover .elementor-widget-theme-post-featured-image img {
    transform: scale(1.05);
}

/* ===== Feedback R4: video lightbox needs a visible close button ===== */
.elementor-lightbox .dialog-close-button,
.elementor-lightbox .dialog-lightbox-close-button {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute;
    top: 18px; right: 22px;
    z-index: 10;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: rgba(15,23,42,.55) !important;
    border-radius: 50%;
    cursor: pointer;
}
.elementor-lightbox .dialog-close-button i,
.elementor-lightbox .dialog-close-button svg {
    color: #fff !important; fill: #fff !important; font-size: 20px;
}
/* hover lift for the detected icon cards */
.tox-icon-card { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, opacity .6s ease; }
.tox-icon-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 30px rgba(15,23,42,.10); }

/* ===== Feedback R5: "Onboard now" button in the nav bar ===== */
.elementor-element-3e73a56 .tox-onboard-li {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
}
.elementor-element-3e73a56 .tox-onboard-li::before,
.elementor-element-3e73a56 .tox-onboard-li::marker { content: none !important; }
a.tox-nav-onboard {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #2B5CA8 0%, #2278C0 100%);
    color: #ffffff !important;
    font-weight: 700; font-size: 0.82rem; line-height: 1;
    padding: 10px 18px; border-radius: 10px;
    text-decoration: none; white-space: nowrap;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
    box-shadow: 0 4px 14px rgba(43,92,168,.28);
}
a.tox-nav-onboard:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(43,92,168,.4); color:#fff !important; }
/* compact island: slightly smaller pill */
.elementor-location-header.nav-scrolled a.tox-nav-onboard { padding: 8px 15px; font-size: 0.78rem; }

/* "Trade on 21X" — ghost/outline twin (variant A). Sits left of the primary
   Onboard pill: transparent fill, brand-blue outline + label, no shadow. */
a.tox-nav-onboard--ghost {
    background: transparent !important;
    color: #2B5CA8 !important;
    border: 1.5px solid #2B5CA8;
    box-shadow: none !important;
}
a.tox-nav-onboard--ghost:hover {
    background: rgba(43,92,168,.07) !important;
    color: #2B5CA8 !important;
    box-shadow: none !important;
}
.elementor-location-header.nav-scrolled a.tox-nav-onboard--ghost { padding: 6.5px 13.5px; }
/* keep the two CTAs tight together */
.elementor-element-3e73a56 .tox-trade-li { margin-right: -2px; }

/* Compact island (scrolled): with two CTAs the row overflowed the shrunk bar,
   so "Onboard now" poked out past its rounded right edge. The island WIDTH is
   owned by floatingNav.css (widened there 1080 -> 1240). Here we just let the
   inner row use that space and keep the two CTAs slightly more compact. */
.elementor-location-header.nav-scrolled .elementor-element-3e73a56 > .e-con-inner {
    max-width: 1200px !important;
}
.elementor-location-header.nav-scrolled a.tox-nav-onboard {
    padding: 7px 13px !important;
    font-size: 0.75rem !important;
}
.elementor-location-header.nav-scrolled a.tox-nav-onboard--ghost {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
}
/* Mid widths (~1025-1300px, common laptops): the pill shrinks with the
   viewport but the full menu + search + two CTAs need a fixed minimum, so
   "Onboard now" poked out past the pill's right edge. Tighten the gutter, menu
   spacing, search and CTAs so the row fits the narrower island. */
@media (min-width: 1025px) and (max-width: 1300px) {
    .elementor-location-header.nav-scrolled .elementor-element-3e73a56 {
        width: calc(100% - 20px) !important;
    }
    .elementor-location-header.nav-scrolled .elementor-nav-menu .elementor-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    /* icon-only search to reclaim ~75px */
    .elementor-location-header.nav-scrolled .tox-search-toggle {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    .elementor-location-header.nav-scrolled .tox-search-toggle__label {
        display: none !important;
    }
    .elementor-location-header.nav-scrolled a.tox-nav-onboard {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }
    .elementor-location-header.nav-scrolled a.tox-nav-onboard--ghost {
        padding: 5px 9px !important;
        font-size: 0.72rem !important;
    }
}
/* Below ~1120px the desktop nav (six text items + search + two CTAs) can't fit
   the row, so the secondary CTA overflowed. Show only the primary "Onboard now"
   there — the ghost "Trade on 21X" returns at >=1120px where there is room.
   (Restores the single-CTA behaviour that fit before the twin was added.) */
@media (max-width: 1119px) {
    .elementor-element-3e73a56 .tox-trade-li { display: none !important; }
}

/* ===== Feedback R5: homepage more compact (cap giant section paddings) ===== */
body.page-id-44 .elementor-44 > .e-con.e-parent:not(.elementor-element-20c6714) {
    /* R20: war min(60px,5vh) = 50px bei 1000px Hoehe und damit die einzige Seite
       ausserhalb des Rasters. Home bleibt bewusst kompakt, sitzt aber jetzt auf
       der Stufe 64px statt auf einem viewport-abhaengigen Zwischenwert. */
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
body.page-id-44 .elementor-44 > .e-con.e-parent:not(.elementor-element-20c6714) > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Arrow on the primary hero CTA ("Trade →") — slides on hover like the ghost one. */
.tox-hero-cta__btn--primary .tox-hero-cta__arrow {
    display: inline-block;
    margin-left: 2px;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tox-hero-cta__btn--primary:hover .tox-hero-cta__arrow { transform: translateX(4px); }

/* ===== Partner grid: uniform logo box (2026-09) — same rationale as the hero band. */
.partner-logo img {
    width: 100% !important;
    height: 78px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ===== "Why 21X" pillar cards (2026-09) =====
   Matches the Our-Solution card grid, but with the CI blue gradient on the icons
   (the older icon set uses blue→purple, which is off-brand). */
.tox-why { margin-top: 30px; }
.tox-why__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tox-why__card {
    background: #ffffff;
    border: 1px solid #DFE3EA;
    border-radius: 14px;
    padding: 26px 24px 28px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.tox-why__card:hover {
    transform: translateY(-4px);
    /* No blue border on hover (client 2026-09-07) — keep the neutral resting
     * border so these cards match the other hover boxes; lift + shadow stay. */
    box-shadow: 0 14px 30px rgba(15,23,42,.10);
}
.tox-why__ic { display: block; width: 40px; height: 40px; margin-bottom: 18px; }
.tox-why__card h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #2B5CA8;
    line-height: 1.25;
}
.tox-why__card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5F6878;
}
@media (max-width: 1024px) { .tox-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tox-why__grid { grid-template-columns: 1fr; } }
/* Beat the theme's h4 sizing + let the grid use the full content width. */
body .tox-why .tox-why__card h4 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #2B5CA8 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em;
}
body .tox-why .tox-why__card p { font-size: 14.5px !important; line-height: 1.6 !important; color: #5F6878 !important; }
/* the text widget that hosts the cards is width-limited on this section */
#why-21x .elementor-widget-text-editor,
#why-21x .elementor-widget-text-editor > .elementor-widget-container { width: 100% !important; max-width: none !important; }
.tox-why, .tox-why__grid { width: 100%; }

/* ============================================================
   Regulatory archives — "Read →" pill + topic filters in CI (2026-09)
   The "Read →" control is a HEADING widget (9f5b1b2) inside a coloured
   container, not an .elementor-button — so the R4 archive-contrast rule
   (which darkens .elementor-heading-title for readability) turned its label
   black on the blue pill. Exclude it and restyle in brand colours.
   ============================================================ */
body .elementor-element-9f5b1b2 .elementor-widget-container {
    background-color: #2B5CA8 !important;
    background-image: linear-gradient(135deg, #2B5CA8 0%, #2278C0 100%) !important;
    border-radius: 10px !important;
    transition: background-image .25s ease, box-shadow .25s ease, transform .2s ease;
    box-shadow: 0 4px 14px rgba(43, 92, 168, .26);
}
/* label must stay white — beats the archive-contrast rule from R4 */
body .elementor-element-9f5b1b2 .elementor-heading-title,
body.post-type-archive-announcement .elementor-element-9f5b1b2 .elementor-heading-title,
body.post-type-archive-document .elementor-element-9f5b1b2 .elementor-heading-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
}
.e-loop-item:hover .elementor-element-9f5b1b2 .elementor-widget-container {
    background-image: linear-gradient(135deg, #234B8A 0%, #1B6AAE 100%) !important;
    box-shadow: 0 8px 20px rgba(43, 92, 168, .38);
    transform: translateY(-1px);
}

/* Topic filter pills (widget 52a7ff4) — consistent CI look, clear active state. */
body .elementor-element-52a7ff4 .e-filter-item {
    background: #ffffff !important;
    color: #2B5CA8 !important;
    border: 1px solid #CFECFA !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    padding: 9px 18px !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body .elementor-element-52a7ff4 .e-filter-item:hover {
    background: #EAF6FD !important;
    border-color: #1DACE4 !important;
}
body .elementor-element-52a7ff4 .e-filter-item.e-filter-active,
body .elementor-element-52a7ff4 .e-filter-item[aria-pressed="true"] {
    background: linear-gradient(135deg, #2B5CA8 0%, #2278C0 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
/* the pill label sits in a child node — force it too, else white-on-white */
body .elementor-element-52a7ff4 .e-filter-item,
body .elementor-element-52a7ff4 .e-filter-item * {
    color: #2B5CA8 !important;
    -webkit-text-fill-color: #2B5CA8 !important;
}
body .elementor-element-52a7ff4 .e-filter-item.e-filter-active,
body .elementor-element-52a7ff4 .e-filter-item.e-filter-active *,
body .elementor-element-52a7ff4 .e-filter-item[aria-pressed="true"],
body .elementor-element-52a7ff4 .e-filter-item[aria-pressed="true"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ===== Fix: gradient text that faded into white (2026-09-04) =====
   The theme ships `.text-gradient__blue` as #1EA8E1 → #FFFFFF. On the white page
   background the end of the phrase literally disappears, and because the span is
   inline across a wide heading the fade stretches over the whole line.
   Map it onto the same readable brand gradient already used for
   `.text-gradient__pink` (see R4), so both behave identically site-wide.
   Page-scoped hero overrides (body.page-id-44 …) stay more specific and still win. */
.text-gradient__blue {
    background: linear-gradient(90deg, #2b5ca8 0%, #1dace4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Team photos are CSS background-images on the card container, not <img>, so the
   crop is controlled via background-position (below) — an object-fit rule here
   would only hit the partner-logo images and crop those instead. */
.e-loop-item .elementor-element-421ba7d {
    background-position: center 18% !important;
}

/* ============================================================
   Partners (final checklist §6) — 2026-09-05
   ============================================================ */
/* Filter order must be: Capital Markets → Tokenization → Blockchain →
   Stablecoin → Service Provider. The widget renders terms alphabetically,
   so we re-order the flex row instead of touching term data. */
.elementor-widget-taxonomy-filter .e-filter,
.e-filter {
    display: flex !important;
    flex-wrap: wrap;
}
.e-filter-item[data-filter="__all"]           { order: -1 !important; } /* ALL first on every filter (announcements, media, partners, team) */
.e-filter-item[data-filter="capital-markets"] { order: 1 !important; }
.e-filter-item[data-filter="tokenization"]    { order: 2 !important; }
.e-filter-item[data-filter="blockchain"]      { order: 3 !important; }
.e-filter-item[data-filter="stablecoin"]      { order: 4 !important; }
.e-filter-item[data-filter="service-provider"]{ order: 5 !important; }

/* Uniform logo size on the partner cards (they ranged 76–246px wide).
   Same approach as the hero band: one box, object-fit letterboxes inside. */
.partner-logo img {
    width: 190px !important;
    height: 78px !important;
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   Section rhythm & consistency (client feedback 2026-09-05)
   ============================================================ */
/* (a) Our Story centred its Mission/Vision/Solution blocks while every other page
   is left-aligned — the inconsistency was inherited when those sections were cloned.
   Align the whole page with the rest of the site. */
body.page-id-46 #mission > .e-con-inner,
body.page-id-46 #vision  > .e-con-inner,
body.page-id-46 #solution > .e-con-inner {
    align-items: flex-start !important;
}
body.page-id-46 #mission .elementor-heading-title,
body.page-id-46 #vision  .elementor-heading-title,
body.page-id-46 #solution .elementor-heading-title {
    text-align: left !important;
}

/* (b) Section labels ("OUR VISION", "Why 21X" …) must read as a category marker so
   each block is recognisable as its own section while scrolling — they matched the
   headline too closely in weight. Smaller, wider tracked, with a short accent rule. */
/* Section labels render as <span class="elementor-heading-title">, the headlines as
   <h1>–<h3> — so the span is a reliable, site-wide hook for the eyebrow. Smaller and
   wider-tracked with a short accent rule, so each block reads as its own section
   while scrolling (client: sections weren't distinguishable from their headline). */
span.elementor-heading-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: #2278C0 !important;
    display: inline-block !important;
    padding-top: 12px !important;
    border-top: 2px solid #1DACE4 !important;
    margin-bottom: 4px !important;
}
/* not inside the hero (white on video) and not inside cards */
body.page-id-44 .elementor-element-20c6714 span.elementor-heading-title,
.e-loop-item span.elementor-heading-title,
.tox-dg span.elementor-heading-title {
    border-top: none !important;
    padding-top: 0 !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    color: inherit !important;
    display: inline !important;
}

/* --- Partner logos: compensate for compact aspect ratios (client 2026-09-05) ---
   With one fixed box (190×78) a square mark only reaches 78px wide while a wide
   wordmark fills 190px, so compact logos read as "too small". Give those specific
   marks more height so their optical area matches. */
/* Hacken + Chainlink were in this list too; client (HubSpot sheet 2026-09):
   "too big - does not align". Chainlink is now a cropped wide wordmark and
   Hacken reads oversized at 108px, so both use the standard 78px box again. */
.partner-logo img[src*="zuehlke"] {
    height: 108px !important;
}
.partner-logo img[src*="cordial"] {
    height: 92px !important;
}
/* Hacken's brand colour (#3EF2D0, light mint) nearly disappears under the muted
   greyscale treatment — keep it darker and less transparent in the resting state. */
.partner-logo img[src*="hacken"] {
    opacity: .78 !important;
    filter: grayscale(1) brightness(.62) contrast(1.15) !important;
}
.partner-logo:hover img[src*="hacken"] {
    opacity: 1 !important;
    filter: grayscale(0) brightness(1) contrast(1) !important;
}

/* ============================================================
   Footer "Stay informed" card — floats over the white/footer seam
   (client 2026-09-07, DDT-style overlap).
   Structure: band 1887e72 (was a full-width light strip) wraps the centred
   card 5ed47ee (heading + subscribe form); dark columns are 744fc28 (#0F172A).
   Move the light surface from the band onto the card so only the card shows,
   give it a shadow, and pull the dark footer up so the card straddles the seam.
   ============================================================ */
.elementor-4090 .elementor-element.elementor-element-1887e72 {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    position: relative !important;
    z-index: 3 !important;
}
.elementor-4090 .elementor-element.elementor-element-5ed47ee {
    /* keep the exact light surface the text was already readable on */
    background-color: #f8fafc !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
}
/* Desktop: overlap the seam. Pull the footer up under the card, and grow the
   footer's top padding so its columns clear the overlapping card. */
@media (min-width: 1025px) {
    .elementor-4090 .elementor-element.elementor-element-1887e72 {
        margin-bottom: -104px !important;
    }
    .elementor-4090 .elementor-element.elementor-element-744fc28 {
        padding-top: calc(var(--spacing-medium, 40px) + 128px) !important;
    }
}

/* ============================================================
   Form <select> dropdowns: render in the light CI, not dark.
   The native option list was drawing dark (color-scheme:dark inherited),
   even though the closed field is light (#F3F4F6). Force light color-scheme
   + explicit light options so the open list matches the brand. (client 2026-09-07)
   ============================================================ */
.elementor-field-group .elementor-select-wrapper select,
.elementor-field-group select.elementor-field-textual,
select.elementor-field-textual {
    color-scheme: light !important;
    background-color: #F3F4F6 !important;
    color: #1F2937 !important;
}
.elementor-field-group .elementor-select-wrapper select option,
select.elementor-field-textual option {
    background-color: #ffffff !important;
    color: #0F172A !important;
}

/* ============================================================
   Services (3367) tab feature lists — unify checkmark icons (2026-09).
   The source SVGs are off-brand: checkmark_small_white.svg is hard-filled
   #FFFFFF (invisible on the light tab panels — looked "missing" in the
   Issuers tab) and checkmark_small.svg carries a blue->purple gradient
   (#2DA1DA -> #A91DB8). Force one CI brand-blue fill on the inline SVG +
   its paths, and collapse the gradient stops, so every tab reads the same.
   ============================================================ */
body.page-id-3367 .elementor-widget-icon-list .elementor-icon-list-icon svg,
body.page-id-3367 .elementor-widget-icon-list .elementor-icon-list-icon svg path {
    fill: #1EA8E1 !important;
}
body.page-id-3367 .elementor-widget-icon-list .elementor-icon-list-icon svg stop {
    stop-color: #1EA8E1 !important;
}

/* ============================================================
   Footer column titles (2026-09) — keep a controlled size so they don't
   balloon and wrap awkwardly ("Regulator y", "Products & / Services") when
   the window is not maximised. Pin the heading size across widths.
   ============================================================ */
.elementor-element-38efe45 .elementor-heading-title,
.elementor-element-be54a3b .elementor-heading-title,
.elementor-element-18425a4 .elementor-heading-title,
.elementor-element-d6f422e .elementor-heading-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}
@media (max-width: 1200px) {
    .elementor-element-38efe45 .elementor-heading-title,
    .elementor-element-be54a3b .elementor-heading-title,
    .elementor-element-18425a4 .elementor-heading-title,
    .elementor-element-d6f422e .elementor-heading-title {
        font-size: 16px !important;
    }
}

/* Technology (2924) order-book animation is a light/white loop on a light
   page — lift it with a soft shadow so it reads as a distinct panel. */
.tox-arch-video {
    box-shadow: 0 14px 44px rgba(15, 23, 42, .16) !important;
    border: 1px solid rgba(15, 23, 42, .06) !important;
    border-radius: 14px !important;
}
/* Round the video's widget box + any hover overlay to match the 14px video
   corners, so nothing square shows around the animation on hover. */
.elementor-element-95cf8e9 > .elementor-widget-container,
.elementor-element-95cf8e9 .elementor-widget-container > * {
    border-radius: 14px !important;
}

/* ============================================================
   Homepage (44) hero CTAs — two glass / ghost pills on the dark video
   (2026-09). Primary "Trade on 21X" = blue glass with sheen + glow,
   secondary "Onboard now" = translucent white-outline. Uppercase display.
   Scoped to page 44 so the light-hero CTA styling elsewhere is untouched.
   ============================================================ */
body.page-id-44 .tox-hero-cta { gap: 18px !important; margin-top: 30px !important; }
body.page-id-44 .tox-hero-cta__btn {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 18px 34px !important;
    border-radius: 14px !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.page-id-44 .tox-hero-cta__btn--primary,
body.page-id-44 .tox-hero-cta__btn--primary:focus {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    background: linear-gradient(135deg, rgba(43,92,168,0.55), rgba(29,172,228,0.35)) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 10px 34px rgba(29,120,220,0.45), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
body.page-id-44 .tox-hero-cta__btn--primary:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, rgba(43,92,168,0.72), rgba(29,172,228,0.5)) !important;
    box-shadow: 0 14px 40px rgba(29,120,220,0.6), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
body.page-id-44 .tox-hero-cta__btn--ghost,
body.page-id-44 .tox-hero-cta__btn--ghost:focus {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.55) !important;
    padding: 16.5px 32.5px !important;
}
body.page-id-44 .tox-hero-cta__btn--ghost:hover {
    transform: translateY(-2px) !important;
    background: rgba(255,255,255,0.14) !important;
    border-color: #ffffff !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
body.page-id-44 .tox-hero-cta__btn:hover .tox-hero-cta__arrow { transform: translateX(4px); }

/* Footer link columns — equal width + even spacing (2026-09).
   Container 71d291c was flex/justify-center with no gap, so the auto-width
   columns clustered with uneven gaps. Make the 4 columns equal (flex:1) with a
   consistent gap so the spacing between Our story / Products & services / Media
   / Regulatory is uniform. */
@media (min-width: 1025px) {
    .elementor-element-71d291c {
        justify-content: flex-start !important;
        gap: 32px !important;
    }
    .elementor-element-71d291c > .elementor-element {
        flex: 1 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* Footer: the first column ("Our story") has short words, leaving a wide visual
   gap before column 2 even though the equal cells are mathematically correct.
   Nudge column 2 (and the columns after it) left a touch for visual balance.
   Desktop only — the columns stack on mobile. */
@media (min-width: 1025px) {
    .elementor-element-5d04e6b { margin-left: -44px !important; }
}

/* Collapsed island: the 21X logo's ink sat ~4px above the pill's vertical
   centre (the menu text is centred). Nudge it down to optically centre it. */
.elementor-location-header.nav-scrolled .elementor-element-1323797 img {
    transform: translateY(4px);
}

/* Contact popups (274 site-wide, 3395 Services): the fixed header (z-index 10000)
   sat ON TOP of the popup (9999), hiding its close button — "form cannot be closed".
   Lift the popup above the header and make the close button obvious. */
.elementor-popup-modal { z-index: 100001 !important; }
.elementor-popup-modal .dialog-close-button {
    width: 40px !important; height: 40px !important;
    top: 18px !important; right: 18px !important;
    display: flex !important; align-items: center; justify-content: center;
    background: #ffffff !important; border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18) !important;
    color: #0F172A !important; font-size: 18px !important; opacity: 1 !important;
    z-index: 5 !important; cursor: pointer;
}
.elementor-popup-modal .dialog-close-button svg { width: 16px !important; height: 16px !important; fill: #0F172A !important; }
.elementor-popup-modal .dialog-close-button:hover { background: #EAF6FD !important; }

/* Partner cards (loop item 367): the press-release / website icon buttons turn
   blue on hover (Elementor framed icon), but the glyph stayed dark. Glyph goes
   white on the blue box, like the other dark buttons. */
.partner-links .elementor-icon:hover,
.partner-links .elementor-icon:focus-visible { color: #fff !important; }
.partner-links .elementor-icon:hover svg,
.partner-links .elementor-icon:focus-visible svg { fill: #fff !important; color: #fff !important; }