@charset "utf-8";
/* ==========================================================================
   أملاكُنا — Amlakuna · صفحة تعريف

   @charset أعلاه إجباريّ ويجب أن يبقى **أوّل شيء في الملف** بلا تعليقٍ قبله.
   بدونه — وحين لا يرسل الخادم charset — يقرأ المتصفّح الملفّ بترميزٍ محلّي
   فتتحوّل بايتات UTF-8 للسهم (E2 86 90) إلى «â†».
   حبر على ورق دافئ، خطوط شعرية، ذهبي شحيح.
   الطباعة: Cairo للعربية + Montserrat للاتينية — وهما خطّا بطاقة العقار
   في التطبيق، فتبقى العلامة واحدة بين البرنامج والموقع.
   المصدر اللوني: aqar_office/lib/app/theme.dart — لا تخترع ألواناً جديدة.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. التوكنات
   -------------------------------------------------------------------------- */

:root {
  /* الحبر — محايد مائل للدفء، لا أسود نقي أبداً */
  --ink:        oklch(0.240 0.006 40);    /* #231F20 */
  --ink-soft:   oklch(0.320 0.004 120);   /* #2A2B2A */
  /* المدى مضغوط عمداً: الطبقة الباهتة تُستعمل في نصوصٍ بحجم 12.4px،
     والفاتحية الأعلى كانت ترسب في AA. التمييز يأتي من الحجم والتباعد. */
  --ink-mute:   oklch(0.475 0.008 60);
  /* 0.532 لا 0.545: الطبقة الباهتة تقع أيضاً على paper-warm الأغمق قليلاً،
     وهناك كانت تهبط إلى 4.46 — رسوبٌ بفارق أربعة أجزاء من مئة. */
  --ink-faint:  oklch(0.532 0.011 70);

  /* الورق — دافئ مائل نحو هوية العلامة، لا أبيض ناصع */
  --paper:      oklch(0.980 0.005 82);
  --paper-warm: oklch(0.962 0.010 80);

  /* الخطوط الشعرية */
  --rule:       oklch(0.868 0.010 76);
  --rule-soft:  oklch(0.918 0.008 76);
  --rule-ink:   oklch(0.780 0.012 74);

  /* الذهبي — اللون المميّز الوحيد */
  --gold:       oklch(0.715 0.079 71);    /* #C3975B */
  --gold-deep:  oklch(0.525 0.092 68);    /* #8C6224 — للنصّ على فاتح */
  --gold-pale:  oklch(0.940 0.025 78);    /* #F4EBDC */
  --gold-wash:  oklch(0.966 0.014 79);

  /* حبر معكوس (الفوتر) */
  --ink-band:   oklch(0.245 0.006 45);
  --on-ink:     oklch(0.905 0.006 80);
  --on-ink-mute: oklch(0.700 0.008 75);

  /* زاوية ضربة الشعار — 65° عن الأفق */
  --angle: 65deg;

  /* الطباعة — Montserrat أوّلاً فيلتقط اللاتيني، والعربي يسقط إلى Cairo
     تلقائياً لأنّ Montserrat بلا محارف عربية. مكدّسٌ واحد للّغتين. */
  --font-ui: "Montserrat", "Cairo", "Segoe UI", sans-serif;
  --font-display: var(--font-ui);

  /* ارتفاع الهيدر — يُطرح من ارتفاع الشاشة كي يملأ الهيرو ما تبقّى تماماً */
  --header-h: 5rem;

  --fs-h1:   clamp(2.35rem, 1.4rem + 4.3vw, 5.4rem);
  --fs-h2:   clamp(1.7rem, 1.3rem + 1.75vw, 2.75rem);
  --fs-h3:   clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.32vw, 1.26rem);
  --fs-body: clamp(0.965rem, 0.945rem + 0.12vw, 1.04rem);
  --fs-sm:   0.875rem;
  --fs-xs:   0.775rem;

  /* المسافات — إيقاع متنوّع لا انتظام ممل */
  --gutter:  clamp(1.15rem, 4.2vw, 4.5rem);
  --band-y:  clamp(4rem, 2.4rem + 6.4vw, 8.5rem);
  --maxw: 82rem;

  /* الحركة — تخفيف أسّي، بلا ارتداد */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. القاعدة
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;                /* Cairo يحتاج فسحة كي لا تتراكب التشكيلات */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
/* سمتا width/height في الـHTML تُترجمان تلميحاً تنسيقياً؛ حين يلغي الـCSS
   العرض وحده يبقى الارتفاع حرفياً فينسحق الشعار. height:auto يعيد النسبة. */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--ink);
  text-decoration-color: color-mix(in oklch, var(--gold) 55%, transparent);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  transition: color 0.32s var(--ease-out), text-decoration-color 0.32s var(--ease-out);
}
a:hover { color: var(--gold-deep); text-decoration-color: var(--gold); }

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

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--gutter);
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
}
.skip-link:focus { inset-block-start: 0.75rem; color: var(--paper); }

