/* ═══════════════════════════════════════════════════════
   DOKKAN AUTO — DESIGN TOKENS · LIGHT PROFILE
   نفس النظام: منحنى واحد، ثلاث مُدد، ثلاثة أنصاف أقطار، ظل واحد.
   المقلوب هنا هو محور الإضاءة فقط — الهيكل والبرتقالي كما هما.

   البرتقالي موحّد على درجة اللوجو #F89C21 بطلب العميل.
   --brand-txt بقي كاسم فقط ويحمل نفس القيمة، عشان لو حبّينا
   نرجّع درجة نصّية أغمق نغيّر سطرًا واحدًا لا عشرات المواضع.
   ═══════════════════════════════════════════════════════ */
:root{
  /* surface */
  --bg:#F2F3F5;        /* الأرضية — ورق بارد */
  --bg-alt:#EBEDF0;

  /* ── أسطح غائرة ──────────────────────────────────────
     درجتين مختلفتين بفرق 6/255. متقاربين بس **مش متطابقين**،
     وتوحيدهم كان هيغيّر الشكل — والأمر بيقول الشكل ما يتغيّرش. */
  --surface-sunk:#EEF0F2;      /* لوحة صورة الموديل */
  --surface-sunk-2:#E8EAED;    /* حاوية الخريطة قبل التحميل */

  /* شرائط الهيكل العظمي للخريطة */
  --stripe-a:#EDEFF2;
  --stripe-b:#E4E7EB;

  /* ── ألوان حالة وعلامات طرف ثالث ─────────────────────
     دي مش من لوحة العلامة، وعمدًا برّه سلّم الرماديات:
     الأحمر لازم يتقري كخطأ، والأخضر لون واتساب الرسمي. */
  --danger:#B3261E;            /* 6.54:1 على الأبيض */
  --wa-green:#25D366;          /* لون واتساب الرسمي */
  --wa-ink:#FFFFFF;            /* النص فوق زرار واتساب */    /* شريط قسم — أعمق من الأرضية */
  --surface:#FFFFFF;   /* بطاقة — ترتفع عن الأرضية بالبياض والظل */
  --surface-hi:#FFFBF4;/* بطاقة عند المرور — دفء برتقالي بالكاد يُرى */
  --line:rgba(22,24,28,.11);
  --line-hi:rgba(22,24,28,.22);
  --edge:inset 0 1px 0 rgba(255,255,255,.85);

  /* text — measured contrast on --bg */
  --text:#16181C;      /* 16.0:1  AAA */
  --text-2:#4C5158;    /*  7.2:1  AAA */
  --text-3:#5A6068;    /*  5.7:1  AA+ */

  /* brand — sampled from D Auto Group logo */
  --brand:#F89C21;     /* درجة اللوجو · 2.15:1 على الأبيض */
  --brand-hi:#FAB252;  /* نفس الدرجة اللونية 34.3° — أفتح 10% */
  --brand-dk:#E48507;  /* نفس الدرجة — أغمق 9% */
  --brand-txt:#F89C21; /* موحّد مع --brand */
  --brand-ink:#160F03; /*  8.3:1 فوق --brand */

  /* geometry — exactly three radii */
  --r-sm:10px;
  --r:16px;
  --r-pill:999px;

  /* one shadow token, used only on the primary action */
  --elev-1:var(--edge),0 1px 2px rgba(18,20,24,.05),0 6px 16px -12px rgba(18,20,24,.16);
  --elev-2:var(--edge),0 2px 6px rgba(18,20,24,.07),0 18px 40px -20px rgba(18,20,24,.24);
  --shadow:0 1px 2px rgba(120,62,4,.18),0 10px 24px -12px rgba(176,93,10,.42);

  /* motion — one curve, three durations */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-1:160ms;   /* colour / opacity */
  --t-2:240ms;   /* micro-interaction ceiling */
  --t-3:1150ms;  /* section reveal — إيقاع انسيابي */
  --t-4:1300ms;  /* grid reveal — أبطأ عمدًا للشبكات الكبيرة */

  /* rhythm — 8pt scale */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem;  --s-6:4rem; --s-7:6rem;
  --gutter:clamp(1.25rem,4vw,2rem);
  --section:clamp(2.1rem,3.3vw,3.25rem);
  --header-h:72px;
}

/* ── reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
body{
  background:var(--bg);color:var(--text);
  font-family:Alexandria,system-ui,"Segoe UI",sans-serif;
  font-weight:400;font-size:clamp(1rem,.97rem + .15vw,1.0625rem);line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brand);color:var(--brand-ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── focus: one visible treatment everywhere ───────── */
/* على الأبيض لازم الحلقة تكون داكنة — البرتقالي الفاتح كان 1.8:1 فقط */
:focus-visible{outline:2px solid var(--brand-txt);outline-offset:3px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}
.skip{
  position:fixed;inset-block-start:.75rem;inset-inline-start:-100%;z-index:100;
  background:var(--brand);color:var(--brand-ink);font-weight:600;
  padding:.75rem 1.25rem;border-radius:var(--r-pill);transition:inset-inline-start var(--t-2) var(--ease);
}
.skip:focus{inset-inline-start:.75rem}

/* ── layout primitives ─────────────────────────────── */
.wrap{width:min(1200px,100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:var(--section)}
.section--alt{background-color:var(--bg-alt);border-block:1px solid var(--line)}
.stack{display:grid;gap:var(--s-2)}

/* below-the-fold render cost */
.defer{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* ── typography scale ──────────────────────────────── */
.display{font-size:clamp(2.25rem,1.4rem + 4.2vw,4.25rem);font-weight:800;line-height:1.22;letter-spacing:-.015em}
h2{font-size:clamp(1.625rem,1.2rem + 1.9vw,2.5rem);font-weight:800;line-height:1.32;letter-spacing:-.01em}
h3{font-size:1.0625rem;font-weight:600;line-height:1.55;letter-spacing:-.005em}
.lead{color:var(--text-2);max-width:60ch;font-weight:300}
.small{font-size:.875rem;line-height:1.7}
.eyebrow{
  display:block;font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  color:var(--brand-txt);margin-bottom:var(--s-1);
}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* رقم الجهات أكبر من باقي السطر */
.partners .eyebrow .num{font-size:2.1em;font-weight:800;letter-spacing:0;line-height:1}

.head{display:grid;gap:.55rem;margin-bottom:clamp(1.4rem,2.4vw,2.1rem);max-width:62ch}
.head--center{margin-inline:auto;text-align:center;justify-items:center}

/* ── buttons: two variants, no gradients, no sweeps ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.5rem;border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:600;white-space:nowrap;
  transition:background var(--t-1) var(--ease),color var(--t-1) var(--ease),
             border-color var(--t-1) var(--ease),transform var(--t-2) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow)}
/* على الأبيض المرور يعمّق البرتقالي بدل ما يفتّحه */
.btn--primary:hover{background:var(--brand-dk);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line-hi);color:var(--text)}
.btn--ghost:hover{border-color:var(--text-3);background:rgba(22,24,28,.045)}

/* ── header ────────────────────────────────────────── */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  height:var(--header-h);display:flex;align-items:center;
  border-block-end:1px solid transparent;
  transition:background var(--t-2) var(--ease),border-color var(--t-2) var(--ease);
}
.header[data-scrolled]{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px);
  border-block-end-color:var(--line);
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
/* الشعار وتحته سطر الانتماء — عمود بدل صف */
.logo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.12rem;flex:none;min-height:44px}
.logo img{height:34px;width:auto;transition:opacity var(--t-1) var(--ease)}
.logo:hover img{opacity:.82}
.logo-sub{
  font-size:.625rem;font-weight:300;letter-spacing:.02em;line-height:1;
  color:var(--text-3);white-space:nowrap;
  transition:opacity var(--t-2) var(--ease),font-size var(--t-2) var(--ease);
}

.nav{display:flex;gap:.25rem}
.nav a{
  position:relative;padding:.5rem .75rem;font-size:.9375rem;color:var(--text-2);
  /* بلا التفاف: عنصر القائمة اللي بينكسر لسطرين بيطوّل الهيدر
     ويبان مكسورًا. لو ماعادش يسع، الدرج هو الحل لا الالتفاف. */
  white-space:nowrap;
  transition:color var(--t-1) var(--ease);
}
.nav a::after{
  content:"";position:absolute;inset-inline:.75rem;inset-block-end:.15rem;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-2) var(--ease);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.5rem}

.burger{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);
  place-items:center;transition:border-color var(--t-1) var(--ease)
}
.burger:hover{border-color:var(--line-hi)}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;transition:transform var(--t-2) var(--ease),opacity var(--t-1)}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset-block-start:var(--header-h);inset-inline:0;z-index:49;
  background:rgba(250,250,251,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-block-end:1px solid var(--line);
  padding:var(--s-1) var(--gutter) var(--s-3);
  display:grid;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease),visibility var(--t-2);
}
.drawer[data-open]{opacity:1;visibility:visible;transform:none}
.drawer a{padding:.875rem .25rem;border-block-end:1px solid var(--line);font-weight:600}
.drawer a:last-child{border:0;margin-top:var(--s-2);justify-self:start}

/* ── pillars ───────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--elev-1)}
.pillar{background:var(--surface);padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:.5rem;
  align-content:start;position:relative;transition:background var(--t-2) var(--ease)}
.pillar::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--brand);opacity:0;transition:opacity var(--t-2) var(--ease)}
.pillar:hover{background:var(--surface-hi)}
.pillar:hover::before{opacity:1}
.pillar:hover{background:var(--surface)}
.pillar h3{color:var(--text)}
.pillar p{color:var(--text-2);font-size:.9375rem;font-weight:300}

/* ── process (vertical timeline) ───────────────────── */

/* ── الركائز: حركة هادئة متعددة الطبقات ── */
.pillar{counter-increment:pillar}
.pillar::after{
  content:"0" counter(pillar);
  position:absolute;inset-block-start:1.15rem;inset-inline-end:1.2rem;z-index:0;
  font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(22,24,28,.13);
  transition:-webkit-text-stroke-color var(--t-3) var(--ease),transform var(--t-3) var(--ease);
  pointer-events:none;
}
.pillar:hover::after{-webkit-text-stroke-color:rgba(228,133,7,.85);transform:translateY(-2px)}
.pillars{counter-reset:pillar}
.pillar>*{position:relative;z-index:1}
/* الشريط العلوي يُرسم من اليمين بدل أن يومض */
.pillar::before{
  opacity:1;transform-origin:right;scale:0 1;
  transition:scale var(--t-2) var(--ease);
}
.pillar:hover::before{scale:1 1}
.pillar h3{transition:color var(--t-2) var(--ease)}
.pillar:hover h3{color:var(--brand-txt)}
.pillar p{transition:color var(--t-2) var(--ease)}
.pillar:hover p{color:var(--text)}
/* هالة تتبع المؤشر — نفس آلية البطاقات */
@media (hover:hover) and (pointer:fine){
  .pillar>.glow{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%),
      rgba(248,156,33,.13),transparent 70%);
    opacity:0;transition:opacity var(--t-2) var(--ease);
  }
  .pillar:hover>.glow{opacity:1}
}

.steps{list-style:none;display:grid;gap:0;position:relative;max-width:72ch}
.step::before{
  content:"";position:absolute;inset-inline-start:17px;inset-block:0;width:1px;background:var(--line-hi);
}
.step:first-child::before{inset-block-start:calc(var(--s-3) + 18px)}
.step:last-child::before{inset-block-end:calc(100% - var(--s-3) - 18px)}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding-block:var(--s-3)}
.step-marker{display:flex;align-items:flex-start;position:relative;z-index:1}
.step-dot{
  flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-hi);
  display:grid;place-items:center;font-size:.8125rem;font-weight:600;color:var(--text-2);
  background:var(--surface);box-shadow:var(--elev-1);
  transition:border-color var(--t-2) var(--ease),color var(--t-2) var(--ease),
             background var(--t-2) var(--ease),transform var(--t-2) var(--ease)
}
.step h3{transition:color var(--t-2) var(--ease)}
.step:hover .step-dot{border-color:var(--brand);color:var(--brand-txt);
  background:var(--surface-hi);transform:scale(1.06)}
.step:hover h3{color:var(--brand-txt)}

.step-body{display:grid;gap:.35rem;padding-block-start:.25rem}
.step-body p{color:var(--text-2);font-weight:300;font-size:.9375rem;max-width:56ch}

