/*
 Theme Name: Divi Child
 Description: Talem IP Divi Child Theme
 Author: Cohesion Studio
 Author URI: https://www.madewithcohesion.com
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* ==========================================================================
   GLOBAL SMOOTH SCROLL ENGINE
   ========================================================================== */

/*Smoother scrolling for all browsers (Lenis JS handles this now)*/
/* Recommended Lenis CSS Boilerplate */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}


/* ==========================================================================
   GLOBAL VIEWPORT ANCHOR SCROLL OFFSET (THE MASTER FIX)
   ========================================================================== */

html {
  /* Forces the browser to treat the top 140px of the screen as dead space for ALL scroll actions.
     Adjust 140px up or down to perfectly match the height of your sticky header. */
  scroll-padding-top: 140px !important;
}

/* Maintain proper accessibility compliance bounds */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* ACCESSIBILITY COMPLIANCE (WCAG 2.2):
   Respect users who have 'Reduce Motion' enabled in their OS settings 
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* --- PREVENT STRAGGLED CONTENT FROM INDUCING HORIZONTAL SCROLLING --- */
#main-content,
.et_builder_inner_content {
  overflow-x: hidden !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY MIGRATION - ACCIDENTAL PARAGRAPH LIST ITEM ISOLATION
   ========================================================================= */

/* Targets all bulleted (ul) and numbered (ol) list items inside any Divi Text Module */
.et_pb_text_inner li {
  margin-bottom: 12px !important;
}

/* ==========================================================================
   FRONT-END ONLY: RESPONSIVE TYPOGRAPHY RULES
   ========================================================================== */

/* 1. Live Front-End Desktop Layout (Excludes the builder workspace) */
body:not(.et-fb) h1, 
body:not(.et-fb) .et_pb_module h1 {
  font-size: 4.25rem !important;  /* Equal to 68px */
  line-height: 1.1 !important;    /* Equal to 110% */
  transition: font-size 0.2s ease !important;
}

body:not(.et-fb) h2, 
body:not(.et-fb) .et_pb_module h2 {
  font-size: 2rem !important; /* Equal to 32px */
  line-height: 1.1 !important;    /* Equal to 110% */
  transition: font-size 0.2s ease !important;
}

/* 2. Live Front-End Tablet Downscale (Screens under 981px) */
@media only screen and (max-width: 980px) {
  body:not(.et-fb) h1, 
  body:not(.et-fb) .et_pb_module h1 {
    font-size: 2.75rem !important; /* Equal to 44px */
    word-break: keep-all !important; /* Prevents the browser from chopping words into raw characters */
    overflow-wrap: normal !important;
  }
  body:not(.et-fb) h2, 
  body:not(.et-fb) .et_pb_module h2 {
    font-size: 2rem !important; /* Equal to 32px */
  }
}

/* 3. NEW: Micro-Downscale for Compact Phone Viewports (Screens under 479px) */
@media only screen and (max-width: 479px) {
  body:not(.et-fb) h1, 
  body:not(.et-fb) .et_pb_module h1 {
    font-size: 2.25rem !important; /* Safely scales down to ~36px to prevent "ARCHITECTURE" from splitting */
  }
}

body h3, 
body .et_pb_module h3 {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* ==========================================================================
   MAIN NAVIGATION HEADER MENU
   ========================================================================== */

/* 1. Target the menu's native button class directly */
#page-container header .difl_advancedmenu a.df-menu-button {
  padding-left: 24px !important;
  padding-right: 50px !important; /* Locks structural width space */
  white-space: nowrap !important; /* Keeps text firmly locked to a single line */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: background-color 0.3s ease !important;
}

/* 2. Inject your custom SVG icon arrow */
#page-container header .difl_advancedmenu a.df-menu-button::after {
  content: '' !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 99 !important; /* Layers explicitly on top of button background */
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  /* Sizing */
  width: 18px !important;
  height: 18px !important;
  background-image: url('/wp-content/uploads/2026/06/arrow-top-right-large.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease !important;
}

/* 3. Hover states */
#page-container header .difl_advancedmenu a.df-menu-button:hover {
  background-color: #2E3192 !important;
  padding-right: 50px !important; 
}
#page-container header .difl_advancedmenu a.df-menu-button:hover::after {
  transform: translateY(-50%) translateX(3px) !important;
}

/* 4. CONSOLIDATED MOBILE & TABLET RESPONSIVE HEADER STYLES */
@media only screen and (max-width: 980px) {
  /* Reverse horizontal sequence to flip hamburger and button positions */
  #page-container header .df-am-col.right {
    display: flex !important;
    flex-direction: row-reverse !important; 
    justify-content: flex-start !important; /* Pulls elements over to right side */
  }

  #page-container header a.df-menu-button,
  #page-container header [class*="mobile_menu"] a.df-menu-button,
  #page-container header .difl_advancedmenu a.df-menu-button {
    font-size: 11px !important;       
    letter-spacing: 0.5px !important; 
    padding-left: 12px !important;     
    padding-right: 36px !important;    /* Locks down spacing match for scaled SVG arrow */
    min-height: 36px !important;       
    height: 36px !important;           /* Enforces thin height alignment next to hamburger */
    margin-left: 0px !important;      
    margin-right: 15px !important;     /* Pushes hamburger menu safely away to the right */
    display: inline-flex !important;
    align-items: center !important;
  }

  #page-container header a.df-menu-button::after,
  #page-container header [class*="mobile_menu"] a.df-menu-button::after,
  #page-container header .difl_advancedmenu a.df-menu-button::after {
    right: 12px !important;            
    width: 12px !important;            /* Downscaled from 18px */
    height: 12px !important;           
    display: inline-block !important;  
    visibility: visible !important;
    opacity: 1 !important;
  }

  #page-container header a.df-menu-button:hover,
  #page-container header .difl_advancedmenu a.df-menu-button:hover {
    padding-right: 38px !important;    
  }
}

/* ==========================================================================
   FIXED TRANSPARENT HEADER & DIVIFLASH SLIDE SYNC
   ========================================================================== */

/* 1. Make all header structural containers completely transparent */
.et-l-header,
.et-l-header > .et_builder_inner_content > .et_pb_section,
.et_pb_section_0_tb_header {
    background-color: transparent !important;
}

/* 2. Lock Header Section to the Viewport Top */
.et_pb_section_0_tb_header,
.et_pb_section_0_tb_header.et_pb_sticky,
.et_pb_section_0_tb_header.et_pb_sticky--top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    margin-top: 0 !important;
}

