/* Shared site theme helpers: header/middle/footer banding, hero blur, card helpers, and logo emphasis */
:root{
  --site-bg-light: #f7f7f8;
  --site-bg-mid: #ffffff;
  --site-bg-dark: #0b1220;
  --header-bg: #0b1220; /* dark header */
  --footer-bg: #0b0f14; /* dark footer */
  --accent: #10b981;
  --primary-gray: #6B7280; /* used for main headings and dropdown text */
}

/* Banding helpers - apply these to page sections */
.band-header{background-color:var(--header-bg); color: #f8fafc}
.band-middle{background-color:var(--site-bg-mid); color: #111827}
.band-footer{background-color:var(--footer-bg); color:#e6eef6}

/* Logo emphasis helper - use on .logo-container or header brand */
.logo-emphasis{font-weight:700; letter-spacing:0.2px; color: #ffffff; text-shadow:0 1px 0 rgba(0,0,0,0.25)}

/* Make the logo background a slightly lighter-dark across the site. Use !important to ensure
   this rule applies even if pages define .logo-blend/.logo-container later in a style block. */
.logo-blend, .logo-container {
  background-color:#ffffff !important; /* slightly lighter dark */
}

/* Make the main header white while preserving the dark top header band.
   Use .main-header on the primary header container to switch context.
   Inside .main-header, let the logo container be transparent so the logo "blends" into white. */
.main-header{background-color:#ffffff; color:#0b1220}
.main-header .logo-blend, .main-header .logo-container {
  background-color: transparent !important;
  filter: none !important; /* remove brightness/contrast so logo appears natural */
  box-shadow: none !important;
}

/* Ensure links and nav in main header are dark for readability */
.main-header a, .main-header .desktop-nav a, .main-header .mobile-menu-btn { color: #0b1220 }
.main-header .desktop-nav a:hover { color: var(--accent) }

/* Make main header navigation use the primary/accent color for visibility on white header */
.main-header .desktop-nav a,
.main-header nav > .group > button,
.main-header .mobile-menu-btn,
.main-header .desktop-nav a:visited {
  color: "";
}

.main-header .desktop-nav a:hover,
.main-header nav > .group > button:hover,
.main-header .mobile-menu-btn:hover,
.main-header .desktop-nav a:focus {
  color: #0b1220 !important; /* dark on hover for contrast */
  text-decoration: "";
}

/* Top header font sizing: increase nav font-size for better readability across breakpoints */
.main-header .desktop-nav a,
.main-header nav > .group > button,
.main-header .mobile-menu-btn {
  font-size: .75rem !important; /* ~18px */
  line-height: 1.2 !important;
}

/* Make the primary header labels (Market Reports / Custom Research / Insights) gray
   and ensure dropdown menu items are also gray on both desktop and mobile. Keep hover
   interactions using the accent color. These rules are scoped under .main-header so
   they don't affect the dark top band. */
.main-header .desktop-nav > .group > button,
.main-header .desktop-nav > .group > button .fas,
.main-header .desktop-nav .group button,
.main-header .desktop-nav .group > button,
.main-header .mobile-menu-btn {
  color: var(--primary-gray) !important;
}

/* Dropdown menu links/text (desktop mega menus and mobile menu items) */
.main-header .dropdown-menu a,
.main-header .dropdown-menu .block,
.main-header .dropdown-menu .text-text-secondary,
.main-header #mobileMenu a,
.main-header #mobileMenu button,
.main-header #mobileMenu .text-text-primary,
.main-header #mobileMenu .text-text-secondary {
  /* force gray regardless of utility classes like text-accent */
  color: var(--primary-gray) !important;
  fill: currentColor !important;
  /* reset Tailwind utility color classes that may be present */
  --tw-text-opacity: 1 !important;
}

/* Preserve accent on hover for clarity */
.main-header .dropdown-menu a:hover,
.main-header #mobileMenu a:hover,
.main-header .desktop-nav > .group > button:hover {
  color: var(--accent) !important;
}

/* Also remove persistent green from anchors inside dropdowns that use explicit accent classes
   (e.g., hover:text-accent or text-accent). This forces the gray color by default and only
   allows green on :hover. */
.main-header .dropdown-menu a.text-accent,
.main-header .dropdown-menu .hover\:text-accent,
.main-header #mobileMenu a.text-accent,
.main-header #mobileMenu .hover\:text-accent,
.main-header-bar .dropdown-menu a.text-accent,
.main-header-bar #mobileMenu a.text-accent {
  color: var(--primary-gray) !important;
}

/* Force headings and any explicit accent utility inside dropdowns to gray by default
   (covers h4 titles like 'Aerospace and Defense' as well as any .text-accent nodes). */
.main-header .dropdown-menu h4,
.main-header .dropdown-menu h4 a,
.main-header .dropdown-menu .font-semibold,
.main-header .dropdown-menu .text-accent,
.main-header .dropdown-menu h4 .text-accent {
  color: var(--primary-gray) !important;
}
.main-header-bar .dropdown-menu h4,
.main-header-bar .dropdown-menu h4 a,
.main-header-bar .dropdown-menu .font-semibold,
.main-header-bar .dropdown-menu .text-accent,
.main-header-bar .dropdown-menu h4 .text-accent {
  color: white !important;
}

/* Fallback: some pages render the mobile menu or dropdowns as siblings of .main-header
   inside .main-header-bar. Add equivalent rules scoped under .main-header-bar to ensure
   the gray color applies in that layout too. */
.main-header-bar .desktop-nav > .group > button,
.main-header-bar .mobile-menu-btn {
  color: var(--primary-gray) !important;
}
.main-header-bar .dropdown-menu a,
.main-header-bar .dropdown-menu .block,
.main-header-bar #mobileMenu a,
.main-header-bar #mobileMenu button,
.main-header-bar #mobileMenu .text-text-primary,
.main-header-bar #mobileMenu .text-text-secondary {
  color: white !important;
}
.main-header-bar .dropdown-menu a:hover,
.main-header-bar #mobileMenu a:hover,
.main-header-bar .desktop-nav > .group > button:hover {
  color: var(--accent) !important;
}

/* Top-bar dropdown (small header band) — keep text gray and use white hover background
   Targets the top navigation dropdowns (About, Careers) located in the top header band. */
#siteHeader .bg-secondary.border-b.border-primary .group .absolute a,
#siteHeader .bg-secondary.border-b.border-primary .group .absolute a {
  color: var(--primary-gray) !important;
  background-color: transparent !important;
}
#siteHeader .bg-secondary.border-b.border-primary .group .absolute a:hover {
  background-color: #ffffff !important;
  color: var(--primary-gray) !important;
}

/* Full-bleed header bar to allow white background edge-to-edge */
.main-header-bar{width:100%; background-color:#ffffff; box-shadow:0 1px 0 rgba(16,24,40,0.04);}
.main-header-bar .container{max-width:1280px}

/* Fixed header layout helpers */
#siteHeader{position:fixed; top:0; left:0; right:0; width:100%; z-index:10000; margin-top:0 !important;}
:root{ --site-header-height: 88px; }
/* When pages use a fixed header, add top padding equal to header height so content isn't covered */
body.has-fixed-header{transition:padding-top 0.12s ease; padding-top: var(--site-header-height);} /* default fallback */
/* Responsive padding to prevent content from being hidden behind fixed header (matched to index.html) */
body.has-fixed-header{ padding-top:110px !important; }
@media (min-width: 768px){
  body.has-fixed-header{ padding-top:140px !important; }
}
@media (min-width: 1024px){
  body.has-fixed-header{ padding-top:130px !important; }
}

/* Ensure the mobile menu (which is inside header) remains scrollable */
#siteHeader #mobileMenu{max-height:calc(100vh - 88px); overflow-y:auto}

/* Ensure modals and modal-like overlays appear above the fixed header
   Many pages use ids like #caseStudyModal; apply a global rule so any
   element with an id ending in "Modal" (or the .modal helper) overlays header. */
[id$="Modal"], .modal {
  z-index: 11000 !important;
}

/* Subtle hero/background blur using pseudo-element. Apply this class to the element that contains the background-image. */
.hero-blur{position:relative; overflow:hidden}
.hero-blur::before{
  content: "";
  position:absolute;
  inset:0; /* top:0;right:0;bottom:0;left:0 */
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter: blur(6px) brightness(0.9);
  transform: scale(1.03);
  z-index:0;
  pointer-events:none;
}
.hero-blur > *{position:relative; z-index:1}

/* Equal-height card helpers */
.site-card{display:flex; flex-direction:column; height:100%}
.site-card-body{flex:1 1 auto; display:flex; flex-direction:column}
.site-card-footer{margin-top:auto}

/* Scoped paragraph justification for readable bodies */
.site-card p, .content p, .prose p{ text-align:justify; text-justify:inter-word }

/* Small utilities */
.muted-on-dark{color:rgba(255,255,255,0.78)}
.logo-contrast{mix-blend-mode:normal}

/* Force shadow helper: use when Tailwind shadow utilities are being overridden
  by page-specific rules or container clipping. This gives a reliable shadow
  with higher stacking context and an !important flag so it appears above
  competing rules. */
.force-shadow{position:relative; z-index:10; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important}

/* Backdrop-filter safe fallback for older browsers */
.backdrop-soft{background-color:rgba(255,255,255,0.4)}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  .backdrop-soft{backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background-color:rgba(255,255,255,0.25)}
}

/* Footer link / contrast helpers */
.footer-contrast a{color:rgba(255,255,255,0.9)}

/* Responsiveness tweaks used by several pages */
@media (max-width:640px){
  .site-card{min-height:unset}
}

/* Small accessibility touch: ensure focus outlines remain visible on dark headers */
.band-header a:focus, .band-header button:focus{outline:2px dashed rgba(255,255,255,0.6); outline-offset:3px}

/* ------------------------------------------------------------------
   Chatbot: keep the window fully visible across devices
   - Force window to be fixed to the viewport (not absolute in container)
   - Constrain size to viewport with scroll
   - Respect iOS safe-area insets
   - Ensure it layers above the fixed header
   ------------------------------------------------------------------ */
#chatbotContainer { z-index: 10060 !important; }
#chatbotContainer #chatbotWindow {
  position: fixed !important;
  bottom: calc(1rem + env(safe-area-inset-bottom)) !important; /* stay off the bottom edge */
  right: calc(1rem + env(safe-area-inset-right)) !important;
  left: auto !important;
  height: auto !important;                 /* override h-96 */
  width: min(24rem, calc(100vw - 2rem)) !important; /* override w-80/w-96 */
  max-height: calc(100vh - 7rem - env(safe-area-inset-bottom)) !important; /* leave room for header and toggle */
  overflow-y: auto !important;
  z-index: 10060 !important;               /* above #siteHeader (9999) */
}

