/* =========================================================
   styles.css — نظام تصميم موحّد | Unified design system
   نموذج تصوري من Framework — ليس مشروع عميل

   ملاحظة معمارية: كل قواعد الاتجاه تستخدم الخصائص المنطقية
   (inset-inline-start / margin-inline / padding-inline / text-align:start)
   ليعمل الملف نفسه في RTL و LTR بلا نسخة ثانية.
   Architectural note: all directional rules use logical properties so the
   same sheet serves both RTL and LTR without a mirrored copy.
   ========================================================= */

/* ---------- 1. الرموز التصميمية | Design tokens ---------- */
:root {
  /* الهوية | Brand */
  --navy:        #0B1F3A;
  --navy-2:      #122A4A;
  --navy-3:      #1B3A61;
  --navy-soft:   #E8EDF4;
  --gold:        #C9A24B;
  --gold-dark:   #A6822F;
  --gold-soft:   #F6EFDF;

  /* الأسطح | Surfaces */
  --bg:          #FFFFFF;
  --bg-soft:     #F5F3EF;
  --bg-soft-2:   #EDEAE3;
  --line:        #E2E0DA;
  --line-soft:   #EFEDE8;

  /* النصوص | Text */
  --ink:         #0F172A;
  --ink-2:       #1E293B;
  --muted:       #475569;
  --muted-2:     #64748B;
  --faint:       #94A3B8;

  --danger:      #B91C1C;
  --danger-soft: #FEF2F2;
  --success:     #15803D;

  /* الخطوط — تتبدّل مع اللغة | Fonts — swapped by language
     العربية: عائلة واحدة بوزنين. المزج بين نسخ خطّي (Amiri) وخط هندسي كان
     يخلق تنافر هيكل، ويصغّر المقاس البصري للعناوين، ويُضعف قراءة العناوين
     الصغيرة (19px). العائلة الواحدة تحل الثلاثة معاً.
     Arabic: one family, two weights. Pairing a calligraphic Naskh with a
     geometric sans mismatched skeletons, shrank optical heading size, and hurt
     legibility at 19px headings. A single family solves all three. */
  --font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-head: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

  /* الزوايا | Radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;

  /* الظلال | Shadows */
  --sh-xs: 0 1px 2px rgba(11, 31, 58, .05);
  --sh-sm: 0 2px 6px rgba(11, 31, 58, .07);
  --sh-md: 0 6px 18px rgba(11, 31, 58, .09);
  --sh-lg: 0 16px 40px rgba(11, 31, 58, .13);
  --sh-xl: 0 28px 64px rgba(11, 31, 58, .18);

  /* المسافات | Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  --wrap: 1200px;
  --nav-h: 76px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .18s var(--ease);
  --t: .3s var(--ease);
  --t-slow: .45s var(--ease);
}

html[lang="en"] {
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Playfair Display', Georgia, serif;
}

/* ---------- 2. إعادة الضبط | Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* سمة hidden يجب أن تغلب أي قاعدة display في الملف.
   بدون !important كان `.btn{display:inline-flex}` و`.notice{display:flex}`
   يتجاوزان قاعدة المتصفح، فتظهر أزرار المعالج المخفية ويمكن تخطّي الخطوات.
   The hidden attribute must beat any author display rule. Without this,
   .btn/.notice overrode the UA rule and "hidden" wizard buttons stayed
   clickable — letting a user skip the entire flow. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* scroll-padding-top يمنع الشريط الثابت من حجب العنصر المُمرَّر إليه.
     بدونه، كل scrollIntoView (خطوات الحجز، الترقيم، روابط المرساة) يضع
     الهدف عند y=0 أي خلف الشريط تماماً.
     Without this, every scrollIntoView (wizard steps, pagination, anchors)
     lands the target at y=0 — entirely behind the sticky header. */
  scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="en"] body { line-height: 1.7; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
}
/* العربي بعائلة واحدة: تشديد طفيف للتمييز عن النص، وبلا تتبّع سالب */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: normal; }
h1 { font-size: clamp(2rem, 1.3rem + 2.7vw, 3.4rem); line-height: 1.25; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1rem + .65vw, 1.5rem); }
h4 { font-size: 1.06rem; font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-3); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-dark); }

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--gold-soft); color: var(--navy); }

