/* ==========================================================================
   site.css
   Shared / common styles extracted from the designer's HTML mockups.
   Rules here appeared byte-for-byte (or functionally) identical across
   index.html, article.html, news.html and search-results.html.

   Anything that differed between pages (body background/line-height,
   .page-wrapper background, hero/section-specific styles) was LEFT in each
   page's own <style> block rather than guessed at here. See the "Notes for
   the designer" section at the bottom of this file.
   ========================================================================== */


:root {
    /* Base Colors */
    /* --color-amethyst: #3F2A71;
        --color-stone: #B3B6B3;
        --color-violet: #D1BDF0;
        --color-dusk: #E8955F;
        --color-rise: #FCC99A;
        --azimut-navy: #30296E;
        --color-white: #FFFFFF;
        --creatik-grey: #EBE1F7;        
        --color-peach: #FDC390;
        --color-peach2: #E88C5B;
    */

    --color-amethyst-rgb: 63, 42, 113;
    --color-stone-rgb: 179, 182, 179;
    --color-violet-rgb: 209, 189, 240;
    --color-dusk-rgb: 232, 149, 95;
    --color-rise-rgb: 252, 201, 154;
    --azimut-navy-rgb: 48, 41, 110;
    --color-white-rgb: 255, 255, 255;
    --creatik-grey-rgb: 235, 225, 247;
    --color-white-rgb: 255,255,255;
    --color-peach-rgb: 253, 195, 144;
    --color-peach-rgb-2: 232, 140, 91;
    /* 100% Opacity Variants */
    --color-amethyst: rgb(var(--color-amethyst-rgb));
    --color-stone: rgb(var(--color-stone-rgb));
    --color-violet: rgb(var(--color-violet-rgb));
    --color-dusk: rgb(var(--color-dusk-rgb));
    --color-rise: rgb(var(--color-rise-rgb));
    --azimut-navy: rgb(var(--azimut-navy-rgb));
    --color-white: rgb(var(--color-white-rgb));
    --creatik-grey: rgb(var(--creatik-grey-rgb));
    --color-peach: rgba(var(--color-peach-rgb));
    --color-peach-2: rgba(var(--color-peach-rgb-2));
    /* 100% Transparency Variants for Blending */
    --azimut-navy-blend: rgba(var(--azimut-navy-rgb), 1);
    /* Opacity Variants */
    --color-stone-40: rgba(var(--color-stone-rgb), 0.4);
    /* Layout */
    --container-max: 1600px;
    --max-width: 1600px; /* alias used by news.html/search-results.html */
}

/* BACKGROUND CLASSES */
.bg-amethyst { background-color: var(--color-amethyst); }
.bg-stone { background-color: var(--color-stone); }
.bg-violet { background-color: var(--color-violet); }
.bg-dusk { background-color: var(--color-dusk); }
.bg-rise { background-color: var(--color-rise); }
.bg-azimut-navy { background-color: var(--azimut-navy); }
.bg-white { background-color: var(--color-white); }
.bg-creatik-grey { background-color: var(--creatik-grey); }

/* TEXT COLOR CLASSES */
.text-amethyst { color: var(--color-amethyst); }
.text-stone { color: var(--color-stone); }
.text-violet { color: var(--color-violet); }
.text-dusk { color: var(--color-dusk); }
.text-rise { color: var(--color-rise); }
.text-azimut-navy { color: var(--azimut-navy); }
.text-white { color: var(--color-white); }
.text-peach { color: var(--color-peach); }
.text-peach2 { color: var(--color-peach2); }
.border-azimut-navy { border-color: var(--azimut-navy); }

body {
    font-family: 'Barlow', sans-serif;
    color: #333;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6, .heading-font, nav {
    font-family: 'Jost', sans-serif;
    letter-spacing: 0px !important;
    -webkit-font-feature-settings: "ss01" 1;
    font-feature-settings: "ss01" 1;
}

.btn-primary {
    background-color: var(--color-rise);
    color: var(--color-amethyst);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--color-dusk);
    color: white;
}

/* ---------- HEADER ---------- */
/* Default (unscrolled) state used to be fully transparent, which only reads
   well on pages whose hero has a dark background baked in (Default,
   .article-hero pages). AboutUs.aspx/AdviserLogin.aspx/TeamIndividual.aspx
   have light hero areas up top, so the white logo/nav text was unreadable
   there until the user scrolled and the "scrolled" (white bg) state kicked
   in. A soft semi-transparent navy tint fixes that everywhere at once,
   without touching any page's own hero design - on dark heroes it's
   essentially invisible (dark on dark), on light heroes it reads as a
   soft frosted navy bar. */
#main-header {
    background-color: rgba(48, 41, 110, 0.35);
    color: white;
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    z-index: 100;
}

#main-header.scrolled {
    background-color: white;
    color: var(--azimut-navy);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

#main-header.scrolled .nav-link { color: var(--azimut-navy); }
#main-header.scrolled .nav-icon { color: var(--azimut-navy); }

/* "Talk to our team" button between the nav and the search icon. White
   outline over the tinted header, navy once the header turns white on
   scroll; fills orange on hover either way. */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /*padding: 0.5rem 1rem;*/
    padding: 15px 32px;
    /*border: 1px solid white;*/
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    line-height: 28px;
    font-family: 'Jost', sans-serif;
    /*font-size: 0.8125rem;*/
    font-weight: 600;
    font-size: 18px;
    /*letter-spacing: 0.05em;*/
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Jost sits high in its line box (big ascent, small descent), so all-caps
   text looks top-heavy - drop it 1px to centre it optically. */
/* Phones: smaller text and padding so longer labels fit the screen width;
   wraps rather than overflowing on very narrow screens. (The header CTA is
   desktop-only, so this only touches in-page buttons.) */
@media (max-width: 639px) {
    .nav-cta {
        font-size: 14px;
        line-height: 22px;
        padding: 12px 20px;
        white-space: normal;
    }
}
.nav-cta span { position: relative; top: 1px; }
.nav-cta i { font-size: 1rem; transition: transform 0.3s ease; }
.nav-cta:hover i { transform: translateX(4px); }
#main-header.scrolled .nav-cta,
.adviser-login .nav-cta { border-color: var(--azimut-navy); color: var(--azimut-navy); }
.nav-cta:hover,
#main-header.scrolled .nav-cta:hover,
.adviser-login .nav-cta:hover { background-color: var(--color-dusk); border-color: var(--color-dusk); color: white; }

/* Compact header once the page is scrolled: the site-wide banner is hidden,
   and on desktop the nav row drops from 80px (h-20) to 56px with the
   logo scaled down to suit. */
#main-header.scrolled .siteWideMessage { display: none; }

@media (min-width: 1024px) {
    #main-header.scrolled #header-inner { height: 3.5rem; }
    #main-header.scrolled #nav-logo { height: 2.25rem; }
}

/* ---------- STANDARD DROPDOWN (simple 2-3 item submenu) ---------- */
/* Deliberately a separate component from .nav-item-dropdown/.mega-menu
   above rather than a reuse of it - the mega-menu's wrapper is
   "position: static" on purpose so the panel can escape it and go
   full-width (100vw). A standard dropdown wants the opposite: the wrapper
   establishes its own positioning context so the panel anchors directly
   under the trigger instead of spanning the page. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: white;
    color: var(--azimut-navy);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-top: 2px solid var(--color-dusk);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 0.5rem 0;
}

.nav-dropdown:hover > .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.nav-dropdown-link {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--azimut-navy);
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.nav-dropdown-link:hover {
    color: var(--color-dusk);
    padding-left: 1.75rem;
}

.nav-dropdown-link::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 1.5rem;
    width: 0;
    height: 1px;
    background-color: var(--color-dusk);
    transition: width 0.3s ease;
}

.nav-dropdown-link:hover::after {
    width: calc(100% - 3.25rem);
}

/* Second-tier flyout - e.g. Our Team > Team Member. Reuses .nav-dropdown-menu
   as its base (same look/animation) via the modifier class below, which
   only repositions it to open sideways off its parent row instead of
   downward off the top-level trigger. ".nav-dropdown-sub" gives that row
   its own positioning context so the flyout anchors to the row itself,
   and the ">" (direct child) combinators below keep hovering the outer
   trigger from also revealing a nested flyout it doesn't own. */
.nav-dropdown-sub {
    position: relative;
}

.nav-dropdown-link-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-dropdown-caret {
    font-size: 16px;
    margin-left: 0.75rem;
    transition: transform 0.2s ease;
}

.nav-dropdown-sub:hover .nav-dropdown-caret {
    transform: translateX(2px);
}

.nav-dropdown-menu-tier2 {
    top: 0;
    left: 100%;
}

