* {
    box-sizing: border-box;
}

:root {
    /* Colors */
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-08: rgba(255, 255, 255, 0.08);
    --color-white: #ffffff;
    --color-dblack: #2A2A29;
    --color-beige: #CABB9B;
    --color-dark-grey: #5B5B5B;
    --color-dgrey: #5A5A5A;
    --color-grey: #666666;
    --color-light-grey: #989898;
    --color-border-grey: #A2A2A2;
    --color-black: #171513;
    --color-dark-black: #1F1F1F;
    --color-off-white: #F6F6F6;
    --color-hover-grey: #EFEFEF;
    --color-overlay: rgba(0, 0, 0, 0.4);
    --color-glass: rgba(78, 78, 78, 0.3);
    --body-background-color: #171513;
    --prompt-bg: rgba(50, 50, 50, 0.8);
    --prompt-border: rgba(255, 255, 255, 0.1);
    --color-shadow: rgba(0, 0, 0, 0.08);
    --color-shadow-dark: rgba(0, 0, 0, 0.35);
    --header-shadow: rgba(0, 0, 0, 0.12);
    --color-cardbg: #2D2C2C;
    --color-paginationbdr: #403F3F;
    --color-paginationbg: #2B2A2A;
    --color-lgrey: #4C4C4C;
    /* Font family */
    --font-primary: "Bradford LL";
    --font-secondary: "Roobert";
    --font-tertiary: "iCapital Season Sans";
    --font-quaternary: "iCapital Season Serif";
    --body-font: var(--font-primary);
    --heading-font: var(--font-secondary);
    /* Font size  */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-m: 14px;
    --font-size-mid: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 21px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 64px;
    /* Font weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Line height */
    --line-height-tight: 1.1;
    --line-height-normal: 1.3;
    --line-height-medium: 1.4;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;
    /* Letter spacing */
    --letter-spacing-tight: -0.2px;
    --letter-spacing-normal: -0.24px;
    --letter-spacing-medium: -0.26px;
    --letter-spacing-med: -0.3px;
    --letter-spacing-wide: -0.34px;
    --letter-spacing-ewide: -0.34px;
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-3xl: 60px;
    --radius-pill: 300px;
    /* Shadow */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.35);
    --shadow-header: 0 6px 14px rgba(0, 0, 0, 0.12);
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
}

.font-10 {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}


/* Hero banner */
.hero-banner { position: relative; overflow: hidden; min-height: 700px;}
.hero-banner .hero-banner-content { position: absolute; top: 50%; z-index: 100; transform: translateY(-50%);
    left: 10%; max-width: 70%; max-height: 400px; color: var(--color-white); overflow: hidden;}
.hero-banner .hero-banner-content h1 {font-size: 4rem;}
.hero-banner .hero-banner-content p {font-size: 1.5rem;}
.hero-banner .hero-banner-content .btn { padding: 0.75rem 1.5rem;}
.hero-banner .hero-banner-image { position: absolute; inset: 0; z-index: 0;}
.hero-banner .hero-banner-image::after { content: ""; position: absolute; inset: 0; background: var(--color-overlay);}
.hero-banner .hero-banner-image img { width: 100%; height: 100%; object-fit: cover; }

@media only screen and (max-width: 767px) {
    .hero-banner {min-height: 500px;}
    .hero-banner .hero-banner-content {max-height: 400px;}
    .hero-banner .hero-banner-content h1 {font-size: 2.5rem;}

    .hero-banner .hero-banner-content P {font-size: 1rem;}
}



/* Header */
.header {padding: 30px 0 10px; background: var(--body-background-color);}
.header.is-scrolled { box-shadow: var(--shadow-header); padding: 30px 0 20px;}
.header .header-row {display: flex; align-items: center;}
.header .header-row .header-col2 {text-align: center;}
.header .header-row .header-col2 .site-header-img,.header .header-row .header-col2 a {display: block !important;}
.header .header-btn .btn {border-radius: var(--radius-md); background: var(--color-dblack); color: var(--color-white); border-color: var(--color-dblack); margin: 0 !important; padding: 10px; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-transform: uppercase; font-family: var(--font-secondary);}
.header .header-btn .btn:hover {text-decoration: none;}
.header .nav-sitemap.horizontal-sitemap .nav .nav-item:first-child .nav-link{margin-left:0;}
.header .nav-sitemap.horizontal-sitemap .nav .nav-item:last-child .nav-link{margin-right:0;}
.header .nav-sitemap.horizontal-sitemap .nav-item {margin: 0;}
.header .nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link::after, .header .nav-sitemap.horizontal-sitemap .nav-item .nav-link-child::after {display: none;}
.header .nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link, .header .nav-sitemap.horizontal-sitemap .nav-item .nav-link-child {color: var(--color-white); margin: 0 14px 6px;}
.header .nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link {margin: 0 14px; font-family: var(--font-secondary);}


/* New Header */
.header .header-container {display: flex; align-items: center;}
.header .header-container .header-col1 {display: flex; align-items: center;}
.header .header-container .header-col2 { display: flex; justify-content: flex-end;}
.header .header-container .header-col1 .header-logo2 {margin-left: 6px;}
.header.header-new .nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link {margin: 0 10px; font-family: var(--font-secondary); font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);}
.header.header-new .nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link.active {color: var(--color-beige);}


/* Main content */
.main-content {min-height: 400px; color: var(--color-white);}
.page-heading {margin: 20px 0;}
.heading-2 {
    font-family: var(--body-font);
    font-size: 42px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight); 
    letter-spacing: -0.84px;
    text-transform: capitalize;
    margin: 0;
}