/* ── generic card grid ─────────────────────────────── */
.grid{display:grid;gap:1rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--elev-1);
  padding:clamp(1.375rem,2.5vw,1.875rem);display:grid;gap:.5rem;align-content:start;
  transition:border-color var(--t-2) var(--ease),background var(--t-2) var(--ease),
             box-shadow var(--t-2) var(--ease),transform var(--t-2) var(--ease);
}
.card p{color:var(--text-2);font-size:.9375rem;font-weight:300}
a.card:hover,.card--i:hover{
  border-color:rgba(248,156,33,.45);background:var(--surface-hi);
  box-shadow:var(--elev-2);transform:translateY(-2px);
}
.card-icon{width:24px;height:24px;stroke:var(--brand-txt);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.25rem;
  transition:transform var(--t-2) var(--ease)}
a.card:hover .card-icon{transform:translateY(-2px)}
.card-more{color:var(--brand-txt);font-size:.875rem;font-weight:600;margin-top:.25rem;
  display:inline-flex;align-items:center;gap:.4rem}
.card-more::after{content:"←";transition:transform var(--t-2) var(--ease)}
a.card:hover .card-more::after{transform:translateX(-4px)}

/* ── stats ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.stat{background:var(--surface);padding:clamp(1.75rem,4vw,2.75rem) var(--s-2);
  text-align:center;display:grid;gap:.35rem;transition:background var(--t-2) var(--ease)}
.stat:hover{background:var(--surface-hi)}
/* الرقم بدرجة النصّ البرتقالية لا بالبرتقالي المملوء:
   ‎--brand‎ نسبته 2.05:1 على الأبيض — يسقط حتى في عتبة النصّ الكبير (3.0). */
.stat b{font-size:clamp(2rem,1.2rem + 2.6vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
/* الفاصل الرأسي على جهة بداية النصّ — أي بينه وبين الرقم في الاتجاهين */
.stat span{color:var(--text-2);font-size:.8125rem;line-height:1.6}

/* ── زر واتساب عائم ───────────────────────────────── */
.wa-fab{
  position:fixed;z-index:45;
  /* شمال فعليًا مش بداية السطر — الموقع RTL فـ inset-inline-start هيوديه يمين */
  left:clamp(.9rem,2.5vw,1.5rem);
  bottom:calc(clamp(.9rem,2.5vw,1.5rem) + env(safe-area-inset-bottom,0px));
  inline-size:3.4rem;block-size:3.4rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa-green);color:var(--wa-ink);
  box-shadow:0 4px 10px rgba(18,20,24,.16),0 10px 26px -10px rgba(18,20,24,.30),0 0 0 rgba(37,211,102,.5);
  transition:transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),
             opacity var(--t-2) var(--ease);
}
.wa-fab svg{inline-size:1.85rem;block-size:1.85rem;display:block}
.wa-fab:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 26px rgba(18,20,24,.24),0 0 0 6px rgba(30,190,93,.16)}
.wa-fab:active{transform:translateY(-1px) scale(.99)}
.wa-fab:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.wa-fab[hidden]{display:none}

/* الظهور بعد ما الهيرو يعدّي */
@keyframes waIn{from{opacity:0;transform:translateY(14px) scale(.85)}
                to  {opacity:1;transform:none}}
.wa-fab.is-on{animation:waIn 420ms var(--ease) both}
.wa-fab.is-off{animation:waIn 260ms var(--ease) reverse both}

@media (max-width:600px){
  .wa-fab{inline-size:3.05rem;block-size:3.05rem}
  .wa-fab svg{inline-size:1.6rem;block-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab.is-on,.wa-fab.is-off{animation:none;transition:none}
  .wa-fab:hover{transform:none}
}
@media print{.wa-fab{display:none}}

/* ── branches ──────────────────────────────────────── */
.branches{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.branch{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
  box-shadow:var(--elev-1);display:grid;grid-template-rows:auto 1fr;
  transition:border-color var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),transform var(--t-2) var(--ease);
}
.branch:hover{border-color:rgba(248,156,33,.6);box-shadow:var(--elev-2);transform:translateY(-2px)}

.branch-head{padding:1rem 1.05rem .8rem;display:grid;gap:.28rem;align-content:start;
  min-height:6.1rem}
.branch-head p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.branch-head h3{font-size:.9375rem;display:flex;align-items:baseline;gap:.4rem;
  transition:color var(--t-2) var(--ease)}
.branch-head h3 i{color:var(--brand-txt);font-style:normal;font-weight:800;font-size:.875rem}
.branch:hover .branch-head h3{color:var(--brand-txt)}
.branch-head p{color:var(--text-2);font-size:.8125rem;font-weight:300;line-height:1.55}

/* الخريطة: إطار رأسي كما في المرجع */
.branch-map{
  position:relative;aspect-ratio:3/4;margin:0 .55rem .55rem;border-radius:12px;
  overflow:hidden;background:var(--surface-sunk-2);isolation:isolate;
}
.map-skeleton{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(60% 45% at 50% 45%, rgba(248,156,33,.12), transparent 70%),
    repeating-linear-gradient(58deg, var(--stripe-a) 0 22px, var(--stripe-b) 22px 44px);
}
.pin{
  position:relative;width:11px;height:11px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(248,156,33,.32);
}
.pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--brand-dk);opacity:0}
.branches.is-running .pin::after{animation:beacon 3.2s var(--ease) infinite}
@keyframes beacon{0%{transform:scale(.8);opacity:.75}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}

.branch-map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;
  filter:saturate(.94) contrast(1.02) brightness(1.02);
  animation:fadeIn 650ms var(--ease) both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* زر الفتح — ثابت الظهور كما في المرجع */
.map-open{
  position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.4rem .9rem;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;color:var(--text);
  background:rgba(255,255,255,.86);border:1px solid var(--line-hi);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(18,20,24,.14);
  transition:background var(--t-2) var(--ease),border-color var(--t-2) var(--ease),color var(--t-2) var(--ease);
}
.map-open svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.map-open:hover{background:var(--brand);color:var(--brand-ink);border-color:transparent}

/* انكشاف متتابع */
.js .branch.reveal .branch-map{clip-path:inset(0 0 100% 0)}
.js .branch.reveal.is-in .branch-map{clip-path:inset(0 0 0 0);
  transition:clip-path 900ms var(--ease) calc(var(--i,0) * 125ms + 180ms)}
.js .branch.reveal .branch-head>*{opacity:0;translate:0 10px}
.js .branch.reveal.is-in .branch-head>*{opacity:1;translate:0 0;
  transition:opacity 700ms var(--ease),translate 700ms var(--ease)}
.js .branch.reveal.is-in .branch-head>*:nth-child(1){transition-delay:calc(var(--i,0)*125ms)}
.js .branch.reveal.is-in .branch-head>*:nth-child(2){transition-delay:calc(var(--i,0)*125ms + 90ms)}
.branches>.reveal:nth-child(2){--i:1}
.branches>.reveal:nth-child(3){--i:2}
.branches>.reveal:nth-child(4){--i:3}
@media (max-width:1080px){.branches{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.branches{grid-template-columns:1fr}.branch-map{aspect-ratio:4/3}}
.branch a:hover{color:var(--brand-txt)}

/* ── faq ───────────────────────────────────────────── */
.faq{max-width:70ch;margin-inline:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);transition:background var(--t-2) var(--ease)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem .25rem;text-align:start;font-size:1rem;font-weight:600;
  transition:color var(--t-1) var(--ease);
}
.faq-q:hover{color:var(--brand-txt)}
.faq-icon{flex:none;width:14px;height:14px;stroke:var(--text-3);stroke-width:1.5;stroke-linecap:round;
  transition:transform var(--t-2) var(--ease),stroke var(--t-1) var(--ease)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg);stroke:var(--brand-txt)}
.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--t-2) var(--ease),visibility var(--t-2)}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr;visibility:visible}
.faq-a>div{overflow:hidden}
.faq-a p{color:var(--text-2);font-weight:300;font-size:.9375rem;padding-block-end:1.25rem;padding-inline-end:2rem}

/* ── closing ───────────────────────────────────────── */
.closing{text-align:center;display:grid;gap:var(--s-2);justify-items:center}
/* الرقم على نفس مستوى العنوان بالظبط — نفس مقياس h2 ونفس الوزن،
   زي ما هو على dokkanauto.com حيث السطرين الاتنين h2.
   التباعد صفر مش ‎-.01em‎ بتاع h2: التتبّع السالب معاير لحروف عربية،
   وعلى أرقام لاتينية جدولية بيخلّيها متزنقة. */
.closing .tel{
  font-size:clamp(1.625rem,1.2rem + 1.9vw,2.5rem);
  font-weight:800;line-height:1.32;letter-spacing:0;
  color:var(--brand-txt);transition:color var(--t-1) var(--ease)
}
.closing .tel:hover{color:var(--brand-dk)}

/* ── footer ────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding-block:var(--s-4) var(--s-2);background:var(--bg-alt)}
/* أربعة أعمدة: التعريف + الصفحات + الفروع + تواصل. كان ٣ أعمدة
   وعمود «تواصل» بيلتف لصف تاني ويسيب فراغ كبير تحت اللوجو. */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--s-3) var(--s-4);align-items:start}
@media (max-width:1100px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer img{height:34px;width:auto;margin-bottom:.7rem}
.footer p{color:var(--text-2);font-size:.9375rem;font-weight:300;line-height:1.7;max-width:46ch}
.footer h2{font-size:.8125rem;font-weight:600;letter-spacing:.08em;color:var(--text-3);margin-bottom:.5rem}
.footer ul{list-style:none;display:grid;font-size:.9375rem;color:var(--text-2);font-weight:300}
.footer ul{line-height:1.5}
.footer li{display:flex;align-items:center;min-height:34px}
.footer li a{display:inline-flex;align-items:center;min-height:34px;min-width:34px}
.footer a:hover{color:var(--brand-txt)}
.social{display:flex;gap:.5rem;margin-top:var(--s-2)}
.social a{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:12px;color:var(--text-2);background:var(--surface);
  transition:color var(--t-1) var(--ease),border-color var(--t-1) var(--ease),
             background var(--t-1) var(--ease),transform var(--t-2) var(--ease);
}
.social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.social a:hover{color:var(--brand-txt);border-color:rgba(248,156,33,.7);
  background:rgba(248,156,33,.10);transform:translateY(-2px)}
.colophon{
  margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;
  color:var(--text-3);font-size:.8125rem;
}

/* ── entrance: CSS-only, runs with or without JS ───── */
@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.14)}to{transform:none}}
@keyframes veilLift{from{opacity:1}to{opacity:0}}
@keyframes curtain{from{clip-path:inset(0 0 104% 0)}to{clip-path:inset(0 0 -8% 0)}}
@keyframes hairline{from{scale:0 1}to{scale:1 1}}

/* الافتتاحية السينمائية */
.hero-media :is(img,video){animation:settle 2600ms var(--ease) both}
.hero-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 70% 45%,rgba(242,243,245,.55),var(--bg) 76%);
  animation:veilLift 1500ms var(--ease) 180ms both;
}
.hero-rule{
  display:block;height:3px;width:64px;background:linear-gradient(270deg,var(--brand-dk),var(--brand));
  border-radius:2px;
  transform-origin:right;animation:hairline 900ms var(--ease) 160ms both;
}
.hero-inner>*{animation:enter 760ms var(--ease) both;animation-delay:calc(var(--i,0)*120ms + 380ms)}
.hero-inner>h1{animation:curtain 1150ms var(--ease) 280ms both}
.hero-inner>.cred{animation-delay:620ms}
.hero-inner>.hero-rule{animation:hairline 900ms var(--ease) 160ms both}
.header .wrap>*{animation:enter 620ms var(--ease) both;animation-delay:calc(var(--i,0)*90ms + 700ms)}
.cue{animation:enter 700ms var(--ease) 1250ms both}


/* ── reveal: one animation for the whole site ──────── */
/* يستخدم خاصية translate المستقلة لا transform — حتى لا تتعارض مع تحويلات المرور */
.js .reveal{opacity:0;translate:0 18px}
.js .reveal.is-in{
  opacity:1;translate:0 0;
  transition:opacity var(--t-3) var(--ease),translate var(--t-3) var(--ease);
  transition-delay:calc(var(--i,0) * 125ms);
}


/* ═══════════════════════════════════════════════════════
   MOTION LAYER — كل حركة تخدم وظيفة، بالمنحنى الموحّد
   ═══════════════════════════════════════════════════════ */