/* Small screens: let the window span almost full width with margins and sit above the toggle */
@media (max-width: 640px) {
  #chatbotContainer #chatbotWindow {
    right: 0.75rem !important;
    left: 0.75rem !important;               /* balanced margins both sides */
    width: auto !important;                 /* stretch between left/right */
    bottom: calc(5rem + env(safe-area-inset-bottom)) !important; /* leave room for the 64px toggle button + gap */
    max-height: calc(100vh - 6.5rem - env(safe-area-inset-bottom)) !important;
  }
}

/* ------------------------------------------------------------------
   Index page specific helpers (moved from index.html inline styles).
   These are intentionally page-scoped but kept here for now to reduce
   duplicate inline styles across pages. They are safe to keep centralized.
   ------------------------------------------------------------------ */

/* Industry card overlay (used on homepage cards) */
.industry-card-overlay {
  background: linear-gradient(135deg, rgba(43, 79, 131, 0.3) 0%, rgba(34, 197, 94, 0.2) 50%, rgba(43, 79, 131, 0.3) 100%);
  backdrop-filter: blur(0.5px);
}

/* Generic dropdown centering helper (keeps menus within viewport) */
.dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
}

/* For shorter viewports (like 1024x600), ensure dropdowns fit properly */
@media (max-height: 700px) {
  .dropdown-menu {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
}

@media (max-height: 600px) {
  .dropdown-menu {
    max-height: 80vh !important;
  }
}

/* Responsive helpers for the homepage industry grid and header search widths */
@media (max-width: 575.98px) {
  .dropdown-menu { left: 0; transform: none; right: 0; width: auto !important; max-width: calc(100vw - 1rem); margin: 0 0.5rem; }
  #mobileMenu { max-height: calc(100vh - 100px); overflow-y: auto; }
  .container { padding-left: 0.75rem; padding-right: 0.75rem; }
  .header-search { width: 120px !important; }
  .hero-content h1 { font-size: 1.5rem !important; line-height: 1.4; }
  .hero-content p { font-size: 0.875rem; }
  .industry-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .mobile-nav-main { font-size: 0.9rem; }
  .mobile-nav-sub { font-size: 0.8rem; }
  .mobile-nav-subsub { font-size: 0.75rem; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .dropdown-menu { left: 0; transform: none; right: 0; width: auto !important; max-width: calc(100vw - 1.5rem); margin: 0 0.75rem; }
  .industry-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem; }
  .header-search { width: 140px !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .dropdown-menu { left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); margin: 0 1rem; }
  .industry-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem; }
  .mega-menu-tablet { grid-template-columns: repeat(2, 1fr) !important; }
  .header-search { width: 160px !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .industry-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem; }
  .mega-menu-desktop { grid-template-columns: repeat(3, 1fr) !important; }
  .header-search { width: 180px !important; }
}

