.its-geo2__map-wrap { position: relative; max-width: 900px; margin: var(--its-space-3) auto 8px; }
.its-geo2__map { width: 100%; height: auto; display: block; }

.its-geo2__marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  background: var(--its-orange); border: 2px solid rgba(232,136,36,0.45);
  box-shadow: 0 0 0 3px rgba(232,136,36,0.18); padding: 0;
  transition: transform .12s;
}
.its-geo2__marker--core {
  width: 30px; height: 30px; background: rgba(255,255,255,0.22);
  border: 2px solid var(--its-orange); box-shadow: 0 0 0 5px rgba(232,136,36,0.14);
}
.its-geo2__marker:hover { transform: translate(-50%, -50%) scale(1.25); }

/* out-of-market client cities — small dots (legend: Other client cities) */
.its-geo2__dot {
  position: absolute; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--its-orange); opacity: 0.75;
  border: 0; padding: 0; cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.its-geo2__dot:hover { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }

.its-geo2__popup {
  position: absolute; z-index: 5; min-width: 170px;
  background: var(--its-white); border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 12px 34px rgba(4,70,108,0.25); transform: translate(-20%, -100%);
  text-align: left;
}
.its-geo2__popup-city { font-family: var(--its-font-heading); font-weight: 600; font-size: 17px; color: var(--its-black); }
.its-geo2__popup-note { font-size: 12.5px; color: var(--its-grey); margin: 2px 0 10px; }
.its-geo2__popup-row { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; color: var(--its-grey); border-top: 1px solid var(--its-light-grey); padding-top: 8px; }
.its-geo2__popup-row strong { color: var(--its-black); font-size: 15px; }

.its-geo2__legend { display: flex; justify-content: center; gap: 34px; margin-top: 18px; font-size: 13.5px; color: var(--its-grey); }
.its-geo2__legend-item { display: inline-flex; align-items: center; gap: 9px; }
.its-geo2__legend-ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--its-orange); background: rgba(232,136,36,0.08); }
.its-geo2__legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--its-orange); opacity: .75; }
.its-geo2__hint { text-align: center; font-size: 12.5px; color: var(--its-grey); margin: 8px 0 0; }

.its-geo2__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: var(--its-space-4) auto 0; }
.its-geo2__metric { background: var(--its-band); border-radius: var(--its-radius); text-align: center; padding: 34px 20px; }
.its-geo2__value { font-family: var(--its-font-heading); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; color: var(--its-navy); }
.its-geo2__caption { margin-top: 10px; color: var(--its-grey); font-size: var(--its-body); }
.its-geo2__source { text-align: center; font-size: 12.5px; color: var(--its-grey); margin: 26px 0 0; }

@media (max-width: 599px) { .its-geo2__metrics { grid-template-columns: 1fr; gap: 14px; } .its-geo2__legend { flex-direction: column; align-items: center; gap: 8px; } }

/* ============================================================
   Locations-page variant — rich location card + tiles grid.
   Everything below only renders when a location has an address
   (has_rich) or show_tiles is on; the home instance is untouched.
   ============================================================ */

.its-geo2__stage { position: relative; }
@media (min-width: 1100px) { .its-geo2--rich .its-geo2__stage { min-height: 671px; } }