/* 1 · تتابع تلقائي داخل الشبكات — الصف يُقرأ كموجة واحدة */
.grid>.reveal:nth-child(3n+2){--i:1}
.grid>.reveal:nth-child(3n+3){--i:2}
.grid--2>.reveal:nth-child(2n+2){--i:1}
.pillars>.reveal:nth-child(2){--i:1}
.pillars>.reveal:nth-child(3){--i:2}
.pillars>.reveal:nth-child(4){--i:3}
.models>.reveal:nth-child(4n+2){--i:1}
.models>.reveal:nth-child(4n+3){--i:2}
.models>.reveal:nth-child(4n+4){--i:3}
.steps>.reveal:nth-child(2){--i:1}
.steps>.reveal:nth-child(3){--i:2}
.steps>.reveal:nth-child(4){--i:3}
.steps>.reveal:nth-child(5){--i:4}
.faq-item:nth-child(2){--i:1}.faq-item:nth-child(3){--i:2}
.faq-item:nth-child(4){--i:3}.faq-item:nth-child(5){--i:4}

/* 2 · التوقيع: العنوان ينكشف من خلف قناع بدل أن يظهر فقط */
.js .head.reveal h2{clip-path:inset(0 0 105% 0)}
.js .head.reveal.is-in h2{
  clip-path:inset(0 0 -10% 0);
  transition:clip-path 900ms var(--ease) 120ms;
}

/* 3 · الشارة الفوقية: خط يُرسم قبل النص */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--brand);border-radius:2px;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-3) var(--ease) 140ms;
}
.reveal.is-in .eyebrow::before{transform:scaleX(1)}
.head--center .eyebrow{justify-content:center}

/* 4 · هالة تتبع المؤشر داخل البطاقة — عمق بلا حركة تخطيط */
@media (hover:hover) and (pointer:fine){
  .card::before{
    content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
      rgba(248,156,33,.14),transparent 72%);
    opacity:0;transition:opacity var(--t-2) var(--ease);
  }
  .card:hover::before{opacity:1}
  .card>*{position:relative;z-index:1}
}

/* 5 · صور الموديلات تستقر مع ظهور بطاقتها */
/* بطاقات الموديلات تظهر أبطأ من بقية الصفحة: 20 عنصرًا تحتاج إيقاعًا أهدأ */
.js .model.reveal{translate:0 18px}
.js .model.reveal.is-in{
  transition:opacity var(--t-4) var(--ease),translate var(--t-4) var(--ease);
  transition-delay:calc(var(--i,0) * 175ms);
}
.js .model.reveal .model-plate img{opacity:0;scale:.9}
.js .model.reveal.is-in .model-plate img{
  opacity:1;scale:1;
  transition:opacity var(--t-4) var(--ease) calc(var(--i,0) * 175ms + 200ms),
             scale var(--t-4) var(--ease) calc(var(--i,0) * 175ms + 200ms);
}

/* 6 · الهيدر ينكمش عند التمرير */
.header{transition:background var(--t-2) var(--ease),border-color var(--t-2) var(--ease),
        height var(--t-2) var(--ease)}
.header[data-scrolled]{height:60px}
.logo img{transition:opacity var(--t-1) var(--ease),height var(--t-2) var(--ease)}
.header[data-scrolled] .logo img{height:28px}
.header[data-scrolled] .logo-sub{font-size:.5625rem;opacity:.85}

/* 7 · حركات مرتبطة بالتمرير — تعمل خارج الخيط الرئيسي حيث تُدعم */
@keyframes fillLine{to{scale:1 1}}
@keyframes drift{to{translate:0 13%}}
@supports (animation-timeline:view()){
  /* خط الرحلة يمتلئ بالبرتقالي مع تقدّمك فيه */
  .step::after{
    content:"";position:absolute;inset-inline-start:17px;inset-block:0;width:2px;
    background:var(--brand);transform-origin:top;scale:1 0;
    animation:fillLine linear both;animation-timeline:view();
    animation-range:cover 12% cover 58%;
  }
  .step:first-child::after{inset-block-start:calc(var(--s-3) + 18px)}
  .step:last-child::after{inset-block-end:calc(100% - var(--s-3) - 18px)}
  /* انزياح بطيء لصورة الهيرو */
  .hero-media :is(img,video){
    animation:settle 1600ms var(--ease) both,drift linear both;
    animation-timeline:auto,scroll(root);
    animation-range:normal,0 100vh;
  }
}

/* النطاق 601–1099: بيستخدم الصورة العريضة، فمحتاج غسيل أخف من الموبايل */
@media (min-width:601px) and (max-width:1099px){
  .hero-media::after{
    background:
      linear-gradient(160deg,rgba(248,156,33,.12),transparent 46%),
      linear-gradient(to right,transparent 6%,rgba(242,243,245,.55) 40%,rgba(242,243,245,.90) 82%),
      linear-gradient(to bottom,rgba(242,243,245,.90) 0%,rgba(242,243,245,.44) 20%,
        rgba(242,243,245,.36) 40%,rgba(242,243,245,.82) 72%,rgba(242,243,245,.96) 92%,var(--bg) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-veil{display:none}
  .hero h1,.hero-inner>h1{animation:none!important;clip-path:none!important}
  .hero-rule,.hero-inner>.hero-rule{animation:none!important;scale:none!important}
  .model-cap{translate:none}
  .js .head.reveal h2,.js .head.reveal.is-in h2{clip-path:none}
  .eyebrow::before{transform:scaleX(1)}
  .js .model.reveal .model-plate img{opacity:1;scale:1}
  .step::after{display:none}
}


/* ═══════════════════════════════════════════════════════
   AMBIENT FLOW — حركة مستمرة مرتبطة بالتمرير
   تعمل على خيط المُركِّب: لا تلمس الخيط الرئيسي ولا تُبطئ شيئًا
   ═══════════════════════════════════════════════════════ */

/* ضوء بيئي كطبقة مركَّبة داخل القسم — يتحرك بالتمرير بتكلفة إطار صفرية */
.section{position:relative;overflow:clip}
.section>*{position:relative;z-index:1}
.section::before{
  content:"";position:absolute;inset:-8% 0;z-index:0;pointer-events:none;
  background:radial-gradient(62vw 40vh at 82% 12%, rgba(248,156,33,.09), transparent 68%);
}
.section--alt::before{
  background:radial-gradient(56vw 38vh at 16% 88%, rgba(248,156,33,.075), transparent 70%);
}

/* شعرة تقدّم أسفل الهيدر */
.header::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;height:2px;
  background:var(--brand);transform-origin:right;scale:0 1;
  opacity:0;transition:opacity var(--t-2) var(--ease);
}
.header[data-scrolled]::after{opacity:1}

@keyframes scrollProgress{to{scale:1 1}}
@keyframes heroRecede{to{opacity:.32}}
@keyframes riseSlow{from{translate:0 16px}to{translate:0 -16px}}
@keyframes riseSofter{from{translate:0 10px}to{translate:0 -10px}}
@keyframes plateDrift{from{translate:0 7px}to{translate:0 -7px}}
@keyframes plateDriftAlt{from{translate:0 -7px}to{translate:0 7px}}
@keyframes mapZoom{from{scale:1.09}to{scale:1}}
@keyframes glowDrift{from{translate:0 -6%}to{translate:0 6%}}
@keyframes drawRule{to{scale:1 1}}
@keyframes cueLoop{0%{opacity:0;translate:0 -6px}30%{opacity:1}70%{opacity:1;translate:0 10px}100%{opacity:0;translate:0 14px}}

@supports (animation-timeline:scroll()){
  .header::after{animation:scrollProgress linear both;animation-timeline:scroll(root)}
  .hero-media{animation:heroRecede linear both;animation-timeline:scroll(root);animation-range:0 92vh}
}

@supports (animation-timeline:view()){
  /* انزياح تفاضلي: العنوان يتحرك أبطأ من نصه، فتُقرأ الطبقتان كعمق */
  .section h2{animation:riseSlow linear both;animation-timeline:view();animation-range:cover 8% cover 92%}
  .section .head .lead{animation:riseSofter linear both;animation-timeline:view();animation-range:cover 8% cover 92%}
  .section .head .eyebrow{animation:riseSofter linear both;animation-timeline:view();animation-range:cover 5% cover 95%}
  /* السيارة تنزاح داخل إطارها أثناء مرور البطاقة */
  .model-plate img{animation:plateDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  /* شريط الأرقام يرتفع برفق */
  .stat b{animation:riseSofter linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
  .pillar h3{animation:riseSofter linear both;animation-timeline:view();animation-range:cover 8% cover 92%}
  .closing .tel{animation:riseSofter linear both;animation-timeline:view();animation-range:cover 15% cover 85%}
  /* الخريطة تتقرّب ببطء أثناء مرور البطاقة — حركة مستمرة داخل الكارت */
    /* الضوء البيئي ينساب داخل قسمه */
  .section::before{animation:glowDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  /* أعمدة الموديلات تتحرك باتجاهين متعاكسين — تدفّق لا صفّ جامد */
  .models>li:nth-child(2n) .model-plate img{animation-name:plateDriftAlt}
  .model-plate img{animation-range:cover 5% cover 95%}
  /* الأرقام تتتابع كموجة */
  .stat:nth-child(2) b{animation-range:cover 13% cover 87%}
  .stat:nth-child(3) b{animation-range:cover 16% cover 84%}
  .stat:nth-child(4) b{animation-range:cover 19% cover 81%}
  /* الخط الفاصل أعلى القسم يُرسم من اليمين */
  .section--alt{border-block-start-color:transparent}
  .section--alt>.rule{
    position:absolute;inset-block-start:0;inset-inline:0;height:1px;background:var(--line-hi);
    transform-origin:right;scale:0 1;z-index:2;
    animation:drawRule linear both;animation-timeline:view();animation-range:cover 0% cover 22%;
  }
}

@media (prefers-reduced-motion:reduce){
  .header::after{display:none}
  .section h2,.section .head .lead,.section .head .eyebrow,.section::before,
  .model-plate img,.stat b,.closing .tel,.hero-media{animation:none!important;translate:none!important;opacity:1!important}
  .cue span{animation:none}
  .brand-pill:hover img{transform:none}
  .pin::after{animation:none!important;display:none}
  .pillar h3{animation:none!important;translate:none!important}
  .pillar::after{transform:none}
  .js .branch.reveal .branch-map,.js .branch.reveal.is-in .branch-map{clip-path:none}
      .logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;translate:none}
  .logos{-webkit-mask-image:none;mask-image:none}
  .logos-track>li[aria-hidden="true"]{display:none}
  .section--alt{border-block-start-color:var(--line)}
  .section--alt>.rule{display:none}
}

/* ── responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .models{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
}
/* القائمة بقت 8 عناصر بعرض ثابت 724px، فبتتزنّق تحت ~1050px بينما باقي
   تخطيط الموبايل مايبدأش غير عند 880px. الفجوة دي كانت بتخلّي القائمة
   تتصادم مع الشعار والزرار. فصلنا تبديل القائمة/الدرج في نقطته الخاصة. */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
}
@media (max-width:880px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:auto;padding-block:calc(var(--header-h) + var(--s-6)) var(--s-6)}
}
@media (max-width:600px){
  :root{--header-h:64px}
  /* على الموبايل النص بينزل على الصورة الطولية والعرض ضيق،
     فالغسيل بيبقى أقوى في النص السفلي كله بدل ناحية واحدة. */
  .hero-media::after{
    background:
      linear-gradient(160deg,rgba(248,156,33,.14),transparent 52%),
      linear-gradient(to right,transparent 2%,rgba(242,243,245,.55) 44%,rgba(242,243,245,.84)),
      linear-gradient(to bottom,rgba(242,243,245,.92) 0%,rgba(242,243,245,.40) 16%,
        rgba(242,243,245,.72) 46%,rgba(242,243,245,.94) 72%,var(--bg) 99%);
  }
  .grid--3,.grid--2{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .models{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .logo img{height:32px}
  .hero-actions .btn{flex:1 1 100%}
  .step{grid-template-columns:auto 1fr;gap:var(--s-2)}
}

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

/* ── قائمة الفروع المنسدلة ─────────────────────────────────────
   البند الأب رابط عادي — يشتغل من غير جافاسكريبت. الجافاسكريبت
   بيضيف الفتح بالضغط والكيبورد بس. */
.has-sub{position:relative;display:inline-flex}
.nav-parent{display:inline-flex;align-items:center;gap:.35em}
.caret{width:.62em;height:.4em;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.has-sub[data-open] .caret,
.has-sub:hover .caret{transform:rotate(180deg)}
.nav-sub{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:50%;
  transform:translateX(50%) translateY(-.35rem);min-width:12.5rem;
  background:var(--surface,#fff);border:1px solid var(--line,#e3e5e9);
  border-radius:.75rem;padding:.4rem;display:grid;gap:.1rem;
  box-shadow:0 14px 34px rgba(20,22,26,.13);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:60}
.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub,
.has-sub[data-open] .nav-sub{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(50%) translateY(0)}
.nav-sub a{display:block;padding:.5rem .7rem;border-radius:.5rem;
  font-size:.92em;white-space:nowrap}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--bg-alt,#EBEDF0)}
/* جسر غير مرئي يمنع قفل القائمة في الفراغ بين البند والقائمة */
.has-sub::after{content:"";position:absolute;inset-block-start:100%;
  inset-inline:0;block-size:.5rem}

/* الموبايل: أكورديون جوّه الدرج */
.drawer .has-sub{display:block}
.drawer-parent{display:flex;align-items:center;justify-content:space-between}
.drawer-sub{display:none;padding-inline-start:1rem;margin-block:.15rem .3rem;
  border-inline-start:2px solid var(--line,#e3e5e9)}
.drawer .has-sub[data-open] .drawer-sub{display:grid}
.drawer-sub a{font-size:.94em;opacity:.9}
@media (hover:none){
  .has-sub:hover .nav-sub{opacity:0;visibility:hidden;pointer-events:none}
  .has-sub[data-open] .nav-sub{opacity:1;visibility:visible;pointer-events:auto}
}

/* ═══════════════════════════════════════════════════════
   قاعدة واحدة: برتقالي واحد في الموقع كله — #F89C21
   ───────────────────────────────────────────────────────
   درجة اللوجو مقفولة ومش هتتغيّر. يعني ممنوع نستعملها كنص
   يتقرا فعلًا، لأنها بتدّي 2.15:1 على الأبيض والمطلوب 4.5:1.

   فبدل ما نغيّر اللون، غيّرنا **دور** اللون:
     • النص اللي يتقرا  → --text (16:1) بوزن أثقل
     • البرتقالي        → إشارة بصرية فقط (خط تحت، أيقونة،
                           علامة، خلفية بنسبة منخفضة)

   الرابط داخل الفقرة بيتميّز بتلات إشارات مش واحدة:
   نص غامق + وزن 600 + خط برتقالي تحته. كده حتى لو حد
   ما شافش اللون خالص، لسه شايف إنه رابط (WCAG 1.4.1).
   ═══════════════════════════════════════════════════════ */

/* ── الصفحة الحالية في القائمة ───────────────────────────
   القائمة الأصلية كانت بتعرف الـhover بس — مافيش أي إشارة
   إن دي الصفحة اللي إحنا فيها. الخط تحت الرابط بيتثبّت
   مفتوحًا بدل ما يعتمد على المرور، والنص بياخد وزنه الكامل.
   السمة نفسها (aria-current) هي اللي بتشغّل الستايل، فمفيش
   كلاس زيادة يتنسى مع أي تعديل بعد كده. */
.nav a[aria-current="page"]{color:var(--text);font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.drawer a[aria-current="page"]{color:var(--text)}
.drawer a[aria-current="page"]::before{content:"— ";color:var(--brand)}
.drawer a[aria-current="page"]{font-weight:800}

/* ── pagehead: ترويسة الصفحات الداخلية · نسخة فاتحة ─────
   منقولة من النسخة الغامقة مع قلب محور الإضاءة فقط.
   الهالة البرتقالية خفّت من .075 إلى .055 لأن الورق الفاتح
   بيضخّم أي لون دافئ فوقه — اتقاست على #F2F3F5 مش على الأسود. */
.pagehead{padding-block:calc(var(--header-h) + var(--s-5)) var(--s-3);position:relative;overflow:clip}
.pagehead::before{content:"";position:absolute;inset:-20% 0 0;z-index:0;pointer-events:none;
  background:radial-gradient(62vw 46vh at 78% 0%, rgba(248,156,33,.10), transparent 66%)}
.pagehead::after{content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi) 22%,var(--line-hi) 78%,transparent)}
.pagehead .wrap{position:relative;z-index:1}
.pagehead .head{max-width:60ch}

.crumbs{display:flex;align-items:center;gap:.45rem;font-size:.8125rem;color:var(--text-3);margin-bottom:var(--s-2);flex-wrap:wrap}
.crumbs a{color:var(--text-2);min-height:44px;display:inline-flex;align-items:center;transition:color var(--t-1) var(--ease)}
.crumbs a:hover{color:var(--text)}
.crumbs i{font-style:normal;color:var(--text-3)}
.crumbs span[aria-current]{color:var(--text)}

.brandgroup{margin-block:var(--s-4) var(--s-2);display:flex;align-items:center;gap:.7rem}
.brandgroup img{height:30px;width:auto}
.brandgroup h2{font-size:clamp(1.25rem,1rem + .9vw,1.6rem)}
.brandgroup span{color:var(--text-3);font-size:.8125rem;margin-inline-start:auto}

/* ملاحظة: .rule متعرّف في core.css داخل @supports(animation-timeline)
   ومربوط بـ .section--alt>.rule. متعمَّد عدم تعريفه هنا تاني عشان
   مايبقاش فيه مصدرين لنفس العنصر. */

/* نصّ طويل: مقالات، رؤية، رسالة */
.prose{max-width:68ch}
.prose>*+*{margin-top:var(--s-2)}
.prose h2{margin-top:var(--s-4)}
.prose h3{margin-top:var(--s-3);font-size:1.0625rem}
.prose ul{padding-inline-start:1.15rem;color:var(--text-2)}
.prose li{margin-top:.4rem}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--text);font-weight:600}
.prose a:not(.btn){color:var(--text);font-weight:600;text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px;
  text-decoration-thickness:2px;text-decoration-color:var(--brand);
  transition:text-decoration-color var(--t-1) var(--ease)}
.prose a:not(.btn):hover{background:color-mix(in srgb,var(--brand) 14%,transparent);
  border-radius:3px;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}

/* بطاقة نص محايدة — تُستعمل للرؤية/الرسالة/القيم */
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.15rem,2.4vw,1.75rem);box-shadow:var(--elev-1)}
.note h3{font-size:1.0625rem;margin-bottom:.5rem}
.note h3 span{color:var(--brand)}
.note p{color:var(--text-2)}
.note ul{margin-top:.6rem;padding-inline-start:1.1rem;color:var(--text-2)}
.note li{margin-top:.35rem}
.note li::marker{color:var(--brand)}

/* قائمة مقالات المدونة */
.posts{display:grid;gap:clamp(.9rem,1.8vw,1.15rem)}
@media (min-width:760px){.posts{grid-template-columns:repeat(2,1fr)}}
.post{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.05rem,2.2vw,1.5rem);
  transition:border-color var(--t-2) var(--ease),background var(--t-2) var(--ease),
             transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease)}
