/* ==========================================================================
   AWTAD ALRUMAILA — Design System
   Art direction: "Setting Out" — engineering precision × cinematic night.
   Palette derived from the brand mark (#003C71 navy / #FA6401 amber) and from
   the sodium-lit night photography of the company's own sites.
   RTL-first. Logical properties throughout.
   ========================================================================== */

/* ---------- 1. FONTS ---------------------------------------------------- */
/* Cairo متغيّر: ملف واحد للعربية وآخر للاتينية، يغطيان كل الأوزان 400–800
   (نفس خط لوحة التحكم) — فيعمل وزن العناوين من «استوديو التصميم» بلا ملفات إضافية */
@font-face{font-family:"Cairo";src:url(../fonts/cairo-arabic.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0660-0669}
@font-face{font-family:"Cairo";src:url(../fonts/cairo-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Plex Mono";src:url(../fonts/plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- 2. TOKENS --------------------------------------------------- */
:root{
  /* type families */
  --f-text:"Cairo",system-ui,sans-serif;
  /* Plex Mono للأرقام والعلامات اللاتينية؛ العربي داخلها يقع على Cairo */
  --f-mono:"Plex Mono","Cairo",ui-monospace,monospace;

  /* brand — taken from the logo artwork */
  --brand-navy:#003C71;
  --brand-amber:#FA6401;

  /* accent family (the ONE hue family) */
  --a-9:#FFD9B4; --a-7:#FFB877; --a-5:#FF8A2B;
  --a-4:#FA6401; --a-3:#D45200; --a-2:#8A3600; --a-1:#3A1802;

  /* dark theme (default) */
  --bg:#05090F;
  --bg-2:#080D15;
  --bg-3:#0C131C;
  --bg-4:#111A24;
  --fg:#EEF2F6;
  --fg-2:#A9B8C6;
  --fg-3:#6E8093;
  --line:rgba(150,175,199,.14);
  --line-2:rgba(150,175,199,.28);
  --line-3:rgba(150,175,199,.06);
  --accent:var(--a-4);
  --accent-soft:var(--a-5);
  --on-accent:#0A0603;
  --steel:#1B3350;
  --scrim:rgba(5,9,15,.72);
  --grade-1:rgba(5,9,15,0);
  --grade-2:rgba(5,9,15,.55);
  --grade-3:rgba(5,9,15,.94);
  --sel:rgba(250,100,1,.26);

  /* fluid scale — floor 640, ceiling 1600 */
  --fs-display:clamp(2.5rem,1.45rem + 4.2vw,6.25rem);
  --fs-h1:clamp(2.25rem,1.25rem + 4vw,4.75rem);
  --fs-h2:calc(clamp(1.875rem,1.1rem + 3.1vw,3.75rem) * var(--h2-scale,1));
  --fs-h3:clamp(1.5rem,1.05rem + 1.8vw,2.5rem);
  --fs-h4:clamp(1.185rem,1rem + .75vw,1.625rem);
  --fs-lead:clamp(1.0625rem,.98rem + .42vw,1.375rem);
  --fs-body:calc(clamp(1rem,.96rem + .2vw,1.125rem) * var(--body-scale,1));
  --fs-small:clamp(.875rem,.85rem + .12vw,.9375rem);
  --fs-label:clamp(.6875rem,.665rem + .1vw,.75rem);
  --fs-micro:.6875rem;

  /* spacing — 4px base */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;
  --s-9:6rem;    --s-10:8rem;   --s-11:10rem;  --s-12:14rem;

  /* layout */
  --gutter:20px;
  --maxw:1680px;
  --col-gap:24px;

  /* أحجام الهوية المعتمدة: الشعار والاسم والقائمة وعنوان الواجهة */
  --logo-w:100px;
  --brand-name-scale:3.0;
  --nav-scale:1.32;
  --nav-gap-scale:1.0;
  --hero-title-scale:.77;
  --hero-sub-scale:.9;

  /* radius — 3-step ladder, deliberately tight (engineering, not soft SaaS) */
  --r-media:16px;
  --r-panel:14px;
  --r-pill:999px;

  /* motion */
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-cine:cubic-bezier(.25,.74,.22,.99);
  --e-inout:cubic-bezier(.55,0,.1,1);
  --e-out:cubic-bezier(0,0,.2,1);
  --d-micro:.2s; --d-fast:.3s; --d-base:.6s; --d-slow:1.1s; --d-cine:1.6s;

  /* z */
  --z-rail:20; --z-menu:90; --z-hdr:95; --z-entry:120;
}

[data-theme=light]{
  --bg:#EDEAE4;      /* warm concrete, never pure white */
  --bg-2:#E5E1DA;
  --bg-3:#DCD7CE;
  --bg-4:#D2CCC1;
  --fg:#0B1116;
  --fg-2:#3D4952;
  --fg-3:#6C7883;
  --line:rgba(11,17,22,.14);
  --line-2:rgba(11,17,22,.26);
  --line-3:rgba(11,17,22,.06);
  --accent:var(--a-3);
  --accent-soft:var(--a-4);
  --on-accent:#FFF6EE;
  --steel:#C7CEd6;
  --scrim:rgba(237,234,228,.76);
  --grade-1:rgba(237,234,228,0);
  --grade-2:rgba(237,234,228,.5);
  --grade-3:rgba(237,234,228,.94);
  --sel:rgba(212,82,0,.2);
}

/* Photographic full-bleed sections are ALWAYS night-graded, in both themes.
   The archive and concept photography is night/dusk work; a light scrim over
   it would destroy the image. The light theme flips the editorial sections,
   not the cinema. */
.on-dark,.hero,.band,.close,.phead--media,.menu{
  color-scheme:dark;
  --bg:#05090F; --bg-2:#080D15; --bg-3:#0C131C; --bg-4:#111A24;
  --fg:#EEF2F6; --fg-2:#B4C2CF; --fg-3:#8497A9;
  --line:rgba(190,210,228,.18); --line-2:rgba(190,210,228,.34); --line-3:rgba(190,210,228,.09);
  --accent:#FF7A18; --accent-soft:#FF9A4D; --on-accent:#0A0603;
  --scrim:rgba(5,9,15,.72);
  --grade-1:rgba(5,9,15,0); --grade-2:rgba(5,9,15,.58); --grade-3:rgba(5,9,15,.95);
  color:var(--fg);
}

@media (min-width:768px){:root{--gutter:40px}}
@media (min-width:1280px){:root{--gutter:56px}}
@media (min-width:1600px){:root{--gutter:72px}}

/* ---------- 3. RESET / BASE -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  font-family:var(--f-text);
  font-size:var(--fs-body);
  line-height:1.65;
  font-weight:400;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  transition:background-color .5s var(--e-soft),color .5s var(--e-soft);
}
::selection{background:var(--sel);color:var(--fg)}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* Latin numerals + Latin face inside Arabic text where tagged */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- 4. TYPOGRAPHY ---------------------------------------------- */
.display,h1,h2,h3,h4{
  font-weight:var(--h-weight,600);
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}
/* Arabic must never receive negative tracking — it breaks the joins. */
:root[lang=ar] .display,:root[lang=ar] h1,:root[lang=ar] h2,
:root[lang=ar] h3,:root[lang=ar] h4{letter-spacing:0;line-height:1.24}
:root[lang=ar]{--fs-display:clamp(2.125rem,1.3rem + 3.5vw,5.25rem)}

.display{font-size:var(--fs-display)}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3)}
h4,.h4{font-size:var(--fs-h4)}

.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--fg-2);max-width:46ch;font-weight:400}
:root[lang=ar] .lead{line-height:1.8}
.body{font-size:var(--fs-body);color:var(--fg-2);max-width:60ch}
:root[lang=ar] .body{line-height:1.9}
.small{font-size:var(--fs-small);color:var(--fg-2)}
.muted{color:var(--fg-3)}

.label{
  font-family:var(--f-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-3);
  display:inline-flex;align-items:center;gap:.6em;
}
:root[lang=ar] .label{letter-spacing:.04em;font-family:var(--f-text);font-weight:500}
.label--accent{color:var(--accent)}
.label::before{
  content:"";inline-size:22px;block-size:1px;background:currentColor;opacity:.5;flex:none;
}
.label--bare::before{display:none}

/* ---------- 5. LAYOUT --------------------------------------------------- */
.wrap{
  inline-size:100%;max-inline-size:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.section{position:relative;padding-block:calc(var(--s-9) * var(--space-scale,1))}
@media (min-width:1024px){.section{padding-block:calc(var(--s-11) * var(--space-scale,1))}}
.section--tight{padding-block:calc(var(--s-8) * var(--space-scale,1))}
@media (min-width:1024px){.section--tight{padding-block:calc(var(--s-9) * var(--space-scale,1))}}
.section--flush-top{padding-block-start:0}
.stage{min-block-size:100svh;display:flex;flex-direction:column;justify-content:center;position:relative}

/* ---------- 6. SIGNATURE: THE DATUM SYSTEM ------------------------------
   The brand's own language: a survey datum, an axis, a locked reference.
   Used as the single decorative system across the whole site.            */
.rule{position:relative;block-size:1px;background:var(--line);inline-size:100%}
.rule--draw{transform:scaleX(0);transform-origin:inline-start;}
:root[dir=rtl] .rule--draw{transform-origin:right}
:root[dir=ltr] .rule--draw{transform-origin:left}

.datum{
  position:relative;display:flex;align-items:center;gap:var(--s-4);
  padding-block:var(--s-4);
}
.datum__mark{
  inline-size:13px;block-size:13px;flex:none;position:relative;
}
.datum__mark::before,.datum__mark::after{
  content:"";position:absolute;background:var(--accent);
}
.datum__mark::before{inset-block:0;inset-inline-start:6px;inline-size:1px}
.datum__mark::after{inset-inline:0;inset-block-start:6px;block-size:1px}
.datum__ring{
  position:absolute;inset:-6px;border:1px solid var(--accent);border-radius:50%;opacity:.42;
}
.datum__line{flex:1;block-size:1px;background:var(--line)}
.datum__txt{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
/* «02 / 04» داخل فقرة عربية ينقلب إلى «04 / 02» — نعزله باتجاه ثابت */
.datum__txt.mono{direction:ltr;unicode-bidi:isolate}
:root[lang=ar] .datum__txt{font-family:var(--f-text);letter-spacing:.02em}

/* faint measured grid used behind key sections */
.gridfield{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
}
.gridfield::before{
  content:"";position:absolute;inset:-1px;
  background-image:linear-gradient(to right,var(--line-3) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line-3) 1px,transparent 1px);
  background-size:clamp(56px,7vw,104px) clamp(56px,7vw,104px);
}

/* ---------- 7. BUTTONS -------------------------------------------------- */
.btn{
  --pad-i:1.5rem;
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  min-block-size:3rem;padding-inline:var(--pad-i);padding-block:.55rem;
  font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--fg);overflow:hidden;isolation:isolate;
  transition:color var(--d-fast) var(--e-soft),border-color var(--d-fast) var(--e-soft);
  white-space:nowrap;
}
:root[lang=ar] .btn{font-family:var(--f-text);letter-spacing:0;text-transform:none;font-size:var(--fs-small);font-weight:500}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--e-soft);
}
.btn__i{font-family:var(--f-mono);opacity:.55;transition:transform var(--d-fast) var(--e-soft),opacity var(--d-fast) var(--e-soft)}
:root[dir=rtl] .btn__i{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--bg);border-color:var(--fg)}
  .btn:hover::before{transform:scaleY(1);transform-origin:top}
  .btn:hover .btn__i{opacity:1;transform:translateX(3px)}
  :root[dir=rtl] .btn:hover .btn__i{transform:scaleX(-1) translateX(3px)}
}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--primary::before{background:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{color:var(--bg);border-color:var(--fg)}
}
.btn--ghost{border-color:var(--line)}
.btn--sm{min-block-size:2.5rem;--pad-i:1.1rem}

