:root{
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted: #cbd5e1;
  --line: rgba(255,255,255,0.12);
  --card: rgba(0,0,0,0.40);
  --card2: rgba(0,0,0,0.28);
  --shadow: 0 14px 45px rgba(0,0,0,0.35);
  --max: 1100px;
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.bg{
  min-height:100vh;
  background-color:#020617;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url("/assets/bokeh-background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#siteShade{
  min-height:100vh;
  position:relative;
}
#siteShade > *{ position:relative; z-index:1; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 18px 56px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 10px 0 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  height: 44px; /* toolbar logo bigger */
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}
.nav a:hover{
  background: rgba(0,0,0,0.32);
  text-decoration:none;
}

.hero{
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroInner{
  padding: 40px 26px 34px;
  text-align:center;
}
.heroLogo{
  width: min(560px, 82vw); /* hero logo bigger */
  height:auto;
  display:block;
  margin: 4px auto 18px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55));
}
.heroTitle{
  font-size: clamp(22px, 3.1vw, 34px);
  line-height:1.15;
  margin: 0 auto 10px;
  max-width: 900px;
  color: #f8fafc;
}
.heroSub{
  margin: 0 auto;
  max-width: 920px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.card{
  grid-column: span 12;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--card2);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}
@media (min-width: 900px){
  .card.half{ grid-column: span 6; }
}

.h2{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0.2px;
}
.p{
  margin: 0;
  color: var(--muted);
  line-height:1.6;
}

.bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height:1.65;
}

.footer{
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.75);
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size: 13px;
}
.footer a{
  color: rgba(255,255,255,0.85);
}



/* (V2 block removed by v34) */