/* --------------------------------------------------------------------------
   3. الشبكة والأشرطة
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { border-block-start: 1px solid var(--rule); }
.band--flush { border-block-start: 0; }
.band--warm { background: var(--paper-warm); }
.band > .shell { padding-block: var(--band-y); }

/* الشريط الحبري — يكسر رتابة الورق الفاتح ويعطي الصفحة ثِقَلاً */
.band--ink {
  background: var(--ink-band);
  color: var(--on-ink-mute);
  border-block-start: 0;
}
.band--ink h2, .band--ink blockquote { color: var(--on-ink); }
.band--ink .rule-label { color: var(--gold); }
.band--ink .rule-label::before,
.band--ink .rule-label::after { background: var(--gold); opacity: 0.42; }

/* --------------------------------------------------------------------------
   4. جهاز العلامة: عنوانٌ محاطٌ بخطّين ذهبيين
      (مأخوذ حرفياً من معالجة «للاستشارات العقارية» في الشعار)
   -------------------------------------------------------------------------- */

.rule-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-end: clamp(1.5rem, 3vw, 2.6rem);
  color: var(--gold-deep);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
}
.rule-label::before,
.rule-label::after { content: ""; height: 1px; background: var(--gold); opacity: 0.55; }
.rule-label::before { width: clamp(1.75rem, 5vw, 4rem); flex: none; }
/* min-width يمنع انهيار الخطّ الذيلي إلى صفر حين ينكسر النصّ سطرين
   على الشاشات الضيّقة — بدونه يبدو جهاز العلامة ناقصاً نصفه. */
.rule-label::after  { flex: 1 1 auto; min-width: 1.5rem; }

/* --------------------------------------------------------------------------
   5. التايبوغرافي
      بلا خطٍّ ثانٍ للتباين — الهرمية من الوزن والحجم والتباعد الحرفي.
   -------------------------------------------------------------------------- */

.display { font-weight: 700; line-height: 1.24; letter-spacing: -0.022em; }
/* Cairo أعرض عيناً وأحتاجُ فسحةً للتشكيل، وتضييق التباعد يفسد وصلاته */
[lang="ar"] .display { line-height: 1.5; letter-spacing: -0.005em; }

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.55; }

/* العربية عند 400 واللاتينية عند 300: السكريبت العربي يفقد وضوح وصلاته
   في الأوزان الخفيفة أسرع من اللاتيني، فلا يُسوّى بينهما. */
.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.78;
  color: var(--ink-mute);
  max-width: 46ch;
}
[lang="en"] .lead { font-weight: 300; }

.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }

/* اللاتيني داخل نصٍّ عربي — يبقى LTR ولا ينقلب */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------------------
   6. الأزرار
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.85rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

/* المسح: الحافة المائلة من clip-path لا من skew — الشكل داخل الصندوق دائماً
   وإلا سرّبت حوافّه بكسلاتٍ من تحت الـoverflow عند dpr 2. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
  transform: translateY(100%);
  transition: transform 0.52s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn:focus-visible { color: var(--ink); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-ink); }
.btn--ghost:hover { color: var(--ink); border-color: var(--gold); }
.btn--sm { padding: 0.62rem 1.15rem; font-size: var(--fs-xs); }

/* السهم يتبع اتجاه القراءة — رمزاً وحركةً */
.btn .arrow { transition: transform 0.4s var(--ease-out); }
/* هروب Unicode لا المحرف نفسه: يبقى السهم صحيحاً حتى لو أُسيء ترميز الملف */
.btn .arrow::before { content: "\2190"; }        /* ← */
[dir="ltr"] .btn .arrow::before { content: "\2192"; }  /* → */
.btn:hover .arrow { transform: translateX(calc(-0.25rem * var(--dir, 1))); }
[dir="ltr"] .btn .arrow { --dir: -1; }