@media (min-width: 1200px) {
  .industry-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2.5rem; }
  .mega-menu-xl { grid-template-columns: repeat(4, 1fr) !important; }
  .header-search { width: 200px !important; }
}

@media (min-width: 1400px) {
  .container { max-width: 1280px; }
  .industry-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 3rem; }
}

/* Ensure consistent section/container widths between 1025px and 1279px
   Some pages use a custom utility `max-w-9xl` (non-standard Tailwind key).
   Explicitly enforce a stable max-width here so sections don't jump width
   between the 1024px and 1280px breakpoints. */
@media (min-width: 1025px) and (max-width: 1279.98px) {
  .max-w-9xl {
    max-width: 1280px !important;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Also make the generic container consistent in this range */
  .container {
    max-width: 1280px !important;
  }
}

@media (max-width: 767px) {
  #mobileMenu { max-height: calc(100vh - 120px); overflow-y: auto; }
  .mobile-submenu-level-1 { margin-left: 1rem; }
  .mobile-submenu-level-2 { margin-left: 2rem; }
  .desktop-nav { display: none !important; }
}

/* Ensure consistent font size for Insights & Resources dropdown items on mobile (centralized) */
@media (max-width: 767px) {
  /* Make nested submenu links readable & consistent (Tailwind's text-sm ~= 0.875rem) */
  #mobileMenu #insights a,
  #mobileMenu #insights button,
  #mobileMenu #industryInsights a,
  #mobileMenu #articlesBlogs a,
  #mobileMenu #industryNews a,
  #mobileMenu .space-y-1 a,
  #mobileMenu .space-y-2 a {
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
  }

  /* Also ensure the accordion labels inside the insights block use the same size */
  #mobileMenu #insights .w-full,
  #mobileMenu #insights .flex.items-center {
    font-size: 0.875rem;
  }
}