/* ---------- 3. أدوات | Utilities ---------- */
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -100px; z-index: 300;
  background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-md) var(--r-md); transition: top var(--t);
}
.skip-link:focus { top: 0; color: #fff; }

.section { padding-block: clamp(52px, 7vw, 92px); }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.8); }
.section--navy h2, .section--navy h3 { color: #fff; }

/* شارة علوية ذهبية | Gold eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  color: var(--gold-dark); text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--gold); flex: none;
}
.section--navy .eyebrow { color: var(--gold); }
html[lang="ar"] .eyebrow { letter-spacing: normal; text-transform: none; font-size: .85rem; }

.section-head { max-width: 660px; margin-bottom: var(--s6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { color: var(--muted); font-size: 1.04rem; margin: 0; }
.section--navy .section-head p { color: rgba(255,255,255,.72); }

/* خط ذهبي فاصل | Gold rule */
.rule { width: 56px; height: 2px; background: var(--gold); margin-block: var(--s4); }
.rule--center { margin-inline: auto; }

.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6);
}
.head-row .section-head { margin-bottom: 0; }

/* ---------- 4. الأزرار | Buttons ---------- */
.btn {
  --bg: var(--navy); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  padding: 13px 26px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  line-height: 1.4; min-height: 48px; white-space: normal; text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--navy-2); color: #fff; box-shadow: var(--sh-md); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--gold { --bg: var(--gold); --fg: var(--navy); }
.btn--gold:hover { background: var(--gold-dark); color: #fff; }

.btn--ghost { --bg: transparent; --fg: var(--navy); --bd: var(--line); }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn--outline-gold { --bg: transparent; --fg: var(--gold-dark); --bd: var(--gold); }
.btn--outline-gold:hover { background: var(--gold); color: var(--navy); }

.btn--white { --bg: #fff; --fg: var(--navy); }
.btn--white:hover { background: var(--gold-soft); color: var(--navy); }

.btn--outline-white { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.4); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--lg { padding: 16px 34px; font-size: 1rem; min-height: 56px; }
.btn--sm { padding: 9px 18px; font-size: .875rem; min-height: 42px; }
.btn--block { width: 100%; }

/* ---------- 5. الشريط التصريحي العلوي | Top disclosure bar ---------- */
.topbar {
  background: var(--navy); color: rgba(255,255,255,.86);
  font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; min-height: 44px; padding-block: 6px;
}
.topbar__note { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff; }
.topbar__note svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.topbar__right { display: flex; align-items: center; gap: var(--s5); }
.topbar__contact { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.8); }
.topbar__contact svg { width: 14px; height: 14px; }
.topbar__contact:hover { color: #fff; }
@media (max-width: 820px) { .topbar__contact { display: none; } }

/* مبدّل اللغة | Language switch */
.lang-switch {
  display: inline-flex; border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-pill); overflow: hidden; flex: none;
}
.lang-switch button {
  padding: 5px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.7); min-height: 30px;
  transition: background var(--t-fast), color var(--t-fast);
  font-family: 'Inter', system-ui, sans-serif;
}
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] { background: var(--gold); color: var(--navy); }

/* ---------- 6. التنقّل | Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t);
}
.nav.is-stuck { box-shadow: var(--sh-md); }
.nav .wrap { display: flex; align-items: center; gap: var(--s5); min-height: var(--nav-h); }

.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo__mark {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--navy); color: var(--gold); border-radius: var(--r-sm);
  position: relative;
}
.logo__mark::after {
  content: ''; position: absolute; inset: 3px; border: 1px solid rgba(201,162,75,.4);
  border-radius: 2px; pointer-events: none;
}
.logo__mark svg { width: 23px; height: 23px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__name { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: var(--navy); }
.logo__sub {
  font-size: .62rem; color: var(--muted-2); font-family: var(--font-body);
}
/* التباعد الحرفي والأحرف الكبيرة أسلوب لاتيني — تباعد الأحرف يكسر اتصال الحروف العربية
   letter-spacing/uppercase is a Latin stylistic device — it breaks Arabic letter joining */
html[lang="en"] .logo__sub {
  letter-spacing: .16em; text-transform: uppercase; font-family: 'Inter', sans-serif;
}

.nav__links { display: flex; align-items: center; gap: 2px; margin-inline-end: auto; }
.nav__links a {
  display: block; padding: 9px 13px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500; font-size: .93rem;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__links a:hover { color: var(--navy); background: var(--bg-soft); }
.nav__links a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav__links a[aria-current="page"]::after {
  content: ''; display: block; height: 2px; background: var(--gold); margin-top: 3px;
}

.nav__actions { display: flex; align-items: center; gap: var(--s3); flex: none; }
.nav__burger { display: none; }

.icon-btn {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--navy); border: 1px solid var(--line); background: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--bg-soft); border-color: var(--navy); }
.icon-btn svg { width: 21px; height: 21px; }

@media (max-width: 1120px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__cta { display: none; }
}

/* قائمة الجوال | Mobile menu */
.mobile-menu {
  /* overflow:hidden يمنع اللوحة المزاحة بـ translateX من توسيع عرض المستند وهي مغلقة
     Clips the translated-off panel so it cannot widen the document while closed */
  overflow: hidden;
  position: fixed; inset: 0; z-index: 200; background: rgba(11,31,58,.5);
  backdrop-filter: blur(3px); opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(340px, 88vw); background: #fff; padding: var(--s5);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4);
  transform: translateX(var(--menu-out, 100%)); transition: transform var(--t-slow);
}
/* اللوحة مثبّتة على inset-inline-end: في RTL هذا هو الحافة اليسرى، وفي LTR اليمنى.
   فيجب أن تنزلق خارجاً نحو حافتها هي: يساراً في RTL ويميناً في LTR.
   عكسها يجعل اللوحة تعبر الشاشة بكاملها بدل أن تنزلق من حافتها.
   The panel is pinned to inset-inline-end — the LEFT edge in RTL, the RIGHT edge in LTR —
   so it must slide out toward that same edge. Inverting these makes it sweep across
   the entire viewport instead of sliding in from its own edge. */
html[dir="rtl"] .mobile-menu__panel { --menu-out: -100%; }
html[dir="ltr"] .mobile-menu__panel { --menu-out: 100%; }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__links a {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: var(--r-md); color: var(--ink-2); font-weight: 500;
  transition: background var(--t-fast);
}
.mobile-menu__links a:hover { background: var(--bg-soft); }
.mobile-menu__links a[aria-current="page"] { background: var(--navy-soft); color: var(--navy); font-weight: 700; }
.mobile-menu__links svg { width: 19px; height: 19px; color: var(--muted-2); flex: none; }

/* ---------- 7. البطل | Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,31,58,.96) 0%, rgba(11,31,58,.88) 45%, rgba(11,31,58,.62) 100%);
}
html[dir="ltr"] .hero__bg::after { background: linear-gradient(260deg, rgba(11,31,58,.96) 0%, rgba(11,31,58,.88) 45%, rgba(11,31,58,.62) 100%); }
.hero__inner { padding-block: clamp(64px, 9vw, 128px); }
.hero__copy { max-width: 680px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lead { font-size: clamp(1.02rem, .96rem + .38vw, 1.2rem); color: rgba(255,255,255,.82); max-width: 560px; }
.hero .eyebrow { color: var(--gold); }
.hero .eyebrow::before { background: var(--gold); }
.hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* شريط الثقة | Trust bar */
.trustbar { background: var(--navy-2); border-top: 1px solid rgba(255,255,255,.1); }
.trustbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--s5);
}
.trustbar__item { text-align: center; padding-inline: var(--s4); }
.trustbar__item + .trustbar__item { border-inline-start: 1px solid rgba(255,255,255,.12); }
.trustbar__num {
  font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 700; color: var(--gold); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.trustbar__label { font-size: .84rem; color: rgba(255,255,255,.7); }
@media (max-width: 760px) {
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4) 0; }
  .trustbar__item:nth-child(odd) { border-inline-start: 0; }
  .trustbar__item:nth-child(3), .trustbar__item:nth-child(4) { padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.12); }
}

