/* شركة أرض القدس */
:root{
  --lapis:#224C85;
  --lapis-deep:#072942;
  --turq:#8A6A1E;
  --gold:#C9A247;
  --gold-soft:#C9A247;
  --mist:#F3F6FA;
  --line:#DDE3EA;
  --ink:#16212C;
  --muted:#566472;
  --on-dark:#CBD6E1;
  --display:"Alexandria","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --shadow:0 18px 50px rgba(7,41,66,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 1.0625rem/1.85 var(--body)}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--turq);text-underline-offset:.2em}
a:hover{color:var(--lapis)}
:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.45;color:var(--lapis)}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem)}
h3{font-size:1.1875rem;font-weight:600}
p{margin:0 0 1em;max-width:68ch}
.wrap{width:min(100% - 2.5rem,75rem);margin-inline:auto}
.skip{position:absolute;inset-inline-start:1rem;top:-5rem;z-index:10;padding:.5rem 1rem;background:var(--gold-soft);color:var(--lapis-deep)}
.skip:focus{top:1rem}

/* الترويسة */
.site-header{background:var(--lapis-deep)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem;min-height:5rem}
.brand{display:flex;align-items:center;gap:.875rem;margin-inline-end:auto;color:#fff;text-decoration:none;font:700 1.0625rem/1.4 var(--display)}
.brand:hover{color:#fff}
.brand img{width:3.25rem;height:3.25rem}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
.nav a{position:relative;padding:.5rem 0;color:var(--on-dark);text-decoration:none;font-weight:500}
.nav a:hover{color:#fff}
.nav a[aria-current=page]{color:#fff}
.nav a[aria-current=page]::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--gold-soft)}
.menu-btn{display:none;flex:none;padding:.375rem 1rem;border:1px solid rgba(255,255,255,.45);border-radius:2px;background:none;color:#fff;font:inherit;cursor:pointer}
@media (max-width:47.99rem){
  .bar{gap:.5rem 1rem;min-height:4.25rem}
  .brand{flex:1;min-width:0;gap:.625rem;font-size:.9375rem}
  .brand img{width:2.75rem;height:2.75rem}
  .js .menu-btn{display:block}
  .nav{flex-direction:column;gap:0;width:100%;padding-bottom:1rem}
  .js .nav{display:none}
  .js .nav.open{display:flex}
  .nav a{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav a[aria-current=page]::after{display:none}
}

/* الأزرار والروابط */
.btn{display:inline-block;padding:.8125rem 1.75rem;border:1px solid transparent;border-radius:2px;font:600 1rem/1.4 var(--body);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold-soft);color:var(--lapis-deep)}
.btn-gold:hover{background:#fff;color:var(--lapis-deep)}
.btn-line{border-color:rgba(255,255,255,.6);color:#fff}
.btn-line:hover{background:#fff;color:var(--lapis-deep)}
.btn-lapis{background:var(--lapis);color:#fff}
.btn-lapis:hover{background:var(--turq);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.link{padding-bottom:.125rem;border-bottom:1px solid currentColor;font-weight:600;text-decoration:none}

/* الواجهة */
.hero{position:relative;display:flex;align-items:center;min-height:min(40rem,82vh);overflow:hidden;background:var(--lapis-deep)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(7,41,66,.95) 0%,rgba(7,41,66,.84) 42%,rgba(7,41,66,.3) 100%)}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(3.5rem,8vw,6rem) clamp(6.5rem,11vw,9rem)}
.hero-copy{max-width:41rem;padding-inline-start:1.5rem;border-inline-start:3px solid var(--gold-soft)}
.hero h1{color:#fff;font-size:clamp(1.875rem,1.2rem + 3.2vw,3.375rem);line-height:1.4}
.hero .lead{margin:1.25rem 0 0;color:var(--on-dark);font-size:1.125rem}
@media (max-width:47.99rem){.hero::after{background:rgba(7,41,66,.86)}}

/* الأرقام */
.stats{position:relative;z-index:2;margin-top:-3.75rem}
.stats dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:3px solid var(--gold);background:#fff;box-shadow:var(--shadow)}
.stats dl>div{display:flex;flex-direction:column-reverse;padding:1.75rem 2rem;border-inline-start:1px solid var(--line)}
.stats dl>div:first-child{border-inline-start:0}
.stats dt{color:var(--muted);font-size:.9375rem}
.stats dd{margin:0;color:var(--lapis);font:700 2.25rem/1.35 var(--display)}
@media (max-width:47.99rem){
  .stats dl{grid-template-columns:1fr}
  .stats dl>div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-inline-start:0;border-top:1px solid var(--line)}
  .stats dl>div:first-child{border-top:0}
  .stats dd{font-size:1.5rem}
}

/* الأقسام */
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-alt{background:var(--mist)}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:2.75rem}
.head p{margin:.5rem 0 0;color:var(--muted)}
.split{display:grid;gap:1.5rem 4rem}
@media (min-width:56rem){.split{grid-template-columns:4fr 7fr}}

/* مشاريع مختارة */
.feature{display:grid;gap:1.75rem 3.5rem;align-items:center;padding-block:3rem;border-top:1px solid var(--line)}
.feature:first-of-type{padding-top:0;border-top:0}
.feature:last-of-type{padding-bottom:0}
.feature-img img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--mist)}
.feature h3{font-size:1.5rem;font-weight:700}
.feature .client{margin:.25rem 0 1rem;color:var(--turq);font-size:.9375rem;font-weight:500}
@media (min-width:56rem){
  .feature{grid-template-columns:6fr 5fr}
  .feature:nth-of-type(even){grid-template-columns:5fr 6fr}
  .feature:nth-of-type(even) .feature-img{order:2}
}
.spec{margin:1.25rem 0 1.5rem;border-top:1px solid var(--lapis)}
.spec div{display:flex;justify-content:space-between;gap:1rem;padding:.625rem 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--muted)}
.spec dd{margin:0;color:var(--lapis);font-weight:600;text-align:end}

/* القطاعات */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:0;padding:0;list-style:none}
.tile a{position:relative;display:block;overflow:hidden;background:var(--lapis-deep);color:#fff;text-decoration:none}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.tile a:hover img{transform:scale(1.04)}
.tile a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,41,66,.94) 0%,rgba(7,41,66,.2) 55%,rgba(7,41,66,0) 100%)}
.tile div{position:absolute;inset:auto 0 0;z-index:1;padding:1.25rem}
.tile h3{color:#fff;font-size:1.0625rem}
.tile span{color:var(--on-dark);font-size:.875rem}
@media (max-width:61.99rem){.tiles{grid-template-columns:repeat(2,1fr)}}

/* الخدمات */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem;margin:0;padding:0;list-style:none}
.services li{padding-top:1.25rem;border-top:2px solid var(--lapis)}
.services h3{margin-bottom:.5rem}
.services p{margin:0;color:var(--muted)}
.service{display:grid;gap:.5rem 4rem;padding-block:2.25rem;border-top:1px solid var(--line)}
.service:first-of-type{padding-top:0;border-top:0}
.service:last-of-type{padding-bottom:0}
.service p{margin:0}
@media (min-width:56rem){.service{grid-template-columns:4fr 7fr}}

