/* =====================================================================
   NINE PRO — ملف التنسيق الرئيسي
   ---------------------------------------------------------------------
   هذا الملف وحده يتحكم في شكل كل صفحات الموقع.
   ترتيبه من العام إلى الخاص:
     1. الخط
     2. المتغيرات: الألوان، والأحجام، والمسافات
     3. الأساس: إعدادات عامة لكل الصفحة
     4. الطباعة: العناوين والفقرات
     5. التخطيط: الحاوية والأقسام
     6. الأزرار
     7. رأس الصفحة
     8. التذييل
     9. شريط واتساب السفلي (للهاتف فقط)
    10. إمكانية الوصول وتقليل الحركة
    11. شريط درجات الأفلام (عنصر مشترك)
    12. الصفحة الرئيسية
    13. الصفحات الداخلية: العنوان والصورة (مشترك بين السيارات والمباني)
    14. صفحة السيارات: بطاقات الخدمات
    15. قسم «زورونا» (مشترك)
    21. قسم «زورونا» مع صورة من المركز
    16. صفحة المباني: التحديات والمزايا
    17. أداة «اختر درجتك» (المباني والسيارات)
    18. (محذوف: جدول الدرجات)
    19. صفحة المباني: الضمان والعملاء والعناية
    20. صفحة 404
   لتغيير لون أو حجم في كل الموقع: عدّل المتغيرات في القسم 2 فقط.
   ===================================================================== */


/* =====================================================================
   1. الخط — Readex Pro
   ملف للحروف العربية وملف للحروف اللاتينية والأرقام.
   المتصفح يحمّل فقط الملف الذي تحتاجه الصفحة.
   الترخيص في: assets/fonts/OFL-LICENSE.txt
   ===================================================================== */
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("/assets/fonts/readex-pro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("/assets/fonts/readex-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =====================================================================
   2. المتغيرات
   ===================================================================== */
:root {
  /* --- الألوان الأساسية --- */
  --ink: #0E0E0F;          /* الفحمي: الخلفية الداكنة ونص الخلفيات الفاتحة */
  --ink-raised: #1A1A1C;   /* سطح مرفوع قليلاً فوق الفحمي: بطاقات وخطوط */
  --paper: #F2F1EC;        /* الأبيض المائل للرمادي */
  --muted-on-ink: #A3A3A6; /* نص ثانوي على الخلفية الداكنة */
  --muted-on-paper: #55555A; /* نص ثانوي على الخلفية الفاتحة */
  --line-on-ink: #2C2C2F;  /* خطوط فاصلة على الداكن */

  /* --- درجات الأفلام الخمس: ألوان مأخوذة من المنتج نفسه --- */
  --film-20: #2E2E30;
  --film-35: #56565A;
  --film-50: #8A8A8D;
  --film-70: #B8B8BA;
  --film-frost: #E2E2DF;

  /* --- مقياس الخطوط: كل درجة أكبر من التي قبلها بنسبة 1.25 --- */
  --fs--1: 0.8rem;
  --fs-0: 1rem;
  --fs-1: 1.25rem;
  --fs-2: 1.5625rem;
  --fs-3: 1.953rem;
  --fs-4: 2.441rem;
  --fs-5: 3.052rem;

  /* --- نظام المسافات: مضاعفات 8 بكسل --- */
  --s-1: 4px;
  --s0: 8px;
  --s1: 16px;
  --s2: 24px;
  --s3: 32px;
  --s4: 48px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;

  /* --- ميلان الشعار: نفس زاوية حروف NINE PRO --- */
  --slant: -8deg;

  /* --- قياسات ثابتة --- */
  --container: 72rem;      /* أقصى عرض للمحتوى على الحاسوب */
  --gutter: var(--s1);     /* الهامش الجانبي على الهاتف */
  --header-h: 64px;        /* ارتفاع رأس الصفحة */
  --bar-h: 64px;           /* ارتفاع شريط واتساب السفلي */
  --tap: 48px;             /* أقل ارتفاع لأي زر يُضغط بالإصبع */
}

/* على الشاشات العريضة: هامش جانبي أكبر */
@media (min-width: 48rem) {
  :root { --gutter: var(--s4); }
}


/* =====================================================================
   3. الأساس
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;                  /* 16 بكسل على الهاتف */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);  /* القفز لقسم لا يختفي تحت الرأس */
}
@media (min-width: 64rem) {
  html { font-size: 112.5%; }       /* 18 بكسل على الحاسوب */
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Readex Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-0);
  line-height: 1.8;                 /* تباعد مريح للعربي */
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