.post:hover{border-color:var(--line-hi);background:var(--surface-hi);
  transform:translateY(-2px);box-shadow:var(--elev-1)}
.post h3{font-size:1.0625rem;line-height:1.55}
.post p{color:var(--text-3);font-size:.9375rem;line-height:1.8}
.post .post-more{margin-top:auto;padding-top:.35rem;color:var(--brand-txt);
  font-size:.875rem;font-weight:600}
.post .post-more::after{content:" ←";transition:margin var(--t-2) var(--ease)}
.post:hover .post-more::after{margin-inline-start:.25rem}

/* ═══════════════════════════════════════════════════════
   تصحيح المدى 600–880px
   ───────────────────────────────────────────────────────
   .grid--2 في core.css بينهار لعمود واحد عند 600px بس.
   يعني على تابلت 700px كان بيفضل عمودين عرض كل واحد ~330px.
   ده مقبول لفقرة نص، لكنه كارثة للنموذج: قاعدة .fields
   بتقسّم لعمودين عند min-width:620px — وهي بتقيس **الشاشة**
   مش العمود، فالحقول كانت هتبقى ~155px الواحد.

   الحل: نخلّي العمودين ينهاروا عند 900px على الصفحات
   الداخلية بس (الرئيسية ما اتلمستش)، والنموذج ما ينقسمش
   غير لما يكون العمود نفسه واسع فعلًا.
   ═══════════════════════════════════════════════════════ */
@media (max-width:900px){
  .grid--2{grid-template-columns:1fr}
}
/* النموذج جوّه عمود بعرض نص الصفحة: ما ينقسمش قبل 1100px،
   وعندها يبقى عرض الحقل ≈ 240px — كفاية لقائمة منسدلة عربية. */
@media (max-width:1099px){
  .fields{grid-template-columns:1fr}
}

/* جدول مقارنة — التوكيل مقابل دكان.
   على الموبايل ثلاث أعمدة عربية في 320px بتخلّي كل خلية
   تتكسّر لخمس سطور. فبدل ما نضغطها، نخلّي الجدول يتزحلق
   أفقيًا بحد أدنى مقروء — والحاوية قابلة للتركيز بالكيبورد
   عشان مستخدم الكيبورد يقدر يزحلقها. */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r);scrollbar-width:thin}
.cmp-scroll:focus-visible{outline:2px solid var(--brand-txt);outline-offset:3px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:.9375rem}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{background:var(--bg-alt);font-size:.8125rem;font-weight:600;color:var(--text-2);
  letter-spacing:.02em;white-space:nowrap}
.cmp thead th:last-child{color:var(--text);
  background:color-mix(in srgb,var(--brand) 12%,var(--bg-alt))}
