/* --- Fade-in image animation (only used if you apply .fade-in-image) --- */
    .fade-in-image {
        animation: fadeIn 8s;
        -webkit-animation: fadeIn 8s;
    }
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    /* --- Hero --- */
    .hero {
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.205)),
            url("https://brownadvisoryd8preprod.prod.acquia-sites.com/sites/default/files/etf_fund_page_hero_1920x800_0.jpg");
        overflow: hidden;
        background-position: 50% -100px;
        background-attachment: fixed;
    }
    .hero-center-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40vh;
    }
    .hero-subtitle {
        color: #fff;
        font-size: 4.3em;
        font-family: 'Roboto', 'Helvetica Neue', Arial, Verdana, sans-serif !important;
        font-weight: 300;
        text-shadow: 1px 1px 1px #000;
        text-align: center;
        letter-spacing: 0.3em;
        padding-bottom: 3rem;
    }
    /* --- Page background section --- */
    .graphic {
        background-image: url("https://www.brownadvisory.com/sites/default/files/shutterstock_2480708161.jpg");
        width: 100%;
    }
    /* --- General layout/content --- */
    body {
        font-family: Arial, Helvetica, Verdana, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #1a1a1a;
    }
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
    }
    .container-2 {
        width: 100%;
        margin: 0 auto;
        padding: 1rem;
        box-sizing: border-box;
    }
    .etf-content {
        padding-top: 70px;
    }
    p {
        font-family: Arial, Helvetica, Verdana, sans-serif;
        font-weight: 400;
        line-height: 1.45;
        font-size: 1.125rem;
        color: #6f6f71;
    }
    /* --- Sticky banner card --- */
    .sticky-banner {
        position: sticky;
        top: 1.5rem;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease-out forwards;
    }
    .banner-card {
        border-radius: 0.625rem;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        border: none;
    }
    .banner-background {
        position: relative;
        background-image: url('https://brownadvisoryd8preprod.prod.acquia-sites.com/sites/default/files/2026-02/IVSF%20HERO%20v2%20-%203200x1800.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .banner-overlay {
        position: absolute;
        inset: 0;
        background: #000000b7;
    }
    .banner-content {
        position: relative;
        z-index: 10;
        padding: 1.5rem;
    }
    .milestone-badge {
        display: inline-block;
        background: linear-gradient(to right, #60a5fa, #163963);
        color: #fff;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        opacity: 0;
        transform: scale(0.8);
        animation: fadeInScale 0.5s ease-out 0.2s forwards;
    }
    .banner-title-2 {
        font-size: 2rem;
        font-weight: 100;
        color: #fff;
        line-height: 1.2;
        opacity: 0;
        transform: translateX(-20px);
        animation: fadeInLeft 0.6s ease-out 0.3s forwards;
    }
    .btn-link {
        color: #fff;
        -webkit-background-clip: text;
        background-clip: text;
        font-size: 17px;
        font-weight: 600;
        font-family: Arial, Helvetica, Verdana, sans-serif;
        text-shadow: 1px 1px 1px #000;
        text-decoration: none;
    }
    .btn-link:hover {
        color: #fff;
    }
    /* --- Sticky Widget (scoped) --- */
    .sticky-widget {
        font-family: Arial, Helvetica, Verdana, sans-serif;
    }
    /* Quote layout */
    .quote-container {
        margin-bottom: 1.5rem;
    }
    .quote-content {
        display: block;
        margin: 15px;
    }
    /* Ensure link never changes visited styles */
    .sticky-widget .quote-text-section,
    .sticky-widget .quote-text-section:link,
    .sticky-widget .quote-text-section:visited,
    .sticky-widget .quote-text-section:hover,
    .sticky-widget .quote-text-section:active,
    .sticky-widget .quote-text-section:focus {
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
    }
    /* Quote hover: smooth + NO layout shift */
    .sticky-widget .quote-container,
    .sticky-widget .quote-container:hover {
        transform: none !important;
        transition: none !important;
    }
    .sticky-widget .quote-card {
        box-sizing: border-box;
        border: 1px solid transparent !important;
        /* reserve space */
        border-radius: 8px;
        background: transparent;
        transition: transform 0.5s ease-in-out,
            background-color 0.5s ease-in-out,
            border-color 0.5s ease-in-out !important;
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    .sticky-widget .quote-container:hover .quote-card,
    .sticky-widget .quote-container:focus-within .quote-card {
        transform: scale(1.02) translateZ(0);
        background-color: #16396345;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }
    .sticky-widget .quote-container:focus-within .quote-card {
        outline: 2px solid rgba(147, 197, 253, 0.9);
        outline-offset: 2px;
    }
    /* Prevent any anchor blue coloring inside quote card (theme overrides) */
    .quote-card a,
    .quote-card a:visited,
    .quote-card a:active,
    .quote-card a:hover,
    .quote-card a:focus {
        color: inherit !important;
        text-decoration: none !important;
    }
    /* Managers */
    .manager-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .sticky-widget .manager-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 60px !important;
        margin-top: 12px !important;
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        justify-items: center;
    }
    .sticky-widget .manager-card {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 8px !important;
        border-radius: 8px !important;
        border: 0px solid rgba(255, 255, 255, 0.18) !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 520px;
        text-decoration: none !important;
        color: inherit !important;
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .sticky-widget .manager-card:hover,
    .sticky-widget .manager-card:focus {
        transform: scale(1.02);
        background: #16396345;
        border-color: rgba(255, 255, 255, 0.4) !important;
        text-decoration: none !important;
    }
    .sticky-widget .manager-card:focus {
        outline: 2px solid rgba(147, 197, 253, 0.9);
        outline-offset: 2px;
    }
    .sticky-widget .manager-photo {
        width: 52px !important;
        height: 52px !important;
        max-width: none !important;
        object-fit: cover !important;
        border-radius: 12% !important;
        box-shadow: #00000033 0px 4px 6px -1px, #0000001a 0px 2px 4px -1px;
    }
    .sticky-widget .manager-details {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    .sticky-widget .manager-name,
    .sticky-widget .manager-title {
        margin: 0 !important;
        line-height: 1.15 !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    .sticky-widget .manager-name {
        color: #fff !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
    }
    .sticky-widget .manager-title {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 0.85rem !important;
    }
    .sticky-widget .manager-name a,
    .sticky-widget .manager-title a {
        color: inherit !important;
        text-decoration: none !important;
    }
    /* CTA button (scoped to protect from theme) */
    .sticky-widget a.cta-button,
    .sticky-widget a.cta-button:link,
    .sticky-widget a.cta-button:visited {
        display: inline-block;
        background: linear-gradient(to right, #3b82f6, #163963) !important;
        color: #fff !important;
        text-decoration: none !important;
        border: none !important;
        width: auto !important;
        min-width: 260px;
        max-width: 520px;
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        font-size: 14px;
        font-family: Arial, Helvetica, Verdana, sans-serif;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    .sticky-widget a.cta-button:hover,
    .sticky-widget a.cta-button:focus {
        background: linear-gradient(to right, #163963, #3b82f6) !important;
        color: #fff !important;
        text-decoration: none !important;
        transform: scale(1.02);
        outline: none;
    }
    .sticky-widget a.cta-button:active {
        transform: scale(0.98);
    }
    /* Center CTA row under managers */
    .banner-content>.row:last-of-type {
        display: flex;
        justify-content: center;
    }
    .banner-content>.row:last-of-type p {
        width: 100%;
        max-width: 520px;
        text-align: center;
        margin: 1.25rem auto 0 auto;
    }
    /* ETF nav iframe */
    .etf-nav {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    iframe {
        width: 100%;
        min-width: 100%;
        border: 0;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }
    /* Footer */
    .divider {
        border: none;
        padding: 1px;
        margin: 1rem 0;
    }
    .footer {
        opacity: 0.9;
        font-size: 1rem;
        font-weight: 400;
        line-height: 20px;
        margin: 0;
        text-align: justify;
        color: #fff;
        padding-right: 20px;
        padding-left: 20px;
    }
    /* --- Animations used by sticky banner elements --- */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    /* --- Responsive --- */
    @media (max-width: 600px) {
        .container {
            max-width: 100%;
            padding: 0.5rem;
        }
    }
    @media (max-width: 400px) {
        .container {
            padding: 0.25rem;
        }
        .footer {
            padding-right: 20px;
            padding-left: 20px;
        }
    }
    @media (max-width: 991.98px) {
        /* reduce the huge desktop gap leaking into some mid widths */
        .sticky-widget .manager-row {
            gap: 12px !important;
        }
        /* banner card behavior for this breakpoint in your original CSS */
        .banner-card {
            overflow: initial;
            border-radius: 0.625rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: none;
        }
    }
    @media (max-width: 768px) {
        .sticky-banner {
            position: relative;
            top: auto;
        }
        .banner-card {
            overflow: hidden;
            border-radius: 12px;
        }
        .banner-content {
            padding: 1rem !important;
        }
        .sticky-widget .banner-content>.row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .sticky-widget .banner-content>.row>* {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .banner-title-2 {
            font-size: 1.25rem !important;
            line-height: 1.2 !important;
            margin: 0.75rem 0 !important;
        }
        .banner-title-2 span,
        .banner-title-2 a {
            font-size: 1.25rem !important;
            line-height: 1.2 !important;
            letter-spacing: 0.5px !important;
        }
        .quote-card {
            padding: 0.75rem !important;
        }
        .quote-text h2 {
            font-size: 1rem !important;
            line-height: 1.35 !important;
            margin: 0 !important;
        }
        .sticky-widget .manager-row {
            grid-template-columns: 1fr !important;
            gap: 0.6rem !important;
            margin-top: 0.75rem !important;
        }
        .sticky-widget .manager-card {
            grid-template-columns: 44px minmax(0, 1fr) !important;
            gap: 0.6rem !important;
            padding: 0.55rem 0.6rem !important;
        }
        .sticky-widget .manager-photo {
            width: 44px !important;
            height: 44px !important;
        }
        .sticky-widget a.cta-button {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
        }
        .banner-content>.row:last-of-type p {
            margin-top: 0.9rem !important;
        }
    }
    /* =========================================================
   Sticky Widget Readability Upgrade (scoped)
   Paste at END of your <style> so it overrides earlier rules
   ========================================================= */
    .sticky-widget .banner-background {
        position: relative;
    }
    /* Make the photo less “noisy” behind type */
    .sticky-widget .banner-overlay {
        /* stronger + more controlled overlay than a flat rgba */
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.295) 40%,
                rgba(0, 0, 0, 0.72) 100%) !important;
    }
    /* Optional: slightly soften background image rendering */
    .sticky-widget .banner-background {
        /* keeps it subtle; doesn’t blur content */
        filter: saturate(0.95) contrast(1.05);
    }
    /* Tighter, clearer typography + spacing */
    .sticky-widget .banner-content {
        padding: 1.75rem 1.75rem 1.5rem 1.75rem !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /* Badge: keep it crisp and readable */
    .sticky-widget .milestone-badge {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        letter-spacing: 0.02em;
    }
    /* Banner title: stronger weight + softer shadow for legibility */
    .sticky-widget .banner-title-2 {
        font-family: Roboto, "Helvetica Neue", Arial, Verdana, sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
        margin: 0.75rem 0 0.85rem 0 !important;
    }
    /* Your title has inline styles; override the span + link inside */
    .sticky-widget .banner-title-2 span,
    .sticky-widget .banner-title-2 a {
        font-weight: 500 !important;
        line-height: 1.25 !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    }
    /* Create a subtle “glass panel” behind the quote text (biggest readability win) */
    .sticky-widget .quote-card {
        background: rgba(0, 0, 0, 0.18) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }
    /* Quote text: calmer sizing and better line-height */
    .sticky-widget .quote-text h2 {
        font-family: Roboto, "Helvetica Neue", Arial, Verdana, sans-serif !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        letter-spacing: 0.005em;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
        margin: 0 !important;
    }
    /* Manager cards: give them a tiny contrast lift (helps faces + text) */
    .sticky-widget .manager-card {
        background: rgba(0, 0, 0, 0) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    }
    /* Manager text readability */
    .sticky-widget .manager-name {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.50);
    }
    .sticky-widget .manager-title {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
    }
    /* CTA button: slightly more contrast against image */
    .sticky-widget a.cta-button {
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
    }
    /* Mobile: keep everything readable without feeling cramped */
    @media (max-width: 768px) {
        .sticky-widget .banner-content {
            padding: 1.25rem !important;
        }
        .sticky-widget .banner-title-2,
        .sticky-widget .banner-title-2 span,
        .sticky-widget .banner-title-2 a {
            font-size: 1.15rem !important;
            line-height: 1.25 !important;
        }
        .sticky-widget .quote-text h2 {
            font-size: 0.98rem !important;
            line-height: 1.45 !important;
        }
    }
    .sticky-widget .banner-background {
        position: relative;
        overflow: hidden;
    }
    /* Move the actual image to a pseudo element we can animate */
    .sticky-widget .banner-background::before {
        content: "";
        position: absolute;
        inset: -6%;
        /* extra bleed so edges never show during movement */
        background-image: inherit;
        /* reuse your existing background-image */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 70%;
        transform: translate3d(0, 18px, 0) scale(1.05);
        will-change: transform;
        animation: mountainPanUp 10s ease-in-out infinite alternate;
        z-index: 0;
    }
    /* Keep overlay + content above the moving image */
    .sticky-widget .banner-overlay {
        z-index: 1;
    }
    .sticky-widget .banner-content {
        z-index: 2;
        position: relative;
    }
    /* The motion: slow upward pan */
    @keyframes mountainPanUp {
        from {
            transform: translate3d(0, 18px, 0) scale(1.05);
        }
        to {
            transform: translate3d(0, -18px, 0) scale(1.05);
        }
    }
    /* Respect reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .sticky-widget .banner-background::before {
            animation: none !important;
            transform: translate3d(0, 0, 0) scale(1.02);
        }
    }
    @media (min-width: 992px) {
        .sticky-widget .manager-row {
            max-width: 620px !important;
            /* wider area */
            gap: 28px !important;
            /* less empty space than 60px */
        }
        .sticky-widget .manager-card {
            grid-template-columns: 62px minmax(0, 1fr) !important;
            /* larger avatar column */
            gap: 12px !important;
            padding: 12px 12px !important;
            /* bigger click target */
            border-radius: 8px !important;
        }
        .sticky-widget .manager-photo {
            width: 62px !important;
            height: 62px !important;
        }
        .sticky-widget .manager-name {
            font-size: 1.02rem !important;
        }
        .sticky-widget .manager-title {
            font-size: 0.9rem !important;
        }
    }
    /* 2) Base state: match quote-card (reserve 1px border; smooth 0.5s) */
    .sticky-widget .manager-card {
        box-sizing: border-box !important;
        border: 1px solid transparent !important;
        /* reserve space (no layout shift) */
        background: transparent !important;
        transition: transform 0.5s ease-in-out,
            background-color 0.5s ease-in-out,
            border-color 0.5s ease-in-out !important;
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    /* 3) Hover + keyboard focus: same as quote-card (color + white-ish border + scale) */
    .sticky-widget .manager-card:hover,
    .sticky-widget .manager-card:focus-within {
        transform: scale(1.02) translateZ(0);
        background-color: #16396345 !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }
    /* 4) Focus ring: match quote-card behavior */
    .sticky-widget .manager-card:focus-within {
        outline: 2px solid rgba(147, 197, 253, 0.9);
        outline-offset: 2px;
    }
    /* 5) Keep link colors stable inside manager cards */
    .sticky-widget .manager-card a,
    .sticky-widget .manager-card a:visited,
    .sticky-widget .manager-card a:hover,
    .sticky-widget .manager-card a:active,
    .sticky-widget .manager-card a:focus {
        color: inherit !important;
        text-decoration: none !important;
    }