/* الأرقام الإنجليزية والهاتف داخل النص العربي: اتجاه مستقل */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }


/* =====================================================================
   4. الطباعة
   ===================================================================== */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;               /* أسطر عناوين متوازنة الطول */
}
/* الأحجام تكبر درجة مع كل شاشة أعرض، على نفس المقياس:
   الهاتف: 31 / 25 / 20 بكسل — اللوحي: 39 / 31 — الحاسوب: 55 / 44 */
h1 { font-size: var(--fs-3); font-weight: 700; }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-1); }

@media (min-width: 48rem) {
  h1 { font-size: var(--fs-4); }
  h2 { font-size: var(--fs-3); }
}
@media (min-width: 64rem) {
  h1 { font-size: var(--fs-5); }
  h2 { font-size: var(--fs-4); }
}

p { margin: 0; max-width: 62ch; text-wrap: pretty; }

/* سطر إنجليزي منفصل تحت العنوان العربي */
.en {
  display: block;
  direction: ltr;
  text-align: right;
  font-size: var(--fs--1);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
}

.lead { font-size: var(--fs-1); color: var(--muted-on-ink); }

/* مسافة صغيرة بين السطر الإنجليزي والعنوان الذي تحته */
.en + h1,
.en + h2 { margin-block-start: var(--s0); }


/* =====================================================================
   5. التخطيط
   ===================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* قسم عادي على الخلفية الداكنة: 64 بكسل أعلى وأسفل على الهاتف، 96 على الحاسوب */
.section { padding-block: var(--s5); }
@media (min-width: 48rem) {
  .section { padding-block: var(--s6); }
}

/* قسم على الخلفية الفاتحة */
.section--paper {
  background: var(--paper);
  color: var(--ink);
}
.section--paper .en,
.section--paper .lead { color: var(--muted-on-paper); }

/* ترتيب العناصر عمودياً بمسافة ثابتة بينها */
.stack > * + * { margin-block-start: var(--s2); }

/* مسافة ثابتة بين عنوان القسم وما تحته (قائمة، أو فقرة، أو ساعات العمل) */
.container > h2,
.stack > h2 { margin-block-end: var(--s2); }
/* إلا داخل الشبكات التي لها مسافة gap خاصة بها */
.warranty > h2,
.cta-final > h2 { margin-block-end: 0; }


