/* =========================================================================
   Mr.Consulto — v9.  طبقة فوق site.css.
   الهوية متل ما هي: CHARCOAL #1C1D20 · IVORY #F4E7C8 · OFF-WHITE #F5F4F2
   الإضافة الوحيدة: SIGNAL RED #D23B2C — لون تمييز، مكان واحد بكل شاشة.
   ما في أسود، ما في كحلي، ما في رمادي مستقل — كل الأسطح مشتقّة من التلاتة.
   ========================================================================= */

:root{
  --accent:#BC5042;
  --accent-ink:#FFFFFF;

  /* سطح مرفوع: عاجي بشفافية فوق الفحمي — مو لون جديد */
  --lift:rgba(244,231,200,.045);
  --lift-2:rgba(244,231,200,.075);

  /* ألوان محرّك الهيرو — بيقراهن hero-v9.js */
  --hero-ink:244,231,200;
  --hero-accent:188,80,66;
}

/* الكلمة المقلوبة — أداة التمييز الوحيدة بالهوية، صارت حمرا */
.inv,.sec-light .inv{background:var(--accent);color:var(--accent-ink)}

/* الزر الأساسي أحمر على السطحين */
.btn-solid,.sec-light .btn-solid{background:var(--accent);color:var(--accent-ink)}
.btn-solid:hover,.sec-light .btn-solid:hover{box-shadow:0 12px 34px rgba(188,80,66,.30)}

/* =========================================================================
   v9 — الأقسام الجديدة: فهرس الأعمال · جدار الشغل · الشريط الفاصل
   ========================================================================= */

/* الشريط الأحمر الرفيع — الإشارة يلي بتربط الصفحة */
.sig{height:2px;border:0;margin:0;
  background:linear-gradient(to left,transparent,var(--accent) 30%,var(--accent) 70%,transparent)}

/* ——— فهرس الأعمال ——— */
.idx{margin-top:clamp(26px,4vw,40px);border-top:1px solid var(--c-16)}
.idx a{display:grid;grid-template-columns:38px 1fr auto;gap:16px;align-items:center;
  padding:clamp(14px,2vw,20px) 4px;border-bottom:1px solid var(--c-08);
  transition:background .2s var(--ease),padding-inline .2s var(--ease)}
.idx a:hover,.idx a:focus-visible{background:rgba(188,80,66,.06);padding-inline:10px}
.idx a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.idx .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent)}
.idx .t{font-size:clamp(18px,2.6vw,26px);font-weight:600;line-height:1.35}
html[lang="en"] .idx .t{font-family:Arial,Helvetica,"Segoe UI",system-ui,sans-serif;font-weight:700}
.idx .who{display:block;font-size:13px;font-weight:400;color:var(--c-55);margin-top:2px;
  font-family:'Alexandria',sans-serif}
.idx .tags{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--c-55);white-space:normal;max-width:36ch;line-height:1.6}
.idx .arw{color:var(--accent)}
html[dir="rtl"] .idx .tags{font-family:'Alexandria',sans-serif;font-size:12.5px;letter-spacing:0;white-space:normal;max-width:34ch;text-align:start}

/* ——— زر واتساب العايم كان بيغطي زر الهيرو عالجوال ——— */
@media (max-width:560px){
  .nh{padding-block-end:clamp(76px,18vw,110px)}
}


/* =========================================================================
   v9 · المرحلة 2 — فهرس الأعمال القابل للفتح · شريط الريلات · معرض التصوير · شريط الشركاء
   ========================================================================= */

/* ——— صفوف الفهرس بتتفتح ——— */
.idx details{border-bottom:1px solid var(--c-08)}
.idx summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:38px 1fr auto 22px;gap:16px;
  align-items:center;padding:clamp(14px,2vw,20px) 4px;transition:background .2s var(--ease),padding-inline .2s var(--ease)}