/* Modal */
.custom-dropdown .dropdown-menu {min-width: 728px; border-radius: var(--radius-lg);}
.custom-dropdown .dropdown-toggle::after {border: none; content:''; background: url('../images/down-arrow-icon.svg') no-repeat; width: 8px; height: 5px;     position: absolute;
    right: 12px; top: 50%; transform: translateY(-50%);}
.custom-dropdown .dropdown-toggle.show::after {transform: translateY(-50%) rotate(180deg);}
.custom-dropdown .dropdown-menu .dropdown-header {border-bottom: none; padding: 0 20px 5px; display: flex; align-items: center; justify-content: space-between;}
.custom-dropdown .dropdown-menu .dropdown-header .btn-close {background: none; margin: 0; padding:0;width: auto; height: auto;}
.custom-dropdown .dropdown-menu .dropdown-header h5 {color: #000; font-weight: var(--font-weight-bold); font-size: 12px; line-height: var(--line-height-tight); letter-spacing: -2%; margin: 0;}
.custom-dropdown .dropdown-menu .dropdown-body {padding: 6px;}

/* Starters */
.sblock-item {background: var(--color-off-white); padding: 7px 20px; border-radius: var(--radius-md); margin: 0 0 5px; display: flex; justify-content: space-between; align-items: center;
               color: var(--color-black); font-weight: var(--font-weight-medium); font-size: var(--font-size-m); line-height: var(--line-height-tight); letter-spacing: -2%; }
.sblock-item:hover {background:var(--color-hover-grey); text-decoration: none; color: var(--color-black);}
.sblock-item .starter-img {width: 10px;}
.sblock-container .sblock-item:last-child {margin:0;}
/*.sblock-item .sblock-text {width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}*/
.sblock-item .sblock-text {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* Personalize */
.personalize-row { display: grid; grid-template-columns: 140px repeat(3,1fr); gap: 10px; align-items: center; margin-bottom: 10px;}
.personalize-row .personalize-label {color: var(--color-black); font-size: var(--font-size-m); line-height: var(--line-height-tight); letter-spacing: -2%; font-weight: var(--font-weight-bold); padding: 0 10px 0 20px; }
.personalize-row .custom-pill-group{ display:contents;}
.personalize-row .custom-pill {border: none; background: var(--color-off-white); border-radius: var(--radius-pill); padding: 7px 10px; color: var(--color-black);
    font-weight: var(--font-weight-medium); font-size: var(--font-size-m); line-height: var(--line-height-tight); letter-spacing: -2%; display: flex; justify-content: space-between; align-items: center;}
.personalize-row .custom-pill.active { background: var(--color-beige);}
.personalize-row .custom-pill:hover{text-decoration: none;}
.personalize-row .custom-pill .pill-icon {display:none; width:5px;}
.personalize-row .custom-pill.active .pill-icon {display:inline-block;}


/* Footer */

.footer .footer-top-section {border-bottom: 1px solid var(--color-white-08); padding: 100px 0 30px;}
.footer .footer-bottom-section {text-align: center; padding: 57px 0 30px;}

.footer .nav-sitemap {margin: 0 0 60px;}
.nav-sitemap .nav-item .nav-sitemap_link, .nav-sitemap .nav-item .nav-link-child,.footer .footer-bottom-section { font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;  font-family: var(--font-secondary);}
.footer .nav-sitemap .nav-item .nav-sitemap_link, .footer .nav-sitemap .nav-item .nav-link-child,.footer .footer-bottom-section { color: var(--color-white); }
.footer .nav-sitemap .nav-item .nav-link-child { opacity: 1;}
.nav-sitemap .nav-item .nav-sitemap_link, .nav-sitemap .nav-item .nav-link-child {padding: 0.2rem; margin: 0 0 1rem;}
.nav-sitemap.horizontal-sitemap .nav-item {position: relative; margin: 0 0 1rem;}
.nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link{font-size: var(--font-size-sm); line-height: var(--line-height-tight);}
.nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link, .nav-sitemap.horizontal-sitemap .nav-item .nav-link-child {padding: 0; margin: 0 0.5rem;}
.nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link::after, .nav-sitemap.horizontal-sitemap .nav-item .nav-link-child::after{content:''; background: rgba(255,255,255,0.5); height: 100%; display:inline-block;width: 2px;
    margin: 0; position: absolute; right: 0; top: 0;}
.nav-sitemap.horizontal-sitemap .nav .nav-item:last-child .nav-sitemap_link::after, .nav-sitemap.horizontal-sitemap .nav .nav-item:last-child .nav-link-child::after {display: none;}

.footer .footer-bottom-section .nav-sitemap {margin: 41px auto 50px; max-width: 1100px;}
.footer .footer-bottom-section .nav-sitemap.horizontal-sitemap .nav-item {margin: 0 0 0.5rem;}
.footer .footer-bottom-section {opacity: 0.5; font-family: var(--font-secondary);}
.footer .footer-bottom-section .nav-sitemap .nav { justify-content: center;}
.footer .copyright-txt {font-size: var(--font-size-sm); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); letter-spacing: var( --letter-spacing-tight); text-transform: uppercase;}


/* New footer */
.footer-new {padding: 78px 0 148px; border-top: 1px solid var(--color-white-08); color: var(--color-white); background: var(--body-background-color); font-family: var(--font-secondary);}
.footer-new .footer-container {max-width: 983px; margin: auto; text-align: center; font-size: var(--font-size-sm); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); letter-spacing: var( --letter-spacing-tight); opacity: 0.5; text-transform: uppercase;}
.footer-container .copyright-text {margin: 53px 0 51px;}
.footer-new .footer-container .nav-sitemap.horizontal-sitemap .nav-item {margin: 0 0 0.2rem;}
.footer-new .nav-sitemap {margin:0;}

