/* HACE LJE RESEARCH - Unified Container, Footer, and Hero Banner Match */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --primary-blue: #0072CE;
  --footer-bg: #dce7f3;
  --text-dark: #333;
}

html, body, .layout-container {
  overflow-x: clip !important;
}

body {
  font-family: 'IBM Plex Sans', sans-serif !important;
  margin: 0;
  padding: 0;
}

/* --- Global Container Class (1470px) --- */
.container {
  max-width: 1470px !important;
  margin: 0 auto;
  width: 100%;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* Hide Unwanted Elements */
.site-name, #block-hace-lje-research-account-menu, .menu--account,
header .site-branding__name, header .site-branding__text, header .block-search {
  display: none !important;
}

/* Header Styles */
header.main-header-fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent !important;
  pointer-events: none;
}

header.main-header-fixed .container {
  pointer-events: auto;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.header-inner-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  width: 100% !important;
  position: relative !important;
}

.logo-wrap {
  flex-shrink: 0 !important;
  margin-right: auto;
}

.logo-wrap a img,
.logo-wrap img {
  max-width: 304px !important;
  width: auto !important;
  max-height: 52px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.nav-and-buttons {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
}

.primary-nav-wrap ul {
  display: flex !important;
  list-style: none !important;
  gap: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.primary-nav-wrap ul li a {
  text-decoration: none !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

.primary-nav-wrap {
  margin-right: 220px;
  flex-shrink: 0 !important;
}

.visit-link-wrap {
  margin-right: 220px;
  flex-shrink: 0 !important;
}

.visit-link {
  text-decoration: none !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important; /* Button font size 16px */
  padding: 12px 20px !important; /* Button padding 12px 20px */
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

/* Transparent Header Visit Link (Solid White button) */
header.main-header-fixed:not(.inner-page-header) .visit-link {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #ffffff !important;
}
header.main-header-fixed:not(.inner-page-header) .visit-link:hover {
  background-color: #f2f2f2 !important;
}

/* White Header Visit Link (Outline button) */
header.inner-page-header .visit-link {
  background-color: transparent !important;
  color: #333333 !important;
  border: 1px solid #333333 !important;
}
header.inner-page-header .visit-link:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.btn-pill {
  background-color: #0072CE !important; /* Premium brand blue button */
  color: #ffffff !important;
  padding: 12px 20px !important; /* Button padding 12px 20px */
  border-radius: 100px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 16px !important; /* Button font size 16px */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}
.btn-pill:hover {
  background-color: #00569d !important;
}

/* Desktop layout gaps and alignment (Center-aligned menu) */
@media (min-width: 1025px) {
  .logo-wrap {
    margin-right: auto !important;
  }
  .nav-and-buttons {
    margin-left: auto !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .primary-nav-wrap {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-right: 0 !important;
  }
  .visit-link-wrap {
    margin-left: 0 !important;
    margin-right: 24px !important;
  }
}

/* --- HERO BANNER SECTION --- */
.hero-banner-section {
  position: relative;
  height: 800px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end; /* Align to bottom */
  color: white;
  margin-top: 0; /* Adjusted since the header is absolute top */
  padding-bottom: 96px !important; /* 96px from the bottom */
}

/* Background Video elements */
.hero-video-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.hero-video-bg {
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
}

.hero-video-iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 177.77777778vh !important; /* 16:9 ratio */
  height: 56.25vw !important; /* 16:9 ratio */
  min-width: 100% !important;
  min-height: 100% !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
  pointer-events: none !important;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2));
  z-index: 1;
}

.hero-banner-section .container {
  position: relative;
  z-index: 2;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.hero-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
  color: white !important;
  max-width: 820px; /* Adjusted to break naturally into 2 lines */
}

.hero-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 40px !important;
  max-width: 780px !important;
}

.btn-hero {
  font-family: 'IBM Plex Sans', sans-serif !important;
  background-color: #0072CE !important;
  color: white !important;
  padding: 16px 32px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.btn-hero:hover {
  background-color: #005a9e !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 1024px) {
  .hero-banner-section {
    height: 480px !important;
    padding-bottom: 40px !important;
  }
  
  .hero-title {
    font-size: 48px !important;
    max-width: 100% !important;
  }
  
  .hero-description {
    font-size: 18px !important;
    max-width: 100% !important;
    margin-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .hero-banner-section {
    height: 600px !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
  }
  
  .hero-banner-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .hero-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    margin-bottom: 24px !important;
  }
  
  .hero-description {
    font-size: 16px !important;
    margin-bottom: 25px !important;
  }

  .btn-hero {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* --- FOOTER STYLING --- */
.main-footer {
  background-color: #D6E1EC !important; /* Soft light blue/gray matching the image */
  padding: 96px 0 !important; /* footer top and bottom padding 96px */
  color: #231F20 !important;
  box-sizing: border-box !important;
  height: 480px !important; /* footer height 480px */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.main-footer .container {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.footer-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 48px !important; /* button to border 48px */
}

.footer-left {
  display: flex !important;
  flex-direction: column !important;
}

.footer-logo {
  margin-bottom: 32px !important; /* logo to text gap 32px */
  height: 40px !important;
}

/* City of Hope | HACE lockup: wider than the HACE-only mark it replaced */
.footer-logo img {
  max-width: 234px !important;
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.footer-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* text 16px */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #231F20 !important;
  max-width: 424px !important; /* max width 424px */
  margin: 0 0 32px 0 !important; /* text to button gap 32px */
}

.footer-btn-wrap {
  display: block !important;
}

.footer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #0072CE !important; /* Premium brand blue button */
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 20px !important; /* button padding 12px 20px */
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.footer-btn:hover {
  background-color: #00569d !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.footer-right {
  display: flex !important;
}

.footer-menu-grid {
  display: flex !important;
  gap: 80px !important; /* Horizontal gap between columns */
}

.footer-menu-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important; /* Vertical gap between items */
}

.footer-menu-col a {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #231F20 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.footer-menu-col a:hover {
  color: #0072CE !important;
}

.footer-divider {
  border: 0 !important;
  border-top: 1px solid rgba(35, 31, 32, 0.2) !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important; /* border to text gap 32px */
}

.footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.legal-links {
  display: flex !important;
  gap: 24px !important;
}

.legal-links a {
  color: #231F20 !important;
  text-decoration: underline !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Privacy Policy menu 14px */
  font-weight: 400 !important;
}

.copyright {
  color: #231F20 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* copyright text 14px */
  font-weight: 400 !important;
}

/* Tablet & Mobile Footer Responsiveness */
@media (max-width: 991px) {
  .main-footer {
    height: auto !important; /* Allow variable height on mobile/tablet */
    padding: 60px 0 !important;
  }
  .footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 48px !important;
    margin-bottom: 48px !important;
  }
  .footer-menu-grid {
    gap: 48px !important;
  }
}

@media (max-width: 767px) {
  .main-footer {
    height: auto !important;
    padding: 48px 20px !important;
  }
  .main-footer .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
    margin-bottom: 40px !important;
  }
  .footer-logo {
    margin-bottom: 24px !important;
  }
  .footer-description {
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }
  .footer-menu-grid {
    gap: 40px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .legal-links {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* --- IMPACT IN NUMBERS SECTION --- */
.paragraph--type--impact-section {
  background-color: #ffffff !important;
}

.impact-header {
  text-align: center !important;
  max-width: 864px !important;
  margin: 0 auto 60px auto !important;
  padding: 0 20px !important;
}

.impact-header h2 {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #061037 !important;
  margin: 0 auto 20px auto !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  max-width: 864px !important; /* title max width 864px */
}

.impact-header .impact-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  margin: 0 auto !important;
  max-width: 618px !important; /* text max width 618px */
}

.impact-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

.impact-grid .field__items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Impact Card Styling */
.paragraph--type--impact-card {
  background-color: #EEEDEB !important; /* Premium warm light grey/off-white background matching the image */
  border-radius: 20px !important;
  padding: 32px 63px 30px 28px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: 352px !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
  text-align: left !important;
}

.paragraph--type--impact-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
}

.impact-card-stat {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  color: #061037 !important;
  line-height: 1.1 !important;
  margin-bottom: 114px !important;
  letter-spacing: -1px !important;
}

.impact-card-content {
  margin-top: 0 !important;
}

.impact-card-heading {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #061037 !important;
  line-height: 1.4 !important;
  margin: 0 0 16px 0 !important;
}

.impact-card-desc {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Responsive Fixes */
@media (max-width: 1024px) {
  .impact-header {
    max-width: 100% !important;
  }
  .impact-header h2 {
    font-size: 36px !important;
  }
  .impact-grid .field__items {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .paragraph--type--impact-card {
    height: auto !important;
    min-height: 320px !important;
    padding: 30px 24px !important;
  }
  .impact-card-stat {
    font-size: 48px !important;
    margin-bottom: 40px !important;
  }
}

@media (max-width: 767px) {
  .paragraph--type--impact-section.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .impact-header {
    margin-bottom: 31px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .impact-header h2 {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }

  .impact-header .impact-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
  }

  .impact-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .impact-grid .field__items {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .paragraph--type--impact-card {
    height: 287px !important;
    padding: 32px 16px !important;
    box-sizing: border-box !important;
  }

  .impact-card-stat {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.1 !important;
    margin-bottom: 96px !important;
  }

  .impact-card-heading {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .impact-card-desc,
  .impact-card-desc p {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
}

/* --- SUBPAGES & USER PAGES CUSTOM FIXES --- */

/* Fix header on contact page to be static relative with white background */
body.page-contact-custom header.main-header-fixed {
  position: relative !important;
  background-color: #ffffff !important;
}

/* Custom Inner Page Header (White background with dark/navy text) */
header.inner-page-header {
  position: relative !important;
  background-color: #ffffff !important;
  pointer-events: auto !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; /* Subtle border under header */
}

header.inner-page-header .header-inner-flex {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Tablet and mobile: same header padding as the home page, so the logo sits
   in the same place on every page. */
@media (max-width: 1024px) {
  header.inner-page-header .header-inner-flex {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

header.inner-page-header .primary-nav-wrap ul li a {
  color: #333333 !important;
  transition: color 0.3s ease !important;
}

header.inner-page-header .primary-nav-wrap ul li a:hover {
  color: #0072CE !important;
}

header.inner-page-header .visit-link {
  color: #333333 !important;
  transition: all 0.3s ease !important;
}

/* Mobile Navigation Hamburger Toggle Button */
.mobile-nav-toggle {
  display: none; /* Hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001; /* Above drawer backdrop */
  outline: none;
  box-shadow: none;
}

.mobile-nav-toggle .hamburger-bar {
  width: 100%;
  height: 3px;
  background-color: #ffffff; /* White bars by default (for transparent and navy headers) */
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Inner Page Header Toggle Button has dark navy bars */
header.inner-page-header .mobile-nav-toggle .hamburger-bar {
  background-color: #061037;
}

/* Toggle active states (turning into an 'X') */
.mobile-nav-toggle.active {
  position: fixed;
  right: 20px;
}

.mobile-nav-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-nav-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Ensure bars color stays correct when active */
.mobile-nav-toggle.active .hamburger-bar {
  background-color: #ffffff !important;
}

header.inner-page-header .mobile-nav-toggle.active .hamburger-bar {
  background-color: #061037 !important;
}

/* Mobile Navigation Backdrop Overlay */
.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 28, 58, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 998;
}

.mobile-nav-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Responsive media queries for Mobile Header Drawer */
@media (max-width: 1024px) {
  .container,
  header.main-header-fixed .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mobile-nav-toggle {
    display: flex;
  }
  
  .header-inner-flex {
    justify-content: space-between !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }


  .logo-wrap {
    margin-right: 0 !important;
  }
  
  .logo-wrap a img {
    width: 210px !important;
    height: auto !important;
  }
  
  .nav-and-buttons {
    position: fixed;
    top: 0;
    right: -100%; /* Drawer starts off screen on the right */
    width: 320px;
    height: 100vh;
    background-color: #061037; /* Dark navy for home/contact */
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 40px 40px 40px;
    box-sizing: border-box;
    transition: right 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 999;
    gap: 40px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    display: flex !important; /* Force flex container in vertical drawer */
  }
  
  header.inner-page-header .nav-and-buttons {
    background-color: #ffffff;
    box-shadow: -10px 0 30px rgba(10, 28, 58, 0.08);
  }
  
  .nav-and-buttons.active {
    right: 0 !important;
  }
  
  .primary-nav-wrap {
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .primary-nav-wrap ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
  }
  
  .primary-nav-wrap ul li {
    width: 100% !important;
  }
  
  .primary-nav-wrap ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    display: block !important;
    transition: color 0.3s ease !important;
  }
  
  header.inner-page-header .primary-nav-wrap ul li a {
    color: #061037 !important;
  }
  
  .primary-nav-wrap ul li a:hover {
    color: #ffffff !important;
  }
  
  header.inner-page-header .primary-nav-wrap ul li a:hover {
    color: var(--primary-blue) !important;
  }
  
  .visit-link-wrap {
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .visit-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    display: block !important;
    transition: color 0.3s ease !important;
  }
  
  header.inner-page-header .visit-link {
    color: #061037 !important;
  }
  
  .visit-link:hover {
    color: #ffffff !important;
  }
  
  header.inner-page-header .visit-link:hover {
    color: var(--primary-blue) !important;
  }
  
  .contact-btn-wrap {
    width: 100% !important;
    margin-top: auto; /* Push contact button to bottom of drawer */
  }
  
  .contact-btn-wrap .btn-pill {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 14px 35px !important;
    font-size: 16px !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Position and style local tasks (tabs) block above the login form on user pages */
body.path-user .block-local-tasks-block {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

body.path-user ul.tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.path-user ul.tabs li {
  margin: 0;
}

body.path-user ul.tabs li a {
  text-decoration: none;
  color: #061037;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #eef2f6;
  transition: all 0.2s;
  display: inline-block;
}

body.path-user ul.tabs li a.is-active {
  color: #ffffff;
  background-color: #0072CE;
  font-weight: 600;
}

body.path-user ul.tabs li a:hover:not(.is-active) {
  background-color: #e0e6ed;
}

/* Center and style the login form container */
body.path-user .main-content-wrapper {
  padding: 120px 0 80px 0; /* Clear space for absolute tabs */
  background-color: #f7f9fc;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

body.path-user #block-hace-lje-research-content {
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
}

body.path-user #block-hace-lje-research-content h1.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #061037;
  margin-bottom: 30px;
  text-align: center;
}

body.path-user .user-login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.path-user .form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.path-user .form-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

body.path-user .form-item input {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

body.path-user .form-item input:focus {
  border-color: #0072CE;
}

body.path-user .form-actions {
  margin-top: 10px;
}

body.path-user input.form-submit {
  width: 100%;
  background-color: #0072CE !important;
  color: white !important;
  padding: 12px !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer;
  transition: background-color 0.2s !important;
}

body.path-user input.form-submit:hover {
  background-color: #005a9e !important;
}

/* --- TWO PROGRAMS GRID SECTION --- */
.paragraph--type--programs-section {
  background-color: #F1F1F1; /* Default brand light grey fallback */
}

.programs-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #061037 !important;
  text-align: center !important;
  margin: 0 0 64px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.programs-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

.programs-grid .field__items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

.programs-grid .field__items:has(> .field__item:only-child) {
  grid-template-columns: 1fr !important;
}

/* Program Card Layout */
.paragraph--type--program-card {
  position: relative !important;
  width: 100% !important;
  height: 700px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  cursor: pointer !important;
}

/* Overflow wrapper for zoom hover */
.program-card-image-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.program-card-image-wrap,
.program-card-image-wrap .field,
.program-card-image-wrap .field__items,
.program-card-image-wrap .field__item,
.program-card-image-wrap .media,
.program-card-image-wrap picture,
.program-card-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.program-card-image-wrap img {
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Zoom effect on card hover */
.paragraph--type--program-card:hover .program-card-image-wrap img,
.paragraph--type--program-card:hover .program-card-image-wrap picture img,
.paragraph--type--program-card:hover .program-card-image-wrap .media img {
  transform: scale(1.03) !important;
}

/* Semi-transparent dark bottom gradient overlay */
.program-card-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 50% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Absolute content wrapper */
.program-card-content {
  position: absolute !important;
  bottom: 42px !important;
  left: 28px !important;
  right: 28px !important; /* Allow wrapping */
  z-index: 3 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.paragraph--type--program-card:hover .program-card-content {
  transform: translateY(-130px) !important;
}

.program-card-name {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 32px !important; /* Card title 32px */
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Card Hover overlay */
.program-card-hover-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to top, #000000 0%, rgba(255, 255, 255, 0.2) 100%) !important;
  z-index: 2 !important;
  opacity: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: none !important;
}

.paragraph--type--program-card:hover .program-card-hover-overlay {
  opacity: 1 !important;
}

/* Collapsed content container sitting below the title */
.program-card-collapsed-content {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  opacity: 0 !important;
  transform: translateY(15px) !important;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: none !important;
}

.paragraph--type--program-card:hover .program-card-collapsed-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Card Hover text */
.program-card-hover-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.8) !important; /* Slight opacity matching mockup */
  line-height: 1.5 !important;
  margin: 12px 0 0 0 !important;
  max-width: 420px !important;
}

/* Card Hover Button */
.program-card-btn-wrap {
  margin-top: 20px !important;
}

.program-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 28px !important;
  background-color: #ffffff !important;
  color: #0F1B32 !important; /* Dark slate text */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 30px !important;
  letter-spacing: 0.2px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Make sure active hover on the inner element shows clean styling */
.paragraph--type--program-card:hover .program-card-btn:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Whole card clickable link overlay */
.program-card-click-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
}

/* --- WORK WITH US SECTION --- */
.paragraph--type--work-with-us-section {
  background-color: #ffffff; /* Default fallback background */
}

.work-inner {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.work-header {
  text-align: left !important;
  margin-bottom: 48px !important; /* Text to card gap: 48px */
  max-width: 640px !important; /* Title and Text max width 640px */
}

.work-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #061037 !important;
  margin: 0 0 16px 0 !important; /* Title to text gap: 16px */
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.work-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #231F20 !important;
  line-height: 1.6 !important;
  max-width: 640px !important; /* Title and Text max width 640px */
  margin: 0 !important;
}

.work-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

.work-grid .field__items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important; /* Card to card gap: 24px */
  width: 100% !important;
}

/* Work Card Layout */
.paragraph--type--work-card {
  position: relative !important;
  width: 100% !important;
  height: 500px !important; /* Card height 500px */
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  cursor: pointer !important;
}

/* Overlay wrapper for zoom hover */
.work-card-image-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.work-card-image-wrap,
.work-card-image-wrap * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.work-card-image-wrap img,
.work-card-image-wrap picture img,
.work-card-image-wrap .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Zoom effect on card hover */
.paragraph--type--work-card:hover .work-card-image-wrap img,
.paragraph--type--work-card:hover .work-card-image-wrap picture img,
.paragraph--type--work-card:hover .work-card-image-wrap .media img {
  transform: scale(1.08) !important;
}

/* Semi-transparent dark bottom gradient overlay */
.work-card-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 60% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Absolute content wrapper */
.work-card-content {
  position: absolute !important;
  bottom: 32px !important; /* Card padding bottom 32px */
  left: 28px !important;  /* Card padding left 28px */
  right: 28px !important; /* Card padding right 28px */
  z-index: 3 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 332px !important;
}

.work-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 36px !important; /* Size 36px */
  font-weight: 400 !important; /* Weight 400 */
  font-style: normal !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.work-card-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Size 14px */
  font-weight: 400 !important; /* Weight 400 */
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.5 !important;
  margin: 0 0 20px 0 !important; /* Text to button gap 20px */
  max-width: 90% !important;
}

.work-card-btn-wrap {
  pointer-events: auto !important;
}

.work-card-btn {
  display: inline-block !important;
  padding: 15px 20px !important; /* Button padding 15px 20px */
  background-color: #991C00 !important; /* Button bg #991C00 (layout 1) */
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 500 !important; /* Weight 500 */
  font-style: normal !important;
  border: none !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(153, 28, 0, 0.2) !important;
  text-decoration: none !important;
  text-align: center !important;
}

.work-card-btn:hover {
  background-color: #b22000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(153, 28, 0, 0.3) !important;
}

/* Responsive for Work With Us */
@media (max-width: 1024px) {
  .paragraph--type--work-with-us-section {
    padding: 120px 0 90px 0 !important;
  }
  .work-header {
    margin-bottom: 36px !important;
  }
  .work-title {
    font-size: 38px !important;
  }
  .paragraph--type--work-card {
    height: 450px !important;
  }
  .work-card-title {
    font-size: 30px !important;
  }
}

@media (max-width: 767px) {
  .work-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .paragraph--type--work-with-us-section {
    }
  .work-header {
    margin-bottom: 32px !important; /* Text to card gap 32px */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important;
  }
  .work-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 24px !important; /* Title Size 24px */
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 12px !important;
  }
  .work-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important; /* Text Size 16px */
    font-weight: 400 !important;
    font-style: normal !important;
    max-width: 100% !important;
  }
  .work-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .work-grid .field__items {
    grid-template-columns: 1fr !important;
    gap: 24px !important; /* Card to card gap 24px */
  }
  .paragraph--type--work-card {
    height: 500px !important; /* Card height 500px */
    border-radius: 20px !important;
  }
  .work-card-content {
    bottom: 24px !important; /* Card padding bottom 24px */
    left: 16px !important;  /* Card padding left 16px */
    right: 16px !important; /* Card padding right 16px */
  }
  .work-card-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 24px !important; /* Title Size 24px */
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 16px !important;
  }
  .work-card-description {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important; /* Text Size 14px */
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 20px !important; /* Text button gap 20px */
    max-width: 100% !important;
  }
  .work-card-btn {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important; /* Button Size 16px */
    font-weight: 500 !important; /* Weight 500 (Medium) */
    font-style: normal !important;
    padding: 11px 13px !important; /* Button padding 11px 13px */
  }
}

/* Whole card clickable link overlay */
.work-card-click-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4 !important;
}

/* Responsive Fixes */
@media (max-width: 1024px) {
  .paragraph--type--programs-section {
    }
  .programs-title {
    font-size: 38px !important;
    margin-bottom: 40px !important;
  }
  .programs-grid .field__items {
    gap: 20px !important;
  }
  .paragraph--type--program-card {
    height: 500px !important;
    border-radius: 16px !important;
  }
  .program-card-content {
    bottom: 30px !important;
    left: 20px !important;
    right: 20px !important;
  }
  .program-card-name {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .program-card-hover-text {
    font-size: 15px !important;
  }
}

@media (max-width: 767px) {
  .paragraph--type--programs-section .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .programs-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 40px !important;
    line-height: 1.25 !important;
  }
  
  .programs-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .programs-grid .field__items {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .paragraph--type--program-card {
    height: 400px !important;
    border-radius: 16px !important;
  }
  
  .program-card-content {
    bottom: 36px !important;
    left: 24px !important;
    right: 24px !important;
  }
  
  .program-card-name {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
  }
  
  .program-card-hover-text {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
  }

  .program-card-btn {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    padding: 11px 20px !important;
  }
}

/* --- SINGLE IMAGE BANNER SECTION --- */
.paragraph--type--single-image {
  background-color: #ffffff !important;
}

.paragraph--type--single-image .container {
  max-width: 1470px !important;
}

.single-image-wrap {
  box-sizing: border-box !important;
}

.single-image-wrap img,
.single-image-wrap picture img,
.single-image-wrap .media img {
  width: 100% !important;
  height: 700px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s ease !important;
}

/* Premium micro-hover effect */
.single-image-wrap:hover img,
.single-image-wrap:hover picture img,
.single-image-wrap:hover .media img {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 1024px) {
  .paragraph--type--single-image {
    }
  .single-image-wrap img,
  .single-image-wrap picture img,
  .single-image-wrap .media img {
    height: 480px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 767px) {
  .paragraph--type--single-image .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .single-image-wrap img,
  .single-image-wrap picture img,
  .single-image-wrap .media img {
    height: 350px !important;
    border-radius: 12px !important;
  }
}

/* --- INTERACTIVE DASHBOARD SECTION --- */
.paragraph--type--dashboard-section {
  position: relative !important;
  background-color: #D5E1ED; /* Fallback default light blue-grey background */
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.paragraph--type--dashboard-section.has-section-bg-image {
  background-color: transparent !important;
}

.dashboard-section-bg-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.dashboard-section-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.dashboard-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1470px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dynamic contrast overrides for dark background on Dashboard Section */
.dashboard-section--dark-bg {
  color: #ffffff !important;
}
.dashboard-section--dark-bg .dashboard-title {
  color: #ffffff !important;
}
.dashboard-section--dark-bg .dashboard-subtitle {
  color: rgba(255, 255, 255, 0.8) !important;
}
.dashboard-section--dark-bg .dashboard-tab-btn {
  color: rgba(255, 255, 255, 0.5) !important;
}
.dashboard-section--dark-bg .dashboard-tab-btn:hover {
  color: #ffffff !important;
}
.dashboard-section--dark-bg .dashboard-tab-btn.is-active {
  color: #FF2F01 !important; /* Active brand red text */
}
.dashboard-section--dark-bg .dashboard-tabs-list {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}

.dashboard-section--light-bg {
  color: #061037 !important;
}
.dashboard-section--light-bg .dashboard-title {
  color: #061037 !important;
}
.dashboard-section--light-bg .dashboard-subtitle {
  color: #4E5D78 !important;
}

.dashboard-header {
  text-align: center !important;
  margin-bottom: 60px !important;
  max-width: 717px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.dashboard-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #061037 !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.dashboard-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  color: #4E5D78 !important;
  line-height: 24px !important;
  margin: 0 auto !important;
}

.dashboard-subtitle p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

.dashboard-body {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Vertical Tab Buttons Column */
.dashboard-tabs-column {
  display: flex !important;
  flex-direction: column !important;
  width: 280px !important;
  flex-shrink: 0 !important;
  margin-right: 112px !important; /* Tab to card gap 112px */
}

.dashboard-tabs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-left: 2px solid #D1D9E6 !important; /* Unbroken vertical line */
  position: relative !important;
}

.dashboard-tab-btn {
  background: transparent !important;
  border: none !important;
  margin-left: -2px !important; /* Position perfectly over parent border */
  padding: 5px 0 5px 24px !important;
  text-align: left !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #D5E1ED !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  list-style: none !important;
  list-style-type: none !important;
}

.dashboard-tab-btn::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(to bottom, rgba(255, 47, 1, 0) 0%, #FF2F01 50%, rgba(255, 47, 1, 0) 100%) !important; /* Elegant fading red vertical line */
  z-index: 2 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.dashboard-tab-btn::after {
  content: '' !important;
  position: absolute !important;
  left: -3px !important; /* Center the dot perfectly on the 2px line */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #FF2F01 !important; /* Glowing red brand dot */
  box-shadow: 0 0 6px rgba(255, 47, 1, 0.5) !important;
  z-index: 3 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.dashboard-tab-btn:hover {
  color: #FF2F01 !important;
}

.dashboard-tab-btn.is-active {
  color: #FF2F01 !important; /* Active brand red text */
  font-weight: 400 !important;
}

/* Enlarge the active label with a transform, not font-size, so selecting a
   tab never reflows the list and pushes the labels below it down. */
.dashboard-tab-btn .tab-text {
  display: inline-block !important;
  transform-origin: left center !important;
  transition: transform 0.3s ease !important;
}

.dashboard-tab-btn.is-active .tab-text {
  transform: scale(1.25) !important;
}

.dashboard-tab-btn.is-active::before,
.dashboard-tab-btn.is-active::after {
  opacity: 1 !important;
}

/* Card Column (Middle) */
.dashboard-card-column {
  position: relative !important;
  height: 500px !important;
  width: 443px !important; /* Right side fast card width 443px */
  flex-shrink: 0 !important;
  margin-right: 24px !important; /* Card to image card gap 24px */
}

.dashboard-cards-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.dashboard-card-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #061037 !important; /* Deep brand navy background */
  border-radius: 20px !important;
  padding: 32px 28px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(15px) !important;
  transition: none !important;
  box-shadow: 0 12px 40px rgba(10, 28, 58, 0.12) !important;
}

.dashboard-card-panel.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  z-index: 5 !important;
}

.dashboard-card-panel.has-bg-image {
  background-color: transparent !important;
}

/* Card Background Image styles */
.dashboard-card-bg-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.dashboard-card-bg-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
}

.dashboard-card-bg-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: transparent !important;
  z-index: 2 !important;
  border-radius: inherit !important;
}

.dashboard-card-panel .card-header,
.dashboard-card-panel .card-divider,
.dashboard-card-panel .card-description,
.dashboard-card-panel .card-stat-wrapper {
  position: relative !important;
  z-index: 3 !important;
}

.card-header {
  display: flex !important;
  align-items: flex-start !important; /* Icon stays top-aligned when the title wraps */
  gap: 20px !important;
}

.card-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  /* Never shrink: a wrapping card title squeezed the circle into an oval. */
  flex: 0 0 48px !important;
  border-radius: 50% !important;
  background-color: #0072CE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
}

.card-icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.card-icon-img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
}

.card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

.card-divider {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-top: 110px !important; /* Reduced to fit 500px card container */
  margin-bottom: 24px !important;
  width: 100% !important;
}

.card-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  color: #D1D9E6 !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

.card-description p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

.card-stat-wrapper {
  margin-top: auto !important; /* Dynamically push to the bottom to respect padding-bottom */
}

.card-stat {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  letter-spacing: -1px !important;
}

.card-stat-sub {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  color: #8F9CAE !important;
  font-weight: 400 !important;
}

/* Image Column (Right) */
.dashboard-image-column {
  position: relative !important;
  height: 500px !important;
  width: 467px !important; /* right card width 467px */
  flex-shrink: 0 !important;
}

.dashboard-images-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.dashboard-image-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  padding: 32px 24px !important; /* Right image card padding 32px 24px */
  box-sizing: border-box !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.98) !important;
  transition: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.dashboard-image-panel.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
  z-index: 5 !important;
}

.panel-image-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.panel-image-container img,
.panel-image-container picture img,
.panel-image-container .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.panel-image-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.panel-image-label {
  position: absolute !important;
  bottom: 32px !important; /* Positioning inset matches padding bottom */
  left: 24px !important;  /* Positioning inset matches padding left */
  z-index: 3 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  pointer-events: none !important;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 1024px) {
  .dashboard-body {
    display: grid !important;
    grid-template-columns: 280px 1fr 1fr !important;
    width: 100% !important;
    gap: 24px !important;
  }
  .dashboard-tabs-column {
    width: auto !important;
    margin-right: 0 !important;
  }
  .dashboard-card-column,
  .dashboard-image-column {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .dashboard-title {
    font-size: 38px !important;
  }
  .dashboard-card-panel {
    padding: 24px !important;
  }
  .card-title {
    font-size: 24px !important;
  }
  .card-divider {
    margin-top: 100px !important;
  }
  .card-stat-wrapper {
    margin-top: auto !important;
  }
  .card-stat {
    font-size: 48px !important;
  }
  .panel-image-label {
    font-size: 22px !important;
    bottom: 24px !important;
    left: 16px !important;
  }
}

@media (max-width: 767px) {
  .paragraph--type--dashboard-section .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .dashboard-header {
    margin-bottom: 53px !important;
  }

  .dashboard-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 15px !important;
    line-height: 1.25 !important;
  }

  .dashboard-subtitle,
  .dashboard-subtitle p {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
  }

  .dashboard-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .dashboard-tabs-column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 36px !important;
  }

  .dashboard-tabs-column::before {
    content: "" !important;
    display: block !important;
    height: 8px !important;
    width: 120px !important;
    margin: 0 auto 16px auto !important;
    background: radial-gradient(circle, #061037 3px, transparent 4px),
                linear-gradient(to right, #061037, #061037) 0 3px / 48px 1px no-repeat,
                linear-gradient(to right, #061037, #061037) 100% 3px / 48px 1px no-repeat !important;
  }

  .dashboard-tabs-list {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 24px !important;
    padding-bottom: 5px !important;
    border-left: none !important;
    border-bottom: none !important;
    width: 100% !important;
  }

  .dashboard-tab-btn {
    border-left: none !important;
    margin-left: 0 !important;
    border-bottom: none !important;
    padding: 6px 12px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(10, 28, 58, 0.5) !important;
  }

  .dashboard-tab-btn::before,
  .dashboard-tab-btn::after {
    display: none !important;
  }

  .dashboard-tab-btn.is-active {
    color: #061037 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
  }

  .dashboard-card-column {
    width: 100% !important;
    margin-right: 0 !important;
    height: 395px !important;
    margin-bottom: 40px !important;
  }

  .dashboard-card-panel {
    height: 395px !important;
    padding: 25px 22px 32px 22px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .card-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
  }

  .card-divider {
    margin-top: 120px !important;
    margin-bottom: 20px !important;
  }

  .card-description,
  .card-description p {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
  }

  .card-stat-wrapper {
    margin-top: auto !important;
  }

  .card-stat {
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 50px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
  }

  .card-stat-sub {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 11px !important;
  }

  .dashboard-image-column {
    width: 100% !important;
    margin-right: 0 !important;
    height: 373px !important;
  }

  .dashboard-image-panel {
    height: 373px !important;
    padding: 23px 17px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  .panel-image-label {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    bottom: 23px !important;
    left: 17px !important;
  }
}

/* --- VIDEO GALLERY SECTION --- */
.paragraph--type--video-gallery {
  /* Section top bottom padding 124px */
}

.video-gallery-inner {
  display: flex !important;
  flex-direction: column !important;
}

.video-gallery-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 50px !important;
  width: 100% !important;
  gap: 40px !important;
}

.vg-header-left {
  flex: 1 !important;
  max-width: 750px !important;
}

.vg-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Section title size 48px */
  font-weight: 400 !important; /* Weight 400 */
  color: #061037 !important; /* Color #061037 */
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.vg-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Section description size 16px */
  font-weight: 400 !important; /* Weight 400 */
  color: #3D3D3D !important; /* Color #3D3D3D */
  line-height: 1.6 !important;
}

.vg-description p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

.vg-header-right {
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
}

.vg-action-btn {
  display: inline-block !important;
  background-color: #0072CE !important; /* Button bg #0072CE */
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Weight 500 (Medium) */
  padding: 12px 21px !important; /* Button padding 12px 21px */
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 114, 206, 0.2) !important;
}

.vg-action-btn:hover {
  background-color: #00569d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 114, 206, 0.3) !important;
  color: #ffffff !important;
}

/* Two Column Video Grid */
.video-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  width: 100% !important;
}

.video-card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.video-card {
  position: relative !important;
  height: 600px !important; /* Video card height 600px */
  border-radius: 20px !important; /* Video card radius 20px */
  overflow: hidden !important;
  background-color: #000000 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.video-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
}

.video-card-details {
  margin-top: 28px !important; /* Video card to title gap 28px */
  display: flex !important;
  flex-direction: column !important;
}

.video-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Title 24px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Brand dark blue */
  line-height: 1.3 !important;
  margin: 0 !important;
}

.video-card-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Text 14px */
  font-weight: 400 !important;
  font-style: normal !important;
  color: #5A6B82 !important; /* Cool grey text */
  line-height: 1.5 !important;
  margin: 8px 0 0 0 !important; /* Title to text gap 8px */
}