.idx summary::-webkit-details-marker{display:none}
.idx summary:hover,.idx summary:focus-visible{background:rgba(188,80,66,.06);padding-inline:10px}
.idx summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.idx .sub{display:block;font-size:13px;font-weight:400;color:var(--c-55);margin-top:2px;font-family:'Alexandria',sans-serif}
.idx .chev{width:22px;height:22px;color:var(--accent);transition:transform .3s var(--ease)}
.idx details[open] .chev{transform:rotate(180deg)}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 4px 22px;align-items:start}
.shots .desk{grid-column:span 2}
.shots .frame{background:var(--charcoal);border-radius:12px;padding:6px;box-shadow:0 18px 44px rgba(28,29,32,.18)}
.shots .frame img{width:100%;display:block;border-radius:8px}
.shots .frame.mob{max-width:230px;justify-self:start}
@media (min-width:760px){
  .shots{grid-template-columns:2.6fr 1fr}
  .shots .desk{grid-column:auto}
  .shots .frame.mob{max-width:100%;justify-self:stretch}
}

/* ——— شريط الريلات بقياسها الأصلي ——— */
.reels{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--i-18) transparent;margin-top:clamp(26px,4vw,40px)}
.reels figure{margin:0;flex:0 0 auto;height:clamp(300px,42vw,460px);aspect-ratio:9/16;position:relative;
  border-radius:14px;overflow:hidden;background:var(--lift);scroll-snap-align:start}
.reels video,.reels img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reels video{opacity:0;transition:opacity .35s}
.reels figure.playing video{opacity:1}
.reels figcaption{position:absolute;inset-block-end:0;inset-inline:0;padding:26px 12px 11px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--i-70);
  background:linear-gradient(to top,rgba(28,29,32,.9),transparent);pointer-events:none}
.reels .play{position:absolute;inset-inline-end:10px;inset-block-start:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(28,29,32,.55);border:1px solid var(--i-18);display:grid;place-items:center;color:var(--ivory);pointer-events:none}
.reels figure.playing .play{opacity:0}

/* ——— معرض التصوير — شبكة منظّمة، كل بلاطة 4:5 ——— */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(26px,4vw,40px)}
.gallery figure{margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--lift)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:transform .5s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.credit{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--i-38);margin-top:10px}
.sec-light .credit{color:var(--c-55)}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr);gap:8px}}

/* ——— شريط الشركاء المتحرّك ——— */
.partners{border-top:1px solid var(--i-10);border-bottom:1px solid var(--i-10);padding-block:28px;overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.partners .track{display:flex;gap:clamp(56px,8vw,110px);width:max-content;animation:mc-marquee 55s linear infinite}
.partners:hover .track{animation-play-state:paused}
.partners img{height:clamp(30px,3.6vw,42px);width:auto;max-width:clamp(120px,14vw,170px);object-fit:contain;display:block;opacity:.72;transition:opacity .25s}
.partners img:hover{opacity:1}
@keyframes mc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .partners .track{animation-name:mc-marquee-rtl}
@keyframes mc-marquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.partners .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ——— EN typography: standard sans (Arial) everywhere, by owner decision 12/09/2026 ——— */
html[lang="en"] body,html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4,
html[lang="en"] .h-display,html[lang="en"] .btn,html[lang="en"] .label,html[lang="en"] .idx .tags,
html[lang="en"] .idx .sub,html[lang="en"] .idx .n,html[lang="en"] .reels figcaption,html[lang="en"] .nh-scroll,
html[lang="en"] .chip,html[lang="en"] .navlinks a,html[lang="en"] .sheet-links a,html[lang="en"] .fn{
  font-family:Arial,Helvetica,"Segoe UI",system-ui,sans-serif}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] .h-display{font-weight:700;letter-spacing:-.015em}
html[lang="en"] .h-display{font-size:clamp(32px,5.6vw,66px);line-height:1.12}
html[lang="en"] h2{font-size:clamp(26px,3.6vw,42px)}
html[lang="en"] .btn{font-weight:700;letter-spacing:.01em;font-size:14px}
html[lang="en"] .label{letter-spacing:.18em}