/* text link with drawn underline */
.lnk{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  color:var(--fg);padding-block-end:2px;
}
.lnk::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;
  background:currentColor;transform:scaleX(0);transform-origin:inline-end;
  transition:transform .45s var(--e-soft);
}
:root[dir=rtl] .lnk::after{transform-origin:left}
:root[dir=ltr] .lnk::after{transform-origin:right}
@media (hover:hover){
  .lnk:hover{color:var(--accent)}
  .lnk:hover::after{transform:scaleX(1);transform-origin:inline-start}
  :root[dir=rtl] .lnk:hover::after{transform-origin:right}
  :root[dir=ltr] .lnk:hover::after{transform-origin:left}
}
.lnk b{font-weight:400;font-size:.85em;opacity:.6}
:root[dir=rtl] .lnk b{transform:scaleX(-1);display:inline-block}

/* ---------- 8. HEADER --------------------------------------------------- */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-hdr);
  padding-block:var(--s-4);
  transition:transform .55s var(--e-soft),background-color .4s var(--e-soft),border-color .4s var(--e-soft);
  border-block-end:1px solid transparent;
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bg);opacity:0;transition:opacity .4s var(--e-soft);
}
/* While the header floats over a night-graded hero it borrows the dark scope;
   once it gains its solid background it returns to the document theme. */
/* with the overlay menu open the header sits above it, so the burger stays
   available as the close control and always reads on the dark sheet */
body.menu-open .hdr,body.menu-open .hdr.is-solid{
  color-scheme:dark;
  --fg:#EEF2F6; --fg-2:#C3CFDA; --fg-3:#93A5B6;
  --line:rgba(190,210,228,.24); --line-2:rgba(190,210,228,.4);
  --accent:#FF7A18; --on-accent:#0A0603; --bg:#05090F;
  color:var(--fg);border-block-end-color:transparent;
}
body.menu-open .hdr::before{opacity:0}
body.menu-open .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;transform:none!important}
body.menu-open .brand__mark .mark-light{display:none}
body.menu-open .brand__mark .mark-dark{display:block}
body.menu-open .hdr__cta,body.menu-open .hdr__tools .switch{opacity:0;pointer-events:none;transition:opacity .3s var(--e-soft)}
@media (min-width:1100px){body.menu-open .hdr .nav{opacity:0;pointer-events:none;transition:opacity .3s var(--e-soft)}}

body.has-media-head .hdr:not(.is-solid){
  color-scheme:dark;
  --fg:#EEF2F6; --fg-2:#C3CFDA; --fg-3:#93A5B6;
  --line:rgba(190,210,228,.24); --line-2:rgba(190,210,228,.4);
  --accent:#FF7A18; --on-accent:#0A0603; --bg:#05090F;
  color:var(--fg);
  text-shadow:0 1px 24px rgba(5,9,15,.5);
}
body.has-media-head .hdr:not(.is-solid) .brand__mark .mark-light{display:none}
body.has-media-head .hdr:not(.is-solid) .brand__mark .mark-dark{display:block}
.hdr.is-solid::before{opacity:.92}
.hdr.is-solid{border-block-end-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr.is-up{transform:translateY(-105%)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}

.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{inline-size:38px;block-size:29px;flex:none;position:relative}
.brand__mark img{inline-size:100%;block-size:100%;object-fit:contain;display:block}
.brand__mark .mark-light{display:none}
[data-theme=light] .brand__mark .mark-dark{display:none}
[data-theme=light] .brand__mark .mark-light{display:block}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-size:calc(30px * var(--brand-name-scale,1));font-weight:600;letter-spacing:0}
.brand__sub{font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.22em;color:var(--fg-3);margin-block-start:2px}
.hdr .brand__sub{display:none}
@media (max-width:420px){.brand__txt{display:none}}
/* شعار الشريط العلوي فقط — شعار التذييل له حجمه الثابت */
.hdr .brand__mark{inline-size:var(--logo-w,38px);block-size:auto;aspect-ratio:38/29}

.nav{display:none;align-items:center;gap:calc(clamp(1rem,2vw,2rem) * var(--nav-gap-scale,1))}
@media (min-width:1100px){.nav{display:flex}}
.nav a{
  position:relative;font-size:calc(var(--fs-small) * var(--nav-scale,1));color:var(--fg-2);
  padding-block:.4rem;transition:color var(--d-fast) var(--e-soft);
}
.nav a::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:inline-end;transition:transform .4s var(--e-soft);
}
@media (hover:hover){.nav a:hover{color:var(--fg)}.nav a:hover::after{transform:scaleX(1);transform-origin:inline-start}}
.nav a[aria-current=page]{color:var(--fg)}
.nav a[aria-current=page]::after{transform:scaleX(1);background:var(--accent)}
/* اسم طويل لا يكسر الشريط */
.nav a{max-inline-size:14em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* «المزيد»: روابط القائمة بعد الخامس — نفس الترتيب في قائمة الجوال */
.nav__more{position:relative}
.nav__more-btn{display:inline-flex;align-items:center;gap:.45rem;padding-block:.4rem;border:0;background:none;color:var(--fg-2);font:inherit;font-size:calc(var(--fs-small) * var(--nav-scale,1));cursor:pointer;transition:color .15s var(--e-out)}
.nav__more-btn i{inline-size:.42em;block-size:.42em;border-inline-end:1px solid currentColor;border-block-end:1px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .2s var(--e-soft)}
.nav__more-btn[aria-expanded=true]{color:var(--fg)}
.nav__more-btn[aria-expanded=true] i{transform:translateY(15%) rotate(-135deg)}
@media (hover:hover){.nav__more-btn:hover{color:var(--fg)}}
.nav__drop{position:absolute;inset-block-start:calc(100% + .75rem);inset-inline-end:0;display:grid;min-inline-size:13rem;padding:var(--s-2);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-panel);box-shadow:0 18px 40px rgba(0,0,0,.32);text-shadow:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s var(--e-out),transform .2s var(--e-soft),visibility 0s linear .2s}
.nav__more.is-open .nav__drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav__drop a{max-inline-size:none;padding:.6rem .8rem;border-radius:4px}
.nav__drop a::after{display:none}
@media (hover:hover){.nav__drop a:hover{background:var(--bg-3)}}

.hdr__tools{display:flex;align-items:center;gap:var(--s-3)}
.switch{display:flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.switch__btn{
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.1em;
  padding:.42rem .62rem;color:var(--fg-3);
  transition:color var(--d-micro) var(--e-soft),background-color var(--d-micro) var(--e-soft);
  min-inline-size:2.1rem;
}
/* coarse pointers get real 44px targets */
@media (pointer:coarse){
  .switch__btn{min-block-size:2.75rem;padding-inline:.8rem;display:flex;align-items:center;justify-content:center}
}
.switch__btn[aria-pressed=true]{background:var(--fg);color:var(--bg)}
@media (hover:hover){.switch__btn:hover{color:var(--fg)}.switch__btn[aria-pressed=true]:hover{color:var(--bg)}}
.hdr__cta{display:none}
@media (min-width:1100px){.hdr__cta{display:inline-flex}}

.burger{
  inline-size:2.75rem;block-size:2.75rem;border:1px solid var(--line);border-radius:var(--r-pill);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color var(--d-fast) var(--e-soft);
}
@media (min-width:1100px){.burger{display:none}}
.burger i{
  display:block;inline-size:15px;block-size:1px;background:var(--fg);
  transition:transform .45s var(--e-soft),opacity .3s var(--e-soft);
}
.burger[aria-expanded=true] i:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- 9. MOBILE / OVERLAY MENU ------------------------------------ */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--bg);
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .75s var(--e-soft),visibility 0s .75s;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .75s var(--e-soft),visibility 0s}
.menu__in{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding-block:calc(var(--s-9) + 1rem) var(--s-6);gap:var(--s-7);
}
.menu__list{display:flex;flex-direction:column}
.menu__a{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-block:clamp(.55rem,1.5vw,1rem);
  border-block-end:1px solid var(--line-3);
  opacity:0;transform:translateY(14px);
}
.menu.is-open .menu__a{opacity:1;transform:none;transition:opacity .6s var(--e-soft) var(--dl,0s),transform .6s var(--e-soft) var(--dl,0s)}
.menu__n{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3);flex:none;inline-size:2rem}
.menu__t{font-size:clamp(1.75rem,7vw,3rem);font-weight:var(--h-weight,600);line-height:1.15;transition:color var(--d-fast) var(--e-soft)}
:root[lang=ar] .menu__t{line-height:1.35}
.menu__a i{margin-inline-start:auto;font-style:normal;color:var(--fg-3);font-family:var(--f-mono);transition:transform var(--d-fast) var(--e-soft),color var(--d-fast) var(--e-soft)}
:root[dir=rtl] .menu__a i{transform:scaleX(-1)}
@media (hover:hover){
  .menu__list:hover .menu__a{opacity:.4}
  .menu__list .menu__a:hover{opacity:1}
  .menu__a:hover .menu__t{color:var(--accent)}
  .menu__a:hover i{color:var(--accent);transform:translateX(4px)}
  :root[dir=rtl] .menu__a:hover i{transform:scaleX(-1) translateX(4px)}
}
.menu__foot{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;align-items:flex-end;
  padding-block-start:var(--s-5);border-block-start:1px solid var(--line)}
.menu__ctc{display:flex;flex-direction:column;gap:.35rem;font-size:var(--fs-small)}

/* ---------- 10. SCROLL RAIL --------------------------------------------- */
.rail{position:fixed;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:2px;z-index:calc(var(--z-hdr) + 1);pointer-events:none}
.rail__fill{block-size:100%;inline-size:100%;background:var(--accent);transform:scaleX(0);transform-origin:inline-start}
:root[dir=rtl] .rail__fill{transform-origin:right}
:root[dir=ltr] .rail__fill{transform-origin:left}

.skip{
  position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:200;
  padding:.6rem 1rem;background:var(--accent);color:var(--on-accent);border-radius:var(--r-panel);
  transform:translateY(-200%);transition:transform .3s var(--e-soft);font-size:var(--fs-small);
}
.skip:focus{transform:none}

/* ---------- 11. HERO ---------------------------------------------------- */
.hero{
  position:relative;min-block-size:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block-start:calc(var(--s-9) + 3rem);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.08);will-change:transform}
.hero__grade{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,var(--grade-3) 0%,var(--grade-2) 34%,transparent 66%),
    linear-gradient(to var(--to-side,left),var(--grade-3) 0%,transparent 58%),
    radial-gradient(120% 80% at 70% 12%,rgba(250,100,1,.10),transparent 60%);
}
:root[dir=rtl]{--to-side:left}
:root[dir=ltr]{--to-side:right}

/* survey overlay — the datum drawing itself over the frame */
.hero__survey{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--accent)}
.hero__survey svg{inline-size:100%;block-size:100%}
.hero__survey .sv-grid path{stroke:currentColor;stroke-width:.5;opacity:.10}
.hero__survey .sv-axis path{stroke:currentColor;stroke-width:1;opacity:.5;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.hero__survey .sv-ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.55}
.hero__survey .sv-dot{fill:currentColor}
.hero__survey .sv-pt{fill:currentColor;opacity:.5}