/* Hide mobile menu UI only on large screens (desktop). Keep visible on tablets. */
@media (min-width: 1024px) {
  .mobile-menu-btn { display: none !important; }
  #mobileMenu { display: none !important; }
}

/* Prevent horizontal overflow (homepage helper) */
/* overflow-x must stay on html only: setting it on body too forces body's
   overflow-y to auto, turning body into its own scroll container separate
   from html (the real viewport scroller) and breaking position: sticky
   for every sticky element on the site. */
html { overflow-x: hidden; }
body { max-width: 100vw; margin:0; padding:0; }

/* Hero section blur helper (homepage uses #heroSection) */
#heroSection { position: relative; overflow: hidden; }
#heroSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(6px) brightness(0.9);
  transform: scale(1.03);
  z-index: 0;
}
#heroSection > .relative.z-10 { z-index: 1; }

/* Visited/active link helper: ensure only a single top-level header nav link is styled as visited.
   Use .visited-link on anchors to mark the selected link. Scope very narrowly to primary desktop
   navigation and the main header bar so dropdown and mobile menu links are NOT affected. */
#siteHeader .desktop-nav a.visited-link,
#siteHeader > .main-header-bar a.visited-link,
#siteHeader .main-header .desktop-nav a.visited-link {
  color: var(--accent) !important; /* keep accent for the single visited link */
  font-weight: 600;
}

