/* =========================================================
   T-114 · بوابة AP · AAA Pulse
   الخطوط مستضافة عندنا (منسوخة من حزمة النشر مع رخصها)
   ========================================================= */
@font-face{
  font-family:'Alexandria'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url('/fonts/alexandria-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Readex Pro'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/fonts/readexpro-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --in: إيقاع الدخول بعد التحميل (1 خارجه) */
:root{
  --in:1;
  --ink:#0B0B0B; --white:#FFFFFF;
  --w-80:rgba(255,255,255,.8); --w-62:rgba(255,255,255,.62);
  --w-45:rgba(255,255,255,.46); --w-30:rgba(255,255,255,.3); --w-14:rgba(255,255,255,.14);
  --k-75:rgba(11,11,11,.75); --k-55:rgba(11,11,11,.58); --k-18:rgba(11,11,11,.18);
  --cyan:#18C7D9;
  --font-lat:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-ar:'Readex Pro','Segoe UI',Tahoma,sans-serif;
  --font-ar-display:'Alexandria','Readex Pro',Tahoma,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4vw,64px);
  --journey-h:640vh;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink); overflow-x:clip}
body{margin:0; background:var(--ink); color:var(--white); font-family:var(--font-ar); font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:clip}
.lat{font-family:var(--font-lat); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
i.lat{font-style:normal}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}

.jump{position:fixed; top:12px; right:-9999px; z-index:99; padding:12px 20px; background:var(--white); color:var(--ink); font-weight:600; border-radius:999px; text-decoration:none}
.jump:focus{right:12px}

/* =========================================================
   المشهد والملصق والحبيبات
   ========================================================= */
.gl{position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; display:block; z-index:0; opacity:0; transition:opacity .9s var(--ease)}
.gl.on{opacity:1}
.still .gl{display:none}
.still-bg{display:none}
.still .still-bg{
  display:block; position:fixed; inset:0; z-index:0;
  background:var(--ink) url('assets/poster-1600-eyes.webp') 32% 50%/cover no-repeat;
}
@media (max-width:768px){ .still .still-bg{background-image:url('assets/poster-m-eyes.webp'); background-position:50% 0} }
/* حبيبات فيلم ثابتة خفيفة جداً فوق المشهد: تكسر نعومة الرسم الحاسوبي */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   الدخولية: الشعار وحده على الحبر، ثم «ادخل»
   أثناءها الموقع خارج التدفق ومخفي بصرياً (يبقى في DOM للفهرسة)، فالصفحة بطول الشاشة ولا شيء يُقفل
   ========================================================= */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.sr-skip{position:fixed; top:12px; right:12px; z-index:99; padding:12px 20px; background:var(--white); color:var(--ink); font-weight:600; border-radius:999px; text-decoration:none;
  opacity:0; pointer-events:none; transform:translateY(-140%)}
.sr-skip:focus{opacity:1; pointer-events:auto; transform:none}
html:not(.gate) .sr-skip{display:none}
.gate main,.gate .top{visibility:hidden; pointer-events:none}
.gate main{position:fixed; inset:0; overflow:hidden}
.gate .jump{display:none}
.loader{display:none}
.gate .loader,.loader.out{
  display:block; position:fixed; inset:0; z-index:50;
  transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
/* الحبر خلف الشعار طبقة مستقلة تخفت بالشفافية (تركيب فقط، بلا إعادة رسم الشاشة كل إطار) فيظهر المشهد تحته */
.loader::before{content:''; position:absolute; inset:0; background:var(--ink); transition:opacity .9s var(--ease); will-change:opacity}
.loader.lit::before{opacity:0}
/* في الدخولية اللوحة تظهر فوراً خلف الحبر، فلا تتراكب شفافيتان على الشاشة كلها */
.gate .gl{opacity:1; transition:none}
.loader.out{opacity:0; visibility:hidden; pointer-events:none}
html:not(.gate) .loader:not(.out){display:none}
.loader__mark{position:absolute; left:50%; top:50%; width:var(--mk,300px); height:auto; transform:translate(-50%,-50%); display:block; overflow:visible;
  transition:opacity .7s var(--ease); will-change:opacity}
.loader.flat .loader__mark{opacity:0}
.ld-base{fill:none; stroke:var(--w-30); stroke-width:1.5; vector-effect:non-scaling-stroke}
.ld-fill{fill:var(--white)}
/* النبضة: نقطة سماوية واحدة تنبض مرة حين يكتمل الشعار، الإشارة الوحيدة بالسماوي */
.ld-pulse{fill:var(--cyan); opacity:0; transform-box:fill-box; transform-origin:center}
.loader.done .ld-pulse{animation:ldPulse 1.1s var(--ease) both}
@keyframes ldPulse{0%{opacity:0; transform:scale(.2)} 25%{opacity:1; transform:scale(1.25)} 60%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(.9)}}
/* «ادخل»: الكلمة الوحيدة على الشاشة. حبة بحدّ شعري أبيض؛ تظهر بقفزة شفافية إلى 0.6 ثم تكمل، فلا تمر بتباين ضعيف، ولا تُنقر قبل أن تُرى */
.enter{position:absolute; left:50%; top:calc(50% + var(--mk,300px) * .331 + clamp(40px,7vh,72px)); transform:translateX(-50%);
  padding:12px 40px; border:1px solid var(--w-80); border-radius:999px; font-family:var(--font-ar); font-weight:500; font-size:17px; line-height:1.6; color:var(--white);
  background:rgba(11,11,11,.55); visibility:hidden; opacity:0}
