/* =========================================================================
   The shared map of the United States (about page and our-work page).
   A black stage with a dotted map tilted in depth. Client cities: gold pins that drop in and pulse.
   Leading design markets: outlined dots. One spotlight label travels from city to city.
   Motion: transform and opacity only, paused off screen ([data-anim-pause]), calm under reduced motion.
   ========================================================================= */
.um { min-width: 0; max-width: 100%; margin: 0; padding: clamp(16px, 2.6vw, 34px); border-radius: 28px; color: #fff; isolation: isolate;
  background: radial-gradient(70% 80% at 50% 38%, #1d1a13 0%, #0e0e0e 55%, #090909 100%); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); }
.um-stage { position: relative; perspective: 1400px; padding: clamp(10px, 2vw, 26px) clamp(4px, 1.4vw, 18px) clamp(4px, 1vw, 12px); }
.um-glow { position: absolute; left: 15%; right: 15%; top: 20%; bottom: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(214, 174, 104, .14), transparent); }
.um-plane { position: relative; aspect-ratio: 1000 / 560; transform: rotateX(20deg); transform-origin: 50% 75%; transform-style: preserve-3d; }
.um-dots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.um-dots path { fill: none; stroke: rgba(214, 174, 104, .46); stroke-width: 3.8; stroke-linecap: round; }
.um-pin { position: absolute; width: 0; height: 0; }
/* client pins */
.um-drop { position: absolute; left: -11px; top: -27px; width: 22px; height: 27px; color: var(--gold-night, #d6ae68); filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .7));
  transform-origin: 50% 100%; opacity: 0; transform: rotateX(-20deg) translate3d(0, -18px, 0) scale(.8);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(var(--n) * 70ms); }
.um-drop svg { width: 100%; height: 100%; display: block; }
.um.in .um-drop { opacity: 1; transform: rotateX(-20deg) translate3d(0, 0, 0) scale(1); }
.um-ring { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(214, 174, 104, .75); opacity: 0;
  animation: um-pulse 3.2s ease-out infinite; animation-delay: calc(var(--n) * -260ms); }
.um-ring--b { animation-delay: calc(var(--n) * -260ms - 1.6s); }
@keyframes um-pulse { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
.um-pin--client.is-hot .um-drop { transform: rotateX(-20deg) translate3d(0, -7px, 0) scale(1.28); transition-delay: 0s; }
/* leading design markets */
.um-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .04); opacity: 0; transform: scale(.4); transition: opacity .6s ease, transform .7s cubic-bezier(.2, 1.4, .4, 1), border-color .4s, background .4s;
  transition-delay: calc(var(--n) * 70ms); }
.um.in .um-dot { opacity: 1; transform: none; }
.um-pin--market.is-hot .um-dot { transform: scale(1.45); border-color: var(--gold-night, #d6ae68); background: rgba(214, 174, 104, .3); transition-delay: 0s; }
/* the spotlight label (two of them cross-fade as it moves) */
.um-spot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 5; padding: 9px 14px 10px; border-radius: 12px; white-space: nowrap; pointer-events: none;
  background: rgba(13, 13, 13, .95); border: 1px solid rgba(214, 174, 104, .48); box-shadow: 0 20px 40px -16px #000, 0 0 30px -12px rgba(214, 174, 104, .55);
  --tx: -50%; --ty: calc(-100% - 36px); --rx: -20deg; transform: translate(var(--tx), var(--ty)) rotateX(var(--rx)); opacity: 0; transition: opacity .45s ease; }
.um-spot.is-on { opacity: 1; }
/* near the top the label hangs below its pin; near the sides it shifts inward, so it never leaves the map */
.um-spot.is-below { --ty: 22px; }
.um-spot.is-below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.um-spot.is-left { --tx: -14%; } .um-spot.is-left::after { left: 14%; }
.um-spot.is-right { --tx: -86%; } .um-spot.is-right::after { left: 86%; }
.um-spot::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: rgba(13, 13, 13, .95);
  border-right: 1px solid rgba(214, 174, 104, .48); border-bottom: 1px solid rgba(214, 174, 104, .48); }
.um-spot b { display: block; font-size: .86rem; font-weight: 600; letter-spacing: -.005em; }
.um-spot span { display: block; margin-top: 2px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; color: var(--gold-night, #d6ae68); }
.um-spot.is-market span { color: rgba(255, 255, 255, .62); }
/* corner brackets */
.um-br { position: absolute; width: 22px; height: 22px; border: 0 solid var(--gold-night, #d6ae68); opacity: .8; pointer-events: none; }
.um-br--tl { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; border-top-left-radius: 6px; }
.um-br--tr { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; border-top-right-radius: 6px; }
.um-br--bl { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; border-bottom-left-radius: 6px; }
.um-br--br { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; border-bottom-right-radius: 6px; }
/* the key: two lists of cities */
.um-key { margin-top: clamp(16px, 2vw, 24px); padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 40px; }
.um-k { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-night, #d6ae68); }
.um-sw { width: 10px; height: 10px; border-radius: 50%; }
.um-sw--client { background: var(--gold-night, #d6ae68); box-shadow: 0 0 0 3px rgba(214, 174, 104, .2); }
.um-sw--market { border: 1.5px solid rgba(255, 255, 255, .8); }
.um-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.um-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .72); font: inherit; font-size: .78rem; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.um-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-night, #d6ae68); }
.um-chip--market i { background: none; border: 1.2px solid rgba(255, 255, 255, .8); }
.um-chip:hover, .um-chip.is-hot { border-color: rgba(214, 174, 104, .7); color: #fff; background: rgba(214, 174, 104, .12); }
.um-chip:focus-visible { outline: 2px solid var(--gold-night, #d6ae68); outline-offset: 2px; }
@media (max-width: 760px) {
  .um { border-radius: 20px; padding: 12px 12px 18px; }
  .um-plane { transform: rotateX(14deg); }
  .um-drop { left: -8px; top: -20px; width: 16px; height: 20px; }
  .um-ring { left: -11px; top: -11px; width: 22px; height: 22px; }
  .um-dot { left: -4px; top: -4px; width: 8px; height: 8px; }
  .um-spot { padding: 7px 10px 8px; --ty: calc(-100% - 26px); --rx: -14deg; }
  .um-spot b { font-size: .74rem; } .um-spot span { font-size: .62rem; max-width: 190px; }
  .um-key { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .um-group { min-width: 0; }
  .um-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .um-chips::-webkit-scrollbar { display: none; }
  .um-chips li { flex: none; }
  .um-chip { min-height: 40px; font-size: .74rem; }
  .um-spot.is-below { --ty: 18px; }
  .um-br { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .um-ring { animation: none; } .um-drop, .um-dot { transition: none; } }