/* ═══ 3D MAP — Telford Way, Mississauga ═════════════════════ */
.map3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;opacity:0;
  transition:opacity .6s var(--ease)}
.map3d.live iframe{opacity:1}
.map3d.live .map-plane,.map3d.live .map-note{display:none}
.map-note{position:absolute;left:50%;translate:-50% 0;bottom:18px;z-index:4;
  font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:7px 14px;border-radius:999px;white-space:nowrap}
.map3d{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/12;
  background:radial-gradient(120% 105% at 50% -10%,#F2F5F8,#E3E8ED 58%,#D5DBE2);
  box-shadow:var(--sh-l);perspective:1150px;perspective-origin:50% 40%}
.map-plane{position:absolute;left:50%;top:54%;width:720px;height:540px;margin:-270px 0 0 -360px;
  transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-24deg) scale(var(--ms,1));
  background:linear-gradient(160deg,#EAE7DF,#DEDACF);border-radius:20px;
  box-shadow:0 70px 90px -46px rgba(27,58,92,.55);
  transition:transform 1s var(--ease)}
.map3d:hover .map-plane{transform:rotateX(52deg) rotateZ(-20deg) scale(var(--ms,1))}
.map-plane::after{content:"";position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(70% 60% at 46% 40%,transparent,rgba(27,58,92,.09));pointer-events:none}

/* roads */
.rd{position:absolute;background:#F7F6F2;box-shadow:0 0 0 1px rgba(27,58,92,.05)}
.rd.main{background:#FBFAF7}
.rd.dash::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgba(201,151,63,.55) 0 16px,transparent 16px 30px)}
.grn{position:absolute;background:linear-gradient(160deg,#DCE5D6,#CEDAC6);border-radius:10px}

/* extruded blocks */
.bldg{position:absolute;transform-style:preserve-3d;transform:translateZ(var(--h));
  background:linear-gradient(150deg,#F6F2EA,#E7E0D3);box-shadow:0 0 0 1px rgba(27,58,92,.07)}
.bldg::before{content:"";position:absolute;left:0;top:100%;width:100%;height:var(--h);
  transform-origin:top center;transform:rotateX(-90deg);
  background:linear-gradient(#D3CABA,#BCB2A0)}
.bldg::after{content:"";position:absolute;left:100%;top:0;width:var(--h);height:100%;
  transform-origin:left center;transform:rotateY(90deg);
  background:linear-gradient(90deg,#E0D8C9,#C8BEAC)}
.bldg.navy{background:linear-gradient(150deg,#2C5479,#1B3A5C)}
.bldg.navy::before{background:linear-gradient(#16304C,#0E2237)}
.bldg.navy::after{background:linear-gradient(90deg,#1F4064,#132B45)}
/* the office */
.bldg.here{background:linear-gradient(150deg,#F0CE8C,#D9A64B);
  box-shadow:0 0 0 1px rgba(156,113,28,.5),0 0 44px rgba(201,151,63,.75)}
.bldg.here::before{background:linear-gradient(#C89536,#A2761F)}
.bldg.here::after{background:linear-gradient(90deg,#D3A040,#AB7D22)}

/* pin — counter-rotated so it faces the viewer */
.pin{position:absolute;left:333px;top:214px;transform-style:preserve-3d;
  transform:translateZ(96px) rotateZ(24deg) rotateX(-57deg);
  animation:hover3d 3.4s ease-in-out infinite}
@keyframes hover3d{0%,100%{transform:translateZ(96px) rotateZ(24deg) rotateX(-57deg)}
                   50%{transform:translateZ(118px) rotateZ(24deg) rotateX(-57deg)}}
.pin svg{filter:drop-shadow(0 10px 14px rgba(27,58,92,.45))}
.pin-shadow{position:absolute;left:336px;top:246px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,58,92,.35),transparent 68%)}

/* overlays */
.map-chip{position:absolute;left:20px;top:20px;z-index:4;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:16px;padding:12px 16px;box-shadow:var(--sh-l)}
.map-chip .i{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(165deg,var(--gold-pale),var(--gold-pale-2));color:var(--gold-deep)}
.map-chip .t{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--navy-deep);line-height:1.3}
.map-chip .s{font-size:11.5px;color:var(--text-3)}
.map-dir{position:absolute;right:20px;bottom:20px;z-index:4;padding:12px 20px;font-size:11.5px}
@media (max-width:1080px){.map-plane{--ms:.82}}
@media (max-width:760px){.map-plane{--ms:.6}.map-chip{left:14px;top:14px;padding:10px 13px}
  .map-chip .s{display:none}.map-dir{right:14px;bottom:14px}}