/* Article detail */
.article-detail-page {
    background: var(--body-background-color);
    padding: 20px 50px 58px;
    color: var(--color-white);
}
.article-control {text-align: center;}
.close-btn {
    border-radius: var(--radius-md);
    background: var(--color-glass);
    backdrop-filter: blur(5px);
    padding: 10px;
    color: var(--color-white);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    border: none;
}
.close-btn img {margin-right: 10px;}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 46px;
    max-width: 1440px;
    margin: 0 auto;
}
.article-card-block {
    background: var(--color-white);
    color: var(--color-dgrey);
    overflow: hidden;
    min-height: 1200px;
    border-radius: var(--radius-2xl);
    backdrop-filter: blur(5px);
    padding: 38px 10px 10px;
}
.article-card-block .article-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 30px 21px 20px 20px;
}
.article-layout .article-card-block .article-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    background: var(--color-overlay);
    z-index: 1;
}
.article-card-block .article-hero .article-hero-image {
    border-radius: 30px 21px 20px 20px;
    height: 230px;
    width: 100%;
    object-fit: cover;
}
.article-card-block .article-hero .article-hero-content {
    display: none;
    position: absolute;
    left: 50%;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.article-card-block .article-title-content {
    max-width: 100%;
    padding: 0 100px;
    text-align: left;
    margin: 0 0 40px;
}
.article-card-block .hero-date {
    color: var(--color-dgrey);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    margin: 0 0 20px;
    opacity: 0.5;
}
.article-card-block .hero-title {
    color: var(--color-black);
    font-family: var(--body-font);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: -0.64px;
    margin: 0;
}
.article-card-block .article-hero .article-hero-content .hero-date, .article-card-block .article-hero .article-hero-content .hero-title {
    color: var(--color-white);
}
.article-card-block .article-body {
    padding: 35px 100px 10px;
    color: var(--color-dgrey);
    font-family: var(--heading-font);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wide);
}
.article-card-block .article-body ul li,.article-card-block .article-body ol li,.article-card-block .article-body p {
    color: var(--color-dgrey);
    font-family: var(--heading-font);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wide);
}
.article-card-block .article-body .article-video {margin: 0 0 35px;}
.article-card-block .article-body .article-video iframe {height: 410px; width: 100%;}
.article-card-block .article-body h2 {
    color: var(--color-black);
    font-family: var(--heading-font);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    letter-spacing: -0.42px;
    margin: 0 0 30px;
}
.article-card-block .article-body h3 {
    color: var(--body-background-color);
    font-family: var(--heading-font);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight); 
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 30px;
}
.article-card-block .article-body p {margin: 0 0 30px;}
.article-card-block .article-body p:last-child {margin:0;}
.article-card-block .article-body .article-section {margin: 0 0 56px;}
.article-card-block .article-body .article-section:last-child {
    margin: 0;
}
.article-sidebar {
    padding-top: 10px;
}
.about-article-section {margin: 0 0 70px;}

.article-sidebar-block .sidebar-title {
    margin: 0 0 30px;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
}

.author-block {display: flex; gap: 11px; align-items: center; margin: 0 0 25px;}
.author-block-container .author-block:last-child {margin: 0 0 17.5px;}
.author-block .author-avatar {width: 32px; height: 32px; border-radius: 50px; overflow: hidden;}
.author-block .author-avatar img {width: 32px; height: 32px; object-fit: cover;}
.author-block .author-content { color: var(--color-white); font-family: var(--heading-font); font-size: var(--font-size-m); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight);}
.author-block .author-content p {margin: 0;}
.author-block .author-content .author-name {margin: 0 0 7px;}
.author-block .author-content .author-role {opacity: 0.6;}
.publisher-avatar img {max-height: 32px;}


.about-article-info {
    margin: 0;
    padding: 0;
    list-style: none;
}
.article-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--color-white-10);
    color: var(--color-white-60);
    font-family: var(--heading-font);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
}
.article-info-row .article-button {
    padding: 6px 20px;
    border-radius: var(--radius-md);
    background: var(--color-glass);
    backdrop-filter: blur(5px);
    color: var(--color-border-grey);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    min-width: 100px;
    justify-content: center;
    text-decoration: none;
}

.recommended-article-section .recommended-article:last-child{border-bottom: none;}
.recommended-article {
    display: flex;
    gap: 11px;
    padding: 10px 0;
    align-items: center;
    border-bottom: 1px solid var(--color-white-10);
}

.recommended-article .recommended-image {
    width: 58px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 4.735px;
}

.recommended-article .recommended-content {
    min-width: 0;
}

.recommended-article .recommended-content .recommended-date {
    display: block;
    margin: 0 0 8px;
    color: var(--color-white-60);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight); 
    letter-spacing: -0.16px;
    text-transform: uppercase;
}

.recommended-article .recommended-content .recommended-name {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    line-height:var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
    opacity: 0.6;
}


/* Blog detail popup */
.blog-detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    
}

.blog-detail-modal.is-open {
    display: block;
}

.blog-detail-modal .blog-detail-overlay {
    position: absolute;
    inset: 0;
    background: var(--body-background-color);
}

.blog-detail-modal .blog-detail-modal-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 40px);
    margin: 20px auto;
    overflow: auto;
    background: var(--body-background-color);
}

body.blog-detail-modal-open {
    overflow: hidden;
}

#blogDetailModalContent {
    min-height: 100%;
}