.video-card-poster {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  cursor: pointer !important;
}

.video-poster-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.video-card:hover .video-poster-img {
  transform: scale(1.04) !important;
}

/* Translucent Glassmorphic Play Button */
.video-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 110px !important;
  height: 68px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  outline: none !important;
}

.video-play-btn svg {
  width: 24px !important;
  height: 24px !important;
  transition: transform 0.3s ease !important;
}

.video-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.08) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

.video-card:hover .video-play-btn svg {
  transform: scale(1.1) !important;
}

/* Responsive Player Containers */
.video-player-container {
  width: 100% !important;
  height: 100% !important;
}

.video-iframe,
.video-element {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 24px !important;
}

/* Responsive Styling for Mobile Devices */
@media (max-width: 991px) {
  .paragraph--type--video-gallery {
    }
  .video-gallery-grid {
    gap: 30px !important;
  }
  .video-card {
    height: 420px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 767px) {
  .paragraph--type--video-gallery .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .video-gallery-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  .video-gallery-header {
    display: contents !important;
  }

  .vg-header-left {
    order: 1 !important;
    margin-bottom: 32px !important; /* Tab to card gap 32px */
  }

  .vg-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .vg-description,
  .vg-description p {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
  }

  .video-gallery-grid {
    order: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important; /* Card to card gap 32px */
    margin-bottom: 32px !important; /* Card to button gap 32px */
  }

  .video-card {
    height: 300px !important;
    border-radius: 16px !important;
  }

  .vg-header-right {
    order: 3 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .vg-action-btn {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    padding: 11px 14px !important;
  }

  .video-play-btn {
    width: 90px !important;
    height: 56px !important;
    border-radius: 16px !important;
  }

  .video-play-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* --- CALL TO ACTION PARAGRAPH --- */
.paragraph--type--call-to-action {
  background-color: transparent !important;
}

.paragraph--type--call-to-action .container {
  max-width: 1470px !important;
}

.cta-container-wrap {
  display: block !important;
}

.cta-card-inner {
  position: relative !important;
  background-color: #08154A; /* Premium dark navy fallback (#08154A) */
  border-radius: 20px !important; /* Section radius 20px */
  padding: 104px 40px !important; /* Shortened from 187px (review item 5) */
  text-align: center !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 20px 50px rgba(5, 15, 44, 0.15) !important;
}

/* Curved shapes overlay matching mockup abstract lines */
.cta-shapes-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle at 15% 25%, rgba(0, 114, 206, 0.18) 0%, transparent 45%),
              radial-gradient(circle at 85% 75%, rgba(255, 47, 1, 0.06) 0%, transparent 45%) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.cta-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 720px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.cta-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 56px !important; /* Section title size 56px */
  font-weight: 400 !important; /* Weight 400 */
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.cta-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Section description size 16px */
  font-weight: 400 !important; /* Weight 400 */
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.6 !important;
  margin-bottom: 36px !important; /* Description to form gap 36px */
  max-width: 640px !important; /* Wide enough for two lines, not three (review item 5) */
}

.cta-description p {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Subscription Form & Inline Input Group */
.cta-subscribe-form {
  width: 100% !important;
  max-width: 463px !important; /* Subscriber form width 463px */
}

.cta-form-group {
  display: flex !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 100px !important;
  padding: 0 !important; /* Reset padding to let input/button have 60px height */
  width: 100% !important;
  height: 60px !important; /* input and button wrapper height 60px */
  align-items: center !important;
  gap: 32px !important; /* input and button gap 32px */
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.cta-form-group:focus-within {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

.cta-email-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 0 32px !important; /* Reset vertical padding so it aligns in centered flex */
  height: 60px !important; /* Explicit 60px height */
  box-sizing: border-box !important;
}

.cta-email-input::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.cta-email-input::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.cta-email-input:-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.cta-email-input::-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.cta-email-input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.cta-submit-btn {
  background-color: #0072CE !important; /* Premium brand blue button */
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 100px 100px 0 !important; /* Fits corner overflow precisely */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 0 32px !important; /* button padding left right 32px */
  height: 60px !important; /* Explicit 60px height matching input */
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.cta-submit-btn:hover {
  background-color: #00569d !important;
  transform: scale(1.02) !important;
}

/* Action Button Alternative Link */
.cta-action-btn {
  display: inline-block !important;
  background-color: #0072CE !important;
  color: #ffffff !important;
  border-radius: 100px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 114, 206, 0.2) !important;
}

.cta-action-btn:hover {
  background-color: #00569d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 114, 206, 0.3) !important;
  color: #ffffff !important;
}

/* Responsive CTA Styles */
@media (max-width: 991px) {
  .paragraph--type--call-to-action {
    }
  .cta-card-inner {
    padding: 72px 30px !important;
  }
  .cta-title {
    font-size: 42px !important;
  }
}

@media (max-width: 767px) {
  .paragraph--type--call-to-action {
    }
  .cta-card-inner {
    padding: 60px 20px !important;
    border-radius: 20px !important; /* Section radius 20px */
  }
  .cta-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 28px !important;
  }
  .cta-description,
  .cta-description p {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important; /* Call to Action text in mobile 16px */
    margin-bottom: 28px !important;
  }
  .cta-form-group {
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 16px !important; /* Spacing between input and button 16px */
  }
  .cta-email-input {
    width: 100% !important;
    background: transparent !important;
    border: 1.5px solid #ffffff !important; /* Crisp white border */
    border-radius: 100px !important;
    padding: 0 24px !important;
    color: #ffffff !important;
    height: 60px !important; /* Explicit 60px height on mobile */
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important; /* Remove margin */
  }
  .cta-email-input::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-email-input::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-email-input:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-email-input::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-email-input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-email-input:focus {
    border-color: rgba(255, 255, 255, 0.9) !important;
  }
  .cta-submit-btn {
    width: 100% !important;
    background-color: #0072CE !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 0 24px !important;
    height: 60px !important; /* Explicit 60px height on mobile */
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important; /* Remove margin */
  }
}

/* --- CTA WEBFORM STYLING INTEGRATION --- */
.paragraph--type--call-to-action .field--name-field-cta-webform .field__label {
  display: none !important;
}

.cta-webform-wrapper {
  width: 100% !important;
  max-width: 463px !important; /* Subscriber form width 463px */
  margin: 0 auto !important;
}

/* Forcefully clean up the Webform: hide all elements except the Email field wrapper, form actions, hidden tokens, and confirmation message */
.cta-webform-wrapper form > *:not(.form-type-email):not(.form-item-email):not(.form-item-mail):not(.form-actions):not(input[type="hidden"]):not(.messages):not(.webform-message):not([data-drupal-messages]):not(.webform-confirmation) {
  display: none !important;
}

.cta-webform-wrapper .webform-confirmation {
  display: block !important;
}

/* Desktop Layout: Separated inline layout matching mockup perfectly */
@media (min-width: 768px) {
  .cta-webform-wrapper form {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
  }
  
  .cta-webform-wrapper .js-form-item,
  .cta-webform-wrapper .form-item {
    flex: 1 !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
  }
  
  .cta-webform-wrapper form label {
    display: none !important;
  }
  
  /* Mockup standalone outline pill for Email Input */
  .cta-webform-wrapper form input[type="text"],
  .cta-webform-wrapper form input[type="email"] {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 100px !important;
    padding: 0 28px !important; /* Changed to vertical 0 since height is 60px */
    height: 60px !important; /* Explicit 60px height */
    color: #ffffff !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
  }
  
  /* Make placeholder text pure white across browsers */
  .cta-webform-wrapper form input[type="text"]::-webkit-input-placeholder,
  .cta-webform-wrapper form input[type="email"]::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]::-moz-placeholder,
  .cta-webform-wrapper form input[type="email"]::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]:-ms-input-placeholder,
  .cta-webform-wrapper form input[type="email"]:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]::-ms-input-placeholder,
  .cta-webform-wrapper form input[type="email"]::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]::placeholder,
  .cta-webform-wrapper form input[type="email"]::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  
  .cta-webform-wrapper form input[type="text"]:focus,
  .cta-webform-wrapper form input[type="email"]:focus {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05) !important;
  }
  
  .cta-webform-wrapper form .form-actions {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Mockup standalone solid blue pill for Subscribe Button */
  .cta-webform-wrapper form input[type="submit"],
  .cta-webform-wrapper form button[type="submit"] {
    background-color: #0072CE !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 100px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    padding: 0 44px !important; /* Changed to vertical 0 since height is 60px */
    height: 60px !important; /* Explicit 60px height */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important; /* Changed to inline-flex to center content vertically */
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0, 114, 206, 0.2) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  .cta-webform-wrapper form input[type="submit"]:hover,
  .cta-webform-wrapper form button[type="submit"]:hover {
    background-color: #00569d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 114, 206, 0.3) !important;
  }
}

/* Mobile Responsiveness for Webforms */
@media (max-width: 767px) {
  .cta-webform-wrapper form {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 16px !important; /* Spacing between elements 16px */
    width: 100% !important;
    align-items: center !important;
  }
  .cta-webform-wrapper .js-form-item,
  .cta-webform-wrapper .form-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important; /* Remove wrapper margins */
  }
  
  .cta-webform-wrapper form label {
    display: none !important;
  }
  
  .cta-webform-wrapper form input[type="text"],
  .cta-webform-wrapper form input[type="email"] {
    width: 100% !important;
    background: transparent !important;
    border: 1.5px solid #ffffff !important; /* Crisp white border */
    border-radius: 100px !important;
    padding: 0 24px !important; /* Reset vertical padding since height is 60px */
    height: 60px !important; /* Explicit 60px height */
    text-align: center !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    margin: 0 !important; /* Remove input margins */
  }
  
  /* Make mobile placeholder text pure white across browsers */
  .cta-webform-wrapper form input[type="text"]::-webkit-input-placeholder,
  .cta-webform-wrapper form input[type="email"]::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]::-moz-placeholder,
  .cta-webform-wrapper form input[type="email"]::-moz-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]:-ms-input-placeholder,
  .cta-webform-wrapper form input[type="email"]:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]::-ms-input-placeholder,
  .cta-webform-wrapper form input[type="email"]::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .cta-webform-wrapper form input[type="text"]::placeholder,
  .cta-webform-wrapper form input[type="email"]::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  
  .cta-webform-wrapper form .form-actions {
    width: 100% !important;
    margin: 0 !important; /* Remove actions wrapper margins */
  }
  .cta-webform-wrapper form input[type="submit"],
  .cta-webform-wrapper form button[type="submit"] {
    width: 100% !important;
    background-color: #0072CE !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 0 24px !important; /* Reset vertical padding since height is 60px */
    height: 60px !important; /* Explicit 60px height */
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    display: inline-flex !important; /* Use inline-flex to center text vertically */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    margin: 0 !important; /* Remove submit margins */
  }
}

/* --- FOOTER WEBFORM STYLING INTEGRATION --- */
.footer-webform-wrapper {
  width: 100% !important;
  margin-top: 15px !important;
  margin-bottom: 32px !important; /* Form to text gap 32px */
}

/* Forcefully clean up the footer webform: hide label, non-essential elements except confirmation message */
.footer-webform-wrapper form > *:not(.form-type-email):not(.form-item-email):not(.form-item-mail):not(.form-actions):not(input[type="hidden"]):not(.messages):not(.webform-message):not([data-drupal-messages]):not(.webform-confirmation) {
  display: none !important;
}

.footer-webform-wrapper .webform-confirmation {
  display: block !important;
}

.footer-webform-wrapper form {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
}

.footer-webform-wrapper .js-form-item,
.footer-webform-wrapper .form-item {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
}

.footer-webform-wrapper form label {
  display: none !important;
}

/* Match footer subscribe form input exactly */
.footer-webform-wrapper form input[type="text"],
.footer-webform-wrapper form input[type="email"] {
  background: transparent !important;
  border: 1px solid #231F20 !important;
  border-radius: 50px !important;
  padding: 12px 25px !important;
  width: 100% !important;
  color: #231F20 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

.footer-webform-wrapper form input[type="text"]::placeholder,
.footer-webform-wrapper form input[type="email"]::placeholder {
  color: #777 !important;
}

.footer-webform-wrapper form .form-actions {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Match footer subscribe button exactly */
.footer-webform-wrapper form input[type="submit"],
.footer-webform-wrapper form button[type="submit"] {
  background-color: transparent !important;
  border: 1px solid #231F20 !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  color: #231F20 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

.footer-webform-wrapper form input[type="submit"]:hover,
.footer-webform-wrapper form button[type="submit"]:hover {
  background-color: #231F20 !important;
  color: #ffffff !important;
}

/* Mobile Responsiveness for Footer Webform */
@media (max-width: 767px) {
  .footer-webform-wrapper form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .footer-webform-wrapper form input[type="text"],
  .footer-webform-wrapper form input[type="email"] {
    width: 100% !important;
    text-align: center !important;
  }
  .footer-webform-wrapper form .form-actions {
    width: 100% !important;
  }
  .footer-webform-wrapper form input[type="submit"],
  .footer-webform-wrapper form button[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- NEW HERO BANNER SECTION LAYOUT --- */
.hero-banner-section.new-layout {
  background-color: #855B43; /* Fallback brand brown background */
  /* Section padding top 54px bottom 62px */
  color: #ffffff !important;
  text-align: center !important;
  position: relative !important;
  height: auto !important; /* Allow dynamic height content */
  display: block !important;
}

.hero-banner-section.new-layout .container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.hero-icon-wrap {
  margin-bottom: 54px !important; /* Icon to heading gap 54px */
}

.hero-icon {
  width: 190px !important; /* Icon width 190px */
  height: 152px !important; /* Icon height 152px */
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* Ensure the logo is solid white if it's a dark image */
}

.hero-banner-section.new-layout .hero-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important; /* Heading size 64px */
  font-weight: 400 !important; /* Heading weight 400 */
  font-style: normal !important; /* Heading style Regular */
  line-height: 1.2 !important;
  color: #ffffff !important;
  max-width: 1030px !important; /* Heading max width 1030px */
  margin: 0 auto 24px auto !important; /* Heading to text gap 24px */
  text-align: center !important;
}

.hero-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Text size 16px */
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 445px !important; /* Text max width 445px */
  margin: 0 auto 40px auto !important;
  text-align: center !important;
}

/* Dynamic contrast overrides for light/dark background on Hero Banner */
.hero-banner-section--light-bg {
  color: #333333 !important;
}
.hero-banner-section--light-bg .hero-icon {
  filter: none !important; /* Keep original colors of the icon on light background */
}
.hero-banner-section--light-bg.new-layout .hero-title,
.hero-banner-section--light-bg .hero-title {
  color: #061037 !important; /* Premium deep blue/navy color (#061037) for high contrast on light background */
}
.hero-banner-section--light-bg.new-layout .hero-subtitle,
.hero-banner-section--light-bg .hero-subtitle {
  color: #4A5568 !important; /* Premium elegant dark slate for readability */
  opacity: 1 !important;
}

.hero-banner-section--dark-bg {
  color: #ffffff !important;
}
.hero-banner-section--dark-bg .hero-title {
  color: #ffffff !important;
}
.hero-banner-section--dark-bg .hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Centered Large Video/Image Card */
.hero-video-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 700px !important; /* Video height 700px */
  aspect-ratio: 16 / 9 !important;
  border-radius: 24px !important; /* Video radius 24px */
  overflow: hidden !important;
  margin: 0 auto !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
}

.hero-video-card img.video-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.hero-video-card:hover img.video-thumbnail {
  transform: scale(1.03) !important;
}

.play-button-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: background-color 0.3s ease !important;
}

.hero-video-card:hover .play-button-overlay {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.play-icon-circle {
  width: 90px !important;
  height: 90px !important;
  border: 3px solid #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #ffffff !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(4px) !important;
}

.hero-video-card:hover .play-icon-circle {
  transform: scale(1.1) !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.play-svg {
  width: 32px !important;
  height: 32px !important;
  margin-left: 6px !important; /* Offset for triangle alignment */
}

/* About LJE Badge */
.about-badge-wrap {
  margin-bottom: 24px !important; /* Sub title to text gap 24px */
}

.about-badge {
  color: rgba(255, 255, 255, 0.8) !important; /* Elegant light white/gray matching the mockup */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Sub title size 14px */
  font-weight: 400 !important; /* Sub title weight 400 */
  font-style: normal !important; /* Sub title style Regular */
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: none !important;
  cursor: default !important;
  background: none !important;
  padding: 0 !important;
}

.about-badge:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* About Description Paragraph */
.about-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  max-width: 1140px !important; /* Text max width 1140px */
  margin: 0 auto !important;
  text-align: center !important;
}

.about-description p {
  margin-top: 0 !important; /* Remove top margin */
}

.about-description p,
.about-description {
  font-size: 40px !important; /* Text size 40px */
  line-height: 1.45 !important;
  font-weight: 400 !important; /* Text weight 400 */
  font-style: normal !important; /* Text style Regular */
  color: #ffffff !important;
}

/* Highlight specific styles in description */
.about-description p span.highlight,
.about-description p strong {
  font-weight: 500 !important;
  color: #ffffff !important;
}

.about-description p em {
  font-style: normal !important;
  opacity: 0.75 !important; /* This creates the gorgeous faded effect for the secondary text in the paragraph */
}

/* --- NEW LJE ABOUT SECTION STYLING --- */
.about-section {
  text-align: center !important;
  position: relative !important;
  display: block !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.about-section .container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.about-section-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Background specific style overrides based on contrast detection */
/* 1. Dark Background theme (default) */
.about-section--dark-bg {
  color: #ffffff !important;
}
.about-section--dark-bg .about-badge {
  color: rgba(255, 255, 255, 0.8) !important;
}
.about-section--dark-bg .about-description p,
.about-section--dark-bg .about-description {
  color: #ffffff !important;
}
.about-section--dark-bg .about-description p span.highlight,
.about-section--dark-bg .about-description p strong {
  color: #ffffff !important;
}
.about-section--dark-bg .about-description p em {
  opacity: 0.75 !important;
}

/* 2. Light Background theme */
.about-section--light-bg {
  color: #333333 !important;
}
.about-section--light-bg .about-badge {
  color: #231F20 !important; /* Premium color on light background */
}
.about-section--light-bg .about-description p,
.about-section--light-bg .about-description {
  color: #061037 !important; /* Deep navy text for superior contrast */
}
.about-section--light-bg .about-description p span.highlight,
.about-section--light-bg .about-description p strong {
  color: #061037 !important;
  font-weight: 500 !important;
}
.about-section--light-bg .about-description p em {
  color: #555555 !important;
  opacity: 0.85 !important;
}

/* Responsive design adjustments */
@media (max-width: 1024px) {
  /* .about-section padding controlled dynamically by spacing classes */
  .hero-banner-section.new-layout .hero-title {
    font-size: 42px !important;
  }
  .about-description p,
  .about-description {
    font-size: 28px !important;
  }
  .play-icon-circle {
    width: 75px !important;
    height: 75px !important;
  }
  .play-svg {
    width: 26px !important;
    height: 26px !important;
  }
  .hero-description {
    font-size: 18px !important;
  }
  .hero-video-card {
    height: auto !important; /* Make height responsive on tablets */
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}
@media (max-width: 767px) {
  .hero-banner-section.new-layout .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hero-icon-wrap {
    margin-bottom: 48px !important; /* Icon to title gap 48px */
  }
  .hero-icon {
    width: 125px !important; /* Icon width 125px */
    height: 100px !important; /* Icon height 100px */
  }
  .hero-banner-section.new-layout .hero-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px !important; /* Title font-size 24px */
    max-width: 100% !important;
  }
  .hero-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important; /* Text size 16px */
    max-width: 100% !important;
    margin-bottom: 28px !important; /* Text to VIDEO CARD gap 28px */
  }
  .hero-description {
    font-size: 16px !important;
    margin-bottom: 30px !important;
  }
  .hero-video-card {
    height: 300px !important; /* Video card height 300px */
    width: 100% !important;
    aspect-ratio: auto !important; /* Override 16/9 ratio */
    border-radius: 16px !important;
    margin-bottom: 0 !important;
  }
  .hero-video-card video.video-thumbnail,
  .hero-video-card .video-element,
  .hero-video-card iframe.video-iframe {
    border-radius: 16px !important;
  }
  .about-badge-wrap {
    margin-bottom: 16px !important; /* Responsive subtitle gap */
  }
  .about-badge {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important; /* Sub title 14px */
  }
  .about-description p,
  .about-description {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px !important; /* Text size 24px */
  }
  .play-icon-circle {
    width: 60px !important;
    height: 60px !important;
  }
  .play-svg {
    width: 20px !important;
    height: 20px !important;
    margin-left: 4px !important;
  }
  /* .about-section padding controlled dynamically by spacing classes on mobile */
}

/* Styling for embedded iframes and local video players */
.hero-video-card iframe.video-iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

.hero-video-card video.video-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 24px !important; /* Video radius 24px */
  display: block !important;
}

/* Fallback video card placeholder style */
.video-fallback-placeholder {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #704b2b, #8c6239) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
}

.hero-video-card.local-video {
  cursor: default !important; /* controls are interactive */
}

/* --- CASE STUDIES SECTION LAYOUT --- */
.cs-section-layout {
  background-color: #ffffff !important;
  color: #0c0c0c !important;
}

.cs-section-layout .container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.cs-title-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
  .cs-title-container {
    padding: 0 32px !important;
  }
}

