.kenya-map-timeline {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  isolation: isolate;
  background: #070e1a;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kenya-map-timeline.history__kenya {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.history__kenya .map-section {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.history__kenya .kenya-svg {
  width: 100%;
  height: 100%;
  max-height: none;
  opacity: 0.58;
}

.history__kenya .map-visual {
  position: relative;
  width: min(88vw, 780px, 92svh);
  height: min(88vw, 780px, 92svh);
  aspect-ratio: 1;
  flex: none;
}

.history__kenya .markers {
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
}

.history__kenya .hint {
  display: none;
}
.kenya-map-timeline .spacer {
      height: 40vh;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.4;
      font-size: 0.95rem;
      letter-spacing: 1px;
    }

    .map-section {
      height: 100vh;
      width: 100%;
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse at center, #0d1a2e 0%, #070e1a 70%);
    }

    .map-wrapper {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .kenya-svg {
      width: min(88vw, 780px);
      height: auto;
      opacity: 0.78;
      filter: drop-shadow(0 0 40px rgba(40, 100, 180, 0.15));
    }

    .kenya-svg path {
      fill: #152a48;
      stroke: #3d6fa0;
      stroke-width: 1.5;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .markers {
      position: absolute;
      width: min(88vw, 780px);
      height: min(88vw, 780px);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .marker {
      position: absolute;
      transform: translate(-50%, -50%);
      text-align: center;
      opacity: 0;
      will-change: opacity, transform;
    }

    /* MAIN RED */
    .marker.main .circle {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #ff2d55;
      margin: 0 auto 6px;
      position: relative;
      box-shadow:
        0 0 8px 2px rgba(255, 45, 85, 0.7),
        0 0 20px 4px rgba(255, 45, 85, 0.35),
        0 0 40px 8px rgba(255, 45, 85, 0.15);
    }

    .marker.main .ring,
    .marker.main .ring2 {
      position: absolute;
      top: 50%; left: 50%;
      width: 15px; height: 15px;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: none;
    }
    .marker.main .ring {
      border: 2px solid rgba(255, 45, 85, 0.8);
      opacity: 0.7;
    }
    .marker.main .ring2 {
      border: 1.5px solid rgba(255, 45, 85, 0.4);
      opacity: 0.5;
    }

    .marker.main .label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-shadow:
        0 0 10px rgba(255, 45, 85, 0.35),
        0 2px 8px rgba(0,0,0,0.9);
    }

    .marker.main.active .circle {
      animation: glowPulse 2.2s ease-in-out infinite;
    }
    @keyframes glowPulse {
      0%, 100% {
        box-shadow:
          0 0 8px 2px rgba(255, 45, 85, 0.7),
          0 0 20px 4px rgba(255, 45, 85, 0.35),
          0 0 40px 8px rgba(255, 45, 85, 0.15);
        transform: scale(1);
      }
      50% {
        box-shadow:
          0 0 14px 4px rgba(255, 45, 85, 0.9),
          0 0 32px 10px rgba(255, 45, 85, 0.5),
          0 0 60px 16px rgba(255, 45, 85, 0.25);
        transform: scale(1.12);
      }
    }

    .marker.main.active .ring {
      animation: expandRing 2.4s ease-out infinite;
    }
    .marker.main.active .ring2 {
      animation: expandRing 2.4s ease-out infinite 0.8s;
    }
    @keyframes expandRing {
      0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
      100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; }
    }

    /* SUB WHITE */
    .marker.sub .circle {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e8f2ff;
      margin: 0 auto 4px;
      position: relative;
      box-shadow: 0 0 7px 2px rgba(200, 230, 255, 0.5);
    }

    .marker.sub .pulse {
      position: absolute;
      top: 50%; left: 50%;
      width: 8px; height: 8px;
      border: 1.5px solid rgba(200, 230, 255, 0.7);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.6;
      pointer-events: none;
    }

    .marker.sub.active .circle {
      animation: whitePulse 1.8s ease-in-out infinite;
    }
    .marker.sub.active .pulse {
      animation: expandPulse 1.8s ease-out infinite;
    }

    @keyframes whitePulse {
      0%, 100% {
        box-shadow: 0 0 5px 1px rgba(200, 230, 255, 0.45);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 0 12px 3px rgba(200, 230, 255, 0.75);
        transform: scale(1.25);
      }
    }
    @keyframes expandPulse {
      0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
      100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
    }

    .marker.sub .label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.3px;
      opacity: 0.9;
      text-shadow: 0 1px 6px rgba(0,0,0,0.9);
    }

    /* ===== POSITIONS (10 counties) ===== */
    /* Coast */
    .mombasa            { top: 78%; left: 69.4%; }
    .mombasa-nyali      { top: 74%; left: 76%; }
    .mombasa-likoni     { top: 82%; left: 68%; }
    .mombasa-bamburi    { top: 72%; left: 74%; }
    .mombasa-mvita      { top: 79.3%; left: 69.4%; }

    .malindi            { top: 68%; left: 78%; }
    .malindi-watamu     { top: 70.2%; left: 77.9%; }
    .malindi-gede       { top: 66%; left: 76%; }
    .malindi-mambrui    { top: 64%; left: 79%; }

    /* Lake / West */
    .kisumu             { top: 52%; left: 22%; }
    .kisumu-milimani    { top: 48%; left: 26%; }
    .kisumu-kondele     { top: 56.8%; left: 18.9%; }
    .kisumu-nyalenda    { top: 55%; left: 25%; }
    .kisumu-manyatta    { top: 49%; left: 19%; }

    .kakamega           { top: 42%; left: 18%; }
    .kakamega-lurambi   { top: 42.7%; left: 19.5%; }
    .kakamega-mumias    { top: 47.3%; left: 16.3%; }
    .kakamega-malava    { top: 39.2%; left: 22.6%; }

    .eldoret            { top: 36%; left: 28%; }
    .eldoret-langas     { top: 39%; left: 26%; }
    .eldoret-kapsoya    { top: 33%; left: 30%; }
    .eldoret-huruma     { top: 38%; left: 31%; }

    /* Rift / Central */
    .nakuru             { top: 45%; left: 36%; }
    .nakuru-lanet       { top: 41%; left: 40%; }
    .nakuru-rongai      { top: 48%; left: 33%; }
    .nakuru-bahati      { top: 42%; left: 34%; }

    .nyeri              { top: 48%; left: 48%; }
    .nyeri-karatina     { top: 46%; left: 52%; }
    .nyeri-otaya        { top: 50%; left: 45%; }
    .nyeri-mukurweini   { top: 52%; left: 49%; }

    .nairobi            { top: 56%; left: 46%; }
    .nairobi-westlands  { top: 52%; left: 42%; }
    .nairobi-eastlands  { top: 59%; left: 50%; }
    .nairobi-kibera     { top: 59%; left: 43%; }
    .nairobi-cbd        { top: 54%; left: 47%; }
    .nairobi-kasarani   { top: 51%; left: 49%; }

    .thika              { top: 52%; left: 52%; }
    .thika-ruiru        { top: 54%; left: 55%; }
    .thika-juja         { top: 50%; left: 54%; }
    .thika-gatundu      { top: 49%; left: 50%; }

    /* North / East */
    .meru               { top: 42%; left: 58%; }
    .meru-igupe         { top: 40%; left: 61%; }
    .meru-nkubu         { top: 45%; left: 56%; }
    .meru-mau           { top: 39%; left: 55%; }

    .garissa            { top: 55%; left: 72%; }
    .garissa-dadaab     { top: 52%; left: 76%; }
    .garissa-modogashe  { top: 58%; left: 70%; }
    .garissa-balambala  { top: 50%; left: 69%; }

    .kitale             { top: 30%; left: 24%; }
    .kitale-endebess    { top: 27%; left: 22%; }
    .kitale-kiminini    { top: 33%; left: 27%; }
    .kitale-saboti      { top: 29%; left: 28%; }

    .progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #ff2d55, #ff8aa0);
      width: 0%;
      box-shadow: 0 0 12px rgba(255, 45, 85, 0.5);
    }

    .hint {
      position: absolute;
      top: 4%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.72rem;
      opacity: 0.35;
      letter-spacing: 2px;
      text-transform: uppercase;
    }