/* ---------- 8. البطاقات | Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--sh-xs);
}

/* بطاقة مجال ممارسة | Practice area card */
.grid-areas { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.area-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.area-card::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: var(--origin, right);
  transition: transform var(--t);
}
html[dir="ltr"] .area-card::before { --origin: left; }
.area-card:hover { border-color: var(--navy-soft); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.area-card:hover::before { transform: scaleX(1); }
.area-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-md); flex: none;
  background: var(--navy-soft); color: var(--navy); display: grid; place-items: center;
  margin-bottom: var(--s4); transition: background var(--t), color var(--t);
}
.area-card:hover .area-card__icon { background: var(--navy); color: var(--gold); }
.area-card__icon svg { width: 26px; height: 26px; }
.area-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.area-card p { color: var(--muted); font-size: .93rem; margin-bottom: var(--s4); flex: 1; }
.area-card__more {
  display: inline-flex; align-items: center; gap: 7px; font-size: .88rem;
  font-weight: 600; color: var(--navy); min-height: 36px;
}
.area-card__more svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
html[dir="rtl"] .area-card:hover .area-card__more svg { transform: translateX(-4px); }
html[dir="ltr"] .area-card:hover .area-card__more svg { transform: translateX(4px); }
/* رابط ممتد يجعل البطاقة كلها هدف نقر واحد | Stretched link: whole card is one target.
   بلا transform على الرابط، وإلا صار هو الكتلة الحاوية وانكمش الغطاء.
   No transform on the link itself, or it becomes the containing block and the overlay collapses. */
.area-card__more::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ---------- 9. المزايا والقيم | Features & values ---------- */
.grid-3 { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.feature { display: flex; gap: var(--s4); }
.feature__icon {
  width: 48px; height: 48px; border-radius: var(--r-md); flex: none;
  border: 1px solid var(--gold); color: var(--gold-dark);
  display: grid; place-items: center; background: var(--gold-soft);
}
.feature__icon svg { width: 23px; height: 23px; }
.feature h4 { margin-bottom: 5px; color: var(--ink); }
.feature p { color: var(--muted); font-size: .93rem; margin: 0; }
.section--navy .feature h4 { color: #fff; }
.section--navy .feature p { color: rgba(255,255,255,.7); }
.section--navy .feature__icon { background: rgba(201,162,75,.12); }

/* ---------- 10. الإحصائيات | Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.stat { text-align: center; padding: var(--s5) var(--s3); }
.stat__icon { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--gold); display: grid; place-items: center; }
.stat__icon svg { width: 30px; height: 30px; }
.stat__num {
  font-family: var(--font-head); font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  font-weight: 700; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.section--navy .stat__num { color: #fff; }
.stat__label { font-size: .92rem; color: var(--muted); }
.section--navy .stat__label { color: rgba(255,255,255,.7); }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 11. مقسّم صورة/نص | Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--sh-lg); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--framed::after {
  content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--r-md); pointer-events: none;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* اقتباس بارز | Pull quote */
.pullquote {
  border-inline-start: 3px solid var(--gold); padding-inline-start: var(--s5);
  margin-block: var(--s5); font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.6; color: var(--navy);
}
.pullquote cite { display: block; font-family: var(--font-body); font-size: .88rem; font-style: normal; color: var(--muted-2); margin-top: 10px; }

/* ---------- 12. الأفاتار النائب | Placeholder avatar ---------- */
.avatar {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: none;
  background: linear-gradient(150deg, var(--navy-3), var(--navy));
  color: var(--gold); font-family: var(--font-head); font-weight: 700; line-height: 1;
}
.avatar::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 18%, rgba(201,162,75,.16), transparent 62%);
}
.avatar__initials { position: relative; z-index: 2; letter-spacing: .06em; }
.avatar__glyph {
  /* توسيط هندسي بحت: left/translateX(-50%) صحيح في الاتجاهين.
     inset-inline-start مع translateX(50%) كان يعمل في RTL فقط ويقذف الرمز خارج الشاشة في LTR.
     Pure geometric centring: correct in both directions. The logical-inset variant
     only worked in RTL and threw the glyph off-canvas in LTR. */
  position: absolute; z-index: 1; bottom: -16%; left: 50%;
  transform: translateX(-50%); width: 70%; height: 70%;
  color: var(--gold); opacity: .12; stroke-width: 1.3;
}
.avatar--sm   { width: 48px; height: 48px; border-radius: var(--r-pill); font-size: .84rem; }
.avatar--md   { width: 104px; height: 104px; border-radius: var(--r-pill); font-size: 1.6rem; }
.avatar--tile { width: 100%; height: 100%; font-size: clamp(2rem, 1rem + 4vw, 3.2rem); }

