/* Contact page: the offices map, engraved as a map plate on a certificate.
   Land is hatched in steel, offices are green marks, routes are great-circle arcs from Paramus. */
.map-plate{margin:64px 0 0;padding:10px;background:var(--ink-2);border:3px double rgba(143,160,196,.38);position:relative}
.map-plate::before{content:"";position:absolute;inset:4px;border:1px solid rgba(143,160,196,.14);pointer-events:none}
.offices-map{display:block;width:100%;height:auto;overflow:visible}
.map-plate + .offices{margin-top:48px}
/* Contact page: the map is the hero, wider than the text column, with the heading under it. */
.contact-page{padding:40px 0 96px}
.contact-page .map-plate{margin:0 0 48px;width:min(calc(100vw - 32px),1440px);margin-left:50%;translate:-50% 0}
.contact-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.contact-head .lede{margin-bottom:0}
.contact-head .cta-row{margin:0}

.map-grid{fill:none;stroke:#8fa0c4;stroke-width:.5;opacity:.16}
#map-hatch line{stroke:#8fa0c4;stroke-width:.7}
.map-land{fill:url(#map-hatch);stroke:#8fa0c4;stroke-width:.8;stroke-linejoin:round;opacity:.62}

.map-route{fill:none;stroke:var(--green-l);stroke-width:1.2;stroke-linecap:round;opacity:.85;
  stroke-dasharray:1;stroke-dashoffset:0}
.m-dot{fill:var(--green-l)}
.m-ring{fill:var(--ink-2);fill-opacity:.7;stroke:var(--green-l);stroke-width:1.1}
.m-outer{fill:none;stroke-width:.7}
.m-label{font-family:var(--sans);fill:#e6ebf5}
.m-name{font-size:15px;font-weight:650;letter-spacing:.005em}
.m-sub{font-size:12px;font-weight:500;fill:var(--on-ink-2);letter-spacing:.02em}
.m-label{paint-order:stroke;stroke:var(--ink-2);stroke-width:4px;stroke-linejoin:round}

/* One draw-in on load, from headquarters outward. */
@media (prefers-reduced-motion:no-preference){
  .map-route{animation:route-draw 1.8s cubic-bezier(.45,0,.2,1) .4s both}
  .r-hyderabad{animation-delay:.6s}
  .r-chennai{animation-delay:.8s}
  .r-london{animation-delay:.1s}
  .r-toronto{animation-delay:0s}
  .r-dubai{animation-delay:.3s}
  .r-pune{animation-delay:.5s}
  .office:not(.hq){animation:mark-in .5s ease-out 1.9s both}
}
@keyframes route-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mark-in{from{opacity:0}to{opacity:1}}

@media (max-width:640px){
  .map-plate{margin-top:44px;padding:6px}
  .contact-page{padding:20px 0 72px}
  .contact-page .map-plate{margin-top:0;margin-bottom:32px;width:calc(100vw - 16px)}
  .map-plate + .offices{margin-top:36px}
  .m-label{display:none}
  .map-route{stroke-width:2.2}
  .map-land{stroke-width:1.4}
  .m-dot{r:4.5px}
  .m-ring{r:8.5px;stroke-width:1.8}
  .hq .m-ring{r:15px}
  .hq .m-outer{r:22px;stroke-width:1.6}
  .hq .m-dot{r:7px}
}