/* --------------------------------------------------------------------------
   7. الهيدر — صفحةٌ من قسمين لا تحتاج تنقّلاً
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-block-end: 1px solid transparent;
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.site-header[data-stuck="true"] {
  border-block-end-color: var(--rule);
  background: color-mix(in oklch, var(--paper) 95%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding-block: 0.95rem;
}

/* اللوكاب مركَّب رأسياً (قناع فوق، اسم، شعار نصّي) فيحتاج ارتفاعاً أكبر
   من الشعار الأفقي كي يبقى السطر السفلي مقروءاً. */
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: clamp(2.15rem, 4.2vw, 3.05rem); width: auto; }

.header-actions { display: flex; align-items: center; gap: 0.7rem; flex: none; margin-inline-start: auto; }

.nav-link {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  text-decoration: none;
  padding-block: 0.35rem;
  margin-inline-end: 0.55rem;
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform 0.42s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: inline-start; }
/* الصفّ لا يتّسع للرابط والزرّ معاً على الشاشات الضيّقة */
@media (max-width: 26rem) { .nav-link { display: none; } }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  overflow: hidden;
}
.lang-toggle span {
  padding: 0.42rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  transition: background-color 0.32s var(--ease-out), color 0.32s var(--ease-out);
}
.lang-toggle span[data-active="true"] { background: var(--ink); color: var(--paper); }
.lang-toggle:hover { border-color: var(--gold); }

/* --------------------------------------------------------------------------
   8. الهيرو
   -------------------------------------------------------------------------- */

/* svh لا vh: على الجوال يقيس vh الشاشة وشريط العنوان مطويّاً، فيقفز
   التخطيط عند أوّل تمرير. svh يقيس أصغر حالة فيثبت. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-content: center;
}
.hero > .shell {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(5rem, 4rem + 6vw, 9rem);
}

/* شبكة قطرية خافتة بزاوية الشعار — تُقرأ كورقٍ مسطّر لا كزخرفة.
   كبرت مع الهيرو كي لا تبدو بقعةً صغيرة في شاشةٍ كاملة. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -22%;
  inset-inline-end: -14%;
  width: min(64vw, 58rem);
  aspect-ratio: 1;
  background: repeating-linear-gradient(var(--angle), var(--gold) 0 1px, transparent 1px 26px);
  opacity: 0.15;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 28%, transparent 76%);
}

.hero h1 { font-size: var(--fs-h1); max-width: 15ch; }
[lang="en"] .hero h1 { max-width: 18ch; }

/* دليل التمرير — خيطٌ ذهبي ينبض أسفل الهيرو */
.scroll-cue {
  position: absolute;
  inset-block-end: clamp(1.75rem, 4vh, 3.25rem);
  inset-inline-start: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-decoration: none;
}
.scroll-cue:hover { color: var(--gold-deep); }
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 2.75rem;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: cue 2.6s var(--ease-io) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; opacity: 0.8; } }
@media (max-height: 40rem) { .scroll-cue { display: none; } }
/* nowrap يمنع تفكّك العبارة الذهبية على سطرين. لكنّه سيفٌ ذو حدّين:
   عبارةٌ طويلة لا تنكسر تفرض على العنوان عرضاً أكبر من الشاشة فيُقتطع
   المحتوى تحت overflow-x:hidden بصمت. لذا يُرفع تحت 40rem. */
.hero h1 em { font-style: normal; color: var(--gold-deep); white-space: nowrap; }
@media (max-width: 40rem) { .hero h1 em { white-space: normal; } }

.hero-lead { margin-block-start: clamp(1.4rem, 3vw, 2.1rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-block-start: clamp(2rem, 4vw, 2.9rem); }

/* --------------------------------------------------------------------------
   شريط الموقف — الجملة الأقوى في الصفحة، على حبرٍ ممتدّ عرض الشاشة
   -------------------------------------------------------------------------- */

.statement { position: relative; overflow: hidden; }

/* قناع العلامة علامةً مائية ضخمة — يملأ الفراغ بلا ضجيج.
   inset-inline-**end** لا start: النصّ يبدأ من جهة البداية، فالعلامة
   تُدفع إلى الطرف المقابل الفارغ — وتنعكس تلقائياً مع اللغة. */
.statement::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  width: min(38vw, 30rem);
  aspect-ratio: 493 / 444;
  translate: 0 -50%;
  background: url("../brand/mark-light.svg") no-repeat center / contain;
  opacity: 0.055;
  pointer-events: none;
}

