/* ==========================================================================
   WHERE WE ARE — the office, drawn rather than embedded.

   The production CSP allows frames only from Cloudflare Turnstile and images
   only from 'self' and data:, so a Maps iframe or a static map image would
   render on the dev server and vanish in production. The streets are drawn
   in SVG instead and the link opens the real thing.
   ========================================================================== */

.place {
  position: relative;
  z-index: 2;
  background: var(--haq-ground, #061019);
  color: #f4efe4;
  padding-block: clamp(56px, 9vh, 100px);
  padding-inline: clamp(20px, 4vw, 48px);
}
.place-in { max-width: 1080px; margin-inline: auto; }

.place-head small {
  display: block;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--record-amber, #f49f2e);
}
[dir="rtl"] .place-head small { letter-spacing: 0; }
.place-head h2 {
  margin: 14px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.2rem);
  line-height: 1.06;
  max-width: 20ch;
  text-wrap: balance;
}
.place-head p {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: clamp(1rem, 2.3vw, 1.1rem);
  line-height: 1.65;
  color: rgba(244, 239, 228, .78);
}

.place-body {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
  margin-top: clamp(26px, 4.5vh, 44px);
}
@media (min-width: 820px) {
  .place-body { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
}

.place-map { margin: 0; }
.place-map svg { display: block; width: 100%; height: auto; border-radius: 3px; background: rgba(244,239,228,.03); }
.place-block { fill: rgba(244,239,228,.05); stroke: rgba(244,239,228,.1); stroke-width: 1; }
.place-road { stroke: rgba(244,239,228,.22); stroke-width: 6; stroke-linecap: round; }
.place-pin-ring { fill: none; stroke: var(--record-amber, #f49f2e); stroke-width: 1.4; opacity: .75; }
.place-pin { fill: var(--record-amber, #f49f2e); }
.place-map figcaption {
  margin-top: 12px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,239,228,.5);
}
[dir="rtl"] .place-map figcaption { letter-spacing: 0; }

/* the pin breathes, so the eye finds the office before it reads the address */
@media (prefers-reduced-motion: no-preference) {
  .place.in .place-pin-ring { animation: place-pulse 3s cubic-bezier(.25, .8, .25, 1) infinite; transform-origin: 110px 88px; }
}
@keyframes place-pulse {
  0% { transform: scale(.8); opacity: 0; }
  40% { opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.place-detail dl { margin: 0; display: grid; gap: clamp(16px, 2.6vh, 24px); }
.place-detail dt {
  font-family: Manrope, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,239,228,.5);
}
[dir="rtl"] .place-detail dt { letter-spacing: 0; }
.place-detail dd {
  margin: 8px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-size: clamp(1.15rem, 2.8vw, 1.4rem);
  line-height: 1.35;
  color: #f4efe4;
}

.place-go {
  display: inline-block;
  margin-top: clamp(22px, 3.6vh, 32px);
  padding: 13px 26px;
  min-height: 48px;
  border-radius: 999px;
  background: var(--record-amber, #f49f2e);
  color: #1a1006;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 22px;
  text-decoration: none;
  touch-action: manipulation;
  transition: background .25s ease;
}
.place-go:hover { background: #ffb85c; }
.place-go:focus-visible { outline: 2px solid #f4efe4; outline-offset: 3px; }

/* Entrance, gated. */
@media (prefers-reduced-motion: no-preference) {
  html.place-js .place-head > *,
  html.place-js .place-map,
  html.place-js .place-detail { opacity: 0; translate: 0 16px; }
  html.place-js .place.in .place-head > *,
  html.place-js .place.in .place-map,
  html.place-js .place.in .place-detail {
    opacity: 1;
    translate: 0 0;
    transition: opacity .55s ease, translate .6s cubic-bezier(.25, .8, .25, 1);
  }
  html.place-js .place.in .place-map { transition-delay: .1s; }
  html.place-js .place.in .place-detail { transition-delay: .18s; }
}