.enter.on{visibility:visible; animation:enterIn .8s var(--ease) both}
.enter:hover{background:var(--white); color:var(--ink)}
@keyframes enterIn{from{opacity:.6; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}

/* =========================================================
   الترويسة: تنقلب إلى الحبر حين يضيء العالم
   ========================================================= */
.top{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--gutter);
  transition:color .6s var(--ease);
}
/* أثناء إيقاع الدخول: غطاء الترويسة حاضر من البداية، والمحتوى يظهر فوقه بقفزة شفافية لا بتلاشٍ طويل */
/* ميزان س3: الترويسة مرئية (0.68) من أول الإيقاع فوق غطائها، فما يُنقر فيها يُرى دائماً */
.top > *{opacity:calc(.68 + .32 * var(--in,1))}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand__mark{width:38px; height:auto; display:block}
.brand__mark path{fill:currentColor; transition:fill .6s var(--ease)}
.brand__name{font-weight:600; font-size:15px; letter-spacing:.02em}
.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); font-size:15px}
.nav a{text-decoration:none; opacity:.8; padding:8px 2px}
.nav a:hover{opacity:1}
.nav .nav__go{opacity:1; color:var(--ink); background:var(--white); padding:9px 18px; border-radius:999px; font-weight:600; transition:background .6s var(--ease), color .6s var(--ease)}
.light .top{color:var(--ink)}
/* غطاء خلف الترويسة: حبر في العالم الداكن، أبيض في المضيء، ومصمت فوق الخدمات فلا يقع نص على نص */
.top::before{content:''; position:absolute; inset:0 0 -70% 0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(11,11,11,.86) 0%, rgba(11,11,11,.8) 50%, rgba(11,11,11,.42) 76%, rgba(11,11,11,0) 100%);
  transition:background .6s var(--ease)}
.light .top::before{background:linear-gradient(rgba(255,255,255,.9) 0%, rgba(255,255,255,.84) 50%, rgba(255,255,255,.4) 76%, rgba(255,255,255,0) 100%)}
.past .top{color:var(--ink)}
.past .top::before{inset:0; background:var(--white); box-shadow:0 1px 0 var(--k-18)}
.past .nav .nav__go{background:var(--ink); color:var(--white)}
.still .top::before{display:none}
.light .nav .nav__go{background:var(--ink); color:var(--white)}
.still .top{background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 1px 0 var(--k-18)}
.still .nav .nav__go{background:var(--ink); color:var(--white)}

/* =========================================================
   الرحلة: قسم لاصق، والتقدّم من موضع التمرير
   ========================================================= */
main{position:relative; z-index:2}
.journey{position:relative; height:var(--journey-h)}
.journey__stick{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}