.hero__in{position:relative;padding-block-end:var(--s-7);z-index:1;margin-block-start:auto}
.hero__eyebrow{margin-block-end:var(--s-5)}

/* Hero entrance is CSS-driven, not tween-driven: if the JS animation loop
   never ticks (background tab, throttled rAF) the content still resolves,
   and with no JS at all the .no-js rules show everything immediately. */
.js .hero__eyebrow,.js .hero__sub,.js .hero__acts,.js .sheet__cell,.js .hero__scroll{
  opacity:0;transform:translateY(20px);
}
.is-ready .hero__eyebrow,.is-ready .hero__sub,.is-ready .hero__acts,
.is-ready .sheet__cell,.is-ready .hero__scroll{
  opacity:1;transform:none;
  transition:opacity .9s var(--e-soft) var(--dl,0s),transform .9s var(--e-soft) var(--dl,0s);
}
.is-ready .hero__eyebrow{--dl:.45s}
.is-ready .hero__sub{--dl:.72s}
.is-ready .hero__acts{--dl:.85s}
.is-ready .hero__scroll{--dl:1.15s}
.is-ready .sheet__cell{--dl:.95s}
.is-ready .sheet__cell:nth-child(2){--dl:1.01s}
.is-ready .sheet__cell:nth-child(3){--dl:1.07s}
.is-ready .sheet__cell:nth-child(4){--dl:1.13s}
.is-ready .sheet__cell:nth-child(5){--dl:1.19s}

/* survey overlay draws itself with a CSS animation for the same reason */
.is-ready .hero__survey .sv-axis path{animation:svDraw 1.9s var(--e-cine) .5s forwards}
@keyframes svDraw{to{stroke-dashoffset:0}}
.js .hero__survey .sv-ring,.js .hero__survey .sv-dot,.js .hero__survey .sv-pt circle{opacity:0}
.is-ready .hero__survey .sv-ring,.is-ready .hero__survey .sv-dot{
  animation:svPop .9s var(--e-soft) 1.15s forwards;transform-box:fill-box;transform-origin:50% 50%}
.is-ready .hero__survey .sv-pt circle{animation:svFade .8s var(--e-soft) 1.35s forwards}
@keyframes svPop{from{opacity:0;transform:scale(.3)}to{opacity:.55;transform:scale(1)}}
@keyframes svFade{to{opacity:.5}}
.hero__title{max-inline-size:19ch;font-size:calc(var(--fs-display) * var(--hero-title-scale,1))}
:root[lang=en] .hero__title{max-inline-size:15ch}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln>span{display:block;transform:translateY(105%)}
.is-ready .hero__title .ln>span{transform:none;transition:transform 1.25s var(--e-cine) var(--dl,0s)}
.hero__sub{margin-block-start:var(--s-5);max-inline-size:52ch;font-size:calc(var(--fs-lead) * var(--hero-sub-scale,1))}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-6)}

/* the measured strip along the base of the hero */
.sheet{
  position:relative;z-index:1;border-block-start:1px solid var(--line-2);
  background:linear-gradient(to top,var(--grade-3),transparent);
}
.sheet__in{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(9.5rem,1fr);
  overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;
  border-inline-start:1px solid var(--line-3);
}
.sheet__in::-webkit-scrollbar{display:none}
.sheet__cell{scroll-snap-align:start}
@media (min-width:900px){.sheet__in{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}
@media (min-width:1200px){.sheet__in{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sheet__cell{
  display:flex;flex-direction:column;gap:.3rem;min-inline-size:0;
  padding:var(--s-4) var(--s-4);
  border-inline-end:1px solid var(--line-3);border-block-start:1px solid var(--line-3);
  min-block-size:4.75rem;justify-content:center;
}
.sheet__cell b{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);font-weight:400;line-height:1.3;overflow-wrap:anywhere}
:root[lang=ar] .sheet__cell b{font-family:var(--f-text);letter-spacing:0;font-size:var(--fs-micro)}
.sheet__cell i{font-style:normal;font-size:var(--fs-small);font-weight:500;color:var(--fg);
  line-height:1.35;overflow-wrap:anywhere}
.sheet__cell .mono{font-size:.8125rem}

.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap}
.hero__scroll{
  display:none;align-items:center;gap:.75rem;flex:none;
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);transition:color var(--d-fast) var(--e-soft);padding-block-end:.35rem;
}
@media (hover:hover){.hero__scroll:hover{color:var(--accent)}}
@media (min-width:1024px){.hero__scroll{display:flex}}
:root[lang=ar] .hero__scroll{font-family:var(--f-text);letter-spacing:0;font-size:var(--fs-small)}
.hero__scroll span.bar{inline-size:1px;block-size:44px;background:var(--line-2);position:relative;overflow:hidden}
.hero__scroll span.bar::after{content:"";position:absolute;inset-inline:0;block-size:40%;background:var(--accent);animation:railDrop 2.4s var(--e-inout) infinite}
@keyframes railDrop{0%{transform:translateY(-110%)}55%{transform:translateY(160%)}100%{transform:translateY(160%)}}

/* ---------- 12. SECTION HEADER ------------------------------------------ */
.shead{display:grid;gap:var(--s-5);margin-block-end:var(--s-7)}
@media (min-width:900px){
  .shead{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:end}
  .shead__l{grid-column:span 7}
  .shead__r{grid-column:9/13;padding-block-end:.4rem}
}
.shead h2{margin-block-start:var(--s-4);max-inline-size:18ch}
.shead__r p{color:var(--fg-2);font-size:var(--fs-small);max-inline-size:44ch}

/* ---------- 13. STATEMENT ----------------------------------------------- */
.stmt{position:relative;overflow:hidden}
.stmt__grid{display:grid;gap:var(--s-6)}
@media (min-width:900px){
  .stmt__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
  .stmt__q{grid-column:1/8}
  .stmt__b{grid-column:9/13;align-self:end}
}
.stmt__q{font-size:var(--fs-h2);font-weight:var(--h-weight,600);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
:root[lang=ar] .stmt__q{letter-spacing:0;line-height:1.32}
.stmt__q em{font-style:normal;color:var(--accent)}
.stmt__b{color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}

/* ---------- 14. CAPABILITIES LIST --------------------------------------- */
.caps{border-block-start:1px solid var(--line)}
.cap{
  position:relative;display:grid;gap:var(--s-2);
  grid-template-columns:auto 1fr;
  padding-block:var(--s-5);border-block-end:1px solid var(--line);
  transition:background-color .5s var(--e-soft);
}
@media (min-width:900px){
  .cap{grid-template-columns:5rem minmax(0,7fr) minmax(0,6fr);gap:var(--col-gap);align-items:start;padding-block:var(--s-6)}
}
.cap::before{
  content:"";position:absolute;inset-block-end:-1px;inset-inline-start:0;block-size:1px;inline-size:0;
  background:var(--accent);transition:inline-size .7s var(--e-soft);
}
@media (hover:hover){.cap:hover::before{inline-size:100%}}
.cap__n{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--fg-3);padding-block-start:.45rem;letter-spacing:.1em}
.cap__t{font-size:var(--fs-h4);font-weight:var(--h-weight,600);line-height:1.25;letter-spacing:-.015em;transition:color var(--d-fast) var(--e-soft)}
:root[lang=ar] .cap__t{letter-spacing:0;line-height:1.5}
@media (hover:hover){.cap:hover .cap__t{color:var(--accent)}}
.cap__d{color:var(--fg-2);font-size:var(--fs-small);line-height:1.75;grid-column:2/-1}
@media (min-width:900px){.cap__d{grid-column:3}}

/* ---------- 15. FULL-BLEED CINEMATIC BAND ------------------------------- */
.band{position:relative;min-block-size:88svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.band--tall{min-block-size:100svh}
.band__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band__media img,.band__media video{inline-size:100%;block-size:100%;object-fit:cover}
.band__media img{transform:scale(1.12);will-change:transform}
.band__grade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--grade-3) 4%,var(--grade-2) 42%,rgba(5,9,15,.25) 100%)}
.band__in{padding-block:var(--s-9);inline-size:100%}
.band__q{font-size:var(--fs-h2);font-weight:var(--h-weight,600);line-height:1.12;letter-spacing:-.02em;max-inline-size:20ch;text-wrap:balance}
:root[lang=ar] .band__q{letter-spacing:0;line-height:1.34;max-inline-size:22ch}
.band__p{margin-block-start:var(--s-5);max-inline-size:52ch;color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}
.band .label{color:var(--a-7)}

/* ---------- 16. PROCESS PATH -------------------------------------------- */
.path{position:relative;display:grid;gap:0;border-block-start:1px solid var(--line)}
@media (min-width:768px){.path{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.path{grid-template-columns:repeat(6,minmax(0,1fr))}}
.step{
  position:relative;padding:var(--s-5) var(--s-4) var(--s-6);
  border-block-end:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s-3);
}
@media (min-width:768px){.step{border-inline-end:1px solid var(--line);padding-inline:var(--s-4)}}
.step:last-child{border-inline-end:0}
.step__n{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;color:var(--fg-3)}
:root[lang=ar] .step__n{font-family:var(--f-text);letter-spacing:0}
.step__t{font-size:var(--fs-h4);font-weight:var(--h-weight,600);letter-spacing:-.01em}
:root[lang=ar] .step__t{letter-spacing:0}
.step__bar{block-size:2px;background:var(--line-2);position:relative;margin-block-start:auto}
.step__bar i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:0;background:var(--accent);display:block;transition:inline-size .8s var(--e-soft)}
.step.is-on .step__bar i{inline-size:100%}
.step.is-on .step__n{color:var(--accent)}

/* ---------- 17. PROJECT ROWS ---------------------------------------------
   العرض المعتمد: صورة كبيرة ونص بالتناوب (الرئيسية، المشروع المختار في صفحة
   المشاريع، وصفحة القطاعات). اللمسات: زوايا منحنية، كشف الصورة من جهة النص،
   انزياح الصورة داخل إطارها، رقم كبير مفرّغ خلف النص، لمعة تعبر الصورة
   وأركان برتقالية تتمدّد عند المرور. الكشف لا يعمل إلا مع JavaScript
   (.projs.is-armed من motion.js) فلا يبقى شيء مخفيًا. */
.projs{display:grid;gap:var(--s-9)}
.proj{position:relative;display:grid;gap:var(--s-5);align-items:center}
@media (min-width:900px){
  .proj{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
  .proj__media{grid-column:1/8}
  .proj__body{grid-column:9/13}
  .proj--flip .proj__media{grid-column:6/13;order:2}
  .proj--flip .proj__body{grid-column:1/5;order:1}
}
.proj__media{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:var(--r-media);background:var(--bg-3);aspect-ratio:16/11}
.proj__media > img{position:absolute;inset-inline:0;inset-block-start:-5%;inline-size:100%;block-size:110%;object-fit:cover;scale:1.02;
  transition:scale 1.2s var(--e-cine),filter .6s var(--e-out)}
.proj__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 48%,rgba(255,255,255,.04) 56%,transparent 70%);transform:translateX(-130%)}
.proj__blank,.pcard__media .proj__blank{position:absolute;inset:0;display:grid;place-items:center;
  background-image:linear-gradient(var(--line-3) 1px,transparent 1px),linear-gradient(90deg,var(--line-3) 1px,transparent 1px);background-size:28px 28px}
