@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{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%);z-index:3;}
.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;}

.cluster{position:absolute;transform:translateX(-50%);z-index:4;display:flex;
  flex-direction:column;align-items:center;pointer-events:none;}
.cluster.below{flex-direction:column-reverse;}
.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;}
.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;}
}