/* ---------- 13. بطاقة محامٍ | Lawyer card ---------- */
.grid-team { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.lcard {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.lcard:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: var(--navy-soft); }
.lcard__media { aspect-ratio: 1/1; position: relative; }
.lcard__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.lcard__name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.lcard__title { font-size: .86rem; color: var(--gold-dark); font-weight: 600; margin-bottom: var(--s3); }
.lcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); }
.lcard__foot { margin-top: auto; display: flex; gap: 8px; }
.lcard__foot .btn { flex: 1; }
.lcard__foot .btn::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lcard__foot .btn:hover { transform: none; }

.tag {
  display: inline-block; padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--muted); font-size: .76rem; font-weight: 500;
  border: 1px solid var(--line-soft);
}
.tag--gold { background: var(--gold-soft); color: var(--gold-dark); border-color: rgba(201,162,75,.3); }
/* الوسوم القابلة للنقر تحتاج هدف لمس مريح | clickable tags need a comfortable touch target */
a.tag { padding-block: 8px; }
.tag--navy { background: var(--navy-soft); color: var(--navy); border-color: transparent; }

/* ---------- 14. قصص النجاح | Case studies ---------- */
.grid-cases { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.case-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column;
  transition: box-shadow var(--t), border-color var(--t);
}
.case-card:hover { box-shadow: var(--sh-md); border-color: var(--navy-soft); }
.case-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.case-card__metric { text-align: center; flex: 0 1 auto; min-width: 0; }
.case-card__metric b { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--gold-dark); }
.case-card__metric span { font-size: .74rem; color: var(--muted-2); }
.case-block { padding-block: var(--s3); border-top: 1px solid var(--line-soft); }
.case-block:first-of-type { border-top: 0; }
.case-block dt {
  font-size: .76rem; font-weight: 700; color: var(--navy); letter-spacing: .06em;
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.case-block dt::before { content: ''; width: 12px; height: 1px; background: var(--gold); flex: none; }
.case-block dd { margin: 0; font-size: .92rem; color: var(--muted); }

/* ---------- 15. المقالات | Articles ---------- */
.grid-articles { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.acard {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}
.acard:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.acard__media { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft-2); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.acard:hover .acard__media img { transform: scale(1.05); }
.acard__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.acard__meta { display: flex; align-items: center; gap: var(--s3); font-size: .8rem; color: var(--muted-2); margin-bottom: 10px; flex-wrap: wrap; }
.acard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.acard__meta svg { width: 14px; height: 14px; }
.acard__meta a { display: inline-block; padding-block: 7px; }
.acard h3 { font-size: 1.16rem; margin-bottom: 8px; line-height: 1.5; }
.acard h3 a { color: var(--navy); }
.acard:hover h3 a { color: var(--gold-dark); }
.acard p { color: var(--muted); font-size: .92rem; flex: 1; margin-bottom: var(--s4); }
.acard__more { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--navy); min-height: 36px; }
.acard__more svg { width: 16px; height: 16px; }
.acard__more::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ---------- 16. سلايدر الشهادات | Testimonials ---------- */
.tslider__track {
  display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s4); scroll-behavior: smooth; scrollbar-width: none;
}
.tslider__track::-webkit-scrollbar { display: none; }
.tcard {
  flex: 0 0 min(440px, 86%); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); display: flex; flex-direction: column;
}
.tcard__quote { color: var(--gold); margin-bottom: var(--s3); }
.tcard__quote svg { width: 30px; height: 30px; opacity: .5; }
.tcard__text { font-size: 1.02rem; color: var(--ink-2); flex: 1; line-height: 1.9; }
.tcard__who { display: flex; align-items: center; gap: 12px; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.tcard__name { font-weight: 700; color: var(--navy); line-height: 1.4; }
.tcard__role { font-size: .84rem; color: var(--muted-2); }
.tcard__stars { display: flex; gap: 2px; color: var(--gold); margin-bottom: var(--s3); }
.tcard__stars svg { width: 16px; height: 16px; fill: currentColor; }
.slider-nav { display: flex; gap: 8px; }

/* ---------- 17. الخط الزمني | Timeline ---------- */
.timeline { position: relative; padding-inline-start: 38px; }
.timeline::before {
  content: ''; position: absolute; inset-block: 10px; inset-inline-start: 7px;
  width: 1px; background: linear-gradient(180deg, var(--gold), var(--line));
}
.tl-item { position: relative; padding-bottom: var(--s6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; inset-inline-start: -38px; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-soft);
}
.tl-year { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--gold-dark); }
.tl-item h4 { margin: 2px 0 4px; }
.tl-item p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- 18. النماذج | Forms ---------- */
.field {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; font-size: .95rem; background: #fff; color: var(--ink);
  min-height: 48px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
select.field {
  appearance: none; cursor: pointer; padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
html[dir="rtl"] select.field { background-position: left 14px center; padding-inline-end: 15px; padding-inline-start: 40px; }
textarea.field { min-height: 130px; resize: vertical; line-height: 1.7; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row--full { grid-column: 1 / -1; }
.form-row label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.form-row .req { color: var(--danger); }
.form-error { font-size: .82rem; color: var(--danger); min-height: 1.1em; display: flex; align-items: center; gap: 5px; }
.form-error svg { width: 14px; height: 14px; flex: none; }
.field.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-success {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--gold-soft); border: 1px solid rgba(201,162,75,.4);
  border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s4);
}
.form-success[hidden] { display: none; }
.form-success svg { width: 24px; height: 24px; color: var(--gold-dark); flex: none; }
.form-success b { display: block; color: var(--navy); }
.form-success p { font-size: .9rem; color: var(--muted); margin: 2px 0 0; }

.checkbox { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.checkbox input { width: 19px; height: 19px; accent-color: var(--navy); flex: none; margin-top: 3px; cursor: pointer; }

/* بطاقات اختيار | Selectable option cards */
.choice-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.choice {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff;
  text-align: start; transition: border-color var(--t-fast), background var(--t-fast);
  min-height: 62px;
}
.choice:hover { border-color: var(--navy); }
.choice[aria-pressed="true"] { border-color: var(--navy); background: var(--navy-soft); }
.choice svg { width: 21px; height: 21px; color: var(--navy); flex: none; }
.choice b { font-size: .93rem; font-weight: 600; color: var(--ink); }

/* ---------- 19. معالج متعدد الخطوات | Multi-step wizard ---------- */
.steps { display: flex; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s6); position: relative; }
.steps::before {
  content: ''; position: absolute; inset-inline: 20px; top: 19px; height: 2px;
  background: var(--line); z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; flex: 1; }
.step__dot {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--line);
  color: var(--muted-2); font-weight: 700; font-size: .9rem;
  transition: background var(--t), border-color var(--t), color var(--t);
  font-variant-numeric: tabular-nums;
}
.step__label { font-size: .8rem; color: var(--muted-2); font-weight: 500; }
.step[aria-current="step"] .step__dot { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.step[aria-current="step"] .step__label { color: var(--navy); font-weight: 700; }
.step.is-done .step__dot { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.step.is-done .step__label { color: var(--ink-2); }
.step__dot svg { width: 19px; height: 19px; }
@media (max-width: 560px) { .step__label { display: none; } .steps::before { inset-inline: 20px; } }

.wizard-panel[hidden] { display: none; }
.wizard-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-soft); }