/* === EM2PYRONEXT_PATCH_V2_BEGIN === */
/* Consistent background + overlay on ALL pages */
body.bg {
  /* keep your existing bg behavior, but enforce the image name */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Global overlay so every page matches the home-page readability */
/* Ensure page content sits above overlay */
body.bg > * {
  position: relative;
  z-index: 1;
}

/* Top nav bar should NOT show background under it */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(10, 16, 28, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Make room under sticky nav */
body.bg {
  /* if your layout already does this, harmless */
  padding-top: 0;
}

.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

/* Make nav logo larger (toolbar too small previously) */
.nav-logo {
  height: 40px;
  width: auto;
  display: block;
}

/* Hero logo larger */
.heroLogo {
  width: min(520px, 80vw);
  height: auto;
  display: block;
  margin: 0 auto 14px auto;
}

/* Dropdown positioning */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-btn { cursor: pointer; background: none; border: 0; padding: 0; }
.nav-dd-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 10px;
  background: rgba(10, 16, 28, 0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-menu a {
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
}
.nav-dd-menu a:hover {
  background: rgba(255,255,255,0.08);
}

/* === EM2PYRONEXT_PATCH_V2_END === */

/* === EM2PYRONEXT_PATCH_V3_BEGIN === */

/* IMPORTANT:
   We now use the global overlay (body.bg::before) everywhere.
   Disable legacy overlay wrappers so we don't double-darken pages that already had one.
*/
#siteShade,
.siteShade {
  background: transparent !important;
}
#siteShade::before,
.siteShade::before,
#siteShade::after,
.siteShade::after {
  content: none !important;
  display: none !important;
}

/* Dropdown UX: open on hover as well (JS also present on every page now) */
.nav-dd:hover .nav-dd-menu { display: block; }
.nav-dd:hover { }
.nav-dd-menu { cursor: default; }

/* Keep dropdown clickable above overlay */
.site-nav, .nav-dd-menu { z-index: 1100; }

/* === EM2PYRONEXT_PATCH_V3_END === */

/* === EM2PYRONEXT_PATCH_V4_BEGIN === */

/* The background overlay must NEVER intercept clicks (it was blocking dropdown link navigation). */
body.bg::before,
.bg::before {
  pointer-events: none !important;
}

/* Ensure nav + dropdown are always above everything and clickable */
.site-nav { position: relative; z-index: 5000 !important; }
.nav-dd-menu { position: absolute; z-index: 6000 !important; pointer-events: auto !important; }
.nav-dd-menu a { pointer-events: auto !important; }

/* === EM2PYRONEXT_PATCH_V4_END === */

/* --- diagrams (Connect / IQ Slat) --- */
.diagramWrap{
  margin: 18px 0 8px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 14px;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(2px);
}
.diagramImg{
  display:block;
  width:100%;
  height:auto;
  max-width: 980px;
  margin: 0 auto;
}

/* --- diagrams visibility fix --- */
.diagramWrap{
  position: relative;
  z-index: 5;
}
.diagramImg{
  position: relative;
  z-index: 6;
  min-height: 1px;
}


/* ==== Phase 1 (Copy/Layout) overrides: dark engineering-forward theme ==== */
:root {
  --bg0: #050814;
  --bg1: #020617;
  --card: rgba(2, 6, 23, 0.92);
  --cardBorder: rgba(148, 163, 184, 0.18);
  --text: #f9fafb;
  --muted: rgba(249, 250, 251, 0.82);
  --accent: #0f75bf;
}

body.bg {
  /* Replace busy hero imagery with a subtle gradient base */
  background: radial-gradient(1200px 600px at 20% 0%, rgba(15, 117, 191, 0.18), transparent 60%),
              radial-gradient(900px 520px at 80% 10%, rgba(99, 102, 241, 0.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
}

h1, h2, h3, p, li {
  color: var(--text);
}

p, li {
  color: var(--muted);
}

p.lead {
  font-size: 1.05rem;
  line-height: 1.55;
}

.subhead {
  color: var(--muted);
  margin-top: 0.2rem;
}

.heroTagline {
  color: rgba(249, 250, 251, 0.88);
  font-style: italic;
}

/* Diagram cards (SVGs inserted in Phase 2) */
.card.diagramCard {
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: 14px;
  padding: 14px;
  margin: 18px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.diagramSlot {
  /* Placeholder space; Phase 2 will swap slot → <img> */
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(249, 250, 251, 0.55);
  font-size: 0.95rem;
}

.diagramSlot::before {
  content: "Diagram loads here in Phase 2";
  display: block;
}

/* Ensure text containers stay readable even without heavy overlays */
#siteShade {
  background: rgba(2, 6, 23, 0.55);
}


/* ==== Phase 2 (Diagrams) overrides ==== */
.diagramSlot {
  min-height: 0;
  padding: 6px 2px;
}

.diagramSlot:empty::before {
  content: "Diagram slot is empty";
  display: block;
  color: rgba(249, 250, 251, 0.55);
  font-size: 0.95rem;
}

.diagramSlot::before {
  /* If not empty, ensure no placeholder text shows */
  content: none;
}

.diagramImg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

/* Slightly stronger border for diagram cards */
.card.diagramCard {
  border-color: rgba(15, 117, 191, 0.25);
}



/* === EM2PYRONEXT_PHASE1_V4_START === */
:root {
  --bg0: #070a12;
  --bg1: #0b1020;
  --card: rgba(255,255,255,0.06);
  --cardBorder: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --accent: #0f75bf;
}

body {
  color: var(--text);
}

.hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.hero::before {
content: none !important;
display: none !important;
}


.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 320px 320px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.heroInner {
  position: relative;
  z-index: 1;
}

.heroCtas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.btnPrimary {
  display: inline-block;
  background: rgba(15,117,191,0.92);
  color: white;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 700;
}

.btnPrimary:hover {
  background: rgba(15,117,191,1);
}

.btnLink {
  display: inline-block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 10px 2px;
  font-weight: 650;
}

.btnLink:hover {
  text-decoration: underline;
}

.section {
  margin-top: 28px;
}

.diagramCard {
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: 16px;
  padding: 14px;
  margin: 16px 0;
}

.diagramLabel {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 10px;
}

.diagramImg {
  width: 100%;
  height: auto;
  display: block;
}

.twoCol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 980px) {
  .twoCol {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.footerTag {
  margin-top: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
}
/* === EM2PYRONEXT_PHASE1_V4_END === */




/* === EM2PYRONEXT_PHASE1_V5_START === */
/* Page content card (rounded box like home hero) */
.pageCard {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 18px 18px;
  margin: 18px 0;
}

/* Ensure sections like "How it fits..." never go full-bleed */
.section {
  width: 100%;
}

/* Make diagram cards match the card language */
.diagramCard {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px;
  margin: 16px 0;
}

/* Connect module diagrams: only two columns on very wide screens, otherwise single for readability */
.twoCol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1250px) {
  .twoCol {
    grid-template-columns: 1fr 1fr;
  }
}
/* Give connect diagrams the full container width and comfortable padding */
.twoColWide .diagramCard {
  padding: 16px;
}
.twoColWide .diagramImg {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer spacing: ensure footer stays at the bottom of the content stack inside container */
.footer {
  margin-top: 22px;
}
/* === EM2PYRONEXT_PHASE1_V5_END === */



/* === EM2PYRONEXT_PHASE1_V6B_START === */
/* Sticky footer layout */
html, body {
  height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#siteShade {
  flex: 1 0 auto;
}

/* Full-width footer when placed outside the inner container */
footer.footer {
  width: 100%;
  flex: 0 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
/* === EM2PYRONEXT_PHASE1_V6B_END === */


/* em2pyronext phase2 visuals v1 */
/* Home hero: gradient + abstract bokeh image, kept subtle for readability */
body.home .hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 28px 22px;
  background-image:
    linear-gradient(135deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.78) 55%, rgba(2,6,23,0.92) 100%),
    url("/assets/bokeh-background.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Ensure hero inner content stays readable */
body.home .heroInner {
  position: relative;
  z-index: 1;
}

/* Optional: slightly tighten hero logo spacing on the new hero card */
body.home .heroLogo {
  max-width: 520px;
  width: min(520px, 92%);
}

/* Who We Are: subtle crew banner */
.pageHero {
  height: 220px;
  border-radius: 18px;
  margin: 10px 0 18px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}
.pageHero--crew {
  background-image:
    linear-gradient(180deg, rgba(2,6,23,0.80) 0%, rgba(2,6,23,0.55) 55%, rgba(2,6,23,0.88) 100%),
    url("/assets/crew-background.png");
}

/* Diagram cards: unify look across pages */
.diagramCard {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px 14px 16px;
  margin: 14px 0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.28);
}
.diagramLabel {
  font-size: 13px;
  letter-spacing: 0.2px;
  opacity: 0.9;
  margin: 0 0 10px;
}
.diagramImg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Keep "How it fits" section aligned to the same container width on home */
body.home #how-it-fits.section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Footer: ensure full-width fill (if not already) */
.footer {
  width: 100%;
}

/* em2pyronext phase2 visuals v2 */

/* Home hero: gradient + bokeh image (applies even if body class selectors fail) */
.hero.hero--bokeh {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 28px 22px;
  background-image:
    linear-gradient(135deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.78) 55%, rgba(2,6,23,0.92) 100%),
    url("/assets/bokeh-background.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Who We Are: put crew image behind the main shaded content area with gradient overlay */
body.who #siteShade {
  background-image:
    linear-gradient(180deg, rgba(2,6,23,0.86) 0%, rgba(2,6,23,0.68) 50%, rgba(2,6,23,0.90) 100%),
    url("/assets/crew-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
  padding-top: 8px; /* keep existing layout, just give slight breathing room */
}

/* Looking Ahead: crop the timeline image so it doesn’t waste vertical space */
.timelineImg {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center;
}

/* em2pyronext phase2 visuals v3 */

/* HOME: hero background is on the hero section, but the text area must be translucent so the image shows */
.hero.hero--bokeh {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 28px 22px;
  background-image:
    linear-gradient(135deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.72) 55%, rgba(2,6,23,0.92) 100%),
    url("/assets/bokeh-background.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.heroInner.heroInner--glass {
  background: rgba(2,6,23,0.55);   /* key: translucent so bokeh shows */
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px 16px;
  backdrop-filter: blur(6px);
}

/* WHO WE ARE: paint background behind everything (body pseudo), then keep content cards readable */
body.who::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1200px 600px at 20% 10%, rgba(15,117,191,0.18), rgba(2,6,23,0) 60%),
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.88)),
    url("/assets/crew-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.95) contrast(1.02);
}

/* If #siteShade had its own solid background previously, keep it transparent so the crew image is visible */
body.who #siteShade {
  background: transparent !important;
}

/* LOOKING AHEAD: crop timeline image and keep it under text */
.timelineCrop {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(2,6,23,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}

.timelineCrop img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center;
}

/* em2pyronext phase2 visuals v4 */

/* -------------------------
   HOME: background = gradient + bokeh image
   Make sure nothing (siteShade/hero defaults) can hide it.
-------------------------- */
body.home::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(1200px 700px at 20% 10%, rgba(15,117,191,0.18), rgba(2,6,23,0) 60%),
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.90)),
    url("/assets/bokeh-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* critical: if #siteShade is painting a solid overlay, it will hide the image */
body.home #siteShade{
  background: transparent !important;
}

/* also ensure hero itself isn’t being given an opaque background by legacy rules */
body.home .hero{
  background: transparent !important;
}

/* keep the text readable, but not opaque */
body.home .heroInner.heroInner--glass{
  background: rgba(2,6,23,0.55) !important;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

/* -------------------------
   LOOKING AHEAD: bokeh image behind content (like Who We Are),
   with the blue timeline line just below the text.
-------------------------- */
body.ahead::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(1000px 600px at 70% 15%, rgba(15,117,191,0.16), rgba(2,6,23,0) 55%),
    linear-gradient(180deg, rgba(2,6,23,0.93), rgba(2,6,23,0.90)),
    url("/assets/bokeh-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* make sure any global shade wrapper doesn’t “wipe” the background */
body.ahead #siteShade{
  background: transparent !important;
}

/* timeline line: crop to just the line, and keep it tight under text */
.timelineCrop{
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}

.timelineCrop img{
  display:block;
  width:100%;
  height: 120px;              /* force a tight band */
  object-fit: cover;          /* crop away wasted space */
  object-position: center;    /* line stays centered */
}

/* if the line is slightly above/below, tweak the crop window here */
@media (max-width: 720px){
  .timelineCrop img{ height: 100px; }
}


/* em2pyronext run patch v1 */

/* --- Diagram cards (global) --- */
.diagramCard{
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0 18px 0;
}
.diagramLabel{
  font-size: 13px;
  color: rgba(226,232,240,0.92);
  margin: 0 0 10px 0;
  line-height: 1.35;
}
.diagramCaption{
  font-size: 12px;
  color: rgba(203,213,225,0.85);
  margin-top: 10px;
  line-height: 1.35;
}

/* --- Home hero: full-bleed bokeh background + readable overlay --- */
.heroWrap {
position: relative;
padding: 34px 0 10px 0;

/* IMPORTANT: hero must NOT paint its own bokeh or top gradient band */
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
.heroWrap::before {
content: none !important;
display: none !important;
}

.heroWrap .container{
  position: relative;
  z-index: 1;
}
.heroGlass{
  background: rgba(2,6,23,0.50);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(6px);
}

/* --- Timeline divider between sections --- */
.timelineDivider{
  width: 100%;
  display: block;
  margin: 18px 0 22px 0;
  opacity: 0.85;
}
.timelineDivider img{
  display:block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 44px;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
  border-radius: 10px;
}

/* --- Section width: keep aligned to container --- */
.section--contained{
  padding: 0 0 12px 0;
}
.section--contained .container{
  padding-top: 10px;
}

/* --- Crew background pages (Who / Looking Ahead) --- */
body.who::before, body.ahead::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.90)),
    url("/assets/crew-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}
.pageCard{
  background: rgba(2,6,23,0.62);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(6px);
}

/* --- Make card text slightly softer than pure white --- */
.pageCard p, .diagramCard p, .pageCard li, .diagramCard li{
  color: rgba(226,232,240,0.92);
}


/* em2pyronext surgical patch v1 */

/* Shared diagram card style */
.diagram-card{
  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.diagram-card img{
  display:block;
  max-width:100%;
  margin: 0 auto 0.75rem auto;
}
.diagram-card .caption, .diagram-card figcaption{
  text-align:center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.35;
}

/* Home hero background (CSS background only, not an <img>) */
.hero-bokeh{
  position: relative;
  background-image: url('/assets/bokeh-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-bokeh::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.6);
  pointer-events:none;
}
.hero-bokeh > *{
  position: relative;
  z-index: 1;
}

/* Timeline divider */
.timeline-divider{
  padding: 24px 0;
}
.timeline-divider img{
  display:block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  opacity: 0.7;
  height: 48px;
  object-fit: cover;
  object-position: center;
}

/* Crew background wrapper (Who We Are / optional Looking Ahead) */
.crew-bg{
  position: relative;
  background-image: url('/assets/crew-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.crew-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  pointer-events:none;
}
.crew-bg > *{
  position: relative;
  z-index: 1;
}


/* em2pyronext layout fixes v1 */

/* Page-wide bokeh background with overlay */
.pageBokeh{
  position: relative;
  min-height: 100vh;
  background-image: url('/assets/bokeh-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pageBokeh::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.68);
  pointer-events:none;
}
.pageBokeh > *{
  position: relative;
  z-index: 1;
}

/* Default content card used on many pages */

/* Main content card */
.contentCard{
  background: rgba(2,6,23,0.70);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 26px;
  backdrop-filter: blur(2px);
}
/* Products page: centered wider single column */
.productsOneCol{
  max-width: 1100px;
  margin: 0 auto;
}

/* Ensure diagram images can fill available card width */
.diagram-card--full img{
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Crew background inside content box only */

/* Crew background inside the content box only */
.crewBox{
  position: relative;
  background-image: url('/assets/crew-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.crewBox::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.70);
  pointer-events:none;
}
.crewBox > *{
  position: relative;
  z-index: 1;
}
/* Timeline accent INSIDE a content box */

/* Timeline accent inside a content box */
.timelineBg{
  background-image:
    linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)),
    url('/assets/timeline.png');
  background-repeat: no-repeat;
  background-position: center 18px;
  background-size: min(980px, 100%) 44px;
  padding-top: 64px;
}
/* em2pyronext bokeh-global v2 */


/* GLOBAL page background: bokeh + dark overlay */
body.bg{
  background-color: #020617;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url('/assets/bokeh-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}



/* Diagram cards */
.diagram-card, .diagramCard{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px;
  margin: 18px 0;
}
.diagram-card img, .diagramCard img{
  display:block;
  max-width:100%;
  height:auto;
  margin: 0 auto;
}
.caption{
  text-align:center;
  margin-top: 10px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.72);
}

/* em2pyronext bokeh-global OVERRIDE v3 BEGIN */
/* One authoritative page background across all pages */
body.bg {
  background-color: #020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url('/assets/bokeh-background.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}
/* Content card */
.contentCard{
  background: rgba(2,6,23,0.70) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 26px !important;
}
/* Crew background INSIDE card only */
.crewBox{
  position: relative;
  background-image: url('/assets/crew-background.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}
.crewBox::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.70);
  pointer-events:none;
}
.crewBox > *{ position: relative; z-index: 1; }

/* Timeline streak INSIDE card only */
.timelineBg{
  background-image: url('/assets/timeline.png') !important;
  background-repeat: no-repeat !important;
  background-position: center 18px !important;
  background-size: min(980px, 100%) 44px !important;
  padding-top: 64px !important;
}

/* Products: force single centered column */
body.products .container{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* If any two-column wrapper exists, neutralize it */
body.products .twoCol,
body.products .cols,
body.products .grid,
body.products .layout {
  display: block !important;
}
/* em2pyronext bokeh-global OVERRIDE v3 END */

.contentCard.crewBox{
  position: relative;
  background-image: url('/assets/crew-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.contentCard.crewBox::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.70);
  pointer-events:none;
}
.contentCard.crewBox > *{ position: relative; z-index: 1; }

.contentCard.timelineBg{
  background-image: url('/assets/timeline.png');
  background-repeat: no-repeat;
  background-position: center 18px;
  background-size: min(980px, 100%) 44px;
  padding-top: 64px;
}

body.productsPage .container{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.productsPage .twoCol,
body.productsPage .cols,
body.productsPage .grid,
body.productsPage .layout{
  display: block;
}


/* === em2pyronext VISIBILITY OVERRIDE v5 (force backgrounds) === */

/* Force bokeh page background everywhere .bg is used */
body.bg{
  background-color:#020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* Ensure the main wrapper does NOT paint an opaque background */
#siteShade{
  background: transparent !important;
}

/* Belt-and-suspenders: also paint bokeh on the wrapper in case body is hidden */
body.bg #siteShade{
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Cards must contain their own backgrounds within rounded corners */
.contentCard{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(2,6,23,0.70) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Crew photo ONLY inside the card (Who We Are) */
.contentCard.crewBox{
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.contentCard.crewBox::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.70);
  pointer-events:none;
}
.contentCard.crewBox > *{ position: relative; z-index: 1; }

/* Timeline streak inside card (Looking Ahead) */
.contentCard.timelineBg{
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 24px) !important;
  background-size: min(980px, 100%) 44px !important;
  padding-bottom: 80px !important;
}

/* Optional visible divider element (inside card), low emphasis */
.timelineDivider{
  display:block;
  height:44px;
  margin: 18px auto 0;
  max-width: 980px;
  opacity: 0.75;
  background-image: url("/assets/timeline.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Products: single centered column (your body class is productsPage) */
body.productsPage .container{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.productsPage .twoCol,
body.productsPage .cols,
body.productsPage .grid,
body.productsPage .layout,
body.productsPage .productsGrid{
  display:block !important;
}

/* === end v5 === */



/* === em2pyronext BACKGROUND STANDARDIZATION v6 (authoritative) === */

/* Page-wide bokeh background, consistent on every page that uses body.bg */
body.bg{
  background-color:#020617 !important;
  background-image: url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;  /* lock to top */
  background-attachment: fixed !important;    /* prevent scrolling (note: iOS may ignore) */
}

/* Standardized global dark overlay (same on all pages) */
/* Ensure all page content renders above the overlay */
body.bg > *{
  position: relative;
  z-index: 1;
}

/* Keep #siteShade transparent so it doesn't replace the page background */
#siteShade{
  background: transparent !important;
}

/* Content card baseline */
.contentCard{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(2,6,23,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Crew image ONLY as the background of the SAME card that holds the text */
.contentCard.crewBox{
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.contentCard.crewBox::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.70);
  pointer-events:none;
}
.contentCard.crewBox > *{ position: relative; z-index: 1; }

/* Timeline glow as the bottom of the SAME text card */
.contentCard.timelineBg{
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 18px) !important;
  background-size: min(980px, 100%) 44px !important;
  padding-bottom: 80px !important;
}

/* If we also render an inner divider element, keep it subtle */
.timelineDivider{
  display:block;
  height:44px;
  margin: 18px auto 0;
  max-width: 980px;
  opacity: 0.75;
  background-image: url("/assets/timeline.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* === end v6 === */



/* === em2pyronext BACKGROUND STANDARDIZATION v7 (authoritative, do not edit above) === */

/* Apply bokeh to the PAGE (html), not a box. Lock to top, and keep it fixed. */
html{
  background-color:#020617 !important;
  background-image: url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

/* Body stays transparent so html background shows through */
body.bg{
  background: transparent !important;
  min-height: 100vh !important;
}

/* One consistent global overlay everywhere (prevents “some pages darker than others”) */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.58) 55%, rgba(0,0,0,0.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0.38) 40%, rgba(0,0,0,0.68));
}

/* Ensure all visible page content renders above the overlay */
body.bg > *{
  position: relative;
  z-index: 1;
}

/* Prevent old wrappers from painting their own backgrounds */
#siteShade{ background: transparent !important; }
/* Content card baseline */
.contentCard{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(2,6,23,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Crew image ONLY inside the text card */
.contentCard.crewBox{
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.contentCard.crewBox::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.70);
  pointer-events:none;
}
.contentCard.crewBox > *{ position: relative; z-index: 1; }

/* Timeline glow ONLY inside the text card (bottom) */
.contentCard.timelineBg{
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 18px) !important;
  background-size: min(980px, 100%) 44px !important;
  padding-bottom: 80px !important;
}

/* No timeline divider blocks on Home */
body.home .timelineDivider{ display:none !important; }

/* === end v7 === */

/* EM2PATCH v8 START */

/* PAGE background = bokeh everywhere (locked), one consistent overlay everywhere */
html, body{
  background-color:#020617;
}

body.bg{
  min-height:100vh;
  background-color:#020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body.bg > *{
  position: relative;
  z-index: 1;
}

/* Content card baseline (used across pages) */
.contentCard{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(2,6,23,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Crew image ONLY as background of the SAME text card */
.contentCard.crewBox{
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.contentCard.crewBox::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.66);
  pointer-events:none;
}
.contentCard.crewBox > *{ position: relative; z-index: 1; }

/* Timeline streak ONLY inside the SAME text card, at the bottom */
.contentCard.timelineBg{
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 18px) !important;
  background-size: min(980px, 100%) 44px !important;
  padding-bottom: 86px !important;
}

/* Products: force one centered column; neutralize common 2-col wrappers */
body.products .container{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.products .twoCol,
body.products .cols,
body.products .grid,
body.products .layout{
  display:block !important;
}
body.products .right,
body.products .sidebar{
  display:none !important;
}

/* EM2PATCH v8 END */

/* EM2PATCH v9 START */

/* HOME: kill the legacy scrolling overlay container.
   Keep page bokeh on body.bg only. */
#siteShade{
  background: transparent !important;
  display: contents !important;
}
/* If any old hero bokeh classes exist, ensure they DO NOT add a second layer */
.hero--bokeh,
.hero.hero--bokeh{
  background-image: none !important;
}
.hero--bokeh::before{
  display:none !important;
  content:none !important;
}

/* PRODUCTS: apply one-column rules to both possible body class names */
body.productsPage .container,
body.products .container{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Neutralize common 2-column wrappers if present */
body.productsPage .twoCol,
body.productsPage .cols,
body.productsPage .grid,
body.productsPage .layout,
body.products .twoCol,
body.products .cols,
body.products .grid,
body.products .layout{
  display: block !important;
}

/* Hide empty right rail/side column patterns if they exist */
body.productsPage .right,
body.productsPage .sidebar,
body.productsPage .aside,
body.products .right,
body.products .sidebar,
body.products .aside{
  display: none !important;
}

/* EM2PATCH v9 END */


/* EM2PATCH v9 START */
/* Global bokeh must be on the PAGE, not cards. One consistent overlay. */
body.bg{
  background-color:#020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important; /* lock to top */
}

/* Extra cinematic overlay that is consistent across pages (even without #siteShade) */
body.bg > *{ position: relative; z-index: 1; }

/* Home: if a hero-bokeh wrapper exists, it must NOT paint a second background */
.hero-bokeh{ background: transparent !important; background-image: none !important; }

/* Content card baseline */
.contentCard{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(2,6,23,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Crew image ONLY as background of the SAME text card */
.contentCard.crewBox{
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.contentCard.crewBox::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.65);
  pointer-events:none;
}
.contentCard.crewBox > *{ position: relative; z-index: 1; }

/* Timeline glow INSIDE the same text card (bottom anchored) */
.contentCard.timelineBg{
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 18px) !important;
  background-size: min(980px, 100%) 44px !important;
  padding-bottom: 82px !important;
}

/* Products: force single centered column even if legacy grid exists */
body.productsPage .grid,
body.productsPage .twoCol,
body.productsPage .cols,
body.productsPage .layout{
  display:block !important;
}
body.productsPage .card{
  width: 100% !important;
  max-width: var(--max) !important;
}
/* EM2PATCH v9 END */

/* EM2_CANONICAL_SITE_BG__LOCK_2026_02_04 */
/* One and only one background: global bokeh on body/bg */
body.bg, .bg {
  background-color: #020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Prevent any container/hero from reintroducing bokeh inside layout */
.hero-bokeh,
.heroWrap {
  background-image: none !important;
}
.hero-bokeh::before,
.heroWrap::before,
.hero-bokeh::after,
.heroWrap::after {
  content: none !important;
  display: none !important;
}

/* Crew image ONLY behind Who We Are main text card */
.contentCard.crewBox {
  position: relative !important;
  overflow: hidden !important;
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.contentCard.crewBox::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.70) !important;
  pointer-events: none !important;
}
.contentCard.crewBox > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Timeline streak ONLY behind Looking Ahead main text card */
.contentCard.timelineBg {
  position: relative !important;
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 18px) !important;
  background-size: min(980px, 100%) 44px !important;
  padding-bottom: 86px !important;
}
/* END EM2_CANONICAL_SITE_BG__LOCK_2026_02_04 */

/* EM2_CANONICAL_SITE_TWEAKS__V11_2026_02_04 */
/* Make diagram slots stack image + caption vertically (fixes squished captions) */
.diagramSlot {
  display: block !important;
  min-height: auto !important;
}
.diagramSlot .caption {
  margin-top: 10px !important;
}

/* Make bokeh truly full-bleed: neutralize siteShade overlays */
#siteShade {
  background: transparent !important;
}
#siteShade::before,
/* Connect Module: stack the two diagrams vertically for larger readability */
.connectModulePage .twoColWide {
  display: block !important;
}
.connectModulePage .twoColWide .diagramCard {
  margin: 18px 0 !important;
}
.connectModulePage .diagramImg {
  max-width: 1100px !important;
}

/* Who We Are: let the crew photo show through more (lighter overlay) */
.contentCard.crewBox::before {
  background: rgba(0,0,0,0.45) !important;
}
/* END EM2_CANONICAL_SITE_TWEAKS__V11_2026_02_04 */

/* EM2_CANONICAL_SITE_BG__V12_FULLBLEED_2026_02_04 */
/* Force the bokeh background to live on the document itself (html), not on any container */
html {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background-color: #020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background: transparent !important; /* let html show through */
}

/* Any outer wrappers must not paint an opaque sheet over the html background */
#siteShade,
.siteShade,
.pageShade,
.wrap,
.wrapper,
.site,
main {
  background: transparent !important;
}
#siteShade::before,
/* Prevent bokeh from being applied to containers (only the page background should have bokeh) */
.container,
.heroWrap,
.heroGlass,
.pageCard,
.card,
.contentCard {
  background-image: none !important;
}

/* Connect page: match product-page card shading explicitly */
.connectModulePage .pageCard,
.connectModulePage .card,
.connectModulePage .contentCard {
  background-color: rgba(2, 6, 23, 0.72) !important;
}
/* END EM2_CANONICAL_SITE_BG__V12_FULLBLEED_2026_02_04 */

/* EM2_BG_DEBUG_AND_FULLBLEED__V14_2026_02_04 */
/*
  DEBUG MODE:
  Set this to 1 temporarily to see which element is constraining the “visible bokeh”.
  Set to 0 when done.
*/
:root {
  --em2-debug: 0;
}

/* Hard-force full-bleed bokeh behind EVERYTHING */
html, body {
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
    url("/assets/bokeh-background.png") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Any wrapper should be transparent so the html/body background shows through */
#siteShade,
.siteShade,
.pageShade,
.wrap,
.wrapper,
.site,
main,
header,
footer,
section {
  background-color: transparent !important;
  background-image: none !important;
}

/* Kill pseudo overlays that could be painting a full-viewport dark layer */
#siteShade::before,
#siteShade::after,
body::before,
body::after {
  content: none !important;
  display: none !important;
}

/* Product-card shading baseline (consistent across all product pages) */
.contentCard,
.pageCard,
.card {
  background-color: rgba(2, 6, 23, 0.72) !important;
}

/* Connect: ensure its main card uses same shading */
.connectModulePage .contentCard,
.connectModulePage .pageCard,
.connectModulePage .card {
  background-color: rgba(2, 6, 23, 0.72) !important;
}

/* DEBUG OUTLINES — makes the constraining element obvious in the browser */
@media (min-width: 1px) {
  #siteShade { outline: calc(var(--em2-debug) * 2px) solid rgba(255, 0, 0, 0.8) !important; }
  main       { outline: calc(var(--em2-debug) * 2px) solid rgba(0, 255, 0, 0.8) !important; }
  .container { outline: calc(var(--em2-debug) * 2px) solid rgba(0, 128, 255, 0.8) !important; }
  .pageCard,
  .card,
  .contentCard { outline: calc(var(--em2-debug) * 2px) solid rgba(255, 255, 0, 0.8) !important; }
}
/* END EM2_BG_DEBUG_AND_FULLBLEED__V14_2026_02_04 */

/* EM2_FULLBLEED_CONTAINER_FIX__V15_2026_02_04 */
/* The bokeh is on html/body; containers must NOT paint the page background */
.container {
  background: transparent !important;
  background-image: none !important;
}

/* main exists on some pages; ensure it never affects background/shading */
main {
  background: transparent !important;
  background-image: none !important;
}

/* Keep shading where it belongs: on the cards, not the container */
.pageCard,
.card,
.contentCard {
  background-color: rgba(2, 6, 23, 0.68) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* Slightly relax the global darkening so bokeh reads outside the container */
html, body {
  background-image:
    linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.62)),
    url("/assets/bokeh-background.png") !important;
}
/* END EM2_FULLBLEED_CONTAINER_FIX__V15_2026_02_04 */

/* EM2_BOKEH_FULLBLEED__V16_2026_02_04 */
/*
  Goal:
  - Bokeh is the *page* background (full-bleed).
  - Full-width chrome (header/nav/main wrappers) must be transparent so bokeh shows outside the centered container.
  - Make bokeh "larger" (zoomed in) vs cover.
*/

/* Force bokeh background on html/body with a slight zoom so it reads outside the container */
html, body {
  background-color: #020617 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.58)),
    url("/assets/bokeh-background.png") !important;
  background-size: 140% auto !important;         /* <— bigger than cover */
  background-position: center -120px !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The container should never paint the page background */
.container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Full-width chrome (most common "bokeh looks constrained" cause) */
header, .site-nav, .siteNav, .topbar, nav, main, footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
header::before, header::after,
.site-nav::before, .site-nav::after,
main::before, main::after {
  content: none !important;
  display: none !important;
}

/* If any global shade wrapper exists, it must not paint an opaque layer */
#siteShade, .siteShade, .pageShade {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}


/* Keep shading on cards only (so content remains readable) */
.pageCard, .card, .contentCard {
  background-color: rgba(2, 6, 23, 0.68) !important;
}

/* END EM2_BOKEH_FULLBLEED__V16_2026_02_04 */

/* EM2_KILL_PAGE_OVERLAYS__V17_2026_02_04 */
/*
  You observed: bokeh is large enough but appears “covered” outside the container.
  This is almost always a full-viewport pseudo-element overlay.
  Disable all likely page-level ::before/::after overlays.
*/
html::before, html::after,
body::before, body::after,
.bg::before, .bg::after,
body.bg::before, body.bg::after,


/* Kill common fixed scrim layers if present */
.overlay, .shade, .scrim, .pageOverlay, .bgOverlay {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* END EM2_KILL_PAGE_OVERLAYS__V17_2026_02_04 */

/* EM2_REMOVE_SCROLL_SCRIM__V20_2026_02_04 */
/* Remove any page-level scrim/overlay that appears as a shaded band and scrolls away */
html::before, html::after,
body::before, body::after,
.bg::before, .bg::after,
body.bg::before, body.bg::after,
main::before, main::after,


main,
#siteShade {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* END EM2_REMOVE_SCROLL_SCRIM__V20_2026_02_04 */

/* EM2_KILL_SITESHADE_SCROLL_LAYER__V21_2026_02_04 */
/*
  Fix: remove the "top shaded layer that scrolls away".
  Cause: #siteShade is a real DOM wrapper on most pages and was painting a gradient via ::before.
  Cards already provide shading, so #siteShade must be fully transparent and have no overlays.
*/
#siteShade {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#siteShade::before,
/* END EM2_KILL_SITESHADE_SCROLL_LAYER__V21_2026_02_04 */

/* EM2_NAVBAR_NO_SCRIM__V21_2026_02_04 */
/*
  Goal:
  - Remove the full-width dark/blur band at the top.
  - Cards already provide readability shading; nav should not paint a page-wide scrim.
*/
.site-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* END EM2_NAVBAR_NO_SCRIM__V21_2026_02_04 */

/* EM2_FINAL_KILL_SITESHADE_SCRIM__V22_2026_02_04 */
/*
  Definitive fix: remove the scrolling top scrim.
  Cause: #siteShade::before creates an absolute full-area overlay with a top-to-bottom gradient.
  This block must be LAST so it wins over any earlier/legacy patches.
*/
html body #siteShade::before,
html body #siteShade::after,
body #siteShade::before,
body #siteShade::after,
#siteShade::before,
#siteShade {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* END EM2_FINAL_KILL_SITESHADE_SCRIM__V22_2026_02_04 */

/* EM2_REMOVE_SCROLLING_SHADE_BAND__V23_2026_02_04 */
/*
  Deterministic fix for the “wide shaded band at the top that scrolls away”.

  Cause (in this file): #siteShade::before is an absolute full-area gradient overlay.
  Because it’s absolute inside #siteShade, it scrolls with content and appears as a moving top scrim.

  Solution:
  1) Disable #siteShade::before/#siteShade::after entirely.
  2) Optionally relax the global fixed overlay (body.bg::before) since cards already provide shading.
*/

/* 1) Kill the scrolling overlay band */
#siteShade::before,
/* Ensure wrapper itself paints nothing */
#siteShade {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 2) Relax (or remove) the global fixed overlay.
      If you want NO global overlay, set rgba(..., 0.00). */
/* END EM2_REMOVE_SCROLLING_SHADE_BAND__V23_2026_02_04 */

/* EM2_PURGE_SCRIMS__V25_2026_02_04 */
/* Definitively disable any page-level scrim layers (cards provide shading). */
#siteShade::before,
#siteShade::after,
body.bg::before,

/* END EM2_PURGE_SCRIMS__V25_2026_02_04 */

/* EM2_PURGE_SCRIMS__V26_2026_02_04 */
/* Definitively disable any remaining scrim pseudo-elements if reintroduced later. */
#siteShade::before,
#siteShade::after,
body.bg::before,

/* END EM2_PURGE_SCRIMS__V26_2026_02_04 */

/* EM2_KILL_TOP_SCROLL_SCRIMS__V28B_2026_02_04 */
/*
  Fix: remove the full-width shaded band at the top that scrolls away.
  Deterministic approach: disable the known scrim sources via highest-priority overrides.
*/

/* Kill hero-area scrolling overlays */
.heroWrap::before,
.hero::before,
.hero-bokeh::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Remove the global fixed overlay (cards already provide shading) */


/* Ensure navbar isn't painting a top scrim */
.site-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* END EM2_KILL_TOP_SCROLL_SCRIMS__V28B_2026_02_04 */

/* EM2_REMOVE_HOME_HERO_SCRIMS__V29_2026_02_04 */
/* Final override: ensure hero section cannot reintroduce a scrolling scrim band */
.heroWrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
.heroWrap::before,
.hero::before {
  content: none !important;
  display: none !important;
}
/* END EM2_REMOVE_HOME_HERO_SCRIMS__V29_2026_02_04 */

/* EM2_KILL_HOME_HERO_SCROLL_BAND__V30_2026_02_04 */
/*
  Fix the wide shaded band at the top that scrolls away.
  Root cause in this CSS: .heroWrap paints its own background (gradient + bokeh) and has ::before overlay;
  .hero also has a ::before overlay.
  We want ONLY the global bokeh (html/body) + card shading.
*/

/* Home hero must NOT paint any background (shorthand!) */
.heroWrap {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Kill hero overlays that add a scrolling top scrim */
.heroWrap::before,
.hero::before,
.hero-bokeh::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
/* END EM2_KILL_HOME_HERO_SCROLL_BAND__V30_2026_02_04 */

/* EM2_DISABLE_HERO_BOKEH__V31_2026_02_04 */
/* Home no longer uses the hero-bokeh wrapper. Keep this as a safety net. */
.hero-bokeh {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
.hero-bokeh::before {
  content: none !important;
  display: none !important;
}
/* END EM2_DISABLE_HERO_BOKEH__V31_2026_02_04 */

/* EM2_DIAG_HERO_BAND_OFF__V32_2026_02_04 */
/*
  Diagnostic:
  Disable ALL hero-area painting to prove the scrolling band source.
  If the band disappears, we will re-enable ONLY the hero card shading (heroGlass) next.
*/
.heroWrap,
.hero,
.heroInner,
.heroGlass {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}
/* END EM2_DIAG_HERO_BAND_OFF__V32_2026_02_04 */

/* EM2_CANONICAL_BG_SINGLE_SOURCE__V34_2026_02_04 */
/*
  Canonical background rules (single source of truth):
  - ONLY html/body paint the bokeh background (full-bleed, fixed)
  - .bg paints NOTHING (body has class="bg" on all pages; it must not create a 2nd bokeh)
  - Remove/neutralize any page-level scrims; cards already provide readability shading
*/

html, body {
  min-height: 100%;
  background-color: #0b0f14 !important;
  background-image:
    radial-gradient(1200px 700px at 50% 10%, rgba(10, 20, 40, 0.35), transparent 55%),
    url("/assets/bokeh-background.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center -120px !important;
}

/* body.bg exists on all pages; it must NOT paint another background */
.bg {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Ensure wrappers don’t paint a top band */
header, main, footer, .site-nav, .heroWrap, .hero-bokeh {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Ensure hero overlay pseudos can’t reintroduce scrims */
.heroWrap::before, .hero::before, .hero-bokeh::before {
  content: none !important;
  display: none !important;
}

/* END EM2_CANONICAL_BG_SINGLE_SOURCE__V34_2026_02_04 */

/* EM2_HARD_CLAMP_BG__V35_2026_02_04 */
/*
  v35 HARD CLAMP:
  Goal: eliminate “2nd bokeh” and the scrolling top shade band by preventing any element other than html/body
  from painting background images/gradients/overlays.

  We then explicitly restore ONLY the intentional per-card backgrounds:
  - crew-background.png (Who We Are card)
  - timeline.png (Looking Ahead card)

  Also fix: top-nav “Products” label not white (button.nav-dd-btn uses .nav-link styling).
*/

/* 1) Prevent ANY non-page element from painting a background (image/gradient/color) */
*:not(html):not(body),
*:not(html):not(body)::before,
*:not(html):not(body)::after {
  background-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 2) Keep card readability shading (cards should still be dark) */
.pageCard, .card, .contentCard, .heroGlass {
  background-color: rgba(2, 6, 23, 0.68) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* 3) Restore crew card background (Who We Are) */
.contentCard.crewBox::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("/assets/crew-background.png") !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.contentCard.crewBox > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 4) Restore timeline streak inside Looking Ahead card */
.contentCard.timelineBg::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 220px !important;
  background-image: url("/assets/timeline.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.contentCard.timelineBg > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 5) NAV: ensure “Products” (dropdown button) uses white like other top links */
.site-nav .nav-link,
.site-nav .nav-dd-btn {
  color: rgba(255,255,255,0.92) !important;
}
.site-nav .nav-link:hover,
.site-nav .nav-dd-btn:hover {
  color: #ffffff !important;
}

/* END EM2_HARD_CLAMP_BG__V35_2026_02_04 */

/* EM2_SINGLE_BG_NO_GRADIENTS_FIXED__V36_2026_02_04 */
/*
  Deterministic background reset:
  - ONE bokeh image only (no gradients = no “top shade band”)
  - fixed attachment (so nothing “scrolls away”)
  - full-bleed cover
*/
html, body {
  background-color: #0b0f14 !important;
  background-image: url("/assets/bokeh-background.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center -140px !important; /* crops some empty top */
}
/* Ensure body.bg never paints a second background */
body.bg, .bg {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
/* END EM2_SINGLE_BG_NO_GRADIENTS_FIXED__V36_2026_02_04 */

/* EM2_GLOBAL_DIM_AND_CARD_STANDARD__V37_2026_02_04 */
/*
  Add subtle global dimming (fixed, non-scrolling) + standardize card/container shading.

  Notes:
  - Global dim lives behind content (z-index:0) and above the page background.
  - Body is placed above it (z-index:1).
  - Cards get consistent dark glass shading; specialized card backgrounds (crew/timeline)
    remain via their ::before layers behind card content.
*/

/* 1) Global dimming overlay (fixed, will NOT scroll) */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.22);
  z-index: 0;
}

/* Ensure page content sits above the global dim overlay */
body {
  position: relative;
  z-index: 1;
}

/* 2) Standardize all “card” containers to the same readable shading */
.pageCard,
.contentCard,
.card,
.heroGlass,
.diagramCard,
.featureCard,
.valueCard,
.productCard {
  background-color: rgba(2, 6, 23, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Keep card internals above any card background pseudo-elements */
.pageCard > *,
.contentCard > *,
.card > *,
.heroGlass > * {
  position: relative;
  z-index: 1;
}

/* END EM2_GLOBAL_DIM_AND_CARD_STANDARD__V37_2026_02_04 */

/* EM2_TITLE_CARDS_AND_CREW_OVERLAY__V38_2026_02_04 */
/* 1) Header/title cards: consistent padding & spacing */
.heroHeaderCard {
  padding: 18px 18px !important;
  margin: 10px 0 16px 0 !important;
}
.sectionHeadingCard {
  display: inline-block !important;
  padding: 10px 14px !important;
  margin: 0 0 14px 0 !important;
}

/* 2) Who We Are crew image: darken crew photo beneath text (overlay on top of image) */
.contentCard.crewBox::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.42) !important; /* adjust darker/lighter if desired */
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Ensure text stays above both ::before (image) and ::after (darken overlay) */
.contentCard.crewBox > * {
  position: relative !important;
  z-index: 1 !important;
}
/* END EM2_TITLE_CARDS_AND_CREW_OVERLAY__V38_2026_02_04 */