.cs-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Section heading font IBM Plex Sans */
  font-size: 48px !important; /* Section heading size 48px */
  font-weight: 400 !important; /* Section heading weight 400 */
  font-style: normal !important; /* Section heading style Regular */
  color: #061037 !important; /* Section heading color #061037 */
  line-height: 1.25 !important;
  margin-bottom: -60px !important;
  text-align: left !important;
}

.cs-rows-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important; /* Zero gap between rows to make images seamless */
}

.cs-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important; /* Horizontal gap between text card and image card */
  align-items: end !important; /* Fallback for non-sticky */
  border-bottom: none !important; /* No border between case study cards */
  padding-bottom: 0 !important; /* No padding-bottom between case study cards */
  margin-bottom: 0 !important;
}

@media (min-width: 1025px) {
  .cs-row {
    position: relative !important;
    align-items: start !important; /* Start-align so sticky columns can slide down */
    gap: 0 !important; /* Edge-to-edge 50/50 split */
    height: 100vh !important; /* Full screen height for each case study */
    min-height: 922px !important; /* Minimum height 922px */
    width: 100% !important;
    overflow: hidden !important;
  }
}

.cs-text-column {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 20px !important; /* Default left padding for mobile/tablet (20px) */
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
  .cs-text-column {
    position: relative !important; /* Use relative to support custom JS translate */
    height: fit-content !important; /* Allow the column height to be smaller than the row to slide */
    z-index: 10 !important;
    padding-top: 180px !important; /* Push text card down to align with the red box position */
    padding-left: 32px !important; /* Desktop left padding 32px */
    padding-right: 32px !important;
  }
}

.cs-text-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding-right: 30px !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@media (min-width: 1025px) {
  .cs-text-card {
    max-width: 470px !important; /* Desktop max-width 470px */
    width: 100% !important;
  }
}

.cs-text-column.active .cs-text-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.cs-card-tag {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Card category font IBM Plex Sans */
  font-size: 14px !important; /* Card category size 14px */
  font-weight: 400 !important; /* Card category weight 400 */
  font-style: normal !important; /* Card category style Regular */
  color: #707070 !important; /* Elegant thin gray tag */
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 14px !important; /* Category to title gap 14px */
}

.cs-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 32px !important; /* Title size 32px */
  font-weight: 400 !important; /* Title weight 400 */
  font-style: normal !important; /* Title style Regular */
  color: #061037 !important; /* Title color #061037 */
  line-height: 1.25 !important;
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
  transition: color 0.3s ease !important;
}

.cs-text-card:hover .cs-card-title {
  color: #0072CE !important; /* Soft blue hover state unified with #0072CE */
}

.cs-card-summary {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Text font IBM Plex Sans */
  font-size: 16px !important; /* Text size 16px */
  font-weight: 400 !important; /* Text weight 400 */
  font-style: normal !important; /* Text style Regular */
  color: #231F20 !important; /* Text color #231F20 */
  line-height: 1.6 !important;
  margin: 0 0 32px 0 !important; /* Text to button gap 32px */
}

/* Crimson deep-red rounded pill button matching mockup */
.cs-card-btn {
  background-color: #0072CE !important; /* Btn bg #0072CE */
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important; /* Button font IBM Plex Sans */
  font-size: 16px !important; /* Button size 16px */
  font-weight: 500 !important; /* Button weight 500 (Medium) */
  font-style: normal !important; /* Button style Medium */
  text-transform: none !important; /* First letters capitalized as shown */
  padding: 14px 20px !important; /* Button padding 14px 20px */
  border-radius: 50px !important; /* Fully rounded pill shape */
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.15) !important;
}

.cs-card-btn:hover {
  background-color: #005CB0 !important; /* Brightened blue hover */
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 114, 206, 0.25) !important;
}

.cs-btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.3s ease !important;
}

.cs-card-btn:hover .cs-btn-arrow {
  transform: translateX(4px) !important;
}

.arrow-svg {
  width: 16px !important;
  height: 16px !important;
}

/* Portrait Image Wrapper */
.cs-image-column {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

@media (min-width: 1025px) {
  .cs-image-column {
    height: 100vh !important;
    min-height: 922px !important; /* Minimum height 922px */
  }
}

.cs-image-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important; /* Aligned portrait width */
  height: 732px !important; /* Image height 732px */
  border-radius: 0 !important; /* Completely sharp square corners where cards touch */
  overflow: hidden !important;
  box-shadow: none !important; /* No shadow to make images perfectly flat and seamless */
  background-color: #f7f7f7 !important;
}

@media (min-width: 1025px) {
  .cs-image-wrapper {
    max-width: 100% !important; /* Fill full 50% width on desktop */
    height: 100vh !important; /* Full viewport height */
    min-height: 922px !important; /* Minimum height 922px */
  }
}

.cs-row-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.cs-image-wrapper:hover .cs-row-image {
  transform: scale(1.02) !important;
}

/* Glassmorphic Placeholder Style */
.cs-row-image-placeholder {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #fdfbfa, #efe8df) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border: 1.5px dashed rgba(140, 98, 57, 0.2) !important;
  border-radius: 0 !important; /* Sharp corners for placeholders too */
  padding: 30px !important;
  box-sizing: border-box !important;
}

.cs-placeholder-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  color: #8c6239 !important;
}

.cs-placeholder-icon {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 14px !important;
  opacity: 0.8 !important;
}

.cs-placeholder-title {
  font-family: 'Outfit', 'IBM Plex Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 4px !important;
}

.cs-placeholder-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  opacity: 0.7 !important;
}

/* Responsive Styles for Case Studies Section */
@media (max-width: 1024px) {
  .cs-section-layout {
    }
  .cs-row {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-bottom: 50px !important; /* Add padding-bottom on mobile so stacked items look neat */
  }
  .cs-section-title {
    font-size: 36px !important;
    margin-bottom: 40px !important;
  }
  .cs-text-card {
    padding-right: 0 !important;
  }
  .cs-image-column {
    justify-content: center !important;
  }
  .cs-image-wrapper {
    max-width: 100% !important;
    height: auto !important; /* Override desktop height for tablet */
    aspect-ratio: 1.2 / 1 !important; /* Wide rectangle for better viewing on tablets */
  }
}

@media (max-width: 767px) {
  .cs-section-layout {
    }
  .cs-rows-container {
    gap: 48px !important; /* Card to card gap 48px */
  }
  .cs-row {
    grid-template-columns: 1fr !important;
    gap: 40px !important; /* Button to image gap 40px */
    padding-bottom: 0 !important; /* Reset padding-bottom since we use gap on container */
  }
  .cs-section-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px !important; /* Section title size 24px */
    margin-bottom: 48px !important; /* Title to card gap 48px */
  }
  .cs-card-tag {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important; /* Card category 14px */
  }
  .cs-card-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px !important; /* Card title 24px */
  }
  .cs-card-summary {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important; /* Card text 16px */
    margin-bottom: 24px !important; /* Text to button gap 24px */
  }
  .cs-card-btn {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 16px !important; /* Button size 16px */
    padding: 12px 16px !important; /* Button padding 12px 16px */
  }
  .cs-image-wrapper {
    height: 400px !important; /* Card image height 400px */
    aspect-ratio: auto !important; /* Override aspect-ratio */
    border-radius: 16px !important; /* Case study image border radius 16px */
  }
  .cs-row-image,
  .cs-row-image-placeholder {
    border-radius: 16px !important;
  }
}

/* --- LJE TRACK RECORD CAROUSEL --- */
.tr-carousel-section {
  position: relative !important;
  /* Section padding top bottom 96px */
  overflow: hidden !important;
  color: #ffffff !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Dynamic contrast overrides for light background on Track Record Carousel */
.tr-carousel-section--light-bg {
  color: #333333 !important;
}
.tr-carousel-section--light-bg .tr-section-title {
  color: #061037 !important; /* Deep navy for contrast */
}
.tr-carousel-section--light-bg .tr-section-desc {
  color: #444444 !important; /* Readable dark grey subtitle */
}
.tr-carousel-section--light-bg .tr-nav-prev {
  border: 1.5px solid rgba(10, 28, 58, 0.3) !important;
  color: #061037 !important;
}
.tr-carousel-section--light-bg .tr-nav-prev:hover {
  border-color: #061037 !important;
  background-color: rgba(10, 28, 58, 0.08) !important;
}
.tr-carousel-section--light-bg .tr-nav-next {
  background-color: #061037 !important;
  color: #ffffff !important;
  border: 1.5px solid #061037 !important;
}
.tr-carousel-section--light-bg .tr-nav-next:hover {
  background-color: #0072CE !important;
  border-color: #0072CE !important;
}

.tr-carousel-section--dark-bg {
  color: #ffffff !important;
}
.tr-carousel-section--dark-bg .tr-section-title {
  color: #ffffff !important;
}
.tr-carousel-section--dark-bg .tr-section-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Custom glow overlay for rich earthy background styling */
.tr-carousel-overlay-glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.tr-carousel-container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.tr-carousel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 82px !important; /* Text to slider card gap 82px */
}

.tr-header-left {
  max-width: 720px !important;
  text-align: left !important;
}

.tr-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 48px !important; /* Title size 48px */
  font-weight: 400 !important; /* Title weight 400 */
  font-style: normal !important; /* Title style Regular */
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
}

.tr-section-desc {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.tr-header-right {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

/* Premium circular navigation button styles matching mockup */
.tr-nav-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

/* Left Arrow: transparent with border outline */
.tr-nav-prev {
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

.tr-nav-prev:hover {
  border-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Right Arrow: solid white circle with brown text color */
.tr-nav-next {
  background-color: #ffffff !important;
  color: #3D3D3D !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.tr-nav-next:hover {
  background-color: #eeeeee !important;
  border-color: #eeeeee !important;
  transform: scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}

.tr-arrow-svg {
  width: 24px !important;
  height: 24px !important;
}

/* Swiper Slider Wrapper */
.tr-swiper {
  width: 100% !important;
  overflow: visible !important; /* Bleeding edges on desktop */
}

.tr-slide {
  height: 600px !important; /* Card height 600px */
}

/* Fixed card width only where Swiper runs slidesPerView: 'auto' (>= 1024px).
   Below that Swiper sets the width inline; an !important width here would
   override it (item 18). */
@media (min-width: 1024px) {
  .tr-slide {
    width: 559px !important; /* Card width 559px */
  }
}

.tr-card-wrapper {
  text-decoration: none !important;
  display: block !important;
  color: #ffffff !important;
  outline: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* Portrait aspect-ratio slide cards matching mockup */
.tr-card {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important; /* Card radius 20px */
  overflow: hidden !important;
  background-color: #1e1e1e !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.tr-card-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tr-card-wrapper:hover .tr-card-bg {
  transform: scale(1.05) !important;
}

.tr-card-wrapper:hover .tr-card {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.3) !important;
}

/* Premium gradient overlay for clear, accessible text rendering */
.tr-card-gradient {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%) !important;
  z-index: 1 !important;
}

.tr-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 32px 28px !important; /* Card padding 32px 28px */
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  text-align: left !important;
}

.tr-card-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-grow: 1 !important;
  padding-right: 16px !important;
}

.tr-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 24px !important; /* Title size 24px */
  font-weight: 500 !important; /* Title weight 500 (Medium) */
  font-style: normal !important; /* Title style Medium */
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important; /* Title to date gap 8px */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.tr-card-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Date font IBM Plex Sans */
  font-size: 14px !important; /* Date size 14px */
  font-weight: 400 !important; /* Date weight 400 */
  font-style: normal !important; /* Date style Regular */
  color: #8F8F8F !important; /* Date color #8F8F8F */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.tr-card-link-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  background-color: #ffffff !important;
  color: #855b43 !important; /* Match brand color */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important; /* Hidden initially */
  transform: scale(0.8) translate(5px, 5px) !important; /* Scaled down and offset */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.tr-btn-arrow-svg {
  width: 18px !important;
  height: 18px !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Hover state circle reveal and arrow transition */
.tr-card-wrapper:hover .tr-card-link-btn {
  opacity: 1 !important; /* Display on hover */
  transform: scale(1) translate(0, 0) !important; /* Back to normal scale and position */
}

.tr-card-wrapper:hover .tr-btn-arrow-svg {
  transform: translateX(2px) !important;
}

/* Fallback card display */
.tr-card-image-fallback {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #443224, #2a1f16) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

.tr-fallback-icon {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 12px !important;
  opacity: 0.5 !important;
}

/* Swiper Navigation Disabled classes */
.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Responsive Media Queries for Carousel Slider */
@media (max-width: 1024px) {
  .tr-carousel-section {
    }
  .tr-carousel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
    margin-bottom: 40px !important;
  }
  .tr-header-right {
    align-self: flex-start !important;
    margin-bottom: 0 !important;
  }
  .tr-section-title {
    font-size: 36px !important;
  }
  /* No width here: Swiper sets each slide's width inline from slidesPerView.
     An !important width overrode it and collapsed the slides to 0px (item 18). */
  .tr-slide {
    height: auto !important; /* Responsive slide height on tablets/mobile */
  }
  .tr-card {
    height: auto !important;
    aspect-ratio: 0.82 / 1 !important; /* Maintain aspect ratio responsive */
    border-radius: 20px !important;
  }
}

@media (max-width: 767px) {
  .tr-carousel-section {
    /* Scaled mobile padding */
  }
  .tr-carousel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important; /* Text to slider navigation gap 20px */
    margin-bottom: 34px !important; /* slider navigation to card gap 34px */
  }
  .tr-header-right {
    display: flex !important; /* Show arrows on mobile */
    align-self: flex-start !important;
    margin-bottom: 0 !important;
  }
  .tr-section-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px !important; /* Title 24px */
    margin-bottom: 16px !important;
  }
  .tr-section-desc {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important; /* Text 16px */
  }
  .tr-slide {
    height: 300px !important; /* Card height 300px */
  }
  .tr-card {
    height: 300px !important; /* Card height 300px */
    aspect-ratio: auto !important; /* Override aspect-ratio */
  }
  .tr-card-content {
    padding: 20px !important; /* Card padding 20px 20px */
  }
  .tr-card-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 24px !important; /* Card title 24px */
  }
  .tr-card-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important; /* Date text 14px */
  }
}

/* --- LJE IMPACT SPOTLIGHT CAROUSEL --- */
.isc-carousel-section {
  position: relative !important;
  /* Section padding top 116px bottom 96px */
  overflow: hidden !important;
  color: #0c1c36 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Dynamic contrast overrides for dark background on Impact Spotlight Carousel */
.isc-carousel-section--dark-bg {
  color: #ffffff !important;
}
.isc-carousel-section--dark-bg .isc-section-title {
  color: #ffffff !important;
}
.isc-carousel-section--dark-bg .isc-section-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}
.isc-carousel-section--dark-bg .isc-nav-prev {
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.isc-carousel-section--dark-bg .isc-nav-prev:hover {
  border-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.isc-carousel-section--dark-bg .isc-nav-next {
  background-color: #ffffff !important;
  color: #855B43 !important;
  border: 1.5px solid #ffffff !important;
}
.isc-carousel-section--dark-bg .isc-nav-next:hover {
  background-color: #f5efe6 !important;
  border-color: #f5efe6 !important;
}

.isc-carousel-section--light-bg {
  color: #0c1c36 !important;
}
.isc-carousel-section--light-bg .isc-section-title {
  color: #0c1c36 !important;
}
.isc-carousel-section--light-bg .isc-section-desc {
  color: rgba(12, 28, 54, 0.75) !important;
}

/* Custom soft glow overlay for light cream/off-white layout */
.isc-carousel-overlay-glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.005) 0%, rgba(0, 0, 0, 0.02) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.isc-carousel-container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.isc-carousel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 62px !important; /* Text to slider card gap 62px */
}

.isc-header-left {
  max-width: 770px !important; /* Title and text max width 770px (logical fix for 77px typo) */
  text-align: left !important;
}

.isc-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 48px !important; /* Title size 48px */
  font-weight: 400 !important; /* Title weight 400 */
  font-style: normal !important; /* Title style Regular */
  color: #061037 !important; /* Title color #061037 */
  line-height: 1.25 !important;
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
}

.isc-section-desc {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Text font IBM Plex Sans */
  font-size: 16px !important; /* Text size 16px */
  font-weight: 400 !important; /* Text weight 400 */
  font-style: normal !important; /* Text style Regular */
  color: #231F20 !important; /* Text color #231F20 */
  line-height: 1.6 !important;
  margin: 0 !important;
}

.isc-header-right {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

/* Premium circular brown navigation controls */
.isc-nav-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

/* Left Arrow (Prev): transparent outlined circle in brown */
.isc-nav-prev {
  border: 1.5px solid rgba(0, 114, 206, 0.3) !important;
  background-color: transparent !important;
  color: #0072CE !important;
}

.isc-nav-prev:hover {
  border-color: #0072CE !important;
  background-color: rgba(0, 114, 206, 0.06) !important;
}

/* Right Arrow (Next): solid filled brown circle with white text */
.isc-nav-next {
  background-color: #0072CE !important;
  color: #ffffff !important;
  border: 1.5px solid #0072CE !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.15) !important;
}

.isc-nav-next:hover {
  background-color: #005CB0 !important;
  border-color: #005CB0 !important;
  transform: scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(0, 114, 206, 0.25) !important;
}

.isc-arrow-svg {
  width: 24px !important;
  height: 24px !important;
}

/* Swiper Slider Wrapper */
.isc-swiper {
  width: 100% !important;
  overflow: visible !important; /* Bleeding edges on desktop */
}

.isc-slide {
  height: 500px !important; /* Cards height 500px */
}

/* Fixed width only where Swiper runs slidesPerView: 'auto' (>= 1100px); see .tr-slide. */
@media (min-width: 1100px) {
  .isc-slide {
    width: 909px !important; /* Left card (326px) + gap (24px) + Right image (559px) = 909px total width */
  }
}

/* Double-Panel Flex slide wrapper containing stat card + photo card */
.isc-slide-wrapper {
  display: flex !important;
  gap: 24px !important; /* Card to image gap 24px */
  width: 100% !important;
  height: 100% !important;
  align-items: stretch !important;
}

/* Left Panel: White Rounded Testimonial Stat Card */
.isc-card-stat {
  width: 326px !important; /* Left card Width 326px */
  height: 500px !important; /* Left card Height 500px */
  flex: none !important;
  background-color: #ffffff !important;
  border-radius: 16px !important; /* Radius 16px */
  padding: 32px 24px !important; /* Card padding 32px 24px */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.035) !important;
  border: 1px solid rgba(0, 0, 0, 0.01) !important;
  box-sizing: border-box !important;
  text-align: left !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.isc-stat-top {
  margin-bottom: 24px !important; /* Sub title to text gap 24px */
}

.isc-stat-number {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Card title font IBM Plex Sans */
  font-size: 64px !important; /* Card title size 64px */
  font-weight: 400 !important; /* Card title weight 400 */
  font-style: normal !important; /* Card title style Regular */
  color: #0c1c36 !important; /* Deep Navy brand color */
  line-height: 1 !important;
  margin: 0 0 4px 0 !important; /* Title to sub title gap 4px */
  letter-spacing: -1.5px !important;
}

.isc-stat-label {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Sub title font IBM Plex Sans */
  font-size: 14px !important; /* Sub title size 14px */
  font-weight: 400 !important; /* Sub title weight 400 */
  font-style: normal !important; /* Sub title style Regular */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #231F20 !important; /* Sub title color #231F20 */
  margin: 0 !important;
}

.isc-quote-text {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Text font IBM Plex Sans */
  font-size: 16px !important; /* Text Size 16px */
  font-weight: 400 !important; /* Text weight 400 */
  font-style: normal !important; /* Text style Regular */
  color: #231F20 !important; /* Text color #231F20 */
  line-height: 1.65 !important;
  margin: 0 0 32px 0 !important;
  flex-grow: 1 !important;
}

.isc-org-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.isc-org-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.isc-org-logo-placeholder {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #e2e8f0 !important;
}

.isc-org-name {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  color: #231F20 !important; /* Organization title color #231F20 */
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Right Panel: Tall Rounded Researcher Portrait Photo */
.isc-card-image {
  width: 559px !important; /* Right image Width 559px */
  height: 500px !important; /* Right image Height 500px */
  flex: none !important;
  border-radius: 16px !important; /* Right image Radius 16px */
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.035) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

/* Interactive Hover state for split panels */
.isc-slide-wrapper:hover .isc-card-stat {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(133, 91, 67, 0.06) !important;
}

.isc-slide-wrapper:hover .isc-card-image {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(133, 91, 67, 0.08) !important;
}

/* Fallback Card Displays */
.isc-image-fallback {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #e6e5e3, #d4d3d1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(12, 28, 54, 0.3) !important;
}

.isc-fallback-icon {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 12px !important;
  opacity: 0.5 !important;
}

/* Responsive Media Queries for Spotlight Carousel */
@media (max-width: 1024px) {
  .isc-carousel-section {
    }
  .isc-carousel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
    margin-bottom: 40px !important;
  }
  .isc-header-right {
    align-self: flex-start !important;
    margin-bottom: 0 !important;
  }
  .isc-section-title {
    font-size: 36px !important;
  }
  .isc-slide {
    height: auto !important;
  }
  .isc-slide-wrapper {
    gap: 20px !important;
  }
  .isc-card-stat {
    width: auto !important; /* Remove fixed desktop dimensions */
    height: auto !important;
    flex: 1.15 !important;
    padding: 36px !important;
    min-height: 440px !important;
    border-radius: 16px !important;
  }
  .isc-card-image {
    width: auto !important; /* Remove fixed desktop dimensions */
    height: auto !important;
    flex: 1.25 !important;
    min-height: 440px !important;
    border-radius: 16px !important;
  }
  .isc-stat-number {
    font-size: 54px !important;
  }
}

@media (max-width: 767px) {
  .isc-carousel-section {
    /* Scaled mobile padding */
  }
  
  .isc-carousel-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .isc-carousel-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important; /* Text to slider navigation gap 20px */
    margin-bottom: 34px !important; /* slider navigation to card gap 34px */
  }

  .isc-header-left {
    max-width: 100% !important;
  }

  .isc-section-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 24px !important; /* Title size 24px */
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 12px !important;
  }

  .isc-section-desc {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important; /* Text size 16px */
    font-weight: 400 !important;
    font-style: normal !important;
  }

  /* Show arrows on smartphones as requested */
  .isc-header-right {
    display: flex !important;
    align-self: flex-start !important;
    margin-bottom: 0 !important;
  }

  .isc-slide {
    height: auto !important;
  }

  .isc-slide-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important; /* Card to image gap 32px */
    height: auto !important;
  }

  .isc-card-stat {
    width: 100% !important;
    height: 438px !important; /* Card height 438px */
    padding: 32px 24px !important; /* Card padding 32px 24px */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .isc-stat-top {
    margin-bottom: 24px !important; /* Subtitle to text gap 24px */
  }

  .isc-stat-number {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 64px !important; /* Card title size 64px */
    font-weight: 400 !important;
    font-style: normal !important;
  }

  .isc-stat-label {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important; /* Card subtitle size 14px */
    font-weight: 400 !important;
    font-style: normal !important;
  }

  .isc-quote-text {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important; /* Text size 16px */
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 96px !important; /* Text to Name of organization gap 96px */
    flex-grow: 0 !important;
  }

  .isc-org-name {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important; /* organization text size 14px */
    font-weight: 500 !important; /* Weight 500 (Medium) */
    font-style: normal !important;
  }

  .isc-card-image {
    width: 100% !important;
    height: 300px !important; /* Image height 300px */
    min-height: auto !important;
    aspect-ratio: auto !important;
    flex: none !important;
    border-radius: 16px !important;
  }
}