.proj__blank img{inline-size:52px;block-size:auto;opacity:.3}
[data-theme=light] .proj__blank img{filter:invert(1)}
.proj__idx{
  position:absolute;z-index:2;inset-block-start:var(--s-4);inset-inline-start:var(--s-4);
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;
  padding:.35rem .7rem;border-radius:999px;background:var(--scrim);border:1px solid var(--line-2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--fg);
  transition:transform .4s var(--e-soft),background-color .3s var(--e-out)}
.proj__corner{position:absolute;z-index:2;inline-size:18px;block-size:18px;border:1.5px solid var(--a-7);opacity:.8;
  transition:inline-size .45s var(--e-soft),block-size .45s var(--e-soft),opacity .3s var(--e-out)}
.proj__corner--a{inset-block-start:12px;inset-inline-end:12px;border-block-end:0;border-inline-start:0;border-start-end-radius:9px}
.proj__corner--b{inset-block-end:12px;inset-inline-start:12px;border-block-start:0;border-inline-end:0;border-end-start-radius:9px}
@media (hover:hover){
  a.proj__media:hover > img,a.proj__media:focus-visible > img{scale:1.07}
  a.proj__media:hover::after,a.proj__media:focus-visible::after{transform:translateX(130%);transition:transform 1.1s var(--e-soft)}
  :root[dir=rtl] a.proj__media::after{transform:translateX(130%)}
  :root[dir=rtl] a.proj__media:hover::after,:root[dir=rtl] a.proj__media:focus-visible::after{transform:translateX(-130%)}
  a.proj__media:hover .proj__corner,a.proj__media:focus-visible .proj__corner{inline-size:40px;block-size:40px;opacity:1}
  a.proj__media:hover .proj__idx{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .proj:hover .proj__t{color:var(--fg)}
}
.proj__body{position:relative;isolation:isolate}
.proj__num{position:absolute;z-index:-1;inset-block-start:-.42em;inset-inline-end:-.04em;font-size:clamp(6.5rem,3.5rem + 9vw,13rem);font-weight:500;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);pointer-events:none;user-select:none;opacity:.8}
.proj__t{font-size:var(--fs-h3);font-weight:var(--h-weight,600);margin-block:var(--s-3) var(--s-4);letter-spacing:-.015em}
:root[lang=ar] .proj__t{letter-spacing:0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5);margin-block-end:var(--s-5)}
.fact{position:relative;display:flex;flex-direction:column;gap:.2rem;padding-block-start:.6rem}
.fact::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;background:var(--line);transform-origin:left}
:root[dir=rtl] .fact::before{transform-origin:right}
.fact::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1.25rem;block-size:1px;background:var(--accent)}
.fact dt{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
:root[lang=ar] .fact dt{font-family:var(--f-text);letter-spacing:0;text-transform:none}
.fact dd{font-size:var(--fs-small);font-weight:500}
.src{font-size:var(--fs-micro);color:var(--fg-3);line-height:1.6;margin-block-end:var(--s-5);max-inline-size:40ch}

/* الكشف عند النزول: الإطار ينفتح من جهة النص والصورة تهدأ من تكبير، ثم النص سطرًا سطرًا */
:root[dir=ltr] .projs.is-armed .proj:not(.is-in) .proj__media,
:root[dir=rtl] .projs.is-armed .proj--flip:not(.is-in) .proj__media{clip-path:inset(0 0 0 100% round var(--r-media))}
:root[dir=rtl] .projs.is-armed .proj:not(.proj--flip):not(.is-in) .proj__media,
:root[dir=ltr] .projs.is-armed .proj--flip:not(.is-in) .proj__media{clip-path:inset(0 100% 0 0 round var(--r-media))}
.projs.is-armed .proj:not(.is-in) .proj__media > img{scale:1.24}
.projs.is-armed .proj:not(.is-in) .proj__body > :not(.proj__num){opacity:0;transform:translateY(20px)}
.projs.is-armed .proj:not(.is-in) .proj__num{opacity:0;transform:translateY(40px)}
.projs.is-armed .proj:not(.is-in) .fact::before{transform:scaleX(0)}
.projs.is-armed .proj.is-in .proj__media{clip-path:inset(0 0 0 0 round var(--r-media));transition:clip-path 1.35s var(--e-cine)}
.projs.is-armed .proj.is-in .proj__media > img{transition:scale 1.9s var(--e-cine),filter .6s var(--e-out)}
.projs.is-armed .proj.is-in .proj__body > *{transition:opacity .9s var(--e-soft),transform 1s var(--e-soft)}
.projs.is-armed .proj.is-in .proj__body > :nth-child(2){transition-delay:.3s}
.projs.is-armed .proj.is-in .proj__body > :nth-child(3){transition-delay:.4s}
.projs.is-armed .proj.is-in .proj__body > :nth-child(4){transition-delay:.5s}
.projs.is-armed .proj.is-in .proj__body > :nth-child(5){transition-delay:.6s}
.projs.is-armed .proj.is-in .proj__body > :nth-child(n+6){transition-delay:.7s}
.projs.is-armed .proj.is-in .proj__num{transition:opacity 1.4s var(--e-soft) .2s,transform 1.6s var(--e-cine) .2s}
.projs.is-armed .proj.is-in .fact::before{transition:transform 1s var(--e-cine) calc(.55s + var(--i,0) * .09s)}

/* بطاقة «عرض المشروع» تتبع المؤشر فوق صور المشاريع (فأرة فقط) */
.vcursor{position:fixed;left:0;top:0;z-index:60;inline-size:6rem;block-size:6rem;margin:-3rem 0 0 -3rem;display:grid;place-items:center;padding:.7rem;
  border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-label);font-weight:700;line-height:1.3;text-align:center;pointer-events:none;
  scale:0;opacity:0;transition:scale .3s var(--e-soft),opacity .2s var(--e-out);will-change:transform}
.vcursor.is-on{scale:1;opacity:1}
@media (hover:hover) and (pointer:fine){.has-vcursor [data-cursor]{cursor:none}}

/* ---------- 17b. PROJECT REGISTER (projects.php) ---------------------- */
.pfeat{margin-block-end:var(--s-8)}
.pfeat__lead{max-inline-size:46ch;margin-block-end:var(--s-5);color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}
.pfilter{position:relative;display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-end:var(--s-6);padding-block-start:var(--s-6);border-block-start:1px solid var(--line)}
.pfilter__b{display:inline-flex;align-items:center;gap:.55rem;min-block-size:2.75rem;padding:.55rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:none;color:var(--fg-2);font:inherit;font-size:var(--fs-small);cursor:pointer;
  transition:color .16s var(--e-out),border-color .16s var(--e-out),background-color .2s var(--e-out),transform .2s var(--e-soft)}
.pfilter__b i{font-style:normal;font-size:var(--fs-micro);color:var(--fg-3)}
@media (hover:hover){.pfilter__b:hover{color:var(--fg);border-color:var(--fg-3)}}
.pfilter__b:active{transform:scale(.97)}
.pfilter__b.is-on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pfilter__b.is-on i{color:inherit;opacity:.6}
.pgrid{display:grid;gap:var(--s-7) var(--col-gap)}
@media (min-width:700px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{transition:opacity .35s var(--e-soft),transform .35s var(--e-soft)}
.pgrid .pcard.is-out{opacity:0;transform:scale(.97)}
.pcard__link{display:flex;flex-direction:column;gap:var(--s-2)}
.pcard__media{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:4/3;margin-block-end:var(--s-3);border-radius:var(--r-media);background:var(--bg-3)}
.pcard__media > img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.1s var(--e-cine),filter .5s var(--e-out)}
.pcard__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.13) 48%,transparent 66%);transform:translateX(-130%)}
:root[dir=rtl] .pcard__media::after{transform:translateX(130%)}
.pcard__facts{position:absolute;z-index:2;inset-inline:0;inset-block-end:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);
  padding:var(--s-8) var(--s-4) var(--s-4);background:linear-gradient(to top,rgba(5,9,15,.94) 10%,rgba(5,9,15,0));color:#EEF2F6;
  opacity:0;transition:opacity .24s var(--e-out)}
.pcard__fact{opacity:0;transform:translateY(10px);transition:opacity .25s var(--e-out) calc(var(--i,0) * 55ms + 70ms),transform .35s var(--e-soft) calc(var(--i,0) * 55ms + 70ms)}
.pcard__fact b{display:block;font-size:var(--fs-small);font-weight:600;line-height:1.4}
.pcard__fact small{display:block;margin-block-start:.15rem;font-size:var(--fs-micro);opacity:.72}
.pcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;font-size:var(--fs-label)}
.pcard__sector{color:var(--accent);letter-spacing:.04em}
.pcard__place{color:var(--fg-3)}
.pcard__sector + .pcard__place::before{content:"";display:inline-block;inline-size:3px;block-size:3px;margin-inline-end:.8rem;border-radius:50%;background:currentColor;vertical-align:middle}
.pcard__t{font-size:var(--fs-h4);font-weight:var(--h-weight,600);line-height:1.35;letter-spacing:-.01em;transition:color .15s var(--e-out)}
:root[lang=ar] .pcard__t{letter-spacing:0;line-height:1.5}
.pcard__more{display:inline-flex;align-items:center;gap:.5rem;color:var(--fg-2);font-size:var(--fs-small)}
.pcard__more .btn__i{font-weight:400}
@media (hover:hover){
  .pcard__link:hover .pcard__media > img,.pcard__link:focus-visible .pcard__media > img{transform:scale(1.06);filter:brightness(.85)}
  .pcard__link:hover .pcard__media::after,.pcard__link:focus-visible .pcard__media::after{transform:translateX(130%);transition:transform 1.1s var(--e-soft)}
  :root[dir=rtl] .pcard__link:hover .pcard__media::after,:root[dir=rtl] .pcard__link:focus-visible .pcard__media::after{transform:translateX(-130%)}
  .pcard__link:hover .pcard__facts,.pcard__link:focus-visible .pcard__facts{opacity:1}
  .pcard__link:hover .pcard__fact,.pcard__link:focus-visible .pcard__fact{opacity:1;transform:none}
  .pcard__link:hover .pcard__t{color:var(--accent)}
  .pcard__link:hover .pcard__more .btn__i{opacity:1}
  .pcard__link:hover .proj__idx{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
}
@media (hover:none){.pcard__facts,.pcard__fact{opacity:1;transform:none}}
/* بطاقات المشاريع في شريط أفقي (شكل «شريط» لقسم المشاريع) */
.pgrid--rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(82%,24rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-block-end:var(--s-4)}
@media (min-width:1200px){.pgrid--rail{grid-template-columns:none;grid-auto-columns:calc((100% - 2 * var(--col-gap)) / 3)}}
.pgrid--rail .pcard{scroll-snap-align:start}

/* ---------- 17c. PROJECT PAGE (project.php) ---------------------------- */
.kstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0 0 var(--s-8);border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)}
.kstrip__i{padding:var(--s-5) var(--s-5) var(--s-6);border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)}
.kstrip dt{margin-block-end:var(--s-2);color:var(--fg-3);font-size:var(--fs-label)}
.kstrip dd{margin:0;font-size:var(--fs-h4);font-weight:var(--h-weight,600);line-height:1.35}
.pask{position:sticky;inset-block-start:7.5rem;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg-2)}
.pask p{margin-block:var(--s-3) var(--s-5);color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}
.c-side .src{margin-block-start:var(--s-5)}

