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

   @charset أعلاه إجباريّ ويجب أن يبقى أوّل شيء في الملف بلا تعليقٍ قبله.
   بدونه، وحين لا يرسل الخادم charset، يقرأ المتصفّح الملفّ بترميزٍ محلّي.

   وثيقة هادئة على ورق دافئ، بفتحة معمارية واحدة: إطار صورة الهيرو مقطوعٌ
   بزاوية سقف الشعار (65°)، وخطٌّ ذهبي واحد يوازي القطع. هذا هو التوقيع
   الوحيد، ويتكرّر بهدوء في شَرطة عناوين الأقسام. لا زخرفة غيره.

   الطباعة: Cairo 700 للعناوين العربية، Montserrat 700 لعناوين
   الإنكليزية، IBM Plex Sans Arabic 400/500 للنصّ والأزرار في اللغتين.
   المصدر اللوني: aqar_office/lib/app/theme.dart. لا تخترع ألواناً جديدة.
   الخصائص منطقية (inline-start/end) فتنعكس الصفحة وحدها مع اللغة،
   عدا clip-path والدوران، وهما فيزيائيان فيُكتبان مرّتين ([dir]).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. خطوط بديلة مضبوطة القياس
   قبل وصول خطوط Google (display=swap) تُرسم الصفحة بخطّ نظام، فإن اختلف
   عرض حروفه انكسرت الأسطر على غير موضعها ثم قفزت عند التبديل (CLS).
   كل وجهٍ هنا خطّ نظامٍ محلّي (لا تنزيل) مكبَّرٌ أو مصغَّرٌ بـsize-adjust
   ليشغل عرض الخطّ الأصلي، وصعوده وهبوطه مطابقان له.
   القيم مقيسة في المتصفّح على نصوص الصفحة نفسها (عرض الحروف إجمالاً):
     Text FB    ← IBM Plex Sans Arabic 400/500 (صعود 1.09، هبوط 0.41)
     Display FB ← Cairo 700 للعربية، Montserrat 700 للاتينية (Latin AR: عرض Montserrat بقياس Cairo)
   العربية واللاتينية وجهان منفصلان (unicode-range) لأنّ نسبة العرض تختلف.
   الترتيب: Geeza Pro (Apple)، Tahoma (ويندوز)، Arial احتياطاً.
   القيم مضبوطة أوّلاً على نصوص الهيرو (h1 والمقدّمة) بين 320 و1440px: إن تغيّر
   نصّ الهيرو فأعد القياس، وإلا عاد سطرٌ يقفز عند وصول الخطّ.
   لا ضبط لـSegoe UI ولا لخطوط Noto في أندرويد: غير متاحة للقياس هنا.
   إن تغيّرت أوزان الخطوط أو الخطوط نفسها فأعد القياس.
   -------------------------------------------------------------------------- */