.hero{position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; padding:110px var(--gutter) 80px; --o:1}
.hero__text{position:relative; isolation:isolate; width:min(38vw,540px); min-width:340px; transform:translateY(calc((1 - var(--o)) * -28px))}
/* كشف السطر كاملاً: يظهر بالشفافية مع إزاحة رأسية خفيفة (16px)، فلا يُقصّ حرف ولا نقطة في أي لحظة.
   الشفافية تقفز من 0 إلى 0.55 في أول 2.5% من الكشف ثم تكمل إلى 1، فلا يبقى النص طويلاً في منطقة تباين ضعيف،
   والغطاء الداكن يكتمل قبل أن يبدأ النص (يبدأ النص عند 0.36 والغطاء يكتمل عند 0.33) */
.hero{--k:clamp(0, calc((min(var(--o), var(--in)) - .36) / .64), 1)}
.hero__text .ln{opacity:calc(min(1, var(--k) * 40) * (.68 + .32 * var(--k))); transform:translateY(calc((1 - var(--k)) * 16px))}
span.ln{display:block}
.hero__text::before{opacity:min(1, calc(min(var(--o), var(--in)) * 3))}
.hero__eyebrow{margin:0 0 18px; font-size:15px; color:var(--w-80)}
/* السطر الصغير بلون أبيض 80%: يبدأ كشفه من 0.97 لا 0.68، فلا يهبط تباينه تحت 4.5 أثناء إيقاع الدخول */
.hero__text .hero__eyebrow .ln{opacity:calc(min(1, var(--k) * 40) * (.97 + .03 * var(--k)))}
/* غطاء داكن ناعم خلف كتلة النص: المشهد يمر خلفها ويخفت، ولا تقع الحروف على شريط الأفق المضيء */
.hero__text::before,.cap::before{content:''; position:absolute; inset:-90px -130px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(11,11,11,.82), rgba(11,11,11,.62) 50%, rgba(11,11,11,.2) 78%, rgba(11,11,11,0))}
.hero__h{margin:0 0 22px; font-family:var(--font-ar-display); font-weight:700; font-size:clamp(2.1rem,3.8vw,3.4rem); line-height:1.4}
.hero__desc{margin:0 0 34px; font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.8; color:var(--w-80); max-width:27em}
.hero__act{margin:0}
.cta{display:inline-flex; align-items:center; gap:14px; padding:14px 28px; border-radius:999px; background:var(--white); color:var(--ink); font-weight:600; font-size:1.02rem; text-decoration:none}
.cta i{font-style:normal; font-family:var(--font-lat); transition:transform .5s var(--ease)}
.cta:hover i{transform:translateX(-4px)}
.cta--ink{background:var(--ink); color:var(--white)}
.hero__cue{position:absolute; right:var(--gutter); bottom:calc(28px + env(safe-area-inset-bottom,0px)); margin:0; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--w-80); opacity:clamp(0, calc((min(var(--o), var(--in)) - .9) * 100), 1)}
.hero__cue i{display:block; width:1px; height:34px; background:linear-gradient(var(--w-45),transparent)}
/* لا يُنقر ما لا يُرى */
.hero[data-hidden] .hero__text,.hero[data-hidden] .hero__cue{visibility:hidden}

.cap{isolation:isolate; position:absolute; top:50%; right:var(--gutter); width:min(40vw,560px); transform:translateY(calc(-50% + (1 - var(--v,0)) * 22px)); pointer-events:none}
.cap{--k:clamp(0, calc((var(--v,0) - .36) / .64), 1)}
.cap .ln{opacity:calc(min(1, var(--k) * 40) * (.68 + .32 * var(--k))); transform:translateY(calc((1 - var(--k)) * 16px))}
.cap::before{opacity:min(1, calc(var(--v,0) * 3))}
.still .ln,.nojs .ln{transform:none!important; opacity:1!important}
.cap__n{display:block; margin:0 0 14px; font-size:13px; letter-spacing:.14em; color:var(--white); text-align:right}
.cap__h{margin:0; font-family:var(--font-ar-display); font-weight:700; font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.45; text-shadow:0 2px 30px rgba(0,0,0,.5)}
.cap--light .cap__h{color:var(--ink); text-shadow:0 2px 30px rgba(255,255,255,.6)}
.cap--light .cap__n{color:var(--k-75)}
.cap--light::before{background:radial-gradient(closest-side, rgba(244,242,238,.66), rgba(244,242,238,.4) 50%, rgba(244,242,238,.12) 78%, rgba(244,242,238,0))}
.still .cap::before,.still .hero__text::before{display:none}