.review-list { display: grid; gap: 0; }
.review-list div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem;
}
.review-list dt { color: var(--muted); }
.review-list dd { margin: 0; font-weight: 600; color: var(--ink); text-align: end; }

/* ---------- 20. الأكورديون | Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.acc-item + .acc-item { border-top: 1px solid var(--line-soft); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 18px var(--s5); text-align: start; font-weight: 600; font-size: 1rem; color: var(--ink);
  min-height: 60px; transition: background var(--t-fast);
}
.acc-trigger:hover { background: var(--bg-soft); }
.acc-trigger[aria-expanded="true"] { color: var(--navy); background: var(--bg-soft); }
.acc-icon {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--navy); transition: transform var(--t), background var(--t), color var(--t);
}
.acc-icon svg { width: 16px; height: 16px; }
.acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(180deg); background: var(--navy); color: var(--gold); border-color: var(--navy); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding: 0 var(--s5) 20px; color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- 21. رأس الصفحة الداخلي | Page header ---------- */
.page-head { background: var(--navy); color: #fff; padding-block: var(--s7); position: relative; overflow: hidden; }
.page-head::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-end: -60px; width: 340px;
  background: radial-gradient(circle at center, rgba(201,162,75,.16), transparent 68%);
}
.page-head h1 { color: #fff; margin-bottom: 10px; position: relative; }
.page-head p { color: rgba(255,255,255,.76); margin: 0; max-width: 640px; position: relative; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: rgba(255,255,255,.6); margin-bottom: 14px; flex-wrap: wrap; position: relative; }
.crumbs a { color: rgba(255,255,255,.75); }
.crumbs a:hover { color: var(--gold); }
.crumbs svg { width: 13px; height: 13px; opacity: .6; }
html[dir="ltr"] .crumbs svg { transform: rotate(180deg); }

/* ---------- 22. تخطيطات المحتوى | Content layouts ---------- */
.with-side { display: grid; grid-template-columns: 1fr 340px; gap: var(--s6); align-items: start; }
@media (max-width: 1000px) { .with-side { grid-template-columns: 1fr; } }
.sticky-side { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: var(--s4); }
@media (max-width: 1000px) { .sticky-side { position: static; } }

.prose { font-size: 1.03rem; color: var(--ink-2); }
.prose p { margin-bottom: 1.3em; }
.prose p:first-of-type::first-letter {
  font-family: var(--font-head); font-size: 3.2em; float: inline-start; line-height: .9;
  padding-inline-end: 12px; padding-block-start: 6px; color: var(--navy);
}
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.checklist svg { width: 19px; height: 19px; color: var(--gold-dark); flex: none; margin-top: 4px; }

.numbered { display: grid; gap: var(--s4); counter-reset: step; }
.numbered li { display: flex; gap: var(--s4); counter-increment: step; }
.numbered li::before {
  content: counter(step); flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
}
.numbered h4 { margin-bottom: 3px; }
.numbered p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- 23. الفلاتر وشريط الأدوات | Filters & toolbar ---------- */
.filter-bar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s5); }
.chip {
  padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: .88rem; font-weight: 500; color: var(--muted); background: #fff;
  min-height: 40px; transition: all var(--t-fast);
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box input { padding-inline-start: 44px; }
.search-box svg {
  position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted-2); pointer-events: none;
}