@font-face { font-family: "Text FB Latin"; font-weight: 400; src: local("Arial"), local("ArialMT"); unicode-range: U+0000-05FF, U+1E00-1EFF, U+2000-22FF; size-adjust: 102.15%; ascent-override: 106.71%; descent-override: 40.14%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Latin"; font-weight: 500; src: local("Arial"), local("ArialMT"); unicode-range: U+0000-05FF, U+1E00-1EFF, U+2000-22FF; size-adjust: 102.4%; ascent-override: 106.45%; descent-override: 40.04%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Geeza"; font-weight: 400; src: local("Geeza Pro Regular"), local("GeezaPro"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 111%; ascent-override: 98.2%; descent-override: 36.94%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Geeza"; font-weight: 500; src: local("Geeza Pro Regular"), local("GeezaPro"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 103.24%; ascent-override: 105.58%; descent-override: 39.71%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Tahoma"; font-weight: 400; src: local("Tahoma"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 95%; ascent-override: 114.74%; descent-override: 43.16%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Tahoma"; font-weight: 500; src: local("Tahoma"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 88.43%; ascent-override: 123.26%; descent-override: 46.36%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Arial"; font-weight: 400; src: local("Arial"), local("ArialMT"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 116%; ascent-override: 93.97%; descent-override: 35.34%; line-gap-override: 0%; }
@font-face { font-family: "Text FB Arial"; font-weight: 500; src: local("Arial"), local("ArialMT"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 113.3%; ascent-override: 96.2%; descent-override: 36.19%; line-gap-override: 0%; }
@font-face { font-family: "Display FB Latin"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); unicode-range: U+0000-05FF, U+1E00-1EFF, U+2000-22FF; size-adjust: 108.3%; ascent-override: 89.57%; descent-override: 23.08%; line-gap-override: 0%; }
@font-face { font-family: "Display FB Latin AR"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); unicode-range: U+0000-05FF, U+1E00-1EFF, U+2000-22FF; size-adjust: 108.3%; ascent-override: 120.04%; descent-override: 52.63%; line-gap-override: 0%; }
@font-face { font-family: "Display FB Geeza"; font-weight: 700; src: local("Geeza Pro Bold"), local("GeezaPro-Bold"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 103.8%; ascent-override: 125.24%; descent-override: 54.91%; line-gap-override: 0%; }
@font-face { font-family: "Display FB Tahoma"; font-weight: 700; src: local("Tahoma Bold"), local("Tahoma-Bold"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 92.75%; ascent-override: 140.16%; descent-override: 61.46%; line-gap-override: 0%; }
@font-face { font-family: "Display FB Arial"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; size-adjust: 132.6%; ascent-override: 98.04%; descent-override: 42.99%; line-gap-override: 0%; }

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

:root {
  /* الحبر: محايد مائل للدفء، لا أسود نقي أبداً.
     التباين محسوب في 02-critique.md (لا تُفتَّح القيم المعدّلة):
     ink-mute/paper 8.02، ink-faint/paper 5.89، ink-faint/paper-warm 5.60 */
  --ink:        oklch(0.240 0.006 40);    /* ≈ #231F20 */
  --ink-soft:   oklch(0.320 0.004 120);   /* ≈ #2A2B2A، نصّ المتن */
  --ink-mute:   oklch(0.420 0.008 60);    /* ≈ #4E4A47، المقدّمات والأوصاف */
  --ink-faint:  oklch(0.490 0.010 70);    /* ≈ #63605B، بيانات صغيرة فقط */

  /* الورق */
  --paper:      oklch(0.980 0.005 82);    /* ≈ #FAF7F2 */
  --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 زخرفة فقط على الورق (2.41:1)، gold-deep للنصّ والتركيز (5.21:1) */
  --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);

  /* الشريط الحبري (النهج والفوتر). gold-deep ممنوع هنا (2.93:1) */
  --ink-band:    oklch(0.245 0.006 45);
  --on-ink:      oklch(0.905 0.006 80);   /* 12.19:1 */
  --on-ink-mute: oklch(0.780 0.008 78);   /* 8.10:1 */

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

  /* الطباعة */
  /* أوّل وجهٍ في القائمة يحدّد صعود السطر وهبوطه، فاللاتيني البديل في العربية
     يحمل قياس Cairo (Latin AR)، وفي الإنكليزية قياس Montserrat. */
  --font-fb-display: "Display FB Latin AR", "Display FB Geeza", "Display FB Tahoma", "Display FB Arial";
  --font-display: "Cairo", "Montserrat", var(--font-fb-display), sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Text FB Latin", "Text FB Geeza", "Text FB Tahoma", "Text FB Arial", "Segoe UI", Tahoma, sans-serif;
  --lh-body: 1.7;
  --lh-display: 1.45;
  --ls-display: 0;

  --fs-h1:   clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
  --fs-h2:   clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-h3:   clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --fs-body: clamp(1.0625rem, 1.04rem + 0.12vw, 1.125rem);
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-xs:   0.8125rem;   /* 13px، لا أصغر منه */

  /* المسافات: 4 8 12 16 24 32 48 64 96 */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;    --s-9: 6rem;
  --gutter: clamp(1.15rem, 4.2vw, 4.5rem);
  --band-y: clamp(4rem, 2.6rem + 5vw, 7rem);
  --maxw: 82rem;

  /* الحواف: ما يُضغط فقط مدوَّر قليلاً، والعمارة مقطوعة مربّعة */
  --r-control: 3px;
  --r-dialog: 4px;

  /* الحركة */
  --dur-fast: 160ms;
  --dur-reveal: 320ms;
  --dur-draw: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* الإنكليزية: Montserrat للعناوين، وسطور أضيق للاتيني */
:root[lang="en"] {
  --font-fb-display: "Display FB Latin", "Display FB Geeza", "Display FB Tahoma", "Display FB Arial";
  --font-display: "Montserrat", "Cairo", var(--font-fb-display), sans-serif;
  --lh-body: 1.6;
  --lh-display: 1.15;
  --ls-display: -0.015em;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

/* الإنكليزية محفوظة: lang-boot.js يضيف الصنف قبل الرسم، وsite.js يزيله بعد
   تبديل النصوص (أو بعد 3 ثوانٍ). العربية لا تمرّ بهذا أبداً. */
.i18n-pending body { visibility: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
/* سمتا width/height في الـHTML تلميحٌ للنسبة؛ height:auto يعيد النسبة حين
   يحدّد الـCSS بُعداً واحداً. */
img { height: auto; }
button { font: inherit; color: inherit; }

a {
  color: var(--ink);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold-deep); }

/* التركيز: لا يُزال أبداً. على الحبر يصير gold لأنّ gold-deep يهبط إلى 2.93:1 */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: var(--r-control);
}
.on-ink :focus-visible { outline-color: var(--gold); }
.on-ink a:hover { color: var(--gold); }

::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);
  border-radius: var(--r-control);
}
.skip-link:focus { inset-block-start: 0.75rem; color: var(--paper); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* حاوية رموز Lucide: موجودة للمرجع فقط، بلا مساحة */
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--14 { inline-size: 14px; block-size: 14px; }
.icon--16 { inline-size: 16px; block-size: 16px; }
.icon--20 { inline-size: 20px; block-size: 20px; }
.icon--28 { inline-size: 28px; block-size: 28px; }

/* اللاتيني داخل نصٍّ عربي (أرقام وبريد): يبقى LTR ولا ينقلب «963+» */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums lining-nums; }

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

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

.band > .shell { padding-block: var(--band-y); }
.band--warm { background: var(--paper-warm); }
.band--ink { background: var(--ink-band); color: var(--on-ink-mute); }

/* --------------------------------------------------------------------------
   4. التايبوغرافي
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
}
:root[lang="en"] .h3 { line-height: 1.3; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-mute);
  /* em لا ch في كل عروض السطور: ch يُقاس بالرقم 0 من الخطّ المتاح، فيتغيّر العرض
     حين يحلّ الخطّ الأصلي محلّ البديل وتنكسر الأسطر من جديد. القيم = الـch
     القديمة بخطوطنا: 0 في Plex = 0.6em، في Cairo 700 = 0.556em، في Montserrat 700 = 0.679em. */
  max-inline-size: 27.6em;   /* 46ch Plex */
}

/* عنوان القسم الصغير، مسبوقاً بالشَّرطة المائلة بزاوية الشعار (التكرار
   الهادئ للتوقيع). الشَّرطة تميل بميل قطع الجملون نفسه في كل اتجاه. */
.label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-5);
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
}
/* التباعد الحرفي يكسر وصل الحروف العربية */
:lang(ar) .label { letter-spacing: 0; }
.label::before {
  content: "";
  flex: none;
  inline-size: 2px;
  block-size: 0.95em;
  background: currentColor;
  transform: skewX(calc(var(--angle) - 90deg));   /* "/" */
}
[dir="ltr"] .label::before { transform: skewX(calc(90deg - var(--angle))); }   /* "\" */
.on-ink .label { color: var(--gold); }