/* بحركة مخفّضة أو بلا WebGL: الملصق ثابت والنص كله يُقرأ بالترتيب */
.still .journey,.nojs .journey{height:auto}
.still .journey__stick,.nojs .journey__stick{position:static; height:auto; overflow:visible}
.still .hero,.nojs .hero{position:relative; min-height:100vh; min-height:100svh}
.still .cap,.nojs .cap{position:static; transform:none; opacity:1; width:auto; padding:18vh var(--gutter)}
/* الوضع الثابت (حركة مخفّضة / بلا WebGL2): الملصق هو الشخص النهائي في العالم المضيء، فالنص كله بالحبر */
.still body,.still .hero__h,.still .cap__h{color:var(--ink); text-shadow:none}
.still .hero__eyebrow,.still .hero__desc,.still .cap__n,.still .cap--light .cap__n{color:var(--k-75)}
.still .cta{background:var(--ink); color:var(--white)}
.still .hero__cue{display:none}

/* =========================================================
   الخدمات: العالم المضيء يستمر أبيض
   ========================================================= */
.services{position:relative; z-index:3; background:var(--white); color:var(--ink)}
.services::before{content:''; position:absolute; left:0; right:0; top:-28vh; height:28vh; background:linear-gradient(rgba(255,255,255,0),var(--white)); pointer-events:none}
.still .services::before{display:none}
.services__in{max-width:1180px; margin:0 auto; padding:max(100px,clamp(40px,7vw,110px)) var(--gutter) 120px}
.services__eyebrow{margin:0 0 12px; font-size:14px; color:var(--k-55)}
.services__h{margin:0 0 44px; font-family:var(--font-ar-display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.5}
.services__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px)}
.services__list li{border-top:1px solid var(--k-18); padding:24px 0 0}
.services__list h3{margin:0 0 10px; font-family:var(--font-ar-display); font-weight:600; font-size:1.15rem; line-height:1.6}
.services__list h3 .sep{color:var(--k-55)}
.services__list p{margin:0 0 14px; color:var(--k-75); font-size:.98rem; line-height:1.8}
.services__list a{color:var(--ink); text-underline-offset:6px; text-decoration-color:var(--k-55)}
.services__foot{margin:56px 0 0}

/* =========================================================
   الجوال
   ========================================================= */
@media (max-width:768px){
  :root{--journey-h:560vh}
  .top{padding:14px 18px}
  .brand__mark{width:37px}
  .brand__name{font-size:14px}
  .nav{gap:14px; font-size:14px}
  .nav .nav__go{padding:8px 14px}
  .hero{align-items:flex-end; padding:0 20px calc(72px + env(safe-area-inset-bottom,0px))}
  .hero__text{width:100%; min-width:0}
  .hero__h{font-size:clamp(1.85rem,8.2vw,2.4rem); margin-bottom:16px}
  .hero__desc{margin-bottom:26px}
  .hero__cue{right:20px; bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .cap{right:20px; left:20px; width:auto; top:auto; bottom:16vh; transform:translateY(calc((1 - var(--v,0)) * 18px))}
  .still .cap{padding:14vh 20px}
  .services__list{grid-template-columns:1fr; gap:6px}
}
/* الجولة 8 · الترويسة صارت أربعة روابط (الخدمات، الورشة، EN، ابدأ طلبك): مقيسة تحتاج 428px بعرضها الطبيعي.
   ≤440: «الخدمات» تختفي (الرحلة تنتهي إليها بالتمرير، و«تخطَّ إلى الخدمات» للوحة المفاتيح) · <360: «الورشة» تختفي (بابها في نهاية الخدمات) · EN و«ابدأ طلبك» دائماً */
@media (max-width:440px){ .nav .nav__svc{display:none} .nav{gap:12px} }
@media (max-width:359.98px){ .nav .nav__studio{display:none} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important} }
.still.past .top{background:var(--white); box-shadow:0 1px 0 var(--k-18)}
/* أرقام العبارات صغيرة (13px): تظهر وتختفي كاملة بلا مرحلة شفافية وسطى، فلا تمر بتباين ضعيف */
.cap .cap__n .ln{opacity:clamp(0, calc((var(--k) - .5) * 1000), 1)}
/* الجوال: العبارة فوق السائل تملأ عرض الشاشة، فالغطاء أعمق قليلاً */
/* الجولة 6: الغطاء الأعمق صار للمكتب أيضاً، فرقم العبارة 02 (13px) فوق النفق قيس 3.7 في لحظة سائل مضيئة */
/* ميزان 7: عند p≈0.46 تخفت «والرؤية تأخذ أبعاداً» (α≈0.7) فوق خيوط السائل المضيئة؛ قيس 5–15% من بكسلاتها تحت 4.5 على المكتب و4:3، فصار القلب أعمق وأعرض */
.cap:not(.cap--light)::before{inset:-110px -150px; background:radial-gradient(closest-side, rgba(11,11,11,.95), rgba(11,11,11,.9) 58%, rgba(11,11,11,.5) 82%, rgba(11,11,11,0))}