.cmp tbody tr:last-child :is(th,td){border-bottom:0}
.cmp tbody th{font-weight:600;color:var(--text);width:34%}
.cmp td{color:var(--text-2)}
.cmp td:last-child{color:var(--text);font-weight:500;
  background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
@media (max-width:680px){
  .cmp{font-size:.875rem;min-width:560px}   /* أقل من كده الخلايا تتقطّع */
  .cmp th,.cmp td{padding:.7rem .65rem}
  .cmp tbody th{width:34%}
}

/* ═══════════════════════════════════════════════════════
   مخطط الخدمات التشريحي
   كل الهندسة في فضاء واحد (1200×560) والمنصّة نسبتها ثابتة،
   فالخطوط والنقاط والكروت بيفضلوا مقفولين على بعض عند أي عرض.
   تحت 1080px الخطوط بتتخفي والكروت بترجع شبكة عادية —
   خط إشارة على سيارة صغيرة مش بيتقري.
   ═══════════════════════════════════════════════════════ */
.anat{position:relative;margin-block:clamp(1rem,2vw,1.75rem) 0;container-type:inline-size}
.anat-car{width:100%;height:auto;display:block}
.anat-lines{display:none}

@media (min-width:1080px){
  .anat{
    aspect-ratio:1200 / 560;
    display:block;margin-inline:auto;max-width:1200px;
  }
  .anat .showcase{
    position:absolute;margin:0;
    top:20.7554%;left:25%;width:50%;max-width:none;
  }
  .anat-lines{
    display:block;position:absolute;inset:0;
    inline-size:100%;block-size:100%;z-index:2;pointer-events:none;overflow:visible;
  }
  /* خط متقطّع بدرجة أهدى — النقطة البرتقالية هي بؤرة النظر لا الخط */
  .anat-lines .leads{
    fill:none;stroke:var(--brand-txt);stroke-width:1.5;
    stroke-dasharray:4 5;stroke-linecap:round;stroke-linejoin:round;
    opacity:.32;
  }
  .anat-lines .halo{fill:var(--surface);opacity:.9}
  .anat-lines .dot{fill:var(--brand)}

  /* الرسم بقناع يتمدّد أفقيًا من حافة الكارت.
     ‎stroke-dashoffset‎ ما ينفعش هنا: مع نقشة متكرّرة بيزحلق الشرط
     بدل ما يكشفه. والقناع بيتحرّك بـscaleX على خيط التركيب وحده. */
  /* القصّ ينحسر من حافة الكارت ناحية السيارة.
     النِّسب بتُحسب على صندوق كل مجموعة، فكل خط بيتكشف على طوله هو. */
  .anat-lines .lead{clip-path:inset(0 100% 0 0)}
  .anat-lines .lead.r{clip-path:inset(0 0 0 100%)}
  .anat-lines .pin{opacity:0;transform-box:fill-box;transform-origin:center}

  /* ما يبدأش غير بعد ما السيارة تستقر — قبل كده كان بيسبق الصورة */
  .showcase.is-in ~ .anat-lines .lead{
    animation:anatDraw 780ms cubic-bezier(.22,.68,.28,1) forwards;
    animation-delay:calc(1340ms + var(--d));
  }
  .showcase.is-in ~ .anat-lines .pin{
    animation:anatPin 420ms cubic-bezier(.2,.9,.3,1.25) forwards;
    animation-delay:calc(1980ms + var(--d));
  }
  @keyframes anatDraw{to{clip-path:inset(0 0 0 0)}}
  @keyframes anatPin{from{opacity:0;scale:.35}to{opacity:1;scale:1}}

  @media (prefers-reduced-motion:reduce){
    .anat-lines .lead,.anat-lines .lead.r{clip-path:none}
    .anat-lines .pin{opacity:1}
    .showcase.is-in ~ .anat-lines :is(.lead,.pin){animation:none}
  }

  .anat .grid{display:contents}
  .anat .card{
    position:absolute;z-index:3;
    inline-size:22.3333%;block-size:27.8571%;
    display:flex;flex-direction:column;justify-content:center;gap:.28cqw;
    padding:1.35cqw 1.5cqw;
  }
  .anat .card h3{font-size:clamp(.8125rem,1.25cqw,.9375rem);line-height:1.4}
  .anat .card p{font-size:clamp(.75rem,1.083cqw,.8125rem);line-height:1.5}
  .anat .card .card-more{font-size:clamp(.6875rem,1cqw,.75rem)}
  .anat .card .card-icon{
    position:absolute;inset-block-start:1.2cqw;inset-inline-end:1.25cqw;
    inline-size:1.9cqw;block-size:1.9cqw;min-inline-size:18px;min-block-size:18px;
  }
  .anat [data-slot="L0"]{top:3.9286%;left:0}
  .anat [data-slot="R0"]{top:3.9286%;right:0}
  .anat [data-slot="L1"]{top:36.0714%;left:0}
  .anat [data-slot="R1"]{top:36.0714%;right:0}
  .anat [data-slot="L2"]{top:68.2143%;left:0}
  .anat [data-slot="R2"]{top:68.2143%;right:0}
}

/* ── وحدة الفروع: كروت الجامعة + تفاصيل صفحة الفرع ─────────────
   بتعيد استخدام المتغيّرات والمسافات الموجودة — صفر ألوان خام. */

/* كروت صفحة /branches/ */
.branch-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.branch-cards a{display:grid;gap:.3rem;padding:var(--s-3);block-size:100%;
  background:var(--surface,#fff);border:1px solid var(--line,#e3e5e9);
  border-radius:1rem;transition:border-color .18s ease,transform .18s ease,
  box-shadow .18s ease}
.branch-cards a:hover,.branch-cards a:focus-visible{border-color:var(--brand,#F89C21);
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,22,26,.09)}
.branch-cards b{font-size:1.05rem}
.branch-cards span{font-size:.9rem;color:var(--muted,#5A6068);line-height:1.55}
.branch-rate{font-weight:700;color:var(--ink,#4C5158)}
.branch-rate .num{font-weight:400;color:var(--muted,#5A6068)}

/* بيانات الفرع السريعة */
.branch-facts{display:grid;gap:var(--s-2);margin:var(--s-4) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.branch-facts>div{padding:var(--s-3);background:var(--surface,#fff);
  border:1px solid var(--line,#e3e5e9);border-radius:.9rem}
.branch-facts dt{font-size:.82rem;letter-spacing:.03em;color:var(--muted,#5A6068);
  margin-block-end:.3rem}
.branch-facts dd{margin:0;font-weight:600;line-height:1.6}


/* المناطق المخدومة */
.areas{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.areas h3{font-size:1rem;margin:0 0 var(--s-2)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{padding:.34rem .7rem;font-size:.87rem;border-radius:999px;
  background:var(--bg-alt,#EBEDF0);color:var(--ink,#4C5158);
  border:1px solid var(--line,#e3e5e9)}

/* رابط «تفاصيل الفرع» جوّه كارت الفرع في الرئيسية وصفحة التواصل */
.branch-more{display:inline-block;margin-block-start:.45rem;font-size:.9rem;
  font-weight:600;color:var(--brand,#F89C21)}
.branch-more:hover,.branch-more:focus-visible{text-decoration:underline}

/* ── شريط صور الفرع ────────────────────────────────────────────
   نفس سلوك شريط المراجعات: تمرير أفقي بالسحب أو الكيبورد،
   وسناب عشان الصورة تقف في مكانها. */
.ph-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(31rem,86%);
  gap:var(--s-3);overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;padding-block-end:.6rem;
  scrollbar-width:thin;margin-block-start:var(--s-4)}
.ph-rail::-webkit-scrollbar{height:6px}
.ph-rail::-webkit-scrollbar-thumb{background:var(--line,#e3e5e9);border-radius:999px}
.ph-rail:focus-visible{outline:2px solid var(--brand,#F89C21);outline-offset:4px}
.ph{margin:0;scroll-snap-align:start;border-radius:1rem;overflow:hidden;
  border:1px solid var(--line,#e3e5e9);background:var(--surface,#fff);
  box-shadow:0 8px 22px rgba(20,22,26,.07)}
.ph img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/9;
  object-fit:cover}

/* ── كارت الخريطة المكبّر ──────────────────────────────────────
   الخريطة تاخد الثلثين والبيانات الثلث. على الموبايل بتتكدّس. */
.map-card{display:grid;grid-template-columns:1.9fr 1fr;gap:0;
  border:1px solid var(--line,#e3e5e9);border-radius:1.15rem;overflow:hidden;
  background:var(--surface,#fff);box-shadow:0 12px 30px rgba(20,22,26,.08);
  margin-block-start:var(--s-4)}
.map-card-media{position:relative;min-block-size:26rem;background:var(--bg-alt,#EBEDF0)}
.map-card-media iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;
  border:0;display:block}
.map-card-body{padding:var(--s-4);display:grid;gap:.55rem;align-content:center}
.map-card-body h3{margin:0;font-size:1.25rem}
.map-card-body p{margin:0;color:var(--muted,#5A6068);line-height:1.65}
.map-card-hours{font-weight:600}
.map-card-body .hero-actions{margin-block-start:.6rem}
@media (max-width:860px){
  .map-card{grid-template-columns:1fr}
  .map-card-media{min-block-size:19rem}
}

/* ── كروت الفروع في الرئيسية: توحيد ارتفاع الترويسة ────────────
   العناوين سطر والعناوين التانية سطرين، فالخرائط كانت بتبدأ عند
   ارتفاعات مختلفة والصف بيبان مكسور. min-height بيوحّدها. */
.branch-head{min-block-size:8.6rem}
@media (max-width:900px){ .branch-head{min-block-size:0} }

/* ── بطاقات اختيار العلامة ──────────────────────────────
   صفحة انتقالية: العميل بيختار رينو أو نيسان قبل ما يشوف
   الجداول. الهدف إن القرار ياخد ثانية واحدة، فالبطاقة
   كلها رابط — مش زرار صغير جواها. */
.brandpick{display:grid;gap:clamp(1rem,2.4vw,1.5rem)}
@media (min-width:760px){.brandpick{grid-template-columns:1fr 1fr}}

.bcard{
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,3.2vw,2.25rem);overflow:hidden;
  transition:border-color var(--t-2) var(--ease),background var(--t-2) var(--ease),
             transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease);
}
.bcard::before{                     /* هالة برتقالية بتتنفّس عند المرور */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(38rem 22rem at 78% -10%,
             color-mix(in srgb,var(--brand) 13%,transparent),transparent 62%);
  transition:opacity var(--t-2) var(--ease);
}
.bcard:hover{border-color:var(--line-hi);background:var(--surface-hi);
  transform:translateY(-3px);box-shadow:var(--elev-2)}
.bcard:hover::before{opacity:1}
.bcard>*{position:relative;z-index:1}

.bcard-top{display:flex;align-items:center;gap:1rem}
.bcard-logo{
  flex:none;width:66px;height:66px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);
  transition:border-color var(--t-2) var(--ease),transform var(--t-2) var(--ease);
}
.bcard:hover .bcard-logo{border-color:var(--line-hi);transform:scale(1.04)}
.bcard-logo img{width:38px;height:auto}
.bcard h2{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.8rem);line-height:1.3}
.bcard-count{
  display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
  padding:.28rem .7rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--brand) 12%,var(--bg));
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  font-size:.8125rem;font-weight:600;color:var(--text);
}
.bcard-list{color:var(--text-2);font-size:.9375rem;line-height:1.9}
.bcard-go{
  margin-top:auto;padding-top:.5rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.9375rem;color:var(--text);
}
.bcard-go svg{width:16px;height:16px;fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-2) var(--ease)}
.bcard:hover .bcard-go svg{transform:translateX(-4px)}   /* RTL: يتحرك لليسار */

/* شريط التنقل بين البراندين أعلى صفحة الجداول */
.brandswitch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-bottom:var(--s-3)}
.brandswitch a,.brandswitch span{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.45rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--line);font-size:.9375rem;font-weight:600;
  transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease)}
.brandswitch a{color:var(--text-2);background:var(--surface)}
.brandswitch a:hover{border-color:var(--line-hi);background:var(--surface-hi);color:var(--text)}
.brandswitch span[aria-current]{color:var(--text);
  background:color-mix(in srgb,var(--brand) 14%,var(--surface));
  border-color:color-mix(in srgb,var(--brand) 34%,transparent)}
.brandswitch img{width:20px;height:auto}

/* ═══════════════════════════════════════════════════════
   خدمة الشركات — أدوات الجدول والجدول نفسه
   الصفوف كلها موجودة في الـ DOM دايمًا عشان جوجل يقراها،
   والفلترة بتخفي بـ hidden مش بالحذف.
   ═══════════════════════════════════════════════════════ */
.co-tools{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}
.co-search{position:relative;display:flex;align-items:center}
.co-search svg{position:absolute;inset-inline-start:.9rem;width:18px;height:18px;
  fill:none;stroke:var(--text-3);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.co-search input{width:100%;padding:.8rem 1rem;padding-inline-start:2.8rem;
  font:inherit;color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--edge)}
.co-search input:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}

.co-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.co-chip{font:inherit;font-size:.86rem;line-height:1;padding:.5rem .8rem;cursor:pointer;
  color:var(--text-2);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;transition:background .18s,border-color .18s,color .18s}
.co-chip:hover{background:var(--surface-hi);border-color:var(--line-hi)}
.co-chip.is-on{color:#16181C;background:var(--brand);border-color:var(--brand);font-weight:600}
.co-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.co-wrap{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--edge);overflow:hidden}
.co-table{width:100%;border-collapse:collapse;font-size:.95rem}
.co-table th,.co-table td{text-align:start;padding:.8rem 1.1rem;border-bottom:1px solid var(--line)}
.co-table thead th{font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--text-2);background:var(--bg-alt);white-space:nowrap}
.co-table tbody tr:hover{background:var(--surface-hi)}
.co-table td:first-child{font-weight:600;color:var(--text)}
.co-table td:last-child{color:var(--text-2);white-space:nowrap}
.co-empty{padding:1.6rem 1.1rem;text-align:center;color:var(--text-2)}

.co-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem;margin-top:1rem}
.co-foot .small{margin:0;color:var(--text-2)}

@media (max-width:560px){
  .co-table{font-size:.9rem}
  .co-table th,.co-table td{padding:.7rem .8rem}
  .co-table td:last-child{white-space:normal;font-size:.82rem}
  .co-foot{flex-direction:column;align-items:stretch;text-align:center}
}

/* ── نموذج الحجز ────────────────────────────────────────
   مفيش سيرفر ورا الصفحة، فالنموذج بيركّب رسالة واتساب
   جاهزة ويفتحها. يعني صفر اعتماد على إضافة نماذج ووردبريس
   اللي كانت بتبعت لبريد مش مراقَب. */
.bookform{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.15rem,2.6vw,1.9rem);box-shadow:var(--elev-1)}
.bookform h2{font-size:clamp(1.15rem,1rem + .7vw,1.45rem);margin-bottom:.35rem}
.bookform>p{color:var(--text-3);font-size:.9375rem;margin-bottom:var(--s-2)}

.fields{display:grid;gap:.9rem}
@media (min-width:620px){.fields{grid-template-columns:1fr 1fr}.field--wide{grid-column:1/-1}}

.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label{font-size:.8125rem;font-weight:600;color:var(--text-2)}
.field label .req{color:var(--brand-dk)}
.field :is(input,select,textarea){
  width:100%;font:inherit;font-size:.9375rem;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.7rem .85rem;min-height:48px;
  transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease),
             box-shadow var(--t-1) var(--ease)}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.field :is(input,select,textarea):hover{border-color:var(--line-hi)}
.field :is(input,select,textarea):focus{outline:0;background:var(--surface);
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:left 1.05rem top 55%,left .75rem top 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-inline-start:2rem}
/* حالة الخطأ.
   كانت ‎:invalid:not(:placeholder-shown)‎ — والمشكلة إن
   ‎:placeholder-shown‎ ما بتنطبقش على ‎<select>‎ أصلًا، والقوائم
   المطلوبة أول خيار فيها ‎disabled‎ يعني ‎:invalid‎ من أول تحميل.
   النتيجة: إطار أحمر على كل القوائم قبل ما المستخدم يلمس حاجة.
   ‎:user-invalid‎ ما بتشتغلش غير بعد تفاعل فعلي. ولو المتصفح
   ما بيعرفهاش، مافيش إطار أحمر خالص — تدهور آمن.

   اللون أحمر صريح مش برتقالي غامق، عشان ما يتلخبطش مع لون
   العلامة. 6.0:1 على الأبيض. */
.field :is(input,select,textarea):user-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.field .hint{font-size:.75rem;color:var(--text-3)}

.bookform .actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:var(--s-2)}
.bookform .actions .note-inline{font-size:.8125rem;color:var(--text-3)}

/* بطاقات طرق التواصل */
.contact-ways{display:grid;gap:.75rem}
.way{display:flex;align-items:center;gap:.85rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.1rem;
  transition:border-color var(--t-2) var(--ease),background var(--t-2) var(--ease),
             transform var(--t-2) var(--ease)}
a.way:hover{border-color:var(--line-hi);background:var(--surface-hi);transform:translateY(-2px)}
.way svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--brand-txt);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.way b{display:block;font-size:.9375rem;font-weight:600;line-height:1.5}
.way span{display:block;font-size:.8125rem;color:var(--text-3);line-height:1.6}

/* ملاحظة: ‎#000‎ في ‎mask-image‎ تحت مش لون تصميم — هو قيمة
   عتامة القناع. المتصفح بيقرا القناة الضوئية بس: أسود = مخفي،
   شفاف = ظاهر. تحويله لمتغيّر لوني بيوهم إنه لون وهو مش كده.
   قناع لا لون. */
/* ── hero ──────────────────────────────────────────── */
.hero{
  position:relative;min-height:min(100svh,820px);
  display:grid;align-items:end;
  padding-block:calc(var(--header-h) + var(--s-5)) var(--s-4);
  isolation:isolate;overflow:clip;
}
.hero-media{position:absolute;inset:0;z-index:-2}
/* الوسم <picture> بيتشال من الحساب عشان الصورة تفضل بترسم على مقاس .hero-media */
.hero-media picture{display:contents}
/* الإطار المرجعي: شبكة ساكنة تجعل انزياح الصورة خلفها مقروءًا للعين */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(22,24,28,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(22,24,28,.045) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(86% 78% at 72% 42%,#000 24%,transparent 76%);
  mask-image:radial-gradient(86% 78% at 72% 42%,#000 24%,transparent 76%);
}
/* حبيبة فيلمية ساكنة — تُرسم مرة واحدة، صفر تكلفة لكل إطار */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
/* التدرّج الموحّد للصور — نفس الوصفة، لكن معايرة للورق بدل الفحم:
   الأسود يصعد لـ‎31‎ والأبيض يقف عند ‎254‎، فلا يوجد قصّ في الأطراف. */
.hero-media :is(img,video){
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.34) saturate(1.35) hue-rotate(-12deg) contrast(.78) brightness(1.12);
}
/* الستائر: طبقة دفء + غسيل أفقي ناحية النص + غسيل رأسي أعلى الهيدر وأسفل النص.
   أسوأ حالة مقيسة تحت النص: ‎13.7:1‎ للنص الأساسي، ‎4.9:1‎ لسطر المعلومات. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(160deg,rgba(248,156,33,.12),transparent 46%),
    linear-gradient(to right,transparent 12%,rgba(242,243,245,.45) 44%,rgba(242,243,245,.88) 84%),
    linear-gradient(to bottom,rgba(242,243,245,.90) 0%,rgba(242,243,245,.42) 20%,
      rgba(242,243,245,.30) 40%,rgba(242,243,245,.78) 74%,rgba(242,243,245,.95) 92%,var(--bg) 100%);
}
/* ستارة الشاشات الضيقة — معايَرة للرسمة الجديدة.
   الرسمة بتحط كتلة العربيات الغامقة ورا النص كل ما الشاشة تضيق،
   فالستارة العامة (المعايَرة لصورة واجهة فاتحة) بتنزل تحت AA في
   نطاقين: ‎320–480‎ و‎601–660‎ (أدنى قياس ‎4.26:1‎).
   الحدّ ‎820px‎ مش ‎600‎ عن قصد: عند ‎601px‎ بتشتغل قصّة التابلت على
   شاشة لسه ضيقة، وهي أسوأ حالة في المسح كله.
   بعد المعايرة: أدنى ‎4.65:1‎ عبر ‎320→1920‎.
   مقيس من بكسلات حقيقية والنص مخفي — مش من قيم محسوبة. */
@media (max-width:820px){
  .hero-media::after{
    background:
      linear-gradient(160deg,rgba(248,156,33,.10),transparent 46%),
      linear-gradient(to bottom,rgba(242,243,245,.95) 0%,rgba(242,243,245,.75) 18%,
        rgba(242,243,245,.85) 42%,rgba(242,243,245,.93) 68%,
        rgba(242,243,245,.97) 88%,var(--bg) 100%);
  }
}
.hero-inner{display:grid;gap:var(--s-3);max-width:min(46rem,100%)}
.hero .display{max-width:15ch}
.hero .display b{color:var(--brand-txt);font-weight:800}
.hero .lead{max-width:52ch;font-size:1.0625rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-1)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;
  color:var(--text-3);font-size:.875rem;margin-top:var(--s-2);
}
.hero-meta li{display:flex;align-items:center;gap:.45rem;list-style:none}
.hero-meta li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand);flex:none}
/* على سطر واحد النقطة بتشتغل فاصل، فأول عنصر من غير نقطة */
.hero-meta li:first-child::before{display:none}
/* لما السطر يلف لأكتر من سطر، النقطة ترجع على كل العناصر عشان تبقى
   قائمة متسقة — من غير كده أول سطر يفضل من غير نقطة والباقي بنقطة */
@media (max-width:880px){.hero-meta li:first-child::before{display:block}}
/* هدف اللمس 44×46 والشكل المرئي 20×34 داخله */
.hero .wrap{position:relative}
.cue{
  /* سطر المعلومات بقى أطول ووصل لنص الشاشة، فالسهم اتنقل بره مساره
     — في RTL دي الناحية الشمال، وفيها فراغ كافي على كل المقاسات ‎>880px‎ */
  position:absolute;inset-block-end:0;inset-inline-end:0;
  width:44px;height:46px;display:grid;place-items:center;
}
.cue::before{
  content:"";position:absolute;width:20px;height:34px;
  border:1px solid var(--line-hi);border-radius:var(--r-pill);
  transition:border-color var(--t-2) var(--ease);
}
.cue:hover::before{border-color:var(--brand-dk)}
.cue span{width:2px;height:6px;border-radius:2px;background:var(--brand-dk);
  position:relative;align-self:start;margin-block-start:12px;
  animation:cueLoop 2.4s var(--ease) infinite}
@media (max-width:880px){.cue{display:none}}

/* ── شريط المصداقية: عشر سنوات + علامتا رينو و نيسان ── */
.cred{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.75rem);flex-wrap:wrap}
.cred-line{display:flex;align-items:center;gap:.7rem;color:var(--text-2);font-size:.8125rem;
  line-height:1.4;font-weight:300;padding-inline-end:clamp(1rem,2.5vw,1.75rem);
  border-inline-end:1px solid var(--line-hi)}
/* ‎gap‎ الخاص بـ‎.cred-line‎ كان بيفصل الـ+ عن الرقم كمان.
   الغلاف بيخلّي الاتنين وحدة واحدة، والـgap يفصلها عن النصّ بس. */
.cred-num{display:flex;align-items:center;gap:0}
.cred-line b{font-size:clamp(2.1rem,1.4rem + 1.8vw,2.9rem)}
.cred-line b{font-weight:800;line-height:1;color:var(--text);letter-spacing:-.02em}
.cred-line span{white-space:nowrap;color:var(--text);font-weight:300}
/* العلامة مرسومة لا محرفة. الخط محمّل بأوزان 300–800 فقط، فأي وزن
   أرفع من 300 كان هيسقط صامتًا لنفس السُمك. الرسم بيدّي تحكّمًا مباشرًا
   في السُمك والمقاس معًا، وبيتمدّد بلا فقد حدّة. */
.cred-line .plus{
  display:inline-flex;align-items:center;align-self:center;
  color:var(--text-3);                                   /* أفتح من الرقم */
  inline-size:calc(clamp(2.1rem,1.4rem + 1.8vw,2.9rem) * .78);
  block-size:calc(clamp(2.1rem,1.4rem + 1.8vw,2.9rem) * .78);
  margin-inline-end:-.06em;
}
.cred-line .plus svg{
  inline-size:100%;block-size:100%;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;                 /* رفيع عن قصد */
}

.brand-pills{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
/* شعار مجرّد: بلا دايرة وبلا حركة. الشعارات مرسومة أبيض صافٍ،
   فـ‎brightness(0)‎ يقلبها لعلامة داكنة تُقرأ على الورق. */
.brand-pill{
  display:inline-flex;align-items:center;
  padding:0;border:0;background:none;border-radius:0;
}
/* العلامتان مالئتان لكانفاسهما بالكامل (بلا هامش شفاف)، يعني ارتفاع
   الكانفس = ارتفاع العلامة نفسها. فارتفاع واحد = معيّن رينو بنفس قطر
   دايرة نيسان — وده المطابقة البصرية الصحيحة للشكلين. */
.brand-pill img{
  height:34px;width:auto;flex:none;
  filter:brightness(0);opacity:.55;
  transition:opacity var(--t-2) var(--ease);
}
.brand-pill:hover img,.brand-pill:focus-visible img{opacity:.85}
@media (max-width:600px){
  .cred{gap:.9rem}
  .cred-line{padding-inline-end:.9rem}
  .cred-line b{font-size:2rem}
  /* ارتفاع واحد هنا كمان — كان 29/25 فالفرق بيرجع على الموبايل */
  .brand-pill img{height:28px}
}

/* ── models ────────────────────────────────────────── */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--s-3)}
.filters button{
  padding:.5rem 1.125rem;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.875rem;font-weight:600;color:var(--text-2);background:var(--surface);
  transition:color var(--t-1) var(--ease),border-color var(--t-1) var(--ease),background var(--t-1) var(--ease);
}
.filters button:hover{color:var(--text);border-color:var(--line-hi)}
.filters button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;list-style:none}
.more{display:flex;justify-content:center;margin-top:var(--s-3)}
.model{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
  box-shadow:var(--elev-1);display:grid;
  transition:border-color var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),
             transform var(--t-2) var(--ease)
}
.model:hover{border-color:var(--line-hi);box-shadow:var(--elev-2);transform:translateY(-2px)}
.model>a{display:grid;position:relative;border-radius:inherit;overflow:hidden}
/* ── showcase: سيارة على خلفية فاتحة ─────────────── */
.showcase{
  position:relative;
  margin:clamp(1.5rem,3.5vw,2.5rem) auto clamp(2rem,4.5vw,3rem);
  max-width:min(32rem,100%);
  display:grid;place-items:center;
}
/* هالة دافئة — على الورق دورها صار تأطير الضوء لا إنقاذ الرؤية */
.showcase::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:52%;translate:-50% -50%;
  width:88%;height:88%;
  background:radial-gradient(58% 62% at 50% 50%,
    rgba(248,156,33,.13), rgba(248,156,33,.045) 46%, rgba(248,156,33,0) 72%);
}
/* ظل أرضي من طبقتين — هو ما يثبّت السيارة على الورق.
   طبقة تلامس ضيقة وغامقة تحت الإطارات + طبقة محيطة واسعة وناعمة.
   ضروري تحديدًا لأن جسم السيارة فاتح: بدونه تطفو فوق الخلفية البيضاء. */
.showcase::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:2.5%;translate:-50% 0;
  width:82%;height:3.25rem;
  background:
    radial-gradient(34% 42% at 50% 62%,
      rgba(16,18,22,.42), rgba(16,18,22,0) 72%),
    radial-gradient(50% 50% at 50% 55%,
      rgba(16,18,22,.20), rgba(16,18,22,0) 76%);
}
.showcase :is(picture,img){position:relative;z-index:1;display:block}
.showcase img{
  width:100%;height:auto;
  /* الظل آخر السلسلة عمدًا: كده تقدر تُستكمل بالتدرّج من نسخة بلا ظل.
     ولأن drop-shadow بيشتغل على الألفا، ترتيبه بعد اللون مايغيّرش شكله. */
  filter:contrast(1.07) saturate(1.03) drop-shadow(0 20px 28px rgba(16,18,22,.30));
  will-change:transform,opacity;
}

/* زووم من الصغير للكبير — دخول واحد قوي ثم سكون تام.
   شِلنا الإزاحة الأفقية: الزووم من المركز أقوى وأنضف من زحف جانبي. */
@keyframes carIn{
  from{opacity:0;scale:.76}
  to  {opacity:1;scale:1}
}
/* الظل يدخل بعد ما الزووم يقف، مش أثناءه.
   قِستها: إعادة حساب drop-shadow كل إطار أثناء التكبير بتزوّد زمن
   الإطار 57% — والظل مالوش أي قيمة بصرية والسيارة لسه بتكبر. */
@keyframes carShadow{
  from{filter:contrast(1.07) saturate(1.03)}
  to  {filter:contrast(1.07) saturate(1.03) drop-shadow(0 20px 28px rgba(16,18,22,.30))}
}
.js .showcase img{opacity:0}
.js .showcase.is-in img{
  animation:carIn 1300ms cubic-bezier(.2,.72,.24,1) both,
            carShadow 260ms 1300ms both;
}

@media (max-width:600px){
  .showcase{max-width:min(22rem,100%);margin-block:1.25rem 1.75rem}
  .showcase::after{height:2.2rem;bottom:2%}
}
@media (prefers-reduced-motion:reduce){
  .js .showcase img,
  .js .showcase.is-in img{animation:none!important;opacity:1!important;translate:none!important;scale:none!important;
    filter:contrast(1.07) saturate(1.03) drop-shadow(0 20px 28px rgba(16,18,22,.30))!important}
}
/* بدون نسبة ثابتة — الطول يتحدّد من الصورة نفسها.
   يعني: صفر قص، وصفر حواف رمادية، مهما كان مقاس الصورة الحقيقي. */
.model-plate{background:var(--surface-sunk);display:block;padding:0;overflow:hidden;
  min-height:5rem}
.model-plate img{width:100%;height:auto;display:block;
  mix-blend-mode:multiply;transition:transform var(--t-3) var(--ease)}
.model:hover .model-plate img,.model:focus-within .model-plate img{transform:scale(1.06)}

/* التسمية تطفو فوق الصورة على ستارة متدرجة تكاد لا تُرى */
.model-cap{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:1;
  padding:1.9rem .7rem .6rem;display:grid;gap:.02rem;text-align:start;
  background:linear-gradient(to top,rgba(255,255,255,.97) 12%,rgba(255,255,255,.72) 55%,transparent);
  opacity:0;translate:0 10px;
  transition:opacity var(--t-2) var(--ease),translate var(--t-2) var(--ease);
}
.model:hover .model-cap,.model:focus-within .model-cap{opacity:1;translate:0 0}
.model-cap b{color:var(--text);font-size:.8125rem;font-weight:600;line-height:1.35}
.model-cap span{color:var(--text-2);font-size:.6875rem;direction:ltr;text-align:right;line-height:1.4}

/* على الأجهزة التي لا تدعم المرور تبقى التسمية ظاهرة دائمًا */
@media (hover:none){
  .model-cap{opacity:1;translate:0 0}
}
[hidden]{display:none!important}

/* لوحة بديلة لموديل لسه مجاش صورته — بدل رابط صورة مكسور */
.model-plate--soon{display:grid;place-items:center;gap:.4rem;width:100%;aspect-ratio:300/188;
  background:var(--surface-sunk);color:var(--text-3)}
.model-plate--soon svg{width:44%;height:auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.model-plate--soon b{font-size:.75rem;font-weight:600}

/* ملاحظة: ‎#000‎ في ‎mask-image‎ تحت مش لون تصميم — هو قيمة
   عتامة القناع. المتصفح بيقرا القناة الضوئية بس: أسود = مخفي،
   شفاف = ظاهر. تحويله لمتغيّر لوني بيوهم إنه لون وهو مش كده.
   قناع لا لون. */
/* ── partners ──────────────────────────────────────── */
/* الهامش والحدّ العلوي كانوا من وقت ما الكتلة دي كانت جوّه قسم الخدمات.
   بقت قسمًا مستقلًّا، فالخط العلوي بقى خطًّا شاردًا والمسافة اتضاعفت
   فوق حشو القسم نفسه. */
.partners{display:grid;gap:var(--s-2)}
.section--partners{padding-block:clamp(1.6rem,3vw,2.4rem)}



/* ── شريط الشركاء ────────────────────────────────────── */
.logos{
  position:relative;overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logos-track{
  display:flex;align-items:center;gap:2.5rem;width:max-content;list-style:none;
  animation:marquee 76s linear infinite;animation-play-state:paused;
}
.logos.is-running .logos-track{animation-play-state:running}
.logos:hover .logos-track,.logos:focus-within .logos-track{animation-play-state:paused}
@keyframes marquee{to{translate:calc(-50% - 1.25rem) 0}}

.logo-chip{
  flex:none;width:268px;height:126px;display:grid;place-items:center;padding:0 .5rem;
}
/* على الورق ينعكس المنطق: بدل رفع الظلال، نُطفئ اللون ونخفض الحدّة —
   ثم يعود اللون كاملًا عند المرور. */
/* الوضع الافتراضي = صورة ظلّية داكنة نظيفة.
   ‎brightness(0)‎ بيسقّط أي لون لأسود مع الحفاظ على الشفافية.
   ما بستعملش ‎invert()‎: هي مش بتشيل اللون، هي بتقلبه — فالعلامة
   الحمرا بتطلع سماوي والأزرق بيطلع برتقالي. ودي كانت مصدر
   الألوان الغلط في الشريط.
   و‎grayscale()‎ برضه غلط هنا: بتسيب الأبيض أبيض = مش ظاهر على الورق. */
/* الافتراضي: ألوان الشعار الطبيعية بلا أي فلتر.
   ‎brightness(0)‎ كان مطبَّقًا على الكل، فأي شعار ملوّن كان بينسحق
   لأسود — الفلتر بيسقّط اللون سواء المصدر أبيض أو ملوّن، والنتيجة
   واحدة في الحالتين فمستحيل تفرّق منها.
   الشعار الأبيض (لو فيه) يتعلّم بـdata-tone="mono" فرديًا. */
.logo-chip img{
  max-width:100%;max-height:110px;width:auto;height:auto;object-fit:contain;
  opacity:.9;transition:filter var(--t-2) var(--ease),opacity var(--t-2) var(--ease),
             transform var(--t-2) var(--ease);
}
.logo-chip:hover img{opacity:1;transform:scale(1.04)}

/* الشعارات الأصلية الملوّنة: تظهر بألوانها بلا أي معالجة. */

/* مخرج يدوي لشعار مفرد: color ألوان كاملة · mono ظلّية داكنة */
.logo-chip[data-tone="mono"] img{filter:brightness(0);opacity:.55}
.logo-chip[data-tone="mono"]:hover img{filter:brightness(0);opacity:.82}
@media (max-width:600px){
  .logo-chip{width:196px;height:92px}
  .logo-chip img{max-height:80px}
}

/* ترويسة القسم: العنوان يمين والرابط شمال في نفس السطر — بدل ما
   الرابط ياخد سطرًا لوحده ويوسّع القسم بلا داعٍ. */
.partners-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap}
.partners-cta{font-size:.9rem;font-weight:600;color:var(--brand-txt,#B26A00);
  white-space:nowrap}
.partners-cta:hover,.partners-cta:focus-visible{text-decoration:underline}
@media (max-width:560px){
  .partners-head{gap:.35rem}
  .partners-cta{font-size:.85rem}
}

/* ── reviews ───────────────────────────────────────── */
.rail{
  display:flex;align-items:flex-start;gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding-block-end:.35rem;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
  scrollbar-width:none;
}
/* بدون شريط تمرير — النقاط هي وسيلة التنقّل الوحيدة */
.rail::-webkit-scrollbar{display:none;height:0}
.rail{-ms-overflow-style:none}
.rail>*{
  flex:0 0 min(268px,74vw);
  transition:flex-basis var(--t-2) var(--ease);
}
/* التوسّع مسموح للكروت اللي في نص الشريط فقط — بتتعلّم بـdata-grow
   من السكربت. كارت على الطرف لو كبر هيتقصّ، فبيتساب زي ما هو. */
.rail>*[data-grow]:hover,.rail>*[data-grow]:focus-within{flex-basis:min(372px,86vw)}
.rail>*:not([data-grow]):hover{translate:0 -2px}
/* مساحة عشان الكارت المكبّر ما يتقصّش على حواف الشريط */
.rail{padding-block:.6rem .95rem}
.review{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
  box-shadow:var(--elev-1);position:relative;
  transition:border-color var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),
             transform var(--t-2) var(--ease)
}
/* الكارت بيكبر فعليًا (flex-basis) فيزحزح جيرانه بدل ما يتراكب فوقهم.
   ‎scale‎ كان بيكبّره بصريًا بس، والجيران يفضلوا مكانهم ويتغطّوا. */
.review:hover,.review:focus-within{
  border-color:var(--line-hi);box-shadow:var(--elev-2);
  translate:0 -4px;z-index:3;
}
@media (prefers-reduced-motion:reduce){
  .review:hover,.review:focus-within{translate:none}
  .rail>*{transition:none}
}
/* الارتفاع يتبع الصورة نفسها — بدون قص، عشان تبان لقطة حقيقية */
.review img{width:100%;height:auto;display:block;object-fit:contain}
/* الارتفاع الأدنى يخصّ الكروت اللي فشلت صورتها فقط —
   لو اتحط على الكل بيظهر شريط تحت الصور القصيرة */
.review:has(.review-fallback){min-height:9rem}
.review-fallback{
  position:relative;display:grid;place-items:center;text-align:center;padding:2.5rem 1rem;
  color:var(--text-2);font-size:.8125rem;
}

/* نقاط التنقل */
.rail-dots{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:.45rem;margin-top:1.15rem;
}
.rail-dots button{
  inline-size:.5rem;block-size:.5rem;padding:0;border:0;border-radius:50%;
  background:rgba(22,24,28,.18);cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background var(--t-2) var(--ease),inline-size var(--t-2) var(--ease),
             border-radius var(--t-2) var(--ease);
}
.rail-dots button:hover{background:rgba(22,24,28,.38)}
.rail-dots button[aria-selected="true"]{
  background:var(--brand);inline-size:1.5rem;border-radius:.25rem;
}
.rail-dots button:focus-visible{outline:2px solid var(--brand-txt);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .rail-dots button{transition:none}
}

/* ═══════════════════════════════════════════════════════
   آراء العملاء — بطاقات نصّية
   بدون أي توكن جديد: كلها من النظام القائم.
   ═══════════════════════════════════════════════════════ */
.rv-sum{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--elev-1);padding:clamp(.9rem,2vw,1.25rem) clamp(1rem,2.2vw,1.5rem);
  margin-block-end:clamp(1rem,2.2vw,1.5rem);
}
.rv-sum-score{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.rv-sum-score b{
  font-size:clamp(1.9rem,1.4rem + 1.4vw,2.4rem);font-weight:800;
  line-height:1;color:var(--text);
}
.rv-sum-score small{color:var(--text-3);font-size:.8125rem}
.rv-sum-link{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  color:var(--brand-txt);font-size:.875rem;font-weight:600;
  transition:opacity var(--t-1) var(--ease);
}
.rv-sum-link:hover{opacity:.75}

/* النجوم — رمز واحد يُعاد استعماله */
.rv-stars{display:inline-flex;align-items:center;gap:.1rem}
.rv-star{inline-size:14px;block-size:14px;fill:rgba(22,24,28,.16);flex:none}
.rv-star.is-on{fill:var(--brand)}
.rv-star--lg{inline-size:18px;block-size:18px}
/* النجمة الجزئية: الرمادية أساس والبرتقالية المقصوصة فوقها في نفس
   خلية الشبكة. التراكب بهامش سالب كان بيرسم الرمادي فوق البرتقالي
   ويسيب شريحة من عدم دقة المحاذاة بدل النسبة الحقيقية. */
.rv-part{display:inline-grid;flex:none;line-height:0}
.rv-part>*{grid-area:1/1}
/* نصف نجمة: نسخة ملوّنة مقصوصة فوق الفارغة */
.rv-star.is-half{position:relative}
.rv-star.is-half{fill:rgba(22,24,28,.16)}
.rv-star.is-half::after{content:""}
.rv-stars .is-half{
  fill:var(--brand);
  clip-path:inset(0 0 0 50%);
}

/* البطاقة */
.review--txt{
  display:grid;grid-template-rows:auto 1fr auto;gap:.7rem;
  padding:clamp(1rem,2vw,1.25rem);
  background:var(--surface);overflow:visible;
}
.rail>.review--txt{flex:0 0 min(330px,82vw)}
/* التوسّع اتصمّم للصور، ومع النصّ بيزحزح السطور أثناء القراءة */
.rail>.review--txt[data-grow]:hover,
.rail>.review--txt[data-grow]:focus-within{flex-basis:min(330px,82vw)}

.rv-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.rv-src{
  font-size:11px;color:var(--text-3);line-height:1;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.28rem .6rem;
}
.rv-q{
  position:relative;margin:0;font-size:.9375rem;font-weight:300;line-height:1.8;
  color:var(--text-2);transition:color var(--t-2) var(--ease);
  /* الارتفاع طبيعي: كل بطاقة على قدّ نصّها. تثبيت الارتفاع كان
     بيسيب فراغًا أسفل المراجعة القصيرة، والتفاوت أصدق بصريًا.
     القصّ باقٍ عند 8 سطور عشان مراجعة الـ134 كلمة ماتعملش بطاقة
     بضعف طول جيرانها — النصّ الكامل موجود في البيانات المنظّمة. */
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* التلاشي للمقصوص فقط. CSS مايقدرش يعرف إن النصّ اتقصّ، فالسكربت
   بيعلّم البطاقة بـdata-clamped. من غير الشرط ده كان التلاشي بيقع على
   آخر سطر في المراجعات القصيرة كمان فتبان مقطوعة وهي كاملة. */
.rv-q[data-clamped]::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:2.1em;
  background:linear-gradient(to top,var(--surface),transparent);pointer-events:none;
}
.review--txt:hover .rv-q,.review--txt:focus-within .rv-q{color:var(--text)}
.rv-q::before{
  content:"”";position:absolute;inset-block-start:-1.15rem;inset-inline-start:-.15rem;
  font-size:2.6rem;line-height:1;color:var(--brand);opacity:.16;pointer-events:none;
}
.rv-foot{
  display:flex;align-items:center;gap:.6rem;
  border-block-start:1px solid var(--line);padding-block-start:.7rem;
}
.rv-av{
  inline-size:34px;block-size:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-hi);border:1px solid var(--line-hi);
  color:var(--brand-txt);font-weight:700;font-size:.9375rem;line-height:1;
}
.rv-who{display:grid;gap:.1rem;min-inline-size:0}
.rv-who b{font-size:.875rem;font-weight:600;color:var(--text);line-height:1.3}
.rv-who small{font-size:.75rem;color:var(--text-3);line-height:1.4}

.rv-cta{
  text-align:center;font-size:.875rem;color:var(--text-3);
  margin-block-start:clamp(.9rem,2vw,1.25rem);
}
.rv-cta a{color:var(--brand-txt);font-weight:600}
.rv-cta a:hover{opacity:.75}

@media (max-width:600px){
  .rv-sum{align-items:flex-start}
  .rv-sum-link{inline-size:100%}
}

/* ── عارض جدول الصيانة ──────────────────────────────────
   الجدول دلوقتي صورة. صورة جدول على موبايل = نص بحجم 4px
   ومفيش طريقة تقراه. فالعارض ده بيحل تلات حاجات:
     1. الصورة تتفتح بحجمها الكامل في تبويب جديد
     2. على الشاشات الصغيرة تتزحلق أفقيًا بعرض مقروء
     3. الحاوية قابلة للتركيز بالكيبورد عشان التزحليق

   المرحلة التانية (تحويل الجدول لـHTML) هتستبدل .sched-img
   بجدول نصّي — من غير أي تغيير في باقي الصفحة. */
.sched{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(.6rem,1.6vw,1rem);box-shadow:var(--elev-1);overflow:hidden}
.sched-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm)}
.sched-scroll:focus-visible{outline:2px solid var(--brand-txt);outline-offset:3px}
.sched-img{
  display:block;width:100%;height:auto;border-radius:var(--r-sm);
  background:var(--bg-alt);   /* مكان محجوز قبل ما الصورة تحمّل */
  min-height:180px}
@media (max-width:760px){
  .sched-img{width:auto;max-width:none;min-width:680px}  /* أقل عرض يخلّي الأرقام مقروءة */
}
.sched-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}
.sched-hint{font-size:.8125rem;color:var(--text-3)}
.sched-open{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.4rem .9rem;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.875rem;font-weight:600;color:var(--text);background:var(--bg);
  transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease)}
