/* HubUI-2026 Coverage Map: light variant of the animated US coverage map.
   Canvas colors are read from the custom properties below, so a page can retint
   the map from headHtml without touching module.js. */
.its-cmap {
  --its-cmap-ink: #022C45;
  --its-cmap-ink-rgb: 2, 44, 69;
  --its-cmap-accent: #E88824;
  --its-cmap-accent-rgb: 232, 136, 36;
  --its-cmap-line: rgba(2, 44, 69, .2);
}
.its-cmap__stage { position: relative; width: 100%; max-width: 860px; margin: 28px auto 0; }
.its-cmap__map { position: relative; width: 100%; aspect-ratio: 1000 / 620; }
.its-cmap__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.its-cmap__pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0;
}
.its-cmap__pin:focus-visible,
.its-cmap__seg button:focus-visible { outline: 3px solid var(--its-cmap-ink); outline-offset: 3px; }

.its-cmap__tip {
  position: absolute; z-index: 3; pointer-events: none; min-width: 13rem;
  transform: translate(-50%, calc(-100% - 18px));
  background: #fff; border: 1px solid rgba(var(--its-cmap-accent-rgb), .6); border-radius: 8px;
  padding: 10px 14px; box-shadow: 0 10px 30px rgba(var(--its-cmap-ink-rgb), .18);
  opacity: 0; transition: opacity .15s; text-align: left;
}
.its-cmap__tip.is-on { opacity: 1; }
.its-cmap__tip::after {
  content: ""; position: absolute; left: var(--arrow, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: #fff; border-right: 1px solid rgba(var(--its-cmap-accent-rgb), .6);
  border-bottom: 1px solid rgba(var(--its-cmap-accent-rgb), .6); transform: rotate(45deg);
}
.its-cmap__tip p { margin: 0; }
.its-cmap__tip-city { font-family: var(--its-font-heading); font-weight: 700; font-size: 16px; color: var(--its-cmap-ink); }
.its-cmap__tip-tag { margin-top: 3px !important; white-space: nowrap; color: #A85A0C; font-weight: 600; font-size: 15px; }
.its-cmap__tip-hq { margin-top: 5px !important; color: var(--its-grey); font-size: 14px; }

.its-cmap__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; color: var(--its-grey); font-size: 14px;
}
.its-cmap__legend { display: flex; gap: 18px; flex-wrap: wrap; }
.its-cmap__legend span { display: inline-flex; align-items: center; gap: 8px; }
.its-cmap__k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.its-cmap__k--o { background: var(--its-cmap-accent); box-shadow: 0 0 6px rgba(var(--its-cmap-accent-rgb), .7); }
.its-cmap__k--c { width: 7px; height: 7px; background: var(--its-cmap-ink); box-shadow: 0 0 0 3px rgba(56, 150, 220, .18); }
.its-cmap__k--t { width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--its-cmap-accent)); }

.its-cmap__ctrls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.its-cmap__seg { display: inline-flex; border: 1px solid var(--its-cmap-line); border-radius: 6px; overflow: hidden; }
.its-cmap__seg button {
  font-family: var(--its-font-body); font-weight: 600; font-size: 13px; line-height: 1.2;
  color: var(--its-cmap-ink); background: transparent; border: 0; padding: 8px 13px; cursor: pointer; min-height: 32px;
}
.its-cmap__seg button[aria-pressed="true"] { background: var(--its-cmap-ink); color: #fff; }
.its-cmap__seg button[aria-pressed="false"]:hover { background: rgba(var(--its-cmap-ink-rgb), .06); }

.its-cmap__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: var(--its-space-4, 48px) auto 0; }
.its-cmap__metric { background: var(--its-band); border-radius: var(--its-radius, 16px); text-align: center; padding: 34px 20px; }
.its-cmap__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-cmap__caption { margin-top: 10px; color: var(--its-grey); font-size: var(--its-body); }
@media (max-width: 599px) { .its-cmap__metrics { grid-template-columns: 1fr; gap: 14px; } }
.its-cmap__source { margin: 20px auto 0; max-width: 760px; text-align: center; color: var(--its-grey); font-size: 13px; }

/* dark variant (default): the canvas paints the US land mass navy; the section stays light.
   Only the tooltip needs dark styling here. */