.tline{position:relative;display:grid;gap:var(--s-6);margin:0;padding:0;padding-inline-start:var(--s-7);list-style:none}
.tline::before,.tline::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:6px;inline-size:1px;background:var(--line)}
.tline::before{inset-block-end:6px}
.tline::after{block-size:calc((100% - 12px) * var(--p,1));background:var(--accent)}
.tline__s{position:relative;display:flex;flex-direction:column;gap:var(--s-2);transition:opacity .5s var(--e-soft)}
.js .tline__s{opacity:.42}
.js .tline__s.is-on{opacity:1}
.tline__dot{position:absolute;inset-block-start:1px;inset-inline-start:calc(-1 * var(--s-7));inline-size:11px;block-size:11px;border:1px solid var(--line-2);border-radius:50%;background:var(--bg);transition:background-color .4s var(--e-soft),border-color .4s var(--e-soft)}
.tline__s.is-on .tline__dot{border-color:var(--accent);background:var(--accent)}
.tline__s b{color:var(--fg-3);font-size:var(--fs-micro);font-weight:400;letter-spacing:.14em}
.tline__s span{font-size:var(--fs-h4);font-weight:var(--h-weight,600);line-height:1.45}
@media (min-width:900px){
  .tline{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--col-gap);padding:var(--s-6) 0 0}
  .tline::before,.tline::after{inset-block-start:5px;inset-inline-start:0;block-size:1px}
  .tline::before{inset-block-end:auto;inset-inline-end:0;inline-size:auto}
  .tline::after{inline-size:calc(100% * var(--p,1))}
  .tline__dot{inset-block-start:calc(-1 * var(--s-6));inset-inline-start:0}
}

.gal__open{display:block;cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(3,5,8,.95);color:#EEF2F6;opacity:0;transition:opacity .25s var(--e-soft)}
.lb.is-open{opacity:1}
.lb__bar{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--gutter)}
.lb__count{font-size:var(--fs-micro);letter-spacing:.14em;opacity:.7}
.lb__btn{inline-size:46px;block-size:46px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(5,9,15,.5);color:inherit;font:inherit;font-size:1.05rem;cursor:pointer;transition:border-color .2s,background-color .2s}
.lb__btn:hover,.lb__btn:focus-visible{border-color:#fff;background:rgba(255,255,255,.08)}
.lb__stage{position:relative;display:grid;place-items:center;min-block-size:0;padding:0 var(--gutter)}
.lb__stage img{max-inline-size:100%;max-block-size:100%;object-fit:contain;border-radius:var(--r-media);user-select:none;-webkit-user-drag:none;touch-action:pan-y}
.lb__nav{position:absolute;inset-block-start:50%;transform:translateY(-50%)}
.lb__nav--prev{inset-inline-start:var(--gutter)}
.lb__nav--next{inset-inline-end:var(--gutter)}
:root[dir=ltr] .lb__nav{transform:translateY(-50%) scaleX(-1)}
.lb__cap{min-block-size:3.5em;padding:var(--s-4) var(--gutter) var(--s-6);font-size:var(--fs-small);text-align:center;opacity:.8}

/* دراسة الحالة: هوية المشروع والبيان */
.case__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-block-end:var(--s-5);font-size:var(--fs-small);color:var(--fg-2)}
.case__tags span+span::before{content:"";display:inline-block;inline-size:4px;block-size:4px;border-radius:50%;background:var(--fg-3);margin-inline-end:1rem;vertical-align:middle}
.case__sector{color:var(--a-7)}
.case__statement{max-inline-size:32ch;margin-block-end:var(--s-8);font-size:var(--fs-h3);font-weight:500;line-height:1.4;text-wrap:balance}
:root[lang=ar] .case__statement{line-height:1.7}

/* الشركاء والمرافق المرتبطة بالمشروع */
.links{display:grid;gap:var(--s-7)}
@media (min-width:900px){.links{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}}
.links__h{margin-block-end:var(--s-5);font-size:var(--fs-h4)}
.links__partners,.links__facs{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.links__partners li,.links__facs li{border-block-end:1px solid var(--line)}
.links__partners a,.links__partners span{display:flex;align-items:center;gap:var(--s-4);padding-block:var(--s-4)}
.links__partners img{inline-size:3.25rem;block-size:2.25rem;padding:.25rem;object-fit:contain;border-radius:3px;background:#F3F1EC;filter:grayscale(1);transition:filter .15s var(--e-out)}
.links__partners b,.links__facs b{display:block;font-weight:600;transition:color .15s var(--e-out)}
@media (hover:hover){.links__partners a:hover b{color:var(--accent)}.links__partners a:hover img{filter:none}}
.links__facs li{display:flex;align-items:center;gap:var(--s-4);padding-block:var(--s-4)}
.links__thumb{flex:none;inline-size:4.5rem;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3)}
.links__thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.links__facs small{display:block;color:var(--fg-3);font-size:var(--fs-small)}

/* معرض تحريري (includes/gallery-grid.php): عادية / عريضة / زوج / تفصيل */
.egal{display:grid;gap:var(--s-6) var(--col-gap)}
.egal__i{margin:0;min-inline-size:0}
.egal__open{display:block;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3);aspect-ratio:3/2;cursor:zoom-in}
.egal__open img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .9s var(--e-soft)}
.egal__i--wide .egal__open{aspect-ratio:21/9}
.egal__i--pair .egal__open{aspect-ratio:4/5}
.egal__i--detail .egal__open{aspect-ratio:1/1}
.egal figcaption{display:flex;align-items:baseline;gap:var(--s-3);padding-block-start:var(--s-3);font-size:var(--fs-small);color:var(--fg-2)}
.egal figcaption .mono{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--fg-3)}
@media (hover:hover){.egal__open:hover img{transform:scale(1.03)}}
@media (min-width:600px){.egal{grid-template-columns:repeat(2,minmax(0,1fr))}.egal__i--standard,.egal__i--wide{grid-column:1/-1}}
@media (min-width:900px){
  .egal{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-8) var(--col-gap)}
  .egal__i--standard{grid-column:1/9}
  .egal__i--standard.is-end{grid-column:5/13}
  .egal__i--wide{grid-column:1/-1}
  .egal__i--pair{grid-column:span 6}
  .egal__i--detail{grid-column:2/7}
  .egal__i--detail.is-end{grid-column:7/12}
}
.is-uniform .egal__i{grid-column:auto}
.is-uniform .egal__open{aspect-ratio:4/3}
@media (min-width:900px){.is-uniform .egal{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--col-gap)}.is-uniform .egal__i{grid-column:auto}}

/* ---------- 17d. PROJECT MAP (projects.php) ---------------------------- */
.pmap{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:900px){.pmap{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}.pmap__head{grid-column:1/6}.pmap__fig{grid-column:6/13}}
.pmap__head h2{margin-block-start:var(--s-4);max-inline-size:16ch}
.pmap__head p{max-inline-size:40ch;margin-block:var(--s-5) var(--s-6);color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}
.pmap__list{margin:0;padding:0;list-style:none;border-block-start:1px solid var(--line)}
.pmap__list li{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-4);padding-block:var(--s-4);border-block-end:1px solid var(--line)}
.pmap__list b{font-weight:600;transition:color var(--d-fast) var(--e-soft)}
.pmap__list li.is-on b{color:var(--accent)}
.pmap__list i{font-style:normal;font-size:var(--fs-micro);color:var(--fg-3)}
.pmap__list span{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-small)}
.pmap__list a{color:var(--fg-2);transition:color var(--d-fast) var(--e-soft)}
@media (hover:hover){.pmap__list a:hover{color:var(--accent)}}
.pmap__fig{margin:0}
.pmap__fig svg{display:block;inline-size:100%;block-size:auto;overflow:hidden}
.iq-neighbours path{fill:var(--line-3);stroke:var(--line);stroke-width:1.5}
.iq-land{fill:rgba(150,175,199,.07);stroke:var(--line-2);stroke-width:2.5;stroke-linejoin:round}
.iq-river{fill:none;stroke:rgba(110,165,225,.42);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pin{cursor:pointer}
.pin__dot{fill:var(--accent);stroke:var(--bg);stroke-width:3;transition:r .3s var(--e-soft)}
.pin__halo{fill:var(--accent);opacity:.22;transform-box:fill-box;transform-origin:center;animation:pin-halo 2.6s var(--e-out) infinite}
@keyframes pin-halo{from{transform:scale(.4);opacity:.45}to{transform:scale(1.7);opacity:0}}
.pin__n{font-family:var(--f-text);font-size:26px;font-weight:700;fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:6px}
.pin.is-on .pin__dot{r:14}

/* ---------- 18. GENERIC MEDIA FIGURE ------------------------------------ */
.fig{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3)}
.fig img,.fig video{inline-size:100%;block-size:100%;object-fit:cover}
.fig figcaption{
  display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap;
  padding-block-start:var(--s-3);font-size:var(--fs-small);color:var(--fg-2);
}
.fig figcaption .mono{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--fg-3)}
.reveal-media{clip-path:inset(0 0 100% 0)}
.is-in .reveal-media{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--e-cine)}

/* ---------- 19. CLOSING ------------------------------------------------- */
.close{position:relative;min-block-size:92svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.close__media{position:absolute;inset:0;z-index:-2}
.close__media img{inline-size:100%;block-size:100%;object-fit:cover;transform:scale(1.08)}
.close__grade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--grade-3) 10%,var(--grade-2) 55%,rgba(5,9,15,.3) 100%)}
.close__t{font-size:var(--fs-h1);font-weight:var(--h-weight,600);line-height:1.1;letter-spacing:-.02em;max-inline-size:17ch;text-wrap:balance}
:root[lang=ar] .close__t{letter-spacing:0;line-height:1.32;max-inline-size:19ch}
.close__meta{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-block-start:var(--s-8);
  padding-block-start:var(--s-5);border-block-start:1px solid var(--line-2)}
.close__meta>div{display:flex;flex-direction:column;gap:.3rem}
.close__meta b{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);font-weight:400}
:root[lang=ar] .close__meta b{font-family:var(--f-text);letter-spacing:0;text-transform:none}

/* ---------- 20. FOOTER -------------------------------------------------- */
.ftr{border-block-start:1px solid var(--line);padding-block:var(--s-8) var(--s-5);background:var(--bg-2)}
.ftr__grid{display:grid;gap:var(--s-7)}
@media (min-width:768px){.ftr__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
  .ftr__a{grid-column:span 5}.ftr__b{grid-column:span 3}.ftr__c{grid-column:span 4}}
.ftr h3{font-size:var(--fs-label);font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);font-weight:500;margin-block-end:var(--s-4)}
:root[lang=ar] .ftr h3{font-family:var(--f-text);letter-spacing:0;text-transform:none}
/* display:block — كان عنصرًا سطريًا فيُتجاهل مقاسه ويختفي الشعار (0×0) */
.ftr__mark{display:block;inline-size:52px;block-size:40px;margin-block-end:var(--s-4)}
.ftr__tag{font-size:var(--fs-small);color:var(--fg-2);max-inline-size:34ch}
.dl{display:grid;gap:var(--s-3)}
.dl__row{display:grid;gap:.15rem;border-block-start:1px solid var(--line-3);padding-block-start:.5rem}
.dl__k{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;color:var(--fg-3)}
:root[lang=ar] .dl__k{font-family:var(--f-text);letter-spacing:0}
.dl__v{font-size:var(--fs-small);font-weight:500}
.navlist{display:grid;gap:var(--s-2)}
.navlist a{display:grid;grid-template-columns:1.75rem 1fr;gap:var(--s-3);align-items:baseline;
  padding-block:.5rem;border-block-start:1px solid var(--line-3);transition:color var(--d-fast) var(--e-soft)}
