/* Floating Island Nav - light mode */

/* Height reserved by the top news ticker (§10). 0 when absent or collapsed;
 * the ticker script sets it to its pixel height when expanded. Everything below
 * offsets by it so the ticker sits above the nav. */
:root {
    --tox-ticker-h: 0px;
}

/* The Elementor header wrapper - no longer fixed as a whole */
.elementor-location-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: transparent !important;
}

/* Info stripe (89c8fec) - sits below nav, scrolls with page, behind nav */
.elementor-element-89c8fec {
    position: absolute !important;
    left: 0;
    right: 0;
    z-index: 1 !important;
    justify-content: center !important;
    text-align: center;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    font-size: 0.75rem;
    min-height: 0 !important;
}
.elementor-element-89c8fec .elementor-widget {
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-element-89c8fec .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.elementor-element-89c8fec,
.elementor-element-89c8fec *,
.elementor-element-89c8fec .elementor-heading-title,
.elementor-element-89c8fec .elementor-widget-container,
.elementor-element-89c8fec .elementor-button,
.elementor-element-89c8fec .elementor-button-text,
.elementor-element-89c8fec span,
.elementor-element-89c8fec div,
.elementor-element-89c8fec a {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
}
.elementor-element-89c8fec a:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Info stripe layout: text centered, buttons right-aligned */
.elementor-element-89c8fec {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
}
.elementor-element-89c8fec > .elementor-element:first-of-type {
    position: absolute !important;
    left: 0;
    right: 0;
    text-align: center !important;
    pointer-events: none;
}
.elementor-element-89c8fec > .elementor-element:first-of-type a {
    pointer-events: auto;
}
.elementor-element-89c8fec > .elementor-element:first-of-type .elementor-heading-title::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.elementor-element-89c8fec > .elementor-element:last-of-type {
    margin-left: auto !important;
    position: relative;
    z-index: 1;
}

/* Nav bar (3e73a56) - fixed to viewport, always above info stripe.
 * Offset down by the ticker height so the ticker stays above the menu. */
.elementor-location-header .elementor-element.elementor-element-3e73a56 {
    position: fixed !important;
    top: var(--tox-ticker-h, 0px);
    left: 0;
    right: 0;
    /* Centre with auto side-margins in BOTH states so the bar stays exactly
     * centred while its WIDTH animates. (The old code jumped because margin went
     * 0 -> auto and max-width none -> 1080px, neither of which is animatable.) */
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    z-index: 10002 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Resting: 90% opaque + glass blur. Turns fully opaque on hover (below). */
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}
/* Fully opaque while the pointer is over the bar. */
.elementor-location-header .elementor-element.elementor-element-3e73a56:hover {
    background: #ffffff !important;
    backdrop-filter: saturate(140%) blur(2px);
    -webkit-backdrop-filter: saturate(140%) blur(2px);
}

/* === SCROLLED STATE === */

/* On scroll the bar "converges" into a centred floating glass island — semi-transparent
 * + backdrop-blur, rounded, lifted off the page. (Restored 2026-08.) The 0.4s all-
 * transition on the bar animates the contraction. */
.elementor-location-header.nav-scrolled .elementor-element-3e73a56 {
    /* Animate WIDTH (not max-width); side-margins stay auto so it contracts
     * symmetrically from centre. left/right:0 inherited from the base rule.
     * Widened 1080 -> 1240 so the menu + search + both CTAs fit inside. */
    width: min(1240px, calc(100% - 32px)) !important;
    margin: 12px auto !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 12px 38px rgba(15, 23, 42, 0.20) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: saturate(170%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(170%) blur(18px) !important;
}
/* Turn fully opaque on hover so the menu is crisp when you interact with it. */
.elementor-location-header.nav-scrolled .elementor-element-3e73a56:hover {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Hide the background image element */
.elementor-element-023eb8a {
    display: none !important;
}

/* Nav bar inner layout: logo left, menu center, button right */
.elementor-element-3e73a56 .e-con-inner,
.elementor-element-3e73a56 > .e-con-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* Elementor flex containers default to flex-wrap:wrap; with the Invest-Now
     * button removed the injected search pill was wrapping onto a 2nd line. Keep
     * the whole bar on one line — the menu (min-width:0) absorbs any tight fit. */
    flex-wrap: nowrap !important;
}

/* Nav items: logo fixed width left, menu centered, button fixed width right */
/* The logo widget ships as position:absolute (elementor-absolute + translateY -50%),
 * so it takes no space in the flex row — when the bar contracts into the island pill
 * the centred menu slides underneath it and overlaps the 21X mark. Pull the logo back
 * into the flex flow so it reserves its own slot; the menu then centres in the space
 * that's left and can never run into the logo. */
/* High-specificity selector (4 classes) so it beats Elementor's own
 * `.elementor-element-1323797.e-transform { transform: translateY(-50%) }` and
 * `.elementor-absolute { position:absolute }` regardless of stylesheet order. */
.elementor-location-header .elementor-element-3e73a56 .elementor-element-1323797.elementor-absolute,
.elementor-location-header .elementor-element-3e73a56 .elementor-element-1323797.e-transform,
.elementor-element-3e73a56 .elementor-element-1323797 {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    align-self: center !important;
    /* Vertically centre the logo image within the bar */
    display: flex !important;
    align-items: center !important;
    margin: 0 16px 0 0 !important;
}
.elementor-element-3e73a56 .elementor-element-1323797 .elementor-widget-container,
.elementor-element-3e73a56 .elementor-element-1323797 img {
    margin: 0 !important;
    display: block !important;
}
/* Elementor puts the `translateY(-50%)` vertical-centre trick on the widget's
 * INNER container (via --e-transform-translateY), not the widget itself — that
 * shift was pulling the logo up above centre. Kill it; flex align-self:center
 * (above) now does the vertical centring cleanly. */
.elementor-location-header .elementor-element-3e73a56 .elementor-element-1323797 > .elementor-widget-container {
    --e-transform-translateY: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
}
/* Centre menu in the remaining space; never let it wrap onto a second line
 * (that broke a menu item off when the bar contracts into the island pill). */
.elementor-element-3e73a56 .elementor-element-4b2854b {
    min-width: 0 !important;
}
.elementor-element-3e73a56 .elementor-element-4b2854b .elementor-nav-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.elementor-element-3e73a56 .elementor-element-4b2854b .elementor-nav-menu > li > a.elementor-item {
    padding-left: 11px !important;
    padding-right: 11px !important;
}
.elementor-element-3e73a56 .elementor-element-4b2854b {
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-self: center !important;
}
.elementor-element-3e73a56 .e-con-inner {
    align-items: center !important;
}
.elementor-element-3e73a56 .elementor-element-4b2854b .elementor-nav-menu {
    justify-content: center !important;
}
.elementor-element-3e73a56 .elementor-element-inv_btn1 {
    flex: 0 0 auto !important;
}
.elementor-element-inv_btn1 .elementor-button {
    padding: 8px 20px !important;
    font-size: 0.8rem !important;
}

/* Pages start below the fixed nav + info stripe (+ ticker when expanded) */
.elementor-location-header + * {
    margin-top: calc(120px + var(--tox-ticker-h, 0px)) !important;
}
/* Homepage hero starts at page top (behind nav), only pushed by the ticker */
body.page-id-44 .elementor-location-header + * {
    margin-top: var(--tox-ticker-h, 0px) !important;
}

/* ============================================================
   Menu polish — glassy submenus + a gliding glass highlight
   ============================================================ */

/* Submenus (dropdowns): 90% opaque + real glass blur, rounded, floating. */
.elementor-element-4b2854b .sub-menu,
.elementor-nav-menu--main .sub-menu,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: saturate(150%) blur(14px);
            backdrop-filter: saturate(150%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16) !important;
    overflow: hidden;
    padding: 6px !important;
}
.elementor-element-4b2854b .sub-menu .elementor-sub-item,
.elementor-nav-menu--main .sub-menu .elementor-sub-item {
    background: transparent !important;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}
.elementor-element-4b2854b .sub-menu .elementor-sub-item:hover,
.elementor-nav-menu--main .sub-menu .elementor-sub-item:hover {
    background: rgba(43, 92, 168, 0.10) !important;
    color: #2b5ca8 !important;
}
/* Centre the top-level dropdowns under their menu item — Elementor defaults to
   left:0 (aligned to the item's left edge), which reads as "shifted left".
   Desktop only; the parent <li> is position:relative (set below). client 2026-09-07 */
@media (min-width: 1025px) {
    .elementor-element-4b2854b .elementor-nav-menu > li > .sub-menu,
    .elementor-element-4b2854b .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* Gliding glass highlight that follows the hovered top-level item. The pill's
   left/width are set by JS (initNavGlass in redesign-v2.js) and CSS-transitioned,
   so it slides + resizes from item to item as the pointer moves across the menu. */
.elementor-element-4b2854b .elementor-nav-menu {
    position: relative;
}
.elementor-element-4b2854b .elementor-nav-menu > li {
    position: relative;
    z-index: 1; /* keep the labels above the glass pill */
}
.tox-nav-glass {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 70%;
    transform: translateY(-50%);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
            backdrop-filter: blur(8px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}

/* ============================================================
   Collapsed island (nav-scrolled) — compact height + logo cropped to "X"
   (2026-08-16). Only applies once the bar contracts into the glass island.
   ============================================================ */
/* Vertically compress the island to ~half height by shrinking the tallest items
   (search pill + menu padding) — height stays auto so nothing overflows the bar. */
.elementor-location-header.nav-scrolled .elementor-element.elementor-element-3e73a56 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* the bar ships with min-height:80px (--min-height) — that was the bulk */
    min-height: 42px !important;
    --min-height: 42px !important;
}
.elementor-location-header.nav-scrolled .elementor-element-3e73a56 > .e-con-inner {
    min-height: 0 !important;
    align-items: center !important;
    /* Elementor puts ~24px block padding here — that was the bulk. Halve the bar. */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.elementor-location-header.nav-scrolled .elementor-element-4b2854b .elementor-nav-menu > li > a.elementor-item {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    line-height: 1.2 !important;
}
/* The search pill is the tallest element (40px) — shrink it so the bar can be short. */
.elementor-location-header.nav-scrolled .tox-search-toggle {
    height: 28px !important;
    padding: 0 0.7rem !important;
}
.elementor-location-header.nav-scrolled .tox-search-toggle svg {
    width: 15px !important;
    height: 15px !important;
}

/* Collapsed logo: keep the FULL 21X wordmark (just a touch smaller for the short
   bar). No crop-to-X. Height animates smoothly with the bar. */
.elementor-element-3e73a56 .elementor-element-1323797 img {
    transition: height .35s cubic-bezier(.4,0,.2,1);
}
.elementor-location-header.nav-scrolled .elementor-element-1323797 img {
    height: 22px !important;
    width: auto !important;
}

/* ============================================================
   Unified nav bar (2026-09) — identical height on every page.
   The homepage briefly inherited the page-compaction padding (137px);
   other templates rendered 80/99px. Pin one geometry everywhere.
   ============================================================ */
.elementor-location-header .elementor-element.elementor-element-3e73a56 {
    min-height: 72px !important;
    --min-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.elementor-location-header .elementor-element-3e73a56 > .e-con-inner {
    min-height: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Logo keeps one size across templates. */
.elementor-location-header:not(.nav-scrolled) .elementor-element-1323797 img {
    height: 30px !important;
    width: auto !important;
}
/* Some templates (e.g. the Corporate Design page) let a theme/block default
   `ul { margin: 18px 0 }` reach the nav menu, making the bar 99px there.
   Neutralise it so every page renders the identical 72px bar. */
.elementor-location-header .elementor-nav-menu,
.elementor-element-3e73a56 ul.elementor-nav-menu {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   Submenus: really blur the page behind them (2026-09)
   The earlier rule already set backdrop-filter, but the 90%-opaque background
   hid the effect. Drop the opacity so the blurred page shows through.
   Verified in Chromium: the nav bar's own backdrop-filter does NOT prevent this,
   so no backdrop-root workaround is needed.
   ============================================================ */
/* Solid, not translucent (client 2026-09-05): the blurred/transparent panel changed
   appearance a moment after opening (the nav bar's own blur had to be toggled off for
   the backdrop-filter to work). A solid panel removes that flicker entirely — and the
   whole backdrop-root workaround with it. */
.elementor-element-4b2854b .sub-menu,
.elementor-nav-menu--main .sub-menu,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border: 1px solid #E4E9F0 !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
}

/* Keep submenu labels crisp on the translucent panel. */
.elementor-element-4b2854b .sub-menu .elementor-sub-item,
.elementor-nav-menu--main .sub-menu .elementor-sub-item,
.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item {
    color: #1A1A2E !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}