/* =====================================================================
   6. الأزرار
   الزر الأساسي متوازي أضلاع بنفس ميلان الشعار.
   الميلان على الخلفية فقط، والنص يبقى مستقيماً.
   ===================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s0);
  min-height: var(--tap);
  padding-inline: var(--s3);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(var(--slant));
  transition: background-color 0.2s ease;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

/* الأساسي: الكتلة الفاتحة الوحيدة على الداكن — للواتساب فقط */
.btn--primary { color: var(--ink); }
.btn--primary::before { background: var(--paper); }
.btn--primary:hover::before { background: #FFFFFF; }

/* الثانوي: إطار فقط */
.btn--ghost { color: var(--paper); }
.btn--ghost::before { border: 1px solid var(--paper); }
.btn--ghost:hover::before { background: var(--ink-raised); }


/* =====================================================================
   7. رأس الصفحة
   ثابت أعلى الشاشة. على الهاتف: الشعار ورابطان.
   على الحاسوب: يُضاف زر واتساب.
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line-on-ink);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--header-h);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: 124px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s0);
  font-weight: 400;
  text-decoration: none;
  color: var(--muted-on-ink);
  transition: color 0.2s ease;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--paper); }
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 2px;
}

/* زر واتساب في الرأس: يظهر على الحاسوب فقط */
.site-header__cta { margin-inline-start: var(--s1); }
.site-nav .site-header__cta { display: none; }

@media (min-width: 48rem) {
  .site-header__logo img { width: 148px; }
  .site-nav { gap: var(--s2); }
  .site-nav .site-header__cta { display: inline-flex; }
}


/* =====================================================================
   8. التذييل
   الاسم والعنوان والجوال: مطابقة حرفياً لملف خرائط جوجل.
   ===================================================================== */
.site-footer {
  padding-block: var(--s5) var(--s4);
  border-block-start: 1px solid var(--line-on-ink);
  font-size: var(--fs--1);
  color: var(--muted-on-ink);
}
.site-footer__grid {
  display: grid;
  gap: var(--s4);
}
.site-footer__logo img { width: 148px; }
.site-footer h2 {
  margin-block-end: var(--s1);
  font-size: var(--fs--1);
  font-weight: 500;
  color: var(--paper);
}
.site-footer address { font-style: normal; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-block-start: var(--s0); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--line-on-ink);
}
.site-footer a:hover { color: var(--paper); text-decoration-color: currentColor; }

.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s2); margin: 0; }
.hours dt { color: var(--paper); }
.hours dd { margin: 0; }

.site-footer__bottom {
  max-width: none;
  margin-block-start: var(--s5);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--line-on-ink);
}

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1fr auto auto auto; column-gap: var(--s5); }
}


/* =====================================================================
   9. شريط واتساب السفلي — للهاتف فقط
   زر واحد بعرض الشاشة، لا يغطي المحتوى لأن الصفحة تترك له مساحة.
   يراعي الشريط السفلي في أجهزة آيفون الحديثة.
   ===================================================================== */
.wa-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  padding: var(--s0) var(--gutter) calc(var(--s0) + env(safe-area-inset-bottom));
  background: var(--ink);
  border-block-start: 1px solid var(--line-on-ink);
}
.wa-bar .btn { width: 100%; }

/* مساحة أسفل الصفحة بقدر ارتفاع الشريط */
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 48rem) {
  .wa-bar { display: none; }
  body { padding-bottom: 0; }
}


/* =====================================================================
   10. إمكانية الوصول وتقليل الحركة
   ===================================================================== */

/* حلقة واضحة حول العنصر عند التنقل بلوحة المفاتيح */
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
.section--paper :focus-visible { outline-color: var(--ink); }

/* رابط مخفي يظهر أول ضغطة Tab: «انتقل إلى المحتوى» */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s1);
  top: -100px;
  z-index: 100;
  padding: var(--s0) var(--s1);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.skip-link:focus { top: var(--s1); }

/* نص مخفي عن العين ومقروء لقارئ الشاشة */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* من فعّل «تقليل الحركة» في جهازه: لا انتقالات */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   11. شريط درجات الأفلام — عنصر مشترك
   خمسة مستطيلات بألوان الدرجات الخمس، مائلة بزاوية الشعار.
   توقيع بصري للعلامة: يظهر على البطاقات والفواصل.
   ===================================================================== */