.empty { text-align: center; padding: clamp(48px, 8vw, 80px) var(--s4); background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty__icon { width: 64px; height: 64px; margin: 0 auto var(--s4); border-radius: 50%; background: #fff; color: var(--faint); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.empty__icon svg { width: 30px; height: 30px; }
.empty p { color: var(--muted); margin: 0; }

/* ---------- 24. الخريطة | Map ---------- */
.map-box { height: 380px; border-radius: var(--r-lg); overflow: hidden; z-index: 0; background: var(--bg-soft-2); }
.leaflet-container { font-family: var(--font-body) !important; }
.leaflet-popup-content { font-family: var(--font-body); margin: 12px 14px; }
html[dir="rtl"] .leaflet-popup-content { direction: rtl; text-align: right; }
.leaflet-popup-content b { display: block; color: var(--navy); margin-bottom: 2px; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 20px !important; }
.leaflet-popup-close-button { width: 38px !important; height: 38px !important; font-size: 22px !important; padding: 0 !important; }

/* ---------- 25. معلومات التواصل | Contact info ---------- */
.info-item { display: flex; gap: 14px; padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); }
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.info-item__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; flex: none; }
.info-item__icon svg { width: 21px; height: 21px; }
.info-item b { display: block; color: var(--ink); font-size: .94rem; }
.info-item span { font-size: .92rem; color: var(--muted); }
.info-item a { font-size: .92rem; color: var(--muted); display: inline-block; padding-block: 8px; }
.info-item a:hover { color: var(--navy); }

