@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');

.client-map-root{
  --gold:#c9a24b;
  --gold-soft:#e6c877;
  --text-hi:#f3efe6;
  --text-lo:#b9ad96;
  position:relative;width:100%;background:#050403;
  display:flex;align-items:center;justify-content:center;
  padding:4vh 3vw;font-family:'Inter',sans-serif;
}
#mapWrap{position:relative;width:min(96vw,1500px);aspect-ratio:2/1;}
#mapCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* pin: slightly bigger hit-area so it's easy to hover, dot itself stays the same visual size */
.pin{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);z-index:5;cursor:pointer;}
.pin .dot{position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;
  background:var(--gold-soft);box-shadow:0 0 8px 3px rgba(230,200,119,0.65);}

.lead{position:absolute;width:1px;border-left:1.5px dotted rgba(230,200,119,0.55);z-index:2;
  opacity:0;transition:opacity 0.25s ease;pointer-events:none;}

.cluster{position:absolute;transform:translateX(-50%);z-index:4;display:flex;
  flex-direction:column;align-items:center;
  opacity:0;transition:opacity 0.25s ease;pointer-events:none;}
.cluster.below{flex-direction:column-reverse;}

/* Show the line + card when: hovered, tapped (mobile), OR when the
   automatic showcase has picked this one (auto-active, added by JS on
   a ~2s cycle, runs independently of hover/tap). */
.pin:hover + .lead,
.pin:hover + .lead + .cluster,
.pin.tap-active + .lead,
.pin.tap-active + .lead + .cluster,
.pin.auto-active + .lead,
.pin.auto-active + .lead + .cluster,
.cluster:hover{
  opacity:1;
  pointer-events:auto;
}

.cluster .label{font-size:9.5px;letter-spacing:1.2px;color:var(--gold-soft);
  text-transform:uppercase;text-align:center;margin-bottom:5px;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);}
.cluster.below .label{margin-bottom:0;margin-top:5px;}
.cluster .card{width:78px;border-radius:6px;overflow:hidden;border:1px solid rgba(230,200,119,0.55);
  box-shadow:0 8px 20px rgba(0,0,0,0.6);background:#0c0b09;
  display:block;text-decoration:none;color:inherit;}
.cluster .card .img{width:100%;aspect-ratio:3/4;background-size:cover;background-position:center;
  position:relative;}
.cluster .card .img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.15) 55%, transparent 75%);}
.cluster .card .cap{position:absolute;left:5px;right:5px;bottom:5px;}
.cluster .card .name{font-family:'Playfair Display',serif;font-size:9px;font-weight:700;
  color:var(--text-hi);line-height:1.15;margin:0;}
.cluster .card .role{font-size:6.5px;color:var(--gold-soft);letter-spacing:0.3px;
  text-transform:uppercase;margin-top:2px;}

@media (max-width:700px){
  .cluster .card{width:52px;}
  .cluster .label{font-size:7.5px;}
  .cluster .card .name{font-size:7px;}
  .cluster .card .role{font-size:5.2px;}
}