/* --- LJE EVENTS LIST SECTION --- */
.el-events-section {
  position: relative !important;
  background-color: #ffffff;
  color: #0c1c36 !important;
  overflow: hidden !important;
}

.el-events-section.has-bg-image {
  background-color: transparent !important;
}

.el-events-bg-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.el-events-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.el-events-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Split header design with title + pills on left and description on right */
.el-section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 88px !important; /* Buttons to accordion gap 88px */
  gap: 60px !important;
}

.el-header-left {
  flex: 1.25 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 64px !important; /* Title to tab title button gap 64px */
  text-align: left !important;
}

.el-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 48px !important; /* Title size 48px */
  font-weight: 400 !important; /* Title weight 400 */
  font-style: normal !important; /* Title style Regular */
  color: #061037 !important; /* Title color #061037 */
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 560px !important; /* Title max width 560px */
}

.el-header-right {
  flex: 0.75 !important;
  text-align: left !important;
  padding-top: 6px !important;
}

.el-section-desc {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Text font IBM Plex Sans */
  font-size: 16px !important; /* Text size 16px */
  font-weight: 400 !important; /* Text weight 400 */
  font-style: normal !important; /* Text style Regular */
  color: #231F20 !important; /* Text color #231F20 */
  line-height: 1.65 !important;
  margin: 0 !important;
  max-width: 445px !important; /* Text max width 445px */
}

/* Filter pills list styling */
.el-filter-pills-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.el-filter-pill {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Button font IBM Plex Sans */
  font-size: 16px !important; /* Button size 16px */
  font-weight: 500 !important; /* Button weight 500 (Medium) */
  font-style: normal !important; /* Button style Medium */
  padding: 14px 20px !important; /* Tab button padding 14px 20px */
  border-radius: 24px !important;
  border: 1px solid rgba(6, 16, 55, 0.25) !important;
  background-color: transparent !important;
  color: #061037 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  user-select: none !important;
  outline: none !important;
}

.el-filter-pill:hover {
  background-color: rgba(6, 16, 55, 0.05) !important;
  border-color: #061037 !important;
}

.el-filter-pill.active {
  background-color: #061037 !important;
  color: #ffffff !important;
  border-color: #061037 !important;
  box-shadow: 0 4px 12px rgba(6, 16, 55, 0.15) !important;
}

/* Events list wrapping rows */
.el-events-list-wrapper {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid #CECECE !important; /* Accordion Border #CECECE */
}

.el-event-row {
  display: flex;
  align-items: center !important;
  padding: 40px 28px !important; /* Accordion Padding top bottom 40px */
  border-bottom: 1px solid #CECECE !important; /* Accordion Border #CECECE */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  border-radius: 0px !important;
  margin: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  position: relative !important;
  text-decoration: none !important;
}

/* Three columns sizing inside rows */
.el-col-datetime {
  flex: 0.8 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.el-event-date {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Date font IBM Plex Sans */
  font-size: 32px !important; /* Date size 32px */
  font-weight: 400 !important; /* Date weight 400 */
  font-style: normal !important; /* Date style Regular */
  color: #231F20 !important; /* Date color #231F20 */
  line-height: 1.2 !important;
  transition: color 0.3s ease !important;
}

.el-event-time {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Time font IBM Plex Sans */
  font-size: 16px !important; /* Time size 16px */
  color: #231F20 !important; /* Time color #231F20 */
  font-weight: 400 !important; /* Time weight 400 */
  font-style: normal !important; /* Time style Regular */
  transition: color 0.3s ease !important;
}

.el-col-title {
  flex: 1.4 !important;
  padding-right: 20px !important;
}

.el-event-title-text {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 32px !important; /* Title size 32px */
  font-weight: 400 !important; /* Title weight 400 */
  font-style: normal !important; /* Title style Regular */
  color: #061037 !important; /* Title color #061037 */
  margin: 0 !important;
  line-height: 1.3 !important;
  transition: color 0.3s ease !important;
}

.el-col-action {
  flex: 1.2 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.el-event-location {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Place font IBM Plex Sans */
  font-size: 16px !important; /* Place size 16px */
  color: #231F20 !important; /* Place color #231F20 */
  font-weight: 400 !important; /* Place weight 400 */
  font-style: normal !important; /* Place style Regular */
  transition: color 0.3s ease !important;
}

/* Outlined Hover Action Registration Button */
.el-event-details-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  border-radius: 24px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 0 !important;
  transform: translateX(12px) !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.el-btn-arrow-svg {
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.3s ease !important;
}

.el-event-details-btn:hover {
  background-color: #ffffff !important;
  color: #061037 !important;
}

.el-event-details-btn:hover .el-btn-arrow-svg {
  transform: translateX(3px) !important;
}

/* --- PREMIUM CAPSULE HOVER STATE --- */
.el-event-row:hover {
  background-color: #061037 !important; /* solid navy theme capsule */
  border-color: transparent !important;
  border-radius: 16px !important; /* Rounded capsule corners */
  box-shadow: 0 12px 30px rgba(6, 16, 55, 0.16) !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 10 !important;
}

/* Hover typography colors inversion */
.el-event-row:hover .el-event-date {
  color: #ffffff !important;
}

.el-event-row:hover .el-event-time {
  color: rgba(255, 255, 255, 0.8) !important;
}

.el-event-row:hover .el-event-title-text {
  color: #ffffff !important;
}

.el-event-row:hover .el-event-location {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Hover details button slide-in transition */
.el-event-row:hover .el-event-details-btn {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

.el-no-events {
  font-family: 'IBM Plex Sans', sans-serif !important;
  padding: 48px 0 !important;
  text-align: center !important;
  color: rgba(12, 28, 54, 0.5) !important;
  font-size: 16px !important;
}

/* Dynamic filter collapsed class */
.el-hidden-row {
  display: none !important;
}

/* Responsive CSS for Events List */
@media (max-width: 1024px) {
  /* .el-events-section padding controlled dynamically by spacing classes */
  .el-section-header {
    flex-direction: column !important;
    gap: 32px !important;
    margin-bottom: 48px !important;
  }
  .el-header-right {
    padding-top: 0 !important;
  }
  .el-event-row {
    padding: 30px 20px !important;
  }
  .el-event-date {
    font-size: 24px !important; /* Responsive date size */
  }
  .el-event-title-text {
    font-size: 24px !important; /* Responsive title size */
  }
}
@media (max-width: 767px) {
  .el-events-container {
    padding-left: 20px !important; /* Enforce exactly 20px side padding */
    padding-right: 20px !important;
  }

  .el-section-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Set flex gap to 0 to use explicit margins */
    margin-bottom: 36px !important;
    align-items: flex-start !important;
  }

  .el-header-left,
  .el-header-right {
    display: contents !important; /* Flatten structure to reorder children directly */
  }

  .el-section-title {
    order: 1 !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 24px !important; /* Title font size 24px */
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    margin-bottom: 12px !important; /* Title to text gap 12px */
  }

  .el-section-desc {
    order: 2 !important; /* Description (text) comes after Title */
    max-width: 100% !important;
    margin-bottom: 24px !important; /* Text to tabs gap 24px */
  }

  .el-filter-pills-wrapper {
    order: 3 !important; /* Tabs display after description text */
    width: 100% !important;
  }

  .el-event-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 20px !important;
    gap: 16px !important;
  }
  
  .el-col-datetime, 
  .el-col-title, 
  .el-col-action {
    width: 100% !important;
    flex: none !important;
    padding-right: 0 !important;
  }
  
  .el-col-action {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Align to left since button is hidden */
    align-items: center !important;
    gap: 12px !important;
  }
  
  /* Hide details button on mobile event cards */
  .el-event-details-btn {
    display: none !important;
  }
  
  .el-event-row:hover {
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  
  .el-event-row:hover .el-event-date {
    color: #231F20 !important;
  }
  
  .el-event-row:hover .el-event-time {
    color: #231F20 !important;
  }
  
  .el-event-row:hover .el-event-title-text {
    color: #061037 !important;
  }
  
  .el-event-row:hover .el-event-location {
    color: #231F20 !important;
  }
  
  .el-event-row:hover .el-event-details-btn {
    display: none !important;
  }
}

/* --- PILLARS SECTION --- */
.paragraph--type--pillars-section {
  /* Section top padding 164px bottom 164px */
  background-color: #ffffff; /* Default fallback background */
}

.pillars-inner {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.pillars-header {
  text-align: left !important;
  margin-bottom: 64px !important; /* Text area to card gap 64px */
}

.pillars-main-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Title Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Title color #061037 */
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
  line-height: 1.2 !important;
  max-width: 640px !important; /* Title and Text max width 640px */
}

.pillars-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Text size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #231F20 !important; /* Text color #231F20 */
  line-height: 1.6 !important;
  max-width: 823px !important; /* Text area max width 823px */
  margin: 0 !important;
}

.pillars-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

.pillars-grid .field__items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

/* Pillar Card Sub-Paragraph */
.paragraph--type--pillar-card {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.pillar-video-card {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important; /* Premium vertical aspect ratio matching the mockup */
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  background-color: #000000 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 24px !important;
}

.pillar-video-poster {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  cursor: pointer !important;
}

.pillar-poster-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.pillar-video-card:hover .pillar-poster-img {
  transform: scale(1.06) !important;
}

/* Translucent Glassmorphic Play Button */
.pillar-video-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 110px !important;
  height: 68px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  outline: none !important;
}

.pillar-video-play-btn svg {
  width: 24px !important;
  height: 24px !important;
  transition: transform 0.3s ease !important;
}

.pillar-video-card:hover .pillar-video-play-btn {
  transform: translate(-50%, -50%) scale(1.08) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

.pillar-video-card:hover .pillar-video-play-btn svg {
  transform: scale(1.1) !important;
}

.pillar-video-player-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
}

.pillar-card-text {
  padding: 0 5px !important;
  text-align: left !important;
}

.pillar-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Title size 24px */
  font-weight: 500 !important; /* Weight 500 (Medium) for Grid Card */
  color: #061037 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.3px !important;
}

.pillar-card-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* date size 14px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #231F20 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Responsive Fixes for Pillars */
@media (max-width: 1024px) {
  .paragraph--type--pillars-section {
    }
  .pillars-main-title {
    font-size: 38px !important;
  }
  .pillars-grid .field__items {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
  }
  .pillar-slide {
    width: 420px !important;
  }
  .pillars-swiper .pillar-video-card {
    height: 480px !important;
  }
}

@media (max-width: 767px) {
  .pillars-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .paragraph--type--pillars-section {
    }
  
  .pillars-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pillars-main-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 24px !important; /* Section Title size 24px */
    font-weight: 400 !important;
    font-style: normal !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }

  .pillars-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 16px !important; /* Section Text size 16px */
    font-weight: 400 !important;
    font-style: normal !important;
    max-width: 100% !important;
  }

  /* Grid Layout Mobile Styles */
  .pillars-section--grid .pillars-header {
    margin-bottom: 56px !important; /* Text to card gap 56px */
  }

  .pillars-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pillars-grid .field__items {
    grid-template-columns: 1fr !important;
    gap: 43px !important; /* Card to card gap 43px */
  }

  .pillars-grid .pillar-video-card {
    height: 450px !important; /* Video height 450px */
    aspect-ratio: auto !important;
    margin-bottom: 16px !important; /* Video to title gap 16px */
  }

  .pillars-grid .pillar-card-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 20px !important; /* Card Title size 20px */
    font-weight: 400 !important;
    font-style: normal !important;
  }

  .pillars-grid .pillar-card-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important; /* Card subtitle size 14px */
    font-weight: 400 !important;
    font-style: normal !important;
  }

  /* Carousel Layout Mobile Styles */
  .pillars-header--carousel {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important; /* Section text to slider navigation gap 20px */
    margin-bottom: 32px !important; /* Nav to video gap 32px */
  }

  .pillars-header--carousel .pillars-header-right {
    align-self: flex-start !important; /* Align nav arrows on the left */
    padding-bottom: 0 !important;
  }

  .pillars-swiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pillar-slide {
    width: 300px !important;
  }

  .pillars-swiper .pillar-video-card {
    height: 200px !important; /* Video height 200px */
    aspect-ratio: auto !important;
    margin-bottom: 16px !important;
  }

  .pillars-swiper .pillar-card-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 20px !important; /* Card Title size 20px */
    font-weight: 400 !important;
    font-style: normal !important;
  }

  .pillars-swiper .pillar-card-subtitle {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 14px !important; /* Card subtitle size 14px */
    font-weight: 400 !important;
    font-style: normal !important;
  }
}

/* --- EVENTS LIST LAYOUT 2 --- */
.el-events-section--layout-2 {
  position: relative !important;
  color: #ffffff !important;
}

/* Translucent diagonal pattern accent removed */

.el-events-section--layout-2 .el-events-container {
  position: relative !important;
  z-index: 2 !important;
}

.el-events-section--layout-2 .el-section-title {
  color: #ffffff !important;
}

.el-events-section--layout-2 .el-section-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Layout 2 Filter Pills */
.el-events-section--layout-2 .el-filter-pill {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  background-color: transparent !important;
}

.el-events-section--layout-2 .el-filter-pill:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.el-events-section--layout-2 .el-filter-pill.active {
  background-color: #ffffff !important;
  color: #161C24 !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Event List wrapper and rows */
.el-events-section--layout-2 .el-events-list-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.el-events-section--layout-2 .el-event-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.el-events-section--layout-2 .el-event-date {
  color: #ffffff !important;
}

.el-events-section--layout-2 .el-event-time {
  color: rgba(255, 255, 255, 0.7) !important;
}

.el-events-section--layout-2 .el-event-title-text {
  color: #ffffff !important;
}

.el-events-section--layout-2 .el-event-location {
  color: rgba(255, 255, 255, 0.85) !important;
}

.el-events-section--layout-2 .el-event-details-btn {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  background-color: transparent !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Layout 2 Hover states matching the mockup precisely */
.el-events-section--layout-2 .el-event-row:hover {
  background-color: #ffffff !important;
  border-color: transparent !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
  margin: 0 !important;
}

.el-events-section--layout-2 .el-event-row:hover .el-event-date {
  color: #231F20 !important;
}

.el-events-section--layout-2 .el-event-row:hover .el-event-time {
  color: #231F20 !important;
}

.el-events-section--layout-2 .el-event-row:hover .el-event-title-text {
  color: #161C24 !important;
}

.el-events-section--layout-2 .el-event-row:hover .el-event-location {
  color: #231F20 !important;
}

.el-events-section--layout-2 .el-event-row:hover .el-event-details-btn {
  border-color: #161C24 !important;
  color: #161C24 !important;
}

.el-events-section--layout-2 .el-event-row:hover .el-event-details-btn:hover {
  background-color: #006ed3 !important;
  color: #ffffff !important;
}

/* Responsive adjustment for Mobile view on Layout 2 */
@media (max-width: 767px) {
  .el-events-section--layout-2 .el-event-row:hover {
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .el-events-section--layout-2 .el-event-row:hover .el-event-date,
  .el-events-section--layout-2 .el-event-row:hover .el-event-title-text {
    color: #ffffff !important;
  }
  .el-events-section--layout-2 .el-event-row:hover .el-event-time {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .el-events-section--layout-2 .el-event-row:hover .el-event-location {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .el-events-section--layout-2 .el-event-row:hover .el-event-details-btn {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
  }
}

/* --- PILLARS CAROUSEL LAYOUT --- */
.pillars-header--carousel {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 40px !important;
}

.pillars-header--carousel .pillars-header-left {
  flex: 1 !important;
}

.pillars-header--carousel .pillars-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-bottom: 5px !important;
}

.pillars-nav-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

/* Left Outlined Prev Button */
.pillars-nav-prev {
  border: 1px solid rgba(0, 114, 206, 0.3) !important;
  background-color: transparent !important;
  color: #0072CE !important;
}

.pillars-nav-prev:hover {
  background-color: rgba(0, 114, 206, 0.05) !important;
  border-color: #0072CE !important;
}

/* Right Solid Next Button */
.pillars-nav-next {
  background-color: #0072CE !important;
  border: 1px solid #0072CE !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.2) !important;
}

.pillars-nav-next:hover {
  background-color: #005cb0 !important;
  border-color: #005cb0 !important;
  box-shadow: 0 6px 16px rgba(0, 114, 206, 0.3) !important;
  transform: scale(1.05) !important;
}

.pillars-nav-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.pillars-swiper {
  width: 100% !important;
  padding: 0 0 40px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.pillar-slide {
  width: 560px !important; /* Carousel Card Width 560px */
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
}

.pillars-swiper .pillar-video-card {
  width: 100% !important;
  height: 600px !important; /* Carousel Card Height 600px */
  border-radius: 20px !important; /* Radius 20px */
}

.pillars-swiper .pillar-video-player-container {
  border-radius: 20px !important;
}

.pillars-swiper .pillar-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 400 !important; /* Carousel Title weight 400 (Regular) */
  font-size: 24px !important; /* Carousel Title Size 24px */
  color: #061037 !important;
}

.pillars-swiper .pillar-card-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 400 !important; /* Carousel Subtitle weight 400 (Regular) */
  font-size: 14px !important; /* Carousel Subtitle Size 14px */
  color: #231F20 !important;
}



/* --- IMPACT METRICS GRID SECTION --- */
.impact-metrics-grid-section {
  /* Section top padding 96px bottom 164px */
  overflow: hidden !important;
  position: relative !important;
}

.img-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.img-header {
  text-align: center !important;
  margin-bottom: 64px !important; /* Text area to card gap 64px */
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.img-main-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Title Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Title color #061037 */
  margin-bottom: 16px !important; /* Title to text gap 16px */
  line-height: 1.2 !important;
  max-width: 640px !important; /* Title and Text max width 640px */
  margin-left: auto !important;
  margin-right: auto !important;
}

.img-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Text size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #231F20 !important; /* Text color #231F20 */
  line-height: 1.6 !important;
  max-width: 617px !important; /* Text area max width 617px */
  margin-left: auto !important;
  margin-right: auto !important;
}

.img-grid-wrapper {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Three columns of 1fr */
  justify-content: center !important;
  gap: 96px 24px !important; /* Vertical gap 96px, Horizontal gap 24px */
  width: 100% !important;
}

/* Card Positioning on large desktop: Row 1 Left, Row 2 Right, Row 3 Left */
.img-grid-item-wrap {
  width: 100% !important;
  display: flex !important;
}

.img-item-pos-1 {
  grid-column: 1 !important; /* Row 1 Left */
}
.img-item-pos-2 {
  grid-column: 2 !important; /* Row 1 Left */
}
.img-item-pos-3 {
  grid-column: 2 !important; /* Row 2 Right */
}
.img-item-pos-4 {
  grid-column: 3 !important; /* Row 2 Right */
}
.img-item-pos-5 {
  grid-column: 1 !important; /* Row 3 Left */
}
.img-item-pos-6 {
  grid-column: 2 !important; /* Row 3 Left */
}

/* Card item layout */
.imc-card-item {
  width: 100% !important;
  height: 500px !important; /* Card Height 500px */
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
  z-index: 2 !important;
}

.imc-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.45s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}

.imc-card-item:hover {
  transform: translateY(-10px) !important;
}

.imc-card-item:hover .imc-card-inner {
  box-shadow: 0 24px 48px rgba(0, 114, 206, 0.18) !important;
}

.imc-card-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.8) 100%) !important;
  z-index: 1 !important;
  transition: background 0.4s ease !important;
}

.imc-card-item:hover .imc-card-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 100%) !important;
}

.imc-card-content {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 28px 32px !important; /* Card padding 28px 32px */
  box-sizing: border-box !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* Badge/sparkle */
.imc-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.imc-sparkle-icon {
  width: 16px !important;
  height: 16px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.imc-badge-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Size 14px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.5px !important;
}

.imc-card-top-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* Top text to counter gap 12px */
}

/* Huge Metric value */
.imc-metric-value {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Counter font IBM Plex Sans */
  font-size: 64px !important; /* Counter size 64px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
}

/* Bottom elements */
.imc-card-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.imc-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important; /* Title font IBM Plex Sans */
  font-size: 24px !important; /* Title size 24px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.imc-card-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* Responsive Layout adjustments */
@media (max-width: 1024px) {
  .img-grid-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 20px !important;
  }
  .img-grid-item-wrap {
    grid-column: auto !important; /* Reset desktop grid-column spans */
    justify-content: center !important;
  }
  .img-item-pos-1, .img-item-pos-2, .img-item-pos-3, .img-item-pos-4, .img-item-pos-5, .img-item-pos-6 {
    grid-column: auto !important;
  }
  .imc-card-item {
    width: 100% !important;
    max-width: 443px !important;
    height: 420px !important;
  }
}

@media (max-width: 767px) {
  .impact-metrics-grid-section {
    }
  .img-container {
    padding: 0 20px !important;
  }
  .img-header {
    margin-bottom: 40px !important;
  }
  .img-main-title {
    font-size: 32px !important;
  }
  .img-grid-wrapper {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .img-grid-item-wrap {
    grid-column: auto !important;
    justify-content: center !important;
  }
  .img-item-pos-1, .img-item-pos-2, .img-item-pos-3, .img-item-pos-4, .img-item-pos-5, .img-item-pos-6 {
    grid-column: auto !important;
  }
  .imc-card-item {
    width: 100% !important;
    max-width: 443px !important;
    height: 380px !important;
  }
  .imc-card-content {
    padding: 24px !important;
  }
  .imc-metric-value {
    font-size: 52px !important;
    margin-top: 0 !important;
  }
}

/* --- WORK WITH US LAYOUT 2 --- */
.wwu-layout--layout_2 .work-card-btn {
  background-color: #0072CE !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.25) !important;
}

.wwu-layout--layout_2 .work-card-btn:hover {
  background-color: #005CB0 !important;
  box-shadow: 0 6px 16px rgba(0, 114, 206, 0.35) !important;
}

/* --- SIDE BY SIDE CONTENT SECTION --- */
.sbs-section {
  /* Top/bottom padding 0px */
  overflow: hidden !important;
}

.sbs-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.sbs-header {
  text-align: center !important;
  margin-bottom: 50px !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sbs-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 40px !important; /* Title Size 40px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  line-height: 1.2 !important;
}

.sbs-grid-wrapper {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 85px !important; /* Text and image gap 85px */
  align-items: center !important;
  width: 100% !important;
}

.sbs-content-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.sbs-text-content {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important; /* Size 20px */
  line-height: 1.75 !important;
  color: #231F20 !important;
  font-weight: 400 !important;
}

.sbs-text-content p,
.sbs-text-content {
  margin: 0 0 24px 0 !important;
}

.sbs-text-content p:last-child,
.sbs-text-content:last-child {
  margin-bottom: 0 !important;
}

.sbs-media-col {
  width: 100% !important;
}

.sbs-image-wrap {
  width: 100% !important;
  height: 700px !important; /* Fixed desktop height requested */
  overflow: hidden !important;
  border-radius: 20px !important; /* Right image radius 20px */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06) !important;
}

.sbs-content-title {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.sbs-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: scale(1.01) !important; /* Prevent subpixel white/dark gaps on container edges */
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.sbs-image-wrap:hover .sbs-img {
  transform: scale(1.04) !important;
}

/* Layout selection rules for Image on Left / Text on Right */
.sbs-layout--left-image-right-text {
  grid-template-columns: 0.9fr 1.1fr !important;
}

.sbs-layout--left-image-right-text .sbs-media-col {
  order: -1 !important;
}

.sbs-layout--left-image-right-text .sbs-content-col {
  order: 1 !important;
  box-sizing: border-box !important;
}

/* Specific overrides for Image on Left / Text on Right Layout */
.sbs-section--layout-left-image-right-text {
  /* Section top padding 164px bottom 164px */
}

.sbs-layout--left-image-right-text .sbs-text-content {
  font-size: 16px !important; /* Text size 16px */
}

.sbs-layout--left-image-right-text .sbs-action-wrap {
  margin-top: 175px !important; /* Text to button gap 175px */
}

.sbs-layout--left-image-right-text .sbs-action-btn {
  padding: 14px 20px !important; /* Button padding 14px 20px */
  font-size: 16px !important; /* Button size 16px */
  font-weight: 500 !important; /* Weight 500 (Medium) */
}

.sbs-layout--left-image-right-text .sbs-image-wrap {
  height: 750px !important; /* Left image height 750px */
  border-radius: 20px !important; /* Left image radius 20px */
}

/* Premium Solid Blue Call-to-Action Button for Image with Text */
.sbs-action-wrap {
  margin-top: 24px !important;
}

.sbs-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #0072CE !important;
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 16px 32px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  border: 1px solid #0072CE !important;
  width: fit-content !important;
}