/* When showing visited state we still want hover to behave normally (scoped likewise) */
#siteHeader .desktop-nav a.visited-link:hover,
#siteHeader > .main-header-bar a.visited-link:hover,
#siteHeader .main-header .desktop-nav a.visited-link:hover {
  color: var(--accent) !important;
}

/* ------------------------------------------------------------------
   Footer enhancements and page helpers (moved from per-page inline styles)
   These were previously embedded inside page <style> blocks (e.g. insights.html,
   careers.html). Centralizing here keeps the design consistent.
   ------------------------------------------------------------------ */

/* Text color classes */
.text-text-secondary {
    color: #6B7280;
}

/* Enhanced Footer Styling */
.footer-gradient {
  background: linear-gradient(135deg, #111827 0%, #1F2937 50%, #374151 100%);
}

.footer-box-enhanced {
  border-radius: 12px;
  background: rgba(31, 41, 55, 0.6);
  backdrop-filter: blur(15px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.footer-box-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
  transition: left 0.6s ease;
}

.footer-box-enhanced:hover {
  border-color: #10B981;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
  transform: translateY(-4px);
  background: rgba(31, 41, 55, 0.8);
}

.footer-box-enhanced:hover::before {
  left: 100%;
}

.footer-section-header {
  font-weight: 600;
  color: #F3F4F6;
  border-bottom: 2px solid #10B981;
  padding-bottom: 8px;
  margin-bottom: 16px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-section-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, #10B981, #34D399);
  animation: expandLine 2s ease-in-out infinite alternate;
}

@keyframes expandLine {
  from { width: 30%; }
  to { width: 50%; }
}

.footer-link {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  margin: 2px 0;
}

/* Footer typography: enforce a consistent, accessible base font size and spacing */
footer, .footer-gradient, .footer-box-enhanced {
  font-size: 1rem; /* standard body size */
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Slightly reduce footer font size on very small screens to avoid overflow */
@media (max-width: 420px) {
  footer, .footer-gradient, .footer-box-enhanced {
    font-size: 0.9375rem; /* ~15px */
  }
}

.footer-link:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  padding-left: 20px;
  transform: translateX(4px);
}

.footer-link::before {
  content: '→';
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: all 0.3s ease;
  color: #10B981;
}

.footer-link:hover::before {
  opacity: 1;
  left: 4px;
}

.footer-social-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid rgba(16, 185, 129, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 4px;
  position: relative;
  overflow: hidden;
}

.footer-social-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent);
  transform: scale(0);
  transition: transform 0.4s ease;
}

