/* Arabic (right-to-left) pages. Loaded after site.css only when <html dir="rtl">. */
/* Arabic text: Alexandria (self-hosted, OFL), drawn at 80% of the page's font sizes so it sits
   with the Latin brand font. Change size-adjust to scale all Arabic text at once. */
@font-face {
  font-family: 'Alexandria NUR';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 80%;
  src: url(/assets/fonts/alexandria-arabic.woff2) format('woff2-variations');
  
}
/* Latin words (NUR NEXT, project names) keep the brand font; Arabic falls through to Alexandria. */
:root { --font-sans: 'Plus Jakarta Sans', 'Alexandria NUR', system-ui, sans-serif; }

/* Arabic letters join, so no tracking or case transforms; tall glyphs need more leading. */
body, body * { letter-spacing: 0 !important; text-transform: none !important; }
h1, h2, h3 { line-height: 1.3 !important; }
#top h1 { line-height: 1.22 !important; }
#top [data-line] { padding-bottom: .08em; }
p, li, [data-field] label, details p { line-height: 1.9; }

/* Things that stay left-to-right: code-like text, emails, phone numbers. */
[data-terminal], [data-term], input[type=email], input[type=tel], a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }
input[type=email], input[type=tel], a[href^="mailto:"] { text-align: right; }
[data-ideas] { line-height: 1 !important; padding-top: .18em; margin-block: -.3em -.12em; }
[data-heroin] { line-height: 1.3 !important; }

/* Mirror physical positions. */
/* Home hero: the shade sits behind the text (now on the right) and the glow follows the 3D mark (now on the left). */
[data-hero-shade] { background: linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 46%, color-mix(in srgb, var(--bg) 30%, transparent) 100%) !important; }
#top { background: radial-gradient(900px 480px at 28% 30%, rgb(var(--ambA, 237 30 121) / var(--ambK, .15)), transparent 70%), radial-gradient(600px 400px at 85% 55%, rgb(var(--ambB, 90 60 180) / var(--ambK, .15)), transparent 70%) !important; }
div:has(> [data-reel]), [data-reel] { direction: ltr; }
[data-reel] > a { direction: rtl; }
[data-terminal] { right: auto !important; left: 52px; text-align: left !important; }
[data-card] span[style*="left:12px"] { left: auto !important; right: 12px; }
.hv-panel svg, [data-dir-icon] { transform: scaleX(-1); }
[data-field] .ctl::after { transform-origin: right; }
/* Contact form: text starts at the right edge; room for the check mark and arrow moves to the left. */
[data-field] input, [data-field] textarea { padding: 14px 2px 14px 36px; }
[data-field] select { padding: 14px 2px 14px 64px; background-position: left 4px center; }
.ms-btn { padding: 14px 2px 14px 64px; }
[data-field] label, [data-email-label] { font-size: 14px !important; }
[data-brief] { border-left: 0 !important; border-right: 2px solid #ED1E79; padding: 6px 28px 6px 0 !important; }
[data-field] .tick { right: auto; left: 4px; }
[data-field] .ctl:has(select) .tick, [data-field] .ctl:has([data-ms]) .tick { right: auto; left: 30px; }
.ms-btn { text-align: right; }
.ms-btn .chev { right: auto; left: 4px; }
[data-menu-btn] { margin-left: 0; margin-right: -8px; }
[data-ov] [data-close] { left: auto; right: 20px; }
[data-totop] { right: auto !important; left: 16px !important; }

/* Process accordion: closed steps read top to bottom (Arabic is not rotated like Latin capitals). */
[data-acc-closed] span { transform: translateX(-50%) !important; bottom: 24px !important; font-size: 64px !important; line-height: 1 !important; }
@media (max-width: 700px) {
  [data-acc-wrap] [data-acc-closed] span { transform: translateY(-50%) !important; font-size: 40px !important; right: 20px !important; left: auto !important; }
  [data-terminal] { left: 20px; }
}

/* Header language toggle: compensate the 80% Arabic scale. */
.lang [lang="ar"] { font-size: 16.5px !important; }