/* ============================================================
   Contact page interaction layer — shared by EN + AR.
   Loads after page-enhance.css; only adds/overrides contact bits.
   ============================================================ */

/* ---------- Hero: living gradient field ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(520px 320px at 18% 20%,rgba(14,123,196,.16),transparent 62%),
    radial-gradient(480px 300px at 82% 12%,rgba(14,165,165,.14),transparent 62%),
    radial-gradient(520px 340px at 55% 92%,rgba(79,91,213,.12),transparent 64%);
  animation:cxDrift 18s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(14,123,196,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(14,123,196,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);
}
@keyframes cxDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-24px,0) scale(1.06)}}

.hero .eyebrow-pill .dot{animation:cxPulse 2.4s ease-in-out infinite}
@keyframes cxPulse{0%,100%{box-shadow:0 0 0 0 rgba(14,123,196,.45)}60%{box-shadow:0 0 0 8px rgba(14,123,196,0)}}

.hero .btn-primary,.hero .btn-ghost{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s,color .25s}
.hero .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(14,123,196,.9)}
.hero .btn-ghost:hover{transform:translateY(-2px)}

/* ---------- World clock strip ---------- */
.cx-clocks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.cx-clock{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  font-size:13px;font-weight:600;color:var(--ink-soft);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s;
}
.cx-clock:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-md)}
.cx-clock b{color:var(--ink);font-weight:700}
.cx-clock .cx-time{font-variant-numeric:tabular-nums;color:var(--primary);font-weight:800;direction:ltr;unicode-bidi:isolate}
.cx-clock .cx-state{width:7px;height:7px;border-radius:50%;background:var(--ink-muted);flex-shrink:0}
.cx-clock.open .cx-state{background:var(--green,#1a9e54);box-shadow:0 0 0 3px rgba(26,158,84,.18)}

/* ============================================================
   LAYOUT — the form and the office cards are one system.
   The offices column is taller than the form, so the form is
   pinned (sticky) instead of stretched: no dead space, and the
   two columns read as deliberate rather than mismatched.
   ============================================================ */
.contact-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:22px;align-items:start}
/* Only pin when the viewport is actually tall enough to show the card. */
@media(min-width:1025px) and (min-height:860px){
  .cform{position:sticky;top:96px}
}
@media(max-width:1024px){
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ---------- Form card ---------- */
.cform{
  border-radius:20px;padding:clamp(26px,3vw,36px);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(14,123,196,.045),transparent 190px),
    #fff;
  box-shadow:0 20px 44px -34px rgba(10,60,100,.5);
}
.cform h2{font-size:clamp(21px,2.4vw,25px);font-weight:800;letter-spacing:-.4px;margin-bottom:7px}
.cform .sub{font-size:14px;line-height:1.6;color:var(--ink-soft);margin-bottom:22px;max-width:46ch}
.topic-label{margin-bottom:10px}
.topic-row{margin-bottom:20px}
.frow{gap:12px;margin-bottom:12px}

/* ---------- Office cards: same visual family as the form ---------- */
.offices{gap:12px}
.office{
  border-radius:16px;padding:20px 22px;border:1px solid var(--line);background:#fff;
  box-shadow:0 14px 32px -30px rgba(10,60,100,.5);
}
.office .olabel{font-size:10px;letter-spacing:1.2px;margin-bottom:5px}
.office h3{font-size:16px;font-weight:800;letter-spacing:-.2px;margin:0}
.office .ohead{align-items:center;gap:12px;margin-bottom:12px}
.office .oic{width:34px;height:34px;border-radius:10px}
.office .oic svg{width:17px;height:17px}
.office .addr{font-size:13px;line-height:1.55;margin-bottom:10px}
.office-link{font-size:14px}

/* Copy button: quiet by default, revealed on hover/focus */
.copy-btn{
  inset-inline-end:16px;top:16px;padding:5px 10px;font-size:11px;border-radius:7px;
  opacity:0;transform:translateY(-3px);
  transition:opacity .22s,transform .22s,border-color .2s,color .2s,background .2s;
}
.office:hover .copy-btn,.copy-btn:focus-visible,.copy-btn.done{opacity:1;transform:none}
@media(hover:none){.copy-btn{opacity:1;transform:none}}

/* Response strip closes the column */
.resp-strip{margin-top:4px;border-radius:14px;padding:14px 18px;font-size:13px}

/* ---------- Form: progress + polish ---------- */
.cform{transition:box-shadow .3s,border-color .3s}
.cform:focus-within{border-color:rgba(14,123,196,.35);box-shadow:0 22px 50px -34px rgba(10,60,100,.55)}
.cx-progress{position:absolute;inset-inline-start:0;top:0;height:3px;width:100%;background:var(--line);border-radius:3px;overflow:hidden}
.cx-progress i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#0E7BC4,#0EA5A5);transition:width .4s cubic-bezier(.2,.8,.2,1)}

.topic-chip{position:relative;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s,background .2s,box-shadow .2s}
.topic-chip:active{transform:scale(.96)}
.topic-chip.active{box-shadow:0 10px 22px -12px rgba(14,123,196,.9)}

.field input,.field textarea{transition:border-color .2s,background .2s,box-shadow .25s}
.field.ok input,.field.ok textarea{border-color:rgba(26,158,84,.5)}
.field.ok::after{
  content:"";position:absolute;inset-inline-end:14px;top:16px;width:16px;height:16px;border-radius:50%;
  background:var(--green,#1a9e54) no-repeat center/9px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  animation:cxPop .3s cubic-bezier(.2,1.5,.4,1);
}
@keyframes cxPop{0%{transform:scale(0)}100%{transform:scale(1)}}
.send-btn{position:relative;overflow:hidden}
.send-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:cxSweep 5s ease-in-out infinite}
@keyframes cxSweep{0%{left:-45%}55%,100%{left:120%}}

/* ---------- Office cards ---------- */
.office{overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.office::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s;
  background:radial-gradient(300px 200px at var(--mx,50%) var(--my,50%),rgba(14,123,196,.10),transparent 68%);
}
.office:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(10,60,100,.6);border-color:rgba(14,123,196,.28)}
.office:hover::before{opacity:1}
.office>*:not(.copy-btn){position:relative}
.office .oic{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.office:hover .oic{transform:scale(1.08) rotate(-4deg);background:var(--primary);color:#fff}

.cx-office-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}
.cx-map{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  text-decoration:none;padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,color .22s,background .22s;
}
.cx-map svg{width:13px;height:13px}
.cx-map:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.cx-local{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.cx-local .cx-time{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:800;direction:ltr;unicode-bidi:isolate}
.cx-local .cx-state{width:7px;height:7px;border-radius:50%;background:var(--ink-muted)}
.cx-local.open .cx-state{background:var(--green,#1a9e54)}

/* ---------- Motion / a11y ---------- */
.cform :focus-visible,.office :focus-visible,.cx-clock:focus-visible,.cx-map:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){
  .hero::before,.send-btn::after,.hero .eyebrow-pill .dot,.field.ok::after{animation:none!important}
  .office,.cx-clock,.cx-map,.topic-chip,.hero .btn-primary,.hero .btn-ghost{transition:none!important}
  .office:hover,.cx-clock:hover,.cx-map:hover{transform:none}
}
@media(max-width:560px){
  .cx-clocks{gap:8px}
  .cx-clock{font-size:12px;padding:8px 13px}
  .cx-office-foot{gap:10px}
}