.footer-social-icon:hover {
  background: linear-gradient(135deg, #10B981, #34D399);
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  border-color: #34D399;
}

.footer-social-icon:hover::before {
  transform: scale(1);
}

.footer-social-text {
  color: #10B981;
  font-weight: 500;
  transition: all 0.3s ease;
}

.footer-social-icon:hover .footer-social-text {
  color: white;
}

/* If this page uses a .page-header section, apply a subtle blurred layer under the content */
.page-header {
    position: relative;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Insights & Resources dropdown: keep within viewport and right-align
   Applies consistently across all pages when the dropdown root includes
   the class .insights-dropdown (added in header markup).
   ------------------------------------------------------------------ */
.insights-dropdown {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  width: min(50rem, calc(100vw - 6rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

@media (max-width: 1024px) {
  .insights-dropdown {
    right: 1rem !important;
    left: auto !important;
    transform: none !important;
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* Hero carousel slides (fading background image carousel) */
.hero-carousel{position:relative; overflow:hidden}
.hero-carousel .hero-slide{position:absolute; inset:0; background-position:center center; background-size:cover; background-repeat:no-repeat; opacity:0; transition:opacity 1s ease-in-out; will-change:opacity; z-index:0}
.hero-carousel .hero-slide.is-active{opacity:1; z-index:1}
.hero-carousel .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,0.45) 0%, rgba(2,6,23,0.55) 100%); z-index:2; pointer-events:none}
.hero-carousel .hero-content{position:relative; z-index:3}

/* Blurred background layer for each slide. Uses ::before so the blur applies only to the image layer
   and not to the hero content. Background is inherited from the element's inline style set by JS. */
.hero-carousel .hero-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  /* place a subtle dark gradient above the image to improve contrast */
  background-image: linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.42)), inherit;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* keep a soft blur and slightly reduce brightness for a consistent look */
  filter: blur(6px) brightness(0.9);
  transform: scale(1.04);
  z-index: 0;
  pointer-events: none;
}

/* Ensure any children (if present) stay above the blurred layer */
.hero-carousel .hero-slide > * { position: relative; z-index: 1; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-carousel .hero-slide{transition:none}
  .hero-carousel .hero-slide::before{filter:none; transform:none}
}


.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(6px) brightness(0.92);
    transform: scale(1.02);
    z-index: 0;
    opacity: 0.95;
}

.page-header > .page-header-content {
    position: relative;
    z-index: 1;
}

/* Site-wide card helper (keeps cards equal height and footers aligned) */
.site-card { display: flex; flex-direction: column; height: 100%; }
.site-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.site-card-footer { margin-top: auto; }

/* Scoped paragraph justification inside common padding wrappers */
.p-4 p, .p-6 p, .card-body p { text-align: justify; text-justify: inter-word; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-animate {
  animation: fadeInUp 0.8s ease-out;
}

.footer-animate:nth-child(1) { animation-delay: 0.1s; }
.footer-animate:nth-child(2) { animation-delay: 0.2s; }
.footer-animate:nth-child(3) { animation-delay: 0.3s; }

.footer-logo-container {
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.footer-logo-container:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.02);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
  transition: all 0.3s ease;
  border-radius: 4px;
  margin: 4px 0;
}

.footer-contact-item:hover {
  padding-left: 12px;
  border-bottom-color: #10B981;
  background: rgba(16, 185, 129, 0.05);
}

.footer-social-icon-enhanced {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.1));
  border: 2px solid rgba(16, 185, 129, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 6px;
  position: relative;
  overflow: hidden;
  color: #10B981;
  font-weight: 600;
}

.footer-social-icon-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4), transparent);
  transform: scale(0);
  transition: transform 0.4s ease;
}