.film-strip {
  display: flex;
  gap: 3px;
  height: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.film-strip span {
  flex: 1;
  transform: skewX(var(--slant));
}
.film-strip span:nth-child(1) { background: var(--film-20); }
.film-strip span:nth-child(2) { background: var(--film-35); }
.film-strip span:nth-child(3) { background: var(--film-50); }
.film-strip span:nth-child(4) { background: var(--film-70); }
.film-strip span:nth-child(5) { background: var(--film-frost); }


/* =====================================================================
   12. الصفحة الرئيسية
   ===================================================================== */

/* --- العنوان الافتتاحي --- */
.home-hero { padding-block: var(--s4) var(--s3); }
.home-hero .lead { margin-block-start: var(--s2); }

/* العنوان فوق صورة خلفية: الصورة تملأ القسم، والنص في أسفله فوق الجزء الداكن.
   الطبقة المتدرجة تبدأ شفافة في الأعلى (السقف المضيء) وتصبح داكنة تحت النص. */
.home-hero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(78svh, 680px);
  padding-block: var(--s6) var(--s4);
  overflow: hidden;
}
.home-hero__bg,
.home-hero__bg img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.home-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(14 14 15 / .05) 0%, rgb(14 14 15 / .35) 40%, rgb(14 14 15 / .9) 72%, var(--ink) 100%);
}
.home-hero__content { position: relative; }
.home-hero--photo .en { color: var(--paper); }
.home-hero--photo .lead { color: #D6D6D8; }

@media (min-width: 48rem) {
  .home-hero { padding-block: var(--s6) var(--s5); }
  .home-hero--photo { min-height: min(72vh, 640px); padding-block: var(--s7) var(--s5); align-items: center; }
  .home-hero__bg img { object-position: 50% 60%; }
  /* على الحاسوب: الصورة معكوسة فالسيارة يساراً، والتدرج الداكن يميناً تحت النص */
  .home-hero--photo::after {
    background:
      linear-gradient(to left, var(--ink) 0%, rgb(14 14 15 / .94) 46%, rgb(14 14 15 / .4) 70%, rgb(14 14 15 / 0) 90%),
      linear-gradient(to bottom, rgb(14 14 15 / 0) 70%, var(--ink) 100%);
  }
  .home-hero__content .lead, .home-hero__content h1 { max-width: 34rem; }
}

/* --- البابان: السيارات والمباني ---
   العنصر الأهم في الصفحة: كل باب رابط كامل يقود إلى صفحته. */
.doors {
  display: grid;
  gap: var(--s2);
  padding-block-end: var(--s5);
}
@media (min-width: 48rem) {
  .doors { grid-template-columns: 1fr 1fr; gap: var(--s3); padding-block-end: var(--s6); }
}

.door {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--s2);
  background: var(--ink-raised);
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.door:hover { border-color: var(--muted-on-ink); background: #202023; }

@media (min-width: 48rem) {
  .door { padding: var(--s4) var(--s3); }
}

/* صورة الباب: بعرض البطاقة كاملاً، ملتصقة بحوافها */
.door__media {
  display: block;
  margin: calc(-1 * var(--s3)) calc(-1 * var(--s2)) 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--ink);
}
.door__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.door:hover .door__media img { transform: scale(1.03); }
/* حين تُقص الصورة: أبقِ مقدمة السيارة ظاهرة */
@media (min-width: 48rem) {
  .door__media { margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) 0; aspect-ratio: 16 / 9; }
}

.door__head { display: flex; flex-direction: column; gap: var(--s-1); }
.door__title { font-size: var(--fs-3); font-weight: 700; line-height: 1.2; }
@media (min-width: 64rem) {
  .door__title { font-size: var(--fs-4); }
}

/* خدمات الباب: شبكة مربعات، في كل مربع أيقونة واسم الخدمة.
   السيارات: مربعان في الصف على الهاتف، وأربعة على الحاسوب العريض.
   المباني: ثلاثة في الصف دائماً. */
.door__services {
  display: grid;
  gap: var(--s0);
  margin: 0;
  padding: 0;
  list-style: none;
}
.door__services--4 { grid-template-columns: repeat(2, 1fr); }
.door__services--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 64rem) {
  .door__services--4 { grid-template-columns: repeat(4, 1fr); }
}
.door__services li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s0);
  padding: var(--s2) var(--s0);
  border: 1px solid var(--line-on-ink);
  font-size: var(--fs--1);
  line-height: 1.5;
  text-align: center;
  color: var(--muted-on-ink);
}
.door__icon { width: 32px; height: 32px; color: var(--paper); }