.sched-open:hover{border-color:var(--line-hi);background:var(--surface-hi)}
.sched-open svg{width:15px;height:15px;fill:none;stroke:var(--brand);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* شريط الموديلات القريبة — ربط داخلي بين الجداول */
.siblings{display:flex;flex-wrap:wrap;gap:.5rem}
.sibling{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.45rem .95rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);
  font-size:.875rem;font-weight:600;color:var(--text-2);
  transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease),
             color var(--t-1) var(--ease)}
.sibling:hover{border-color:var(--line-hi);background:var(--surface-hi);color:var(--text)}

/* سطر تعريفي أعلى العنوان */
.model-sub{color:var(--text-2);font-size:.9375rem;margin-top:.15rem}

/* ══ المرحلة التانية: الجدول النصّي ═══════════════════════════
   الصورة كانت غير مقروءة على الموبايل وغير مرئية لمحركات البحث.
   دلوقتي <table> حقيقي: كل سعر نص، والإجماليات محسوبة في البناء.

   قاعدة اللون: البرتقالي 2.15:1 على الأبيض — يسقط في AA لو بقى
   لون نص. فهو هنا خلفية تحت حبر غامق فقط، والأرقام بلون النص. */
.pt-bar{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:var(--s-2)}
.pt-bar>span{font-size:.8125rem;font-weight:600;color:var(--text-3);margin-inline-end:.3rem}
.pt-bar button{
  min-height:44px;padding:.5rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--line-hi);background:var(--surface);
  font:inherit;font-size:.875rem;font-weight:600;color:var(--text-2);cursor:pointer;
  transition:background var(--t-1) var(--ease),color var(--t-1) var(--ease),
             border-color var(--t-1) var(--ease)}
