/* =====================================================
   هوية سُدم (مأخوذة من ملف الشعار)
   الكحلي والتركوازي هما لونا الشعار. عدّلي من هنا فقط.
   ===================================================== */
:root{
  --navy:#132150;        /* لون الخط العربي في الشعار */
  --navy-d:#0A1233;      /* درجة أغمق للخلفيات */
  --teal:#78CAC4;        /* لون كلمة SUDOM في الشعار */
  --teal-d:#2F8F8A;
  --mist:#F2F6F7;
  --line:#DDE5E8;
  --text:#121B3D;
  --muted:#58628A;

  /* صورة الهيرو: ليل الرياض من موقعكم */
  --hero-img:url("https://sudom.sa/wp-content/uploads/2025/02/streets-in-illuminated-cityscape-riyadh-saudi-ar-2023-11-27-05-18-12-utc-1-scaled.jpg");

  --display:'Amiri','IBM Plex Sans Arabic',serif;
  --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:#fff;color:var(--text);line-height:1.9;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* الشعار: مرسوم مرة واحدة ويُستخدم بألوان مختلفة حسب الخلفية */
.lg{fill:currentColor}
.mark{aspect-ratio:256/78}
.full{aspect-ratio:256/104}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;border:1px solid transparent;font-weight:500;font-size:16px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn-teal{background:var(--teal);color:var(--navy-d)}
.btn-teal:hover{background:#94d9d4}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-d)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:#fff;color:var(--navy)}

/* ---------- الهيدر ---------- */
.top{--la:#fff;--lb:#fff;position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s,box-shadow .35s;color:#fff}
.top.solid{--la:var(--navy);--lb:var(--teal);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);color:var(--text)}
.nav{display:flex;align-items:center;gap:44px;height:88px}
.logo svg{height:52px;width:auto}
.menu{display:flex;gap:34px;margin-inline-end:auto;font-size:16px}
.menu a{position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
.lang{font-size:15px;border:1px solid currentColor;padding:4px 14px;opacity:.9}
.burger{display:none;margin-inline-start:auto;background:none;border:0;color:inherit;font-size:30px;cursor:pointer}

/* ---------- الهيرو: خلفية من صور المشاريع تتبدّل بانتشار حبر، والشعار ثابت فوقها ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background:var(--navy-d)}
.slides{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy-d)}
.slide{position:absolute;inset:0;will-change:clip-path,filter}
.slide.base{z-index:1}
.slide.rev{z-index:2}
.slide i{position:absolute;inset:-7%;background-image:var(--img),linear-gradient(160deg,#1d2f6e,#0a1233);background-size:cover;background-position:center;animation:kb 20s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.03) translate(-1.4%,.8%)}to{transform:scale(1.15) translate(1.4%,-1%)}}
.ring{position:absolute;z-index:3;left:0;top:0;width:0;height:0;border-radius:50%;border:1px solid rgba(120,202,196,.9);box-shadow:0 0 40px rgba(120,202,196,.35),inset 0 0 40px rgba(120,202,196,.12);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
/* طبقة تحكم في التباين حتى يظل الشعار والنص واضحين فوق أي صورة */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(10,18,51,.38),transparent 75%),linear-gradient(180deg,rgba(10,18,51,.62) 0%,rgba(10,18,51,.22) 38%,rgba(10,18,51,.9) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:100px}
.hero-logo{--la:#fff;--lb:var(--teal);display:block;margin-inline:auto;width:min(94vw,1020px,calc((100svh - 340px)*2.46));filter:drop-shadow(0 12px 36px rgba(4,8,28,.6));clip-path:inset(0 0 0 100%);animation:write 2.4s .2s cubic-bezier(.65,.05,.25,1) forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}

.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:20px;opacity:0;animation:in 1s 1.8s forwards}
@keyframes in{to{opacity:1}}
.field strong{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.5}
.field p{max-width:40ch;font-weight:300;font-size:clamp(16px,1.5vw,19px);color:#cfd8f0}
.cap{min-width:min(100%,300px)}
.cap .txt{transition:opacity .5s,transform .5s}
.cap .txt.out{opacity:0;transform:translateY(10px)}
.cap small{display:block;color:var(--teal);font-weight:500;font-size:15px}
.cap h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.4}
.cap a{display:inline-flex;gap:8px;margin-top:4px;padding-bottom:2px;border-bottom:1px solid var(--teal);font-weight:500;font-size:15px}
.cap a::after{content:"←";transition:transform .3s}
.cap a:hover::after{transform:translateX(-5px)}
.cap-ctl{display:flex;align-items:center;gap:14px;margin-top:16px}
.dots{display:flex;gap:7px}
.dots i{width:30px;height:3px;background:rgba(255,255,255,.28);transition:background .4s}
.dots i.on{background:var(--teal)}

.finder{position:relative;z-index:2;margin-top:34px;border-top:1px solid rgba(255,255,255,.2);background:rgba(10,18,51,.6);backdrop-filter:blur(14px);opacity:0;animation:in 1s 2s forwards}
.finder .wrap{padding-block:22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.finder b{font-weight:500;color:#cdd6ee}
.seg{display:flex;border:1px solid rgba(255,255,255,.35)}
.seg button{background:none;border:0;color:#fff;padding:10px 26px;cursor:pointer;font-size:16px;transition:background .2s,color .2s}
.seg button+button{border-inline-start:1px solid rgba(255,255,255,.35)}
.seg button[aria-pressed=true]{background:var(--teal);color:var(--navy-d)}
.finder .btn{margin-inline-start:auto;min-height:46px}

/* ---------- القيم ---------- */
.values{background:var(--navy);color:#fff;padding:84px 0}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.v{padding-top:22px;border-top:2px solid rgba(120,202,196,.35);position:relative}
.v::before{content:"";position:absolute;inset:-2px auto auto 0;width:56px;height:2px;background:var(--teal)}
.v strong{display:block;font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.5}
.v span{display:block;color:#b9c4e6;font-size:16px}

/* ---------- عام ---------- */
section{padding:120px 0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,60px);line-height:1.4;color:var(--navy)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.sec-head p{max-width:44ch;color:var(--muted)}

/* ---------- المشاريع (بنية صفحة مشاريع أُسُس: عنوان + تبويبات + شبكة) ---------- */
.projects{background:#fff}
.sec-head{margin-bottom:0}
.tabs{display:flex;gap:4px 40px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:44px 0 48px}
.tab{white-space:nowrap;position:relative;background:none;border:0;padding:14px 0;font-size:17px;color:var(--muted);cursor:pointer;transition:color .2s}
.tab::after{content:"";position:absolute;inset:auto 0 -1px 0;height:3px;background:var(--navy);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.tab:hover{color:var(--navy)}
.tab[aria-pressed=true]{color:var(--navy);font-weight:600}
.tab[aria-pressed=true]::after{transform:scaleX(1)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 28px}
.pcard{display:flex;flex-direction:column}
.pcard[hidden]{display:none}
.pimg{position:relative;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,#1d2f6e,#0a1233)}
.pimg i{position:absolute;inset:0;background-image:var(--img),linear-gradient(160deg,#1d2f6e,#0a1233);background-size:cover;background-position:center;transition:transform 1.2s var(--ease)}
.pcard:hover .pimg i{transform:scale(1.07)}
.pbody{flex:1;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:20px 0 22px;border-bottom:1px solid var(--line);position:relative}
.pbody::after{content:"";position:absolute;inset:auto 0 -1px 0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.pcard:hover .pbody::after{transform:scaleX(1)}
.pbody small{display:block;font-size:15px;font-weight:500;color:var(--teal-d);line-height:1.6}
.pbody h3{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.5;color:var(--navy)}
.go{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--navy);white-space:nowrap}
.go::after{content:"←";transition:transform .35s var(--ease)}
.pcard:hover .go::after{transform:translateX(-6px)}
.empty{padding:40px 0;color:var(--muted)}

/* ---------- من نحن ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:center}
.about-img{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,#1d2f6e,#0a1233);overflow:hidden}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,33,80,.1),rgba(10,18,51,.55))}
.about-img::after{content:"";position:absolute;inset:22px;border:1px solid rgba(120,202,196,.9);pointer-events:none}
.about-img .lg{position:absolute;z-index:2;inset:auto 44px 46px auto;width:min(60%,300px);--la:#fff;--lb:var(--teal)}
.about-txt .lead{margin-top:22px;color:var(--muted);max-width:56ch;font-size:18px}
.mv{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.mv div{padding:24px 0 0}
.mv div+div{padding-inline-start:28px;border-inline-start:1px solid var(--line)}
.mv h3{font-family:var(--display);font-weight:700;font-size:24px;color:var(--teal-d);margin-bottom:4px}
.mv p{font-size:15.5px;color:var(--muted)}
.about-txt .btn{margin-top:36px}

/* ---------- تواصل ---------- */
.contact{position:relative;color:#fff;isolation:isolate;background:var(--navy-d)}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,18,51,.97) 40%,rgba(19,33,80,.8)),var(--hero-img) center/cover}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact h2{color:#fff}
.contact .intro{margin-top:18px;color:#c4cdea;max-width:42ch}
.info{margin-top:38px;display:grid;gap:18px}
.info div{display:grid;grid-template-columns:120px 1fr;color:#dde3f5}
.info b{color:var(--teal);font-weight:500}
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:6px;font-size:15px;color:#cdd6ee}
input,select,textarea{padding:14px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:0}
select option{color:#000}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal)}
textarea{min-height:120px;resize:vertical}

/* ---------- الفوتر ---------- */
footer{background:var(--navy-d);color:#a9b4d8;padding:70px 0 28px;font-size:15px;border-top:1px solid rgba(255,255,255,.08)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:60px}
footer h4{color:#fff;font-weight:500;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:var(--teal)}
.foot .full{width:min(100%,240px);--la:#fff;--lb:var(--teal);margin-bottom:18px}
.copy{margin-top:50px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}

/* ---------- موبايل ---------- */
@media(max-width:960px){
  .burger{display:block}
  .menu{position:fixed;inset:88px 0 auto 0;background:var(--navy-d);color:#fff;flex-direction:column;gap:0;padding:6px 24px 24px;display:none}
  .top.solid .menu{background:#fff;color:var(--text);box-shadow:0 12px 24px rgba(10,18,51,.12)}
  .menu.open{display:flex}
  .menu a{padding:15px 0;border-bottom:1px solid rgba(128,138,170,.3)}
  .lang{display:none}
  .vgrid{grid-template-columns:1fr;gap:30px}
  .about-grid,.contact-grid,.foot{grid-template-columns:1fr;gap:44px}
  section{padding:80px 0}
  .pgrid{grid-template-columns:1fr 1fr;gap:44px 20px}
  .pbody h3{font-size:24px}
  .finder .btn{margin-inline-start:0;width:100%}
  .seg{width:100%}
  .seg button{flex:1;padding:10px 6px;font-size:14.5px;white-space:nowrap}
  .hero-row{flex-direction:column;align-items:flex-start}
  .row2,.mv{grid-template-columns:1fr}
  .mv div+div{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line);margin-top:20px}
}
@media(max-width:620px){
  .pgrid{grid-template-columns:1fr}
  .tabs{flex-wrap:nowrap;overflow-x:auto;gap:0 28px;scrollbar-width:none;margin-inline:-24px;padding-inline:24px}
  .tabs::-webkit-scrollbar{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  html{scroll-behavior:auto}
}

/* ===== نسخة الخلفية الفاتحة: شعار كحلي/تركوازي بألوان الهوية فوق صور المشاريع ===== */
.top{--la:var(--navy);--lb:var(--teal);color:var(--navy)}
.top.solid{color:var(--text)}
.hero{color:var(--navy);background:#eef3f5}
.slides{background:#eef3f5}
.hero::before{background:radial-gradient(ellipse 62% 52% at 50% 38%,rgba(255,255,255,.55),transparent 78%),linear-gradient(180deg,rgba(246,249,251,.74) 0%,rgba(246,249,251,.5) 40%,rgba(246,249,251,.94) 100%)}
.hero-logo{--la:var(--navy);--lb:var(--teal);filter:drop-shadow(0 8px 28px rgba(255,255,255,.75))}
.field p{color:var(--muted)}
.cap small{color:var(--teal-d)}
.cap a{border-bottom-color:var(--teal-d);color:var(--navy)}
.dots i{background:rgba(19,33,80,.22)}
.dots i.on{background:var(--navy)}
.ring{border-color:rgba(255,255,255,.95);box-shadow:0 0 40px rgba(255,255,255,.7),inset 0 0 40px rgba(255,255,255,.35)}
.finder{border-top:1px solid rgba(19,33,80,.12);background:rgba(255,255,255,.74)}
.finder b{color:var(--muted)}
.seg{border-color:rgba(19,33,80,.35)}
.seg button{color:var(--navy)}
.seg button+button{border-inline-start-color:rgba(19,33,80,.35)}
.seg button[aria-pressed=true]{background:var(--navy);color:#fff}

/* ===== مقدمة الشعار: يظهر فوق السلايد شو ثم يطير إلى الهيدر وتبقى صور المشاريع واضحة ===== */
.hero-logo{transform-origin:50% 0;transition:transform 1.5s cubic-bezier(.7,0,.2,1),opacity .6s 1.1s}
.hero.clear .hero-logo{transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,.2));opacity:0}
.hero::before{transition:opacity 1.4s ease}
.hero.clear::before{opacity:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background:linear-gradient(180deg,rgba(246,249,251,.6) 0%,rgba(246,249,251,0) 18%,rgba(10,18,51,0) 68%,rgba(10,18,51,.5) 100%)}
.hero.clear::after{opacity:1}
.hero .field strong,.hero .cap h3,.hero .cap a{transition:color 1.2s}
.hero.clear{color:#fff}
.hero.clear .field p{color:#e3e9f8}
.hero.clear .cap small{color:var(--teal)}
.hero.clear .cap a{color:#fff;border-bottom-color:var(--teal)}
.hero.clear .dots i{background:rgba(255,255,255,.35)}
.hero.clear .dots i.on{background:var(--teal)}
.hero.clear .ring{border-color:rgba(255,255,255,.95)}
body.cleared .top:not(.solid){--la:var(--navy);--lb:var(--teal);color:var(--navy)}
.hero-row{z-index:2}
/* ===== أسلوب فيلم سينمائي: دمج مشاهد + حركة كاميرا لكل مشهد + شريطا سينما + حبيبات فيلم ===== */
.slide i{animation:k0 17s linear forwards}
.slide i[data-k="1"]{animation-name:k1}
.slide i[data-k="2"]{animation-name:k2}
.slide i[data-k="3"]{animation-name:k3}
@keyframes k0{from{transform:scale(1.02)}to{transform:scale(1.16)}}
@keyframes k1{from{transform:scale(1.16)}to{transform:scale(1.02)}}
@keyframes k2{from{transform:scale(1.1) translateX(3%)}to{transform:scale(1.1) translateX(-3%)}}
@keyframes k3{from{transform:scale(1.1) translate(-2.5%,2%)}to{transform:scale(1.1) translate(2.5%,-2%)}}
.grain,.flash{position:absolute;pointer-events:none}
.grain{inset:-50%;z-index:3;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.flash{inset:0;z-index:4;opacity:0;background:radial-gradient(ellipse at 70% 40%,rgba(255,236,200,.9),rgba(255,255,255,.35) 60%,transparent)}
.slides::after{display:none}

/* ===== عن سُدم: خط الهوية (أميري) وألوانها (كحلي #132150 وتركوازي #78CAC4) ===== */
.brand{font-family:var(--display);font-weight:700;color:var(--navy)}
#about h2{position:relative;padding-bottom:18px}
#about h2::after{content:"";position:absolute;inset:auto auto 0 50%;transform:translateX(-50%);width:64px;height:3px;background:var(--teal)}
#about .lead{color:var(--navy);opacity:.84}
.mv h3{color:var(--navy);position:relative;padding-top:0}
.mv h3::before{display:none}
.mv p{color:var(--navy);opacity:.76}
.about-img::before{display:none}
.about-txt{text-align:center}
.about-txt .lead{margin-inline:auto}
.mv>div{text-align:center}
/* ===== أيقونات الرؤية والرسالة ===== */
.mvi{width:60px;height:60px;border:1px solid rgba(120,202,196,.9);border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;transition:background .35s,border-color .35s}
.mvi svg{height:26px;width:auto;fill:var(--navy);transition:fill .35s}
.mv>div:hover .mvi{background:var(--teal);border-color:var(--teal)}
.mv>div:hover .mvi svg{fill:var(--navy-d)}
/* ===== توسيط العناوين + الفوتر الأبيض ===== */
.vhead{display:flex;align-items:center;justify-content:center;gap:28px;margin-bottom:56px}
.values .vh{margin-bottom:0}
.values .v{align-items:center;text-align:center}
.v .vi{margin-inline:auto}
.sec-head{justify-content:center;text-align:center}
.tabs{justify-content:center}
footer{background:#fff;color:var(--muted);border-top:1px solid var(--line)}
footer h4{color:var(--navy)}
footer a:hover{color:var(--teal-d)}
.foot .full{--la:var(--navy);--lb:var(--teal)}
.copy{border-top-color:rgba(19,33,80,.12)}
/* ===== مشاريعنا: بطاقات ناعمة بزوايا مدوّرة وظل خفيف (بخط وألوان الهوية) ===== */
.pgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}
.pcard{flex:0 0 calc((100% - 60px)/3);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 6px rgba(19,33,80,.06),0 18px 40px -22px rgba(19,33,80,.35);border:1px solid rgba(19,33,80,.06);transition:transform .5s var(--ease),box-shadow .5s}
.pcard:hover{transform:translateY(-8px);box-shadow:0 2px 6px rgba(19,33,80,.08),0 34px 54px -24px rgba(19,33,80,.5)}
.pimg{aspect-ratio:16/11;background:var(--navy-d)}
.pbody{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:22px 26px 26px;border:0;margin:0}
.pbody::after{display:none}
.pbody small{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:var(--teal-d);line-height:1.6}
.pbody small::before{content:"";width:30px;height:2px;background:var(--teal)}
.pbody h3{margin-top:10px;font-size:clamp(24px,2.1vw,30px);color:var(--navy)}
.pbody p{margin-top:8px;font-size:15.5px;line-height:1.85;color:var(--muted)}
.pbody .go{margin-top:auto;padding-top:20px;font-size:15.5px;font-weight:600;color:var(--navy)}
.pcard .go::after{content:"←";font-size:18px;line-height:1;color:var(--teal-d);transition:transform .35s var(--ease)}
.pcard:hover .go::after{transform:translateX(-6px)}
@media (max-width:960px){.pcard{flex-basis:calc((100% - 30px)/2)}}
@media (max-width:640px){.pcard{flex-basis:100%}}
/* ===== القيم بالأيقونات ===== */
.values{padding:96px 0 88px}
.values .vh{color:#fff;font-size:clamp(28px,3vw,42px);margin-bottom:44px}
.v{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.v .vi{display:grid;color:inherit;width:88px;height:88px;border:1px solid rgba(120,202,196,.55);border-radius:50%;display:grid;place-items:center;margin:6px 0 22px;transition:background .35s,border-color .35s}
.vi svg{height:36px;width:auto;fill:var(--teal);transition:fill .35s}
.v:hover .vi{background:var(--teal);border-color:var(--teal)}
.v:hover .vi svg{fill:var(--navy-d)}

/* ===== صفحة المشروع: سلايدر + صور تحته بمربعات بحجم بطاقات مشاريعنا ===== */
[hidden]{display:none!important}
#project-view{padding:150px 0 110px;background:#fff}
.pback{display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--navy);margin-bottom:34px}
.pback::before{content:"→";font-size:20px;color:var(--teal-d);transition:transform .35s var(--ease)}
.pback:hover::before{transform:translateX(5px)}
.pcat{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--teal-d)}
.pcat::before{content:"";width:34px;height:2px;background:var(--teal)}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin-top:10px}
.nrow h3{margin-top:0!important}
.nlogo{flex:none;height:42px;width:auto;max-width:46%;object-fit:contain}
.trow{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:10px;flex-wrap:wrap}
.trow #pvTitle{margin-top:0}
.pvlogo{flex:none;height:88px;width:auto;max-width:42%;object-fit:contain}
.pvlogo[hidden]{display:none}
@media(max-width:640px){.pvlogo{height:60px}}
#pvTitle{font-family:var(--display);font-weight:700;color:var(--navy);margin-top:10px;font-size:clamp(36px,5.2vw,68px);line-height:1.3}
.plead{margin-top:14px;max-width:62ch;font-size:clamp(17px,1.5vw,20px);color:var(--navy);opacity:.82}
.pstage{position:relative;margin-top:44px;aspect-ratio:16/9;max-height:72vh;width:100%;border-radius:14px;overflow:hidden;background:var(--navy-d);box-shadow:0 2px 6px rgba(19,33,80,.08),0 34px 60px -30px rgba(19,33,80,.55)}
.ps{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.pnav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(10,18,51,.35);backdrop-filter:blur(6px);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.pnav:hover{background:var(--teal);border-color:var(--teal);color:var(--navy-d)}
.pnav.prev{right:20px}.pnav.next{left:20px}
.pcount{position:absolute;z-index:3;inset:auto auto 22px 24px;color:#fff;font-family:var(--display);font-weight:700;font-size:22px;text-shadow:0 2px 12px rgba(4,8,28,.7)}
.pprog{position:absolute;z-index:3;inset:auto 0 0 auto;height:4px;width:0;background:var(--teal)}
.pprog.run{animation:pprog var(--dur,5600ms) linear forwards}
@keyframes pprog{to{width:100%}}
.pgal{margin:64px 0 28px;font-size:clamp(26px,2.6vw,36px)}
.pthumbs{display:flex;flex-wrap:wrap;gap:30px}
.pt{position:relative;flex:0 0 calc((100% - 60px)/3);padding:0;border:1px solid rgba(19,33,80,.06);border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(19,33,80,.06),0 18px 40px -22px rgba(19,33,80,.35);transition:box-shadow .5s}
.pt:hover{box-shadow:0 2px 6px rgba(19,33,80,.08),0 34px 54px -24px rgba(19,33,80,.5)}
.pt span{display:block;aspect-ratio:16/11;background-size:cover;background-position:center;background-color:var(--navy-d);transition:transform 1.2s var(--ease)}
.pt:hover span{transform:scale(1.06)}
.pt::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.pt:hover::after{transform:scaleX(1)}
.pmiss{padding:30px 0}
@media (max-width:960px){.pt{flex-basis:calc((100% - 30px)/2)}}
@media (max-width:640px){.pthumbs{gap:14px}.pt{flex-basis:calc((100% - 14px)/2)}.pnav{width:44px;height:44px;font-size:18px}.pnav.prev{right:10px}.pnav.next{left:10px}#project-view{padding-top:120px}}
@media (prefers-reduced-motion:reduce){.pprog.run{animation:none;width:100%}}

/* ===== النسخة الإنجليزية (LTR): خطوط لاتينية وعكس الاتجاهات ===== */
html[lang=en]{--display:'Cormorant Garamond','Amiri',serif;--body:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif}
html[lang=en] body{letter-spacing:.005em;line-height:1.75}
html[lang=en] h2{font-weight:600;line-height:1.2}
html[lang=en] .pbody h3,html[lang=en] .mv h3,html[lang=en] .cap h3,html[lang=en] .v strong{font-weight:700;line-height:1.2}
html[lang=en] .pbody h3{font-size:clamp(26px,2.2vw,32px)}
html[lang=en] .v strong{font-size:clamp(26px,2.6vw,36px)}
html[lang=en] .brand{font-family:var(--display);font-weight:700}
html[dir=ltr] .menu a::after,html[dir=ltr] .tab::after,html[dir=ltr] .pt::after{transform-origin:left}
html[dir=ltr] .pcard .go::after,html[dir=ltr] .cap a::after{content:"→"}
html[dir=ltr] .pcard:hover .go::after{transform:translateX(6px)}
html[dir=ltr] .cap a:hover::after{transform:translateX(5px)}
html[dir=ltr] .pback::before{content:"←"}
html[dir=ltr] .pback:hover::before{transform:translateX(-5px)}
html[dir=ltr] .pnav.prev{right:auto;left:20px}
html[dir=ltr] .pnav.next{left:auto;right:20px}
html[dir=ltr] .pcount{inset:auto 24px 22px auto}
html[dir=ltr] .pprog{inset:auto auto 0 0}
html[dir=ltr] .pgrid .pbody,html[dir=ltr] .info div{text-align:left}
@media (max-width:640px){html[dir=ltr] .pnav.prev{left:10px}html[dir=ltr] .pnav.next{right:10px}}
@media (max-width:960px){.lang{display:inline-block!important;margin-inline-start:auto;padding:3px 12px;font-size:14px}.burger{margin-inline-start:14px}}
@media (max-width:640px){.pstage{aspect-ratio:4/3}}

/* English wordmark (SUDOM) in header + intro */
.en-mark{aspect-ratio:162/23!important;height:auto!important;width:150px!important}
.en-hero{aspect-ratio:162/23!important;width:min(84vw,860px)!important;position:relative;top:calc(-0.5*(min(94vw,1020px,(100svh - 340px)*2.46)/2.46 - min(84vw,860px)/7.04) - 9px)}
@media(max-width:640px){.en-mark{width:120px!important}}
html[lang=en] .hero-logo{clip-path:inset(0 100% 0 0)}