.nav-dropdown-sub:hover > .nav-dropdown-menu-tier2 {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* ---------- MEGA MENU ---------- */
.nav-item-dropdown {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background-color: white;
    color: var(--azimut-navy);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-top: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    z-index: 100;
}

.nav-item-dropdown:hover .mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.mega-menu-link {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.mega-menu-link:hover {
    color: var(--color-dusk);
    padding-left: 8px;
}

.mega-menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-dusk);
    transition: width 0.3s ease;
}

.mega-menu-link:hover::after {
    width: 100%;
}

/* ---------- MOBILE MENU OVERLAY ---------- */
/* NOTE: source pages disagreed on z-index (99 vs 40) and top padding
   (120px vs 160px). Standardized here on z-index:99 / padding:120px 40px 40px
   (the index.html/article.html values) since 99 keeps it safely above page
   content but below the toggle button (110). Flag to designer if 160px top
   padding was intentional for the news/search template family. */
#mobile-menu {
    position: fixed;
    inset: 0;
    background-color: var(--azimut-navy);
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    padding: 120px 40px 40px;
    overflow-y: auto;
}
#mobile-menu.active {
    transform: translateX(0);
}

/* HAMBURGER TO X ANIMATION */
.hamburger {
    width: 30px;
    height: 22px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 110;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* X State (class applied to <body>) */
body.menu-active .hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
    background-color: white !important;
}
body.menu-active .hamburger span:nth-child(2) {
    opacity: 0;
}
body.menu-active .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    background-color: white !important;
}

/* ---------- FILTER BUTTONS (news / article / search grids) ---------- */
.filter-btn {
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}
.filter-btn.active {
    color: var(--azimut-navy);
    border-bottom-color: var(--color-dusk);
}

main#portfolioSection .filter-btn:not(.active):hover {
    background-color: var(--color-dusk) !important;
    color: #fff !important;
}

/* ---------- SHARED CARD/PLAY ICON PATTERN ---------- */
.video-card {
    background-color: transparent;
    transition: all 0.4s ease;
}
.play-icon-box {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: var(--azimut-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}
.video-card:hover .play-icon-box {
    background-color: var(--color-dusk);
    transform: scale(1.1);
}

/* ---------- TEAM CARD IMAGE HOVER ---------- */
/* Used on Team.aspx and (the about-us.html "Our Team" section). */
.team-card-image {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover .team-card-image {
    transform: scale(1.05);
}

/* ---------- ARTICLE HERO ---------- */
/* Confirmed byte-identical across News.aspx, Contact.aspx, SearchResults.aspx,
   AwardsRatings.aspx and Article.aspx, so promoted here from being repeated
   on every page. */
.article-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(48, 41, 110, 0.95) 0%, rgba(48, 41, 110, 0.7) 100%);
    z-index: 1;
}

/* ---------- ARTICLE HERO (mobile fix) ---------- */
/* background-attachment:fixed (set per-page on .article-hero) is unreliable
   and janky on mobile browsers, so this override is centralized here and
   applies to every page using .article-hero, regardless of which page's
   <style> block defines the base rule. Originally only found on
   awards-ratings.html; promoted here per the client's confirmation. */
@media (max-width: 1024px) {
    .article-hero {
        background-attachment: scroll;
    }
}

/* ==========================================================================
   PROMOTED FROM custom.css (retired 08/07/2026)
   custom.css turned out to be ~95% duplicate of the rules above (mega-menu,
   hamburger, mobile-menu, bg-/text- utilities, typography, .btn-primary) -
   just re-declared under a ".contact"/".adviser-login"/".about-us-page" body
   class prefix that was never actually needed, since those rules are
   already global. That's the bulk of what "removing it didn't seem to
   break anything" was catching.

   It also had a handful of rules that WERE genuinely unique and NOT
   duplicated anywhere else - those are promoted below rather than lost.
   ========================================================================== */

/* ---------- CONTACT / TEAM-INDIVIDUAL SHARED (".contact" body class) ---------- */
/* Contact.aspx and TeamIndividual.aspx both use BodyCssClass="contact".
   TeamIndividual.aspx has no PageStyles of its own and depends entirely on
   these three rules (.page-wrapper, .form-input light theme, .contact-card)
   - it will look broken without them. */
.contact body,
body.contact {
    line-height: 1.4;
}

.contact .page-wrapper {
    margin: 0 auto;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

/* Light theme - correct for TeamIndividual.aspx's form (sits on a white
   card). Contact.aspx's own PageStyles defines a dark override of this same
   selector that loads after this file, so it still correctly wins there -
   no conflict, same as before custom.css was removed. */
.contact .form-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    transition: all 0.3s ease;
}
.contact .form-input:focus {
    outline: none;
    border-color: var(--azimut-navy);
    background-color: #fff;
}