/* --------------------------------------------------------------------------
   5. الأزرار والروابط النصّية
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 48px;
  padding: 0.625rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
/* paper على gold-deep = 5.21:1 */
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }
.btn:active { translate: 0 1px; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-ink); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn--sm { min-block-size: 44px; padding: 0.5rem 1rem; font-size: var(--fs-sm); }

/* السهم يتبع اتجاه القراءة رمزاً وحركةً */
.arrow { display: inline-block; transition: translate var(--dur-fast) var(--ease-out); }
.arrow::before { content: "\2190"; }                       /* ← */
[dir="ltr"] .arrow::before { content: "\2192"; }           /* → */
.arrow { --dir: 1; }
[dir="ltr"] .arrow { --dir: -1; }
a:hover .arrow { translate: calc(-3px * var(--dir)) 0; }

/* رابط نصّي ثانوي («اكتشف خدماتنا»): مسطَّر بـgold-deep، هدف 44px */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
/* الخطّ تحت النصّ وحده: لو سُطِّر الرابط كلّه لانقطع الخطّ عند الفجوة والسهم */
.text-link > span:not(.arrow) {
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 0.3em;
}

/* أزرار نصّية بأيقونة (اتّصل بنا / راسلنا بالبريد) */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.text-btn:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   6. الهيدر
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) 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: var(--s-3);
  padding-block: var(--s-3);
}