.sbs-action-btn:hover {
  background-color: #005CB0 !important;
  border-color: #005CB0 !important;
  box-shadow: 0 6px 18px rgba(0, 114, 206, 0.35) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.sbs-external-icon {
  margin-left: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  color: #0072CE !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}

.sbs-action-btn:hover .sbs-external-icon {
  color: #005CB0 !important;
  transform: translate(2px, -2px) !important;
}

/* Desktop layout modifications for Left Text / Right Image layout */
@media (min-width: 1025px) {
  /* Large image layout (default) */
  .sbs-layout--left-text-right-image .sbs-image-wrap {
    border: 1px solid #D1D5DB !important;
  }

  /* Small image layout */
  .sbs-layout--left-text-right-image-small {
    grid-template-columns: 1fr auto !important;
  }
  .sbs-layout--left-text-right-image-small .sbs-media-col {
    width: 334px !important;
  }
  .sbs-layout--left-text-right-image-small .sbs-image-wrap {
    width: 334px !important;
    height: 334px !important;
  }
}

/* Responsive queries */
@media (max-width: 1024px) {
  .sbs-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .sbs-grid-wrapper {
    gap: 40px !important;
  }
  .sbs-section-title {
    font-size: 36px !important;
  }
  .sbs-text-content {
    font-size: 18px !important;
  }
  .sbs-image-wrap {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
  .sbs-section--layout-left-image-right-text {
    }
  .sbs-layout--left-image-right-text .sbs-text-content {
    font-size: 15px !important;
  }
  .sbs-layout--left-image-right-text .sbs-action-wrap {
    margin-top: 64px !important; /* Responsive text to button gap */
  }
}

@media (max-width: 767px) {


  .sbs-section {
    /* Keep 0px padding on mobile */
  }
  .sbs-section--layout-left-image-right-text {
    /* Section padding on mobile */
  }
  .sbs-container {
    padding: 0 20px !important;
  }
  .sbs-grid-wrapper {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .sbs-media-col {
    order: -1 !important;
  }
  .sbs-section-title {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 24px !important;
  }
  .sbs-text-content,
  .sbs-text-content p,
  .sbs-layout--left-image-right-text .sbs-text-content {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important;
  }
  .sbs-action-wrap,
  .sbs-layout--left-image-right-text .sbs-action-wrap {
    margin-top: 32px !important;
  }
  .sbs-action-btn,
  .sbs-layout--left-image-right-text .sbs-action-btn {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
  }
  .sbs-image-wrap,
  .sbs-layout--left-image-right-text .sbs-image-wrap,
  .sbs-layout--left-text-right-image .sbs-image-wrap,
  .sbs-layout--left-text-right-image-small .sbs-image-wrap {
    height: 280px !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
  }
}


/* --- INTERACTIVE DASHBOARD LAYOUT 1 --- */
.db-layout--layout_1 .dashboard-tab-btn {
  color: #061037 !important;
  opacity: 0.6 !important;
}

.db-layout--layout_1 .dashboard-tab-btn:hover,
.db-layout--layout_1 .dashboard-tab-btn.is-active {
  color: #061037 !important;
  opacity: 1 !important;
}

.db-layout--layout_1 .dashboard-tab-btn::before {
  background: linear-gradient(to bottom, rgba(6, 16, 55, 0) 0%, #061037 50%, rgba(6, 16, 55, 0) 100%) !important;
}

.db-layout--layout_1 .dashboard-tab-btn::after {
  background-color: #061037 !important;
  box-shadow: 0 0 6px rgba(6, 16, 55, 0.4) !important;
}

/* If layout 1 has only 1 tab button (1 card added), make the card full width */
.db-layout--layout_1:has(.dashboard-tabs-list > .dashboard-tab-btn:only-child) .dashboard-tabs-column {
  display: none !important;
}

.db-layout--layout_1:has(.dashboard-tabs-list > .dashboard-tab-btn:only-child) .dashboard-image-column {
  display: none !important;
}

.db-layout--layout_1:has(.dashboard-tabs-list > .dashboard-tab-btn:only-child) .dashboard-card-column {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  height: auto !important;
}

.db-layout--layout_1:has(.dashboard-tabs-list > .dashboard-tab-btn:only-child) .dashboard-card-panel {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  position: relative !important;
}

.db-layout--layout_1:has(.dashboard-tabs-list > .dashboard-tab-btn:only-child) .dashboard-body {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* --- INTERACTIVE DASHBOARD LAYOUT 2 --- */
.db-layout--layout_2 .dashboard-tabs-list {
  border-left: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.db-layout--layout_2 .dashboard-tab-btn {
  margin-left: -2px !important;
  padding: 5px 0 5px 24px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.db-layout--layout_2 .dashboard-tab-btn::before {
  display: block !important;
  width: 2px !important;
  background: linear-gradient(to bottom, rgba(255, 184, 28, 0) 0%, #FFB81C 50%, rgba(255, 184, 28, 0) 100%) !important;
}

.db-layout--layout_2 .dashboard-tab-btn::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: -3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #FFB81C !important;
  box-shadow: 0 0 6px rgba(255, 184, 28, 0.6) !important;
  font-size: inherit !important;
  color: inherit !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.db-layout--layout_2 .dashboard-tab-btn.is-active {
  color: #FFB81C !important; /* Active gold text */
  font-weight: 400 !important;
}

.db-layout--layout_2 .dashboard-tab-btn.is-active::after {
  opacity: 1 !important;
}

.db-layout--layout_2 .dashboard-tab-btn:hover {
  color: #ffffff !important;
}

/* Card overrides for Layout 2 */
.db-layout--layout_2 .dashboard-card-panel {
  background-color: #ffffff !important; /* White card */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
  border-radius: 20px !important;
}

.db-layout--layout_2 .dashboard-card-panel .card-title {
  color: #061037 !important;
}

.db-layout--layout_2 .dashboard-card-panel .card-icon-wrap {
  background-color: #991C00 !important; /* Brand red circle badge */
  color: #ffffff !important;
}

.db-layout--layout_2 .dashboard-card-panel .card-divider {
  border-color: rgba(153, 28, 0, 0.2) !important; /* Brand-red divider line */
}

.db-layout--layout_2 .dashboard-card-panel .card-description {
  color: #231F20 !important;
}

.db-layout--layout_2 .dashboard-card-panel .card-stat {
  color: #061037 !important;
}

.db-layout--layout_2 .dashboard-card-panel .card-stat-sub {
  color: #4A5568 !important;
}

/* Right column image overlay adjustment for Layout 2 */
.db-layout--layout_2 .dashboard-image-panel {
  border-radius: 20px !important;
  overflow: hidden !important;
}

.db-layout--layout_2 .panel-image-label {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  left: 24px !important;
  bottom: 32px !important;
}

/* ==========================================================================
   LJE TEAM CAROUSEL SECTION
   ========================================================================== */
.paragraph--type--lje-team-carousel {
  /* Section top padding 164px bottom 164px */
  background-color: #ffffff !important;
  overflow: hidden !important;
}

.team-carousel-inner {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.team-carousel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 40px !important;
  margin-bottom: 48px !important; /* Title to card gap 48px */
}

.team-carousel-header-left {
  flex: 1 !important;
}

.team-carousel-main-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Title Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  margin: 0 !important;
  line-height: 1.2 !important;
}

.team-carousel-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-bottom: 5px !important;
}

/* Rounded Navigation Controls */
.team-nav-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

/* Left Outlined Arrow */
.team-nav-prev {
  border: 1px solid rgba(0, 114, 206, 0.3) !important;
  background-color: transparent !important;
  color: #0072CE !important;
}

.team-nav-prev:hover {
  background-color: rgba(0, 114, 206, 0.05) !important;
  border-color: #0072CE !important;
}

/* Right Solid Blue Arrow */
.team-nav-next {
  background-color: #0072CE !important;
  border: 1px solid #0072CE !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.2) !important;
}

.team-nav-next:hover {
  background-color: #005cb0 !important;
  border-color: #005cb0 !important;
  box-shadow: 0 6px 16px rgba(0, 114, 206, 0.3) !important;
  transform: scale(1.05) !important;
}

.team-nav-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.team-swiper {
  width: 100% !important;
  padding: 0 20px 40px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.team-slide {
  width: 560px !important; /* Card width 560px */
  height: 404px !important; /* Card height 404px */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   LJE TEAM MEMBER CARD
   ========================================================================== */
.paragraph--type--lje-team-member-card {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.team-card-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.team-card-image-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background-color: #0c1c36 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05) !important;
}

.team-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: block !important;
}

.team-card-img-placeholder {
  width: 100% !important;
  height: 100% !important;
  background-color: #1a2a4a !important;
}

.team-card-image-wrap:hover .team-card-img {
  transform: scale(1.05) !important;
}

/* Dark elegant gradient for white text legibility */
.team-card-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(12, 28, 54, 0) 40%,
    rgba(12, 28, 54, 0.5) 70%,
    rgba(12, 28, 54, 0.9) 100%
  ) !important;
  z-index: 1 !important;
  transition: opacity 0.3s ease !important;
}

/* Overlay Text Layout */
.team-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 32px 24px !important; /* Card padding 32px 24px */
  box-sizing: border-box !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 100px !important; /* Text and button gap 100px */
}

.team-card-meta {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; /* Title to sub title gap 8px */
  max-width: 253px !important; /* Title and text max width 253px */
}

.team-card-name {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Card title Size 24px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.team-card-role {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Sub title Size 14px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Semi-transparent White Bio Pill Button */
.team-card-action {
  flex-shrink: 0 !important;
}

.team-card-bio-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important; /* Button padding 12px 20px */
  background-color: #ffffff !important;
  color: #0c1c36 !important;
  border-radius: 30px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Button Size 16px */
  font-weight: 500 !important; /* Weight 500 (Medium) */
  font-style: normal !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  border: 1px solid #ffffff !important;
  white-space: nowrap !important;
}

.team-card-bio-btn--static {
  cursor: default !important;
}

.bio-btn-text {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.bio-btn-plus {
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-1.5px) !important;
}

.team-card-bio-btn:not(.team-card-bio-btn--static):hover {
  background-color: #0072CE !important;
  border-color: #0072CE !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(0, 114, 206, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* LJE Team Grid Layout (Desktop/Tablet) */
.paragraph--type--lje-team-carousel:has(.team-grid) {
  background-color: #061037 !important;
}

.paragraph--type--lje-team-carousel:has(.team-grid) .team-carousel-main-title {
  color: #ffffff !important;
}

.team-grid .field__items {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: 26px !important;
  row-gap: 48px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.team-grid .field__item {
  width: 100% !important;
  box-sizing: border-box !important;
}

.team-grid .team-member-card {
  height: 446px !important;
}

.team-grid .team-card-image-wrap {
  border-radius: 20px !important;
}

.team-grid .team-card-content {
  display: block !important;
  padding: 24px 20px !important;
}

.team-grid .team-card-meta {
  max-width: 100% !important;
}

.team-grid .team-card-action {
  display: none !important;
}

.team-grid .team-card-name {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 24px !important;
}

.team-grid .team-card-role {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 14px !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .paragraph--type--lje-team-carousel {
    }
  
  .team-carousel-main-title {
    font-size: 36px !important;
  }
  
  .team-carousel-header {
    margin-bottom: 40px !important;
  }
  
  .team-slide {
    width: 440px !important;
    height: 320px !important;
  }
  
  .team-card-content {
    padding: 24px !important;
    gap: 40px !important; /* Reduce gap for tablet layout */
  }
  
  .team-card-name {
    font-size: 20px !important;
  }

  /* LJE Team Grid Layout (Tablet) */
  .team-grid .field__items {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .team-carousel-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .paragraph--type--lje-team-carousel {
    }
  
  .team-carousel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
  }
  
  .team-carousel-header-right {
    align-self: flex-end !important;
  }
  
  .team-carousel-main-title {
    font-size: 30px !important;
  }
  
  .team-slide {
    width: calc(100vw - 40px) !important;
    height: 280px !important;
  }
  
  .team-card-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px 20px !important;
  }
  
  .team-card-action {
    width: 100% !important;
  }
  
  .team-card-bio-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important; /* Scale down button font size for mobile */
    padding: 10px 16px !important;
  }

  /* LJE Team Grid Layout (Mobile) */
  .team-grid .field__items {
    grid-template-columns: 1fr !important;
    row-gap: 48px !important;
  }

  .team-grid .team-member-card {
    height: 280px !important;
  }
}

/* --- PREMIUM CONTACT FORM SECTION --- */
.contact-form-section {
  /* Section top padding 130px bottom 164px */
  background-color: #ffffff !important;
}

.contact-section-grid {
  display: grid !important;
  grid-template-columns: 560px 1fr !important; /* Left area max width 560px */
  gap: 143px !important; /* Left text to right form card gap 143px */
  align-items: start !important;
  width: 100% !important;
}

/* Left Column: Details */
.contact-details-col {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  max-width: 560px !important;
  width: 100% !important;
}

.contact-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Size 48px */
  line-height: 1.15 !important;
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
  max-width: 100% !important;
}

.contact-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #231F20 !important; /* Color #231F20 */
  margin: 0 0 74px 0 !important; /* Text to Contact Label gap 74px */
  max-width: 100% !important;
}

.contact-info-block {
  margin-bottom: 157px !important; /* Email to social label gap 157px */
}

.contact-info-heading {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Contact Label Size 24px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #02040E !important; /* Color #02040E */
  margin: 0 0 32px 0 !important; /* Label to email gap 32px */
}

.contact-info-subheading {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important; /* Email label Size 20px */
  font-weight: 400 !important;
  font-style: normal !important;
  color: #888888 !important;
  margin: 0 0 12px 0 !important; /* Email label to email gap 12px */
}

.contact-email-link {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Email Size 16px */
  color: #231F20 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  display: inline-block !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.contact-email-link:hover {
  color: #0072CE !important;
  border-bottom-color: #0072CE !important;
}

.contact-socials-block {
  margin-top: 20px !important;
}

.contact-socials-block .contact-info-heading {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Social label Size 24px */
  font-weight: 400 !important;
  font-style: normal !important;
  color: #231F20 !important; /* Color #231F20 */
  margin: 0 0 20px 0 !important; /* Label to social text gap 20px */
}

.contact-socials-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.contact-social-link {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* social text Size 16px */
  font-weight: 400 !important;
  font-style: normal !important;
  color: #231F20 !important; /* Color #231F20 */
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.contact-social-link:hover {
  color: #0072CE !important;
  transform: translateX(4px) !important;
}

/* Right Column: Solid Blue Card */
.contact-form-card {
  background-color: #0072CE !important;
  border-radius: 20px !important; /* Radius 20px */
  padding: 40px 35px !important; /* Form card padding 40px 35px */
  color: #ffffff !important;
  box-shadow: 0 12px 36px rgba(0, 114, 206, 0.18) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.contact-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 36px !important; /* Form title Size 36px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #ffffff !important;
  margin: 0 0 46px 0 !important; /* Title to form gap 46px */
  letter-spacing: -0.3px !important;
}

/* Webform Element Custom overrides */
.contact-form-wrapper form {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important; /* Field to field gap vertically 30px */
}

/* Flexbox rows */
.contact-form-wrapper .webform-flexbox {
  display: flex !important;
  gap: 20px !important; /* Field to field gap side by side 20px */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.contact-form-wrapper .webform-flexbox .webform-flex {
  flex: 1 !important;
  margin: 0 !important;
}

/* Form item styling */
.contact-form-card .form-item,
.contact-form-card .js-form-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* Label to field gap 12px */
  margin-bottom: 0 !important;
}

/* Label styling */
.contact-form-card .form-item label,
.contact-form-card .js-form-item label {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Field label Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: rgba(255, 255, 255, 0.9) !important;
  text-transform: none !important;
  display: block !important;
}

/* Input Fields overrides */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"] {
  height: 60px !important; /* Field height 60px */
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 30px !important;
  padding: 0 24px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Textarea specifically rounded but not pill */
.contact-form-card textarea {
  height: 220px !important; /* Text field height 220px */
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

/* Hover/Focus input borders */
.contact-form-card input[type="text"]:focus,
.contact-form-card input[type="email"]:focus,
.contact-form-card input[type="tel"]:focus,
.contact-form-card textarea:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15) !important;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Webform submit container & button overrides */
.contact-form-card .form-actions {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
}

.contact-form-card input[type="submit"],
.contact-form-card button.webform-button--submit {
  background-color: #ffffff !important;
  color: #000000 !important; /* Button color #000000 */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important; /* Button Weight 500 */
  font-size: 16px !important; /* Button Size 16px */
  padding: 18px 98px !important; /* Button padding 18px 98px */
  border-radius: 30px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 !important;
  text-transform: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.contact-form-card input[type="submit"]:hover,
.contact-form-card button.webform-button--submit:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.contact-form-card input[type="submit"]:active,
.contact-form-card button.webform-button--submit:active {
  transform: translateY(0) !important;
}

/* reCAPTCHA Info text */
.contact-form-recaptcha-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important; /* recapcha text Size 12px */
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
  flex-grow: 1 !important;
  max-width: 380px !important;
  text-align: left !important;
  font-weight: 400 !important; /* recapcha text Weight 400 */
  font-style: normal !important; /* Style Regular */
}

.contact-form-recaptcha-text a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
  transition: opacity 0.2s ease !important;
}

.contact-form-recaptcha-text a:hover {
  opacity: 0.8 !important;
}

/* Ajax Throbber custom styling */
.contact-form-card .ajax-progress {
  display: inline-block !important;
  margin-left: 10px !important;
  color: #ffffff !important;
}

.contact-form-card .ajax-progress-throbber {
  background: transparent !important;
  color: #ffffff !important;
}

/* Inline webform success messages customization */
.contact-form-card .webform-submission-information,
.contact-form-card .messages--status {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-left: 4px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

/* --- Responsive Layout for Contact Section --- */
@media (max-width: 1024px) {
  .contact-form-section {
    }
  
  .contact-section-grid {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }
  
  .contact-title {
    font-size: 38px !important;
    max-width: 100% !important;
  }
  
  .contact-subtitle {
    max-width: 100% !important;
    margin-bottom: 36px !important;
  }
  
  .contact-info-block {
    margin-bottom: 50px !important; /* Scale down gap for tablet/mobile */
  }
  
  .contact-form-card {
    padding: 36px !important;
  }
}

@media (max-width: 767px) {
  .contact-form-section {
    }
  
  .contact-title {
    font-size: 32px !important;
  }
  
  .contact-subtitle {
    margin-bottom: 24px !important;
  }
  
  .contact-form-wrapper .webform-flexbox {
    flex-direction: column !important;
    gap: 30px !important; /* Maintain row gap for mobile flex columns */
  }
  
  .contact-form-card {
    padding: 24px !important;
    border-radius: 16px !important;
  }
  
  .contact-form-card input[type="text"],
  .contact-form-card input[type="email"],
  .contact-form-card input[type="tel"] {
    height: 54px !important; /* Slightly more compact for mobile */
  }
  
  .contact-form-card textarea {
    height: 180px !important;
  }
  
  .contact-card-title {
    font-size: 26px !important;
    margin-bottom: 24px !important;
  }
  
  .contact-form-card .form-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  .contact-form-recaptcha-text {
    max-width: 100% !important;
  }

  .contact-form-card input[type="submit"],
  .contact-form-card button.webform-button--submit {
    width: 100% !important;
    padding: 18px 24px !important; /* Mobile padding */
    text-align: center !important;
  }
}

/* --- INTERACTIVE MAP SECTION --- */
.interactive-map-section {
  /* Section top padding 0px bottom 0px */
  background-color: #ffffff !important;
}

.map-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  color: #061037 !important;
  text-align: center !important;
  margin: 0 0 60px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.map-wrapper-outer {
  position: relative !important;
  width: 100% !important;
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  box-shadow: 0 20px 40px rgba(12, 21, 35, 0.06) !important;
  border: 1px solid rgba(12, 21, 35, 0.08) !important;
}

.map-container {
  height: 630px !important; /* Map height 630px */
  width: 100% !important;
  position: relative !important;
  background-color: #f7f9fc !important;
  z-index: 1 !important;
}

.map-loading-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  z-index: 1000 !important;
  transition: opacity 0.4s ease !important;
}

.map-spinner {
  width: 40px !important;
  height: 40px !important;
  border: 3px solid rgba(0, 114, 206, 0.1) !important;
  border-radius: 50% !important;
  border-top-color: var(--primary-blue) !important;
  animation: map-spin 0.8s linear infinite !important;
}

.map-loading-overlay span {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  color: #666666 !important;
  font-weight: 500 !important;
}

@keyframes map-spin {
  to {
    transform: rotate(360deg) !important;
  }
}

/* Custom Marker Styling */
.custom-map-marker-wrap {
  background: none !important;
  border: none !important;
}

.custom-map-marker-svg {
  display: block !important;
  transition: transform 0.2s ease !important;
}

/* The marker is a small solid dot: grow it slightly on hover and focus. */
.custom-map-marker-wrap:hover .custom-map-marker-svg,
.custom-map-marker-wrap:focus-visible .custom-map-marker-svg {
  transform: scale(1.35) !important;
}

/* Leaflet Popup Styling Overrides */
.custom-leaflet-popup .leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: #333333 !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 15px 30px rgba(12, 21, 35, 0.12) !important;
  border: 1px solid rgba(12, 21, 35, 0.04) !important;
}

.custom-leaflet-popup .leaflet-popup-content {
  margin: 0 !important;
  line-height: inherit !important;
}

.custom-leaflet-popup .leaflet-popup-tip {
  background: #ffffff !important;
  box-shadow: 0 15px 30px rgba(12, 21, 35, 0.12) !important;
}

.custom-leaflet-popup .leaflet-popup-close-button {
  top: 12px !important;
  right: 12px !important;
  color: #888888 !important;
  font-size: 16px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  border-radius: 50% !important;
  background-color: #f7f9fc !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.custom-leaflet-popup .leaflet-popup-close-button:hover {
  background-color: #eef2f6 !important;
  color: #333333 !important;
}

/* Map Popup Contents */
.map-popup-card {
  display: flex !important;
  flex-direction: column !important;
}

.map-popup-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0C1523 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
}

.map-popup-description {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  color: #666666 !important;
  line-height: 1.5 !important;
  margin: 0 0 14px 0 !important;
}

.map-popup-link {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--primary-blue) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  transition: gap 0.2s ease !important;
}

.map-popup-link:hover {
  text-decoration: underline !important;
  gap: 7px !important;
}

/* Map Responsive Adjustments */
@media (max-width: 1024px) {
  .interactive-map-section {
    }
  .map-section-title {
    font-size: 38px !important;
    margin-bottom: 40px !important;
  }
  .map-container {
    height: 520px !important;
  }
}

@media (max-width: 767px) {
  .interactive-map-section {
    }
  .map-section-title {
    font-size: 32px !important;
    margin-bottom: 30px !important;
  }
  .map-container {
    height: 450px !important;
  }
  .map-wrapper-outer {
    border-radius: 16px !important;
  }
}

/* --- FAQ ACCORDION SECTION --- */
.faq-section {
  /* Section top padding 164px bottom 164px */
  background-color: #ffffff !important;
}

.faq-section-grid {
  display: grid !important;
  grid-template-columns: 560px 1fr !important; /* Left content to right FAQ Item gap 140px, left col max width 560px */
  gap: 140px !important;
  align-items: start !important;
}

.faq-left-col {
  position: sticky !important;
  top: 120px !important;
  max-width: 560px !important; /* Title and text max width 560px */
  width: 100% !important;
}

.faq-left-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Title Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #061037 !important; /* Color #061037 */
  line-height: 1.2 !important;
  margin: 0 0 16px 0 !important; /* Title to text gap 16px */
  letter-spacing: -0.5px !important;
}

.faq-left-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Text Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #231F20 !important; /* Color #231F20 */
  line-height: 1.6 !important;
  margin: 0 !important;
}

.faq-right-col {
  width: 100% !important;
}

.faq-accordion-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.faq-item-row {
  border-top: 1px solid #CECECE !important; /* Border #CECECE */
  width: 100% !important;
  margin: 0 !important;
}

.faq-item-row:last-child {
  border-bottom: 1px solid #CECECE !important; /* Border #CECECE */
}

.faq-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 0 !important; /* Faq Padding top and bottom 24px */
  cursor: pointer !important;
  user-select: none !important;
  gap: 20px !important;
}

.faq-item-row.is-open .faq-item-header {
  padding-bottom: 0 !important; /* Collapse header bottom padding when open to allow precise gap */
}

.faq-item-question {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Title Size 24px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #0C1523 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  transition: color 0.3s ease !important;
}

.faq-item-row:hover .faq-item-question {
  color: #0072CE !important;
}

.faq-item-row.is-open .faq-item-question {
  color: #061037 !important;
  font-weight: 500 !important;
}

/* Plus to Close Button */
.faq-toggle-btn {
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.faq-toggle-btn::before,
.faq-toggle-btn::after {
  content: '' !important;
  position: absolute !important;
  background-color: #061037 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* Horizontal line of the plus */
.faq-toggle-btn::before {
  width: 16px !important;
  height: 2px !important;
}

/* Vertical line of the plus */
.faq-toggle-btn::after {
  width: 2px !important;
  height: 16px !important;
}

.faq-item-row.is-open .faq-toggle-btn {
  transform: none !important;
}

.faq-item-row.is-open .faq-toggle-btn::after {
  transform: scaleY(0) !important;
  opacity: 0 !important;
}

.faq-toggle-btn:hover {
  background-color: transparent !important;
}

/* Answer Slide Drawer */
.faq-accordion-answer {
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
  width: 100% !important;
}

.faq-answer-inner {
  padding: 26px 0 24px 0 !important; /* Title to text gap 26px, padding bottom 24px */
  width: 100% !important;
}

.faq-answer-inner p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Text Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  line-height: 1.6 !important;
  color: #231F20 !important; /* Color #231F20 */
  margin: 0 0 16px 0 !important;
  max-width: 560px !important; /* Text max width 560px */
  width: 100% !important;
}

.faq-answer-inner p:last-child {
  margin-bottom: 0 !important;
}

/* --- FAQ Responsive Layouts --- */
@media (max-width: 1024px) {
  .faq-section {
    }
  
  .faq-section-grid {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }
  
  .faq-left-col {
    position: static !important;
    max-width: 100% !important;
  }
  
  .faq-left-title {
    font-size: 38px !important;
    text-align: center !important;
  }
  
  .faq-left-subtitle {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }
  
  .faq-item-header {
    padding: 20px 0 !important;
  }
}

@media (max-width: 767px) {
  .faq-section {
    }
  
  .faq-left-title {
    font-size: 32px !important;
  }
  
  .faq-item-question {
    font-size: 20px !important;
  }
  
  .faq-item-header {
    padding: 18px 0 !important;
  }
}

/* --- CASE STUDY DETAIL PAGE --- */
.node-case-study-detail {
  width: 100% !important;
  overflow-x: clip !important;
  background-color: #ffffff !important;
}

/* 1. Case Study Header Block */
.case-study-header-block {
  padding: 130px 20px 40px 20px !important; /* Padding top 130px */
  box-sizing: border-box !important;
}

.case-study-main-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important; /* Size 64px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  line-height: 1.15 !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  letter-spacing: -1px !important;
  max-width: 933px !important; /* Title max width 933px */
}