.contact .contact-card {
    border-left: 2px solid var(--color-rise);
}

/* NOTE: custom.css also had a ".contact #main-header" rule that made
   Contact.aspx's header solid white from the moment the page loads
   (instead of the site-wide default transparent-navy-tint-then-white-on-
   scroll behaviour). That's now gone along with the rest of the file, so
   Contact.aspx currently uses the same default header behaviour as most
   other pages. You mentioned Contact looks fine as-is, so this hasn't been
   restored - just flagging in case that difference wasn't intentional and
   is worth a look next time you're on that page. */

/* ---------- ADVISER LOGIN (".adviser-login" body class) ---------- */
/* AdviserLogin.aspx is the only page using this scope. Kept faithfully as
   it was in custom.css so you've got an accurate starting point for your
   own pass on this page - the #main-header/.nav-link/.nav-icon rules below
   are what made this page's header solid white and permanently navy-text
   (no transparent/scroll transition, unlike every other page) - worth
   deciding whether that's still what you want or whether to switch it to
   the same transparent-on-load pattern used on AboutUs/InvestmentOptions/
   FundPerformance now that it's being revisited anyway. */
.adviser-login body,
body.adviser-login {
    line-height: 1.4;
    background-color: #ffffff;
}

.adviser-login body.menu-active #main-header,
body.adviser-login.menu-active #main-header {
    background-color: transparent;
    box-shadow: none;
}

.adviser-login #main-header {
    background-color: white;
    color: var(--azimut-navy);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    z-index: 100;
}

.adviser-login .nav-link,
.adviser-login .nav-icon {
    color: var(--azimut-navy);
}

.adviser-login .form-input {
    width: 100%;
    padding: 0.85rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}
.adviser-login .form-input:focus {
    outline: none;
    border-color: var(--azimut-navy);
    box-shadow: 0 0 0 1px var(--azimut-navy);
}

.adviser-login .login-card {
    box-shadow: 0 25px 50px -12px rgba(48, 41, 110, 0.1);
}

.adviser-login .split-bg {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.adviser-login .toggle-link {
    cursor: pointer;
    transition: color 0.3s ease;
}
.adviser-login .toggle-link:hover {
    color: var(--color-dusk);
}

@media (max-width: 767px) {
    .article-content img {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 1rem 0 !important; /* replace left/right padding with vertical spacing */
        padding: 0 !important;
    }


    
}

.btn-wide {
    display: block;
    text-align: center;
}

/* Feedback ================================================= */
.validation-warning-wide,
.validation-warning {
    position: relative;
    top: -33px;
    color: red;
}

.validation-warning { left: 200px; }
.validation-warning-wide { left: 450px; }

.msg-warning,
.validation-custom {
    left: 0;
    top: 1px;
    color: red;
}

.msg-info { color: green; }

.validation-warning-wide,
.validation-warning,
.msg-warning,
.validation-custom,
.msg-info {
    padding-bottom: 5px;
}

div.bg-azimut-navy .msg-warning {
    color: #fff;
}

    #AjaxAnimation {
        /* change color here */
        color: rgb(var(--azimut-navy-rgb));
        overflow: initial;
        bordeR: initial;
        background: initial;
    }

#AjaxAnimation {
    box-sizing: border-box;
}

#AjaxAnimation {
    display: inline-block;
    width: 80px;
    height: 80px;
}

#AjaxAnimation {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: lds-dual-ring 1.2s linear infinite;
    z-index: 20;
}

.siteWideMessage {
    text-align: center;
    /*position: fixed;*/
    padding:5px 0px;
    width: 100%;
    z-index: 1000;
    color: white;
    background-color: rgb(var(--azimut-navy-rgb));
}

/* Dynamic header-clearing padding.
   --header-h is kept in sync with the real, rendered height of #main-header
   (nav row + site-wide message banner, if any) by the script in Header.ascx.
   Using max() keeps each page's original spacing as a floor, so decorative
   hero padding is never shrunk - it only grows if the fixed header (with a
   site-wide banner) would otherwise overlap the content.
   --header-h-top is the header's height at the top of the page (before it
   compacts on scroll), so the content doesn't jump when the header shrinks. */
:root {
    --header-h: 8rem;
}

main.pt-32.pb-24 {
    padding-top: max(8rem, var(--header-h-top, var(--header-h))) !important;
}