/* ميزان T-114 v3d · س12: لا يُنقر ما لا يُرى — زر الهيرو شفاف أثناء إيقاع الدخول، والنقرة تمرّ إلى التخطي */
.intro-run .hero__text{pointer-events:none}
/* ميزان T-114 v3d · س11: في الوضع الثابت على الجوال الملصق ثابت والشخص الداكن في منتصفه،
   فلكل عبارة شريط فاتح يفصل حبرها عن جسده (داخل حدود العبارة فلا تمرير أفقي) */
@media (max-width:768px){
  .still .cap,.still .hero__text{position:relative; isolation:isolate}
  .still .cap::before,.still .hero__text::before{display:block; opacity:1; inset:8vh 0; background:linear-gradient(rgba(244,242,238,0), rgba(244,242,238,.94) 22%, rgba(244,242,238,.94) 78%, rgba(244,242,238,0))}
  .still .hero__text::before{inset:-5vh 0}   /* الهيرو بلا حشوة كالعبارات: الشريط يتسع حوله لا داخله */
}

/* =========================================================
   الجولة 6 · مؤشّر AP (cursor.js يضيف .ap-cursor بفأرة حقيقية فقط)
   أبيض فوق الداكن، وحبر فوق العالم المضيء والخدمات والوضع الثابت؛ هالة رقيقة معاكسة تفصله عن أي خلفية
   ========================================================= */
.ap-cursor,.ap-cursor *{cursor:none!important}
.ap-cursor input,.ap-cursor textarea,.ap-cursor select,.ap-cursor [contenteditable],.ap-cursor .services p,.ap-cursor .services h2,.ap-cursor .services h3{cursor:auto!important}
.ap-cursor .services a{cursor:none!important}
.ap-cur{position:fixed; inset:0 auto auto 0; z-index:120; pointer-events:none; color:var(--white); opacity:0; transition:opacity .2s var(--ease), color .45s var(--ease)}
.ap-cur.on{opacity:1}
.ap-cur.native{opacity:0}
.ap-cur__mark{position:absolute; left:0; top:0; display:block; overflow:visible; filter:drop-shadow(0 0 1.2px rgba(11,11,11,.7)); will-change:transform}
.ap-cur__mark path{fill:currentColor; transform-box:fill-box; transform-origin:36% 0; transition:transform .18s var(--ease)}
.ap-cur__ring{position:absolute; left:0; top:0; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; opacity:0; transform-origin:center; will-change:transform; transition:opacity .25s var(--ease)}
.ap-cur.hot .ap-cur__ring{opacity:.85}
.ap-cur.hot .ap-cur__mark path{transform:scale(1.14)}
.ap-cur.down .ap-cur__mark path{transform:scale(.8); transition-duration:.06s}
html.light:not(.gate) .ap-cur,html.past .ap-cur,html.still:not(.gate) .ap-cur{color:var(--ink)}
.ap-cur.onlight{color:var(--ink)!important}
.ap-cur.ondark{color:var(--white)!important}
.ap-cur.onlight .ap-cur__mark{filter:drop-shadow(0 0 1.2px rgba(255,255,255,.85))!important}
.ap-cur.ondark .ap-cur__mark{filter:drop-shadow(0 0 1.2px rgba(11,11,11,.7))!important}
html.light:not(.gate) .ap-cur__mark,html.past .ap-cur__mark,html.still:not(.gate) .ap-cur__mark{filter:drop-shadow(0 0 1.2px rgba(255,255,255,.85))}