.footer-social-icon-enhanced:hover {
  background: linear-gradient(135deg, #10B981, #34D399);
  transform: scale(1.2) rotate(15deg);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
  border-color: #34D399;
  color: white;
}

.footer-social-icon-enhanced:hover::before {
  transform: scale(1);
}

/* Small accessibility touch: ensure focus outlines remain visible on dark headers */
.band-header a:focus, .band-header button:focus{outline:2px dashed rgba(255,255,255,0.6); outline-offset:3px}

/* Hide About and Careers dropdowns on mobile screens */
@media (max-width: 767px) {
  #siteHeader .bg-secondary.border-b.border-primary .group:nth-of-type(1), /* About */
  #siteHeader .bg-secondary.border-b.border-primary .group:nth-of-type(2)  /* Careers */ {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   Enforce consistent mobile navbar font sizing across all pages
   - Many pages set sizes in different places (or inline). This rule
     centralizes a single readable size for mobile menu links and
     buttons and uses an ID-scoped selector + !important to ensure
     it overrides page-specific rules.
   - Adjust `font-size` here if you prefer a different scale.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Base mobile menu items (links and buttons inside the mobile menu) */
  #siteHeader #mobileMenu a,
  #siteHeader #mobileMenu button,
  #siteHeader .mobile-menu-btn,
  #siteHeader .mobile-nav-main,
  #siteHeader .mobile-nav-sub,
  #siteHeader .mobile-nav-subsub,
  #siteHeader #mobileMenu .w-full,
  #siteHeader #mobileMenu .flex.items-center {
    font-size: 0.875rem !important; /* consistent: text-sm (~14px) */
    line-height: 1.25 !important;
  }

  /* Also normalize any dropdown/menu block text inside the mobile menu */
  #siteHeader #mobileMenu .dropdown-menu a,
  #siteHeader #mobileMenu .dropdown-menu button {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }
}
/* === Balanced Fix: Center Market Reports dropdown inside viewport === */
.desktop-nav .group:first-child .dropdown-menu {
  position: absolute !important;
  left: 50% !important;              /* start from middle of parent */
  transform: translateX(-25%) !important; /* shift slightly left to keep inside viewport */
  right: auto !important;
  margin: 0 auto !important;
  max-width: calc(100vw - 4rem) !important; /* small side padding on both edges */
}
.text-xs {
  font-size: 0.63rem !important;
  line-height: 0.6rem !important;
}


/* ✅ Fix Mega Dropdown for 1024px–1174px */
@media (min-width: 1024px) and (max-width: 1174px) {
  .dropdown-menu {
    left: 50% !important;
    transform: translateX(-124%) !important;
    width: 51vw !important;         /* little narrower for smaller screens */
    max-width: 1000px !important;   /* prevent overflow */
    padding: 1.25rem !important;    /* reduce padding (was 1.5rem = p-6) */
  }

  /* Reduce internal grid spacing */
  .dropdown-menu .grid {
    gap: 1rem !important;           /* instead of gap-6 */
  }

  /* Make font size slightly smaller for this range */
  .dropdown-menu a {
    font-size: 0.7rem !important;  /* was text-sm (0.875rem) */
    line-height: 1.25rem !important;
  }

  /* Tighten section spacing */
  .dropdown-menu .space-y-6 {
    row-gap: 1rem !important;
  }

  .dropdown-menu h4 {
    font-size: 1rem !important;
  }
}

/* Public-facing rich text content (Quill-authored: articles, reports, insights, etc.).
   Quill saves lists as <ol data-list="bullet|ordered"> rather than semantic <ul>, so its
   own stylesheet (loaded in layouts/app.blade.php) is required for bullets/indents to
   render the same way here as they do in the admin editor. */
.ql-editor {
  padding: 0;
  overflow: visible;
  /* The public layout's <body> defaults text to a near-white color (meant for
     dark sections); Quill's raw output has no per-tag color class to override
     it with, so without this the content is invisible on white cards. Inline
     colors picked via the editor's color tool still win (higher specificity). */
  color: var(--primary-gray);
}