@media (max-width: 1023.98px) {
    main.flex-grow.pt-24,
    .article-hero.pt-32.pb-12 {
        padding-top: max(8rem, var(--header-h-top, var(--header-h))) !important;
    }
}

@media (min-width: 1024px) {
    main.flex-grow.pt-24 {
        padding-top: max(8rem, var(--header-h-top, var(--header-h))) !important;
    }

    .article-hero.pt-32.pb-12:not(.lg\:pt-8) {
        padding-top: max(12rem, var(--header-h-top, var(--header-h))) !important;
    }
}

.banner-bg {
    background: linear-gradient(to right, rgba(48, 41, 110, 0.95) 0%, rgba(48, 41, 110, 0.7) 100%);
}

/* ========================================================================== 
   Home Style.
*/

.home body,
body.home {
    line-height: 1.4;
    background-color: var(--color-stone-40);
}

/* Lead panel fills exactly one screen at every size, with the content
   sitting at the bottom. 100svh is the "small" viewport height, so on
   phones the panel isn't cropped by the browser's address bar (100vh is
   the fallback for older browsers). It's a min-height, so if the content
   is ever taller than the screen (short landscape phones) the panel grows
   rather than cutting anything off. */
.hero-fill {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Text fade-up on load/scroll - classes are added and removed by
   TextReveal() in library.js, inside any .reveal-text container. */
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition: none; /* hide instantly, e.g. .btn-primary would fade out first */
}

.reveal-item.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Testimonial Section Styles */
.testimonial-quote-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30rem;
    line-height: 1;
    font-family: 'Jost', sans-serif;
    color: var(--color-dusk);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

/* Hero Graphic Overlay (Wavy Line) */
.hero-graphic-overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 50%;
    width: auto;
    max-width: 60%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.3;
    object-fit: contain;
}

/* About Section Overlay Container */
.about-graphic-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

/* About Section Graphic (Contour SVG) */
.about-graphic-asset {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    height: 120%;
    width: auto;
    opacity: 0.4;
    max-width: none;
}

.home .page-wrapper {
    margin: 0 auto;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

/* Bleed Layout Logic (Shared between sections) */
.bleed-container {
    display: flex;
    flex-direction: column;
    /*background-color: white;*/
}

@media (min-width: 1024px) {
    .bleed-container {
        flex-direction: row;
        align-items: stretch;
    }

    .bleed-image-side {
        width: calc( (100vw - var(--container-max)) / 2 + (var(--container-max) / 3) );
        min-width: 33.333%;
    }

    .bleed-text-side {
        flex: 1;
    }

    /* 50/50 variant of the bleed layout (e.g. global map section) */
    .bleed-image-side-50 {
        width: calc( (100vw - var(--container-max)) / 2 + (var(--container-max) / 2) );
        min-width: 50%;
    }

    .bleed-text-side-50 {
        flex: 1;
    }
}

/* Homepage globe stats (.global-one ... .global-four). Stacked in one grid cell
   so the section keeps the height of the tallest and doesn't jump as they swap.
   The globe iframe says which region is facing (script in the globe section)
   and that one fades in. Without JS, just the first one shows. */
.globe-segments {
    display: grid;
}

    .globe-segments > * {
        grid-area: 1 / 1;
    }

    .globe-segments > :not(:first-child),
    .globe-segments.is-globe-driven > * {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.6s ease, visibility 0.6s;
    }

    .globe-segments.is-globe-driven > .is-active {
        visibility: visible;
        opacity: 1;
    }

.video-card-row {
    background-color: transparent;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
/*    padding-bottom: 2rem;*/
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

    .video-card-row:last-child {
        border-bottom: none;
    }

    .video-card-row:hover {
        transform: translateX(10px);
    }

    .video-card-row .thumbnail-wrap {
        width: 100%;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        aspect-ratio: 16/9;
    }

@media (min-width: 1024px) {
    .video-card-row {
        flex-direction: row;
        gap: 2rem;
    }

        .video-card-row .thumbnail-wrap {
            width: 280px;
        }
}

/* Investment Solutions Section */
.solutions-section {
    position: relative;
    background-size: cover;
    background-position: 0% 80%;
    background-attachment: fixed;
    will-change: transform;
    background-color: var(--azimut-navy);
    background-blend-mode: luminosity;
    filter: contrast(0.9) brightness(1);
}

.solutions-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(48, 41, 110, 0.88);
    z-index: 1;
}

.solution-card-overlay {
    position: relative;
    background-color: var(--azimut-navy);
    overflow: hidden;
    min-height: 480px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: border-color 0.4s ease, transform 0.4s ease;
}

    .solution-card-overlay:hover {
        border-color: rgba(255, 255, 255, 0.4);
    }

.solution-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: grayscale(100%) brightness(0.4) contrast(1.2); */
    transition: transform 0.7s ease, filter 0.7s ease;
}