/* =========================================================
   الجولة 7 · التابلت اللمسي (html.is-t، يقرّره index.html عند الإقلاع)
   أفقياً: تخطيط المكتب كما هو (النص في الثلث الأيمن والمشهد وسطاً ويساراً)
   عمودياً: مكدّس كالجوال بمقاسات التابلت — المشهد في الأعلى والنص في الأسفل؛ التدوير يبدّل بينهما بلا إعادة تحميل
   ========================================================= */
@media (orientation:portrait){
  .is-t{--journey-h:600vh}
  .is-t .hero{align-items:flex-end; padding:0 var(--gutter) calc(96px + env(safe-area-inset-bottom,0px))}
  .is-t .hero__text{width:min(100%,600px); min-width:0}
  .is-t .hero__h{font-size:clamp(2.4rem,5.6vw,3.1rem); margin-bottom:18px}
  .is-t .hero__desc{font-size:1.14rem; margin-bottom:30px}
  .is-t .hero__cue{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  .is-t .cap{right:var(--gutter); left:var(--gutter); width:auto; top:auto; bottom:13vh; transform:translateY(calc((1 - var(--v,0)) * 18px))}
  .is-t .cap__h{font-size:clamp(2.3rem,5.2vw,3rem)}
  /* رقم العبارة يحتضن نصه (العبارة بعرض الشاشة)، فيُقاس تباينه على ما خلف الحرفين لا على عرض الشاشة كلها */
  .is-t .cap__n .ln{display:inline-block}
  /* العبارة بعرض الشاشة فوق النفق والسائل: الغطاء شريط أفقي ناعم بعرض الشاشة لا بقعة شعاعية (البقعة تضعف عند الرقم في الزاوية؛ قيس 1.8 فوق السائل) */
  /* ميزان 7 · س5: عند خفوت العبارة فوق خيوط السائل (p≈0.46) كان الشريط بـ.84–.88 لا يكفي: صار أعمق وأعرض قلباً */
  .is-t .cap:not(.cap--light)::before{inset:-80px calc(-1 * var(--gutter)) -64px; background:linear-gradient(rgba(11,11,11,0), rgba(11,11,11,.93) 22%, rgba(11,11,11,.95) 78%, rgba(11,11,11,0))}
  .is-t .cap--light::before{inset:-64px calc(-1 * var(--gutter)) -48px; background:linear-gradient(rgba(244,242,238,0), rgba(244,242,238,.7) 28%, rgba(244,242,238,.74) 72%, rgba(244,242,238,0))}
  .is-t .services__list{grid-template-columns:repeat(2,1fr)}
  /* الثابت عمودياً: ملصق التابلت (الشخص في الأعلى)، ولكل عبارة شريط فاتح يفصل حبرها عن جسده كالجوال */
  .is-t.still .still-bg{background-image:url('assets/poster-t-eyes.webp'); background-position:50% 0}
  .is-t.still .cap{padding:12vh var(--gutter)}
  .is-t.still .cap,.is-t.still .hero__text{position:relative; isolation:isolate}
  .is-t.still .cap::before,.is-t.still .hero__text::before{display:block; opacity:1; inset:7vh 0; background:linear-gradient(rgba(244,242,238,0), rgba(244,242,238,.94) 22%, rgba(244,242,238,.94) 78%, rgba(244,242,238,0))}
  .is-t.still .hero__text::before{inset:-5vh 0}
}
/* «ادخل» على اللمس: هدف مريح (≥ 48px ارتفاعاً) */
.is-t .enter{padding:13px 44px; font-size:18px}

/* =========================================================
   الجولة 7ب · الجوال أفقياً (html.is-m وارتفاع ≤500، مثل 844×390 و932×430 و740×360)
   تخطيط المكتب مضغوطاً: المجسّم يساراً والنص في النصف الأيمن، الهيرو كله فوق الطيّة، ترويسة أنحف
   (يلغي هنا قواعد (max-width:768px) المكدّسة التي تنطبق على 740 وما دونه)
   ========================================================= */
@media (orientation:landscape) and (max-height:500px){
  .is-m .top{padding:8px max(18px, env(safe-area-inset-right,0px)) 8px max(18px, env(safe-area-inset-left,0px))}
  .is-m .brand__mark{width:32px}
  .is-m .brand__name,.is-m .nav{font-size:13px}
  .is-m .nav .nav__go{padding:6px 14px}
  .is-m .hero{align-items:center; justify-content:flex-start; padding:56px max(24px, env(safe-area-inset-right,0px)) 14px}
  .is-m .hero__text{width:min(50vw,440px); min-width:0}
  .is-m .hero__eyebrow{margin:0 0 6px; font-size:13px}
  .is-m .hero__h{font-size:clamp(1.35rem,6.4vh,1.75rem); line-height:1.35; margin:0 0 8px}
  .is-m .hero__desc{font-size:.9rem; line-height:1.6; margin:0 0 14px}
  .is-m .cta{padding:10px 22px; font-size:.95rem}
  .is-m .hero__cue{display:none}
  .is-m .cap{top:50%; bottom:auto; left:auto; right:max(24px, env(safe-area-inset-right,0px)); width:min(46vw,420px); transform:translateY(calc(-50% + (1 - var(--v,0)) * 18px))}
  .is-m .cap__n{margin:0 0 6px}
  .is-m .cap__h{font-size:clamp(1.5rem,7vh,2rem)}
  .is-m .services__list{grid-template-columns:repeat(2,1fr); gap:20px}
  .is-m .services__in{padding-top:72px}
  /* الثابت: ملصق المكتب (الشخص في الثلث الأيسر) والنص بالحبر عن يمينه */
  .is-m.still .still-bg{background-image:url('assets/poster-1600-eyes.webp'); background-position:32% 0}   /* من الأعلى: الرأس تحت الترويسة لا خلفها */
  .is-m.still .hero{min-height:100svh}
  /* ميزان 7 · س16: العبارة تبقى مثبّتة (relative + isolate) فيبقى شريطها الفاتح داخلها ولا يغطّي الهيرو */
  .is-m.still .cap{position:relative; isolation:isolate; width:auto; transform:none; padding:10vh max(24px, env(safe-area-inset-right,0px))}
}

/* ميزان 7 · س6: الجوال العريض عمودياً (600–768، مثل آيباد ميني 768×1024 وهو is-m): العبارة بعرض الشاشة ورقمها في زاويتها فوق حافة المجسّم المضيئة،
   فالرقم يحتضن نصه والغطاء شريط أفقي عميق كالتابلت. الجوال الضيق (390) كما هو */
/* ميزان r7 د2: هذه للوضع الحي وحده — في الحركة المخفّضة يبقى الشريط الفاتح (.still .cap::before) */
@media (min-width:600px) and (max-width:768px) and (orientation:portrait){
  .live.is-m .cap__n .ln{display:inline-block}
  .live.is-m .cap:not(.cap--light)::before{inset:-80px -20px -64px; background:linear-gradient(rgba(11,11,11,0), rgba(11,11,11,.93) 22%, rgba(11,11,11,.95) 78%, rgba(11,11,11,0))}
  .live.is-m .cap--light::before{inset:-80px -20px -64px; background:linear-gradient(rgba(244,242,238,0), rgba(244,242,238,.7) 28%, rgba(244,242,238,.74) 72%, rgba(244,242,238,0))}
}

/* =========================================================
   الجولة 8 · الدمج على / : باب الورشة ومدخل EN في الترويسة، وباب الورشة والذيل القانوني في نهاية الخدمات
   الترويسة كلها تحت قاعدة .gate .top (غائبة وغير قابلة للنقر حتى «ادخل»)، والباب والذيل داخل main فيسري عليهما .gate main
   ========================================================= */
.nav .nav__lang{font-weight:600; font-size:.9em; letter-spacing:.06em}
.door{margin:72px 0 0; padding:28px 0 0; border-top:1px solid var(--k-18); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px}
.door__t{margin:0; font-family:var(--font-ar-display); font-weight:600; font-size:clamp(1.12rem,1.9vw,1.4rem); line-height:1.6; color:var(--ink)}
.door__t .sep{color:var(--k-55)}
.door__go{display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:11px 26px; border:1.5px solid var(--ink); border-radius:999px; color:var(--ink); font-weight:600; text-decoration:none; transition:background .4s var(--ease), color .4s var(--ease)}
.door__go:hover{background:var(--ink); color:var(--white)}
.services__in{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.legal{margin:96px 0 0; padding:20px 0 0; border-top:1px solid var(--k-18); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 28px; font-size:14px; line-height:1.7; color:var(--k-75)}
.legal p{margin:0}
.legal a{display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-underline-offset:5px; text-decoration-color:var(--k-55)}
.legal__social{display:flex; flex-wrap:wrap; gap:0 22px}
.legal__social a{text-decoration:none}
.legal__social a:hover{text-decoration:underline}
@media (max-width:768px){
  .door{margin-top:56px}
  .legal{margin-top:64px; flex-direction:column; align-items:flex-start}
}

/* ميزان r8 س18: بعد الدخول لا يُركَّز «ادخل» بلوحة المفاتيح وهو غير مرئي (كان .enter.on يتجاوز visibility الموروثة من .loader.out) */
.loader.out .enter,.loader.out .enter.on{visibility:hidden}

/* ---------- الوداع (1 نوفمبر 2026): المشهد خلف آخر الصفحة، والشخص يلوّح ---------- */
.bye{position:relative; z-index:3; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none}
.bye__t{isolation:isolate; position:absolute; top:46%; right:var(--gutter); width:min(40vw,560px); transform:translateY(calc(-50% + (1 - var(--b,0)) * 22px))}
.bye__t::before{content:''; position:absolute; inset:-90px -130px; z-index:-1; opacity:var(--b,0); background:radial-gradient(closest-side, rgba(244,242,238,.66), rgba(244,242,238,.4) 50%, rgba(244,242,238,.12) 78%, rgba(244,242,238,0))}
.bye__t p{margin:0; opacity:var(--b,0)}
.bye__en{margin:0 0 10px!important; font-weight:600; font-size:clamp(1rem,1.4vw,1.25rem); letter-spacing:.14em; text-transform:uppercase; color:var(--k-75); text-align:right}
.bye__ar{font-family:var(--font-ar-display); font-weight:700; font-size:clamp(2.4rem,4.4vw,3.8rem); line-height:1.4; color:var(--ink); text-shadow:0 2px 30px rgba(255,255,255,.6)}
.bye__in{position:relative; max-width:1180px; width:100%; margin:0 auto; padding:0 var(--gutter) calc(14px + env(safe-area-inset-bottom,0px)); pointer-events:auto}
.bye::after{content:''; position:absolute; left:0; right:0; bottom:0; height:calc(150px + env(safe-area-inset-bottom,0px)); z-index:-1; pointer-events:none; background:linear-gradient(rgba(244,242,238,0), rgba(244,242,238,.88) 46%)}
.bye .legal{margin:0}
@media (max-width:760px){
  /* الذيل يلتف هنا على أربعة أسطر: النص في التدفق فوقه لا فوق موضع ثابت */
  .bye__t{position:relative; top:auto; right:auto; width:auto; margin:0 20px 22px; transform:translateY(calc((1 - var(--b,0)) * 18px))}
  .bye__t::before{inset:-60px -20px}
  .bye::after{height:calc(330px + env(safe-area-inset-bottom,0px))}
}
.is-t .bye__t{top:auto; bottom:calc(130px + env(safe-area-inset-bottom,0px)); left:var(--gutter); width:auto}
.still .bye,.nogl .bye{min-height:0; background:var(--white)}
.still .bye__t,.nogl .bye__t{position:static; transform:none; width:auto; max-width:1180px; width:100%; margin:0 auto; padding:12vh var(--gutter) 6vh; box-sizing:border-box}
.still .bye__t::before,.nogl .bye__t::before,.still .bye::after,.nogl .bye::after{display:none}
.still .bye__t p,.nogl .bye__t p{opacity:1}

/* ---------- مرحبا (1 نوفمبر 2026): أول ما يكتمل الشخص، بنمط الوداع نفسه ---------- */
.cap--hello .cap__n{font-size:clamp(1rem,1.4vw,1.25rem); font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px}
.cap--hello .cap__h{font-size:clamp(2.4rem,4.4vw,3.8rem); line-height:1.4}