.nrt-earth-wrap {
  position: relative;
  width: 100%;
  min-height: var(--nrt-earth-height, 480px);
  overflow: hidden;
}

.nrt-earth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* pan-y keeps vertical page scrolling alive on touch screens; horizontal
     swipes still rotate the globe. */
  touch-action: pan-y;
  cursor: grab;
}

.nrt-earth-canvas:active {
  cursor: grabbing;
}

/* Scroll-story layout: sticky globe with waypoint sections scrolling past. */
.nrt-earth-story {
  position: relative;
}

.nrt-earth-story .nrt-earth-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
}

.nrt-earth-waypoints {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}

.nrt-earth-waypoint {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10vh 6vw;
}

.nrt-earth-waypoint--left {
  justify-content: flex-start;
}

.nrt-earth-waypoint--center {
  justify-content: center;
}

.nrt-earth-waypoint--right {
  justify-content: flex-end;
}

.nrt-earth-waypoint--vtop {
  align-items: flex-start;
}

.nrt-earth-waypoint--vcenter {
  align-items: center;
}

.nrt-earth-waypoint--vbottom {
  align-items: flex-end;
}

.nrt-earth-waypoint article {
  pointer-events: auto;
  max-width: 320px;
  background: var(--nrt-earth-box-bg, rgba(15, 23, 42, 0.82));
  border: 1px solid var(--nrt-earth-box-border, #334155);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(6px);
}

.nrt-earth-waypoint h3 {
  margin: 0 0 0.5rem;
  color: var(--nrt-earth-box-title, #22d3ee);
}

.nrt-earth-waypoint-body {
  color: var(--nrt-earth-box-text, #cbd5e1);
  font-size: 0.95rem;
  line-height: 1.5;
}

.nrt-earth-waypoint-body p {
  margin: 0 0 0.75rem;
  color: inherit;
}

.nrt-earth-waypoint-body p:last-child {
  margin-bottom: 0;
}

.nrt-earth-waypoint-cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  background: var(--nrt-earth-cta-bg, #22d3ee);
  color: var(--nrt-earth-cta-text, #0f172a);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.nrt-earth-waypoint-cta:hover,
.nrt-earth-waypoint-cta:focus {
  filter: brightness(1.12);
  color: var(--nrt-earth-cta-text, #0f172a);
  text-decoration: none;
}

/* On phones, anchor every waypoint box to the bottom center so it never
   covers the globe, and let it use the full width. */
@media (max-width: 640px) {
  .nrt-earth-waypoint,
  .nrt-earth-waypoint--left,
  .nrt-earth-waypoint--center,
  .nrt-earth-waypoint--right {
    justify-content: center;
  }

  .nrt-earth-waypoint,
  .nrt-earth-waypoint--vtop,
  .nrt-earth-waypoint--vcenter,
  .nrt-earth-waypoint--vbottom {
    align-items: flex-end;
    padding: 1.25rem 1rem 6vh;
  }

  .nrt-earth-waypoint article {
    max-width: 100%;
    width: 100%;
    padding: 1rem 1.15rem;
  }
}