.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { block-size: clamp(2.75rem, 2.2rem + 2vw, 4rem); inline-size: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
}

.nav-link,
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: var(--s-2);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-mute);
  text-decoration: none;
}
.nav-link:hover,
.lang-toggle:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 0.3em;
}
.lang-toggle {
  background: none;
  border: 0;
  border-radius: var(--r-control);
  cursor: pointer;
}
/* الصفّ لا يتّسع للرابط والزرّين معاً على الشاشات الضيّقة */
@media (max-width: 26rem) { .nav-link { display: none; } }

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

/* clip لا hidden: يقصّ نتوء الخطّ الذهبي دون إنشاء حاوية تمرير */
.hero { overflow: clip; }
.hero > .shell { padding-block: clamp(2.5rem, 5vw, 5rem); }

.hero-grid { display: grid; gap: var(--s-7); }

.hero h1 { max-inline-size: 8.34em; }                     /* 15ch Cairo */
:root[lang="en"] .hero h1 { max-inline-size: 12.22em; }   /* 18ch Montserrat */
.hero h1 em { font-style: normal; color: var(--gold-deep); }

.hero-lead { margin-block-start: var(--s-5); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-block-start: var(--s-6);
}

.service-area {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

/* ── إطار الصورة وقطع الجملون ─────────────────────────────────────────
   القطع عند الزاوية العلوية الخارجية (inline-end): أعلى اليسار في RTL
   وأعلى اليمين في LTR. --cut-x من العرض و--cut-y من الارتفاع، بحيث
   cut-y·H / cut-x·W = tan 65° ≈ 2.14:
     الجوال 4:3  → 8% و23%    (0.23·0.75 / 0.08 = 2.16)
     المكتب 4:5  → 9% و15.4%  (0.154·1.25 / 0.09 = 2.14)
   الخطّ الذهبي (3px) يوازي القطع على بعد 10px خارجه وبطول 1.3× طوله.
   إزاحة 10px على العمودي الخارجي = (9.06px أفقياً، 4.23px رأسياً). */

.hero-figure {
  --cut-x: 8%;
  --cut-y: 23%;
  --bar-len: 24.7%;   /* 1.3 × √(0.08² + (0.23·0.75)²) */
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
}

.hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper-warm);
  clip-path: polygon(var(--cut-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-y));
}
/* الإطار يُعكس بـclip-path لا بـscaleX(-1)، كي لا يتبعه قلب الصورة (قلبها قرارٌ مستقلّ أدناه) */
[dir="ltr"] .hero-photo {
  clip-path: polygon(0 0, calc(100% - var(--cut-x)) 0, 100% var(--cut-y), 100% 100%, 0 100%);
}

.hero-photo picture,
.hero-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* الصورة 4:5؛ على الجوال (إطار 4:3) يُقصّ أعلاها ويبقى الباب والدرج وجذع
     الزيتونة. على المكتب الإطار 4:5 فتظهر كاملة. */
  object-position: 50% 70%;
}
/* قرار المالك: العربية تعرض الصورة كأصلها (الزيتونة يساراً)، والإنكليزية
   تعرضها مقلوبة (الزيتونة يميناً). القلب على الصورة وحدها، فالإطار والقطع
   لهما clip-path منفصل لكل [dir]. x في المنتصف فلا يتغيّر القصّ بالقلب. */
[dir="ltr"] .hero-photo img { transform: scaleX(-1); }

.gable-bar {
  position: absolute;
  inset-block-start: calc(var(--cut-y) / 2 - 4.23px - 1.5px);
  inset-inline-start: calc(100% - var(--cut-x) / 2 + 9.06px - var(--bar-len) / 2);
  inline-size: var(--bar-len);
  block-size: 3px;
  rotate: calc(-1 * var(--angle));
  pointer-events: none;
}
[dir="ltr"] .gable-bar { rotate: var(--angle); }