.navlist a span{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3)}
.navlist a b{font-weight:500;font-size:var(--fs-small)}
@media (hover:hover){.navlist a:hover{color:var(--accent)}}
.ftr__note{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  margin-block-start:var(--s-8);padding-block-start:var(--s-4);border-block-start:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--fg-3);font-family:var(--f-mono);letter-spacing:.08em}
:root[lang=ar] .ftr__note{font-family:var(--f-text);letter-spacing:0;font-size:var(--fs-small)}

/* ---------- 21. PAGE HEAD (inner pages) --------------------------------- */
.phead{position:relative;padding-block:calc(var(--s-10) + 2rem) var(--s-8);overflow:hidden}
.phead--media{min-block-size:78svh;display:flex;align-items:flex-end;isolation:isolate}
.phead__media{position:absolute;inset:0;z-index:-2}
.phead__media img{inline-size:100%;block-size:100%;object-fit:cover;transform:scale(1.06)}
.phead__grade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--grade-3) 6%,var(--grade-2) 48%,rgba(5,9,15,.28) 100%)}
.phead h1{max-inline-size:17ch;margin-block-start:var(--s-4)}
.phead .lead{margin-block-start:var(--s-5)}
.crumb{display:flex;gap:.6rem;align-items:center;font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-block-end:var(--s-5)}
:root[lang=ar] .crumb{font-family:var(--f-text);letter-spacing:0;text-transform:none;font-size:var(--fs-small)}
.crumb a:hover{color:var(--accent)}
.crumb i{opacity:.4;font-style:normal}
:root[dir=rtl] .crumb i{transform:scaleX(-1);display:inline-block}

/* ---------- 22. EDITORIAL PROSE ----------------------------------------- */
.prose{display:grid;gap:var(--s-5);max-inline-size:64ch}
.prose p{color:var(--fg-2);line-height:1.85;font-size:var(--fs-body)}
.prose p.first{color:var(--fg);font-size:var(--fs-lead);line-height:1.6}
:root[lang=ar] .prose p.first{line-height:1.75}

/* value / commitment blocks */
.vals{display:grid;gap:var(--s-5);border-block-start:1px solid var(--line)}
@media (min-width:900px){.vals{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}}
.val{padding-block:var(--s-6);border-block-end:1px solid var(--line)}
@media (min-width:900px){.val{padding-inline:var(--s-5);border-inline-end:1px solid var(--line);border-block-end:0}
  .val:first-child{padding-inline-start:0}.val:last-child{border-inline-end:0;padding-inline-end:0}}
.val__k{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block;margin-block-end:var(--s-3)}
:root[lang=ar] .val__k{font-family:var(--f-text);letter-spacing:0;text-transform:none;font-size:var(--fs-small);font-weight:600}
.val h3{font-size:var(--fs-h4);font-weight:var(--h-weight,600);margin-block-end:var(--s-3);letter-spacing:-.01em}
:root[lang=ar] .val h3{letter-spacing:0}
.val p{color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}

/* sector blocks — editorial, alternating */
.sector{display:grid;gap:var(--s-5);padding-block:var(--s-8);border-block-start:1px solid var(--line)}
@media (min-width:900px){
  .sector{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:start}
  .sector__n{grid-column:span 1}
  .sector__t{grid-column:2/6}
  .sector__d{grid-column:7/12}
}
.sector__n{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--fg-3);letter-spacing:.1em}
.sector__t h3{font-size:var(--fs-h3);font-weight:var(--h-weight,600);letter-spacing:-.02em}
:root[lang=ar] .sector__t h3{letter-spacing:0}
.sector__d{color:var(--fg-2);font-size:var(--fs-small);line-height:1.85}

/* anatomy stack */
.anat{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.anat__row{background:var(--bg);padding:var(--s-5);display:grid;gap:var(--s-3)}
@media (min-width:900px){.anat__row{grid-template-columns:4rem 12rem 1fr;gap:var(--col-gap);align-items:baseline;padding:var(--s-5) var(--s-6)}}
.anat__row b{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--accent);letter-spacing:.14em;font-weight:400}
.anat__row h3{font-size:var(--fs-h4);font-weight:var(--h-weight,600);letter-spacing:-.01em}
:root[lang=ar] .anat__row h3{letter-spacing:0}
.anat__row p{color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}

/* stage list variant: number + title only */
.anat--steps .anat__row{grid-template-columns:1fr}
@media (min-width:900px){.anat--steps .anat__row{grid-template-columns:4rem 1fr;align-items:baseline}}

/* grid placement helpers (only engage once the 12-col grid exists) */
@media (min-width:900px){
  .c-main{grid-column:1/8}
  .c-side{grid-column:9/13}
}

/* gallery */
.gal{display:grid;gap:var(--s-4)}
@media (min-width:768px){.gal{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
  .gal>*:nth-child(1){grid-column:span 7}
  .gal>*:nth-child(2){grid-column:span 5;align-self:end}
  .gal>*:nth-child(3){grid-column:4/11}}

/* media centre cards */
.films{display:grid;gap:var(--s-6)}
@media (min-width:900px){.films{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--col-gap)}}
.film{display:flex;flex-direction:column;gap:var(--s-3)}
.film__frame{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3);aspect-ratio:16/9;border:1px solid var(--line)}
.film__frame video{inline-size:100%;block-size:100%;object-fit:cover}
.film__btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to top,rgba(5,9,15,.7),rgba(5,9,15,.1));
  transition:opacity var(--d-fast) var(--e-soft);
}
.film__btn span{
  inline-size:4.25rem;block-size:4.25rem;border-radius:50%;border:1px solid var(--a-7);
  display:grid;place-items:center;color:var(--fg);background:var(--scrim);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform var(--d-fast) var(--e-soft),background-color var(--d-fast) var(--e-soft);
}
@media (hover:hover){.film__btn:hover span{transform:scale(1.07);background:var(--accent);color:var(--on-accent);border-color:var(--accent)}}
.film.is-playing .film__btn{opacity:0;pointer-events:none}
.film__meta{display:flex;flex-direction:column;gap:.35rem}

/* ---------- 23. FORM ---------------------------------------------------- */
.form{display:grid;gap:var(--s-5)}
@media (min-width:700px){.form{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--col-gap)}
  .field--wide{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
:root[lang=ar] .field label{font-family:var(--f-text);letter-spacing:0;text-transform:none;font-size:var(--fs-small)}
.field input,.field textarea{
  background:transparent;border:0;border-block-end:1px solid var(--line-2);
  padding-block:.7rem;font-size:var(--fs-body);color:var(--fg);border-radius:0;
  transition:border-color var(--d-fast) var(--e-soft);
}
.field textarea{resize:vertical;min-block-size:7rem;line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3);opacity:.65}
.field input:focus,.field textarea:focus{outline:none;border-block-end-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.form__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  padding-block-start:var(--s-3);border-block-start:1px solid var(--line)}
.form__hint{font-size:var(--fs-micro);color:var(--fg-3);max-inline-size:38ch;line-height:1.6}
.form__note{padding:var(--s-4);border:1px solid var(--line);background:var(--bg-2);
  font-size:var(--fs-small);color:var(--fg-2);border-radius:var(--r-panel);grid-column:1/-1;display:none}
.form__note.is-on{display:block}

/* Enquiry outcome — same editorial language as the rest of the page.
   The trap field is a spam honeypot: off-canvas, never focusable by tab. */
.trap{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form__err{grid-column:1/-1;padding:var(--s-4) var(--s-4);border:1px solid var(--a-7);
  border-inline-start:2px solid var(--accent);background:var(--bg-2);border-radius:var(--r-panel);
  font-size:var(--fs-small);color:var(--fg-2);line-height:1.7}
:root[dir=rtl] .form__err{border-inline-start:1px solid var(--a-7);border-inline-end:2px solid var(--accent)}
.btn.is-sending{opacity:.6;pointer-events:none}

.sent{border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg-2);
  padding:var(--s-6) var(--s-5)}
.sent__mark{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;
  background:var(--a-7);color:var(--accent);margin-block-end:var(--s-5)}
.sent__t{font-size:var(--fs-h3);line-height:1.3}
.sent__p{margin-block-start:var(--s-4);color:var(--fg-2);max-inline-size:44ch;line-height:1.8}
.sent__ref{margin-block-start:var(--s-5);display:flex;flex-direction:column;gap:.4rem}
.sent__ref b{font-size:var(--fs-h4);letter-spacing:.08em;color:var(--accent)}
.sent .form__actions{margin-block-start:var(--s-5)}

/* ---------- 23b. STEPPED ENQUIRY FORM (contact.php) --------------------- */
.fsteps__bar{display:none}
.js .fsteps__bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:0 0 var(--s-6);padding:0;list-style:none;grid-column:1/-1}
.fsteps__bar li{display:flex;align-items:center;gap:var(--s-3);padding-block-start:var(--s-3);border-block-start:2px solid var(--line);color:var(--fg-3);font-size:var(--fs-small);transition:color .3s var(--e-soft),border-color .3s var(--e-soft)}
.fsteps__bar li b{font-weight:400;font-size:var(--fs-micro);letter-spacing:.12em}
.fsteps__bar li.is-on,.fsteps__bar li.is-done{border-color:var(--accent);color:var(--fg)}
.fstep{display:contents;margin:0;padding:0;border:0}
.js .fstep{display:none}
.js .fstep.is-on{display:contents}
.js .fstep.is-on > *{animation:fstep-in .35s var(--e-soft) both}
@keyframes fstep-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.field__l{display:block;margin-block-end:var(--s-3);font-size:var(--fs-label);color:var(--fg-2)}
.kinds{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kind{position:relative;cursor:pointer}
.kind input{position:absolute;opacity:0;pointer-events:none}
.kind span{display:inline-flex;padding:.6rem 1.05rem;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--fg-2);font-size:var(--fs-small);transition:color .2s,border-color .2s,background-color .2s}
.kind:hover span{color:var(--fg);border-color:var(--fg-3)}
.kind input:checked + span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.kind input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.freview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--col-gap);margin:0;grid-column:1/-1;border-block-start:1px solid var(--line)}
.freview > div{padding-block:var(--s-4);border-block-end:1px solid var(--line)}
.freview__wide{grid-column:1/-1}
.freview dt{margin-block-end:.3rem;color:var(--fg-3);font-size:var(--fs-label)}
.freview dd{margin:0;font-size:var(--fs-small);white-space:pre-line;overflow-wrap:anywhere}
.no-js .freview{display:none}