.ql-editor img {
  display: block;
  max-width: 100% !important;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

/* Image align/resize wrapper produced by the admin editor's blot-formatter2 plugin
   (<span class="ql-image-align-center" style="--resize-width: …">). Mirrors
   quill-blot-formatter2.css, which is only loaded in the admin panel - without this
   the alignment/sizing the editor shows has no effect on the public page. */
.ql-editor {
  --blot-align-left-margin: 0.5rem 1rem 0.5rem 0;
  --blot-align-center-margin: 1rem auto;
  --blot-align-right-margin: 0.5rem 0 0.5rem 1rem;
}
.ql-editor [class^="ql-image-align-"] {
  display: flex;
  flex-wrap: wrap;
  width: var(--resize-width);
  max-width: 100%;
}
.ql-editor [class^="ql-image-align-"] > img {
  flex: 1 1 auto;
  margin: 0;
}
.ql-editor .ql-image-align-left,
.ql-editor .ql-iframe-align-left {
  margin: var(--blot-align-left-margin);
  float: left;
}
.ql-editor .ql-image-align-center,
.ql-editor .ql-iframe-align-center {
  margin: var(--blot-align-center-margin);
}
.ql-editor .ql-image-align-right,
.ql-editor .ql-iframe-align-right {
  margin: var(--blot-align-right-margin);
  float: right;
}

/* Font sizes from the editor's Size picker (small/large/huge) - values match Quill's own.
   Legacy content only - kept for anything saved before the switch to TinyMCE below. */
.ql-editor .ql-size-small { font-size: 0.75em; }
.ql-editor .ql-size-large { font-size: 1.5em; }
.ql-editor .ql-size-huge { font-size: 2.5em; }

/* Content can overflow (e.g. a table pasted from Word with fixed pixel column
   widths) - scroll just that content instead of blowing out the whole page width. */
.ql-editor {
  overflow-x: auto;
}

/* Tables from the admin editor (TinyMCE) - browsers render bare <table> with no
   visible borders/spacing, so give them a readable default look on the public page.
   width/table-layout overrides neutralize fixed pixel <col> widths carried over from
   pasted Word tables, which otherwise force the table (and the whole page) wider than
   the viewport. */
.ql-editor table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
  margin: 1rem 0;
}
.ql-editor table col {
  width: auto !important;
}
.ql-editor table td,
.ql-editor table th {
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
}
.ql-editor table th {
  font-weight: 600;
  text-align: left;
}
/* Only apply the default header background when the row/cell hasn't been
   given an explicit color from the editor - otherwise a th's own background
   (even this default one) paints over its parent tr's inline background-color. */
.ql-editor table tr:not([style]) > th {
  background-color: #f9fafb;
}

.ql-editor p {
  margin-bottom: 1rem;
}

.ql-editor h1, .ql-editor h2, .ql-editor h3 {
  color: var(--primary-gray);
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Callout boxes: paragraphs/headings wrapped in a background color via the admin
   editor's "Box" toolbar control (see resources/views/admin/layout.blade.php). */
.ql-editor .ql-callout-blue,
.ql-editor .ql-callout-amber,
.ql-editor .ql-callout-green,
.ql-editor .ql-callout-gray,
.ql-editor .ql-callout-red,
.ql-editor .ql-callout-purple,
.ql-editor .ql-callout-teal,
.ql-editor .ql-callout-orange,
.ql-editor .ql-callout-dark {
  padding: 1.25rem 1.5rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}
.ql-editor .ql-callout-blue { background-color: #1e3a5f; color: #fff; }
.ql-editor .ql-callout-amber { background-color: #fef3c7; color: #78350f; }
.ql-editor .ql-callout-green { background-color: #dcfce7; color: #14532d; }
.ql-editor .ql-callout-gray { background-color: #f1f5f9; color: #1f2937; }
.ql-editor .ql-callout-red { background-color: #fee2e2; color: #7f1d1d; }
.ql-editor .ql-callout-purple { background-color: #ede9fe; color: #4c1d95; }
.ql-editor .ql-callout-teal { background-color: #ccfbf1; color: #134e4a; }
.ql-editor .ql-callout-orange { background-color: #ffedd5; color: #7c2d12; }
.ql-editor .ql-callout-dark { background-color: #111827; color: #fff; }
.ql-editor .ql-callout-blue h1, .ql-editor .ql-callout-blue h2, .ql-editor .ql-callout-blue h3,
.ql-editor .ql-callout-dark h1, .ql-editor .ql-callout-dark h2, .ql-editor .ql-callout-dark h3 {
  color: #fff;
}