/* 3. Kill the Sticky Jump Layout Placeholder */
.et_pb_sticky_placeholder {
    display: none !important;
    height: 0 !important;
}

/* 4. Fix Mobile Dropdown Stacking Orders */
@media only screen and (max-width: 980px) {
    .et-l-header .et_pb_row {
        overflow: visible !important;
    }
    .df-mobile-menu,
    .df-mobile-menu-wrap,
    .mobile-slide-inner-wrap {
        z-index: 999999 !important;
        background-color: #FDFCF4 !important;
    }
    .df-mobile-menu-wrap ul {
        mix-blend-mode: normal !important;
    }
}

/* ==========================================================================
   STANDALONE CUSTOM TALEM BUTTONS (BLUE & WHITE)
   ========================================================================== */

/* --- BLUE BUTTON --- */
#page-container .et_pb_button.custom-talem-btn,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn {
  min-height: 45px !important; 
  padding: 10px 50px 10px 24px !important; /* Combined padding bounds */
  white-space: nowrap !important; 
  width: auto !important;         
  background-color: #001840 !important; 
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

#page-container .et_pb_button.custom-talem-btn::after,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn::after {
  content: '' !important;
  display: inline-block !important; 
  visibility: visible !important;  
  opacity: 1 !important;
  z-index: 99 !important;          
  position: absolute !important;
  right: 20px !important; 
  top: 50% !important;
  transform: translateY(-50%) !important; 
  margin-left: 0px !important; 
  width: 18px !important; 
  height: 18px !important;
  background-image: url('/wp-content/uploads/2026/06/arrow-top-right-large.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

#page-container .et_pb_button.custom-talem-btn:hover,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn:hover {
  background-color: #2E3192 !important; 
  color: #ffffff !important;
}
#page-container .et_pb_button.custom-talem-btn:hover::after,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn:hover::after {
  transform: translateY(-50%) translateX(3px) !important;
}

/* --- WHITE BUTTON --- */
#page-container .et_pb_button.custom-talem-btn-white,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn-white {
  min-height: 45px !important; 
  padding: 10px 50px 10px 24px !important;
  white-space: nowrap !important; 
  width: auto !important;         
  background-color: #ffffff !important; 
  color: #001840 !important;            
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

#page-container .et_pb_button.custom-talem-btn-white::after,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn-white::after {
  content: '' !important;
  display: inline-block !important; 
  visibility: visible !important;  
  opacity: 1 !important;
  z-index: 99 !important;          
  position: absolute !important;
  right: 20px !important; 
  top: 50% !important;
  transform: translateY(-50%) !important; 
  margin-left: 0px !important; 
  width: 18px !important; 
  height: 18px !important;
  background-image: url('/wp-content/uploads/2026/06/arrow-top-right-large-dark.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease, background-image 0.3s ease !important;
}

#page-container .et_pb_button.custom-talem-btn-white:hover,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn-white:hover {
  background-color: #2E3192 !important; 
  color: #ffffff !important;
}
#page-container .et_pb_button.custom-talem-btn-white:hover::after,
#page-container .et_pb_module a.et_pb_button.custom-talem-btn-white:hover::after {
  background-image: url('/wp-content/uploads/2026/06/arrow-top-right-large.svg') !important; 
  transform: translateY(-50%) translateX(3px) !important;                                 
}

/* ==========================================================================
   TALEM GLOBAL CUSTOM BRAND DASHED BORDERS
   ========================================================================== */

