/* static/css/globe.css */
.cta-hero{
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 0;
  border-bottom: 2px solid var(--red);
  background: linear-gradient(180deg, rgba(32,30,31,.20), rgba(32,30,31,.65));
}

.cta-hero .cta-title{
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
}

/* stack the headline above the globe and keep it centered */
.cta-hero .cta-stack{
  width: min(960px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 1.25rem;
}

/* Ensure the globe container always has a concrete size */
#globeVizCTA.globe-wrap{
  position: relative;
  width: min(960px, 100%);
  height: clamp(360px, 56vh, 640px);
  min-height: 320px;
  margin-inline: auto;
  border: 0;              /* removed box line */
  border-radius: 0;
  background: transparent;/* removed background so it blends with hero */
  overflow: hidden;
}

/* Make sure the injected WebGL canvas fills the container */
#globeVizCTA.globe-wrap > *,              /* any child the script adds */
#globeVizCTA.globe-wrap canvas{           /* renderer canvas */
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 991.98px){
  #globeVizCTA.globe-wrap{ height: clamp(320px, 48vh, 520px); }
}