/* Most Recent */
.most-recent-card-list {margin: 80px 0 34px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; align-items: center; }
.recent-blog-card {background: var(--color-cardbg); border-radius: 20px; min-height: 245px; flex-wrap: wrap; margin:0;}
.recent-blog-card .blog-card-content {padding: 20px 30px; width: 100%;}
.recent-blog-card .blog-card-publisher {margin: 0 0 7px; height:30px;}
.recent-blog-card .blog-card-publisher .publisher-logo {  max-height: 30px; object-fit: contain; width: auto; }
.recent-blog-card .blog-card-title {color: var( --color-beige); font-family: var(--heading-font); font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); height: 38px; margin: 0 0 16px;}
.recent-blog-card .blog-date { color: rgba(255, 255, 255, 0.60);  font-family: var(--heading-font);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-medium);letter-spacing: var(--letter-spacing-tight); margin: 0 0 6px;}
.recent-blog-card .blog-card-summary { color: var(--color-white); font-family: var(--heading-font); font-size: var(--font-size-m); font-weight: var(--font-weight-medium);
    line-height: var(--line-height-medium); letter-spacing: var(--letter-spacing-normal); min-height: 68px;}
.blog-card .blog-card-bottom {padding: 10px 30px; border-top: 1px solid #3B3B3B; width: 100%;}
.blog-card .blog-card-link { color: var(--color-white); font-family: var(--heading-font); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center;}
.blog-card .blog-card-link img {width: 22px; height: 22px;}

/* Custom Pagination */
.custom-pagination { display: flex; justify-content: center; border-radius: 70px; border: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--color-paginationbg); max-width: 60px; margin: 15px auto 34px; padding: 5px 0;}
.custom-pagination .pagination {margin: 0;}
.custom-pagination .pagination-arrows { display: inline-flex; align-items: center; gap: 4px;}
.custom-pagination .pagination-arrows .pagination-arrow { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--color-white);
    text-decoration: none; transition: background-color .15s ease; margin: 0 2px;}
.custom-pagination .pagination-arrows .pagination-arrow:hover { background-color: rgba(255, 255, 255, 0.15);}
.custom-pagination .pagination-arrows .pagination-arrow.disabled {cursor:not-allowed; opacity:0.5;}
.custom-pagination .pagination-arrow.pagination-prev { position: relative;}
.custom-pagination .pagination-arrow.pagination-prev::after { content: ''; width: 1px; background: var(--color-paginationbdr); height: 100%; display: inline-block;
    right: -4px; position: absolute;}



/* Home loader popup */
.custom-dark-modal .modal-dialog {
    max-width: 725px;
}
.custom-dark-modal .modal-content {
    border-radius: 10px;
    background: var(--color-cardbg);
    padding: 31px 34px 24px;
}
.custom-dark-modal .modal-header {
    text-align: center;
    margin: 0 auto 31px;
}
.custom-dark-modal .modal-header .logo-header {
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 8px;
}
.custom-dark-modal .modal-body {
    padding: 20px 20px 24px;
    background: var(--color-white);
    border-radius: 10px;
}
.custom-dark-modal .modal-body, .custom-dark-modal .modal-body p {
    color: var(--color-black);
    font-family: var(--heading-font);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight); 
    letter-spacing: var(--letter-spacing-med);
}
.custom-dark-modal .modal-header, .custom-dark-modal .modal-footer {
    border: none;
    padding: 0;
}
.custom-dark-modal .modal-body p:last-child {
    margin: 0;
}
.actions-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 14px 0 0;
}
.actions-button .actions-btn {
    background: transparent;
    border: none;
}
.actions-button .actions-btn:focus-visible{
    outline: none;
}
.actions-button .actions-btn .btn-label {
    border-radius: 29px;
    background: var(--color-lgrey);
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight); 
    letter-spacing: var(--letter-spacing-med);
    display: inline-block;
    padding: 6px 20px;
    margin-right: 7px;
}

 
/* Atlas Chat app */

/* Chat app window */
.chat-app-container { position: relative; height: 100vh; overflow: hidden; max-width: 1440px; margin:auto;}
.chat-app-container .chat-app-bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}

/* Initial state */
.atlas-chat-app { position: relative; height: min(880px, 100vh); overflow: hidden;}
.atlas-chat-app .chat-atlas-input textarea { width: 100%; background: transparent; border: 0;  outline: none; resize: none; color: var(--color-white);
        font-size: var(--font-size-lg); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); min-height: 128px; }
.atlas-chat-app .chat-atlas-input textarea::placeholder { color: var(--color-white); opacity: 1; }
.atlas-chat-app .prompt-options { margin-top: 5px; display: flex; justify-content: space-between; align-items: center; }
.atlas-chat-app .prompt-options .chat-tags {display: flex; gap: 12px; }
.atlas-chat-app .prompt-options .chat-tags .chat-tag { color: var(--color-white-50); padding: 7px 12px;  border-radius: var(--radius-pill); display: flex; align-items: center; gap: 12px; transition: .25s;
                cursor: pointer; background: var(--color-white-08); border: 1px solid var(--prompt-border);  backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px); font-size: var(--font-size-m); font-weight:  var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: -2%; }
.atlas-chat-app .prompt-options .chat-tags .chat-tag:hover { background: var(--color-dark-gray); }
.atlas-chat-app .prompt-options .chat-tags .chat-tag span {margin-left: 20px; color: var(--color-beige); }
.atlas-chat-app .chat-submit { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--color-beige); color: var(--color-dark-black); display: flex; justify-content: center; align-items: center;
        transition: .3s; }
.atlas-chat-app .chat-submit:hover { transform: translateX(3px);}
.atlas-chat-app .initial-state { position: absolute; display: flex; align-items: center;  justify-content: center;
    transition: transform 0.8s cubic-bezier(.65, 0, .35, 1), opacity 0.5s ease; left: 0; right: 0; top: 150px; flex-wrap: wrap;}