/* على الهاتف: حواف الباب أضيق */
@media (max-width: 47.99rem) {
  .door { gap: var(--s1); padding: var(--s2); }
  .door__media { margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0; }
}

/* سطر «اعرف أكثر» مع سهم يتحرك قليلاً عند المرور */
.door__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s0);
  margin-block-start: auto;
  font-weight: 500;
}
.door__go svg { width: 1.25em; height: 1.25em; transition: transform 0.2s ease; }
.door:hover .door__go svg { transform: translateX(-4px); }

/* --- الأرقام: من مواصفات أفلام الواجهات --- */
.facts {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}
.facts li {
  padding-block-start: var(--s2);
  border-block-start: 2px solid var(--ink);
}
.facts__num {
  display: block;
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.1;
  direction: ltr;
  text-align: right;
}
.facts__label { display: block; margin-block-start: var(--s0); color: var(--muted-on-paper); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.4em;
}
.facts + p { margin-block-start: var(--s3); }


/* =====================================================================
   13. الصفحات الداخلية: العنوان والصورة
   على الهاتف: النص ثم الصورة تحته. على الحاسوب: جنباً إلى جنب.
   ===================================================================== */
.page-hero { padding-block: var(--s4) 0; }
.page-hero__grid { display: grid; gap: var(--s4); align-items: center; }
.page-hero .lead { margin-block-start: var(--s2); }
.page-hero__media { margin: 0 calc(-1 * var(--gutter)); }
.page-hero__media img { width: 100%; }

@media (min-width: 48rem) {
  .page-hero { padding-block: var(--s6) var(--s2); }
  .page-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .page-hero__media { margin: 0; }
}


/* =====================================================================
   14. صفحة السيارات: بطاقات الخدمات
   الهاتف: بطاقة تحت بطاقة. الحاسوب: بطاقتان في الصف.
   في كل بطاقة: أيقونة كبيرة ورقم، الاسم، سطر يشرحها، المزايا بأيقونات صغيرة، زر واتساب أسفلها.
   ===================================================================== */
.svc-grid {
  display: grid;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}
.svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s2);
  background: var(--ink-raised);
  border: 1px solid var(--line-on-ink);
  position: relative;
}
/* خط علوي بدرجات الأفلام، مائل بزاوية الشعار */
.svc-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 3px;
  background: linear-gradient(to left, var(--film-frost) 0 20%, var(--film-70) 20% 40%, var(--film-50) 40% 60%, var(--film-35) 60% 80%, var(--film-20) 80% 100%);
}
@media (min-width: 48rem) {
  .svc-card { padding: var(--s4) var(--s3); }
}
.svc-card__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s0); }
.svc-card__icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  border: 1px solid var(--line-on-ink);
  color: var(--paper);
}
.svc-card__num { font-size: var(--fs-1); font-weight: 300; color: var(--muted-on-ink); }
.svc-card h3 { font-size: var(--fs-2); }
.svc-card > p { color: var(--muted-on-ink); }

/* المزايا: صفوف قصيرة بأيقونة صغيرة، عمودان على الشاشات الأعرض */
.svc-card__feats {
  display: grid;
  gap: var(--s0);
  margin: var(--s0) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 30rem) {
  .svc-card__feats { grid-template-columns: 1fr 1fr; }
}
.svc-card__feats li {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--ink);
  font-size: var(--fs--1);
  line-height: 1.5;
}
.svc-card__ficon { width: 22px; height: 22px; flex: none; color: var(--paper); }

/* زر واتساب أسفل البطاقة */
.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s0);
  min-height: var(--tap);
  margin-block-start: auto;
  padding-block-start: var(--s2);
  font-weight: 500;
  text-decoration: none;
  color: var(--paper);
}
.svc-card__cta svg { width: 1.25em; height: 1.25em; }
.svc-card__cta:hover { text-decoration: underline; text-underline-offset: .4em; }