.case-study-subtitle-body {
  margin: 0 0 92px 0 !important; /* Text to featured image gap 92px */
  max-width: 445px !important; /* Subtitle max width 445px */
}

.case-study-subtitle-body p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #231F20 !important; /* Color #231F20 */
  line-height: 1.65 !important;
  margin: 0 !important;
  text-align: left !important;
}

.case-study-featured-image-wrap {
  width: 100% !important;
  height: 690px !important; /* Image height 690px */
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  border: 1px solid rgba(12, 21, 35, 0.06) !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.05) !important;
}

.case-study-featured-img {
  width: 100% !important;
  height: 690px !important; /* Image height 690px */
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px !important; /* Radius 20px */
}


/* 2. Middle Content Sections Wrapper */
.case-study-middle-content {
  padding: 0 !important;
  background-color: #ffffff !important;
}

/* 3. lje_rich_text Paragraph Bundle Styles */
.paragraph--type--lje-rich-text {
  max-width: 910px !important;
  margin: 0 auto 0 auto !important; /* Remove bottom margin */
  padding: 0 20px !important;
  box-sizing: border-box !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.rich-text-section {
  /* Section top padding 0px bottom 0px */
}

.paragraph--type--lje-rich-text h2,
.paragraph--type--lje-rich-text h3 {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.5px !important;
}

.paragraph--type--lje-rich-text h2 {
  font-size: 32px !important;
}

.paragraph--type--lje-rich-text h3 {
  font-size: 24px !important;
}

.paragraph--type--lje-rich-text p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Size 24px */
  font-weight: 400 !important; /* Weight 400 */
  font-style: normal !important; /* Style Regular */
  color: #4A4A4A !important;
  line-height: 1.6 !important;
  margin: 0 0 24px 0 !important;
}

.paragraph--type--lje-rich-text p:last-child {
  margin-bottom: 0 !important;
}

/* 4. lje_two_images Paragraph Bundle Styles */
.paragraph--type--lje-two-images {
  margin: 0 !important; /* Remove bottom margin */
}

.two-images-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 30px !important;
  width: 100% !important;
}

.two-img {
  width: 100% !important;
  height: 700px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  border: 1px solid rgba(12, 21, 35, 0.06) !important;
  box-shadow: 0 10px 30px rgba(12, 21, 35, 0.04) !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.two-img:hover {
  transform: scale(1.005) !important;
}

/* 5. Bottom Related Section ("More Case Studies" Overlay Cards) */
.more-case-studies-section {
  background-color: #ffffff !important; /* Premium clean white background matching mockup */
  padding-top: 50px !important; /* 50px top padding above section */
  margin-bottom: 80px !important;
}

.more-case-studies-section .more-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  text-align: left !important; /* Left aligned */
  margin: 0 0 48px 0 !important; /* Title to card gap 48px */
  letter-spacing: -0.5px !important;
}

.more-case-studies-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  width: 100% !important;
}

.related-case-study-card {
  position: relative !important;
  display: block !important;
  background-color: #ffffff !important;
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  height: 500px !important; /* Card height 500px */
  border: none !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.06) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.related-case-study-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(12, 21, 35, 0.12) !important;
}

.card-image-outer {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #eef2f6 !important;
}

.card-image-outer .card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.related-case-study-card:hover .card-img,
.related-blog-card:hover .card-img {
  transform: scale(1.03) !important;
}

.card-img-placeholder {
  width: 100% !important;
  height: 100% !important;
  background: #eef2f6 !important;
}

/* Premium Dark Gradient Overlay at the bottom of the card */
.card-overlay-gradient {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 65% !important;
  background: linear-gradient(to top, rgba(10, 28, 58, 0.98) 0%, rgba(10, 28, 58, 0.5) 50%, rgba(10, 28, 58, 0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none;
}

/* Overlay Text Content */
.card-overlay-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 32px 28px !important; /* Card padding 32px 28px */
  box-sizing: border-box !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: left !important;
  max-width: 560px !important; /* Content max width 560px */
}

.card-overlay-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 28px !important; /* Card title Size 28px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 4px rgba(10, 28, 58, 0.3) !important;
  transition: color 0.25s ease !important;
}

.related-case-study-card:hover .card-overlay-title,
.related-blog-card:hover .card-overlay-title {
  color: #55b7ff !important; /* Soft accent color on hover */
}

.card-overlay-desc {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  line-height: 24px !important; /* Line height 24px */
}

/* --- CASE STUDY RESPONSIVE STYLES --- */
@media (max-width: 1024px) {
  .case-study-header-block {
    padding: 80px 20px 30px 20px !important;
  }
  
  .case-study-main-title {
    font-size: 44px !important;
  }
  
  .case-study-subtitle-body {
    max-width: 100% !important;
    margin-bottom: 50px !important;
  }
  
  .case-study-subtitle-body p {
    font-size: 15px !important;
  }
  
  .case-study-featured-image-wrap,
  .case-study-featured-img {
    height: 520px !important;
    border-radius: 20px !important;
  }
  
  .paragraph--type--lje-two-images img {
    height: 320px !important;
  }
  
  
  
  .more-case-studies-section .more-section-title {
    font-size: 34px !important;
    margin-bottom: 40px !important;
  }
  
  .more-case-studies-grid {
    gap: 30px !important;
  }
  
  .related-case-study-card {
    height: 420px !important;
  }
  
  .card-overlay-content {
    padding: 28px 24px !important;
    max-width: 100% !important;
  }
  
  .card-overlay-title {
    font-size: 24px !important;
  }
  
  .card-overlay-desc {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .paragraph--type--lje-rich-text p {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  .case-study-header-block {
    padding: 50px 15px 20px 15px !important;
  }
  
  .case-study-main-title {
    font-size: 32px !important;
    margin-bottom: 18px !important;
  }
  
  .case-study-subtitle-body {
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }
  
  .case-study-subtitle-body p {
    font-size: 14px !important;
  }
  
  .case-study-featured-image-wrap,
  .case-study-featured-img {
    height: 380px !important;
    border-radius: 16px !important;
  }
  
  .case-study-middle-content {
    padding: 0 !important;
  }
  
  .paragraph--type--lje-rich-text {
    margin-bottom: 0 !important; /* Remove bottom margin */
  }
  
  .paragraph--type--lje-rich-text h2 {
    font-size: 26px !important;
  }
  
  .paragraph--type--lje-rich-text p {
    font-size: 18px !important; /* Scale down to 18px on mobile */
    line-height: 1.6 !important;
  }
  
  .paragraph--type--lje-two-images {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 0 !important; /* Remove bottom margin */
  }
  
  .paragraph--type--lje-two-images .two-img {
    height: 260px !important;
  }
  
  
  
  .more-case-studies-section .more-section-title {
    font-size: 28px !important;
    margin-bottom: 30px !important;
  }
  
  .more-case-studies-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .related-case-study-card {
    height: 380px !important;
    border-radius: 20px !important;
  }
  
  .card-overlay-content {
    padding: 24px 20px !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  
  .card-overlay-title {
    font-size: 20px !important;
  }
  
  .card-overlay-desc {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

/* ==========================================================================
   DYNAMIC PARAGRAPH SPACING UTILITY CLASSES
   ========================================================================== */

/* Spacing Top Desktop */
.spacing-top-default,
.spacing-top-164px {
  padding-top: 164px !important;
}
.spacing-top-130px {
  padding-top: 130px !important;
}
.spacing-top-100px {
  padding-top: 100px !important;
}
.spacing-top-96px {
  padding-top: 96px !important;
}
.spacing-top-80px {
  padding-top: 80px !important;
}
.spacing-top-60px {
  padding-top: 60px !important;
}
.spacing-top-0px {
  padding-top: 0 !important;
}
.spacing-top-custom {
  padding-top: calc(var(--custom-spacing-top, 0) * 1px) !important;
}

/* Spacing Bottom Desktop */
.spacing-bottom-default,
.spacing-bottom-164px {
  padding-bottom: 164px !important;
}
.spacing-bottom-130px {
  padding-bottom: 130px !important;
}
.spacing-bottom-100px {
  padding-bottom: 100px !important;
}
.spacing-bottom-96px {
  padding-bottom: 96px !important;
}
.spacing-bottom-80px {
  padding-bottom: 80px !important;
}
.spacing-bottom-60px {
  padding-bottom: 60px !important;
}
.spacing-bottom-0px {
  padding-bottom: 0 !important;
}
.spacing-bottom-custom {
  padding-bottom: calc(var(--custom-spacing-bottom, 0) * 1px) !important;
}

/* Spacing Tablet Overrides */
@media (max-width: 1024px) {
  .spacing-top-default,
  .spacing-top-164px {
    padding-top: 100px !important;
  }
  .spacing-top-130px {
    padding-top: 80px !important;
  }
  .spacing-top-100px,
  .spacing-top-96px {
    padding-top: 70px !important;
  }
  .spacing-top-80px {
    padding-top: 60px !important;
  }
  .spacing-top-60px {
    padding-top: 40px !important;
  }
  .spacing-top-0px {
    padding-top: 0 !important;
  }
  .spacing-top-custom {
    padding-top: calc(var(--custom-spacing-top, 0) * 0.7px) !important;
  }

  .spacing-bottom-default,
  .spacing-bottom-164px {
    padding-bottom: 100px !important;
  }
  .spacing-bottom-130px {
    padding-bottom: 80px !important;
  }
  .spacing-bottom-100px,
  .spacing-bottom-96px {
    padding-bottom: 70px !important;
  }
  .spacing-bottom-80px {
    padding-bottom: 60px !important;
  }
  .spacing-bottom-60px {
    padding-bottom: 40px !important;
  }
  .spacing-bottom-0px {
    padding-bottom: 0 !important;
  }
  .spacing-bottom-custom {
    padding-bottom: calc(var(--custom-spacing-bottom, 0) * 0.7px) !important;
  }
}

/* Spacing Mobile Overrides */
@media (max-width: 767px) {
  .spacing-top-default,
  .spacing-top-164px {
    padding-top: 80px !important;
  }
  .spacing-top-130px {
    padding-top: 60px !important;
  }
  .spacing-top-100px,
  .spacing-top-96px {
    padding-top: 50px !important;
  }
  .spacing-top-80px {
    padding-top: 40px !important;
  }
  .spacing-top-60px {
    padding-top: 30px !important;
  }
  .spacing-top-0px {
    padding-top: 0 !important;
  }
  .spacing-top-custom {
    padding-top: calc(var(--custom-spacing-top, 0) * 0.5px) !important;
  }

  .spacing-bottom-default,
  .spacing-bottom-164px {
    padding-bottom: 80px !important;
  }
  .spacing-bottom-130px {
    padding-bottom: 60px !important;
  }
  .spacing-bottom-100px,
  .spacing-bottom-96px {
    padding-bottom: 50px !important;
  }
  .spacing-bottom-80px {
    padding-bottom: 40px !important;
  }
  .spacing-bottom-60px {
    padding-bottom: 30px !important;
  }
  .spacing-bottom-0px {
    padding-bottom: 0 !important;
  }
  .spacing-bottom-custom {
    padding-bottom: calc(var(--custom-spacing-bottom, 0) * 0.5px) !important;
  }
}

/* ==========================================================================
   BLOG DETAIL PAGE STYLES (Identical to Case Study Detail Page)
   ========================================================================== */

.node-blog-detail {
  width: 100% !important;
  overflow-x: hidden !important;
  background-color: #ffffff !important;
}

/* 1. Blog Header Block */
.blog-header-block {
  padding: 130px 20px 40px 20px !important; /* Padding top 130px */
  box-sizing: border-box !important;
}

.blog-main-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important; /* Size 64px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  line-height: 1.15 !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  letter-spacing: -1px !important;
  max-width: 933px !important; /* Title max width 933px */
}

.blog-subtitle-body {
  margin: 0 0 92px 0 !important; /* Text to featured image gap 92px */
  max-width: 445px !important; /* Subtitle max width 445px */
}

.blog-subtitle-body p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #231F20 !important; /* Color #231F20 */
  line-height: 1.65 !important;
  margin: 0 !important;
  text-align: left !important;
}

.blog-featured-image-wrap {
  width: 100% !important;
  height: 690px !important; /* Image height 690px */
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  border: 1px solid rgba(12, 21, 35, 0.06) !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.05) !important;
}

.blog-featured-img {
  width: 100% !important;
  height: 690px !important; /* Image height 690px */
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px !important; /* Radius 20px */
}

/* 2. Middle Content Sections Wrapper */
.blog-middle-content {
  padding: 0 !important;
  background-color: #ffffff !important;
}

/* 3. Bottom Related Section ("More Blogs" Overlay Cards) */
.more-blogs-section {
  padding: 100px 0 !important;
  background-color: #ffffff !important;
}

.more-blogs-section .more-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  text-align: left !important; /* Left aligned */
  margin: 0 0 48px 0 !important; /* Title to card gap 48px */
  letter-spacing: -0.5px !important;
}

.more-blogs-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  width: 100% !important;
}

.related-blog-card {
  position: relative !important;
  display: block !important;
  background-color: #ffffff !important;
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  height: 500px !important; /* Card height 500px */
  border: none !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.06) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.related-blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(12, 21, 35, 0.12) !important;
}

/* Responsive design overrides for Blog Single Page */
@media (max-width: 1024px) {
  .blog-header-block {
    padding: 80px 20px 30px 20px !important;
  }
  
  .blog-main-title {
    font-size: 44px !important;
  }
  
  .blog-subtitle-body {
    max-width: 100% !important;
    margin-bottom: 50px !important;
  }
  
  .blog-subtitle-body p {
    font-size: 15px !important;
  }
  
  .blog-featured-image-wrap,
  .blog-featured-img {
    height: 520px !important;
    border-radius: 20px !important;
  }
  
  .blog-middle-content {
    padding: 0 !important;
  }

  .more-blogs-section {
    padding: 80px 0 !important;
  }
  
  .more-blogs-section .more-section-title {
    font-size: 34px !important;
    margin-bottom: 40px !important;
  }
  
  .more-blogs-grid {
    gap: 30px !important;
  }
  
  .related-blog-card {
    height: 420px !important;
  }
}

@media (max-width: 767px) {
  .blog-header-block {
    padding: 50px 15px 20px 15px !important;
  }
  
  .blog-main-title {
    font-size: 32px !important;
    margin-bottom: 18px !important;
  }
  
  .blog-subtitle-body {
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }
  
  .blog-subtitle-body p {
    font-size: 14px !important;
  }
  
  .blog-featured-image-wrap,
  .blog-featured-img {
    height: 380px !important;
    border-radius: 16px !important;
  }
  
  .blog-middle-content {
    padding: 0 !important;
  }

  .more-blogs-section {
    padding: 60px 0 !important;
  }
  
  .more-blogs-section .more-section-title {
    font-size: 28px !important;
    margin-bottom: 30px !important;
  }
  
  .more-blogs-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .related-blog-card {
    height: 380px !important;
    border-radius: 20px !important;
  }
}

/* ==========================================================================
   EVENT DETAIL PAGE STYLES
   ========================================================================== */

.node-event-detail {
  width: 100% !important;
  overflow-x: hidden !important;
  background-color: #ffffff !important;
}

/* 1. Event Header Block */
.event-header-block {
  padding: 130px 20px 40px 20px !important; /* Padding top 130px */
  box-sizing: border-box !important;
}

.event-header-grid {
  display: grid !important;
  grid-template-columns: 1fr 400px !important; /* 400px details card column */
  gap: 60px !important;
  margin-bottom: 92px !important; /* Gap to featured image 92px */
  align-items: start !important;
}

.event-main-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 64px !important; /* Size 64px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  line-height: 1.15 !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  letter-spacing: -1px !important;
  max-width: 933px !important; /* Title max width 933px */
}

.event-subtitle-body {
  max-width: 560px !important;
}

.event-subtitle-body p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #231F20 !important; /* Color #231F20 */
  line-height: 1.65 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Metadata Info Box Card */
.event-info-box {
  background-color: #f7f9fc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important; /* Radius 20px */
  padding: 32px 28px !important; /* Card padding 32px 28px */
  box-shadow: 0 10px 25px rgba(12, 21, 35, 0.04) !important;
}

.event-info-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 20px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 12px !important;
}

.event-info-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.event-info-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-align: left !important;
}

.event-info-item .info-label {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(6, 16, 55, 0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.event-info-item .info-val {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #061037 !important;
  line-height: 1.4 !important;
}

.event-info-item .tag-val {
  display: inline-block !important;
  background-color: rgba(6, 16, 55, 0.06) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  width: fit-content !important;
}

/* CTA Register Button */
.event-cta-wrap {
  width: 100% !important;
}

.event-cta-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #061037 !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 16px 20px !important;
  border-radius: 20px !important; /* Radius 20px */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(6, 16, 55, 0.15) !important;
}

.event-cta-btn:hover {
  background-color: #0c1c54 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(6, 16, 55, 0.25) !important;
}

/* Cover Image */
.event-featured-image-wrap {
  width: 100% !important;
  height: 690px !important; /* Image height 690px */
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  border: 1px solid rgba(12, 21, 35, 0.06) !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.05) !important;
}

.event-featured-img {
  width: 100% !important;
  height: 690px !important; /* Image height 690px */
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px !important; /* Radius 20px */
}

/* 2. Middle Content Sections Wrapper */
.event-middle-content {
  padding: 0 !important;
  background-color: #ffffff !important;
}

/* 3. Bottom Related Section ("More Events") */
.more-events-section {
  padding: 100px 0 !important;
  background-color: #ffffff !important;
}

.more-events-section .more-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* Size 48px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  font-style: normal !important;
  color: #061037 !important; /* Color #061037 */
  text-align: left !important; /* Left aligned */
  margin: 0 0 48px 0 !important; /* Title to card gap 48px */
  letter-spacing: -0.5px !important;
}

.more-events-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  width: 100% !important;
}

.related-event-card {
  position: relative !important;
  display: block !important;
  background-color: #ffffff !important;
  border-radius: 20px !important; /* Radius 20px */
  overflow: hidden !important;
  height: 500px !important; /* Card height 500px */
  border: none !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.06) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.related-event-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(12, 21, 35, 0.12) !important;
}

.related-event-card:hover .card-img {
  transform: scale(1.03) !important;
}

.related-event-card:hover .card-overlay-title {
  color: #55b7ff !important;
}

/* Event specific metadata styling inside the card overlay */
.event-card-category {
  display: inline-block !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  margin-bottom: 4px !important;
  backdrop-filter: blur(4px) !important;
}

.event-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 4px !important;
}

.event-card-meta .meta-separator {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Responsive design overrides for Event Single Page */
@media (max-width: 1024px) {
  .event-header-block {
    padding: 80px 20px 30px 20px !important;
  }
  
  .event-header-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-bottom: 50px !important;
  }
  
  .event-main-title {
    font-size: 44px !important;
  }
  
  .event-subtitle-body {
    max-width: 100% !important;
  }
  
  .event-subtitle-body p {
    font-size: 15px !important;
  }
  
  .event-info-box {
    padding: 28px 24px !important;
  }
  
  .event-featured-image-wrap,
  .event-featured-img {
    height: 520px !important;
    border-radius: 20px !important;
  }

  .more-events-section {
    padding: 80px 0 !important;
  }
  
  .more-events-section .more-section-title {
    font-size: 34px !important;
    margin-bottom: 40px !important;
  }
  
  .more-events-grid {
    gap: 30px !important;
  }
  
  .related-event-card {
    height: 420px !important;
  }
}

@media (max-width: 767px) {
  .event-header-block {
    padding: 50px 15px 20px 15px !important;
  }
  
  .event-header-grid {
    gap: 30px !important;
    margin-bottom: 40px !important;
  }
  
  .event-main-title {
    font-size: 32px !important;
    margin-bottom: 18px !important;
  }
  
  .event-subtitle-body p {
    font-size: 14px !important;
  }
  
  .event-info-box {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  
  .event-featured-image-wrap,
  .event-featured-img {
    height: 380px !important;
    border-radius: 16px !important;
  }

  .more-events-section {
    padding: 60px 0 !important;
  }
  
  .more-events-section .more-section-title {
    font-size: 28px !important;
    margin-bottom: 30px !important;
  }
  
  .more-events-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .related-event-card {
    height: 380px !important;
    border-radius: 20px !important;
  }
}






/* Case Study Header Buttons */
.case-study-subtitle-body {
  max-width: 600px !important;
  margin-bottom: 24px !important;
}

.case-study-buttons-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.case-study-btn-primary {
  display: inline-block;
  background-color: #0072ce;
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: 2px solid #0072ce;
  text-align: center;
}

.case-study-btn-primary:hover {
  background-color: #005a9e;
  border-color: #005a9e;
  transform: translateY(-2px);
}

.case-study-btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: #0072ce !important;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: 2px solid #0072ce;
  text-align: center;
}

.case-study-btn-secondary:hover {
  background-color: #0072ce;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Case Study Metrics Section */
.case-study-metrics-section {
  padding: 40px 0;
  background-color: #ffffff;
}

.metrics-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px !important;
}

@media (max-width: 991px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

.metric-card {
  background-color: #EEEDEB !important;
  border: 1px solid #EEEDEB !important;
  border-radius: 12px !important;
  padding: 24px !important;
  text-align: center;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 140px !important;
  box-sizing: border-box !important;
}

.metric-card:hover {
  transform: translateY(-3px);
  background-color: #061037 !important;
  border-color: #061037 !important;
  box-shadow: 0 6px 18px rgba(6, 16, 55, 0.15) !important;
}

.metric-card-value {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 44px !important; /* Size 44px */
  font-weight: 700 !important; /* Weight 700 */
  color: #061037 !important;
  margin-bottom: 8px !important; /* Value to label gap 8px */
  line-height: 1.1;
  letter-spacing: -0.5px;
  transition: color 0.3s ease !important;
}

.metric-card:hover .metric-card-value {
  color: #ffffff !important;
}

.metric-card-label {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Size 14px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  color: #231F20 !important;
  line-height: 1.4;
  margin: 0;
  transition: color 0.3s ease !important;
}

.metric-card:hover .metric-card-label {
  color: #ffffff !important;
}

/* Highlighted Card Style - reset to normal card style */
.metric-card--highlighted {
  background-color: #EEEDEB !important;
  border: 1px solid #EEEDEB !important;
  box-shadow: none !important;
}

.metric-card--highlighted .metric-card-label {
  color: #231F20 !important;
}

/* Case Study Research Overview Section */
.case-study-research-overview {
  padding: 80px 0 0 0 !important; /* Padding top 80px, bottom 0 */
  box-sizing: border-box !important;
  background-color: #ffffff !important;
}

.research-overview-container {
  max-width: 1470px !important;
  margin: 0 auto 96px auto !important; /* text to card section gap 96px */
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.research-overview-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 36px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.research-overview-desc {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #231F20 !important; /* text #231F20 */
  line-height: 1.55 !important;
  margin: 0 !important;
}

.research-overview-desc p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Card Section background and padding */
.research-overview-cards-section {
  background-color: #EEEDEB !important; /* card section bg #EEEDEB */
  padding: 80px 0 !important; /* card section padding top bottom 80px */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2-column Grid/Flex Layout for Research Overview */
.research-overview-grid-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.research-overview-column {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Vertical line separator with 43px gap */
.research-overview-column + .research-overview-column {
  border-left: 1px solid #061037 !important; /* border #061037 */
  padding-left: 43px !important; /* border left right gap 43px */
  margin-left: 43px !important;
}

/* Transparent Research Card styles (mockup has no border, no shadow, transparent bg) */
.research-card {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

.research-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Title #231F20, 600, 36px */
.research-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  color: #231F20 !important;
  margin: 0 0 52px 0 !important; /* Title to text gap 52px */
  line-height: 1.25 !important;
}

/* Text #231F20, 20px */
.research-card-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #231F20 !important;
  line-height: 1.6 !important;
}

.research-card-text p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

@media (max-width: 991px) {
  .research-overview-title {
    font-size: 38px !important;
    margin-bottom: 28px !important;
  }
  .research-overview-desc {
    font-size: 26px !important;
    margin-bottom: 28px !important;
  }
}

@media (max-width: 767px) {
  .research-overview-grid-layout {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .research-overview-column + .research-overview-column {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-top: 1px solid rgba(6, 16, 55, 0.15) !important;
    padding-top: 32px !important;
  }
  .research-overview-title {
    font-size: 32px !important;
    margin-bottom: 24px !important;
  }
  .research-overview-desc {
    font-size: 20px !important;
    margin-bottom: 24px !important;
  }
  .research-card-title {
    font-size: 28px !important;
    margin-bottom: 24px !important;
  }
  .research-card-text {
    font-size: 18px !important;
  }
}

/* Case Study Phase Timeline Section */
.case-study-timeline-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.timeline-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.timeline-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  text-align: center !important; /* Centered title */
}

/* --- STICKY TIMELINE LAYOUT --- */
.sticky-timeline-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 80px !important;
  align-items: flex-start !important;
  position: relative !important;
  margin-top: 60px !important;
}

.sticky-timeline-left {
  flex: 1 !important;
  position: sticky !important;
  top: 100px !important; /* Sticky near the top below header */
  height: 600px !important; /* Set height to match the image height to remove extra centering padding */
  z-index: 10 !important;
  box-sizing: border-box !important;
}

.sticky-image-container {
  width: 100% !important;
  height: 100% !important; /* Fill the sticky container */
  border-radius: 20px !important;
  overflow: hidden !important;
  background-color: #EEEDEB !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.06) !important;
  border: 1px solid rgba(12, 21, 35, 0.05) !important;
  position: relative !important;
}

.sticky-timeline-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease-in-out !important;
}

.sticky-timeline-right {
  flex: 1 !important;
  box-sizing: border-box !important;
}

.timeline-cards-scroll-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.timeline-scroll-card-item {
  min-height: 80vh !important; /* Comfortable scroll height */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Center text vertically */
  padding: 60px 0 !important;
  box-sizing: border-box !important;
}

/* Allow last item to have padding bottom to let it scroll up nicely */
.timeline-scroll-card-item:last-child {
  padding-bottom: 120px !important;
}

/* Left Align Timeline Cards */
.timeline-card {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  transform: none !important;
}

.timeline-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.timeline-badge-wrap {
  margin-bottom: 16px !important;
}

.timeline-badge {
  display: inline-block !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
}

.timeline-badge--complete {
  background-color: #E2F0D9 !important;
  color: #385723 !important;
}

.timeline-badge--in-progress {
  font-size: 12px !important;
  padding: 4px 12px !important;
  line-height: 1.2 !important;
  background-color: #0279BF !important;
  color: #ffffff !important;
}

.timeline-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 32px !important; /* 32px Title */
  font-weight: 600 !important;
  color: #061037 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.25 !important;
}