/* ---------- 24. PAGER --------------------------------------------------- */
.pager{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:700px){.pager{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pager a{background:var(--bg);padding:var(--s-6) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);
  transition:background-color var(--d-fast) var(--e-soft)}
@media (hover:hover){.pager a:hover{background:var(--bg-3)}.pager a:hover b{color:var(--accent)}}
.pager span{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
:root[lang=ar] .pager span{font-family:var(--f-text);letter-spacing:0;text-transform:none}
.pager b{font-size:var(--fs-h4);font-weight:var(--h-weight,600);transition:color var(--d-fast) var(--e-soft)}
.pager a:last-child{text-align:end;align-items:flex-end}

/* ---------- 24b. LIBRARY SECTIONS --------------------------------------
   أقسام «مكتبة الأقسام» وأشكالها الآمنة. نفس لغة الموقع: خطوط قياس رفيعة
   ولون واحد. لا قيمة بكسل يدخلها المحرر — الأشكال وأحجام النصوص ثابتة هنا. */

/* حجم النصوص لكل قسم — صغير / قياسي / بارز / عرض كبير */
.t--compact{--fs-h1:clamp(1.875rem,1.1rem + 3vw,2.9rem);--fs-h2:calc(clamp(1.5rem,1rem + 2vw,2.625rem) * var(--h2-scale,1));--fs-h3:clamp(1.3rem,1rem + 1.2vw,1rem);--fs-h4:clamp(1.0625rem,.98rem + .45vw,1.375rem)}
.t--large{--fs-h1:clamp(2.5rem,1.3rem + 4.8vw,5.5rem);--fs-h2:calc(clamp(2.125rem,1.2rem + 3.8vw,4.5rem) * var(--h2-scale,1));--fs-h3:clamp(1.7rem,1.1rem + 2.3vw,3rem);--fs-h4:clamp(1.3rem,1.05rem + 1vw,1.875rem);--fs-small:clamp(.95rem,.9rem + .2vw,1.0625rem)}
.t--editorial{--fs-h1:clamp(2.75rem,1.2rem + 6vw,7rem);--fs-h2:calc(clamp(2.5rem,1.2rem + 5.4vw,6.25rem) * var(--h2-scale,1));--fs-h3:clamp(1.9rem,1.1rem + 3vw,3.75rem);--fs-h4:clamp(1.4rem,1.05rem + 1.4vw,2.25rem);--fs-small:clamp(1rem,.94rem + .25vw,1.125rem)}
.t--display{--fs-h1:clamp(2.875rem,1.2rem + 7vw,8rem);--fs-h2:calc(clamp(2.625rem,1.2rem + 6.2vw,7rem) * var(--h2-scale,1));--fs-h3:clamp(2rem,1.1rem + 3.5vw,4.25rem);--fs-h4:clamp(1.5rem,1.05rem + 1.7vw,2.5rem);--fs-small:clamp(1rem,.94rem + .3vw,1.1875rem)}
.t--editorial .shead h2,.t--editorial .stmt__q{max-inline-size:16ch}
.t--display .shead h2,.t--display .stmt__q,.t--display .band__q{max-inline-size:14ch}
.hero.t--compact{--hero-title-scale:.64;--hero-sub-scale:.84}
.hero.t--large{--hero-title-scale:.88;--hero-sub-scale:.96}
.hero.t--editorial{--hero-title-scale:1;--hero-sub-scale:1.04}
.hero.t--display{--hero-title-scale:1.12;--hero-sub-scale:1.08}
/* الأحجام الكبيرة لا تخرج عن مكانها: كسر الكلمة الطويلة وتوازن الأسطر، وعلى الجوال سقف آمن */
:is(.t--large,.t--editorial,.t--display) :is(h1,h2,h3,.hero__title,.stmt__q,.band__q,.close__t){overflow-wrap:break-word;text-wrap:balance}
@media (max-width:600px){
  .t--display{--fs-h1:clamp(2.25rem,1.4rem + 6vw,3.25rem);--fs-h2:calc(clamp(2rem,1.3rem + 5vw,2.875rem) * var(--h2-scale,1))}
  .hero.t--display{--hero-title-scale:1}
}

/* نص: عنوان في الوسط */
.stmt--center .stmt__grid{justify-items:center;text-align:center}
@media (min-width:900px){.stmt--center .stmt__q,.stmt--center .stmt__b{grid-column:2/12}}
.stmt--center .stmt__q{max-inline-size:24ch;margin-inline:auto}
.stmt--center .stmt__b{max-inline-size:56ch;margin-inline:auto}

/* نص وصورة */
.tm__grid{display:grid;gap:var(--s-6);align-items:center}
.tm__media{margin:0;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3);aspect-ratio:4/3}
.tm__media img{inline-size:100%;block-size:100%;object-fit:cover}
.tm__body h2{max-inline-size:18ch}
.tm__p{margin-block-start:var(--s-5);max-inline-size:54ch;color:var(--fg-2);font-size:var(--fs-body);line-height:1.85;white-space:pre-line}
@media (min-width:900px){
  .tm__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
  .tm__media{grid-column:1/8}
  .tm__body{grid-column:9/13}
  .tm--left .tm__media{grid-column:6/13;order:2}
  .tm--left .tm__body{grid-column:1/5;order:1}
  .tm--wide .tm__media{grid-column:1/-1;aspect-ratio:21/9}
  .tm--wide .tm__body{grid-column:1/9}
}

/* دعوة للتواصل بلا صورة */
.close--plain{min-block-size:0;padding-block:var(--s-10);background:var(--bg-2);border-block:1px solid var(--line)}

/* أرقام وإنجازات */
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)}
@media (min-width:1024px){.nums{grid-template-columns:repeat(4,minmax(0,1fr))}}
.num{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-6) var(--s-5) var(--s-7);border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)}
.num::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:2rem;block-size:2px;background:var(--accent)}
.num__v{display:block;unicode-bidi:plaintext;font-size:clamp(2.25rem,1.5rem + 2.6vw,4rem);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--fg)}
.num__t{color:var(--fg-2);font-size:var(--fs-small);line-height:1.6;max-inline-size:24ch}
.nums--row{display:flex;flex-wrap:wrap;gap:var(--s-7) var(--s-8);border:0}
.nums--row .num{flex:1 1 12rem;padding:0;border:0}
.nums--row .num::before{display:none}
.nums--row .num__v{font-size:clamp(3rem,1.8rem + 4.5vw,6.5rem);color:var(--accent)}

/* المعامل — شكل الشبكة */
.facs{display:grid;gap:var(--s-7) var(--col-gap)}
@media (min-width:768px){.facs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.facs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fac__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3);margin-block-end:var(--s-5)}
.fac__media img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.1s var(--e-soft)}
@media (hover:hover){.fac:hover .fac__media img{transform:scale(1.04)}}
.fac__kind{position:absolute;inset-block-start:var(--s-4);inset-inline-start:var(--s-4);padding:.3rem .7rem;border-radius:var(--r-pill);background:rgba(5,9,15,.72);color:#EEF2F6;font-size:var(--fs-label);letter-spacing:.04em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fac__t{font-size:var(--fs-h4);font-weight:var(--h-weight,600);line-height:1.3;letter-spacing:-.01em}
:root[lang=ar] .fac__t{letter-spacing:0;line-height:1.5}
.fac__d{margin-block-start:var(--s-3);color:var(--fg-2);font-size:var(--fs-small);line-height:1.8;max-inline-size:46ch}

/* المعامل — المستكشف: القائمة في جهة والصورة الكبيرة تتبدّل في الأخرى */
.fx{display:grid;gap:var(--s-6)}
.fx__list{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-snap-type:x proximity}
.fx__list::-webkit-scrollbar{display:none}
.fx__tab{flex:none;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.15rem .7rem;min-block-size:2.75rem;padding:.65rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:none;color:var(--fg-2);font:inherit;text-align:start;cursor:pointer;scroll-snap-align:start;
  transition:color .15s var(--e-out),border-color .15s var(--e-out)}
.fx__n{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--fg-3)}
.fx__name{font-weight:600;white-space:nowrap}
.fx__tab small{display:none}
.fx__tab.is-on{color:var(--fg);border-color:var(--accent)}
.fx__tab.is-on .fx__n{color:var(--accent)}
@media (hover:hover){.fx__tab:hover{color:var(--fg)}}
.fx__stage{display:grid}
.fx__panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .24s var(--e-out),visibility 0s linear .24s}
.fx__panel.is-on{opacity:1;visibility:visible;transition-delay:0s}
.fx__media{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3);aspect-ratio:16/10}
.fx__media img{inline-size:100%;block-size:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--e-soft)}
.fx__panel.is-on .fx__media img{transform:none}
.fx__body{display:grid;gap:var(--s-4);padding-block-start:var(--s-6)}
.fx__t{font-size:var(--fs-h3)}
.fx__d{max-inline-size:58ch;color:var(--fg-2);font-size:var(--fs-body);line-height:1.85}
.fx__caps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.fx__caps li{padding:.4rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--fs-small);color:var(--fg-2)}
.fx__loc{font-size:var(--fs-small);color:var(--fg-3)}
.fx__loc b{margin-inline-start:.4rem;font-weight:500;color:var(--fg)}
.fx__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);max-inline-size:28rem}
.fx__thumbs a{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-media);background:var(--bg-3);cursor:zoom-in}
.fx__thumbs img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .5s var(--e-soft)}
@media (hover:hover){.fx__thumbs a:hover img{transform:scale(1.06)}}
@media (min-width:900px){
  .fx{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:start}
  .fx__list{grid-column:1/5;position:sticky;inset-block-start:7rem;flex-direction:column;gap:0;overflow:visible;margin:0;padding:0;border-block-start:1px solid var(--line)}
  .fx__tab{position:relative;grid-template-columns:2.5rem 1fr;padding:var(--s-5) 0;border:0;border-block-end:1px solid var(--line);border-radius:0}
  .fx__tab::before{content:"";position:absolute;inset-block-end:-1px;inset-inline-start:0;inline-size:0;block-size:2px;background:var(--accent);transition:inline-size .24s var(--e-soft)}
  .fx__tab.is-on::before{inline-size:100%}
  .fx__name{font-size:var(--fs-h4);line-height:1.4;white-space:normal}
  .fx__tab small{display:block;grid-column:2;color:var(--fg-3);font-size:var(--fs-small)}
  .fx__stage{grid-column:6/13}
}

/* الشركاء: شبكة بالاسم، والشعار أحادي اللون حتى المرور. على الداكن
   يقف الشعار على لوح فاتح كي تُقرأ الشعارات الداكنة وصور JPG البيضاء. */