/* قائمة بعلامة صغيرة مائلة بدل النقطة — مشتركة (مثلاً: العناية بعد التركيب في صفحة المباني) */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-inline-start: var(--s3); padding-block: var(--s-1); }
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.85em;
  width: 12px;
  height: 3px;
  background: var(--paper);
  transform: skewX(var(--slant));
}


/* =====================================================================
   15. قسم «زورونا»
   ===================================================================== */
.visit { display: grid; gap: var(--s3); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.visit dl.hours { font-size: var(--fs-0); }
.section--paper .hours dt { color: var(--ink); }
.section--paper .btn--ghost { color: var(--ink); }
.section--paper .btn--ghost::before { border-color: var(--ink); }
.section--paper .btn--ghost:hover::before { background: #E6E5DF; }

@media (min-width: 48rem) {
  .visit { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s5); }
}


/* =====================================================================
   16. صفحة المباني: التحديات والمزايا
   شبكة بطاقات نصية: عمود على الهاتف، عمودان أو ثلاثة على الحاسوب.
   ===================================================================== */
.cards {
  display: grid;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.cards li {
  padding: var(--s2);
  border: 1px solid var(--line-on-ink);
}
.cards h3 { margin-block-end: var(--s0); }
.cards p { color: var(--muted-on-ink); }
.section--paper .cards li { border-color: #D6D5CF; }
.section--paper .cards p { color: var(--muted-on-paper); }

@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .cards li { padding: var(--s3); }
}

/* المزايا: أيقونة في مربع، وبجانبها العنوان والسطر. بلا إطار حول كل ميزة،
   والفاصل خط رفيع فوق كل ميزة. عمود على الهاتف، عمودان ثم ثلاثة على الحاسوب. */
.feats {
  display: grid;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.feats li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s2);
  align-items: start;
  padding-block: var(--s3);
  border-block-start: 1px solid var(--line-on-ink);
}
.feats__icon {
  width: 56px;
  height: 56px;
  padding: 14px;
  border: 1px solid var(--line-on-ink);
  background: var(--ink-raised);
  color: var(--paper);
}
.feats h3 { margin-block-end: var(--s0); }
.feats p { color: var(--muted-on-ink); }
@media (min-width: 48rem) {
  .feats { grid-template-columns: repeat(2, 1fr); column-gap: var(--s4); }
}
@media (min-width: 64rem) {
  .feats { grid-template-columns: repeat(3, 1fr); }
  .feats li { grid-template-columns: 1fr; padding-block: var(--s4) var(--s2); }
}

.note {
  margin-block-start: var(--s4);
  padding-inline-start: var(--s2);
  border-inline-start: 3px solid currentColor;
  font-weight: 500;
}


/* =====================================================================
   17. أداة «اختر درجتك» — مشهد بطبقات
   المشهد صور شفافة فوق بعضها، داخل إطار بنسبة 4:3.
   كل درجة تضبط أربعة أرقام (متغيرات) تتحكم في شفافية الطبقات:
     --in-film   عتمة الفيلم على المنظر الخارجي، من الداخل
     --in-sun    قوة الوهج وبقعة الشمس على المكتب، من الداخل
     --out-film  عتمة الفيلم فوق المكتب، من الخارج (الخصوصية)
     --out-refl  قوة انعكاس المباني على الزجاج، من الخارج
   القيم تقريبية للتوضيح، ومبنية على نسبة الضوء النافذ لكل درجة.
   ===================================================================== */
.page-hero--tool { padding-block-end: var(--s5); }
.page-hero--tool .lead { margin-block-end: var(--s4); }

.tint { display: grid; gap: var(--s3); }

/* القيم لكل درجة */
/* الدرجات موحدة للسيارات والمباني. الرقم بعد الاسم = الضوء المرئي النافذ */
[data-tint][data-grade="none"]  { --in-film: 0;    --in-sun: 1;    --out-film: .08; --out-refl: .16; } /* بدون فيلم: المباني فقط */
[data-tint][data-grade="clear"] { --in-film: .12;  --in-sun: .85;  --out-film: .2;  --out-refl: .18; } /* شفاف 79% */
[data-tint][data-grade="00"]    { --in-film: .27;  --in-sun: .62;  --out-film: .4;  --out-refl: .22; } /* 70% */
[data-tint][data-grade="01"]    { --in-film: .45;  --in-sun: .42;  --out-film: .6;  --out-refl: .3; }  /* 50% */
[data-tint][data-grade="02"]    { --in-film: .72;  --in-sun: .18;  --out-film: .87; --out-refl: .42; } /* 20% */
[data-tint][data-grade="frost"] { --in-film: .55;  --in-sun: .45;  --out-film: .62; --out-refl: .08; } /* ثلجي: المباني فقط */

/* الإطار: الطبقات كلها بنفس المقاس فوق بعضها */
.tint__stage {
  position: relative;
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}
.tint__scene { position: absolute; inset: 0; }
.tint__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, background-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* زاوية النظر: يظهر مشهد واحد */
[data-tint][data-view="in"] .tint__scene--out,
[data-tint][data-view="out"] .tint__scene--in { display: none; }

/* وهج الشمس في أعلى يسار النافذة */
.tint__glare {
  background: radial-gradient(circle at 26% 18%, rgb(242 241 236 / .95) 0, rgb(242 241 236 / .55) 14%, rgb(242 241 236 / .15) 32%, transparent 52%);
  opacity: var(--in-sun);
}
.tint__glare--right {
  background: radial-gradient(circle at 86% 6%, rgb(242 241 236 / .95) 0, rgb(242 241 236 / .55) 14%, rgb(242 241 236 / .15) 32%, transparent 52%);
}
.tint__sun { opacity: var(--in-sun); }

/* الفيلم */
.tint__film { background: var(--ink); }
.tint__scene--in .tint__film  { opacity: var(--in-film); }
.tint__scene--out .tint__film { opacity: var(--out-film); }
[data-tint][data-grade="frost"] .tint__film {
  background: var(--paper);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* انعكاس المباني على الزجاج: الصورة معكوسة ومغبشة قليلاً، وتُدمج بطريقة الشاشة */
.tint__refl {
  transform: scaleX(-1);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: var(--out-refl);
}

/* اسم الدرجة وزرا زاوية النظر: أسفل المشهد، حتى لا يغطيا الزجاج */
.tint__badge {
  position: absolute;
  inset-block-end: var(--s2);
  inset-inline-start: var(--s2);
  padding: var(--s-1) var(--s1);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

/* زرا «من الداخل / من الخارج» */
.tint__views {
  position: absolute;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  display: flex;
  background: var(--ink);
  padding: 3px;
}
.tint__view-btn {
  min-height: 40px;
  padding-inline: var(--s1);
  border: 0;
  background: none;
  color: var(--muted-on-ink);
  font: inherit;
  font-size: var(--fs--1);
  cursor: pointer;
}
.tint__view-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 500; }

/* أزرار الدرجات */
.tint__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s0);
  margin: 0;
  padding: 0;
  border: 0;
}
.tint__choices legend { margin-block-end: var(--s1); font-weight: 500; }
@media (min-width: 30rem) {
  .tint__choices--6 { grid-template-columns: repeat(6, 1fr); }
}
.tint__choices--4 { grid-template-columns: repeat(4, 1fr); }
.tint__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s0);
  min-height: var(--tap);
  padding: var(--s1) var(--s-1);
  border: 1px solid var(--line-on-ink);
  background: none;
  color: var(--muted-on-ink);
  font: inherit;
  font-size: var(--fs--1);
  cursor: pointer;
}
.tint__choice[aria-pressed="true"] { border-color: var(--paper); color: var(--paper); }
.tint__swatch { display: block; width: 100%; height: 20px; transform: skewX(var(--slant)); }
.tint__swatch--none { border: 1px dashed var(--muted-on-ink); }
.tint__swatch--frost { background: var(--film-frost); }
.tint__swatch--c-clear { background: #DCDCD8; }
.tint__swatch--c-00 { background: var(--film-70); }
.tint__swatch--c-01 { background: var(--film-50); }
.tint__swatch--c-02 { background: var(--film-20); outline: 1px solid var(--line-on-ink); }
/* اسم الدرجة سطر، ونسبتها سطر أصغر تحته */
.tint__grade { font-weight: 500; }
.tint__pct { margin-block-start: -4px; font-size: 0.75rem; font-variant-numeric: tabular-nums; }

.tint__note { font-size: var(--fs--1); color: var(--muted-on-ink); }

@media (min-width: 48rem) {
  .tint { grid-template-columns: 1.25fr 1fr; gap: var(--s5); align-items: start; }
  .tint__stage { margin: 0; }
  .tint__panel { display: grid; gap: var(--s3); }
}
@media (max-width: 47.99rem) {
  .tint__panel { display: grid; gap: var(--s3); }
}


/* =====================================================================
   18. (محذوف في الإصدار 2.1: جدول الدرجات — الرقم محجوز حتى لا تتغير أرقام الأقسام)
   ===================================================================== */


/* =====================================================================
   19. صفحة المباني: الضمان والعملاء والعناية
   ===================================================================== */
.warranty { display: grid; gap: var(--s2); }
.warranty__num {
  display: block;
  font-size: calc(var(--fs-5) * 1.25);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  text-align: right;
}
/* على الحاسوب: الرقم والعبارة في سطر واحد يميناً، والسطر الشارح يساراً بعد خط فاصل،
   وارتفاع القسم أقل، حتى لا يبقى نصف القسم فارغاً */
@media (min-width: 48rem) {
  .section:has(> .warranty) { padding-block: var(--s5); }
  .warranty { grid-template-columns: auto 1fr; column-gap: var(--s5); align-items: end; }
  .warranty .en { grid-column: 1 / -1; }
  .warranty h2 { display: flex; align-items: flex-end; gap: var(--s2); }
  .warranty__num { font-size: calc(var(--fs-5) * 1.75); }
  .warranty .lead {
    padding-block: var(--s1);
    padding-inline-start: var(--s5);
    border-inline-start: 1px solid #D6D5CF;
  }
}

.clients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s3);
  align-items: center;
  justify-items: center;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.clients img { width: auto; max-width: 75%; max-height: 72px; }