.its-cmap--dark .its-cmap__tip { background: rgba(0, 19, 31, .94); border-color: rgba(232, 136, 36, .55); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.its-cmap--dark .its-cmap__tip::after { background: rgba(0, 19, 31, .94); }
.its-cmap--dark .its-cmap__tip-city { color: #fff; }
.its-cmap--dark .its-cmap__tip-tag { color: #E88824; }
.its-cmap--dark .its-cmap__tip-hq { color: #A9C3D6; }

@media (max-width: 767px) {
  .its-cmap__stage { margin-top: 20px; }
  .its-cmap__bar { justify-content: center; }
  .its-cmap__legend { justify-content: center; gap: 14px; }
  .its-cmap__tip { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .its-cmap__tip { transition: none; }
}

/* ===== location cards + tiles: ported from Client Geography (Locations page variant) ===== */
/* desktop: map left, the selected office card right; below 1100px the card stacks under the map */
.its-cmap--cards .its-cmap__layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: center; max-width: 1240px; margin: 28px auto 0; }
.its-cmap--cards .its-cmap__stage { margin: 0; max-width: none; }
.its-cmap--cards .its-cmap__card { position: relative; top: 0; right: auto; width: 100%; }
@media (max-width: 1099px) {
  .its-cmap--cards .its-cmap__layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .its-cmap--cards .its-cmap__card { max-width: 440px; margin: 0 auto; }
}
/* --- rich location card (Figma 1203:13150, 440x644) --- */
.its-cmap__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-cmap__card:focus { outline: 2px solid var(--its-orange); outline-offset: 2px; }
.its-cmap__card-media { position: absolute; inset: 0; pointer-events: none; }
/* photo band: img frame spans y -44..744; photo = top 41.1% (Figma verbatim) */
.its-cmap__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-cmap__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-cmap__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-cmap__card-grad-photo {
  position: absolute; left: 66px; top: -115px; width: 486px; height: 324px;
  background-size: cover; background-position: center;
  filter: blur(28.5px);
}
.its-cmap__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-cmap__card-grad { background: rgba(9, 26, 46, 0.85); }
}
.its-cmap__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-cmap__card-body { position: relative; z-index: 2; display: flex; flex-direction: column; }
.its-cmap__card-eyebrow { font-family: var(--its-font-body); font-size: 12px; line-height: 1.25; color: var(--its-orange); }
.its-cmap__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-cmap__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-cmap__card-rows { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid #576775; padding-bottom: 16px; }
.its-cmap__card-row { display: flex; gap: 8px; align-items: flex-start; }
.its-cmap__card-ico { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.its-cmap__card-addr { font-size: 18px; line-height: 1.45; letter-spacing: -0.035em; color: #CDDAE2; }
.its-cmap__card-phone { font-size: 18px; line-height: 1.45; letter-spacing: -0.035em; color: var(--its-white); }
.its-cmap__card-phone:hover { color: var(--its-orange); }
.its-cmap__card-svc { padding-top: 16px; }
.its-cmap__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-cmap__card-svc-list { list-style: none; margin: 0 0 16px; padding: 0; columns: 2; column-gap: 32px; }
.its-cmap__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-cmap__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-cmap__card-cta { align-self: flex-start; border-radius: 100px; }

/* --- location tiles grid (Figma 1203:6937) --- */
.its-cmap__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 8px; margin-top: 48px; }
.its-cmap__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-cmap__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(219,224,234,0.9); }
.its-cmap__tile-img { position: relative; flex: 0 0 auto; width: 64px; height: 64px; }
.its-cmap__tile-img > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.its-cmap__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-cmap__tile-badge img { width: 20px; height: 18px; }
.its-cmap__tile-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.its-cmap__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-cmap__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-cmap__tile.is-active { background: var(--its-navy); border-color: var(--its-navy); }
.its-cmap__tile.is-active .its-cmap__tile-city { color: var(--its-white); }
.its-cmap__tile.is-active .its-cmap__tile-phone { color: #CDDAE2; }
.its-cmap__tile.is-active .its-cmap__tile-badge { filter: none; }
/* USA wide tile */
.its-cmap__tile--usa { grid-column: span 2; align-items: center; justify-content: space-between; }
.its-cmap__tile--usa:hover .its-cmap__tile-city { color: var(--its-navy); }
.its-cmap__tile-usa-left { display: flex; gap: 16px; align-items: center; min-width: 0; }
.its-cmap__tile-usa-map { height: 58px; width: auto; flex: 0 0 auto; }
.its-cmap__tile-phone--usa { color: var(--its-orange); }
.its-cmap__tile-badge--usa { position: static; flex: 0 0 auto; }
/* The USA tile reuses `.its-cmap__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-cmap__tile--usa .its-cmap__tile-city { white-space: normal; }

@media (max-width: 1099px) {
  .its-cmap__card { position: relative; top: 0; right: auto; margin: 24px auto 0; }
  .its-cmap__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .its-cmap__tile--usa { grid-column: span 3; }
}
@media (max-width: 699px) {
  .its-cmap__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .its-cmap__tile--usa { grid-column: span 2; flex-wrap: wrap; }
  .its-cmap__card { padding-top: 180px; }
  .its-cmap__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-cmap__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-cmap__tiles { grid-template-columns: 1fr; }
  .its-cmap__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-cmap__card { container-type: inline-size; padding: 0 24px 24px; }
  .its-cmap__card-body { margin-top: 51.02cqw; }
  .its-cmap__card-photo { top: -11.22cqw; height: 82.65cqw; }
  .its-cmap__card-glow { left: -39.29cqw; top: 57.65cqw; width: 163.01cqw; height: 163.01cqw; }
  .its-cmap__card-grad { left: -22.70cqw; top: 18.11cqw; width: 157.65cqw; height: 172.19cqw; }
  .its-cmap__card-grad-photo { left: 16.84cqw; top: -29.34cqw; width: 123.98cqw; height: 82.65cqw; }
  .its-cmap__card-thumb { left: 5.87cqw; top: 20.92cqw; width: 26.28cqw; height: 26.02cqw; }
  .its-cmap__card-city { font-size: clamp(24px, 9.18cqw, 36px); }
  .its-cmap__card-addr, .its-cmap__card-phone { font-size: clamp(14px, 4.59cqw, 18px); }
}