:root{--sarova-red:#8f1724;--sarova-red-dark:#67101a;--champagne:#c7a15a;--ivory:#f3ead9;--warm-white:#fffaf0}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--ivory)}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;overflow:hidden}
.innovation-stage{width:100vw;height:100svh;display:grid;place-items:center;background:var(--ivory);overflow:hidden}

/* The entire approved artwork always remains visible. */
.artboard{position:relative;width:100vw;height:100svh;overflow:hidden;background:var(--ivory)}
.platform-background{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center center;user-select:none;-webkit-user-drag:none}

.platform-link{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--sarova-red);outline:none;transform:translate(-50%,-50%);transition:filter .2s ease;-webkit-tap-highlight-color:transparent}
.platform-link:hover,.platform-link:focus-visible{filter:drop-shadow(0 5px 9px rgba(111,16,26,.18))}

/* 30 percent smaller than the previous version. Coordinates remain tied to the approved artwork. */
.project-hub{left:56.4%;top:55.8%;width:clamp(82px,7.55vw,154px);min-height:clamp(88px,8.4vw,165px)}
.digitized-forms{left:75.1%;top:73.3%;width:clamp(82px,7.15vw,147px);min-height:clamp(92px,8.4vw,167px)}
.project-symbol,.forms-symbol{display:block;width:76%;aspect-ratio:1/1}
.project-symbol svg,.forms-symbol svg{width:100%;height:100%;overflow:visible}
.connector,.document,.approval-ring,.approval-check{fill:none;stroke:var(--sarova-red);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.connector{stroke-width:3;color:var(--sarova-red)}

/* Tiny constellation stars. Opacity changes only: no movement and no scaling. */
.star-dot,.single-star{fill:var(--champagne);stroke:var(--warm-white);stroke-width:2.5;transform-origin:center;filter:drop-shadow(0 0 4px rgba(199,161,90,.46));animation:starTwinkle 4.8s ease-in-out infinite}
.star-two{animation-delay:1.15s}.star-three{animation-delay:2.3s}.single-star{animation-delay:.65s}
@keyframes starTwinkle{0%,100%{opacity:.38}35%{opacity:1}62%{opacity:.58}82%{opacity:.85}}

.platform-label{margin-top:-4%;padding:6px 11px;color:var(--sarova-red);background:rgba(255,250,240,.82);border:1px solid rgba(143,23,36,.12);border-radius:999px;box-shadow:0 4px 10px rgba(90,55,30,.07);font-weight:800;font-size:clamp(9px,.72vw,14px);line-height:1;letter-spacing:.10em;white-space:nowrap;backdrop-filter:blur(4px)}
.mobile-launcher{display:none}

@media(prefers-reduced-motion:reduce){.star-dot,.single-star{animation:none!important;opacity:1!important}.platform-link{transition:none}}

/* iPads keep the exact map alignment with larger touch areas than the visible icons. */
@media(max-width:1024px){.project-hub{left:56.4%;top:55.8%;width:10.5vw;min-width:84px}.digitized-forms{left:75.1%;top:73.3%;width:10.2vw;min-width:82px}.platform-label{font-size:clamp(8px,.95vw,12px);padding:5px 9px}}

/* Portrait phones show the complete artwork and accessible launch buttons below it. */
@media(max-width:700px) and (orientation:portrait){
 body{overflow:auto}.innovation-stage{min-height:100svh;height:auto;display:flex;flex-direction:column;justify-content:center;padding:12px 0 max(18px,env(safe-area-inset-bottom));overflow:visible}
 .artboard{width:100vw;height:auto;aspect-ratio:2048/1263;overflow:hidden}.platform-background{object-fit:contain}.platform-link{display:none}
 .mobile-launcher{width:min(92vw,520px);margin:14px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
 .mobile-launcher a{min-height:70px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;color:#fff;text-decoration:none;text-align:center;background:linear-gradient(145deg,var(--sarova-red),var(--sarova-red-dark));border-radius:16px;box-shadow:0 8px 18px rgba(103,16,26,.16)}
 .mobile-launcher strong{font-size:13px}.mini-project{position:relative;width:30px;height:28px;display:block}.mini-project:before,.mini-project:after{content:"";position:absolute;background:rgba(255,255,255,.72);height:1.5px;transform-origin:left center}.mini-project:before{width:25px;left:4px;top:7px;transform:rotate(56deg)}.mini-project:after{width:25px;left:7px;top:21px;transform:rotate(-56deg)}
 .mini-project i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--champagne);border:1px solid #fff;animation:starTwinkle 4.8s ease-in-out infinite}.mini-project i:nth-child(1){left:12px;top:0}.mini-project i:nth-child(2){left:0;bottom:0;animation-delay:1.15s}.mini-project i:nth-child(3){right:0;bottom:0;animation-delay:2.3s}
 .mini-form{width:27px;height:33px;border:2px solid #fff;border-radius:4px;display:grid;place-items:center;font-weight:900;position:relative}.mini-form:before{content:"";position:absolute;width:6px;height:6px;background:var(--champagne);border:1px solid #fff;border-radius:50%;top:-8px;left:50%;transform:translateX(-50%);animation:starTwinkle 4.8s ease-in-out infinite}
}

/* ===== Final positioning, contrast, and full-screen fixes ===== */

/* Fill the viewport edge to edge. The approved artwork and overlays share the same canvas. */
.platform-background{
  object-fit:cover;
  object-position:center center;
}

/* Nairobi: gentle lower and centred adjustment. */
.project-hub{
  left:55.2%;
  top:58.8%;
  width:clamp(82px,7.55vw,154px);
  min-height:clamp(88px,8.4vw,165px);
}

/* Mombasa/Whitesands: positioned directly on the coastal strip. */
.digitized-forms{
  left:59.10%;
  top:37.00%;
  width:clamp(82px,7.15vw,147px);
  min-height:clamp(92px,8.4vw,167px);
}

/* Bright gold unit circles, retaining the approved circle shape. */
.star-dot,
.single-star{
  fill:#f6d889;
  stroke:#fff8df;
  stroke-width:3;
  filter:drop-shadow(0 0 8px rgba(246,216,137,.95));
  animation:visibleStarTwinkle 4.8s ease-in-out infinite;
}

.star-two{animation-delay:1.1s}
.star-three{animation-delay:2.2s}
.single-star{animation-delay:.55s}

/* Thin constellation lines remain visible without competing with the map. */
.connector{
  stroke:#8d6a32;
  stroke-width:2.4;
  opacity:.82;
}

@keyframes visibleStarTwinkle{
  0%,100%{opacity:.58;filter:drop-shadow(0 0 2px rgba(255,224,154,.30))}
  38%{opacity:1;filter:drop-shadow(0 0 9px rgba(255,224,154,.98))}
  68%{opacity:.70;filter:drop-shadow(0 0 4px rgba(255,224,154,.55))}
}

@media(prefers-reduced-motion:reduce){
  .star-dot,.single-star{animation:none!important;opacity:1!important}
}

/* Keep the corrected geographic placements on iPads and smaller landscape screens. */
@media(max-width:1024px){
  .project-hub{left:55.2%;top:58.8%;width:10.5vw;min-width:84px}
  .digitized-forms{left:59.10%;top:37.00%;width:10.2vw;min-width:82px}
}

/* ===== Approved branch dots only: existing layout and destinations untouched ===== */
/* All nine unit markers use one identical gold circle treatment. */
.star-dot,
.single-star,
.branch-dot{
  fill:#f6d889;
  background:#f6d889;
  stroke:#fff8df;
  border:3px solid #fff8df;
  stroke-width:3;
  filter:drop-shadow(0 0 8px rgba(246,216,137,.95));
  box-shadow:0 0 8px rgba(246,216,137,.95);
  animation:visibleStarTwinkle 4.8s ease-in-out infinite;
}

/* Make the Project Hub and Digitized Forms SVG circles the same visible size. */
.star-dot,.single-star{r:6px}

.branch-dot{
  position:absolute;
  z-index:3;
  width:12px;
  height:12px;
  margin-left:-6px;
  margin-top:-6px;
  border-radius:50%;
  pointer-events:none;
}

/* Positions copied from the centres of the user's red X marks. */
.branch-kisumu{left:39.65%;top:48.65%;animation-delay:.35s}
.branch-nakuru-one{left:46.44%;top:51.09%;animation-delay:1.05s}
.branch-nakuru-two{left:46.97%;top:53.11%;animation-delay:1.75s}
.branch-mara{left:43.95%;top:63.13%;animation-delay:2.45s}
.branch-shaba{left:70.9%;top:86.0%;animation-delay:3.15s}

@media(prefers-reduced-motion:reduce){
  .branch-dot{animation:none!important;opacity:1!important}
}

/* On portrait phones the map has no overlays; the existing mobile launcher remains unchanged. */
@media(max-width:700px) and (orientation:portrait){
  .branch-dot{display:none}
}