/* Background + mesh via pseudo elements: no HTML changes needed */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("./assets/esg-global-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("./assets/mesh.svg");
  background-repeat: repeat;
  opacity: .15;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* === Global Typography Normalization (Manrope/Newsreader) === */
:root{
  --ink:#0B0B0B;
  --paper:#FCFCFA;
  --hair:rgba(11,11,11,.12);
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
}

/* Default text colors and fonts */
html, body{
  font-family: var(--font-sans);
  color: var(--ink);
}

/* Headings use the executive serif by default */
h1,h2,h3,h4,h5,h6,.display{
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}

/* Prevent accidental bold everywhere */
p, li, dd, dt, small, .lede, .lead{ font-weight: 400; }
strong, b{ font-weight: 600; }

/* Scoped: headings on dark hero sections should be white */
.section-wrap.intro.hero h1,
.section-wrap.intro.hero h2,
.section-wrap.intro.hero h3,
.section-wrap.intro.hero .display{
  color:#fff;
}

/* Remove any global white heading overrides from earlier versions */
h1,h2,h3,h4,h5,h6{ font-family: var(--font-serif); color: var(--ink); }



/* Content layering */
main, header, footer, section, .hero, .on-image { position: relative; z-index: 1; }

/* Hero/on-image text on background */
.hero, .on-image { color: #fff !important; }
.hero h1, .hero h2, .hero h3, .on-image h1, .on-image h2, .on-image 
.hero p, .on-image p, .hero li, .on-image li, .hero span, .on-image span { color: #f5f5f5 !important; }

/* Removed global-white enforcement to let background show */
/* Navbar */
header, header * { color: #000 !important; }
header .btn-primary { background-color: #000 !important; color: #fff !important; }

/* Buttons */
.btn-primary, button.btn-primary { background:#000 !important; color:#fff !important; border:none !important; padding:12px 24px; border-radius:8px; }
.btn-primary:hover { background:#222 !important; }


/* --- BACKGROUND VISIBILITY FIX --- */
html, body { background: transparent !important; }
body.bg-paper { background-color: transparent !important; } /* override Tailwind bg-paper on body */

/* Only keep white backgrounds where explicitly needed (cards etc.) */
.card, .rounded-2xl.bg-white, .pricing .card, .faq details, footer {
  background-color: #fff !important;
  color: #000 !important;
}

/* Sections should not block the global background */
section.bg-white, section.bg-paper { background-color: transparent !important; }


/* --- HERO BACKGROUND FIX --- */
.hero, section.hero, header.hero, .hero-section {
  background-color: transparent !important;
}


/* --- FULL BACKGROUND TRANSPARENCY FIX --- */
.bg-white, .bg-paper, section.bg-white, section.bg-paper,
.card.bg-white, .rounded-2xl.bg-white {
  background-color: transparent !important;
}


/* --- SECTIONS TRANSPARENT, CARDS WHITE --- */
section.bg-white,
section.bg-paper {
  background-color: transparent !important;
}

.card,
.rounded-2xl.bg-white,
.pricing .card,
.faq details,
.subscription,
footer {
  background-color: #fff !important;
  color: #000 !important;
}


/* --- FINAL FIX: Sections transparent, Cards white --- */
section.bg-white,
section.bg-paper,
.pricing,
.subscription-section {
  background-color: transparent !important;
}

.card,
.rounded-2xl.bg-white,
.pricing .card,
.faq details,
.subscription {
  background-color: #fff !important;
  color: #000 !important;
}


/* --- HERO 100% TRANSPARENT --- */
.hero,
section.hero,
header.hero,
.hero-section,
section.bg-white:first-of-type {
  background-color: transparent !important;
}


/* === GLOBAL BACKGROUND MODEL ============================================
   Only CARDS, HEADER (top nav) and FOOTER are white. Everything else transparent.
   ======================================================================= */
html, body { background: transparent !important; }

/* Default: make any .bg-white / .bg-paper transparent unless it's a card, header, or footer */
.bg-white, .bg-paper { background-color: transparent !important; }

/* Sections and common wrappers must never block the global background */
section, main, .container, .wrapper, .pricing, .subscription-section { background-color: transparent !important; }

/* Keep cards white and readable */
.card, .rounded-2xl.bg-white, .pricing .card, .faq details, .subscription, .case-card {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Keep HEADER and FOOTER white with black text */
header, .site-header, nav.site-nav, .navbar {
  background-color: #ffffff !important;
  color: #000000 !important;
}
header a, header * { color: #000000 !important; }

footer, .site-footer { 
  background-color: #ffffff !important;
  color: #000000 !important;
}
footer a, footer * { color: #000000 !important; }

/* Optional: subtle borders on cards for structure (kept as is if already present) */
.card, .rounded-2xl.bg-white, .faq details, .subscription, .case-card {
  box-shadow: none;
  border-color: rgba(0,0,0,0.08);
}

/* Make hero area text adapt if it had on-image class (remove forced white text) */
.on-image, .on-image * { color: inherit !important; }


/* Hero must be transparent */
.hero, section.hero, header.hero, .hero-section, section:first-of-type {
  background-color: transparent !important;
}


/* Hero text wrapped in a white card */
.hero-card {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  text-align: center;
}
.hero-card h1,
.hero-card p,
.hero-card a {
  color: #000000 !important;
}


/* === UNIFIED CARD STYLE (Subscription look for all cards) === */
.card,
.rounded-2xl.bg-white,
.pricing .card,
.faq details,
.subscription,
.case-card,
.hero-card {
  background-color: #fff !important;
  color: #000 !important;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Ensure text in cards is black */
.card h1, .card h2, .card h3,
.card p, .card a,
.rounded-2xl.bg-white *,
.faq details *,
.subscription *,
.hero-card *,
.case-card * {
  color: #000 !important;
}


/* === Ensure sections are transparent === */
section, main, .container, .wrapper { background-color: transparent !important; }

/* === White cards like subscription === */
.rounded-2xl.border.hairline {
  background-color: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12) !important;
}
.rounded-2xl.border.hairline * { color: #000 !important; }

/* === Hero card styling === */
.hero-card {
  background-color: #fff !important;
  color: #000 !important;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.hero-card * { color: #000 !important; }

/* Keep header/footer white with black text */
header, .site-header, .navbar { background-color: #fff !important; color: #000 !important; }
footer, .site-footer { background-color: #fff !important; color: #000 !important; }
header a, header *, footer a, footer * { color: #000 !important; }


/* === Hero card button styling === */
.hero-card .btn,
.hero-card .btn-primary,
.hero-card a.btn-primary {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}

.hero-card .btn-secondary,
.hero-card a.btn-secondary {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}


/* Force white text for Executive Path section */
.exec-path-section h1,
.exec-path-section h2,
.exec-path-section h3,
.exec-path-section p {
  color: #ffffff !important;
}


/* Isolated styling: exec path heading + subtitle white */
.exec-path-text {
  color: #ffffff !important;
}


/* Exec path heading + subtitle white only */
.exec-path-text {
  color: #ffffff !important;
}


/* Exec path heading + subtitle white */
.exec-path-text {
  color: #ffffff !important;
}


/* Case outcomes heading + subtitle */
.case-text {
  color: #ffffff !important;
}

/* Case button visible on dark bg */



/* Case button same style as Start Screening */



/* Isolated case button - styled like Start Screening */



/* Case solid button – same style as last Start Screening */

/* Outline version */
.case-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid #000;
  color: #000;
  background-color: transparent;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.case-button:hover {
  
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--hair);
}

/* Solid version */
.case-solid {
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
}
.case-solid:hover {
  
  background-color: var(--paper);
  color: var(--ink);
}


/* Hero adjustments */
.hero-card {
  margin-top: -60px;
}

.hero-title {
  font-size: 80%;
  line-height: 1.2;
}


/* === Precise hero sizing overrides (-20%) === */
.hero-card h1 {
  font-size: 51.20px !important;
  line-height: 1.02 !important;
}
@media (min-width: 768px) {
  .hero-card h1 {
    font-size: 60.80px !important;
  }
}
/* keep hero lifted */
.hero-card {
  margin-top: -60px !important;
}


/* Hide any 'back to top' anchors/buttons globally */
.back-to-top, a[href="#top"]{ display:none !important; }



/* v34 — Dark filter behind content (front of image) for About & Cases */
body.theme-dark .section-wrap.on-image#top,
body.theme-dark .section-wrap.intro.hero.on-image#top,
body.theme-dark .section-wrap#top{
  position: relative;
}

/* Put image at the very back */
body.theme-dark .section-wrap#top img.bg,
body.theme-dark .section-wrap.on-image#top img.bg,
body.theme-dark .section-wrap.intro.hero.on-image#top img.bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Transparent dark filter ABOVE image but BELOW all text/content */
body.theme-dark .section-wrap#top::after,
body.theme-dark .section-wrap.on-image#top::after,
body.theme-dark .section-wrap.intro.hero.on-image#top::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  z-index: 1;              /* sits above image */
  pointer-events: none;    /* never block clicks */
}

/* Ensure all content sits above the overlay */
body.theme-dark .section-wrap#top > *:not(img),
body.theme-dark .section-wrap.on-image#top > *:not(img),
body.theme-dark .section-wrap.intro.hero.on-image#top > *:not(img){
  position: relative;
  z-index: 2;
}

/* Keep headings and chips crisp on dark */
body.theme-dark .section-wrap#top h1,
body.theme-dark .section-wrap#top h2,
body.theme-dark .section-wrap#top .kicker{ color: #fff !important; }
body.theme-dark .section-wrap#top p,
body.theme-dark .section-wrap#top .lede{ color: rgba(255,255,255,.86) !important; }


/* v34 — Full-bleed dark filter on ALL on-image sections (About & Cases only) */
body.theme-dark section.on-image{ position: relative; }

/* bg image underneath (if used as <img class="bg">) */
body.theme-dark section.on-image > img.bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}

/* dark transparent filter ABOVE image but BELOW content */
body.theme-dark section.on-image::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62); /* lighter than .72 */
  z-index: 1; pointer-events: none;
}

/* lift content above the filter */
body.theme-dark section.on-image > *:not(img.bg){
  position: relative; z-index: 2;
}


/* v34 — FINAL: full-page dark overlay by layering on body::before (About & Cases only) */
body.theme-dark::before{
  /* Overlay + image layered in one pseudo-element */
  background-image: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)), url("./assets/esg-global-bg.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
  z-index: -2 !important; /* image+overlay together */
}
/* Keep mesh above overlay */
body::after{ z-index: -1 !important; }


/* Neutralize previous hero overlays when theme-dark is active */
body.theme-dark .section-wrap#top::before,
body.theme-dark .section-wrap#top::after,
body.theme-dark section.on-image::after{
  background: transparent !important;
  box-shadow: none !important;
}


/* FINAL — full-page dark overlay layered with bg image (only where body.theme-dark) */
body.theme-dark::before{
  background-image: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)), url("./assets/esg-global-bg.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
  z-index: -2 !important;
}
/* keep mesh above overlay */
body::after{ z-index: -1 !important; }
/* neutralize hero-only overlays when theme-dark is active */
body.theme-dark .section-wrap#top::before,
body.theme-dark .section-wrap#top::after,
body.theme-dark section.on-image::after{
  background: transparent !important;
  box-shadow: none !important;
}


/* === MOBILE HARD FIX V30 (2025-10-14) === */
/* Keep desktop untouched by scoping all to <= 860px */
@media (max-width: 860px){
  /* Background: match V22 behavior (transparent containers + fixed image) */
  html, body{ background: transparent !important; overflow-x: hidden !important; }
  body::before{
    content:""; position: fixed !important; inset: 0 !important; display: block !important;
    background-image: url('/assets/esg-global-bg.jpg') !important;
    background-size: cover !important; background-position: center center !important;
    background-repeat: no-repeat !important; background-attachment: scroll !important;
    opacity: 1 !important; z-index: 0 !important; pointer-events: none !important;
  }
  body::after{ position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; }
  body > *{ position: relative !important; z-index: 1 !important; }

  /* Make white/paper sections transparent so background is visible */
  section, .section, .container, .card, .hero-card,
  .bg-white, .bg-[#ffffff], .bg-[#FCFCFA], .bg-paper, .paper,
  #mobile-menu, #m-panel {
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  }

  /* Burger toggle UI (works with .mobile-nav-toggle or .m-burger) */
  .mobile-nav-toggle, .m-burger{
    position: fixed; right: 12px; top: 12px;
    width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
    z-index: 10002;
  }
  .mobile-nav-toggle .burger, .m-burger .bar{
    display: block; width: 20px; height: 2px; background: #000;
    position: relative;
  }
  .mobile-nav-toggle .burger::before, .mobile-nav-toggle .burger::after{
    content:""; position: absolute; left: 0; width: 20px; height: 2px; background: #000;
  }
  .mobile-nav-toggle .burger::before{ top: -6px; }
  .mobile-nav-toggle .burger::after{ top: 6px; }

  /* Panel styling supports both #mobile-menu and #m-panel */
  #mobile-menu, #m-panel{
    position: fixed !important; right: 12px; top: 64px;
    width: min(88vw, 340px); max-height: calc(100vh - 84px); overflow: auto;
    display: none; flex-direction: column; gap: 6px;
    color: #fff; background: rgba(12,12,12,.92);
    border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,.45); z-index: 10001 !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  #mobile-menu.is-open, #m-panel.open{ display: flex !important; }
  #mobile-menu a, #m-panel a{
    color: #fff !important; text-decoration: none; padding: 10px 12px; border-radius: 10px; display: block;
  }
  #mobile-menu a:hover, #m-panel a:hover{ background: rgba(255,255,255,.06); }
  #mobile-menu a.cta, #m-panel a.cta{ font-weight: 700; border: 1px solid rgba(255,255,255,.2); text-align: center; }
}

/* Hide injected mobile UI on desktop to ensure zero impact */
@media (min-width: 861px){
  .mobile-nav-toggle, .m-burger, #mobile-menu, #m-panel{ display: none !important; }
}


/* === PAGE-SPECIFIC PRESERVE (MOBILE) === */
@media (max-width: 860px){
  /* Keep 'paper' backgrounds on ABOUT/PRIVACY/TERMS (body has bg-paper) */
  body.bg-paper section,
  body.bg-paper .section,
  body.bg-paper .container,
  body.bg-paper .card,
  body.bg-paper .paper,
  body.bg-paper .bg-white,
  body.bg-paper .bg-[#ffffff],
  body.bg-paper .bg-[#FCFCFA]{
    background: var(--paper, #FCFCFA) !important;
  }

  /* Keep card-style blocks on CASES readable (tcards, article, etc.) */
  body.cases .tcards .tcard,
  body.cases article,
  body.cases .card{
    background: #fff !important;
  }
}