.pn{position:relative}
.pn__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)}
@media (max-width:479px){.pn__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn__i{border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)}
.pn__link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);block-size:100%;padding:var(--s-6) var(--s-4);text-align:center}
.pn__link::after{content:"";position:absolute;inset-block-end:-1px;inset-inline-start:0;inline-size:0;block-size:2px;background:var(--accent);transition:inline-size .22s var(--e-soft)}
.pn__logo{display:grid;place-items:center;min-block-size:4.25rem;padding:.6rem 1rem;border-radius:4px;background:#F3F1EC}
[data-theme=light] .pn__logo,.pn__logo:has(.pn__mono){background:none;padding:0}
.pn__logo img{inline-size:auto;block-size:auto;max-inline-size:9rem;max-block-size:3.25rem;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .16s var(--e-out),opacity .16s var(--e-out)}
.pn__mono{display:grid;place-items:center;inline-size:3.25rem;block-size:3.25rem;border-radius:50%;background:var(--steel);color:#EEF2F6;font-size:1.25rem;font-weight:700}
.pn__name{color:var(--fg-2);font-size:var(--fs-small);font-weight:600;line-height:1.5;transition:color .15s var(--e-out)}
@media (hover:hover){
  .pn__link:hover::after{inline-size:100%}
  .pn__link:hover img{filter:none;opacity:1}
  .pn__link:hover .pn__name{color:var(--fg)}
}
.pn--rail .pn__list{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(10rem,44%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.pn--rail .pn__list::-webkit-scrollbar{display:none}
@media (min-width:768px){.pn--rail .pn__list{grid-auto-columns:25%}}
@media (min-width:1200px){.pn--rail .pn__list{grid-auto-columns:calc(100% / 6)}}
.pn--rail .pn__i{scroll-snap-align:start}
.rail__ctl{display:flex;justify-content:flex-end;gap:var(--s-2);margin-block-end:var(--s-4)}
.rail__b{inline-size:2.75rem;block-size:2.75rem;border:1px solid var(--line-2);border-radius:50%;background:none;color:var(--fg);font:inherit;cursor:pointer;transition:border-color .15s var(--e-out),color .15s var(--e-out),opacity .15s var(--e-out)}
.rail__b:disabled{opacity:.3;cursor:default}
@media (hover:hover){.rail__b:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}}
:root[dir=ltr] .rail__b{transform:scaleX(-1)}

/* ردود العملاء (includes/quote.php): الأولى كبيرة، أو عمودان متساويان */
.cs-list{display:grid;gap:var(--s-8) var(--col-gap)}
@media (min-width:900px){.cs-list{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-list:not(.cs-list--grid) .cs:first-child{grid-column:1/-1}}
.cs{position:relative;margin:0;padding-block-start:var(--s-6);border-block-start:1px solid var(--line)}
.cs::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:3rem;block-size:2px;background:var(--accent)}
.cs__q{margin:0;max-inline-size:52ch;font-size:var(--fs-h4);font-weight:500;line-height:1.6;text-wrap:pretty}
.cs__q::before{content:"\201D";display:block;margin-block-end:var(--s-3);font-family:Georgia,serif;font-size:3.5rem;line-height:.6;color:var(--accent)}
:root[lang=ar] .cs__q{line-height:1.9}
.cs-list:not(.cs-list--grid) .cs:first-child .cs__q{max-inline-size:30ch;font-size:var(--fs-h3);line-height:1.45}
:root[lang=ar] .cs-list:not(.cs-list--grid) .cs:first-child .cs__q{line-height:1.75}
.cs__by{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-block-start:var(--s-6)}
.cs__logo{display:grid;place-items:center;inline-size:3.5rem;block-size:3.5rem;padding:.4rem;border:1px solid var(--line);border-radius:var(--r-panel);background:#F3F1EC}
.cs__logo img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.cs__who b{display:block;font-weight:600}
.cs__who small{display:block;color:var(--fg-3);font-size:var(--fs-small)}
.cs__doc{display:inline-flex;align-items:center;gap:.6rem;min-block-size:2.75rem;color:var(--fg-2);font-size:var(--fs-small);transition:color .15s var(--e-out)}
.cs__badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border:1px solid var(--accent);border-radius:var(--r-pill);color:var(--accent);font-size:var(--fs-label);font-weight:600}
.cs__badge::before{content:"✓";font-size:.8em}
@media (hover:hover){.cs__doc:hover{color:var(--fg)}}
.cs__proj{margin-inline-start:auto;font-size:var(--fs-small)}

/* أسئلة شائعة: العنوان جانبًا (افتراضي) أو فوق */
.faq{display:grid;gap:var(--s-7)}
@media (min-width:900px){.faq{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}.faq__head{grid-column:1/6}.faq__list{grid-column:7/13}}
.faq--stacked{display:block}
.faq--stacked .faq__head{margin-block-end:var(--s-6)}
.faq--stacked .faq__list{max-inline-size:56rem}
.faq__head h2{margin-block-start:var(--s-4);max-inline-size:14ch}
.faq--stacked .faq__head h2{max-inline-size:24ch}
.faq__head p{margin-block-start:var(--s-5);max-inline-size:40ch;color:var(--fg-2);font-size:var(--fs-small);line-height:1.8}
.faq__list{border-block-start:1px solid var(--line)}
.qa{border-block-end:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;gap:var(--s-5);padding-block:var(--s-5);list-style:none;cursor:pointer;font-weight:600;line-height:1.6;transition:color .15s var(--e-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-family:var(--f-mono);font-size:1.25rem;line-height:1.3;color:var(--accent);transition:transform .2s var(--e-soft)}
.qa[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.qa summary:hover{color:var(--accent)}}
.qa p{max-inline-size:62ch;padding-block-end:var(--s-5);color:var(--fg-2);font-size:var(--fs-small);line-height:1.9;white-space:pre-line}

/* ---------- 24c. DOCK: WHATSAPP + ASSISTANT «أوتاد» --------------------- */
.dock{position:fixed;inset-block-end:var(--s-5);inset-inline-end:var(--s-5);z-index:100;display:flex;align-items:center;gap:var(--s-3)}
.dock{transition:opacity .3s var(--e-soft),transform .3s var(--e-soft)}
.dock.is-away{opacity:0;transform:translateY(14px);pointer-events:none}
.dock__wa{display:grid;place-items:center;inline-size:52px;block-size:52px;border:1px solid var(--line-2);border-radius:50%;background:var(--bg-3);color:var(--fg);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);transition:transform .2s var(--e-soft),color .2s,border-color .2s}
.dock__wa svg{inline-size:24px;block-size:24px;fill:currentColor}
@media (hover:hover){.dock__wa:hover{transform:translateY(-2px);border-color:#25D366;color:#25D366}}
.dock__ai{display:inline-flex;align-items:center;gap:.6rem;block-size:52px;padding-inline:.45rem 1.25rem;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer;box-shadow:0 14px 34px -12px rgba(250,100,1,.65);transition:transform .2s var(--e-soft)}
@media (hover:hover){.dock__ai:hover{transform:translateY(-2px)}}
.dock__mark{flex:none;display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:50%;background:#0A0603}
.dock__mark img{inline-size:22px;block-size:auto}

.ai{position:fixed;inset-block-end:calc(var(--s-5) + 64px);inset-inline-end:var(--s-5);z-index:110;display:flex;flex-direction:column;
  inline-size:min(390px,calc(100vw - 2 * var(--s-5)));block-size:min(590px,calc(100svh - 140px));overflow:hidden;
  border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  opacity:0;transform:translateY(10px);transition:opacity .2s var(--e-soft),transform .2s var(--e-soft)}
.ai.is-open{opacity:1;transform:none}
.ai__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-block-end:1px solid var(--line)}
.ai__head b{display:block;font-weight:700}
.ai__head small{display:block;color:var(--fg-3);font-size:var(--fs-micro)}
.ai__x{margin-inline-start:auto;inline-size:36px;block-size:36px;border:0;border-radius:50%;background:none;color:var(--fg-2);font:inherit;cursor:pointer}
.ai__x:hover{background:var(--bg-3);color:var(--fg)}
.ai__log{flex:1;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);overflow-y:auto;overscroll-behavior:contain}
.ai__msg{max-inline-size:86%;padding:.7rem .95rem;border-radius:14px;font-size:var(--fs-small);line-height:1.8;white-space:pre-line}
.ai__msg--bot{align-self:flex-start;background:var(--bg-3);border-end-start-radius:4px}
.ai__msg--me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-end-end-radius:4px}
.ai__links{align-self:flex-start;display:flex;flex-direction:column;gap:.35rem;inline-size:86%}
.ai__links a{display:flex;justify-content:space-between;gap:.75rem;padding:.55rem .8rem;border:1px solid var(--line-2);border-radius:10px;font-size:var(--fs-small);transition:border-color .2s,color .2s}
.ai__links a::after{content:"←";opacity:.6}
:root[dir=ltr] .ai__links a::after{content:"→"}
@media (hover:hover){.ai__links a:hover{border-color:var(--accent);color:var(--accent)}}
.ai__acts{align-self:flex-start;display:flex;flex-wrap:wrap;gap:.4rem}
.ai__act{padding:.5rem .95rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:none;color:var(--fg);font:inherit;font-size:var(--fs-label);font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.ai__act:hover{border-color:var(--accent);color:var(--accent)}
.ai__act--wa:hover{border-color:#25D366;color:#25D366}
.ai__act[disabled]{opacity:.45;pointer-events:none}
.ai__chips{display:flex;gap:.4rem;padding:0 var(--s-4) var(--s-3);overflow-x:auto;scrollbar-width:none}
.ai__chips:empty{display:none}
.ai__chip{flex:none;padding:.45rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:none;color:var(--fg-2);font:inherit;font-size:var(--fs-label);white-space:nowrap;cursor:pointer}
.ai__chip:hover{border-color:var(--accent);color:var(--fg)}
.ai__form{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-4);border-block-start:1px solid var(--line)}
.ai__form input{flex:1;min-inline-size:0;block-size:44px;padding-inline:1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg);color:var(--fg);font:inherit;font-size:var(--fs-small)}
.ai__form input:focus{outline:0;border-color:var(--accent)}
.ai__form button{flex:none;inline-size:44px;block-size:44px;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);font:inherit;font-size:1.1rem;cursor:pointer}
.ai__typing{align-self:flex-start;display:flex;gap:4px;padding:.85rem 1rem;border-radius:14px;background:var(--bg-3)}
.ai__typing i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--fg-3);animation:ai-dot 1s infinite}
.ai__typing i:nth-child(2){animation-delay:.15s}
.ai__typing i:nth-child(3){animation-delay:.3s}
@keyframes ai-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.ai__lead{align-self:stretch;display:grid;gap:.5rem;padding:var(--s-4);border:1px solid var(--line-2);border-radius:12px;background:var(--bg)}
.ai__lead input,.ai__lead textarea{block-size:42px;padding-inline:.8rem;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);color:var(--fg);font:inherit;font-size:var(--fs-small)}
.ai__lead textarea{block-size:auto;min-block-size:78px;padding-block:.55rem;resize:vertical}
.ai__lead input:focus,.ai__lead textarea:focus{outline:0;border-color:var(--accent)}
.ai__lead .is-bad{border-color:#EF5350}
.ai__lead button{block-size:44px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer}
.ai__lead button[disabled]{opacity:.6}
.ai__lead small{color:var(--fg-3);font-size:var(--fs-micro)}
.ai__trap{position:absolute!important;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
@media (max-width:600px){
  .dock{inset-block-end:var(--s-4);inset-inline-end:var(--s-4)}
  .dock__ai{padding-inline:.45rem 1rem}
  .ai{inset:0;inline-size:auto;block-size:auto;border:0;border-radius:0}
}
@media print{.dock,.ai{display:none!important}}

/* ---------- 25. REVEALS ------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px)}
.is-in .rv,.rv.is-in{opacity:1;transform:none;
  transition:opacity .85s var(--e-soft) var(--dl,0s),transform .85s var(--e-soft) var(--dl,0s)}
.no-js .rv,.no-js .reveal-media,.no-js .hero__title .ln>span{opacity:1;transform:none;clip-path:none}

/* ---------- 26. UTILITIES ----------------------------------------------- */
.stack{display:grid;gap:var(--s-5)}
.stack--lg{gap:var(--s-7)}
.flexrow{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.sr-only{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-6{margin-block-start:var(--s-6)}
.mt-7{margin-block-start:var(--s-7)}
.mb-5{margin-block-end:var(--s-5)}
[hidden]{display:none!important}

/* ---------- 27. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero__title .ln>span{transform:none}
  .js .hero__eyebrow,.js .hero__sub,.js .hero__acts,.js .sheet__cell,.js .hero__scroll{opacity:1;transform:none}
  .js .hero__survey .sv-ring,.js .hero__survey .sv-dot{opacity:.55}
  .js .hero__survey .sv-pt circle{opacity:.5}
  .hero__survey .sv-axis path{stroke-dashoffset:0!important}
  .reveal-media{clip-path:none}
  .hero__media img,.band__media img,.close__media img{transform:none}
  .hero__scroll span.bar::after{animation:none;transform:translateY(30%)}
}

/* ---------- 28. PRINT --------------------------------------------------- */
@media print{
  .hdr,.menu,.rail,.hero__survey,.hero__scroll,.film__btn{display:none!important}
  body{background:#fff;color:#000}
}