/* شريط الدعوة */
.cta{padding-block:clamp(3rem,6vw,4.5rem);background:var(--lapis)}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.cta h2{color:#fff}
.cta p{margin:.5rem 0 0;color:var(--on-dark)}

/* رأس الصفحات الداخلية */
.page-head{background:var(--lapis)}
.page-head .wrap{padding-block:clamp(2.5rem,6vw,4.25rem)}
.crumbs{margin:0 0 .75rem;color:var(--on-dark);font-size:.875rem}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:#fff}
.page-head h1{color:#fff;font-size:clamp(1.875rem,1.4rem + 2.4vw,2.875rem)}
.page-head .lead{margin:.75rem 0 0;color:var(--on-dark);font-size:1.125rem}

/* المشاريع */
.tabs{display:flex;flex-wrap:wrap;gap:0 1.75rem;margin-bottom:2.5rem;border-bottom:1px solid var(--line)}
.tabs button{margin-bottom:-1px;padding:.75rem 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:500 1rem/1.5 var(--body);cursor:pointer}
.tabs button:hover{color:var(--lapis)}
.tabs button[aria-pressed=true]{border-bottom-color:var(--gold);color:var(--lapis);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:2.5rem 1.75rem;margin:0;padding:0;list-style:none}
.card{position:relative}
.card-img{position:relative;overflow:hidden;background:var(--mist)}
.card-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.04)}
.card-img.empty{display:grid;place-items:center;aspect-ratio:4/3;background:var(--lapis)}
.card-img.empty img{width:5rem;aspect-ratio:1;opacity:.45;transform:none}
.badge{position:absolute;inset-block-end:.75rem;inset-inline-start:.75rem;padding:.125rem .625rem;background:rgba(7,41,66,.86);color:#fff;font-size:.8125rem}
.card h3{margin-top:.875rem;color:var(--lapis);font:600 1.0625rem/1.6 var(--body)}
.card h3 button{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.card h3 button::after{content:"";position:absolute;inset:0}
.card h3 button:focus-visible{outline:0}
.card:focus-within .card-img{outline:3px solid var(--gold-soft);outline-offset:3px}
.card:hover h3 button{color:var(--turq)}
.card .cat{margin:.125rem 0 0;color:var(--muted);font-size:.875rem}
.card .note{margin:.375rem 0 0;color:var(--muted);font-size:.9375rem}
@media (prefers-reduced-motion:reduce){.tile img,.card-img img{transition:none}}

/* معرض الصور */
.lb{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#071A2B;color:#fff}
.lb[open]{display:flex;flex-direction:column}
.lb::backdrop{background:#071A2B}
.lb-top{display:flex;align-items:start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem}
.lb-top h2{color:#fff;font-size:1.1875rem}
.lb-top p{max-width:none;margin:.125rem 0 0;color:var(--on-dark);font-size:.875rem}
.lb-close,.lb-nav{flex:none;display:grid;place-items:center;width:2.875rem;height:2.875rem;padding:0;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:1.125rem;cursor:pointer}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.14)}
.lb-stage{position:relative;display:flex;flex:1;align-items:center;gap:.75rem;min-height:0;padding-inline:1.25rem}
.lb-stage img{flex:1;min-width:0;height:100%;object-fit:contain;transition:opacity .2s}
.lb-stage img.loading{opacity:.3}
.lb-nav::before{content:"";width:.7rem;height:.7rem;border-top:2px solid}
.lb-prev::before{margin-right:.3rem;border-right:2px solid;transform:rotate(45deg)}
.lb-next::before{margin-left:.3rem;border-left:2px solid;transform:rotate(-45deg)}
.lb-count{max-width:none;margin:0;padding:.625rem;color:var(--on-dark);font-size:.875rem;text-align:center}
.lb-thumbs{display:flex;gap:.5rem;padding:0 1.25rem 1rem;overflow-x:auto}
.lb-thumbs button{flex:none;width:4.5rem;height:3.375rem;padding:0;border:2px solid transparent;background:var(--lapis-deep);opacity:.55;cursor:pointer}
.lb-thumbs button:hover{opacity:.85}
.lb-thumbs button[aria-current=true]{border-color:var(--gold-soft);opacity:1}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
@media (max-width:47.99rem){
  .lb-stage{padding-inline:0}
  .lb-nav{position:absolute;top:50%;z-index:1;margin-top:-1.4375rem;background:rgba(7,26,43,.6)}
  .lb-prev{right:.5rem}
  .lb-next{left:.5rem}
}

/* من نحن */
.timeline{display:grid;gap:2rem;margin:0;padding:0;list-style:none}
@media (min-width:56rem){.timeline{grid-template-columns:repeat(3,1fr)}}
.timeline li{padding-top:1.25rem;border-top:2px solid var(--lapis)}
.timeline time{display:block;color:var(--lapis);font:700 2rem/1.35 var(--display)}
.timeline p{margin:.5rem 0 0}

/* اتصل بنا */
.contact{display:grid;gap:3rem}
@media (min-width:56rem){.contact{grid-template-columns:5fr 6fr}}
.details{margin:1.5rem 0 0}
.details dt{margin-top:1.25rem;color:var(--muted);font-size:.9375rem}
.details dd{margin:0;font-weight:500}
.map{display:block;width:100%;aspect-ratio:16/10;margin-top:1.5rem;border:0;background:var(--mist)}
.form{margin-top:1.5rem}
.field{margin-bottom:1.25rem}
.field label{display:block;margin-bottom:.375rem;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:.75rem .875rem;border:1px solid #8A96A3;border-radius:2px;background:#fff;color:var(--ink);font:inherit}
.field textarea{min-height:9rem;resize:vertical}
.hint{margin:.75rem 0 0;color:var(--muted);font-size:.9375rem}

/* التذييل */
.site-footer{border-top:3px solid var(--gold);background:var(--lapis-deep);color:var(--on-dark)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--gold-soft)}
.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2.5rem;padding-block:3.5rem 2.5rem}
.foot p{margin:0}
.foot-name{margin-bottom:.5rem;color:#fff;font:700 1.0625rem/1.5 var(--display)}
.foot nav{display:grid;gap:.375rem;align-content:start;justify-items:start}
.foot address{font-style:normal}
.foot-legal{padding-block:1.125rem;border-top:1px solid rgba(255,255,255,.14);font-size:.875rem}
.foot-legal p{margin:0}

/* تبديل اللغة والصفحات الإنجليزية */
.lang{order:3;padding:.3125rem .875rem;border:1px solid rgba(255,255,255,.45);border-radius:2px;color:#fff;font:500 .875rem/1.5 var(--body);text-decoration:none}
.lang:hover{background:#fff;color:var(--lapis-deep)}
[lang=en] body{line-height:1.7}
[lang=en] h1,[lang=en] h2,[lang=en] h3{line-height:1.25}
[dir=ltr] .hero::after{background:linear-gradient(to right,rgba(7,41,66,.95) 0%,rgba(7,41,66,.84) 42%,rgba(7,41,66,.3) 100%)}
[dir=ltr] .lb-prev::before{margin-right:0;margin-left:.3rem;border-right:0;border-left:2px solid;transform:rotate(-45deg)}
[dir=ltr] .lb-next::before{margin-right:.3rem;margin-left:0;border-right:2px solid;border-left:0;transform:rotate(45deg)}
@media (max-width:47.99rem){
  .bar{gap:.5rem .625rem}
  .brand{font-size:.875rem}
  .lang{order:0;padding:.25rem .625rem}
  .menu-btn{padding:.3125rem .75rem}
  .nav{order:4}
  .hero::after,[dir=ltr] .hero::after{background:linear-gradient(to top,rgba(7,41,66,.97) 30%,rgba(7,41,66,.72) 100%)}
  [dir=ltr] .lb-prev{right:auto;left:.5rem}
  [dir=ltr] .lb-next{right:.5rem;left:auto}
}

/* القائمة الفرعية، شرائح الواجهة، صفحات المشاريع */
.has-sub{position:relative}
.has-sub>a{display:block}
.sub{display:none;position:absolute;z-index:5;inset-block-start:100%;inset-inline-start:-1rem;min-width:15rem;padding:.5rem 0;background:#fff;box-shadow:var(--shadow)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.nav .sub a{display:block;padding:.5rem 1rem;color:var(--ink);font-weight:400}
.nav .sub a:hover{background:var(--mist);color:var(--lapis)}
.slides{position:absolute;inset:0}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.slides img.on{opacity:1}
.slide-cap{position:absolute;z-index:1;inset-block-end:4.75rem;inset-inline-end:1.25rem;max-width:none;margin:0;padding:.25rem .75rem;background:rgba(7,41,66,.72);color:#fff;font-size:.8125rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card>a{display:block;color:inherit;text-decoration:none}
.card>a:hover h3{color:var(--turq)}
.card:focus-within .card-img{outline:0}
.card>a:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
.feature h2{margin-bottom:1rem}
.project-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--mist)}
.project-body{display:grid;gap:2.5rem 4rem}
.project-cover+.project-body{margin-top:3rem}
.project-body h2{margin-bottom:1rem}
.project-body h3{margin:2rem 0 .5rem;font-size:1.25rem}
.project-body ul{margin:0;padding-inline-start:1.25rem}
.project-body li{margin-bottom:.5rem}
.project-body .spec{margin-top:0}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.shots button{display:block;width:100%;padding:0;border:0;background:var(--line);overflow:hidden;cursor:zoom-in}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.shots button:hover img{transform:scale(1.05)}
.video{display:block;width:100%;max-height:80vh;background:#000}
.map-wide{height:26rem;margin-top:0;aspect-ratio:auto}
.foot .foot-h{margin-bottom:.5rem;color:#fff;font-weight:600}
@media (min-width:56rem){.project-body{grid-template-columns:7fr 4fr;align-items:start}}
@media (max-width:61.99rem){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:47.99rem){
  .sub{display:block;position:static;min-width:0;padding:.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.14);background:none;box-shadow:none}
  .nav .sub a{padding:.5rem 0;border-bottom:0;color:var(--on-dark);font-size:.9375rem}
  .nav .sub a:hover{background:none;color:#fff}
  .slide-cap{inset-block-end:auto;inset-block-start:.75rem}
  .shots{grid-template-columns:repeat(2,1fr);gap:.5rem}
}
@media (max-width:35.99rem){.grid-4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.slides img,.shots img{transition:none}}

/* رأس أبيض بشعار أزرق */
.site-header{border-bottom:1px solid var(--line);background:#fff}
.brand,.brand:hover{color:var(--lapis)}
.brand svg{flex:none;width:3.25rem;height:3.25rem}
.nav>a,.has-sub>a{color:#33455E}
.nav>a:hover,.has-sub>a:hover,.nav>a[aria-current=page],.has-sub>a[aria-current=page]{color:var(--lapis)}
.lang,.menu-btn{border-color:var(--lapis);color:var(--lapis)}
.lang:hover{background:var(--lapis);color:#fff}
.hero::after{background:linear-gradient(to left,rgba(7,41,66,.86) 0%,rgba(7,41,66,.62) 42%,rgba(7,41,66,.06) 100%)}
[dir=ltr] .hero::after{background:linear-gradient(to right,rgba(7,41,66,.86) 0%,rgba(7,41,66,.62) 42%,rgba(7,41,66,.06) 100%)}

/* بطاقات المشاريع: صورة بألوانها الحقيقية وزاويتان مقطوعتان بميل معيّن الشعار، وإطار ذهبي عند المرور */
.ptiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin:0;padding:0;list-style:none}
.ptile{display:grid}
.ptile>a{position:relative;display:grid;padding:.3125rem;color:#fff;text-decoration:none;clip-path:polygon(0 0,calc(100% - 1.75rem) 0,100% 1.75rem,100% 100%,1.75rem 100%,0 calc(100% - 1.75rem));transition:background-color .3s ease}
.ptile .card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mist);isolation:isolate;clip-path:polygon(0 0,calc(100% - 1.5625rem) 0,100% 1.5625rem,100% 100%,1.5625rem 100%,0 calc(100% - 1.5625rem))}
[dir=ltr] .ptile>a{clip-path:polygon(1.75rem 0,100% 0,100% calc(100% - 1.75rem),calc(100% - 1.75rem) 100%,0 100%,0 1.75rem)}
[dir=ltr] .ptile .card-img{clip-path:polygon(1.5625rem 0,100% 0,100% calc(100% - 1.5625rem),calc(100% - 1.5625rem) 100%,0 100%,0 1.5625rem)}
.ptile .card-img img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform .7s ease}
.ptile .card-img::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(7,41,66,.82) 0%,rgba(7,41,66,.4) 28%,rgba(7,41,66,0) 55%)}
.ptile-cap{position:absolute;z-index:3;inset:auto .3125rem .3125rem;padding:1rem 1.125rem 1.25rem}
.ptile-cap::before{content:"";display:block;width:1.75rem;height:3px;margin-bottom:.75rem;background:var(--gold);transition:width .4s ease}
.ptile h3{margin:0;color:#fff;font:600 1.0625rem/1.5 var(--body)}
.ptile .cat{margin:.25rem 0 0;color:#E3E9F0;font-size:.8125rem}
.ptile .note{margin:.625rem 0 0;color:#E3E9F0;font-size:.9375rem}
.ptile-tag{position:absolute;z-index:3;inset-block-start:1.1875rem;inset-inline-end:1.1875rem;padding:.0625rem .5rem;background:#fff;color:var(--lapis-deep);font-size:.75rem}
.ptile>a:hover,.ptile>a:focus-visible{outline:0;background:var(--gold)}
.ptile>a:hover h3,.ptile>a:focus-visible h3{color:#fff}
.ptile>a:hover .card-img img,.ptile>a:focus-visible .card-img img{transform:scale(1.04)}
.ptile>a:hover .ptile-cap::before,.ptile>a:focus-visible .ptile-cap::before{width:3.5rem}
.ptile .card-img.empty{display:block;aspect-ratio:4/5;background:var(--lapis-deep) url(mark.svg) center 36%/4.5rem no-repeat}
.ptile .card-img.empty::after{display:none}
.ptile .card-img.empty img{display:none}
.ptiles-bento .ptile-lg{grid-column:span 2;grid-row:span 2}
.ptile-lg .card-img{aspect-ratio:auto}
.ptile-lg .ptile-cap{max-width:36rem;padding:1.5rem 1.75rem 1.75rem}
.ptile-lg h3{font:700 1.625rem/1.45 var(--display)}
.ptile-lg .cat{font-size:.9375rem}
@media (max-width:61.99rem){
  .ptiles{grid-template-columns:repeat(2,1fr)}
  .ptiles-many{grid-template-columns:repeat(3,1fr)}
  .ptiles-bento .ptile-lg{grid-row:auto}
  .ptile-lg .card-img{aspect-ratio:16/10}
}
@media (max-width:47.99rem){
  .brand svg{width:2.75rem;height:2.75rem}
  .nav a{border-bottom-color:var(--line)}
  .nav .sub{border-bottom-color:var(--line)}
  .nav .sub a{color:#33455E}
  .nav .sub a:hover{color:var(--lapis)}
  .hero::after,[dir=ltr] .hero::after{background:rgba(7,41,66,.7)}
  .ptiles,.ptiles-many{grid-template-columns:repeat(2,1fr);gap:.875rem}
  .ptile>a{padding:.25rem;clip-path:polygon(0 0,calc(100% - 1.25rem) 0,100% 1.25rem,100% 100%,1.25rem 100%,0 calc(100% - 1.25rem))}
  .ptile .card-img{clip-path:polygon(0 0,calc(100% - 1.125rem) 0,100% 1.125rem,100% 100%,1.125rem 100%,0 calc(100% - 1.125rem))}
  [dir=ltr] .ptile>a{clip-path:polygon(1.25rem 0,100% 0,100% calc(100% - 1.25rem),calc(100% - 1.25rem) 100%,0 100%,0 1.25rem)}
  [dir=ltr] .ptile .card-img{clip-path:polygon(1.125rem 0,100% 0,100% calc(100% - 1.125rem),calc(100% - 1.125rem) 100%,0 100%,0 1.125rem)}
  .ptile-cap{inset:auto .25rem .25rem;padding:.75rem .75rem .875rem}
  .ptile-cap::before{width:1.25rem;margin-bottom:.5rem}
  .ptile h3{font-size:.875rem;line-height:1.45}
  .ptile .cat{font-size:.75rem}
  .ptile-tag{inset-block-start:.75rem;inset-inline-end:.75rem;font-size:.6875rem}
  .ptile-lg .card-img{aspect-ratio:4/3}
  .ptile-lg .ptile-cap{padding:1rem 1rem 1.125rem}
  .ptile-lg h3{font-size:1.1875rem}
  .ptile-lg .cat{font-size:.8125rem}
  .ptile-lg .note{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){.ptile>a,.ptile .card-img img,.ptile-cap::before{transition:none}}

/* تطعيمات ذهبية بدرجة الذهبي نفسها (#C9A247 في الخطوط المائلة لأنها صورة مضمّنة) */
body{border-top:3px solid var(--gold)}
.section h2::after{content:"";display:block;width:2.75rem;height:3px;margin-top:.75rem;background:var(--gold)}
.page-head,.cta{position:relative;overflow:hidden}
.page-head .wrap,.cta .wrap{position:relative;z-index:1}
.page-head::before,.page-head::after,.cta::before,.cta::after{content:"";position:absolute;width:6.5rem;height:6.5rem;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M34 0L100 66' stroke='%23C9A247' stroke-width='3'/%3E%3Cpath d='M56 0L100 44' stroke='%23C9A247' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.page-head::before,.cta::before{inset-block-start:0;inset-inline-start:0}
.page-head::after,.cta::after{inset-block-end:0;inset-inline-end:0;transform:rotate(180deg)}
[dir=ltr] .page-head::before,[dir=ltr] .cta::before{transform:scaleX(-1)}
[dir=ltr] .page-head::after,[dir=ltr] .cta::after{transform:scaleY(-1)}
.feature-img,.project-cover{position:relative}
.feature-img::before,.project-cover::before{content:"";position:absolute;inset-block-end:-.625rem;inset-inline-start:-.625rem;width:4.5rem;height:4.5rem;border-block-end:3px solid var(--gold);border-inline-start:3px solid var(--gold);pointer-events:none}
.services li,.timeline li{border-top-color:var(--gold)}
.spec{border-top:2px solid var(--gold)}
@media (max-width:47.99rem){
  .page-head::before,.page-head::after,.cta::before,.cta::after{width:3rem;height:3rem}
  .feature-img::before,.project-cover::before{width:3rem;height:3rem}
}

/* شريط الأرقام: رقمان */
.stats dl{grid-template-columns:repeat(2,1fr)}
@media (max-width:47.99rem){.stats dl{grid-template-columns:1fr}}

/* مشاريع قيد التنفيذ، وشريط الأرقام بثلاثة أرقام */
.stats dl{grid-template-columns:repeat(3,1fr)}
.ptile-wip{position:absolute;z-index:3;inset-block-start:1.1875rem;inset-inline-end:1.1875rem;padding:.0625rem .5rem;background:var(--gold);color:var(--lapis-deep);font-size:.75rem;font-weight:600}
.ptile-tag:not([hidden])+.ptile-wip{inset-block-start:3.125rem}
@media (max-width:47.99rem){
  .stats dl{grid-template-columns:1fr}
  .ptile-wip{inset-block-start:.75rem;inset-inline-end:.75rem;font-size:.6875rem}
  .ptile-tag:not([hidden])+.ptile-wip{inset-block-start:2.375rem}
}

/* مشاريع قيد التنفيذ في الصفحة الرئيسية: بطاقات بزاويتين مقطوعتين */
.wipc{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;margin:0;padding:0;list-style:none}
.wipc li{display:grid}
.wipc a{display:grid;padding:2px;background:var(--line);color:inherit;text-decoration:none;clip-path:polygon(0 0,calc(100% - 1.5rem) 0,100% 1.5rem,100% 100%,1.5rem 100%,0 calc(100% - 1.5rem));transition:background-color .3s ease}
.wipc a>div{display:flex;flex-direction:column;min-height:11.5rem;padding:1.625rem 1.25rem 1.375rem;background:var(--mist);clip-path:polygon(0 0,calc(100% - 1.4375rem) 0,100% 1.4375rem,100% 100%,1.4375rem 100%,0 calc(100% - 1.4375rem))}
[dir=ltr] .wipc a{clip-path:polygon(1.5rem 0,100% 0,100% calc(100% - 1.5rem),calc(100% - 1.5rem) 100%,0 100%,0 1.5rem)}
[dir=ltr] .wipc a>div{clip-path:polygon(1.4375rem 0,100% 0,100% calc(100% - 1.4375rem),calc(100% - 1.4375rem) 100%,0 100%,0 1.4375rem)}
.section-alt .wipc a>div{background:#fff}
.wipc a>div::before{content:"";flex:none;width:1.75rem;height:3px;margin-bottom:1.125rem;background:var(--gold);transition:width .4s ease}
.wipc h3{font:600 1.0625rem/1.6 var(--display)}
[lang=en] .wipc h3{line-height:1.4}
.wipc p{max-width:none;margin:auto 0 0;padding-top:1.25rem;color:var(--muted);font-size:.875rem}
.wipc a:hover,.wipc a:focus-visible{outline:0;background:var(--gold)}
.wipc a:hover>div::before,.wipc a:focus-visible>div::before{width:3.5rem}
@media (max-width:61.99rem){.wipc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:47.99rem){
  .wipc{grid-template-columns:1fr;gap:.75rem}
  .wipc a>div{min-height:0;padding:1.125rem 1.125rem 1rem}
  .wipc a>div::before{margin-bottom:.75rem}
  .wipc p{padding-top:.25rem}
}
@media (prefers-reduced-motion:reduce){.wipc a,.wipc a>div::before{transition:none}}

/* شريط الأرقام: أرقام أكبر تملأ الخانة، وحركة دخول مع عدّ تصاعدي */
.stats dl>div{align-items:center;padding:2rem 1.5rem;text-align:center}
.stats dt{color:#33455E;font-size:1.125rem;font-weight:500;line-height:1.5}
.stats dd{font-size:clamp(2.75rem,1.75rem + 2.4vw,3.75rem);line-height:1.2}
@media (min-width:62rem){
  .stats dl>div{flex-direction:row-reverse;justify-content:center;gap:1.25rem;padding-block:2.25rem;text-align:start}
  .stats dt{max-width:12.5rem;padding-inline-start:1.25rem;border-inline-start:2px solid var(--gold)}
}
@media (max-width:47.99rem){
  .stats dl>div{align-items:baseline;padding:1rem 1.25rem;text-align:start}
  .stats dt{font-size:1rem}
  .stats dd{font-size:2rem;text-align:end}
}
.js .stats dl>div{opacity:0}
.js .stats:not(.on) dl>div{animation:statsSafe 1ms 5s forwards}
.js .stats.on dl>div{animation:statsIn .7s cubic-bezier(.2,.7,.2,1) both}
.js .stats.on dl>div:nth-child(2){animation-delay:.14s}
.js .stats.on dl>div:nth-child(3){animation-delay:.28s}
@keyframes statsIn{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
@keyframes statsSafe{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .stats dl>div,.js .stats:not(.on) dl>div,.js .stats.on dl>div{opacity:1;animation:none}}

/* واجهة بخلفية فيديو، وعنوان يُكتب حرفاً حرفاً ويتبدّل، واسم المشروع يتبع المشهد */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-film{background-position:center;background-size:cover}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-video.on{opacity:1}
.hero-film::after{background:linear-gradient(to left,rgba(7,41,66,.88) 0%,rgba(7,41,66,.74) 38%,rgba(7,41,66,.42) 58%,rgba(7,41,66,.1) 80%,rgba(7,41,66,.05) 100%)}
[dir=ltr] .hero-film::after{background:linear-gradient(to right,rgba(7,41,66,.88) 0%,rgba(7,41,66,.74) 38%,rgba(7,41,66,.42) 58%,rgba(7,41,66,.1) 80%,rgba(7,41,66,.05) 100%)}
.hero h1.tw{font-size:clamp(2.25rem,1.3rem + 3.4vw,4rem);line-height:1.4}
[lang=en] .hero h1.tw{font-size:clamp(1.875rem,1.1rem + 2.6vw,3rem);line-height:1.25}
.tw-line{display:block;transition:opacity .45s ease}
.tw-caret{display:inline-block;width:.07em;height:.92em;margin-inline-start:.1em;vertical-align:-.13em;background:var(--gold)}
.js .tw-caret{animation:twBlink 1.06s step-end infinite}
.js .tw.typing .tw-caret{animation:none}
.tw-sub{max-width:34rem;margin:.5rem 0 0;color:#E3E9F0;font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem);line-height:1.8;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.js .tw-sub.off{opacity:0;transform:translateY(.75rem)}
.js .tw.out .tw-line,.js .tw-sub.out{opacity:0;transition:opacity .45s ease}
.slide-cap{transition:opacity .5s ease}
.slide-cap.off{opacity:0}
@keyframes twBlink{50%{opacity:0}}
@media (max-width:47.99rem){.hero-film::after,[dir=ltr] .hero-film::after{background:rgba(7,41,66,.72)}}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .js .tw-caret{animation:none}
  .tw-line,.tw-sub,.slide-cap{transition:none}
}

/* مسافة تحت شريط الأرقام قبل القسم الملوّن الذي يليه */
.stats{padding-bottom:clamp(2rem,4vw,3.25rem)}

/* ظهور متتابع: العناصر التي تحمل data-rv تدخل واحداً بعد الآخر عند وصولها إلى الشاشة.
   إن لم يعمل app.js يُظهرها rvSafe بعد أربع ثوانٍ فلا يبقى شيء مخفياً. */
.js [data-rv=""],.js [data-rv=row]>*{opacity:0;transform:translateY(1.25rem)}
.js [data-rv=row] .tags li{opacity:0;transform:translateY(.5rem)}
.js:not(.rv) [data-rv=""],.js:not(.rv) [data-rv=row]>*,.js:not(.rv) [data-rv=row] .tags li{animation:rvSafe 1ms 4s forwards}
.rv [data-rv=""].in,.rv [data-rv=row].in>*,.rv [data-rv=row].in .tags li{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv [data-rv=row].in>:nth-child(2){transition-delay:calc(var(--d,0s) + .1s)}
.rv [data-rv=row].in>:nth-child(3){transition-delay:calc(var(--d,0s) + .2s)}
.rv [data-rv=row].in .tags li{transition-delay:calc(var(--d,0s) + .45s)}
.rv [data-rv=row].in .tags li:nth-child(2){transition-delay:calc(var(--d,0s) + .52s)}
.rv [data-rv=row].in .tags li:nth-child(3){transition-delay:calc(var(--d,0s) + .59s)}
.rv [data-rv=row].in .tags li:nth-child(4){transition-delay:calc(var(--d,0s) + .66s)}
.rv [data-rv=row].in .tags li:nth-child(5){transition-delay:calc(var(--d,0s) + .73s)}
@keyframes rvSafe{to{opacity:1;transform:none}}

/* ترويسة الصفحات الداخلية تدخل عند فتح الصفحة */
.page-head .crumbs,.page-head h1,.page-head .lead{animation:headIn .7s cubic-bezier(.2,.7,.2,1) both}
.page-head h1{animation-delay:.08s}
.page-head .lead{animation-delay:.2s}
@keyframes headIn{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}

/* صفحة الخدمات: صفوف مرقّمة */
.svc{margin:0;padding:0;list-style:none}
.svc>li{position:relative;display:grid;gap:.75rem 2.5rem;padding-block:2.5rem}
.svc>li:last-child{padding-bottom:0}
.svc>li::before,.svc>li::after{content:"";position:absolute;top:0;inset-inline-start:0}
.svc>li::before{inset-inline-end:0;height:1px;background:var(--line)}
.svc>li::after{width:2.75rem;height:3px;background:var(--gold)}
.svc-n{color:var(--gold);font:700 1.125rem/1.6 var(--display);letter-spacing:.04em}
.svc h2{font-size:clamp(1.375rem,1.15rem + 1vw,1.75rem)}
.svc h2::after{display:none}
.svc-body p{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0;padding:0;list-style:none}
.tags li{padding:.1875rem .875rem;border:1px solid var(--line);background:var(--mist);color:var(--lapis);font-size:.875rem;font-weight:500}
@media (min-width:56rem){
  .svc>li{grid-template-columns:3.5rem minmax(0,4fr) minmax(0,7fr);align-items:start;padding-block:3rem}
  .svc-n{padding-top:.375rem}
}
.js .svc>li::before,.js .svc>li::after{transform:scaleX(0);transform-origin:right}
[dir=ltr].js .svc>li::before,[dir=ltr].js .svc>li::after{transform-origin:left}
.js:not(.rv) .svc>li::before,.js:not(.rv) .svc>li::after{animation:rvSafe 1ms 4s forwards}
.rv .svc>li.in::before{transform:none;transition:transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv .svc>li.in::after{transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .35s)}

/* صفحة من نحن */
.prose p{max-width:64ch}
.prose .big{max-width:36em;margin:0;color:var(--lapis-deep);font-size:clamp(1.1875rem,1.05rem + .7vw,1.5rem);font-weight:500;line-height:1.75}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:2.25rem 0 2.5rem;border-block:1px solid var(--line)}
.facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:1.25rem 1.5rem;border-inline-start:1px solid var(--line)}
.facts>div:first-child{padding-inline-start:0;border-inline-start:0}
.facts dt{color:var(--muted);font-size:.9375rem;line-height:1.6}
.facts dd{margin:0;color:var(--lapis);font:700 clamp(1.75rem,1.3rem + 1.6vw,2.5rem)/1.3 var(--display)}
.section-alt .services li{padding:1.5rem 1.5rem 1.75rem;border-top-width:3px;background:#fff}
@media (max-width:47.99rem){
  .facts>div{padding:1rem .75rem}
  .facts dt{font-size:.8125rem}
}

/* المحطات: خط يصل السنوات وعلامة عند كل محطة */
.timeline{position:relative;gap:2.5rem 2rem}
.timeline li{position:relative;padding-top:2.25rem;border-top:0}
.timeline::before,.timeline::after{content:"";position:absolute;top:.4375rem;inset-inline:0;height:2px;background:var(--line)}
.timeline::after{background:var(--gold)}
.timeline li::before{content:"";position:absolute;z-index:1;top:0;inset-inline-start:.1875rem;width:1rem;height:1rem;border:2px solid var(--gold);background:#fff;transform:rotate(45deg)}
.js .timeline[data-rv]::after{transform:scaleX(0);transform-origin:right}
[dir=ltr].js .timeline[data-rv]::after{transform-origin:left}
.js:not(.rv) .timeline[data-rv]::after{animation:rvSafe 1ms 4s forwards}
@media (max-width:55.99rem){
  .timeline{padding-inline-start:2.25rem}
  .timeline li{padding-top:0}
  .timeline::before,.timeline::after{top:.75rem;bottom:.5rem;inset-inline:.4375rem auto;width:2px;height:auto}
  .timeline li::before{top:.75rem;inset-inline-start:-2.25rem}
  .js .timeline[data-rv]::after,[dir=ltr].js .timeline[data-rv]::after{transform:scaleY(0);transform-origin:top}
}
.rv .timeline[data-rv].in::after,[dir=ltr].rv .timeline[data-rv].in::after{transform:none;transition:transform 1.5s cubic-bezier(.3,.6,.2,1) .2s}

/* الخط الذهبي تحت العنوان يمتد مع ظهوره */
.js h2[data-rv=""]::after,.js [data-rv=""] h2::after{width:0}
.js:not(.rv) h2[data-rv=""]::after,.js:not(.rv) [data-rv=""] h2::after{animation:rvRule 1ms 4s forwards}
.rv h2[data-rv=""].in::after,.rv [data-rv=""].in h2::after{width:2.75rem;transition:width .6s ease calc(var(--d,0s) + .3s)}
@keyframes rvRule{to{width:2.75rem}}

@media (prefers-reduced-motion:reduce){
  .js [data-rv=""],.js [data-rv=row]>*,.js [data-rv=row] .tags li{opacity:1;transform:none;animation:none;transition:none}
  .js .svc>li::before,.js .svc>li::after,.js .timeline[data-rv]::after{transform:none;animation:none;transition:none}
  .js h2[data-rv=""]::after,.js [data-rv=""] h2::after{width:2.75rem;animation:none;transition:none}
  .page-head .crumbs,.page-head h1,.page-head .lead{animation:none}
}
@media print{
  [data-rv],[data-rv]>*,.tags li{opacity:1!important;transform:none!important}
}

/* سطر صغير فوق العنوان */
.kicker{display:flex;align-items:center;gap:.75rem;max-width:none;margin:0 0 .75rem;color:var(--turq);font-size:.9375rem;font-weight:600;line-height:1.6}
.kicker::before{content:"";flex:none;width:2rem;height:2px;background:var(--gold)}
.kicker+h2::after{display:none}
.kicker-light{color:var(--gold)}
.hero .kicker{margin-bottom:.875rem;font-size:1rem}
.feature .kicker+h2{margin-bottom:1rem}

/* فيلم الواجهة: اسم المشهد ومعه رقم المشهد وزر الإيقاف */
.film-foot{position:absolute;z-index:1;inset-block-end:4.75rem;inset-inline-end:1.25rem;display:flex;align-items:stretch;gap:.375rem}
.film-foot .slide-cap{position:static}
.film-ctl{display:flex;gap:.375rem}
.film-ctl[hidden]{display:none}
.film-n{display:grid;place-items:center;padding-inline:.625rem;background:rgba(7,41,66,.72);color:#fff;font:600 .75rem/1 var(--display);direction:ltr}
.film-btn{display:grid;place-items:center;width:1.875rem;padding:0;border:0;background:var(--gold);color:var(--lapis-deep);cursor:pointer}
.film-btn span{width:.5625rem;height:.6875rem;border-inline:.1875rem solid currentColor}
.film-btn.paused span{width:0;height:0;border-block:.375rem solid transparent;border-inline:0;border-left:.5625rem solid currentColor}
.film-btn:hover{background:#fff}
@media (max-width:47.99rem){.film-foot{inset-block-end:auto;inset-block-start:.75rem}}

/* الخط الواصل: خط ذهبي واحد في هامشي الصفحة يرسمه التمرير، من هندسة الشعار (رأسي، مائل 45 درجة، أفقي).
   ينزل في هامش، ينعطف، يعبر حيث يلتقي قسمان، ويكمل في الهامش الآخر. يُبنى في app.js ويظهر حين يتّسع الهامش له. */
#main{position:relative}
.motif{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.motif[hidden]{display:none}
.motif svg{position:absolute;display:block;overflow:visible}
.m-track{fill:none;stroke:#D5DCE6;stroke-width:1}
.m-live{fill:none;stroke:var(--gold);stroke-width:1.75;transition:stroke-dashoffset .3s linear}
.m-node{fill:#fff;stroke:var(--gold);stroke-width:1.75}
.m-tip{fill:var(--gold);transition:transform .3s linear}
@media (prefers-reduced-motion:reduce){.m-live,.m-tip{transition:none}}
@media print{.motif{display:none}}