.solution-card-overlay:hover .solution-card-image {
    transform: scale(1.05);
    /* filter: grayscale(0%) brightness(0.4) contrast(1); */
}

.solution-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(48, 41, 110, 0.3) 0%, rgba(48, 41, 110, 0.95) 70%, rgb(48, 41, 110) 100%);
}

/* INVESTMENT SOLUTION BUTTON HOVER OVERRIDE */
.solution-btn {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: transparent;
    color: white;
    transition: all 0.3s ease;
}

    .solution-btn:hover {
        background-color: var(--color-dusk);
        border-color: var(--color-dusk);
        color: white;
    }
/* Hero Visual Transition Container */
#hero-visuals {
    will-change: opacity;
    transition: opacity 0.1s linear;
}

/* DUOTONE EFFECT */
#hero-bg {
    will-change: transform;
    background-color: var(--azimut-navy);
    background-blend-mode: luminosity;
    filter: contrast(0.9) brightness(1);
}

.award-logo {
    /*filter: grayscale(100%) opacity(0.5);*/
    transition: all 0.4s ease;
}

    .award-logo:hover {
        filter: grayscale(0%) opacity(1);
    }
/* Global Map Section Adjustments */
#global-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-color: #362b6b;
}

/* Custom InfoWindow Styling - Sharp corners, no close button */
.gm-style-iw {
    background-color: #1a2332 !important;
    color: white !important;
    border-radius: 0px !important;
    padding: 0 !important;
    font-family: 'Jost', sans-serif !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

.gm-style-iw-c {
    border-radius: 0px !important;
    padding: 0 !important;
}

.gm-style-iw-d {
    overflow: hidden !important;
    max-width: none !important;
}

.gm-style-iw-tc::after {
    background: #1a2332 !important;
}

.gm-ui-hover-text {
    display: none !important;
}

.gm-style-iw > button {
    display: none !important;
}

.gm-style-iw-c button[title="Close"] {
    display: none !important;
}

/* Testimonial Section Adjustments */
.testimonial-background-graphic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: auto;
    /* Changed to white using brightness/invert filters */
    filter: brightness(0) invert(1);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.testimonial-quote-text {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
}

.testimonial-logo-circle {
    width: 64px;
    height: 64px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    z-index: 5;
}

    .testimonial-logo-circle img {
        width: 80%;
        height: 80%;
        object-fit: contain;
    }
/* HERO FEATURE BLOCKS */

.feature-block,
.feature-block2,
.feature-block3 {
    background-color: var(--azimut-navy);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    cursor: pointer;
}

.feature-block2 {
    cursor:initial;
}

.feature-block3 {
    background-color: white;
    justify-content: initial;
}
    .feature-block:hover {
        transform: translateY(-8px);
        background-color: rgb(58, 51, 130);
    }

.feature-texture {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Interactive Arrow */
.feature-arrow,
.feature-arrow2 {
    position: absolute;
    bottom: 40px;
    right: 40px;
    color: var(--color-rise);
    font-size: 36px;
    opacity: 1;
    transform: rotate(225deg);
    transition: all 0.4s ease;
}

.feature-arrow2 {
    color: var(--color-dusk);
    bottom: 20px;
}

.feature-block:hover .feature-arrow {
    opacity: 1;
    transform: translateX(0);
    transform: rotate(225deg);
}


/* ==========================================================================
   Contact Us styles.
*/

.contact-request-card .feature-texture {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 50%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.contact-request-card .form-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
}
.contact-request-card .form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.contact-request-card .form-input:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-rise);
    outline: none;
}
.contact-request-card select.form-input option {
    background-color: var(--azimut-navy);
    color: white;
}

/* Sales/team card styling */
.sales-card-new {
    background: white;
    text-align: left;
}
.sales-card-img-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-start;
}
.sales-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: grayscale(100%);
}
@media (min-width: 1024px) {
    .sales-card-img { width: 60%; }
}
.sales-card-label {
    color: var(--color-dusk);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    display: block;
}
.sales-card-name {
    color: var(--azimut-navy);
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 12px;
    font-family: 'Jost', sans-serif;
}
.sales-card-title {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 20px;
    display: block;
}
.sales-card-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sales-card-link {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}
.sales-card-link:hover { color: var(--color-dusk); }
.sales-card-link i { font-size: 18px; }

