/* ============================================================
   THE TECH DIPLOMAT — Hero "Meridian"
   Replaces .hero-full / .hero-video / .hero-overlay styles.
   Pairs with snippets/hero.html and js/atlas.js
   ============================================================ */

.hero-meridian {
  position: relative;
  min-height: 100dvh;
  margin-top: -80px;          /* sit under the fixed 80px masthead */
  padding-top: 80px;
  display: flex;
  align-items: center;
  background: var(--paper);
  overflow: hidden;
}

/* The map sits behind the text, anchored right on desktop */
.meridian {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.meridian .graticule { stroke: var(--map-line); stroke-width: 0.6; opacity: 0.5; fill: none; }
.meridian .arc {
  stroke: var(--teal);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  /* dash values set by js/atlas.js for the draw-on animation */
}
.meridian .node { fill: var(--ink-2); }
.meridian .node-origin { fill: var(--seal); }
.meridian .node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-inner .kicker { margin-bottom: 1.4rem; }

.hero-inner h1 {
  max-width: 16ch;
  margin: 0 0 1.4rem;
}

.hero-inner .dek { margin: 0 0 2.4rem; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* Soften map behind text on smaller screens so type stays primary */
@media (max-width: 900px) {
  .meridian { opacity: 0.45; }
  .hero-inner h1 { max-width: 14ch; }
}

@media (max-width: 600px) {
  .hero-meridian { min-height: 92dvh; }
  .hero-actions { gap: 1.1rem; }
}