.timeline-card-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* 16px text */
  font-weight: 400 !important;
  color: #231F20 !important;
  line-height: 1.65 !important;
}

.timeline-card-text p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

@media (max-width: 991px) {
  .timeline-section-title {
    font-size: 38px !important;
  }
}

@media (max-width: 767px) {
  .timeline-line {
    display: none;
  }
  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 30px !important;
  }
  .timeline-node-wrapper {
    display: none;
  }
  .timeline-section-title {
    font-size: 32px !important;
    margin-bottom: 20px !important;
  }
  .timeline-card {
    padding: 24px !important;
  }
  .timeline-card-title {
    font-size: 18px !important;
  }
}

/* Case Study Highlight Box Section */
.case-study-highlight-box-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.highlight-box-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.highlight-box-inner {
  background-color: #0072CE !important; /* Bg #0072CE */
  border-radius: 16px !important; /* Radius 16px */
  padding: 60px 80px !important; /* Padding 60px 80px */
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 114, 206, 0.12) !important;
}

.highlight-box-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 36px !important; /* Text size 36px */
  font-weight: 400 !important;
  font-style: italic !important; /* Italic text */
  color: #ffffff !important; /* White text for contrast on blue */
  line-height: 1.4 !important;
  margin: 0 !important;
}

.highlight-box-text p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-style: inherit !important;
}

@media (max-width: 991px) {
  .highlight-box-inner {
    padding: 45px 60px !important;
  }
  .highlight-box-text {
    font-size: 28px !important;
  }
}

@media (max-width: 767px) {
  .highlight-box-inner {
    padding: 30px 24px !important;
    border-radius: 12px !important;
  }
  .highlight-box-text {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
}

/* Case Study Screening Adherence Section */
.case-study-adherence-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.adherence-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.adherence-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.adherence-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100%;
}

.adherence-plus {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #a0aec0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.adherence-card {
  flex: 1 !important;
  background-color: #ffffff !important;
  border: 3px solid #E5E8EB !important; /* border 3px #E5E8EB */
  border-radius: 12px !important; /* card border radius 12px */
  padding: 32px !important; /* card padding 32px */
  box-sizing: border-box !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adherence-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
}

.adherence-card-icon-wrap {
  width: 48px !important; /* icon 48px 48px */
  height: 48px !important;
  border-radius: 50% !important;
  background-color: #E0E8F5 !important; /* card icon bg #E0E8F5 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important; /* icon to title gap 12px */
  overflow: hidden !important;
}

.adherence-card-icon-wrap img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.adherence-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important; /* card title 20px */
  font-weight: 700 !important;
  color: #061037 !important;
  margin: 0 0 12px 0 !important; /* title to text gap 12px */
  line-height: 1.3 !important;
}

.adherence-card-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* card text 14px */
  font-weight: 400;
  color: #53627c !important;
  line-height: 1.5 !important;
}

.adherence-card-text p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

@media (max-width: 991px) {
  .adherence-section-title {
    font-size: 38px !important;
  }
}

@media (max-width: 767px) {
  .adherence-grid {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .adherence-plus {
    transform: rotate(90deg) !important;
    margin: 8px 0 !important;
  }
  .adherence-section-title {
    font-size: 32px !important;
    margin-bottom: 20px !important;
  }
  .adherence-card {
    width: 100% !important;
    padding: 24px !important;
  }
}

/* Case Study Eligibility Section */
.case-study-eligibility-section {
  box-sizing: border-box !important;
}

.eligibility-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.eligibility-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* title 48px */
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 16px 0 !important; /* title to text gap 16px */
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.eligibility-desc {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* text 16px */
  font-weight: 400 !important;
  color: #53627c !important;
  margin: 0 0 16px 0 !important; /* text to border gap 16px */
  line-height: 1.5 !important;
}

.eligibility-desc p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.eligibility-list {
  border-top: 1px solid #E4D5CB !important; /* border #E4D5CB */
  width: 100% !important;
}

.eligibility-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 20px 0 !important; /* checkbox top and bottom padding 20px */
  border-bottom: 1px solid #E4D5CB !important; /* border #E4D5CB */
  box-sizing: border-box !important;
}

.eligibility-checkbox-box {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid #0072CE !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  background-color: transparent !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease;
}

.eligibility-item:hover .eligibility-checkbox-box {
  border-color: #005a9e !important;
}

.eligibility-image-icon-box {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.eligibility-custom-icon {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.eligibility-item-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important; /* checkbox text 20px */
  font-weight: 400 !important;
  color: #061037 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.eligibility-item-text p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

@media (max-width: 991px) {
  .eligibility-title {
    font-size: 38px !important;
  }
  .eligibility-item-text {
    font-size: 18px !important;
  }
}

@media (max-width: 767px) {
  .eligibility-title {
    font-size: 32px !important;
  }
  .eligibility-item {
    padding: 16px 0 !important;
    align-items: flex-start !important;
  }
  .eligibility-checkbox-box,
  .eligibility-image-icon-box {
    margin-top: 3px !important;
  }
  .eligibility-item-text {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* Case Study Participation Section */
.case-study-participation-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.participation-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

.participation-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* title 48px */
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 32px 0 !important; /* title to card gap 32px */
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.participation-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columns desktop */
  gap: 16px !important; /* card to card gap 16px */
  width: 100% !important;
  margin-bottom: 0px !important;
}

.participation-card {
  background-color: #F5F6F7 !important; /* card bg #F5F6F7 */
  border: none !important;
  border-radius: 12px !important; /* card radius 12px */
  padding: 32px 28px !important; /* card padding 32px 28px */
  height: 286px !important; /* card height 286px */
  box-sizing: border-box !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.participation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
}

.participation-card-last {
  background-color: #ffffff !important;
  border: 1px solid #BDC2C7 !important; /* border color #BDC2C7 */
  border-radius: 12px !important;
  padding: 32px 28px !important;
  height: 286px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.participation-card-last:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
}

.step-badge {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background-color: #0072CE !important; /* icon bg #0072CE */
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin-bottom: 96px !important; /* icon to title gap 96px */
  box-sizing: border-box !important;
}

.participation-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 28px !important; /* Title Size 28px */
  font-weight: 400 !important; /* Weight 400 */
  color: #061037 !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.3 !important;
}

.participation-card-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important; /* Text size 14px */
  font-weight: 400 !important; /* Weight 400 */
  color: #53627c !important;
  line-height: 1.45 !important;
}

.participation-card-text p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.participation-card-last-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 28px !important; /* Size 28px */
  font-weight: 400 !important; /* Weight 400 */
  color: #061037 !important;
  margin: 0 0 60px 0 !important; /* title to button gap 60px */
  line-height: 1.3 !important;
}

.participation-card-last-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 17px !important; /* button to button gap 17px */
  width: 100% !important;
  align-items: flex-start !important;
}

.btn-participation-primary {
  background-color: #0072CE !important; /* button bg #0072CE */
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  border: 2px solid #0072CE !important; /* border color #0072CE */
  text-decoration: none !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-participation-primary:hover {
  background-color: #005CB0 !important;
  border-color: #005CB0 !important;
}

.btn-participation-secondary {
  background-color: transparent !important;
  color: #0072CE !important; /* text color #0072CE */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  border: 2px solid #0072CE !important; /* border color #0072CE */
  text-decoration: none !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.btn-participation-secondary:hover {
  background-color: rgba(0, 114, 206, 0.05) !important;
}

.participation-quote {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 18px !important; /* text 18px */
  font-style: italic !important;
  color: #53627c !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.participation-quote p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-style: inherit !important;
}

@media (max-width: 991px) {
  .participation-title {
    font-size: 38px !important;
  }
  .participation-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-bottom: 24px !important;
  }
  .participation-card,
  .participation-card-last {
    height: auto !important;
    min-height: 286px !important;
  }
}

@media (max-width: 767px) {
  .participation-title {
    font-size: 32px !important;
    margin-bottom: 24px !important;
  }
  .participation-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  .participation-card,
  .participation-card-last {
    padding: 24px 20px !important;
    height: auto !important;
    min-height: 286px !important;
  }
  .step-badge {
    margin-bottom: 60px !important;
  }
  .participation-card-last-title {
    margin-bottom: 40px !important;
  }
  .participation-quote {
    font-size: 16px !important;
  }
}
}

/* Case Study FAQ Section */
.case-study-faq-section,
.faq-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.case-study-faq-section {
  padding-top: 60px; /* Default fallback, no !important to allow dynamic overrides */
  padding-bottom: 60px; /* Default fallback, no !important to allow dynamic overrides */
  background-color: #ffffff;
}

.faq-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.faq-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important; /* title 48px */
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 36px 0 !important; /* title to FAQ gap 36px */
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  border-bottom: none !important; /* remove title bottom border */
}

.faq-list {
  border-top: none !important; /* remove top border */
  border-left: none !important; /* remove left border */
  border-right: none !important; /* remove right border */
  width: 100% !important;
  box-sizing: border-box !important;
}

.faq-list .field__items,
.faq-list .field__item {
  margin: 0 !important;
  padding: 0 !important;
}

.faq-item {
  border-bottom: 1px solid #E0E3E5 !important; /* border #E0E3E5 */
  border-top: none !important; /* no top border */
  border-left: none !important; /* remove left border */
  border-right: none !important; /* remove right border */
  margin: 0 !important; /* remove all gaps/margins */
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

.faq-list .field__item:first-child .faq-item,
.faq-item:first-of-type {
  border-top: 1px solid #E0E3E5 !important; /* add top border to the first item only */
}

.faq-summary {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 18px !important; /* accordion title 18px */
  font-weight: 600 !important; /* Weight 600 */
  color: #061037 !important;
  padding: 21px 40px 21px 0 !important; /* reset left padding to 0 to align text with section title */
  cursor: pointer !important;
  position: relative !important;
  list-style: none !important;
  user-select: none !important;
  outline: none !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

.faq-summary::-webkit-details-marker {
  display: none !important;
}

.faq-summary::before,
.faq-summary::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  background-color: #061037 !important;
  background-image: none !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* Horizontal line of the plus */
.faq-summary::before {
  width: 16px !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
}

/* Vertical line of the plus */
.faq-summary::after {
  width: 2px !important;
  height: 16px !important;
  right: 7px !important;
  transform: translateY(-50%) !important;
}

.faq-item[open] .faq-summary::after {
  transform: translateY(-50%) scaleY(0) !important;
  opacity: 0 !important;
}

.faq-answer {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #53627c !important;
  padding: 0 0 20px 0 !important; /* reset left padding to 0 to align text with summary */
  line-height: 1.55 !important;
  animation: faq-slide-down 0.25s ease-out;
  box-sizing: border-box !important;
}

.faq-answer p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

@keyframes faq-slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .faq-title {
    font-size: 38px !important;
  }
}

@media (max-width: 767px) {
  .faq-title {
    font-size: 32px !important;
  }
  .faq-summary {
    font-size: 16px !important;
    padding: 18px 30px 18px 0 !important; /* reset left padding to 0 on mobile */
  }
  .faq-summary::after {
    right: 7px !important;
  }
  .faq-answer {
    padding: 0 0 16px 0 !important; /* reset left padding to 0 on mobile */
  }
}

/* --- LOGO CAROUSEL SECTION --- */
.logo-carousel-section {
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.logo-carousel-header {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 32px !important;
}

.logo-carousel-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important;
  color: #855C42 !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
}

.logo-carousel-title {
  font-family: 'DM Serif Display', serif !important;
  font-size: 28px !important;
  color: #332E29 !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.logo-carousel-wrapper-outer {
  position: relative !important;
  width: 100% !important;
  padding: 0 50px !important;
  box-sizing: border-box !important;
}

.logo-carousel-swiper {
  overflow: hidden !important;
  position: relative !important;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
}

.logo-carousel-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.logo-carousel-slide-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  box-sizing: border-box !important;
}

.logo-carousel-slide-inner img {
  max-height: 70px !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease !important;
}

.logo-carousel-slide-inner:hover img {
  opacity: 1 !important;
}

.logo-carousel-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  color: #855C42 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.3s ease !important;
}

.logo-carousel-nav-btn:hover {
  background-color: #855C42 !important;
  color: #ffffff !important;
}

.logo-carousel-nav-btn.swiper-button-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.logo-carousel-prev-btn {
  left: 0 !important;
}

.logo-carousel-next-btn {
  right: 0 !important;
}

@media (max-width: 767px) {
  .logo-carousel-wrapper-outer {
    padding: 0 35px !important;
  }
  .logo-carousel-title {
    font-size: 24px !important;
  }
  .logo-carousel-slide-inner {
    height: 60px !important;
  }
  .logo-carousel-slide-inner img {
    max-height: 36px !important;
  }
  .logo-carousel-nav-btn {
    width: 30px !important;
    height: 30px !important;
  }
}

/* --- LOGO GRID LAYOUT --- */
.logo-grid-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 32px 64px !important; /* 64px horizontal gap between logos */
  max-width: 740px !important; /* 740px container width */
  margin: 0 auto !important;
  padding: 10px 0 !important;
}

.logo-grid-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc((100% - 128px) / 3) !important; /* Forces exactly 3 items per row on desktop */
  transition: transform 0.3s ease !important;
}

.logo-grid-item:hover {
  transform: scale(1.05) !important;
}

.logo-grid-img {
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 767px) {
  .logo-grid-wrapper {
    gap: 24px 32px !important;
  }
  .logo-grid-item {
    width: calc((100% - 32px) / 2) !important; /* Forces exactly 2 items per row on mobile */
  }
  .logo-grid-img {
    max-height: 36px !important;
  }
}

/* Webform confirmation message styling */
.webform-confirmation {
  background-color: #d4edda !important; /* Soft green bg */
  color: #155724 !important; /* Dark green text */
  border: 1px solid #c3e6cb !important; /* Green border */
  padding: 16px 24px !important;
  border-radius: 8px !important;
  margin-top: 20px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
  display: block !important;
}

.webform-confirmation__message {
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Drupal status and validation messages styling */
.messages--error,
.alert-danger,
.messages--status {
  background-color: #f8d7da !important; /* Default soft red bg for error */
  color: #721c24 !important; /* Dark red text */
  border: 1px solid #f5c6cb !important; /* Red border */
  padding: 16px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  list-style: none !important;
}

.messages--status {
  background-color: #d4edda !important; /* Soft green bg for status */
  color: #155724 !important; /* Dark green text */
  border-color: #c3e6cb !important;
}

.messages--error ul,
.alert-danger ul {
  margin: 0 !important;
  padding-left: 15px !important;
}

/* Subscriber forms compact success text customization */
.cta-webform-wrapper .webform-confirmation,
.footer-webform-wrapper .webform-confirmation {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 12px !important;
  text-align: left !important;
  color: #4ADE80 !important; /* Bright green visible on dark background */
  font-size: 14px !important;
  font-weight: 500 !important;
  display: block !important;
  width: auto !important;
  clear: both !important;
}

.cta-webform-wrapper .webform-confirmation a,
.footer-webform-wrapper .webform-confirmation a {
  display: none !important; /* Remove/hide "Back to form" link */
}

/* --- NO EVENTS SUBSCRIBE BOX STYLING --- */
.el-no-events-box {
  width: 100% !important;
  max-width: 100% !important; /* Spans full container width */
  margin: 64px auto 0 auto !important;
  padding: 60px 40px !important;
  border-radius: 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.el-neb-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.25 !important;
}

.el-neb-desc {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin: 0 0 40px 0 !important;
}

.el-neb-form-wrapper {
  width: 100% !important;
  margin-bottom: 24px !important;
}

.el-neb-footer {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  opacity: 0.6 !important;
}

/* Layout 1 Specific styling (Light box on white background) */
.el-events-section--layout-1 .el-no-events-box {
  background-color: #f7f5f0 !important; /* Soft cream background */
  border: 1px solid rgba(133, 91, 67, 0.15) !important; /* Brand brown light border */
  color: #332e29 !important; /* Dark text */
}

.el-events-section--layout-1 .el-neb-title {
  color: #0c1c36 !important; /* Dark blue title */
}

.el-events-section--layout-1 .el-neb-desc {
  color: #554d45 !important;
}

.el-events-section--layout-1 .el-neb-footer {
  color: #776e65 !important;
}

/* Layout 1 Form Element Overrides */
.el-events-section--layout-1 .el-no-events-box form input[type="text"],
.el-events-section--layout-1 .el-no-events-box form input[type="email"] {
  background-color: #ffffff !important;
  border: 1px solid rgba(133, 91, 67, 0.3) !important;
  color: #332e29 !important;
}

.el-events-section--layout-1 .el-no-events-box form input[type="text"]:focus,
.el-events-section--layout-1 .el-no-events-box form input[type="email"]:focus {
  border-color: #061037 !important;
}

.el-events-section--layout-1 .el-no-events-box form input[type="submit"],
.el-events-section--layout-1 .el-no-events-box form button[type="submit"] {
  background-color: #061037 !important; /* Brand navy button */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(6, 16, 55, 0.2) !important;
}

.el-events-section--layout-1 .el-no-events-box form input[type="submit"]:hover,
.el-events-section--layout-1 .el-no-events-box form button[type="submit"]:hover {
  background-color: #03081b !important;
}

/* Layout 2 Specific styling (Dark box on blue gradient background) */
.el-events-section--layout-2 .el-no-events-box {
  background-color: #061037 !important; /* Dark navy color #061037 */
  color: #ffffff !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}

.el-events-section--layout-2 .el-neb-title {
  color: #ffffff !important;
}

.el-events-section--layout-2 .el-neb-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}

.el-events-section--layout-2 .el-neb-footer {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Layout 2 Form Element Overrides */
.el-events-section--layout-2 .el-no-events-box form input[type="text"],
.el-events-section--layout-2 .el-no-events-box form input[type="email"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.el-events-section--layout-2 .el-no-events-box form input[type="text"]:focus,
.el-events-section--layout-2 .el-no-events-box form input[type="email"]:focus {
  border-color: #ffffff !important;
}

.el-events-section--layout-2 .el-no-events-box form input[type="submit"],
.el-events-section--layout-2 .el-no-events-box form button[type="submit"] {
  background-color: #ffffff !important; /* White button like the image */
  color: #061037 !important; /* Dark text matching background */
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
}

.el-events-section--layout-2 .el-no-events-box form input[type="submit"]:hover,
.el-events-section--layout-2 .el-no-events-box form button[type="submit"]:hover {
  background-color: #e5e5e5 !important;
}

/* Webform overrides inside el-no-events-box for correct styling */
.el-no-events-box .cta-webform-wrapper {
  max-width: 500px !important;
}

@media (max-width: 767px) {
  .el-no-events-box {
    padding: 40px 24px !important;
    margin-top: 40px !important;
  }
  .el-neb-title {
    font-size: 26px !important;
  }
}

/* --- WORK CARDS MODAL POPUP STYLING --- */
body.work-modal-open {
  overflow: hidden !important; /* Lock background scrolling when modal is active */
}

.work-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(6, 16, 55, 0.75) !important; /* Dark navy translucent backdrop */
  backdrop-filter: blur(8px) !important;
  z-index: 100000 !important;
  display: none !important; /* Hidden by default */
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 20px !important;
}

.work-modal-overlay.active {
  display: flex !important; /* Display only when active class is present */
}

.work-modal-content {
  position: relative !important;
  width: 100% !important;
  max-width: 680px !important;
  background-color: #ffffff !important;
  border-radius: 20px !important;
  padding: 48px 40px 40px 40px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  animation: workModalFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

@keyframes workModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(15px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.work-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  font-size: 36px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  border: none !important;
  background: none !important;
  color: #8f8f8f !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  padding: 0 !important;
}

.work-modal-close:hover {
  color: #0c1c36 !important;
}

.work-modal-form-container {
  width: 100% !important;
}

/* Ensure the webform inside modal fits beautifully - styled like contact form */
.work-modal-form-container form {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important; /* Field to field gap vertically 30px */
}

/* Flexbox rows for side-by-side fields */
.work-modal-form-container .webform-flexbox {
  display: flex !important;
  gap: 20px !important; /* Field to field gap side by side 20px */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.work-modal-form-container .webform-flexbox .webform-flex {
  flex: 1 !important;
  margin: 0 !important;
}

/* Form item styling */
.work-modal-form-container .form-item,
.work-modal-form-container .js-form-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* Label to field gap 12px */
  margin-bottom: 0 !important;
}

/* Label styling - Dark color for light modal background */
.work-modal-form-container .form-item label,
.work-modal-form-container .js-form-item label {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Field label Size 16px */
  font-weight: 500 !important;
  color: #0c1c36 !important; /* Dark color */
  text-transform: none !important;
  display: block !important;
}

/* Input and Dropdown Fields overrides (using dark borders/text for light background) */
.work-modal-form-container input[type="text"],
.work-modal-form-container input[type="email"],
.work-modal-form-container input[type="tel"],
.work-modal-form-container input[type="url"],
.work-modal-form-container input[type="number"],
.work-modal-form-container input[type="password"],
.work-modal-form-container input[type="search"],
.work-modal-form-container input[type="date"],
.work-modal-form-container select {
  height: 60px !important; /* Field height 60px */
  background-color: transparent !important;
  border: 1px solid rgba(12, 28, 54, 0.2) !important;
  border-radius: 30px !important;
  padding: 0 24px !important;
  color: #0c1c36 !important;
  font-size: 15px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Custom styling for select dropdowns to match input design */
.work-modal-form-container select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1c36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 24px center !important;
  background-size: 16px !important;
  cursor: pointer !important;
  padding-right: 48px !important;
}

/* Textarea specifically rounded but not pill */
.work-modal-form-container textarea {
  height: 180px !important; /* Slightly more compact than 220px to fit modals better */
  background-color: transparent !important;
  border: 1px solid rgba(12, 28, 54, 0.2) !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
  color: #0c1c36 !important;
  font-size: 15px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

/* Hover/Focus input borders */
.work-modal-form-container input[type="text"]:focus,
.work-modal-form-container input[type="email"]:focus,
.work-modal-form-container input[type="tel"]:focus,
.work-modal-form-container input[type="url"]:focus,
.work-modal-form-container input[type="number"]:focus,
.work-modal-form-container input[type="password"]:focus,
.work-modal-form-container input[type="search"]:focus,
.work-modal-form-container input[type="date"]:focus,
.work-modal-form-container select:focus,
.work-modal-form-container textarea:focus {
  border-color: #0072CE !important;
  box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.15) !important;
}

.work-modal-form-container input::placeholder,
.work-modal-form-container textarea::placeholder {
  color: rgba(12, 28, 54, 0.5) !important;
}

/* Webform submit container & button overrides */
.work-modal-form-container .form-actions {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  width: 100% !important;
}

.work-modal-form-container input[type="submit"],
.work-modal-form-container button[type="submit"],
.work-modal-form-container button.webform-button--submit,
.work-modal-form-container .form-actions input,
.work-modal-form-container .form-actions button {
  background-color: #0072CE !important; /* Button background color #0072CE */
  color: #ffffff !important; /* Button text color #ffffff */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important; /* Button Weight 500 */
  font-size: 16px !important; /* Button Size 16px */
  padding: 18px 98px !important; /* Button padding 18px 98px */
  border-radius: 30px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.2) !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 !important;
  text-transform: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.work-modal-form-container input[type="submit"]:hover,
.work-modal-form-container button[type="submit"]:hover,
.work-modal-form-container button.webform-button--submit:hover,
.work-modal-form-container .form-actions input:hover,
.work-modal-form-container .form-actions button:hover {
  background-color: #005A9E !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 114, 206, 0.35) !important;
}

.work-modal-form-container input[type="submit"]:active,
.work-modal-form-container button[type="submit"]:active,
.work-modal-form-container button.webform-button--submit:active,
.work-modal-form-container .form-actions input:active,
.work-modal-form-container .form-actions button:active {
  transform: translateY(0) !important;
}

@media (max-width: 767px) {
  .work-modal-content {
    padding: 40px 24px 28px 24px !important;
    border-radius: 16px !important;
    max-height: 95vh !important;
  }
  .work-modal-close {
    top: 12px !important;
    right: 16px !important;
    font-size: 32px !important;
  }
  .work-modal-form-container textarea {
    height: 140px !important;
  }
  .work-modal-form-container input[type="submit"],
  .work-modal-form-container button[type="submit"],
  .work-modal-form-container button.webform-button--submit,
  .work-modal-form-container .form-actions input,
  .work-modal-form-container .form-actions button {
    padding: 18px 60px !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- CASE STUDY BANNER STYLE --- */
.case-study-banner-wrapper {
  position: relative !important;
  width: 100vw !important;
  height: 800px !important; /* Banner height 800px */
  margin-left: calc(-50vw + 50%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: flex-end !important; /* Align content to bottom */
  box-sizing: border-box !important;
  padding-top: 150px !important; /* Push down to clear absolute header */
  padding-bottom: 64px !important; /* Padding bottom 64px */
}

.case-study-banner-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(12, 28, 54, 0.65) !important;
  z-index: 1 !important;
}

.case-study-banner-content {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.case-study-banner-text-box {
  max-width: 933px !important; /* Content box max width 933px */
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.case-study-banner-text-box .case-study-main-title {
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important; /* Font IBM Plex Sans */
  font-size: 64px !important; /* Size 64px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  line-height: 1.15 !important;
  margin: 0 0 24px 0 !important; /* Title to text gap 24px */
  letter-spacing: -1px !important;
  max-width: 933px !important;
}

.case-study-banner-text-box .case-study-subtitle-body {
  margin: 0 0 24px 0 !important; /* Text to btn gap 24px */
  max-width: 580px !important;
}

.case-study-banner-content .case-study-subtitle-body p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'IBM Plex Sans', sans-serif !important; /* Font IBM Plex Sans */
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 (Regular) */
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Primary Button inside banner (white bg, dark text) */
.case-study-banner-content .case-study-btn-primary {
  background-color: #ffffff !important;
  color: #231F20 !important;
  font-family: 'IBM Plex Sans', sans-serif !important; /* Font IBM Plex Sans */
  font-weight: 500 !important; /* Weight 500 */
  font-size: 16px !important; /* Size 16px */
  padding: 12px 24px !important; /* Button padding 12px 24px */
  border-radius: 30px !important;
  border: 1px solid #ffffff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.case-study-banner-content .case-study-btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
}

/* Secondary Button inside banner (transparent bg, white border, white text) */
.case-study-banner-content .case-study-btn-secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  font-family: 'IBM Plex Sans', sans-serif !important; /* Font IBM Plex Sans */
  font-weight: 500 !important; /* Weight 500 */
  font-size: 16px !important; /* Size 16px */
  padding: 12px 24px !important; /* Button padding 12px 24px */
  border-radius: 30px !important;
  border: 1px solid #ffffff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.case-study-banner-content .case-study-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Wrapper for buttons */
.case-study-banner-content .case-study-buttons-wrap {
  display: flex !important;
  gap: 20px !important;
  margin-top: 0 !important;
}

/* Make header transparent for Case Study single pages */
body.page-node-type-case-study header.inner-page-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 1000 !important;
}

body.page-node-type-case-study header.inner-page-header .primary-nav-wrap ul li a {
  color: #ffffff !important;
}

body.page-node-type-case-study header.inner-page-header .primary-nav-wrap ul li a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.page-node-type-case-study header.inner-page-header .visit-link {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #ffffff !important;
}

body.page-node-type-case-study header.inner-page-header .visit-link:hover {
  background-color: #f2f2f2 !important;
  color: #333333 !important;
}

body.page-node-type-case-study header.inner-page-header .logo-wrap a img {
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 1024px) {
  .case-study-banner-wrapper {
    height: 600px !important;
    padding-top: 120px !important;
    padding-bottom: 40px !important;
  }
  .case-study-banner-content .case-study-main-title {
    font-size: 48px !important;
  }
}

@media (max-width: 767px) {
  .case-study-banner-wrapper {
    height: auto !important;
    padding: 140px 20px 48px 20px !important;
  }
  .case-study-banner-content .case-study-main-title {
    font-size: 36px !important;
  }
  .case-study-banner-content .case-study-buttons-wrap {
    flex-direction: column !important;
    width: 100% !important;
    gap: 15px !important;
  }
  .case-study-banner-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .case-study-banner-content .case-study-btn-primary,
  .case-study-banner-content .case-study-btn-secondary {
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- CASE STUDY RESEARCH OVERVIEW BACKGROUND IMAGE CARDS STYLE --- */
.research-overview-bg-cards-wrapper {
  margin-top: 96px !important; /* Distance from top text to background cards container is 96px */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #EEEDEB !important; /* Fallback light grey bg */
  padding: 80px 0 !important; /* Generous top/bottom padding */
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.case-study-research-overview.has-bg-image .research-overview-desc {
  margin-bottom: 0 !important; /* Reset margin bottom since the grid has margin-top on the wrapper */
}

.has-bg-image .research-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 60px 48px !important; /* 48px horizontal gap, 60px vertical gap for responsive wrapping */
  width: 100% !important;
}

.has-bg-image .research-card {
  background-color: transparent !important; /* Transparent background */
  border: none !important; /* No border */
  border-radius: 0 !important; /* No border-radius */
  box-shadow: none !important; /* No box-shadow */
  padding: 0 !important; /* Reset card padding */
  transform: none !important; /* Disable hover translation */
  transition: none !important;
}

.has-bg-image .research-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.has-bg-image .research-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 24px !important; /* Size 24px */
  font-weight: 600 !important; /* Weight 600 */
  color: #061037 !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(6, 16, 55, 0.15) !important; /* Thin gray horizontal divider line */
  line-height: 1.3 !important;
}

.has-bg-image .research-card-text {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* Size 16px */
  font-weight: 400 !important; /* Weight 400 */
  color: #231F20 !important; /* Dark text for high readability */
  line-height: 1.65 !important;
}

@media (max-width: 767px) {
  .research-overview-bg-cards-wrapper {
    margin-top: 48px !important; /* Reduced margin top for mobile */
    padding: 60px 20px !important;
  }
  .has-bg-image .research-overview-grid {
    grid-template-columns: 1fr !important; /* Single column on mobile */
    gap: 40px !important;
  }
}


/* --- CASE STUDY FACTORS SECTION STYLE --- */
.case-study-factors-section {
  box-sizing: border-box !important;
}

.factors-container {
  max-width: 1470px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.factors-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  color: #061037 !important;
  margin: 0 0 32px 0 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}

.factors-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

.factor-card {
  position: relative !important;
  height: 520px !important; /* Premium tall card height */
  border-radius: 20px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box !important;
  box-shadow: 0 12px 36px rgba(12, 21, 35, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.factor-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(12, 21, 35, 0.12) !important;
}

.factor-card-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(12, 28, 54, 0.3) 0%, rgba(12, 28, 54, 0.85) 100%) !important; /* Elegant overlay gradient */
  z-index: 1 !important;
}

.factor-card-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 40px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* Icon at top, content at bottom */
  box-sizing: border-box !important;
  color: #ffffff !important;
}

/* White circle behind the icon so it stays visible on any photo (review item 7). */
.factor-card-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(6, 16, 55, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.factor-card-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  filter: brightness(0) !important; /* Renders the PNG line icons dark on the white circle */
  opacity: 0.85 !important;
}

.factor-card-bottom-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.factor-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 32px !important; /* Premium card title */
  font-weight: 500 !important;
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.25 !important;
}

.factor-card-list {
  width: 100% !important;
}

/* List styling inside the card */
.factor-card-list ol {
  margin: 0 0 0 20px !important;
  padding: 0 !important;
  list-style-type: decimal !important;
}

.factor-card-list ul {
  margin: 0 0 0 20px !important;
  padding: 0 !important;
  list-style-type: disc !important;
}

.factor-card-list li,
.factor-card-list p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.6 !important;
  margin: 0 0 8px 0 !important;
}

.factor-card-list li:last-child,
.factor-card-list p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 991px) {
  .factors-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .factor-card {
    height: 480px !important;
  }
}

@media (max-width: 767px) {
  .factor-card {
    height: 400px !important;
  }
  .factor-card-content {
    padding: 24px !important;
  }
  .factor-card-title {
    font-size: 26px !important;
  }
}

/* Custom font styles for Case Study section titles */
.research-overview-title,
.timeline-section-title,
.eligibility-title,
.participation-title,
.faq-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 48px !important;
}

@media (max-width: 991px) {
  .research-overview-title,
  .timeline-section-title,
  .eligibility-title,
  .participation-title,
  .faq-title {
    font-size: 38px !important;
  }
}

@media (max-width: 767px) {
  .research-overview-title,
  .timeline-section-title,
  .eligibility-title,
  .participation-title,
  .faq-title {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   SCROLL REVEAL TEXT ANIMATION
   ========================================================================== */
.reveal-word {
  transition: color 0.3s ease;
}

/* Light background paragraph styling: fade from light gray to solid black */
.about-section--light-bg .reveal-word {
  color: rgba(0, 0, 0, 0.15) !important;
}
.about-section--light-bg .reveal-word.active {
  color: #061037 !important;
}

/* Dark background paragraph styling: fade from faded white to solid white */
.about-section--dark-bg .reveal-word {
  color: rgba(255, 255, 255, 0.25) !important;
}
.about-section--dark-bg .reveal-word.active {
  color: #ffffff !important;
}

/* ==========================================================================
   LOCATIONS GRID SECTION (NEW PARAGRAPH TYPE)
   ========================================================================== */

.locations-grid-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.locations-grid-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: #231F20 !important;
  margin-bottom: 40px !important;
  text-align: left !important;
}

.locations-rows-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.locations-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* centers row items when they do not span full width */
  align-items: stretch !important;
  width: 100% !important;
}

.locations-row-1 {
  padding-bottom: 33px !important; /* bottom border gap 33px */
}

.locations-row-2 {
  padding-top: 48px !important; /* second cards top bottom gap 48px */
  padding-bottom: 48px !important;
}

.locations-row-divider {
  width: 100% !important;
  height: 1px !important;
  background-color: #C3C3C3 !important; /* border 1px C3C3C3 */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.location-card-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* center items horizontally within the card column */
  padding: 0 30px !important; /* border left right gap 30px */
  box-sizing: border-box !important;
  border-right: 1px solid #C3C3C3 !important; /* border 1px C3C3C3 */
}

/* 3 columns on desktop, dynamic width */
.locations-row-1 .location-card-item {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
}

/* 2 columns on desktop (second row) */
.locations-row-2 .location-card-item {
  flex: 0 0 33.333% !important; /* keep same card width so it aligns perfectly with column 1 and column 2 of row 1! */
  max-width: 33.333% !important;
}

/* Remove border-right on the last item in any row */
.locations-row .location-card-item:last-child {
  border-right: none !important;
}

/* Also remove padding-left on first item and padding-right on last item of row to align with container edges */
.locations-row .location-card-item:first-child {
  padding-left: 0 !important;
}

.locations-row .location-card-item:last-child {
  padding-right: 0 !important;
}

/* Location Card Inner Layout */
.location-card-image-wrap {
  width: 209px !important; /* image width 209px */
  border-radius: 12px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

.location-card-image-wrap img,
.location-card-image-wrap picture img,
.location-card-image-wrap .media img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important; /* Force border radius on image */
}

.location-card-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: auto !important;
  margin-left: 24px !important; /* image to content gap 24px */
  align-self: center !important;
  box-sizing: border-box !important;
}