/* Initial prompt */
.atlas-chat-app .initial-prompt, .atlas-chat-app .follow-up-prompt { height: auto; position: relative; width: 740px; border-radius: var(--radius-lg); }
.atlas-chat-app .prompt-options { display: flex; gap: 5px;}

/* AI STATE */
.atlas-chat-app .ai-prompt-state { position: absolute; inset: 0; padding-top: 60px; opacity: 0; visibility: hidden;
    transform: translateX(80px); transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .5s ease, visibility .5s;
    display: flex; flex-direction: column; align-items: center; background: var(--body-background-color);}
.ai-prompt-state .submitted-question { padding: 10px 16px; border-radius: var(--radius-pill); background: var(--color-white); color: var(--body-background-color); font-size: var(--font-size-m); font-weight: var(--font-weight-medium);
    font-family: var(--heading-font); line-height: var(--line-height-tight);}
.ai-prompt-state .ai-response-container { padding-bottom: 40px;}
.ai-prompt-state .ai-response { width: 100%; margin-top: 43px; display: flex; gap: 18.5px; }
.ai-prompt-state .response-icon { flex: 0 0 18px;}
.ai-prompt-state .response-content { width: 100%;}
.ai-prompt-state .response-content p { margin: 0 0 20px; color: var(--color-white); font-size: 15px; line-height: 160%; font-weight: var(--font-weight-medium); font-family: var(--heading-font);}

.ai-prompt-state .recommended { margin: 43px 0 43px -38px;}
.ai-prompt-state .recommended-title,.ai-prompt-state .follow-up-title { margin-bottom: 25px;  color: var(--color-white); font-size: 15px; line-height: 160%; font-weight: var(--font-weight-medium); font-family: var(--heading-font);}
.ai-prompt-state .article-list { display: flex; gap: 30px 60px; flex-wrap: wrap; justify-content: space-between;}
.ai-prompt-state .article-list .article-card { width: 46%; display: flex;  gap: 11px; align-items: center;}
.ai-prompt-state .article-list .article-card .article-image { width: 91px; height: 70px; flex-shrink: 0; border-radius: 5px;}
.ai-prompt-state .article-list .article-card .article-image img {width: 100%; object-fit:cover;}
.ai-prompt-state .article-list .article-card .article-date { color: var(--color-white); opacity:0.6; font-size: var(--font-size-xs); letter-spacing: -2%; line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold); text-transform: uppercase; margin: 0 0 6px;}
.ai-prompt-state .article-list .article-card .article-title { margin-top: 6px; color: var(--color-white); font-size: 15px; line-height: 110%; font-weight: var(--font-weight-medium); letter-spacing: -0.3px; font-family: var(--heading-font);}
.ai-prompt-state .follow-up-questions {margin: 43px 0 0 -38px;}
.ai-prompt-state .follow-up-question-btn { padding: 14px 20px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.10); text-align: left;
    background: rgba(50, 50, 50, 0.80); backdrop-filter: blur(15px);  margin: 0 0 4px; color: var(--color-white); width: 100%;
    font-size: 15px; line-height: 110%; font-weight: var(--font-weight-medium); letter-spacing: -0.3px; font-family: var(--heading-font); display: flex; justify-content:space-between;}


/* Active State */
.atlas-chat-app.conversation-active .initial-state { transform: translateX(-100%); opacity: 0;}
.atlas-chat-app.conversation-active .initial-prompt { transform: translateX(-120px);}
.atlas-chat-app.conversation-active .ai-prompt-state { opacity: 1; visibility: visible; transform: translateX(0);}
.atlas-chat-app.conversation-active .follow-up-prompt { opacity: 1; transform: translateY(0); margin: 0 0 40px;}


.chat-app { display: flex; min-height: 100vh; width: 100%;}
.chat-app .chat-sidebar { width: 248px; flex-shrink: 0; padding: 0 14px;  border-right: 1px solid #303030;
    display: flex; flex-direction: column; gap: 14px;}
.chat-app .chat-main-container { flex: 1;  min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; justify-content:space-between;}
.chat-app .chat-main-container .scroll-area { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 24px 80px 16px; height: 100%;}
.chat-app .chat-main-container .ai-prompt-state-container { display: flex; flex-direction: column; width: 100%; height: 100%; padding-bottom: 100px;}
.chat-app .chat-main-container .ai-prompt-state-container .submitted-question { align-self: flex-end; width: 80%; position: relative; border-bottom-right-radius:0;}
.chat-app .chat-main-container .ai-prompt-state-container .submitted-question::after { content: ''; background: url(../images/peak.png); display: inline-block; position: absolute; right: -7px;
        width: 24px; height: 14px; bottom: 0px;}
.chat-app .chat-main-container .ai-prompt-state-container .ai-response-container { align-self: flex-start; width: 90%;}
.chat-app .right-chat-panel { width: 240px; flex-shrink: 0; }
/* Follow-up Prompt */
.atlas-chat-app .follow-up-prompt { width: 100%; flex-shrink: 0;position: sticky; bottom: 0;z-index: 5;}
.atlas-chat-app .follow-up-prompt .follow-up-prompt-box {margin: 0 80px;}
.atlas-chat-app .reset-chat { position: absolute; top: 0; left: 0; z-index: 50; border: 1px solid var(--color-white);
    background: transparent; color: var(--color-white); border-radius: 4px; padding: 6px 10px; font-size: var(--font-size-sm); cursor: pointer;}
/* Let the shell grow with real content once a conversation is active,
   instead of clipping it to the hero's fixed height */
.chat-app-container:has(.atlas-chat-app.conversation-active) { height: auto; overflow: visible;}
.atlas-chat-app.conversation-active {height: auto;min-height: 100vh; overflow: visible;}
.atlas-chat-app.conversation-active .ai-prompt-state { position: static; width: 100%; }