/* --- rich location card (Figma 1203:13150, 440x644) --- */
.its-geo2__card {
  position: absolute; right: 0; top: 14px; z-index: 6;
  width: 440px; max-width: 100%;
  border-radius: 24px; background: var(--its-navy); color: var(--its-white);
  overflow: hidden; text-align: left;
  padding: 200px 24px 24px;
  box-shadow: 0 24px 64px rgba(4,70,108,0.35);
}
.its-geo2__card:focus { outline: 2px solid var(--its-orange); outline-offset: 2px; }
.its-geo2__card-media { position: absolute; inset: 0; pointer-events: none; }
/* photo band: img frame spans y -44..744; photo = top 41.1% (Figma verbatim) */
.its-geo2__card-photo {
  position: absolute; left: -5.28%; right: -5.28%; top: -44px; height: 324px;
  background-size: cover; background-position: 50% 68%;
}
/* blurred navy ellipse (1203:13095: 639px at left -154, frame top 270 -> card top 226) */
.its-geo2__card-glow {
  position: absolute; left: -154px; top: 226px; width: 639px; height: 639px;
  border-radius: 50%; background: #005698; filter: blur(90px); opacity: 0.5;
}
/* photo->navy overlay — Figma 1203:13092: polygon-clipped 45% #0B162B tint + 28.5px backdrop blur; diagonal = card (0,104)->(440,266) */
.its-geo2__card-grad {
  position: absolute; left: -89px; top: 71px; width: 618px; height: 675px;
  overflow: hidden; pointer-events: none;
  -webkit-clip-path: polygon(0 0, 100% 33.74%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 33.74%, 100% 100%, 0 100%);
}
/* blurred duplicate of the card photo, aligned to the main photo layer (card: -23,-44 486x324 -> wrapper-relative) */
.its-geo2__card-grad-photo {
  position: absolute; left: 66px; top: -115px; width: 486px; height: 324px;
  background-size: cover; background-position: center;
  filter: blur(28.5px);
}
.its-geo2__card-grad-in { position: absolute; inset: 0; background: rgba(11, 22, 43, 0.45); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .its-geo2__card-grad { background: rgba(9, 26, 46, 0.85); }
}
.its-geo2__card-thumb {
  position: absolute; left: 23px; top: 82px; z-index: 2;
  width: 103px; height: 102px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--its-white);
}
.its-geo2__card-body { position: relative; z-index: 2; display: flex; flex-direction: column; }
.its-geo2__card-eyebrow { font-family: var(--its-font-body); font-size: 12px; line-height: 1.25; color: var(--its-orange); }
.its-geo2__card-tag {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--its-orange);
  border-radius: 90px; color: var(--its-white); font-family: var(--its-font-body);
  font-weight: 500; font-size: 10px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em;
  vertical-align: middle;
}
.its-geo2__card-city {
  font-family: var(--its-font-heading); font-weight: 600; font-size: 36px; line-height: 1.35;
  letter-spacing: -0.045em; text-transform: capitalize; color: var(--its-white); margin: 8px 0 16px;
}
.its-geo2__card-rows { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid #576775; padding-bottom: 16px; }
.its-geo2__card-row { display: flex; gap: 8px; align-items: flex-start; }
.its-geo2__card-ico { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.its-geo2__card-addr { font-size: 18px; line-height: 1.45; letter-spacing: -0.035em; color: #CDDAE2; }
.its-geo2__card-phone { font-size: 18px; line-height: 1.45; letter-spacing: -0.035em; color: var(--its-white); }
.its-geo2__card-phone:hover { color: var(--its-orange); }
.its-geo2__card-svc { padding-top: 16px; }
.its-geo2__card-svc-title { display: block; font-family: var(--its-font-body); font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--its-white); margin-bottom: 16px; }
.its-geo2__card-svc-list { list-style: none; margin: 0 0 16px; padding: 0; columns: 2; column-gap: 32px; }
.its-geo2__card-svc-list li {
  position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: 16px; line-height: 1.4; color: #C2D5E0; break-inside: avoid;
}
.its-geo2__card-svc-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--its-orange); filter: blur(1.7px);
}
.its-geo2__card-cta { align-self: flex-start; border-radius: 100px; }