/* ---------- 26. قسم الدعوة | CTA band ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 64px); background: var(--navy); color: #fff;
  border-top: 3px solid var(--gold);
}
.cta-band::before {
  content: ''; position: absolute; z-index: -1; inset-inline-end: -90px; top: -90px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,75,.2), transparent 66%);
}
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,.78); margin: 0; max-width: 540px; }
.cta-band__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---------- 27. التذييل | Footer ---------- */
.footer { background: var(--navy); color: rgba(255,255,255,.7); padding-top: var(--s8); margin-top: var(--s7); }
.footer a { color: rgba(255,255,255,.7); }
.footer a:hover { color: var(--gold); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: var(--s6); padding-bottom: var(--s7); }
.footer__about p { font-size: .92rem; margin-top: var(--s4); max-width: 330px; }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: rgba(255,255,255,.45); }
.footer .logo__mark { background: rgba(255,255,255,.08); }
.footer h4 { color: #fff; font-size: .96rem; margin-bottom: var(--s4); font-family: var(--font-body); }
.footer__list { display: flex; flex-direction: column; gap: 11px; font-size: .91rem; }
.footer__list a { display: inline-flex; align-items: center; gap: 8px; }
.footer__list svg { width: 15px; height: 15px; opacity: .6; flex: none; }

.newsletter { display: flex; gap: 8px; margin-top: var(--s3); }
.newsletter input {
  flex: 1; min-width: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  color: #fff; border-radius: var(--r-md); padding: 12px 14px; font-size: .9rem; min-height: 48px;
}
.newsletter input::placeholder { color: rgba(255,255,255,.4); }
.newsletter input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.11); }
.newsletter__msg { font-size: .85rem; color: var(--gold); margin-top: 10px; min-height: 1.2em; }

.socials { display: flex; gap: 10px; margin-top: var(--s4); }
.socials a {
  width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.socials svg { width: 18px; height: 18px; }

/* لافتة داخل المحتوى | In-page notice
   صنف منفصل عن .disclaimer عمداً: الأخير محجوز للإشعار القانوني في التذييل وحده.
   Deliberately separate from .disclaimer, which is reserved for the footer legal notice. */
.notice {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 28px;
  font-size: .89rem; color: var(--muted); background: var(--bg-soft);
}
.notice svg { width: 18px; height: 18px; color: var(--gold-dark); flex: none; margin-top: 3px; }

/* إشعار قانوني | Legal disclaimer */
.disclaimer {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid rgba(255,255,255,.14); border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: var(--s5);
  font-size: .86rem; color: rgba(255,255,255,.72);
}
.disclaimer svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }

/* الشريط التصريحي السفلي | Bottom disclosure bar */
.bottombar { border-top: 1px solid rgba(255,255,255,.1); background: #071628; padding-block: var(--s4); }
.bottombar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: .84rem; }
.bottombar__note {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--navy);
  background: var(--gold); padding: 7px 16px; border-radius: var(--r-pill);
}
.bottombar__note svg { width: 15px; height: 15px; flex: none; }
.bottombar__copy { color: rgba(255,255,255,.5); }

@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- 28. الظهور التدريجي | Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 29. أثناء تبديل اللغة | During language switch ---------- */
/* تعتيم خفيف يمنع وميض النص أثناء إعادة الرسم | Brief fade prevents text flash on re-render */
body.is-switching { opacity: .55; transition: opacity .12s linear; }