div.pdf-icon:hover,
.btn-orange-hover:hover {
    background-color: var(--color-dusk) !important;
}

footer li a:hover
{
    text-decoration:underline !important;
}

/*#topolines-bg {z-index: 21 !important;}*/
.topolines { position: relative; isolation: isolate; }
.topolines-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Lines in just part of a panel: drop an empty
   <div class="topolines topolines-area ..."></div> in as the panel's first child,
   then size it with left/right/top/bottom (per breakpoint if needed). It sits
   above the panel's background but behind its content. */
.topolines.topolines-area { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
:where(:has(> .topolines-area)) { position: relative; isolation: isolate; }

/* Desktop: right half of the panel only (full panel on mobile) */
@media (min-width: 1024px) {
    .topolines-area.topolines-area-right { left: 50%; }
}

/* Fade the lines out towards one edge: topolines-fade-left/right/top/bottom on
   the topolines element (all screen sizes), or topolines-lg-fade-* for desktop
   only. One fade per element. --topolines-fade sets how far in the fade runs,
   e.g. style="--topolines-fade: 50%". */
.topolines { --topolines-fade: 35%; }
.topolines-fade-left   { -webkit-mask-image: linear-gradient(to right,  transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to right,  transparent, #000 var(--topolines-fade)); }
.topolines-fade-right  { -webkit-mask-image: linear-gradient(to left,   transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to left,   transparent, #000 var(--topolines-fade)); }
.topolines-fade-top    { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to bottom, transparent, #000 var(--topolines-fade)); }
.topolines-fade-bottom { -webkit-mask-image: linear-gradient(to top,    transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to top,    transparent, #000 var(--topolines-fade)); }
@media (min-width: 1024px) {
    .topolines-lg-fade-left   { -webkit-mask-image: linear-gradient(to right,  transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to right,  transparent, #000 var(--topolines-fade)); }
    .topolines-lg-fade-right  { -webkit-mask-image: linear-gradient(to left,   transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to left,   transparent, #000 var(--topolines-fade)); }
    .topolines-lg-fade-top    { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to bottom, transparent, #000 var(--topolines-fade)); }
    .topolines-lg-fade-bottom { -webkit-mask-image: linear-gradient(to top,    transparent, #000 var(--topolines-fade)); mask-image: linear-gradient(to top,    transparent, #000 var(--topolines-fade)); }
}

/* Static contour lines over a panel: add topo-overlay to the panel element. The
   lines sit above its images but behind its positioned (z-10) text, and are
   cropped by the panel's edges. Defaults are tied to the home-static
   #global-section image (lg:w-1/3, lg:ml-24, py-24 lg:py-36), per the
   designers' 20261109-wavey-lines-example.png: the lines straddle the image's
   left edge, are about as wide as the image, and their bottom hangs 16% of
   their height below the image's bottom edge.
   --topo-left / --topo-width: horizontal position and size (left is measured
     from the 1600px page container, so it stays put on wide screens).
   --topo-top: the anchor line (default: the image's bottom edge).
   --topo-shift: vertical shift as a % of the lines' own height (-84% puts the
     lines' bottom 16% below the anchor). */
.topo-overlay {
    --topo-img-w: calc((min(100%, 1600px) - 64px) / 3);
    --topo-left: calc(128px - var(--topo-img-w) * 0.44);
    --topo-width: calc(var(--topo-img-w) * 1.06);
    --topo-top: calc(100% - 144px);
    --topo-shift: -84%;
    position: relative;
    overflow: hidden;
}
.topo-overlay::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(max(0px, (100% - 1600px) / 2) + var(--topo-left));
    top: var(--topo-top);
    translate: 0 var(--topo-shift);
    width: var(--topo-width);
    aspect-ratio: 326.01 / 360.19;
    background: url('/uploads/image-library/lines/topographic-lines-small.svg') center / 100% 100% no-repeat;
    opacity: 0.5;
    pointer-events: none;
}
/* White lines, for panels on a coloured background */
.topo-overlay-white::after {
    background-image: url('/uploads/image-library/lines/topographic-lines-small-white.svg');
}
/* Large violet lines on the right of a text-only dark panel (#disciplined-section).
   The top-left of the SVG shows inside the panel and the panel crops its right
   and bottom (which also hides the SVG's flat bottom edge). Sized so the gaps
   between lines match the small cluster on the other panels: the violet SVG's
   lines are ~1.72x denser (median gap 9 vs 15.5 SVG units), so it is drawn
   ~1.72x larger per unit than topographic-lines-small.svg, i.e. 5x the
   topo-overlay image width (--topo-img-w). Behind all of the panel's content. */
.topo-overlay-violet::after {
    z-index: -1;
    /* the shape's top-left (SVG point ~130,170 - its top-left corner is empty)
       lands at 45% across the container, 10% down the panel */
    left: calc(max(0px, (100% - 1600px) / 2) + min(100%, 1600px) * 0.45);
    top: 10%;
    translate: -14.5% -19%;
    width: calc(var(--topo-img-w) * 5);
    height: auto;
    aspect-ratio: 893.77 / 900.85;
    background-image: url('/uploads/image-library/lines/topographic-lines-violet.svg');
    opacity: 0.3;
}
@media (max-width: 1023px) {
    .topo-overlay-violet::after {
        /* small lines are 300px wide on mobile -> same spacing at ~1420px */
        left: 45%;
        top: 35%;
        width: 1420px;
    }
}
@media (max-width: 1023px) {
    .topo-overlay {
        --topo-left: -110px;
        --topo-width: 300px;
        --topo-top: 496px; /* image bottom: py-24 + h-[400px] */
    }
}
/* Mirrored lines over a right-hand image (#featured-insights): flipped
   horizontally, same size as the left-hand panels, straddling the image's right
   edge (the mirror of the left-hand panels), cropped by the panel's right
   edge. The lines' top sits 25% of the way down the image: the image runs from
   192px (lg:py-36 + my-12) to 192px above the panel bottom, so 25% down is
   192px + 25% of (panel height - 384px) = 96px + 25%. Desktop only, as the
   image is hidden on mobile. */
.topo-overlay-mirror {
    --topo-top: calc(96px + 25%);
    --topo-shift: 0%;
    /* how far the lines stick out past the image's right edge, as a fraction
       of the image width (lower = further left, more over the image; there is
       32px of panel beyond the image before it crops) */
    --topo-overhang: 0.15;
}
.topo-overlay-mirror::after {
    left: auto;
    right: calc(max(0px, (100% - 1600px) / 2) + 32px - var(--topo-img-w) * var(--topo-overhang));
    scale: -1 1;
}
@media (max-width: 1023px) {
    .topo-overlay-mirror::after { display: none; }
}

table.portfolio-table thead tr {
    background-color: var(--azimut-navy);
    color: white;
}

div[id*="rptPortfolioList_pnlGroupHeadingSummary"] .group-summary-inner > div {
    background-color: white !important;
    border-top: 3px solid #e4e6ef !important;
}

div[id*="rptPortfolioList_pnlGroupHeadingSummary"] .group-summary-inner > div a {
    border-left: 1px solid #e4e6ef !important;
    padding:16px !important;
}

.btn-download i.ri-download-line,
div[id*="rptPortfolioList_pnlGroupHeadingSummary"] .group-summary-inner > div a i.ri-download-line {
    font-weight: 100 !important;
    font-size: 1.7em !important;
    margin-left: auto;
    flex-shrink: 0;
}

#global-presence-home {
    min-height: 900px;
    background-color: #fff;
}

.btn-banner {
    
    color: black;
    background-color: var(--color-rise);
    font-family: 'Barlow';
}


.btn-banner:hover {
    background-color: var(--color-dusk);
    color: white;
}

.banner-block {
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    cursor: pointer;
}


    .banner-block:hover,
    .feature-block3:hover {
        transform: translateY(-8px);
    /*    background-color: rgb(58, 51, 130);*/
    }

.solutions-section .feature-block3:hover .feature-arrow2 {
    transform: translate(8px, -8px) rotate(225deg);
}

.feature-arrow4 {
    display: inline-block;
    transition: transform 0.4s ease;
}

.white-link:hover .ri-arrow-right-line {
    transform: translateX(8px);
}

.btn-home {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1.4px;
    font-family: barlow;
    text-align: center;
    text-transform: uppercase;
    margin-right: 20px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .btn-home { display: block; margin-right: 0px; }
}

.btn-download {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 4px;
    color: #30296e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.btn-download:hover{
    text-decoration: none !important;
}

.article-tags li {
    list-style: none;
}

.article-tags{
    padding-left:0;
}

article ul {
    margin-top: 0 !important;
}