/* يُرسم مرّة على محوره من طرفه السفلي. العنصر الداخلي يحمل scale كي لا
   يتداخل مع الدوران. الطرف السفلي: يسار العنصر في RTL ويمينه في LTR. */
.gable-bar i {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
}
[dir="ltr"] .gable-bar i { transform-origin: 100% 50%; }

@media (prefers-reduced-motion: no-preference) {
  .gable-bar i { animation: gable-draw var(--dur-draw) var(--ease-out) 150ms both; }
}
@keyframes gable-draw {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* الجوال: الزرّ الأساسي بعرض العمود */
@media (max-width: 39.99rem) {
  .btn--hero { inline-size: 100%; }
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-8);
    align-items: center;
  }
  .hero-figure {
    --cut-x: 9%;
    --cut-y: 15.4%;
    --bar-len: 27.6%;   /* 1.3 × √(0.09² + (0.154·1.25)²) */
    aspect-ratio: 4 / 5;
    /* على شاشة 1366×768 لا يتجاوز الإطار 80% من الارتفاع، وتبقى النسبة 4:5
       (فتبقى زاوية القطع 65°) لأنّ العرض هو الذي يُقيَّد. */
    inline-size: min(100%, calc(min(709px, 80svh) * 0.8));
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   8. رؤوس الأقسام
   -------------------------------------------------------------------------- */

.section-head { margin-block-end: var(--s-7); }
.section-head .lead { margin-block-start: var(--s-5); }

@media (min-width: 60rem) {
  .section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: end;
    align-items: last baseline;
  }
  .section-head--split .label { grid-column: 1 / -1; }
  .section-head--split .lead { margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   9. الخدمات
   -------------------------------------------------------------------------- */

/* شبكة ورق المخطّط: أخفّ، وخلف رأس القسم فقط، تتلاشى قبل بدء الوحدات */
.band--services { position: relative; isolation: isolate; }
.band--services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 4rem 4rem;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--band-y) + 3rem), transparent calc(var(--band-y) + 11rem));
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--band-y) + 3rem), transparent calc(var(--band-y) + 11rem));
  pointer-events: none;
}

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6) var(--s-7);
}
@media (min-width: 40rem) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
}
@media (min-width: 60rem) {
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* الوحدة ليست رابطاً: لا cursor ولا تركيز. الخطّ العلوي وحده يذهِّب عند المرور */
.svc li {
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.svc li:hover { border-block-start-color: var(--gold); }

.svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.svc-no {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-deep);
}
.svc-top .icon { color: var(--ink-mute); }
.svc h3 { margin-block-start: var(--s-3); }
.svc p {
  margin-block-start: var(--s-2);
  color: var(--ink-mute);
  max-inline-size: 37.2em;   /* 62ch Plex */
}

/* --------------------------------------------------------------------------
   10. شريط النهج
   -------------------------------------------------------------------------- */

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

/* قناع الشعار علامةً مائية في الطرف المقابل للنصّ (inline-end) */
.statement::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  inline-size: min(38vw, 30rem);
  aspect-ratio: 493 / 444;
  translate: 0 -50%;
  background: url("../brand/mark-light.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
@media (max-width: 39.99rem) { .statement::before { inline-size: 60vw; } }
/* الـshell بعد العلامة في ترتيب الرسم فيبقى النصّ فوقها */
.statement > .shell { position: relative; }

.statement-h {
  font-size: var(--fs-h2);
  color: var(--on-ink);
  max-inline-size: 11.12em;   /* 20ch Cairo */
}
:root[lang="en"] .statement-h { max-inline-size: 13.58em; }   /* 20ch Montserrat */
.statement-p {
  margin-block-start: var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--on-ink-mute);
  max-inline-size: 31.2em;   /* 52ch Plex */
}

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

.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 60rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s-8);
    align-items: start;
  }
}

.contact-main .lead { margin-block-start: var(--s-5); }

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.contact-alt { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }

@media (max-width: 39.99rem) {
  .contact-actions { align-items: stretch; }
  .contact-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--s-5);
}
@media (min-width: 40rem) { .contact-panel { padding: var(--s-6); } }