@media (min-width: 48rem) {
  .clients { grid-template-columns: repeat(4, 1fr); }
  .clients img { max-height: 88px; }
}

.cta-final { display: grid; gap: var(--s3); justify-items: start; }


/* =====================================================================
   20. صفحة 404
   ===================================================================== */
.not-found { padding-block: var(--s6); min-height: 50vh; }
.not-found__code {
  display: block;
  font-size: calc(var(--fs-5) * 1.5);
  font-weight: 700;
  line-height: 1;
  color: var(--film-50);
  direction: ltr;
  text-align: right;
}

/* علامة القوائم على الخلفية الفاتحة */
.section--paper .ticks li::before { background: var(--ink); }


/* =====================================================================
   21. قسم «زورونا» مع صورة من المركز
   على الهاتف: الصورة مربعة فوق النص، وتظهر فيها اللوحة والسيارة.
   على الحاسوب: الصورة يميناً والنص يساراً، بنفس الارتفاع.
   ===================================================================== */
.visit--media { align-items: center; }
.visit__media {
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
}
.visit__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.visit--media .visit__actions { margin-block-start: var(--s3); }
@media (min-width: 48rem) {
  .visit--media { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .visit__media { margin: 0; aspect-ratio: 4 / 5; }
}
/* على الهاتف: الصورة تلتصق بأعلى القسم، بلا شريط فاتح فوقها */
@media (max-width: 47.99rem) {
  .section:has(> .visit--media) { padding-block-start: 0; }
}