.pt-bar button:hover{border-color:var(--text-3);color:var(--text)}
.pt-bar button[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

/* بطاقة السعر */
.pq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--elev-1);overflow:hidden;margin-bottom:var(--s-2)}
.pq-top{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  justify-content:space-between;padding:.9rem clamp(.9rem,2.4vw,1.4rem);
  border-bottom:1px solid var(--line);background:var(--bg-alt)}
.pq-top h3{font-size:1.0625rem;font-weight:800;margin:0}
.pq-top span{font-size:.8125rem;color:var(--text-3)}
.pq-f{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.pq-i{background:var(--surface);padding:clamp(.85rem,2.2vw,1.25rem);display:grid;gap:.1rem}
.pq-i>span{font-size:.8125rem;font-weight:600;color:var(--text-3)}
.pq-i>b{font-size:clamp(1.3rem,1rem + 1.5vw,1.85rem);font-weight:800;color:var(--text);
  line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pq-i>b em{display:inline-block;font-style:normal;font-size:.8125rem;font-weight:700;
  padding:.1rem .5rem;margin-inline-start:.35rem;vertical-align:middle;
  border-radius:var(--r-pill);background:var(--brand);color:var(--brand-ink)}
.pq-s{background:var(--bg-alt)}

/* الجدول */
.pt{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem;
  line-height:1.35;font-variant-numeric:tabular-nums}
.pt th,.pt td{padding:.6rem .7rem;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--line);background:var(--pb,transparent)}
.pt .pt-z{--pb:rgba(22,24,28,.022)}
.pt-it{position:sticky;inset-inline-end:0;z-index:2;min-width:10.5rem;text-align:start;
  white-space:normal;font-weight:600;color:var(--text);background:var(--surface);
  box-shadow:-1px 0 0 var(--line)}
.pt thead .pt-it,.pt tfoot .pt-it{background:var(--bg-alt);z-index:3}
.pt-it small{display:block;font-weight:400;font-size:.75rem;color:var(--text-3)}
.pt thead th{background:var(--bg-alt)}
.pt-pk{border-inline-start:1px solid var(--line);padding-block:.65rem}
.pt-pk b{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.01em}
.pt-pk small{display:block;font-size:.6875rem;font-weight:400;color:var(--text-3)}
.pt-g{font-size:.75rem;font-weight:600;color:var(--text-3);padding-block:.35rem}
.pt-go{border-inline-start:1px solid var(--line)}
.pt-o{font-weight:700;color:var(--text);border-inline-start:1px solid var(--line)}
.pt-a{color:var(--text-2)}
.pt-no{color:var(--text-3);opacity:.45;font-weight:400}
.pt-nt{display:block;font-size:.6875rem;font-weight:400;color:var(--text-3);
  white-space:normal;max-width:9rem;margin-inline:auto}
.pt tbody tr:hover td{--pb:rgba(22,24,28,.045)}
.pt-lab th,.pt-lab td{border-bottom:2px solid var(--line-hi)}
.pt tfoot th,.pt tfoot td{border-bottom:0;padding-block:.8rem;font-size:.9375rem;
  font-weight:800;background:var(--pb,var(--bg-alt))}
.pt tfoot .pt-z{--pb:rgba(22,24,28,.045)}
.pt-to{border-inline-start:1px solid var(--line)}
.pt-to b{display:inline-block;background:var(--brand);color:var(--brand-ink);
  border-radius:var(--r-sm);padding:.18rem .55rem;font-weight:800}
.pt-ta{color:var(--text)}
.pt-note{display:grid;gap:.3rem;margin-top:.9rem;font-size:.8125rem;
  line-height:1.75;color:var(--text-3)}
.pt-note p{margin:0}
.pt-note b{color:var(--text);font-weight:700}
.pt-hint{display:none;font-size:.8125rem;color:var(--text-3);margin-bottom:.6rem}

/* موبايل: باقة واحدة في المرة. الباقي مخفي بالـCSS وموجود للفهرسة. */
@media (max-width:820px){
  .js .sched-scroll{overflow-x:visible}
  .js .pt-it{position:static;min-width:0}
  .js .pt th,.js .pt td{white-space:normal}
  .js .pt-pk b{font-size:1rem}
  .js .pt tfoot th,.js .pt tfoot td{font-size:1.0625rem}
  .js .pt-hint{display:block}
  .pq-f{grid-template-columns:1fr 1fr}
  .pq-s{grid-column:1/-1;display:flex;align-items:baseline;gap:.5rem}
  .pt-bar button{flex:1 1 auto}
}
@media (max-width:520px){.pq-f{grid-template-columns:1fr}.pq-s{grid-column:auto}}

/* طباعة / حفظ PDF — الجدول كامل على الورق */
@media print{
  .header,.drawer,.pt-bar,.pq,.sched-bar,.hero-actions,.footer,.skip,
  .wa-fab,.faq,.pt-hint,.siblings,.section--alt{display:none!important}
  html,body{background:#fff!important}
  .sched{border:0;box-shadow:none;padding:0}
  .sched-scroll{overflow:visible!important}
  .pt-it{position:static!important}
  .pt{font-size:9pt}
  .pt th,.pt td{border-color:#bbb!important;background:#fff!important;
    color:#000!important;padding:.28rem .3rem}
  .pt-to b{background:#eee!important;color:#000!important}
  .pt-pk small,.pt-g,.pt-nt{color:#444!important}
  .section{padding-block:.4rem}
  @page{size:A4 landscape;margin:10mm}
}

/* كلاسات هيكلية للجدول — معرّفة صراحةً عشان فاحص الكلاسات */
.pt-v{font-variant-numeric:tabular-nums}
.pt-t{font-weight:800}
.pt-ga{color:var(--text-3)}

/* صورة العربية في ترويسة صفحة الموديل — نفس صورة كارت الموديل */
.model-shot{margin:var(--s-3) 0 0;max-width:340px}
.model-shot img{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:contain;
  background:var(--surface-sunk);border-radius:var(--r-sm)}
@media (min-width:900px){
  .pagehead .wrap:has(.model-shot){display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:var(--s-4);align-items:center}
  .pagehead .wrap:has(.model-shot)>.crumbs{grid-column:1/-1}
  .model-shot{margin:0;justify-self:end}
}