/* --- location tiles grid (Figma 1203:6937) --- */
.its-geo2__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 8px; margin-top: 48px; }
.its-geo2__tile {
  display: flex; gap: 16px; align-items: flex-start; text-align: left;
  background: var(--its-white); border: 1px solid transparent; border-radius: 16px; padding: 16px;
  box-shadow: 0 4px 12px rgba(219,224,234,0.68); cursor: pointer;
  font-family: inherit; transition: transform .15s, box-shadow .15s;
}
.its-geo2__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(219,224,234,0.9); }
.its-geo2__tile-img { position: relative; flex: 0 0 auto; width: 64px; height: 64px; }
.its-geo2__tile-img > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.its-geo2__tile-badge {
  position: absolute; left: 36px; top: 36px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--its-white); border-radius: 50%;
  filter: drop-shadow(0 4px 6px rgba(219,224,234,0.68));
}
.its-geo2__tile-badge img { width: 20px; height: 18px; }
.its-geo2__tile-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.its-geo2__tile-city { font-family: var(--its-font-heading); font-weight: 500; font-size: 15px; line-height: 1.3; letter-spacing: -0.02em; color: var(--its-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.its-geo2__tile-phone { font-family: var(--its-font-body); font-size: 13px; line-height: 1.3; color: var(--its-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.its-geo2__tile.is-active { background: var(--its-navy); border-color: var(--its-navy); }
.its-geo2__tile.is-active .its-geo2__tile-city { color: var(--its-white); }
.its-geo2__tile.is-active .its-geo2__tile-phone { color: #CDDAE2; }
.its-geo2__tile.is-active .its-geo2__tile-badge { filter: none; }
/* USA wide tile */
.its-geo2__tile--usa { grid-column: span 2; align-items: center; justify-content: space-between; }
.its-geo2__tile--usa:hover .its-geo2__tile-city { color: var(--its-navy); }
.its-geo2__tile-usa-left { display: flex; gap: 16px; align-items: center; min-width: 0; }
.its-geo2__tile-usa-map { height: 58px; width: auto; flex: 0 0 auto; }
.its-geo2__tile-phone--usa { color: var(--its-orange); }
.its-geo2__tile-badge--usa { position: static; flex: 0 0 auto; }
/* The USA tile reuses `.its-geo2__tile-city` for its own (much longer) title, "USA - IT
   Support Across the USA" — the 12 real city names never approached the nowrap+ellipsis
   truncation width even at the new 1-column mobile breakpoint above, but this one still did
   ("USA - IT Support Across th..."). It is the only tile with this problem (one-off title,
   not a column of parallel short names that need to stay single-line for alignment), so
   letting just this title wrap is the targeted fix rather than loosening the rule for every
   city tile. */
.its-geo2__tile--usa .its-geo2__tile-city { white-space: normal; }

@media (max-width: 1099px) {
  .its-geo2__card { position: relative; top: 0; right: auto; margin: 24px auto 0; }
  .its-geo2__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .its-geo2__tile--usa { grid-column: span 3; }
}
@media (max-width: 699px) {
  .its-geo2__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .its-geo2__tile--usa { grid-column: span 2; flex-wrap: wrap; }
  .its-geo2__card { padding-top: 180px; }
  .its-geo2__card-photo { height: 290px; }
}
/* Below ~480px, 2 columns leaves each tile's text column only ~60-70px wide (icon + gap +
   padding already eat most of a half-width phone tile), so `.its-geo2__tile-city`/`-phone`'s
   own `white-space: nowrap` + ellipsis truncated real content hard ("Chicago" -> "Chica...",
   "(312) 300-7411" -> "(312) 3..." — reported on Contact, but this module is shared with
   /locations too, so the same truncation was already live there). Full width per tile at this
   breakpoint gives a full "San Francisco" / "(415) 329-4356" line comfortably; ellipsis stays
   in place as a safety net for a city name unusually long than anything in the current set. */
@media (max-width: 480px) {
  .its-geo2__tiles { grid-template-columns: 1fr; }
  .its-geo2__tile--usa { grid-column: span 1; }
}

/* --- responsive card: internals scale with card width via container units.
   Base: 440px card, 24px side padding -> content box 392px; 1cqw = 3.92px at design size. --- */
@supports (container-type: inline-size) {
  .its-geo2__card { container-type: inline-size; padding: 0 24px 24px; }
  .its-geo2__card-body { margin-top: 51.02cqw; }
  .its-geo2__card-photo { top: -11.22cqw; height: 82.65cqw; }
  .its-geo2__card-glow { left: -39.29cqw; top: 57.65cqw; width: 163.01cqw; height: 163.01cqw; }
  .its-geo2__card-grad { left: -22.70cqw; top: 18.11cqw; width: 157.65cqw; height: 172.19cqw; }
  .its-geo2__card-grad-photo { left: 16.84cqw; top: -29.34cqw; width: 123.98cqw; height: 82.65cqw; }
  .its-geo2__card-thumb { left: 5.87cqw; top: 20.92cqw; width: 26.28cqw; height: 26.02cqw; }
  .its-geo2__card-city { font-size: clamp(24px, 9.18cqw, 36px); }
  .its-geo2__card-addr, .its-geo2__card-phone { font-size: clamp(14px, 4.59cqw, 18px); }
}