/* contact.css — closing CTA + real-world details.
   Phone/address blocks need explicit direction handling: a Latin-digit phone
   number inside Arabic text will bidi-scramble without isolation. */

.contact { background: var(--surface); }
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 880px) { .contact__grid { grid-template-columns: 1.1fr .9fr; } }

.contact__title { font-size: var(--step-4); max-width: 18ch; }
.contact__lede  { color: var(--muted); font-size: var(--step-1); margin-block-start: 1rem; max-width: 46ch; }

.contact__list { display: grid; gap: 1.4rem; margin: 0; padding: 0; }
.contact__item { display: grid; gap: .3rem; }
.contact__label {
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
[lang|="ar"] .contact__label { text-transform: none; letter-spacing: 0; }
.contact__value { font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.contact__value:hover { color: var(--brand-text); }

/* Isolate LTR runs (phone, email, latin address) inside RTL paragraphs so the
   bidi algorithm cannot reorder them. `unicode-bidi: isolate` + dir="ltr". */
.u-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }