/* contact-us.html, page-only rules. Shared tokens, nav, menu, cover grammar, buttons, the .form panel and the review
   wall are main.css; this file carries the Contact page's own chapters. No build step; the head/intro grammar is
   about.css's router block, copied. */

/* 01 · COVER: the pin. A dotted plate with range rings and radials on the right of the frame, the office as a gold
   point with two slow rings, enquiries arriving along four radials as travelling gold dashes. CSS keyframes only;
   the whole sheet drifts. Phones centre the plate behind the H1 at lower opacity; reduced motion holds it still. */
.cover--contact{background:#070707}
.cover__pin{position:absolute;top:50%;right:6vw;width:min(58vw,880px);height:auto;transform:translateY(-54%);overflow:visible;animation:pinShow 2.2s var(--ease) .1s both}
.pin__drift{animation:pinDrift 60s var(--io) infinite alternate;transform-origin:560px 470px}
.pin__ring{transform-origin:560px 470px;animation:pinRing 4.2s var(--io) infinite;opacity:0}
.pin__ring--2{animation-delay:2.1s}
.pin__in{stroke-dasharray:44 400;stroke-dashoffset:44;opacity:0;animation:pinIn 7.2s linear infinite}
.pin__in--2{animation-delay:1.8s}
.pin__in--3{animation-delay:3.6s}
.pin__in--4{animation-delay:5.4s}
@keyframes pinShow{from{opacity:0;transform:translateY(-52%) scale(.97)}to{opacity:1;transform:translateY(-54%)}}
@keyframes pinDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-14px,10px) scale(1.03)}}
@keyframes pinRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(5);opacity:0}}
@keyframes pinIn{0%{stroke-dashoffset:44;opacity:0}5%{opacity:1}40%{stroke-dashoffset:-378;opacity:1}41%{opacity:0}100%{stroke-dashoffset:-378;opacity:0}}
.cover--contact .cover__wash{background:linear-gradient(180deg,rgba(7,7,7,.55) 0%,rgba(7,7,7,.05) 26%,rgba(7,7,7,.05) 50%,rgba(7,7,7,.94) 100%),linear-gradient(90deg,rgba(7,7,7,.96) 0%,rgba(7,7,7,.7) 34%,rgba(7,7,7,.15) 56%,rgba(7,7,7,0) 72%)}
@media (max-width:900px){
  .cover__pin{right:-4vw;top:40%;width:112vw;opacity:.55;transform:translateY(-50%)}
  .pin__label{display:none}
  .cover--contact .cover__wash{background:linear-gradient(180deg,rgba(7,7,7,.6) 0%,rgba(7,7,7,.15) 24%,rgba(7,7,7,.55) 52%,rgba(7,7,7,1) 72%)}
}

/* 02 · THE FORM: copy on the left, the audit band's dark .form panel on paper to the right; three direct lines under the copy. */
.ask{position:relative;background:var(--paper);padding:var(--section) 0;border-top:1px solid var(--line)}
.ask__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,540px);gap:clamp(32px,6vw,110px);align-items:start}
.ask__copy .h2--xl{max-width:11ch}
.ask__lead{max-width:46ch;font-weight:300;color:var(--ink-2);margin-top:22px;font-size:17px;line-height:1.55}
.ask__direct{margin-top:clamp(32px,4vh,48px);border-top:1px solid var(--line-2);max-width:520px}
.ask__direct li{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.ask__direct span{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.ask__direct a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);transition:color .3s;overflow-wrap:anywhere}
.ask__direct a:hover,.ask__direct a:focus-visible{color:var(--gold-text)}
.ask .form{position:sticky;top:calc(var(--nav-h) + 24px)}
.field__area{min-height:140px;padding:13px 16px;resize:vertical;line-height:1.5}

/* 03 · THE OFFICE: the address plate on the left (dot lattice, gold glow, the address set large, Directions), four
   facts on the right (phone, email, socials, the Google card across both columns). */
.office{position:relative;background:var(--black);color:#fff;padding:var(--section) 0;overflow:hidden}
.office::before{content:"";position:absolute;right:-10%;top:-20%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(227,186,28,.09),transparent 70%);pointer-events:none}
.office>.wrap{position:relative}
.office__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:end}
.office__head .h2--xl{max-width:11ch}
.office__intro{max-width:44ch;font-weight:300;color:rgba(255,255,255,.76);padding-bottom:8px}
.office__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,64px)}
.office__plate{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:26px;min-height:420px;padding:clamp(26px,3.2vw,48px);border-radius:24px;background:var(--black-2);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.office__plate::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 10%,rgba(227,186,28,.22),transparent 70%);pointer-events:none}
.office__plate::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(217,207,184,.16) 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask:radial-gradient(70% 70% at 85% 15%,#000,transparent 80%);mask:radial-gradient(70% 70% at 85% 15%,#000,transparent 80%);pointer-events:none}
.office__plate>*{position:relative;z-index:1}
.office__kicker{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.office__addr strong{display:block;font-weight:800;font-size:clamp(34px,3.8vw,60px);letter-spacing:-.04em;line-height:.98;color:#fff}
.office__addr span{display:block;margin-top:10px;font-size:18px;font-weight:300;color:rgba(255,255,255,.72)}
.office__facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);align-content:start}
.fact{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,26px);border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.fact i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.fact>a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.015em;color:#fff;transition:color .3s;overflow-wrap:anywhere}
.fact>a:hover,.fact>a:focus-visible{color:var(--gold)}
.fact--wide{grid-column:1/-1}
.fact--g{grid-column:1/-1;padding:0;border:0;background:none}
.fact--g .gscore{width:100%}
.office__social{display:flex;gap:8px}
.office__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;transition:border-color .3s,background .3s,color .3s}
.office__social a:hover,.office__social a:focus-visible{border-color:var(--gold);background:rgba(227,186,28,.12);color:var(--gold)}
.office__social svg{width:18px;height:18px;fill:currentColor}

@media (max-width:1024px){
  .ask__grid{grid-template-columns:1fr;gap:48px}
  .ask__copy .h2--xl,.office__head .h2--xl{max-width:none}
  .ask .form{position:static}
  .office__head{grid-template-columns:1fr;align-items:start}
  .office__grid{grid-template-columns:1fr}
  .office__plate{min-height:340px}
}
@media (max-width:640px){
  .ask__direct li{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .office__facts{grid-template-columns:1fr}
  .office__plate{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  .cover__pin,.pin__drift{animation:none}
  .pin__ring{animation:none;opacity:.5;transform:scale(1.6)}
  .pin__in{animation:none;opacity:.6;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.35}
}