.dashed-border-top {
  border-top-width: 1px !important; 
  border-top-style: solid !important; 
  border-image: repeating-linear-gradient(to right, #777778, #777778 4px, transparent 4px, transparent 8px) 1 !important;
}

.dashed-border-right {
  border-right-width: 1px !important;
  border-right-style: solid !important;
  border-image: repeating-linear-gradient(to bottom, #777778, #777778 4px, transparent 4px, transparent 8px) 1 1 1 1 !important;
}

.dashed-border-bottom {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-image: repeating-linear-gradient(to right, #777778, #777778 4px, transparent 4px, transparent 8px) 1 !important;
}

.dashed-border-left {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-image: repeating-linear-gradient(to bottom, #777778, #777778 4px, transparent 4px, transparent 8px) 1 1 1 1 !important;
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - INDEPENDENT DASHED GRID SYSTEMS
   ========================================================================== */

/* 1. DESKTOP VIEWPORTS (Screens 981px and above) */
@media only screen and (min-width: 981px) {
  /* 3-Column Layout: Draws 4 lines total (Outer Left, Column 1, Column 2, Outer Right) */
  .dashed-grid-3col {
    position: relative !important;
    background-image: 
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px, 1px 8px, 1px 8px, 1px 8px !important;
    background-repeat: repeat-y !important;
    background-position: 0% 0, 33.333% 0, 66.666% 0, 100% 0 !important;
  }

  /* 4-Column Layout: Draws 5 lines total (Outer Left, Col 1, Col 2, Col 3, Outer Right) */
  .dashed-grid-4col {
    position: relative !important;
    background-image: 
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px, 1px 8px, 1px 8px, 1px 8px, 1px 8px !important;
    background-repeat: repeat-y !important;
    background-position: 0% 0, 25% 0, 50% 0, 75% 0, 100% 0 !important;
  }
}

/* 2. TABLET VIEWPORTS (FIXED: Screens 768px to 980px - Stripped Outside Framing Edges) */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  
  /* 4-Column Tablet Layout: Draws only the center line down the gutter channel */
  .dashed-grid-4col {
    position: relative !important;
    background-image: linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px !important;
    background-repeat: repeat-y !important;
    background-position: 50% 0 !important; /* Single center vertical split */
  }

  /* 3-Column Tablet Layout: Draws center line and halts track before Row 2 */
  .dashed-grid-3col {
    position: relative !important;
    background-image: linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;
    height: 100% !important;
  }
  
  /* Mask layer to cleanly hide the center line over the lower left-aligned 3rd column */
  .dashed-grid-3col::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(50% - 1px) !important;
    width: 2px !important;
    height: 50% !important;
    background-color: #fdfcf4 !important;
    z-index: 1 !important;
  }

  /* Inject horizontal separating dashed borders between stacked column rows on tablet */
  .dashed-grid-3col > div.et_pb_column:nth-child(1),
  .dashed-grid-3col > div.et_pb_column:nth-child(2),
  .dashed-grid-4col > div.et_pb_column:nth-child(1),
  .dashed-grid-4col > div.et_pb_column:nth-child(2) {
    border-bottom: 1px dashed #777778 !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* 3. PHONE VIEWPORTS (Screens under 768px) */
@media only screen and (max-width: 767px) {
  .dashed-grid-3col,
  .dashed-grid-4col {
    background-image: none !important;
  }
  .dashed-grid-3col > div.et_pb_column:not(:last-child),
  .dashed-grid-4col > div.et_pb_column:not(:last-child) {
    border-bottom: 1px dashed #777778 !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - INDEPENDENT DASHED GRID SYSTEMS (2-COLUMN)
   ========================================================================= */

/* 1. DESKTOP VIEWPORTS (Screens 981px and above) */
@media only screen and (min-width: 981px) {
  /* 2-Column Layout: Draws 3 lines total (Outer Left, Center Split, Outer Right) */
  .dashed-grid-2col {
    position: relative !important;
    background-image: 
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px, 1px 8px, 1px 8px !important;
    background-repeat: repeat-y !important;
    /* Spreads lines perfectly across 0% (Left Edge), 50% (Center), and 100% (Right Edge) */
    background-position: 0% 0, 50% 0, 100% 0 !important;
  }
}

/* 2. TABLET VIEWPORTS (Screens 768px to 980px - Stripped Outside Framing Edges) */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  /* 2-Column Tablet Layout: Keeps a clean single vertical separator down the row center */
  .dashed-grid-2col {
    position: relative !important;
    background-image: linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px !important;
    background-repeat: repeat-y !important;
    background-position: 50% 0 !important; 
  }
}

/* 3. PHONE VIEWPORTS (Screens under 768px - Complete Stack Shift) */
@media only screen and (max-width: 767px) {
  /* Remove the vertical track completely when columns collapse into single blocks */
  .dashed-grid-2col {
    background-image: none !important;
  }
  
  /* Inject horizontal separating dashed borders between stacked column rows on phones */
  .dashed-grid-2col > div.et_pb_column:not(:last-child) {
    border-bottom: 1px dashed #777778 !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - SPECIAL PACKAGES PRICING GRID BORDERS
   ========================================================================== */

/* 1. DESKTOP & TABLET CONTINUOUS 3-COLUMN SYSTEMS (Screens 768px and above) */
@media only screen and (min-width: 768px) {
  .dashed-grid-pricing {
    position: relative !important;
    display: flex !important;
    /* FIXED: Centers the columns to distribute Divi's gap math evenly on the outer edges */
    justify-content: center !important; 
    
    background-image: 
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%),
      linear-gradient(to bottom, #777778 50%, transparent 50%) !important;
    background-size: 1px 8px, 1px 8px, 1px 8px, 1px 8px !important;
    background-repeat: repeat-y !important;
    background-position: 0% 0, 33.333% 0, 66.666% 0, 100% 0 !important;
  }
}

/* 2. PHONE SINGLE STACK RESET MAPS (Screens 767px and below) */
@media only screen and (max-width: 767px) {
  .dashed-grid-pricing {
    background-image: none !important;
  }
  
  .dashed-grid-pricing > div.et_pb_column:not(:last-child) {
    border-bottom: 1px dashed #777778 !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* ==========================================================================
   CAROUSEL RIGHT-EDGE FADE OUT MASK
   ========================================================================== */

@media only screen and (min-width: 981px) {
  .difl_contentcarousel .swiper-container {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%) !important;
    overflow: visible !important; 
  }
}

/* ==========================================================================
   SIDE-BY-SIDE RESPONSIVE BLOG POSTING ARCHIVE HOME PAGE LAYOUTS
   ========================================================================== */

@media only screen and (min-width: 600px) {
  .side-by-side-blog article.et_pb_post {
    display: grid !important;
    grid-template-columns: 40% 1fr !important; 
    gap: 40px !important;                       
    align-items: center !important;             
  }
  .side-by-side-blog .entry-featured-image-url {
    margin-bottom: 0 !important; 
  }
}

@media only screen and (max-width: 599px) {
  .side-by-side-blog .entry-title {
    margin-top: 15px !important;
  }
}

.side-by-side-blog .entry-title a {
  line-height: 1.1 !important; 
  display: inline-block !important; 
}

.side-by-side-blog .entry-title a::after {
  content: "" !important; 
  display: inline-block !important;
  vertical-align: middle !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 8px !important; 
  background-image: url('/wp-content/uploads/2026/06/icong-arrow-cobalt.svg') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  transition: transform 0.2s ease-in-out !important;
}

.side-by-side-blog article.et_pb_post:hover .entry-title a::after {
  transform: translate(3px, 0px) !important;
}

@media only screen and (min-width: 981px) {
  .side-by-side-blog .entry-title {
    width: 75% !important;
    max-width: 75% !important; 
  }
}

/* ==========================================================================
   CLASS 2: .archive-split-blog (RESPONSIVE COLUMNS CONFIGURATION)
   ========================================================================== */

/* --- 1. DESKTOP VIEW: 2 Columns, Side-by-Side (981px and up) --- */
@media only screen and (min-width: 981px) {
  body:not(.et-fb) .archive-split-blog .et_pb_posts,
  body:not(.et-fb) .et_pb_blog_2.archive-split-blog .et_pb_posts {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; 
    column-gap: 5% !important;              
    row-gap: 48px !important;                 
    width: 100% !important;
  }

  body:not(.et-fb) .archive-split-blog article.et_pb_post,
  body:not(.et-fb) .et_pb_blog_2.archive-split-blog article.et_pb_post {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;         
    width: 47.5% !important;                
    max-width: 47.5% !important;
    min-width: 47.5% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:not(.et-fb) .archive-split-blog .entry-featured-image-url,
  body:not(.et-fb) .et_pb_blog_2.archive-split-blog .entry-featured-image-url {
    width: 274px !important;       
    min-width: 274px !important;   
    max-width: 274px !important;
    margin-right: 32px !important;          
    margin-bottom: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  body:not(.et-fb) .archive-split-blog .entry-title,
  body:not(.et-fb) .et_pb_blog_2.archive-split-blog .entry-title {
    width: 100% !important;
    max-width: 100% !important;    
    flex-grow: 1 !important;
    display: block !important;
  }
}

/* --- 2. TABLET VIEW: 2 Columns, Stacked Top-to-Bottom (768px to 980px) --- */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body:not(.et-fb) .archive-split-blog .et_pb_posts {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    column-gap: 4% !important;              /* Spacing horizontal gap between the tablet grid items */
    row-gap: 40px !important;                 /* Vertical spacing between tablet rows */
    width: 100% !important;
  }

  body:not(.et-fb) .archive-split-blog article.et_pb_post {
    display: block !important;               /* Image on top, text on bottom */
    width: 48% !important;                   /* Math: (100% total - 4% gap) / 2 columns = 48% each */
    max-width: 48% !important;
    min-width: 48% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.et-fb) .archive-split-blog .entry-featured-image-url {
    width: 100% !important;                  /* Image spans full width of its 48% card track */
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;          /* Clean gap space beneath the image block */
    display: block !important;
  }
}

/* --- 3. MOBILE VIEW: 1 Column, Stacked Top-to-Bottom (767px and below) --- */
@media only screen and (max-width: 767px) {
  body:not(.et-fb) .archive-split-blog .et_pb_posts {
    display: block !important;
    width: 100% !important;
  }

  body:not(.et-fb) .archive-split-blog article.et_pb_post {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;          /* Breathing room between sequential posts */
  }

  body:not(.et-fb) .archive-split-blog .entry-featured-image-url {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;          
    display: block !important;
  }
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY AND INLINE ARROW TRACKING
   ========================================================================== */

body:not(.et-fb) .archive-split-blog h3.entry-title,
body:not(.et-fb) .et_pb_blog_2.archive-split-blog h3.entry-title {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  line-height: 1.1 !important;            
}

body:not(.et-fb) .archive-split-blog h3.entry-title a,
body:not(.et-fb) .et_pb_blog_2.archive-split-blog h3.entry-title a {
  font-size: 22px !important;
  display: inline !important;             
  white-space: normal !important;         
  word-break: keep-all !important;
  line-height: 1.1 !important;            
}

body:not(.et-fb) .archive-split-blog h3.entry-title a::after {
  content: "" !important; 
  display: inline-block !important;       
  vertical-align: middle !important;      
  width: 16px !important;
  height: 16px !important;
  margin-left: 6px !important;            
  background-image: url('/wp-content/uploads/2026/06/icong-arrow-cobalt.svg') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  position: static !important;
  transform: none !important;
  transition: transform 0.2s ease-in-out !important;
}

body:not(.et-fb) .archive-split-blog article.et_pb_post:hover h3.entry-title a::after {
  transform: translateX(3px) !important;
}

/* ==========================================================================
   TALEM IP: KINETIC PATH VECTOR ANIMATION ASSETS
   ========================================================================== */

.talem-path-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: -46px;
  overflow: hidden;
}

.path-unit {
  width: 660px;
  flex-shrink: 0;
  overflow: visible;
  display: block;
}

.path-unit:not(:first-child) {
  margin-left: -330px;
}

.arc-track {
  fill: none;
  stroke: #b3aba3;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 1;
}

.kinetic-node {
  fill: #00a3ff;
  will-change: transform, opacity;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ==========================================================================
   TALEM IP: GLOBAL RESPONSIVE DOT-TRACK DESIGN LINE STYLES
   ========================================================================== */

.talem-responsive-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 20px !important;
  box-sizing: border-box !important;
  padding-left: 20px !important; 
  padding-right: 20px !important;
}

.responsive-svg-path {
  width: 100% !important;
  height: 20px !important;
  overflow: visible !important;
  display: block !important;
}

.responsive-track {
  fill: none !important;
  stroke: #b3aba3 !important;
  stroke-width: 1px !important;
  stroke-dasharray: 4 4 !important;
  vector-effect: non-scaling-stroke !important;
}

.responsive-node {
  fill: #00a3ff !important;
  will-change: transform, opacity;
  opacity: 0;
}

@media only screen and (max-width: 980px) {
  .talem-responsive-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ==========================================================================
   DIVIFLASH THIRD-PARTY PLUGINS MODULE OVERRIDES
   ========================================================================== */

.difl_advancedtab .df_at_nav_container .df_at_nav,
.difl_advancedtab .df_at_nav_container .df_at_nav.df_at_nav_active {
    background-color: transparent !important;
}

.difl_advancedtab .df_ati_content_wrap .et_pb_text {
    display: block !important;
    position: relative !important;
}

.difl_advancedtab .df_ati_content_wrap .et_pb_text_inner {
    margin-top: inherit !important;
    margin-bottom: inherit !important;
}

/* ==========================================================================
   TALEM CORE CUSTOM NATIVE SYSTEM TABS RULES
   ========================================================================== */

/* --- RIGHT-HAND INTERACTIVE ROW CONTENT TRANSITIONS --- */
body:not(.et-fb) .talem-tab-content {
    display: none !important;
    width: 100%;
    opacity: 0;
    transform: translateY(10px); 
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

body:not(.et-fb) .talem-tab-content.content-active {
    display: block !important;
    animation: talemFadeIn 0.4s forwards ease-out;
}

@keyframes talemFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0px); }
}

/* --- BUTTON / TEXT LINK INTERACTION STATES --- */
.talem-tab-button .et_pb_text_inner a {
    text-decoration: none !important;
    display: inline !important;
    cursor: pointer !important; 
}

/* --- INTERACTIVE INLINE SPAN WORD COUPLERS --- */
.talem-tab-button .et_pb_text_inner a span {
    display: inline-block !important;
    white-space: nowrap !important; 
}

/* --- LEFT SIDE NAVIGATION LABEL TYPOGRAPHY COLOR PALETTES --- */
.talem-tab-button,
.talem-tab-button *,
.talem-tab-button h1,
.talem-tab-button h2,
.talem-tab-button h3,
.talem-tab-button h4 {
    color: #B3ABA3 !important; 
    transition: color 0.3s ease !important;
}

.talem-tab-button.active-tab,
.talem-tab-button.active-tab *,
.talem-tab-button.active-tab h1,
.talem-tab-button.active-tab h2,
.talem-tab-button.active-tab h3,
.talem-tab-button.active-tab h4 {
    color: #ffffff !important; 
}

/* --- CUSTOM TAB GLUED SVG TRAINING ARROWS --- */
.talem-tab-button .et_pb_text_inner a span::after {
    content: "" !important; 
    display: inline-block !important;
    vertical-align: middle !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 8px !important; 
    background-image: url('/wp-content/uploads/2026/06/icon-arrow-right-grey.svg') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    transform: translateY(-2px) !important; 
    transition: transform 0.2s ease-in-out !important;
}

.talem-tab-button.active-tab .et_pb_text_inner a span::after {
    background-image: url('/wp-content/uploads/2026/06/icon-arrow-right-light.svg') !important;
}

.talem-tab-button:hover .et_pb_text_inner a span::after {
    transform: translate(4px, -2px) !important; 
}

/* ==========================================================================
   TALEM MISC STYLES
   ========================================================================== */


/* --- COMPACT STRUCTURAL BADGE LABELS --- */
/* Target the module framework directly to override the Divi 5 flex model layout */
div.et_pb_module.talem-badge-label,
div.et_flex_module.talem-badge-label {
  display: block !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important; /* Keeps the label content locked securely to a single line */
}

/* Fallback override rule for the inner paragraph tags */
.talem-badge-label .et_pb_text_inner,
.talem-badge-label .et_pb_text_inner p {
  display: block !important;
  width: auto !important;
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - ACCORDION LAYOUT AND MOBILE OVERRIDES
   ========================================================================= */

/* 1. Base State: Sets up the transition property, font settings, and layout map on the plus icon */
.talem-fast-accordion .et_pb_toggle_title::before {
  content: '\4c' !important; /* Keep it locked to Divi 5's native plus icon string */
  display: block !important;
  font-family: "ETmodules" !important; /* Forces the browser to load Divi's native icon package */
  font-weight: 400 !important;
  font-size: inherit !important; /* Dynamic fallback size safety */
  color: inherit !important; /* Forces the icon to match your active title color configuration */
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
  transform: rotate(0deg) !important;
}

/* 2. Open State: FIXED - Targets ONLY ::before to animate and prevent layout breakages */
.talem-fast-accordion .et_pb_toggle_open .et_pb_toggle_title::before {
  display: block !important;
  content: '\4c' !important; /* Keep it as the same character so it can smoothly rotate */
  font-family: "ETmodules" !important;
  right: -11px;
  top: 16px;
  
  /* HIGH PRIORITY INHERITANCE MAP: Copies the color and size exactly from Divi's design rules */
  font-size: 31px !important; /* Matches your module design footprint perfectly */
  color: #2e3192 !important; /* Pulls your primary dark blue brand color choice */
  transform: rotate(45deg) !important; /* Smoothly spins the vertical cross-bar into an 'X' close mark */
}

/* 3. Safety Shield: Explicitly kills the duplicate after-element to remove artifacts */
.talem-fast-accordion .et_pb_toggle_title::after,
.talem-fast-accordion .et_pb_toggle_open .et_pb_toggle_title::after {
  display: none !important;
  content: none !important;
}

/* 4. Fallback Layout Speed Constraints */
.talem-fast-accordion .et_pb_toggle {
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* --- FIXED: PREVENTS BODY COPY ACCORDION JUMP --- */
/* Reset any accidental flex container vertical gaps within the opened item */
.talem-fast-accordion .et_pb_toggle_open {
  gap: 0 !important;
}

/* --- FIXED: PREVENTS EMPTY VISUAL COLUMNS FROM COLLAPSING --- */
/* Target tablets and mobile views (980px and below) */
@media only screen and (max-width: 980px) {
  div.et_pb_column.talem-stacked-spacer {
    display: block !important;
    width: 100% !important;
    min-height: 400px !important; 
    margin-bottom: 40px !important; 
  }
}

/* Optional: Fine-tune the scale specifically for smaller mobile devices if needed */
@media only screen and (max-width: 767px) {
  div.et_pb_column.talem-stacked-spacer {
    min-height: 300px !important; 
  }
}

/* --- NEW: MAXIMUM SPECIFICITY TYPOGRAPHY INHERITANCE --- */
@media only screen and (max-width: 980px) {
  /* Targets open, closed, and inner text components inside the fast-accordion framework directly */
  .talem-fast-accordion .et_pb_toggle_open h2.et_pb_toggle_title,
  .talem-fast-accordion .et_pb_toggle_close h2.et_pb_toggle_title,
  .talem-fast-accordion .et_pb_toggle_title,
  .talem-fast-accordion h2 {
    font-size: 1.6em !important;
  }
}


/* --- COMPACT EYEBROW BADGE GROUPS --- */
/* Forces the group container to drop block-stretching and hug its inner modules tightly */
div.et_pb_group.talem-eyebrow-badge {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - DESKTOP INTERACTIVE INLINE DIRECTORY (COLUMN FIX)
   ========================================================================= */

@media only screen and (min-width: 981px) {
  
  /* 1. Force the parent row holding your columns to anchor absolute layout maps */
  .talem-team-directory,
  .talem-team-directory .et_pb_row {
    position: relative !important;
    overflow: visible !important; /* FIXED: Prevents the container bounding box from clipping your images */
  }

  /* 2. BASE COLUMNS CONFIGURATION */
  .talem-team-row {
    transition: background-color 0.1s ease, border-color 0.1s ease !important;
  }

  /* FIXED: Targets Divi 5's explicit column link element to force the hand cursor */
  .talem-team-row:has(.et_pb_module_link),
  .talem-team-row .et_pb_module_link {
    cursor: pointer !important;
  }

  /* ==========================================================================
   TALEM CLEAN FLEX DIRECTORY OVERRIDE
   ========================================================================= */
@media only screen and (max-width: 980px) {
  /* Forces the columns to stretch perfectly to the baseline of the tallest card in their row */
  body:not(.et-fb) .talem-team-directory-mobile .et_pb_row {
    align-items: stretch !important;
  }

  /* Stops the images from responding to the stretching column height */
  body:not(.et-fb) .talem-team-directory-mobile .et_pb_image,
  body:not(.et-fb) .talem-team-directory-mobile .et_pb_image img {
    height: auto !important;
    align-self: flex-start !important;
  }

  /* Automatically aligns the names and roles cleanly to the bottom */
  body:not(.et-fb) .talem-team-directory-mobile .et_pb_column > .et_pb_group {
    margin-top: auto !important;
  }
}

  /* Explicit safety shield: If a column has no active module link element, keep it an arrow */
  .talem-team-row:not(:has(.et_pb_module_link)) {
    cursor: default !important;
  }

  /* 3. Absolute configuration for the shared photo row container */
  .talem-photo-holder {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    width: 350px !important;
    height: 350px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.1s ease, visibility 0.1s ease, top 0.15s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* 4. Hide all image modules inside the photo holder row by default */
  .talem-photo-holder [class*="team-img-"],
  .talem-photo-holder .et_pb_image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* 5. DYNAMIC VERTICAL HEIGHT SNAPPING MAPS
     When hovering a column, this tells the photo row exactly where to fly vertically
     by calculating percentages down the parent row container height */
  .talem-team-directory:has(.user-wendy:hover) .talem-photo-holder { top: 5%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-sarah:hover) .talem-photo-holder { top: 15%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-brian:hover) .talem-photo-holder { top: 25%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-trent:hover) .talem-photo-holder { top: 35%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-brittany:hover) .talem-photo-holder { top: 45%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-warren:hover) .talem-photo-holder { top: 55%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-miranda:hover) .talem-photo-holder { top: 65%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-xandra:hover) .talem-photo-holder { top: 75%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-janice:hover) .talem-photo-holder { top: 85%; opacity: 1 !important; visibility: visible !important; }
  .talem-team-directory:has(.user-michael:hover) .talem-photo-holder { top: 95%; opacity: 1 !important; visibility: visible !important; }

  /* 6. INDIVIDUAL IMAGE REVEAL LINKS */
  .talem-team-directory:has(.user-wendy:hover) .talem-photo-holder .team-img-wendy,
  .talem-team-directory:has(.user-sarah:hover) .talem-photo-holder .team-img-sarah,
  .talem-team-directory:has(.user-brian:hover) .talem-photo-holder .team-img-brian,
  .talem-team-directory:has(.user-trent:hover) .talem-photo-holder .team-img-trent,
  .talem-team-directory:has(.user-brittany:hover) .talem-photo-holder .team-img-brittany,
  .talem-team-directory:has(.user-warren:hover) .talem-photo-holder .team-img-warren,
  .talem-team-directory:has(.user-miranda:hover) .talem-photo-holder .team-img-miranda,
  .talem-team-directory:has(.user-xandra:hover) .talem-photo-holder .team-img-xandra,
  .talem-team-directory:has(.user-janice:hover) .talem-photo-holder .team-img-janice,
  .talem-team-directory:has(.user-michael:hover) .talem-photo-holder .team-img-michael {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 7. TEXT ELEMENT COLOR CONSTRAINTS */
  .talem-team-row:hover,
  .talem-team-row:hover *,
  .talem-team-row:hover .et_pb_text_inner,
  .talem-team-row:hover p,
  .talem-team-row:hover h5 {
    color: #001840 !important;
  }
} /* Closes desktop query block */

/* ==========================================================================
   TALEM NATIVE SYSTEM - DYNAMIC HOVER ICON INJECTION FOR LINKED ROWS (FIXED)
   ========================================================================= */

@media only screen and (min-width: 981px) {
  
  /* Strictly isolate the inner text string inside the text module container */
  .active-page .et_pb_text:last-child .et_pb_text_inner p,
  .active-page .et_pb_text:last-child .et_pb_text_inner h5 {
    position: relative !important;
    display: inline-block !important;
    /* Leaves perfect spatial breathing room on the left side of the title string */
    transition: padding-left 0.15s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* 1. Inject the hidden '+' character staging footprint ONLY onto the paragraph/heading element */
  .active-page .et_pb_text:last-child .et_pb_text_inner p::before,
  .active-page .et_pb_text:last-child .et_pb_text_inner h5::before {
    content: "+ " !important;
    position: absolute !important;
    left: -12px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    color: #001840 !important; /* Matches your interactive dark blue rollover shade */
    font-weight: inherit !important;
    font-size: 1.6em !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
  }

  /* 2. ROLLOVER STATE: Shift the text outward and fade a single '+' symbol cleanly into place */
  .active-page:hover .et_pb_text:last-child .et_pb_text_inner p,
  .active-page:hover .et_pb_text:last-child .et_pb_text_inner h5 {
    padding-left: 14px !important; /* Matches the exact width footprint of the incoming sign */
  }

  .active-page:hover .et_pb_text:last-child .et_pb_text_inner p::before,
  .active-page:hover .et_pb_text:last-child .et_pb_text_inner h5::before {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   GLOBAL MOUSE CURSOR CORRECTION OVERRIDES (OUTSIDE DESIGN BREAKPOINTS)
   ========================================================================== */

/* 1. Targets rows with a valid module link configuration to lock the pointer hand icon */
.talem-team-row:has(.et_pb_module_link) {
  cursor: pointer !important;
}

/* 2. Forces inner text/role components to pass pointer events through to the clickable row */
.talem-team-row:has(.et_pb_module_link) .et_pb_text,
.talem-team-row:has(.et_pb_module_link) .et_pb_text_inner,
.talem-team-row:has(.et_pb_module_link) p,
.talem-team-row:has(.et_pb_module_link) h5 {
  pointer-events: none !important;
}

/* 3. Forces completely unlinked elements to show a standard arrow selection pointer */
.talem-team-row:not(:has(.et_pb_module_link)) {
  cursor: default !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE SHIELD (BUILDER ACCESSIBILITY FIX)
   ========================================================================== */
@media only screen and (max-width: 980px) {
  /* Hides the desktop listing container on smaller viewports on the LIVE site only */
  body:not(.et-fb) .talem-team-directory {
    display: none !important;
  }
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - HIDE MOBILE DIRECTORY ON DESKTOP
   ========================================================================= */

/* Targets desktop screens (981px and up) */
@media only screen and (min-width: 981px) {
  .talem-team-directory-mobile {
    display: none !important;
  }
}



/* ==========================================================================
   FORCE ACTIVE HAND CURSOR VIA GLOBAL CLASS 
   ========================================================================== */

/* Forces the column layout box itself to register the link hand pointer */
.active-page,
div.et_pb_column.active-page {
  cursor: pointer !important;
}

/* Forces all text modules, paragraph tags, and flex child containers inside to register it */
.active-page *,
.active-page .et_pb_text,
.active-page .et_pb_text_inner,
.active-page p,
.active-page span {
  cursor: pointer !important;
}

/* ==========================================================================
   TALEM NATIVE SYSTEM - INDEPENDENT ROW FADE ENGINE (COMPACT UNIFIED)
   ========================================================================= */

/* --- 1. DESKTOP VIEWPORTS (Screens 981px and up) --- */
@media only screen and (min-width: 981px) {
  body:not(.et-fb) .et_pb_section.talem-fade-testimonial-section {
    position: relative !important;
    display: block !important;
    height: 220px !important; 
    min-height: 220px !important;
    padding: 30px 0 !important;
  }

  .talem-fade-testimonial-section .talem-fade-slide {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 64px) !important; 
    max-width: 1050px !important;
    display: grid !important;
    grid-template-columns: 73% 27% !important;
    gap: 50px !important;
    align-items: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out !important;
  }

  .talem-fade-slide > .et_pb_column:first-child * {
    font-family: 'SUSE', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 32px !important;
    line-height: 130% !important;
    color: #2E3192 !important;
    text-align: left !important;
  }

  .talem-fade-slide > .et_pb_column:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    border-left: 1px solid transparent !important;
    border-image: repeating-linear-gradient(to bottom, #777778, #777778 4px, transparent 4px, transparent 8px) 1 !important;
    padding-left: 18px !important;
  }

  .talem-fade-slide > .et_pb_column:last-child .author-name {
    font-family: 'SUSE', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2E3192 !important;
    margin-bottom: 4px !important;
    display: block !important;
    text-align: left !important;
  }

  .talem-fade-slide > .et_pb_column:last-child .author-title {
    font-family: 'SUSE', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
    color: #777778 !important;
    display: block !important;
    text-align: left !important;
  }
}

/* --- 2. TABLET & MOBILE VIEWPORTS (Screens 980px and below) --- */
@media only screen and (max-width: 980px) {
  body:not(.et-fb) .et_pb_section.talem-fade-testimonial-section {
    position: relative !important;
    display: block !important;
    height: auto !important; 
    min-height: auto !important;
    padding: 30px 0 !important;
  }

  /* Keep all slides alive and flexing so Safari never freezes, 
     but throw non-active rows completely out of the viewport bounds */
  .talem-fade-testimonial-section .talem-fade-slide {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: calc(100% - 64px) !important; 
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    text-align: left !important; /* Left align row content rules natively */
    margin: 0 auto !important;
    
    /* HARDWARE ACCELERATION MAP: Shifts elements far right off-screen */
    transform: translate3d(200%, 0, 0) !important; 
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out !important;
  }

  /* WebKit Structural Width Enforcement */
  .talem-fade-testimonial-section .talem-fade-slide > .et_pb_column {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Aligns columns to the left side edge */
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
  }

  .talem-fade-testimonial-section .talem-fade-slide .et_pb_text,
  .talem-fade-testimonial-section .talem-fade-slide .et_pb_text_inner {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Force the main testimonial quote layout to left-align */
  .talem-fade-slide > .et_pb_column:first-child * {
    font-family: 'SUSE', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 26px !important;
    line-height: 130% !important;
    color: #2E3192 !important;
    text-align: left !important;
  }

  /* Custom vertical dashed separator line specifically built for the mobile author block */
  .talem-fade-slide > .et_pb_column:last-child {
    border-left: 1px solid transparent !important; 
    border-image: repeating-linear-gradient(to bottom, #777778, #777778 4px, transparent 4px, transparent 8px) 1 !important;
    padding-left: 20px !important; /* Air spacing gap between line and author info */
    margin-top: 15px !important; /* Air spacing gap between top quote copy and author info */
  }

  .talem-fade-slide > .et_pb_column:last-child * {
    text-align: left !important;
    align-self: flex-start !important;
  }
}

/* --- 3. SHARED GLOBAL ACTIVE ENGINE STATE --- */
body:not(.et-fb) .talem-fade-testimonial-section .talem-fade-slide.talem-active-slide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Desktop Only: Retain smooth cross-fade animation alignment */
@media only screen and (min-width: 981px) {
  body:not(.et-fb) .talem-fade-testimonial-section .talem-fade-slide.talem-active-slide {
    display: grid !important;
    transform: translateX(-50%) !important;
  }
}

/* Tablet & Mobile Only: Snap the hardware accelerated 3D frame into view bounds */
@media only screen and (max-width: 980px) {
  body:not(.et-fb) .talem-fade-testimonial-section .talem-fade-slide.talem-active-slide {
    display: flex !important;
    transform: translate3d(-50%, 0, 0) !important; 
  }
}

/* ==========================================================================
   DIVI VISUAL BUILDER CANVAS RESTORATION STYLES
   ========================================================================= */
/* Targets the Divi 5 Visual Builder interface exclusively (.et-fb) */
body.et-fb .talem-fade-testimonial-section .talem-fade-slide {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 30px !important;
  border: 1px dashed #b3aba3 !important; /* Adds a clean boundary line inside the editor so you can see each row */
  padding: 20px !important;
}

/* ==========================================================================
   BLOG POST BODY TYPOGRAPHY ADJUSTMENTS
   ========================================================================= */

/* Targets headings inside the content body of individual blog posts */
body.single-post .et_builder_inner_content h1,
body.single-post .et_builder_inner_content h2,
body.single-post .et_builder_inner_content h3,
body.single-post .et_pb_module h1,
body.single-post .et_pb_module h2,
body.single-post .et_pb_module h3 {
  margin-bottom: 24px !important; /* Spacing below the headings */
  margin-top: 40px !important;    /* Optional: Gives breathing room above them too */
}

/* ==========================================================================
   WEBGL SHADER ENGINE STRETCH LAYOUT (TOTAL SPECIFICITY LOCK)
   ========================================================================== */

/* 1. Force the parent row flex-track to maintain structural relative positioning layout */
.talem-column-shader-host,
#page-container .talem-column-shader-host {
  position: relative !important;
  overflow: hidden !important;       /* Clips your shader inside the rounded corner boundaries */
  display: flex !important;          /* Keeps elements correctly aligned inside the column */
  flex-direction: column !important;
}

/* 2. SPECIFICITY UPGRADE: Force the Divi code container frame to match the full column size */
html body #page-container .talem-column-shader-host .et_pb_code,
html body #page-container .talem-column-shader-host .talem-shader-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;             /* Layers the canvas right above the column's native background graphic loop */
  pointer-events: none !important;   /* Let cursor clicks pass right through it safely */
  display: block !important;
}

/* 3. SHADER ENGINE FORCE-STRETCH: Breaks the element block out of the 0px initialization trap */
html body #page-container .talem-column-shader-host media-shader,
.talem-column-shader-host media-shader,
.talem-shader-container media-shader {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* 4. Target the internal dynamic canvas loop component built by the unpkg bundle script */
.talem-column-shader-host media-shader canvas,
.talem-shader-container canvas {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  
  /* --- HARD LIGHT OVERLAY BLEND MODES --- */
  mix-blend-mode: screen !important; /* Seamlessly blends the glowing ray bursts into your background texture */
  opacity: 1.0 !important;           
}

/* Force Divi's internal code module inner container to fill the 600px height */
.talem-column-shader-host .et_pb_code_inner {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ==========================================================================
   SHADER CONTENT ELEVATION LAYER
   ========================================================================== */

/* Forces any module with this class to float perfectly on top of the shader canvas */
.talem-column-shader-host .talem-shader-content,
#page-container .talem-column-shader-host .et_pb_module.talem-shader-content {
  position: relative !important;
  
  /* --- CRITICAL LAYER LOCK --- */
  z-index: 99 !important;             /* Must be higher than the shader's z-index to break forward */
  
  /* Optional: Ensures contrast against the blue shader rays */
  color: #ffffff !important;          
}

/* If you have a heading tag inside that text module, force its color contrast too */
.talem-shader-content h1, 
.talem-shader-content h2, 
.talem-shader-content h3, 
.talem-shader-content p {
  color: #ffffff !important;
}

/* ==========================================================================
   CLASS: .talem-fast-accordion (HEADING TYPOGRAPHY FIX)
   ========================================================================== */

/* Target the h2 heading tags inside your custom accordion module wrapper */
.talem-fast-accordion h2,
#page-container .talem-fast-accordion .et_pb_module h2,
#page-container .et_pb_module.talem-fast-accordion h2 {
  font-size: 1.6rem !important;
  
  /* Optional tweak space: adjust line-height if the text lines feel too tight or loose */
  /* line-height: 1.3 !important; */
}

/* ==========================================================================
   GLOBAL TEXT SELECTION HIGHLIGHT COLOR
   ========================================================================== */

/* Targets modern browsers (Chrome, Safari, Edge, Opera) */
::selection {
  background-color: #2E3192 !important; /* Your brand cobalt blue backdrop */
  color: #ffffff !important;            /* Keeps the text crisp and white when highlighted */
}

/* Targets Mozilla Firefox explicitly */
::-moz-selection {
  background-color: #2E3192 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   COHESION TRUE FLUID WAVE (SNAPPY NTH-OF-TYPE ENGINE)
   ========================================================================== */

a.cohesion-link {
  display: flex !important;                
  flex-direction: row !important;  
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.5) !important;                        
  letter-spacing: 0px !important;
  overflow: hidden !important;             
  position: relative !important;
}

a.cohesion-link br {
  display: none !important;
}

a.cohesion-link span {
  display: inline-block !important;
  position: relative !important;
  line-height: 1 !important;
  /* Snappier transition speed profile to make it move fast */
  transition: transform 0.2s cubic-bezier(0.625, 0.05, 0, 1), color 0.15s ease !important;
}

a.cohesion-link span::after {
  content: attr(data-char) !important;
  position: absolute !important;
  top: 100% !important;                    
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  color: rgba(255, 255, 255, 0.8) !important;               
}

a.cohesion-link:hover span {
  transform: translateY(-100%) !important;
}

/* ==========================================================================
   EASE-OUT WAVE TIMING MATRIX (DECELERATING WAVE)
   Gaps widen toward the end so the wave shoots fast and drags to a finish
   ========================================================================== */
a.cohesion-link span:nth-of-type(1)  { transition-delay: 0.000s !important; } /* Instant start explosion */
a.cohesion-link span:nth-of-type(2)  { transition-delay: 0.002s !important; } 
a.cohesion-link span:nth-of-type(3)  { transition-delay: 0.005s !important; } 
a.cohesion-link span:nth-of-type(4)  { transition-delay: 0.009s !important; } 
a.cohesion-link span:nth-of-type(5)  { transition-delay: 0.014s !important; } 
a.cohesion-link span:nth-of-type(6)  { transition-delay: 0.020s !important; } 
a.cohesion-link span:nth-of-type(7)  { transition-delay: 0.027s !important; } 
a.cohesion-link span:nth-of-type(8)  { transition-delay: 0.035s !important; } 
a.cohesion-link span:nth-of-type(9)  { transition-delay: 0.044s !important; } 
a.cohesion-link span:nth-of-type(10) { transition-delay: 0.054s !important; } 
a.cohesion-link span:nth-of-type(11) { transition-delay: 0.065s !important; } 
a.cohesion-link span:nth-of-type(12) { transition-delay: 0.077s !important; } 
a.cohesion-link span:nth-of-type(13) { transition-delay: 0.090s !important; } 
a.cohesion-link span:nth-of-type(14) { transition-delay: 0.104s !important; } 
a.cohesion-link span:nth-of-type(15) { transition-delay: 0.119s !important; } 
a.cohesion-link span:nth-of-type(16) { transition-delay: 0.135s !important; } 
a.cohesion-link span:nth-of-type(17) { transition-delay: 0.152s !important; } 
a.cohesion-link span:nth-of-type(18) { transition-delay: 0.170s !important; } 
a.cohesion-link span:nth-of-type(19) { transition-delay: 0.189s !important; } 
a.cohesion-link span:nth-of-type(20) { transition-delay: 0.209s !important; } 
a.cohesion-link span:nth-of-type(21) { transition-delay: 0.230s !important; } 
a.cohesion-link span:nth-of-type(22) { transition-delay: 0.252s !important; } 
a.cohesion-link span:nth-of-type(23) { transition-delay: 0.275s !important; } /* Smooth braking finish */

/* ==========================================================================
   ACCESSIBILITY BADGE FOOTER OVERRIDE
   ========================================================================== */

/* 1. Force the image wrapper to lock its sizing bounds */
.et_pb_image_1_tb_footer,
#page-container .et_pb_image_1_tb_footer {
  width: 100px !important;
  max-width: 100px !important;
}

/* 2. Force the raw image file itself to fill the module container accurately */
.et_pb_image_1_tb_footer img {
  width: 100px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   GLOBAL HIDDEN ANCHOR INTERCEPTOR (MULTI-LINK STACK FIX)
   This targets ANY element carrying the .talem-anchor-target class name
   ========================================================================== */

.talem-anchor-target {
  position: absolute !important;
  /* Adjust -140px up or down to tune the spacing across ALL anchor links uniformly */
  top: -140px !important; 
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  display: block !important;
}

/* ==========================================================================
   GLOBAL COLLAPSE FOR ALL ANCHOR CODE MODULES
   ========================================================================== */

/* Automatically strips the spacing from ANY code module that holds our anchor targets */
.et_pb_code:has(.talem-anchor-target) {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  position: absolute !important; 
  top: 0 !important;
  left: 0 !important;
}

.et_pb_code_inner:has(.talem-anchor-target) {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  display: block !important;
}

/* ==========================================================================
   TALEM DIRECTORY WHOLE-COLUMN STRETCHED LINK MATRIX
   ========================================================================== */

/* 1. Establish the locked boundaries for the clickable area */
.talem-team-row {
  position: relative !important; 
}

/* 2. Stretch the profile link into an invisible blanket covering the whole row */
.talem-team-row .et_pb_text_inner > a::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99 !important; /* Sits perfectly over names, text, and empty space */
  cursor: pointer !important;
}