.statement blockquote {
  margin: 0;
  font-size: clamp(1.55rem, 1.1rem + 2.1vw, 3.1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 22ch;
  text-wrap: balance;
}
[lang="en"] .statement blockquote { line-height: 1.24; letter-spacing: -0.022em; max-width: 26ch; }

.statement-tail {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid color-mix(in oklch, var(--on-ink) 18%, transparent);
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.78;
  color: var(--on-ink-mute);
}

.statement cite {
  display: block;
  margin-block-start: 1.5rem;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold);
}


/* --------------------------------------------------------------------------
   9. التواصل
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); align-items: start; }
  .split--narrow-first { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr); }
  .split-sticky { position: sticky; inset-block-start: 7rem; }
}

/* --------------------------------------------------------------------------
   خدمات المكتب — قائمة مسطّرة لا شبكة بطاقات
   -------------------------------------------------------------------------- */

/* gold-deep لا gold: الترقيم محتوىً لا زخرفة، والذهبي الفاتح على الورق
   يعطي 2.41:1 — رسوبٌ صريح. العميق يعطي 5.21:1 ويطابق rule-label. */
.entry-no {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

/* شبكة اللوح خلف الخدمات — أضعف الأقسام سطحاً، فتُعطى نسيج ورق المخطّط.
   تتلاشى من الطرفين بـmask كي لا تصطدم بحدود الشريط فتبدو لصقةً عليه. */
#services { position: relative; isolation: isolate; }
#services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  opacity: 0.38;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.svc { border-block-start: 1px solid var(--rule); }

/* خطّ استدلال من رقم الخدمة نحو عنوانها — تعليقٌ على مخطّط */
.svc .entry-no { position: relative; }
.svc .entry-no::after {
  content: "";
  position: absolute;
  inset-block-start: 0.78em;
  inset-inline-start: calc(100% + 0.3rem);
  width: 0.6rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.65;
}
.svc li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 1.1rem;
  padding-block: clamp(1.2rem, 2.2vw, 1.7rem);
  border-block-end: 1px solid var(--rule);
  transition: background-color 0.4s var(--ease-out);
}
.svc li:hover { background: color-mix(in oklch, var(--gold-wash) 70%, transparent); }
.svc .entry-no { grid-row: 1 / span 2; padding-block-start: 0.35rem; }
.svc h3 { grid-column: 2; }
.svc p {
  grid-column: 2;
  margin-block-start: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  max-width: 56ch;
}


.contact-list { border-block-start: 1px solid var(--rule); }
.contact-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--rule);
}
.contact-list .k { font-size: var(--fs-xs); color: var(--ink-faint); letter-spacing: 0.1em; flex: none; }
.contact-list .v { text-align: end; }
.contact-list a { text-decoration: none; border-block-end: 1px solid var(--rule-ink); }
.contact-list a:hover { border-block-end-color: var(--gold); }

/* --------------------------------------------------------------------------
   10. الفوتر
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink-band); color: var(--on-ink-mute); }
.site-footer > .shell { padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.footer-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.site-footer img { width: clamp(8rem, 18vw, 11rem); }
.site-footer h4 {
  color: var(--on-ink);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-block-end: 1.1rem;
}
.site-footer li + li { margin-block-start: 0.65rem; }
.site-footer a { color: var(--on-ink-mute); text-decoration: none; font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--gold); }
.site-footer p { font-size: var(--fs-sm); line-height: 1.85; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid color-mix(in oklch, var(--on-ink) 16%, transparent);
  font-size: var(--fs-xs);
  color: color-mix(in oklch, var(--on-ink) 74%, transparent);
}

/* ==========================================================================
   لوح المساحة — الطبقة البنيوية للصفحة
   كلّ ما هنا شعريُّ الوزن ومنخفض العتامة: يُقرأ ركيزةً تحت المحتوى لا
   زخرفةً فوقه. وكلّه aria-hidden — لا يصل قارئ الشاشة منه شيء.
   ========================================================================== */

/* ── إطار اللوح ───────────────────────────────────────────────────────── */

/* z-index فوق الهيدر (50): حافة اللوح أخرجُ عنصرٍ في الصفحة، ولو مرّت
   تحت الهيدر لانقطع ضلعها العلوي وانكسر الإيهام. pointer-events:none
   يبقيها غير حاجبة للتفاعل. */
