/* Contact: the office grid, same card rhythm as .personas but four up on wide screens */
.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.office { padding: 28px; }
.office h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.office p { font-size: 15px; line-height: 1.65; color: var(--fg-2); }
@media (max-width: 960px) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .offices { grid-template-columns: minmax(0, 1fr); } }

/* The offices on a map. The land is a generated dot grid — `node tools/worldmap.mjs` writes
   assets/pages/contact/world.svg from Natural Earth's 110m land polygons — used here as a mask,
   so the colour comes from the site's tokens instead of being baked into the file. The map is
   decorative: every address is in the cards below it, so the figure is aria-hidden and its pins
   take no focus. Pin positions are the same equirectangular crop the generator prints. */
.world { position: relative; margin: 0 0 56px; }
.world-map { aspect-ratio: 1080 / 396; background: rgb(var(--ink) / .16);
  -webkit-mask: url(/assets/pages/contact/world.svg) center / contain no-repeat;
          mask: url(/assets/pages/contact/world.svg) center / contain no-repeat; }
.world-pins { position: absolute; inset: 0; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.pin-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgb(19 233 137 / .14), 0 0 20px 2px rgb(19 233 137 / .5);
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease); }
/* the ring that travels outwards, offset per pin so the six don't pulse in lockstep */
.pin-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid var(--accent); animation: pin-ping 3.4s ease-out infinite; }
.pin-sf .pin-dot::after { animation-delay: 0s }
.pin-boston .pin-dot::after { animation-delay: .55s }
.pin-london .pin-dot::after { animation-delay: 1.1s }
.pin-frankfurt .pin-dot::after { animation-delay: 1.65s }
.pin-ramat .pin-dot::after { animation-delay: 2.2s }
.pin-gurugram .pin-dot::after { animation-delay: 2.75s }
@keyframes pin-ping { 0% { transform: scale(1); opacity: .6 } 70%, 100% { transform: scale(3.4); opacity: 0 } }

.pin-name { position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12.5px;
  color: var(--fg-3); white-space: nowrap; transition: color .25s var(--ease, ease); }
/* London and Frankfurt are 29px apart on a 1200px map, so one label goes above the dot */
.pin.up .pin-name { top: auto; bottom: 14px; }

/* Point at an address and its pin answers. */
.offices-wrap:has(#o-sf:hover) .pin-sf .pin-dot,
.offices-wrap:has(#o-boston:hover) .pin-boston .pin-dot,
.offices-wrap:has(#o-london:hover) .pin-london .pin-dot,
.offices-wrap:has(#o-frankfurt:hover) .pin-frankfurt .pin-dot,
.offices-wrap:has(#o-ramat:hover) .pin-ramat .pin-dot,
.offices-wrap:has(#o-gurugram:hover) .pin-gurugram .pin-dot {
  transform: scale(1.5); box-shadow: 0 0 0 6px rgb(19 233 137 / .2), 0 0 28px 4px rgb(19 233 137 / .7); }
.offices-wrap:has(#o-sf:hover) .pin-sf .pin-name,
.offices-wrap:has(#o-boston:hover) .pin-boston .pin-name,
.offices-wrap:has(#o-london:hover) .pin-london .pin-name,
.offices-wrap:has(#o-frankfurt:hover) .pin-frankfurt .pin-name,
.offices-wrap:has(#o-ramat:hover) .pin-ramat .pin-name,
.offices-wrap:has(#o-gurugram:hover) .pin-gurugram .pin-name { color: var(--fg); }

@media (max-width: 860px) {
  /* the labels stop fitting between the pins long before the map stops being readable */
  .world { margin-bottom: 40px; }
  .pin-name { display: none; }
  .pin-dot { left: -4px; top: -4px; width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pin-dot::after { animation: none; opacity: 0 } }