.location-card-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important; /* title 20px 500 */
  font-weight: 500 !important;
  color: #231F20 !important; /* color 231F20 */
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}

.location-card-subtitle {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 20px !important; /* Cancer Center 20px 400 */
  font-weight: 400 !important;
  color: #231F20 !important; /* color 231F20 */
  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
}

.location-card-phone {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 16px !important; /* (877) 524-4673 16px */
  font-weight: 400 !important;
  color: #231F20 !important; /* color 231F20 */
  text-decoration: none !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
}

.location-card-phone:hover {
  color: #0072CE !important;
  text-decoration: underline !important;
}

.location-card-info p,
.location-card-title p,
.location-card-subtitle p,
.location-card-phone p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
  .locations-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .locations-row-1, .locations-row-2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .locations-row-1 .location-card-item,
  .locations-row-2 .location-card-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #C3C3C3 !important;
    padding: 24px 0 !important;
  }
  
  .locations-row-divider {
    display: none !important;
  }
  
  .locations-row:last-child .location-card-item:last-child {
    border-bottom: none !important;
  }
  
  .location-card-image-wrap {
    width: 150px !important;
    height: auto !important;
  }

  .location-card-info {
    height: auto !important;
  }
}

/* Custom Interactive Map Tooltip Labels */
.custom-map-tooltip {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0c1523 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  text-shadow: 0 0 5px #ffffff, 0 0 5px #ffffff, 0 0 5px #ffffff, 0 0 5px #ffffff !important; /* white glow overlay for max legibility */
}

/* Hide default leaflet tooltip arrow */
.custom-map-tooltip::before {
  display: none !important;
}

@media (max-width: 767px) {
  .metrics-container,
  .research-overview-container,
  .timeline-container,
  .highlight-box-container,
  .adherence-container,
  .eligibility-container,
  .participation-container,
  .faq-container,
  .factors-container {
    padding: 0 20px !important;
  }
}



/* ==========================================================================
   Client review 2026-09-26 (Erik Tubbs). Item numbers refer to the review
   report. Overrides live here so the whole change set can be read in one place.
   ========================================================================== */

/* --- Stats dashboard (items 3, 10, 20) ---------------------------------- */

/* Item 3: between 1025px and ~1400px the fixed 280 + 443 + 467px columns
   overflowed the container. Let the card and photo shrink instead. */
@media (min-width: 1025px) {
  .dashboard-tabs-column {
    width: clamp(200px, 20vw, 280px) !important;
    margin-right: clamp(32px, 6vw, 112px) !important;
  }
  .dashboard-card-column {
    flex: 1 1 443px !important;
    width: auto !important;
    max-width: 443px !important;
    min-width: 0 !important;
  }
  .dashboard-image-column {
    flex: 1 1 467px !important;
    width: auto !important;
    max-width: 467px !important;
    min-width: 0 !important;
  }
  /* The card narrows with the screen, so the title scales down with it to
     stay on at most two lines (e.g. "Inclusion Resource Groups"). */
  .dashboard-card-panel .card-title {
    font-size: clamp(24px, 2.2vw, 32px) !important;
    line-height: 1.2 !important;
  }
  .dashboard-card-panel .card-header {
    gap: 16px !important;
  }
}

/* Tablet: a narrower label column leaves the card room for a two-line title. */
@media (min-width: 768px) and (max-width: 1024px) {
  .dashboard-body {
    grid-template-columns: 200px 1fr 1fr !important;
  }
  .dashboard-card-panel .card-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .dashboard-card-panel .card-header {
    gap: 14px !important;
  }
}

@media (max-width: 767px) {
  /* Item 10: the fixed decoration above the labels never moved. Replace it
     with a marker under the active label, which follows the selection. */
  .paragraph--type--dashboard-section .dashboard-tabs-column::before {
    display: none !important;
  }
  .paragraph--type--dashboard-section .dashboard-tabs-column {
    margin-bottom: 20px !important;
  }
  /* Centring an overflowing scroller hid the first labels off-screen, with no
     way to scroll back to them. Start-align and let the script centre the
     active label instead. */
  .paragraph--type--dashboard-section .dashboard-tabs-list {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .paragraph--type--dashboard-section .dashboard-tabs-list::-webkit-scrollbar {
    display: none !important;
  }
  .paragraph--type--dashboard-section .dashboard-tab-btn .tab-text,
  .paragraph--type--dashboard-section .dashboard-tab-btn.is-active .tab-text {
    transform: none !important;
  }
  .paragraph--type--dashboard-section .dashboard-tab-btn.is-active::before {
    display: block !important;
    opacity: 1 !important;
    top: auto !important;
    bottom: -4px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 1px !important;
    background: currentColor !important;
  }
  .paragraph--type--dashboard-section .dashboard-tab-btn.is-active::after {
    display: block !important;
    opacity: 1 !important;
    top: auto !important;
    bottom: -7px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    background-color: currentColor !important;
    box-shadow: none !important;
  }

  /* Item 20: the companion photo only appeared after scrolling past the card,
     so it did not read as part of it. Hide it on mobile; desktop keeps it. */
  .paragraph--type--dashboard-section .dashboard-image-column {
    display: none !important;
  }

  /* Item 10: shorter card, so the labels and the stat fit on one screen. */
  .paragraph--type--dashboard-section .dashboard-card-column {
    height: 320px !important;
    margin-bottom: 0 !important;
  }
  .paragraph--type--dashboard-section .dashboard-card-panel {
    height: 320px !important;
  }
  .paragraph--type--dashboard-section .card-divider {
    margin-top: 32px !important;
  }
}

/* --- Impact spotlight carousel (item 20) --------------------------------- */
@media (max-width: 767px) {
  /* The portrait sat below the stat card and only showed after scrolling.
     Mobile shows the card alone; desktop keeps card and photo side by side. */
  .paragraph--type--lje-impact-spotlight-carousel .isc-card-image {
    display: none !important;
  }
  .paragraph--type--lje-impact-spotlight-carousel .isc-card-stat {
    height: auto !important;
    min-height: 360px !important;
  }
  .paragraph--type--lje-impact-spotlight-carousel .isc-quote-text {
    margin-bottom: 48px !important;
  }
  .paragraph--type--lje-impact-spotlight-carousel .isc-org-row {
    margin-top: auto !important;
  }
}

/* --- Team module (items 8, 13) ------------------------------------------- */
@media (max-width: 767px) {
  /* Item 13: two cards per row on phones, wherever the team module is used. */
  .team-grid .field__items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
  .team-grid .team-member-card {
    height: 230px !important;
  }
  .team-grid .team-card-image-wrap {
    border-radius: 14px !important;
  }
  .team-grid .team-card-content {
    padding: 12px !important;
  }
  .team-grid .team-card-name {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  .team-grid .team-card-role {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  /* The carousel variant shows two cards per view to match. */
  .team-slide {
    width: calc((100vw - 52px) / 2) !important;
    height: 230px !important;
  }
}

/* --- Video play buttons (item 11) --------------------------------------- */
/* Frosted black instead of translucent white, which washed out on light
   thumbnails. Covers every video control on the site. */
.video-play-btn,
.pillar-video-play-btn,
.play-icon-circle {
  background: rgba(8, 12, 24, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
}

.video-card:hover .video-play-btn,
.pillar-video-card:hover .pillar-video-play-btn,
.hero-video-card:hover .play-icon-circle,
.video-play-btn:hover,
.video-play-btn:focus-visible,
.pillar-video-play-btn:focus-visible {
  background: rgba(8, 12, 24, 0.62) !important;
}

/* --- Community Benefit stats, mobile (item 12) --------------------------- */
/* Stays a stacked list (no carousel); the gaps were the problem. */
@media (max-width: 767px) {
  .impact-grid .field__items {
    gap: 12px !important;
  }
  .paragraph--type--impact-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 20px !important;
  }
  .impact-card-stat {
    margin-bottom: 24px !important;
  }
  /* Large gap between the last card and "The Program" below. */
  .paragraph--type--impact-section.spacing-bottom-164px,
  .paragraph--type--impact-section.spacing-bottom-130px {
    padding-bottom: 48px !important;
  }
}

/* --- Program image cards on touch screens (item 14) ---------------------- */
/* The description and button were only revealed on hover, which phones and
   tablets do not have. Show them all the time there. */
@media (hover: none), (max-width: 767px) {
  .paragraph--type--program-card .program-card-content,
  .paragraph--type--program-card:hover .program-card-content {
    transform: none !important;
  }
  .paragraph--type--program-card .program-card-collapsed-content {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .paragraph--type--program-card .program-card-hover-overlay {
    opacity: 1 !important;
  }
}

/* --- "Measured in more than data" stat cards, mobile (item 15) ----------- */
/* Two cards side by side with smaller figures, instead of six full-width cards. */
@media (max-width: 767px) {
  .img-grid-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .img-grid-item-wrap .imc-card-item {
    max-width: none !important;
    height: 280px !important;
  }
  .imc-card-content {
    padding: 14px !important;
  }
  .imc-badge-text {
    font-size: 11px !important;
  }
  .imc-metric-value {
    font-size: 32px !important;
  }
  .imc-card-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .imc-card-description,
  .imc-card-description p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* --- Logo rows, mobile (items 16, 19) ------------------------------------ */
@media (max-width: 767px) {
  /* "As seen in" carousel: stays two-up (three-up breaks wide marks), but the
     slides get more room and the marks can grow into it. */
  .logo-carousel-wrapper-outer {
    padding: 0 16px !important;
  }
  .logo-carousel-slide-inner {
    height: 72px !important;
  }
  .logo-carousel-slide-inner img {
    max-height: 56px !important;
  }
  /* Funder grid: larger marks, tighter gaps. */
  .logo-grid-wrapper {
    gap: 24px !important;
  }
  .logo-grid-img {
    max-height: 48px !important;
  }
}

/* --- Location list, tablet and mobile (item 21) --------------------------- */
/* Rows were centred, so titles that wrapped to different line counts made the
   list stagger. Left-align every row on the same image column. */
@media (max-width: 1024px) {
  .locations-row-1 .location-card-item,
  .locations-row-2 .location-card-item {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .locations-row .location-card-item:first-child,
  .locations-row .location-card-item:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .location-card-image-wrap {
    width: 120px !important;
    align-self: flex-start !important;
  }
  .location-card-image-wrap img,
  .location-card-image-wrap picture img,
  .location-card-image-wrap .media img {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  .location-card-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 16px !important;
    align-self: flex-start !important;
    text-align: left !important;
  }
  .location-card-title {
    font-size: 17px !important;
  }
}

/* --- FAQ heading, mobile (item 23) ---------------------------------------- */
@media (max-width: 767px) {
  .faq-left-col,
  .faq-left-title,
  .faq-left-subtitle {
    text-align: left !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --- Mobile heading scale (item 17) -------------------------------------- */
/* Page and section headings ranged from 24px to 36px on phones, so section
   titles read close to body copy. One scale for every component. The doubled
   classes (0,4,1) outrank per-component rules such as
   .hero-banner-section.new-layout .hero-title (0,3,0). Desktop is unchanged. */
@media (max-width: 767px) {
  .layout-container.layout-container .main-content-wrapper.main-content-wrapper h1 {
    font-size: 38px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }
  .layout-container.layout-container .main-content-wrapper.main-content-wrapper h2:not(.contact-card-title) {
    font-size: 30px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
  }
}

/* --- Stats card header: icon top-aligned, first title line centred on it -- */
/* The header aligns to the top so a two-line title does not pull the icon
   down. The title is offset so its first line is centred on the 48px icon,
   which keeps one-line titles looking centred. Works at every title size. */
.dashboard-card-panel .card-title {
  line-height: 1.2 !important;
  margin-top: calc((48px - 1.2em) / 2) !important;
}

/* --- Page background ----------------------------------------------------- */
/* Nothing set a page background, so browsers in dark mode showed their dark
   canvas through transparent sections (e.g. around the newsletter band).
   The site has a light design only. */
html {
  color-scheme: light;
}
html,
body {
  background-color: #ffffff !important;
}

/* --- Form messages ------------------------------------------------------- */
/* The theme restyled Drupal's messages but kept core's -8px box-shadow bar
   (detached from the rounded box) and cut the left padding the icon needs,
   so the icon sat on the text. Accent bar inside the box, room for the icon. */
.messages--error,
.messages--status,
.messages--warning {
  box-shadow: none !important;
  border-left-width: 4px !important;
  padding: 14px 18px 14px 46px !important;
  background-repeat: no-repeat !important;
  background-position: 16px 15px !important; /* On the first line, also for lists */
  background-size: 18px 18px !important;
  text-align: left !important;
  line-height: 1.45 !important;
}
.messages--error {
  border-left-color: #d63a2f !important;
}
.messages--status {
  border-left-color: #2e8540 !important;
}

/* Subscribe forms lay the email field and button out in one row; the
   message wrapper was a third item in that row and squeezed the field.
   Give messages their own full-width line above the field. */
.cta-webform-wrapper form,
.footer-webform-wrapper form {
  flex-wrap: wrap !important;
}
.cta-webform-wrapper form > [data-drupal-messages],
.cta-webform-wrapper form > .messages,
.footer-webform-wrapper form > [data-drupal-messages],
.footer-webform-wrapper form > .messages {
  flex: 0 0 100% !important;
  width: 100% !important;
  order: -1 !important;
}
.cta-webform-wrapper [data-drupal-messages] .messages,
.footer-webform-wrapper [data-drupal-messages] .messages {
  margin: 0 0 4px !important;
}

/* --- Map popup: several locations in one popup --------------------------- */
/* When pins overlap at the current zoom, their details share a popup. */
.map-popup-card .map-popup-location + .map-popup-location {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e3e6eb !important;
}
.map-popup-card .map-popup-description p:last-child {
  margin-bottom: 0 !important;
}

/* --- Map popup placement -------------------------------------------------- */
/* The script positions the popup itself (above or below the dot, clamped to
   the map), so Leaflet's arrow and the margin reserved for it are removed. */
.custom-leaflet-popup.leaflet-popup {
  margin-bottom: 0 !important;
}
.custom-leaflet-popup .leaflet-popup-tip-container {
  display: none !important;
}

/* --- Map credit ----------------------------------------------------------- */
/* One short tile credit instead of the three-line supplier list. */
.interactive-map-section .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 6px !important;
  margin: 0 0 8px 8px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
  color: #5b6472 !important;
}
.interactive-map-section .leaflet-control-attribution a {
  color: inherit !important;
  text-decoration: none !important;
}

/* --- Error pages (404, 403) ---------------------------------------------- */
/* A simple centred panel in the site's own type, colours and buttons. */
.error-page {
  background-color: #ffffff; /* White, so the light-blue footer stays a separate band */
  display: flex;
  align-items: center;
  min-height: clamp(420px, 62vh, 640px);
  padding: 96px 0;
  text-align: center;
}

.error-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-page__code {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(96px, 16vw, 176px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -4px;
  color: #0072ce;
  margin: 0 0 24px;
}

.error-page__title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #061037;
  margin: 0 0 16px;
}

.error-page__text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4a5568;
  max-width: 520px;
  margin: 0 0 36px;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.error-page__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid #061037;
  border-radius: 100px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #061037;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.error-page__link:hover,
.error-page__link:focus-visible {
  background-color: #061037;
  color: #ffffff;
}

@media (max-width: 767px) {
  .error-page {
    min-height: 0;
    padding: 64px 0 72px;
  }
  .error-page__code {
    letter-spacing: -2px;
    margin-bottom: 16px;
  }
  .error-page__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
}

/* --- Plain text pages (privacy, terms, cookies) --------------------------- */
/* One standard template: a title and body copy written with H2, H3,
   paragraphs and lists. No custom design per page. */
.plain-page {
  background-color: #ffffff;
  font-family: 'IBM Plex Sans', sans-serif;
}

.plain-page__container {
  max-width: 860px !important;
}

.plain-page__header {
  padding: 72px 0 0;
}

.plain-page__title {
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #061037;
  margin: 0;
}

.plain-page__content {
  padding: 36px 0 112px;
}

.plain-page__body {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
}

.plain-page__body h2 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: #061037;
  margin: 48px 0 16px;
}

.plain-page__body h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: #061037;
  margin: 32px 0 12px;
}

.plain-page__body > .field > :first-child,
.plain-page__body > :first-child {
  margin-top: 0;
}

.plain-page__body p {
  margin: 0 0 16px;
}

.plain-page__body ul,
.plain-page__body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.plain-page__body ul {
  list-style: disc;
}

.plain-page__body ol {
  list-style: decimal;
}

.plain-page__body li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.plain-page__body li::marker {
  color: #0072ce;
}

.plain-page__body a {
  color: #0072ce;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.plain-page__body a:hover {
  color: #00569d;
}

@media (max-width: 767px) {
  .plain-page__header {
    padding: 40px 0 0;
  }
  .plain-page__content {
    padding: 24px 0 72px;
  }
  /* Body headings stay below the site-wide mobile section-heading size. */
  .layout-container.layout-container .main-content-wrapper.main-content-wrapper .plain-page__body h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
}

/* --- Optimised images ------------------------------------------------------ */
/* hace_picture() wraps each <img> in a <picture> so browsers can choose AVIF
   or WebP. display: contents removes the wrapper from layout, so the <img>
   is sized and positioned exactly as it was before it was wrapped. */
.hace-picture {
  display: contents;
}