.sheet {
  position: fixed;
  inset: 0.8rem;
  z-index: 60;
  border: 1px solid color-mix(in oklch, var(--rule-ink) 60%, transparent);
  pointer-events: none;
}
.sheet i {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border: 0 solid var(--gold);
}
.sheet i:nth-child(1) { inset-block-start: -1px; inset-inline-start: -1px; border-block-start-width: 2px; border-inline-start-width: 2px; }
.sheet i:nth-child(2) { inset-block-start: -1px; inset-inline-end: -1px;   border-block-start-width: 2px; border-inline-end-width: 2px; }
.sheet i:nth-child(3) { inset-block-end: -1px;   inset-inline-start: -1px; border-block-end-width: 2px;   border-inline-start-width: 2px; }
.sheet i:nth-child(4) { inset-block-end: -1px;   inset-inline-end: -1px;   border-block-end-width: 2px;   border-inline-end-width: 2px; }

/* الإطار يخنق الشاشات الضيّقة — يُرفع تحت 48rem */
@media (max-width: 47.99rem) { .sheet { display: none; } }

/* ── المسطرة الجانبية — مقياسٌ يتبع التمرير ──────────────────────────── */

.ruler {
  position: fixed;
  inset-block: 18vh 18vh;
  inset-inline-end: 1.85rem;
  z-index: 40;
  width: 1.6rem;
  pointer-events: none;
}
.ruler-line {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 1px;
  /* تدريج المسطرة: علامة كلّ 8px، وكبرى كل 40px */
  background:
    repeating-linear-gradient(to bottom,
      var(--rule-ink) 0 1px, transparent 1px 8px);
  opacity: 0.5;
}
.ruler-major {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 0.5rem;
  background: repeating-linear-gradient(to bottom,
      var(--rule-ink) 0 1px, transparent 1px 40px);
  opacity: 0.55;
}
/* المؤشّر — يتحرّك بـtranslateY فقط (مركَّب، لا يعيد التخطيط) */
.ruler-head {
  position: absolute;
  inset-inline-end: -0.25rem;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  translate: 0 -50%;
  transform: translateY(var(--at, 0px));
  will-change: transform;
}
.ruler-head::after {
  content: "";
  width: 1.1rem;
  height: 2px;
  background: var(--gold);
}
.ruler-head b {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 61.99rem) { .ruler { display: none; } }

/* ── سهم الشمال ──────────────────────────────────────────────────────── */

.north {
  position: fixed;
  inset-block-end: 1.9rem;
  inset-inline-end: 1.5rem;
  z-index: 40;
  width: 2.1rem;
  color: var(--ink-faint);
  pointer-events: none;
  opacity: 0.75;
}
@media (max-width: 61.99rem) { .north { display: none; } }

/* ── خطّ القياس — عنوان القسم بلغة المخطّط ───────────────────────────── */

.dim {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-end: clamp(1.5rem, 3vw, 2.6rem);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.5;
  color: var(--gold-deep);
}
/* الطرفان علامتا قياس رأسيتان، والوسط خطٌّ يُرسم من جهة القراءة */
.dim::before,
.dim::after {
  content: "";
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  transform: scaleX(var(--draw, 1));
  transition: transform 1.1s var(--ease-out) var(--reveal-delay, 0ms);
}
.dim::before { width: clamp(1.5rem, 4vw, 3rem); flex: none; transform-origin: inline-start; }
.dim::after  { flex: 1 1 auto; min-width: 1.5rem; transform-origin: inline-start; }

/* flex:0 1 auto لا none: العنوان الإنكليزي أطول من العربي، ومع none
   يفرض عرضاً أكبر من الشاشة فيُقتطع صامتاً تحت overflow-x:hidden. */
.dim b {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  padding-inline: 0.15rem;
}
/* علامتا القياس على طرفَي النصّ */
.dim b::before,
.dim b::after {
  content: "";
  position: absolute;
  inset-block: -0.32rem;
  width: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.dim b::before { inset-inline-start: -0.5rem; }
.dim b::after  { inset-inline-end: -0.5rem; }

/* يُرسم عند الظهور */
[data-reveal] .dim,
.dim[data-reveal] { --draw: 0; }
[data-reveal][data-shown="true"] .dim,
.dim[data-reveal][data-shown="true"] { --draw: 1; }

.band--ink .dim { color: var(--gold); }
.band--ink .dim::before,
.band--ink .dim::after,
.band--ink .dim b::before,
.band--ink .dim b::after { background: var(--gold); }

/* ── الإحداثيات تحت الهيرو ───────────────────────────────────────────── */

.coords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.coords span { display: inline-flex; align-items: center; gap: 0.5rem; }
.coords span::before {
  content: "";
  width: 0.3rem; height: 0.3rem;
  background: var(--gold);
  rotate: 45deg;
}

/* ── جدول بيانات اللوح — الفوتر ──────────────────────────────────────── */

.titleblock {
  display: grid;
  gap: 1px;
  background: color-mix(in oklch, var(--on-ink) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--on-ink) 16%, transparent);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 34rem) { .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .titleblock { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } }

.titleblock > div {
  padding: 1.05rem 1.25rem;
  background: var(--ink-band);
}
/* 58% كان يعطي 4.17:1 على الحبر — رسوبٌ في AA لنصٍّ بحجم 10px. */
.titleblock dt {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: color-mix(in oklch, var(--on-ink) 72%, transparent);
}
.titleblock dd {
  margin: 0.45rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-ink);
  line-height: 1.6;
}
.titleblock .tb-brand { display: grid; align-content: center; gap: 0.9rem; }
.titleblock .tb-brand img { width: clamp(7rem, 16vw, 9.5rem); }
.titleblock .tb-brand p { font-size: var(--fs-xs); color: var(--on-ink-mute); line-height: 1.75; }

/* --------------------------------------------------------------------------
   11. الحركة — دخول مُنسَّق متدرّج، transform/opacity فقط
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.35rem);
  transition:
    opacity 0.85s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.85s var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn::before { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   12. الطباعة و PDF
   -------------------------------------------------------------------------- */

@media print {
  /* الألوان هنا تصميمٌ لا زينة: الورق الدافئ والشريط الحبري والذهبي.
     بدون print-color-adjust يُسقطها المتصفّح فتخرج الصفحة بيضاء جرداء. */
  *, *::before, *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* أخطر بند هنا: الكشف بالتمرير يعتمد IntersectionObserver وهو لا يعمل
     في سياق الطباعة، فتبقى العناصر عند opacity:0 ويخرج الملفّ فارغاً. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dim { --draw: 1; }

  /* طبقة اللوح ثابتة الموضع — تتكرّر على كل ورقة أو تنزاح. تُرفع. */
  .sheet, .ruler, .north, .scroll-cue, .skip-link { display: none !important; }

  /* اللصق والضبابية بلا معنى على الورق */
  .site-header {
    position: static;
    backdrop-filter: none;
    border-block-end: 1px solid var(--rule);
  }
  .header-actions .btn { display: none; }   /* «تواصل معنا» زرٌّ لا يُنقر مطبوعاً */

  /* ارتفاع الشاشة لا يُترجم إلى ورق */
  .hero { min-height: 0; }
  .hero > .shell { padding-block: 2.25rem 1.75rem; }
  .band > .shell  { padding-block: 1.9rem; }
  .site-footer > .shell { padding-block: 1.9rem 1.25rem; }

  /* ورقة لكل قسم */
  #services, .statement, #contact { break-before: page; }
  .svc li, .titleblock > div, .contact-list li { break-inside: avoid; }

  /* الفوتر كتلةٌ واحدة: بدون هذا ينكسر سطر الحقوق وحده على ورقةٍ
     فارغة في آخر الملف. */
  .site-footer { break-inside: avoid; }
  .footer-base { break-before: avoid; }

  /* الهوامش يتكفّل بها إطار الصفحة نفسه */
  @page { margin: 12mm; }
}

/* --------------------------------------------------------------------------
   نافذة اختيار قناة التواصل (واتساب / اتصال)
   -------------------------------------------------------------------------- */

.choice {
  width: min(22rem, calc(100vw - 2rem));
  padding: 0;
  margin: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-ink);
  border-block-start: 3px solid var(--gold);
}
.choice::backdrop { background: oklch(0.24 0.006 40 / 0.55); }
.choice-box { display: grid; justify-items: center; gap: 1rem; padding: 1.75rem 1.5rem 1.25rem; text-align: center; }
.choice-mark { height: 3.2rem; width: auto; }
.choice-num { font-size: var(--fs-sm); color: var(--ink-mute); letter-spacing: 0.04em; }
.choice-actions { display: grid; gap: 0.6rem; width: 100%; }
.choice-close {
  font: inherit; font-size: var(--fs-xs); color: var(--ink-faint);
  background: none; border: 0; padding: 0.4rem 0.8rem; cursor: pointer;
  border-block-end: 1px solid var(--rule-ink);
}
.choice-close:hover { color: var(--ink); border-block-end-color: var(--gold); }
@media print { .choice { display: none !important; } }