/* optional: stop rendering the hero video once it's hidden behind the chat panel */
.chat-app-container .chat-app-bg { display: block;}
.chat-app-container:has(.atlas-chat-app.conversation-active) .chat-app-bg { display: none;}


.atlas-chat-card {border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(50, 50, 50, 0.80); backdrop-filter: blur(15px); padding: 16px;}
.chat-role-section {display:flex; align-items:center;}
    .chat-role-section .role-label { color: #A2A1A1; font-family: var(--heading-font); font-size: 10px; font-weight: 700; line-height: 110%; letter-spacing: -0.2px;
        text-transform: uppercase; margin-right: 28px;}
.role-tags {display: flex;  gap: 5px; flex-wrap: wrap;}
.role-tag { border-radius: 300px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px);padding: 4px 12px; color: var(--color-white); text-align: center; font-family: var(--heading-font);
    font-size: 12px; font-weight: 600; line-height: 110%; letter-spacing: -0.24px; margin: 0 0 5px;}
.role-tag.active { background: #CABB9B;  backdrop-filter: blur(8px); color: #171513;}
.role-tag:hover { text-decoration: none; color: #171513; background: #CABB9B;}
.chat-question-wrapper {margin: 11px 0 15px; position: relative;}
.chat-question-wrapper textarea {width: 100%; border-radius: 10px; background: var(--color-white); min-height: 120px; padding: 12px 40px 12px 12px;}
.chat-question-wrapper .chat-submit {position: absolute; bottom: 15%; right: 10px;}
.chat-prompt-options {display: flex; align-items:center; justify-content: space-between;}
.chat-prompt-options .custom-dropdown {width: 49%;}
.chat-prompt-options .chat-prompt-box {border-radius: 300px;background: rgba(255, 255, 255, 0.08); padding: 4px 12px;
backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.70); width: 100%; display: flex; justify-content: space-between; border: none; position: relative;
text-align: center; cursor:pointer; font-family: var(--heading-font); font-size: var(--font-size-m); font-weight: 600; line-height: 110%; letter-spacing: -0.26px;}


.chat-app .chat-sidebar .session-id { color: #A1A1A1; font-family: var(--heading-font); font-size: 8px; font-weight: 700; line-height: 110%; letter-spacing: -0.16px; text-transform: uppercase;}
.chat-app .chat-sidebar .conversation-list { display: flex; flex-direction: column; gap: 10px;}
.chat-app .chat-sidebar .conversation-list .conversation-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s ease, color 0.15s ease;}
.chat-app .chat-sidebar .conversation-list .conversation-item:hover, .chat-app .chat-sidebar .conversation-list .conversation-item.active { border: 1px solid rgba(255, 255, 255, 0.10); background: #2A2A29; }
.chat-app .chat-sidebar .conversation-list .conversation-item span { color: #A2A2A2; font-family: var(--heading-font); font-size: 15px; font-weight: 500; line-height: 160%; }


.right-chat-panel .chat-recommendations-card { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(50, 50, 50, 0.80); backdrop-filter: blur(15px); padding: 20px;}
.right-chat-panel .chat-recommendations-card .recommendations-card-title {color: #CABB9B; font-family: var(--heading-font); font-size: 10px; font-weight: 700; line-height: 110%; letter-spacing: -0.2px; text-transform: uppercase;}
.right-chat-panel .chat-recommendations-card .recommendations-divider { border: none; border-top: 1px solid #3B3B3B; margin: 20px 0;}
.right-chat-panel .chat-recommendations-card .recommendation-item + .chat-recommendations-card .recommendation-item {margin-top: 18px;}
.right-chat-panel .chat-recommendations-card .recommendation-date { color: var(--color-white); font-family: var(--heading-font); font-size: 8px; font-weight: 700; line-height: 110%; letter-spacing: -0.16px; text-transform: uppercase; margin: 0 0 8px;}
.right-chat-panel .chat-recommendations-card .recommendation-title { font-family: var(--heading-font); color: var(--color-white); font-size: 15px; font-weight: 500; line-height: 110%; letter-spacing: -0.3px;  margin: 0 0 13.5px;}


.question-input {
    color: #1a1a1a; /* typed text — dark, visible on white */
}

.question-input::placeholder {
    color: #8a8a8a; /* placeholder — mid-gray, visible on white */
    opacity: 1; /* Firefox lowers placeholder opacity by default; this keeps it consistent */
}
.atlas-chat-app.conversation-active .chat-app { flex: 1; min-height: 0;}
.atlas-chat-app.conversation-active .chat-main-container { height: 100%; min-height: 0;}
.atlas-chat-app.conversation-active .chat-sidebar,.atlas-chat-app.conversation-active .right-chat-panel {overflow-y: auto;}



.atlas-blog-grid-section { margin: 0 auto 40px;}

/* Filter bar - visual placeholder only, not wired to any live filtering. */
.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 20px;
}
.blog-filter-search {
    position: relative;
}
.blog-filter-field .blog-filter-search-input, .blog-filter-field .dropdown-toggle {
    border-radius: 70px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: #2B2A2A;
    padding: 10px 14px;
    width: 100%;
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    text-align: left;
}
.blog-filter-field .blog-filter-search-input::placeholder {
    color: var(--color-white);
    opacity: 1; /* Firefox lowers opacity by default without this */
}

.blog-filter-field .blog-filter-search-input::-webkit-input-placeholder {
    color: var(--color-white);
}

.blog-filter-field .blog-filter-search-input::-moz-placeholder {
    color: var(--color-white);
    opacity: 1;
}

.blog-filter-field .blog-filter-search-input:-ms-input-placeholder {
    color: var(--color-white);
}
.blog-filter-search .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.blog-filter-field .blog-filter-search-input {padding-left: 35px;}
.blog-filter-bar > *:nth-child(1),
.blog-filter-bar > *:nth-child(2) {
    flex: 2;
}

.blog-filter-bar > *:nth-child(3),
.blog-filter-bar > *:nth-child(4) {
    flex: 1;
}
.blog-filter-dropdown.custom-dropdown .dropdown-menu {
    min-width: auto;
    width: 100%;
}
.blog-filter-dropdown.custom-dropdown .dropdown-menu ul {
    margin:0;
    padding:0;
    list-style: none;
}
/* Bento grid */
.atlas-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(190px, auto);
    gap: 24px;
}


.atlas-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    margin:0;
    box-shadow: none;
    background: none;
}
.atlas-blog-card-featured{
    border-radius: 20px;
}

.atlas-blog-card:hover {
    text-decoration: none;
    color: inherit;
    opacity: .95;
    transform: none;
}

.atlas-blog-card-featured {
    min-height: 320px;
}



.atlas-blog-card .blog-card-image {
    background-color: #F9F9F9;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px 20px 0 0;
    height: 169px;
    position: relative;
    width: 100%;
}

.atlas-blog-card-featured .blog-card-image {
    height: 100%;
}
.atlas-blog-card .blog-card-image::after {
    content: '';
    background: linear-gradient(135deg, #161616 0%, #ffffff 100%);
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 20px 20px 0 0;
    opacity: 0.2;
}

.atlas-blog-card .blog-card-image-content {
    position: relative;
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 100;
}
.atlas-blog-card .blog-card-date {
    border-radius: 20px;
    background: rgba(22, 22, 22, 0.60);
    padding: 5px 8px;
    color: var(--color-white);
    text-align: center;
    font-family: var(--heading-font);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    position: absolute;
    z-index: 10;
    display: inline-block;
    top: 11px;
    left: 11px;
}
.atlas-blog-card .blog-card-date.blog-card-date-desktop {display: block;}
.atlas-blog-card .blog-card-date.blog-card-date-mobile {display: none;}

.atlas-blog-card .blog-card-publishers img {max-width: 180px; max-height: 50px; object-fit: contain;}

.atlas-blog-card .blog-card-content {
    position: relative;
    background: #2D2C2C;
    flex: 1;
    border-radius: 0 0 20px 20px;
}

.atlas-blog-card .blog-card-body {
    padding: 10px 30px 20px;
    min-height: 175px;
}
.atlas-blog-card .blog-card-title {
    margin: 0 0 16px;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 500;
    line-height: 110%; /* 18.7px */
    letter-spacing: -0.34px;
    min-height: 38px;
}

.atlas-blog-card .blog-card-text {
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    letter-spacing: -0.24px;
    min-height: 68px;
}


.atlas-blog-card-featured .blog-card-image-content {
    align-items:flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 18px;
}
.atlas-blog-card-featured .blog-card-date {
    position: static;
}

.atlas-blog-card-featured .blog-card-title {
    min-height: unset;
    margin:0;
}

.atlas-blog-card-featured .blog-card-link {
    border-radius: 50px;
    background: var(--color-white);
    padding: 12px 20px;
    color: #171513;
    font-family: var(--heading-font);
    font-size: 10px;
    font-weight: 700;
    line-height: 110%; /* 11px */
    letter-spacing: -0.2px;
    text-transform: uppercase;
    transition: all 0.5s;
    text-decoration: none;
}
.atlas-blog-card-featured .blog-card-link:hover {
    background: #171513;
    color: #ffffff;
}
/* Subscribe card - fixed, non-content slot that always follows the 2nd
   medium card in selection order. */
.atlas-blog-subscribe-card {
    border-radius: 20px;
    background: #2D2C2C;
    padding: 26px 35px 24px 30px;
    justify-content: space-between;
    align-items: flex-start;
}

.atlas-blog-subscribe-title {
    color: #CABB9B;
    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 110%; /* 26.4px */
    letter-spacing: -0.48px;
    max-width: 474px;
}

.atlas-blog-subscribe-title span {
    color: var(--color-white);
}
.subscribe-form {display: flex; gap: 10px; width: 100%;}
.subscribe-form .subscribe-input {
    flex: 1;
    min-width: 0;
    border-radius: 60px;
    background: #FFF;
    height: 40px;
    padding: 10px 10px 10px 20px;
}
.subscribe-form .subscribe-btn {
    border-radius: 60px;
    background: #CABB9B;
    height: 40px;
    padding: 10px 10px 10px 20px;
    color: #161616;
    text-align: center;
    font-family: var(--heading-font);
    font-size: var(--font-size-m);
    font-weight: 500;
    line-height: 110%; /* 14.3px */
    letter-spacing: -0.26px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.subscribe-form .subscribe-btn:hover {
    opacity: 0.9;
    transition: all 0.4s;
}

@media (min-width: 576px) {
    .atlas-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .atlas-blog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) {
    .atlas-blog-card-featured {
        grid-column: span 2;
        min-height: 378px;
    }

    .atlas-blog-subscribe-card {
        grid-column: span 2;
    }
}

/* ===== Page 2+ list view ===== */
.atlas-blog-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 576px) {
    .atlas-blog-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .atlas-blog-list-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.atlas-blog-grid-section .custom-pagination {margin: 90px auto;}

/* Shown by AtlasBlogPostLibrary.js when a filter combination matches nothing. */
.atlas-blog-no-results {
    padding: 40px 0;
    text-align: center;
    color: var(--color-white-60, rgba(255, 255, 255, 0.6));
    font-size: 14px;
}

@media (max-width: 767px) {
    .atlas-blog-filter-bar {
        flex-wrap: wrap;
    }

    .atlas-blog-filter-bar > * {
        flex: 1 1 calc(50% - 6px);
    }
}

/* Added by AtlasBlogPostLibrary.js to every card while a filter is active. The only card it
   actually changes anything for is the featured one: AtlasBlogGrid.css gives
   .atlas-blog-card-featured a 2-column/2-row span for the curated bento layout, which breaks
   once it's sitting in the flat filtered-results grid alongside an arbitrary subset of other
   cards (empty grid cells, uneven rows). This cancels ONLY that span -- it deliberately does
   NOT touch .atlas-blog-card-featured's own image/overlay styling, so the featured card still
   looks like itself, just sized as a single grid cell instead of spanning several. */
@media (min-width: 992px) {
    .atlas-blog-card-featured.atlas-blog-filtered-item {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ---- Topic filter: parent -> children flyout (AtlasBlogPostLibrary widget) ----
   Added alongside the two-panel drill-down markup in _FilterBar.cshtml and the
   panel-switching logic in AtlasBlogPostLibrary.js. Reuses the existing .sblock-item/
   .sblock-container/.dropdown-header component instead of a separate, parallel set of
   classes, so the Topic dropdown keeps the same look as Content type/Publisher. */

/* Pre-existing gap: .sblock-item's arrow icon in this widget uses class "sblock-img", but
   the only matching CSS rule (line ~200 above) targets "starter-img" instead (a different
   feature's icon class), so the blog filter dropdowns' arrows have never actually been
   constrained to 10px here. Added rather than renamed, so the Starters feature elsewhere
   keeps its own ".starter-img" rule untouched. */
.sblock-item .sblock-img {
    width: 10px;
}

.custom-dropdown .dropdown-menu .dropdown-header .btn-back {
    background: none;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    border: none;
}

/* "All <Parent>" row at the top of a child panel: same sblock-item look, just set apart
   from the actual descendant rows below it with a divider and bolder weight. */
.sblock-item.sblock-item-all {
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid var(--color-hover-grey);
    border-radius: 0;
    margin-bottom: 8px;
}

/* Descendant rows, indented one step per taxonomy level (Level 1 = direct child of the
   top-level Category, Level 2 = grandchild, and so on) so a 3-deep hierarchy like
   Alternative Investments > Private Equity > Venture Capital reads as nested, not flat. */
.sblock-item.sblock-item-level-1 {
    padding-left: 20px;
}

.sblock-item.sblock-item-level-2 {
    padding-left: 36px;
}

.sblock-item.sblock-item-level-3 {
    padding-left: 52px;
}

.sblock-item.sblock-item-level-4 {
    padding-left: 68px;
}

/* Search box "x" clear button (only shown once there's text -- see
   [data-blog-filter-search-clear] in AtlasBlogPostLibrary.js). Positioned the same way as
   .blog-filter-search .search-icon, just on the opposite side. */
.blog-filter-search .search-clear-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-filter-search .search-clear-btn img {
    width: 100%;
    height: 100%;
}

.blog-filter-field .blog-filter-search-input {
    padding-right: 30px;
}


/* Cookie consent */

/* Lock page scroll while the popup is on screen */
html:has(.cc-overlay) { overflow: hidden; }

/* ---------- Overlay: dims and blurs the page behind ---------- */
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(18, 18, 18, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: cc-fade-in 0.3s ease both;
  transition: opacity 0.25s ease;
}
.cc-overlay.cc-hide { opacity: 0; }

/* ---------- Card ---------- */
.cc-card {
  width: 100%;
  max-width: 725px;
  background: #2D2C2C;
  border-radius: 10px;
  padding: 31px 34px 24px;
  
}
.cc-overlay .cc-card { animation: cc-rise 0.3s ease both; }

.cc-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.cc-logo img {
  margin-right: 10px;
}

/* ---------- White text panel ---------- */
.cc-text {
    padding: 20px 20px 24px;
    background: var(--color-white);
    border-radius: 10px;
}
.cc-text, .cc-text p {
    color: var(--color-black);
    font-family: var(--heading-font);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-med);
}
.cc-text p:last-child {
    margin: 0;
}



/* ---------- Content block (above the chat card) ---------- */
.atlas-hero-content {
    max-width: 100%;
    margin: 0 auto 42px;
    text-align: center;
    width: 100%;
}

.atlas-hero-title {
    color: #FFF;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 42px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.84px;
    max-width: 690px;
    margin: 0 auto 30px;
}

.atlas-hero-intro {
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
    font-family: var(--font-secondary);
    font-size: 17px;
    font-weight: 400;
    line-height: 130%; /* 22.1px */
    letter-spacing: -0.34px;
    max-width: 585px;
    margin: 0 auto;
}

/* ---------- Partners (below the chat card) ---------- */
.atlas-partners {
    margin: 55px auto 80px;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

.atlas-partners-label {
    color: rgba(255, 255, 255, 0.36);
    text-align: center;
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    margin: 0 0 15px;
}
.atlas-partners-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8f8a82;
    margin: 0 0 12px;
}
/* Raise the chat card (and the Starters/Personalize menus inside it) above the partners */
.initial-state .initial-prompt .atlas-chat-card {
    position: relative !important;
    z-index: 100 !important;
}

/* The open menu itself sits on top of everything else in the card */
.initial-state .initial-prompt .atlas-chat-card .dropdown-menu.show {
    z-index: 1050 !important;
}

/* Keep the partners (and Swiper's own z-index) in a low layer of their own */
.initial-state .initial-prompt .atlas-partners {
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
}