.contact-list { display: grid; gap: 1.25rem; }
.contact-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}
.contact-list li > .icon { color: var(--ink-mute); margin-block-start: 0.125rem; }

.contact-row { display: flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; }
.contact-row .k {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-mute);
}
.contact-row .v { color: var(--ink); font-weight: 500; }
span.v { padding-block: var(--s-1); }

/* قيم الهاتف والبريد روابط: هدف 44px */
.v-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  text-decoration: underline;
  text-decoration-color: var(--rule-ink);
}
.v-link:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
}

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

.site-footer {
  background: var(--ink-band);
  color: var(--on-ink-mute);
  font-size: var(--fs-sm);
}
.site-footer > .shell { padding-block: clamp(3rem, 5vw, 4.5rem) var(--s-6); }

.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); }
  .footer-brand { grid-column: auto; }
}

.footer-brand img { block-size: 56px; inline-size: auto; }
.footer-brand p { margin-block-start: var(--s-4); max-inline-size: 24em; /* 40ch Plex */ line-height: 1.7; }

/* h2 للبنية، بمظهر العنوان الصغير */
.footer-h {
  margin-block-end: var(--s-1);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--on-ink);
}

.footer-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  color: var(--on-ink-mute);
  text-decoration: none;
}
.footer-list a:hover { color: var(--gold); text-decoration: underline; }
.footer-list .map-link { text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--on-ink) 35%, transparent); }
.footer-address { padding-block: var(--s-2); line-height: 1.6; }

.footer-base {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid color-mix(in oklch, var(--on-ink) 16%, transparent);
  font-size: var(--fs-xs);
  color: var(--on-ink-mute);
}

/* --------------------------------------------------------------------------
   13. الكشف بالتمرير: تحت الهيرو فقط، قصير، ومشروط بـJS
       بلا JS لا يوجد صنف js فيبقى كل شيء ظاهراً.
   -------------------------------------------------------------------------- */

[data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal-delay="1"] { --reveal-delay: 60ms; }
[data-reveal-delay="2"] { --reveal-delay: 120ms; }   /* الحدّ الأقصى */

.js [data-reveal]:not([data-shown]) { opacity: 0; translate: 0 8px; }

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

.choice {
  inline-size: min(22rem, calc(100vw - 2rem));
  padding: 0;
  margin: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-dialog);
  box-shadow: 0 24px 60px oklch(0.24 0.006 40 / 0.18);
}
.choice::backdrop { background: oklch(0.24 0.006 40 / 0.55); }
.choice[open] { animation: choice-in 180ms var(--ease-out); }
@keyframes choice-in {
  from { opacity: 0; scale: 0.98; }
  to   { opacity: 1; scale: 1; }
}

.choice-box {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: 1.75rem 1.5rem 1rem;
  text-align: center;
}
.choice-mark { block-size: 3.2rem; inline-size: auto; }
.choice-num { font-size: var(--fs-sm); color: var(--ink-mute); }
.choice-actions { display: grid; gap: var(--s-2); inline-size: 100%; }
.choice-close {
  min-block-size: 44px;
  padding-inline: var(--s-4);
  background: none;
  border: 0;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  text-decoration: underline;
  text-decoration-color: var(--rule-ink);
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.choice-close:hover { color: var(--ink); text-decoration-color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   15. تقليل الحركة: لا كشف، الخطّ ثابت بطوله، لا تمرير ناعم، النافذة فوراً
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal]:not([data-shown]) { opacity: 1; translate: none; }
  [data-reveal] { transition: none; }
  .gable-bar i { animation: none; scale: 1 1; }
  .choice[open] { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

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

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

  /* IntersectionObserver لا يعمل في سياق الطباعة: كل شيء ظاهر */
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  .gable-bar i { animation: none !important; scale: 1 1 !important; }

  .skip-link, .choice { display: none !important; }

  .site-header {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-block-end: 1px solid var(--rule);
  }
  /* أزرار لا تُنقر مطبوعةً */
  .header-actions { display: none; }

  .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, .contact-list li, .footer-group { break-inside: avoid; }

  .site-footer { break-inside: avoid; }
  .footer-base { break-before: avoid; }

  @page { margin: 12mm; }
}