/* ===================================================================
   QUALITY UNITED CONTRACTING CO. — Design System
   Tokens: Obsidian / Graphite / Gold-Bright / Gold-Core / Gold-Deep / Ivory
   =================================================================== */


:root{
  /* Brand colors — extracted directly from the QUC logo */
  --obsidian:#0a0a0a;
  --graphite:#141210;
  --graphite-2:#1c1916;
  --gold-bright:#f5d06c;
  --gold-core:#c9a227;
  --gold-deep:#8a6d1f;
  --ivory:#f3eee2;
  --ivory-dim:#cfc9ba;

  --gold-gradient:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold-core) 55%,var(--gold-deep) 100%);
  --gold-gradient-soft:linear-gradient(135deg, rgba(245,208,108,.16), rgba(201,162,39,.05));

  --font-display:'Tajawal', 'IBM Plex Sans', sans-serif;
  --font-body:'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;

  --container:1240px;
  --radius-sm:6px;
  --radius-md:14px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{height:100%;}
body{
  background:var(--obsidian);
  color:var(--ivory);
  font-family:var(--font-body);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit;}
section{position:relative;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.25;}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

::selection{background:var(--gold-core); color:var(--obsidian);}

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;
  inset-block-start:12px;
  inset-inline-start:12px;
  z-index:1000;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  background:var(--gold-bright);
  color:var(--obsidian);
  font-weight:800;
  transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

@media (prefers-reduced-motion: reduce){
  /* بوضع تقليل الحركة: كل شي ظاهر فورًا — لا انتظار لمراقبي السكرول */
  .reveal, .js .project-card, .card-hide{ opacity:1 !important; transform:none !important; }
  .project-img, .project-detail, .detail-strip > *{ transition: none !important; }
  /* خط البناء يظهر مرسومًا كاملًا فورًا بلا حركة */
  .bp-line{ stroke-dashoffset:0 !important; }
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Shared bits ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--gold-core);
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--gold-core);
}

.gold-text{
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(28px,4vw,44px);
  margin-top:14px;
  color:var(--ivory);
}
.section-head p{
  margin-top:14px;
  color:var(--ivory-dim);
  font-size:16.5px;
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 30px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  border-radius:999px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn-solid{
  background:var(--gold-gradient);
  color:var(--obsidian);
  box-shadow:0 8px 24px -8px rgba(201,162,39,.55);
}
.btn-solid:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -8px rgba(201,162,39,.7); }
.btn-outline{
  border:1px solid rgba(243,238,226,.28);
  color:var(--ivory);
}
.btn-outline:hover{ border-color:var(--gold-core); color:var(--gold-bright); transform:translateY(-3px); }
.btn-ghost{
  color:var(--gold-bright);
  padding:8px 0;
  font-size:14px;
  border-bottom:1px solid var(--gold-deep);
  border-radius:0;
}
.btn-ghost:hover{ color:var(--gold-bright); border-color:var(--gold-bright); gap:14px; }

/* reveal-on-scroll */
.reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(28px); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.1s; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }
.reveal-delay-4.in-view{ transition-delay:.4s; }

/* blueprint grid background texture */
.blueprint-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,162,39,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,.08) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);
  pointer-events:none;
}

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding-block:22px;
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding-block:12px;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(201,162,39,.18);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-link{ display:flex; align-items:center; }
.logo-img{ height:52px; width:auto; transition:height .4s var(--ease); }
.site-header.scrolled .logo-img{ height:42px; }

.main-nav{ display:flex; align-items:center; gap:24px; }
.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-links a{
  font-family:var(--font-display); font-weight:500; font-size:15px;
  color:var(--ivory-dim);
  position:relative;
  padding-block:4px;
  transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--gold-core);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--ivory); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.nav-link-active{ color:var(--gold-bright); }
.nav-links a.nav-link-active::after{ transform:scaleX(1); }

.nav-extra{ display:flex; align-items:center; gap:16px; }
.portal-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid rgba(201,162,39,.48);
  border-radius:999px;
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.portal-link::before{ content:'↗'; font-size:16px; line-height:1; }
.portal-link:hover:not([aria-disabled="true"]){
  transform:translateY(-2px);
  border-color:var(--gold-bright);
  background:rgba(201,162,39,.1);
}
.portal-link[aria-disabled="true"]{ cursor:not-allowed; opacity:.72; }
.portal-status{
  padding-inline:6px;
  padding-block:3px;
  border-radius:999px;
  background:rgba(201,162,39,.14);
  color:var(--ivory-dim);
  font-size:10px;
  font-weight:700;
}
.portal-link:not([aria-disabled="true"]) .portal-status{ display:none; }
.lang-toggle{
  border:1px solid rgba(243,238,226,.3);
  border-radius:999px;
  padding:8px 16px;
  font-family:var(--font-display);
  font-weight:700; font-size:13px;
  letter-spacing:.04em;
  transition:.3s;
}
.lang-toggle:hover{ border-color:var(--gold-core); color:var(--gold-bright); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:30px;
  z-index:110;
}
.nav-toggle span{ height:2px; width:100%; background:var(--ivory); transition:.35s var(--ease); }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:160px 100px;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:20px; }
.hero-title{
  font-size:clamp(38px,5.6vw,68px);
  letter-spacing:0;
}
.hero-title span{ display:block; }
.hero-sub{
  margin-top:26px;
  max-width:520px;
  font-size:17.5px;
  color:var(--ivory-dim);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }

.hero-stats{
  display:flex;
  gap:0;
  margin-top:64px;
  border-top:1px solid rgba(243,238,226,.14);
  padding-top:28px;
}
.stat{
  flex:1;
  padding-inline-end:24px;
  border-inline-start:1px solid rgba(243,238,226,.14);
  padding-inline-start:24px;
}
.stat:first-child{ border-inline-start:none; padding-inline-start:0; }
.stat-num{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(26px,3vw,38px);
  background:var(--gold-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ margin-top:6px; font-size:13.5px; color:var(--ivory-dim); }

.hero-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:520px;
}
.hero-visual .blueprint-bg{ -webkit-mask-image:none; mask-image:none; opacity:.5; }
.hero-icon-float{
  width:78%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-18px) }
}
.hero-ring{
  position:absolute; inset:6% ;
  border:1px solid rgba(201,162,39,.25);
  border-radius:50%;
}
.hero-ring.r2{ inset:16%; border-color:rgba(201,162,39,.14); }

.scroll-cue{
  position:absolute; bottom:34px; inset-inline-start:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ivory-dim);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:36px; background:linear-gradient(var(--gold-core), transparent); animation:scrollline 2.2s ease-in-out infinite; }
@keyframes scrollline{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ===================================================================
   ABOUT
   =================================================================== */
.about{ padding-block:130px; background:var(--graphite); }
.about-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:center;
}
.about-mark{
  position:relative;
  aspect-ratio:1/1.1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,162,39,.2);
  border-radius:var(--radius-md);
}
.about-mark img{ width:55%; opacity:.92; }
.about-text p{ font-size:17px; color:var(--ivory-dim); max-width:600px; }
.about-pills{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:34px;
}
.pill{
  border:1px solid rgba(201,162,39,.35);
  border-radius:999px;
  padding:9px 18px;
  font-size:13.5px;
  font-family:var(--font-display); font-weight:500;
  color:var(--gold-bright);
}

/* ===================================================================
   SERVICES (signature: blueprint tower)
   =================================================================== */
.services{ padding-block:130px; }
.services-grid{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:60px;
  align-items:start;
}
.service-list{ display:flex; flex-direction:column; gap:18px; position:relative; }

/* خط البناء المخطط (دمج نموذج ٢): خط ذهبي رفيع يُرسم بالسكرول ويصل أرقام
   الخدمات كأنه مخطط هندسي. الرسم فعلي من مواضع الأرقام عبر الجافاسكربت. */
.bp-rail{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0;
}
.bp-line{
  fill:none;
  stroke:var(--gold-core);
  stroke-width:1.5;
  opacity:.55;
  stroke-dasharray:1;
  stroke-dashoffset:1; /* يُحرّك 1→0 مع تقدّم السكرول */
}
.service-card{ z-index:1; } /* البطاقات فوق خط المخطط */
/* نبضة رقم الخدمة عند وصول الخط إليه (العقدة) */
@keyframes bpNodePulse{
  0%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
  40%{ box-shadow:0 0 0 5px rgba(245,208,108,.28); }
  100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
}
.service-index.bp-lit{
  color:var(--gold-bright);
  border-color:var(--gold-bright);
  background:rgba(201,162,39,.12);
  animation:bpNodePulse .9s var(--ease) 1;
}
.service-card{
  position:relative; overflow:hidden;
  display:flex; gap:22px;
  padding:28px;
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-md);
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
/* هوفر هادئ وموحد: خط ذهبي ينساب من جهة البداية + توهج حدود — بلا نطات
   (floor-active من مراقب السكرول ما عاد يغير شكل البطاقة — كل البطاقات بنفس اللون دائمًا) */
.service-card{ isolation:isolate; }
.service-card::after{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-core));
  transform:scaleY(0); transform-origin:top;
  transition:transform .45s cubic-bezier(.45,0,.55,1);
  z-index:-1;
}
.service-card:hover, .service-card.floor-hover{
  border-color:rgba(201,162,39,.55);
  background:rgba(201,162,39,.05);
  box-shadow:0 6px 26px rgba(0,0,0,.35);
}
.service-card:hover::after, .service-card.floor-hover::after{ transform:scaleY(1); }
.service-card:hover .service-index, .service-card.floor-hover .service-index{ color:var(--gold-bright); border-color:var(--gold-bright); }
.service-index{
  font-family:var(--font-display); font-weight:900; font-size:14px;
  color:var(--gold-core);
  width:38px; height:38px; flex:none;
  border:1px solid rgba(201,162,39,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.service-body h3{ font-size:19px; color:var(--ivory); }
.service-body p{ margin-top:8px; font-size:14.5px; color:var(--ivory-dim); }

.tower-wrap{
  position:sticky; top:130px;
  height:560px;
  display:flex; align-items:center; justify-content:center;
}
.tower-svg{ width:100%; height:100%; overflow:visible; }
.tower-floor rect{
  fill:transparent;
  stroke:var(--gold-deep);
  stroke-width:1.4;
  stroke-dasharray:460;
  stroke-dashoffset:460;
  transition:stroke-dashoffset 1.3s var(--ease), fill .9s var(--ease) .3s, stroke .6s;
}
.tower-floor .grid-line{
  stroke:rgba(201,162,39,.0);
  stroke-width:1;
  transition:stroke 1s var(--ease) .4s;
}
.tower-floor.active rect{
  stroke-dashoffset:0;
  stroke:var(--gold-bright);
  fill:rgba(201,162,39,.1);
}
.tower-floor.active .grid-line{ stroke:rgba(201,162,39,.35); }
.tower-floor{ cursor:pointer; }
.tower-floor:focus rect{ stroke:var(--gold-bright); stroke-width:2; }
.tower-ground{ stroke:rgba(243,238,226,.25); stroke-width:1; }

/* ===================================================================
   WHY US
   =================================================================== */
.why-us{ padding-block:130px; background:var(--graphite); }
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(243,238,226,.1);
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.why-item{
  background:var(--graphite);
  padding:38px 30px;
  transition:background .4s;
}
.why-item:hover{ background:var(--graphite-2); }
.why-icon{ width:34px; height:34px; color:var(--gold-core); margin-bottom:18px; }
.why-item h3{ font-size:17px; color:var(--ivory); }
.why-item p{ margin-top:10px; font-size:14px; color:var(--ivory-dim); }

/* ===================================================================
   CLIENTS + PROCESS
   =================================================================== */
.clients-band{ padding-block:110px; background:var(--obsidian); border-block:1px solid rgba(201,162,39,.12); }
.clients-inner{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  gap:42px;
  align-items:center;
}
.clients-inner h2{ margin-top:14px; font-size:clamp(26px,3.4vw,40px); }
.client-logo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.client-logo-grid img{
  width:100%;
  aspect-ratio:13/9;
  object-fit:contain;
  padding:14px;
  border:1px solid rgba(243,238,226,.12);
  border-radius:var(--radius-sm);
  background:#f6f4ef;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.client-logo-grid img:hover{ transform:translateY(-2px); border-color:rgba(245,208,108,.5); }

.process{ padding-block:130px; }
.design-process{
  margin-bottom:42px;
  padding:clamp(24px,4vw,42px);
  border:1px solid rgba(201,162,39,.22);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(201,162,39,.08), rgba(243,238,226,.02));
}
.design-process[hidden]{ display:none; }
.design-process-head{ max-width:720px; margin-bottom:28px; }
.design-process-head h2{ margin-top:12px; font-size:clamp(24px,3vw,36px); }
.design-process-head p{ margin-top:10px; color:var(--ivory-dim); }
.process-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:18px;
  counter-reset:step;
  /* it's an <ol>: kill the browser's own numbering — the gold circle
     markers already carry the step numbers (owner note موقع-4) */
  list-style:none;
  margin:0;
  padding:0;
}
.process-timeline::before{
  content:"";
  position:absolute;
  inset-inline:28px;
  inset-block-start:28px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,208,108,.7), transparent);
}
.process-step{ position:relative; min-width:0; }
.process-marker{
  position:relative;
  z-index:1;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border:1px solid rgba(245,208,108,.55);
  border-radius:50%;
  background:var(--graphite);
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:900;
}
.process-card{
  min-height:250px;
  padding:22px;
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(243,238,226,.035), rgba(243,238,226,.015));
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.process-step:hover .process-card{ transform:translateY(-3px); border-color:rgba(245,208,108,.38); background:rgba(201,162,39,.06); }
.process-owner{
  display:inline-flex;
  margin-bottom:14px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(201,162,39,.12);
  color:var(--gold-bright);
  font-size:11px;
  font-weight:800;
}
.process-owner.client{ background:rgba(243,238,226,.1); color:var(--ivory-dim); }
.process-step h3{ font-size:17px; color:var(--ivory); }
.process-step p{ margin-top:10px; font-size:13.5px; color:var(--ivory-dim); }
.process-timeline--compact{ grid-template-columns:repeat(5,minmax(0,1fr)); }

/* ===================================================================
   PROJECTS PREVIEW
   =================================================================== */
.projects-preview{ padding-block:130px; background:var(--graphite); }
.pp-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  margin-bottom:50px;
}
.pp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.pp-card{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(243,238,226,.1);
  background:var(--obsidian);
}
.pp-card .blueprint-bg{ -webkit-mask-image:none; mask-image:none; opacity:.7; }
.pp-card-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px;
  background:linear-gradient(to top, rgba(0,0,0,.75) 10%, transparent 60%);
}
.pp-tag{
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:var(--gold-bright); letter-spacing:.06em;
  margin-bottom:6px;
}
.pp-card-inner h4{ font-size:16px; color:var(--ivory); font-family:var(--font-display); font-weight:700; }
.pp-icon{ position:absolute; top:20px; inset-inline-end:20px; width:30px; height:30px; opacity:.5; }

/* ===================================================================
   CTA BAND
   =================================================================== */
.cta-band{
  padding-block:110px;
  position:relative;
  text-align:center;
  overflow:hidden;
}
.cta-band h2{ font-size:clamp(28px,4.4vw,46px); }
.cta-band p{ margin-top:16px; color:var(--ivory-dim); font-size:16.5px; }
.cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:38px; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:var(--graphite); padding-block:80px 30px; border-top:1px solid rgba(201,162,39,.14); }
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:50px;
  padding-bottom:50px;
}
.footer-brand img{ height:50px; }
.footer-brand p{ margin-top:18px; font-size:14.5px; color:var(--ivory-dim); max-width:300px; }
.footer-social{ display:flex; gap:12px; margin-top:24px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(243,238,226,.2);
  display:flex; align-items:center; justify-content:center;
  transition:.3s;
}
.footer-social a:hover{ border-color:var(--gold-core); color:var(--gold-bright); }
.footer-col h4{ font-family:var(--font-display); font-size:14px; color:var(--gold-bright); letter-spacing:.04em; margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:14.5px; color:var(--ivory-dim); transition:.3s; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-col .footer-portal-link{ color:var(--gold-bright); }
.footer-col .footer-portal-link[aria-disabled="true"]{ color:var(--ivory-dim); cursor:not-allowed; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-top:28px; border-top:1px solid rgba(243,238,226,.1);
  font-size:13px; color:var(--ivory-dim);
}

.whatsapp-float{
  position:fixed;
  inset-inline-end:22px;
  inset-block-end:max(22px, env(safe-area-inset-bottom));
  z-index:90;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-inline:18px;
  border:1px solid rgba(201,162,39,.62);
  border-radius:999px;
  background:rgba(20,18,16,.92);
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;   /* «واتساب 24/7» أطول من «واتساب» — لا يُلتف لسطرين */
  backdrop-filter:blur(12px);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.whatsapp-float:hover{ transform:translateY(-2px); border-color:var(--gold-bright); background:var(--graphite-2); }

/* ===================================================================
   ADMIN SHELL
   =================================================================== */
.admin-page{
  min-height:100%;
  background:var(--obsidian);
}
.admin-shell-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 24px;
  border-bottom:1px solid rgba(201,162,39,.18);
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(14px);
}
.admin-brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--ivory);
  font-family:var(--font-display);
  font-weight:800;
}
.admin-brand img{ width:auto; height:42px; }
.admin-header-actions{ display:flex; align-items:center; gap:12px; }
.admin-api-status{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 12px;
  border:1px solid rgba(245,208,108,.32);
  border-radius:999px;
  color:var(--gold-bright);
  font-size:12px;
  font-weight:800;
}
.admin-api-status.is-ready{ color:#bfe8c8; border-color:rgba(191,232,200,.45); }
.admin-shell{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  min-height:calc(100vh - 74px);
}
.admin-sidebar{
  padding:22px;
  border-inline-end:1px solid rgba(243,238,226,.08);
  background:var(--graphite);
}
.admin-tab{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:var(--ivory-dim);
  font-weight:800;
  text-align:start;
}
.admin-tab:hover{ color:var(--ivory); background:rgba(243,238,226,.04); }
.admin-tab.active{ border-color:rgba(245,208,108,.38); color:var(--gold-bright); background:rgba(201,162,39,.08); }
.admin-content{
  padding:clamp(24px,4vw,52px);
  min-width:0;
  overflow:auto;
}
.admin-panel{ max-width:1120px; }
.admin-panel-head{ margin-bottom:26px; }
.admin-panel-head h1{ margin-top:12px; font-size:clamp(26px,3vw,40px); }
.admin-toast{
  position:sticky;
  top:16px;
  z-index:2;
  width:max-content;
  max-width:100%;
  margin-bottom:14px;
  padding:10px 14px;
  border:1px solid rgba(245,208,108,.4);
  border-radius:999px;
  background:rgba(10,10,10,.9);
  color:var(--gold-bright);
  font-size:13px;
  font-weight:800;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.admin-toast.show{ opacity:1; transform:translateY(0); }
.admin-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}
.admin-metrics div,
.admin-note,
.admin-role-grid article{
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-sm);
  background:rgba(243,238,226,.035);
  padding:22px;
}
.admin-metrics strong{ display:block; color:var(--gold-bright); font-family:var(--font-display); font-size:32px; line-height:1; }
.admin-metrics span{ display:block; margin-top:8px; color:var(--ivory-dim); font-size:13px; }
.admin-note h2,
.admin-role-grid h2{ font-size:18px; }
.admin-note p,
.admin-role-grid p{ margin-top:10px; color:var(--ivory-dim); font-size:14px; }
.admin-form{
  display:grid;
  gap:16px;
  max-width:760px;
}
.admin-form--grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.admin-form label{ display:grid; gap:7px; color:var(--gold-core); font-size:13px; font-weight:800; }
.admin-form input,
.admin-form textarea,
.admin-form select{
  width:100%;
  border:1px solid rgba(243,238,226,.14);
  border-radius:var(--radius-sm);
  background:rgba(10,10,10,.68);
  color:var(--ivory);
  padding:12px 14px;
  font:inherit;
}
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus{ outline:2px solid rgba(245,208,108,.52); border-color:transparent; }
.admin-form-wide{ grid-column:1/-1; }
.admin-form-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.admin-form .btn,
.admin-panel > .btn{ width:max-content; margin-top:12px; }
.admin-form .btn:disabled,
.admin-panel > .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.admin-table-wrap{
  overflow-x:auto;
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-sm);
  margin-bottom:18px;
}
.admin-table{ width:100%; border-collapse:collapse; min-width:620px; }
.admin-table th,
.admin-table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(243,238,226,.08);
  color:var(--ivory-dim);
  text-align:start;
  font-size:14px;
}
.admin-table th{ color:var(--gold-bright); background:rgba(201,162,39,.06); font-family:var(--font-display); }
.admin-row-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.admin-mini-btn{
  min-height:32px;
  padding:6px 10px;
  border:1px solid rgba(243,238,226,.18);
  border-radius:999px;
  color:var(--ivory);
  font-size:12px;
  font-weight:800;
}
.admin-mini-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.admin-mini-btn.danger:hover{ border-color:#ef8585; color:#ef8585; }
.admin-logo-grid{ margin-top:22px; }
.admin-logo-card{
  display:grid;
  gap:10px;
  align-content:start;
  padding:12px;
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-sm);
  background:rgba(243,238,226,.035);
}
.admin-logo-card img{
  width:100%;
  aspect-ratio:13/9;
  object-fit:contain;
  padding:10px;
  border-radius:var(--radius-sm);
  background:#f6f4ef;
}
.admin-logo-card span{ color:var(--ivory); font-weight:800; }
.admin-media-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.admin-media-card{
  padding:14px;
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-sm);
  background:rgba(243,238,226,.035);
}
.admin-media-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-sm); }
.admin-media-card h2{ margin-top:12px; font-size:16px; }
.admin-media-card code{ display:block; margin-top:6px; color:var(--gold-bright); font-size:12px; overflow-wrap:anywhere; }
.admin-media-card p{ margin-top:8px; color:var(--ivory-dim); font-size:13px; }
.admin-export{
  min-height:360px;
  font-family:Consolas, 'Courier New', monospace;
  direction:ltr;
}

@media (max-width:900px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{ display:flex; gap:10px; overflow-x:auto; border-inline-end:0; border-bottom:1px solid rgba(243,238,226,.08); }
  .admin-tab{ flex:0 0 max-content; }
  .admin-metrics,
  .admin-media-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .admin-shell-header{ position:relative; flex-direction:column; align-items:flex-start; }
  .admin-header-actions{ width:100%; flex-wrap:wrap; }
  .admin-form--grid{ grid-template-columns:1fr; }
}

/* ---------- Error page ---------- */
.error-page{ min-height:100%; }
.error-main{ min-height:100vh; display:grid; place-items:center; overflow:hidden; }
.error-content{ position:relative; z-index:1; max-width:720px; text-align:center; padding-block:120px; }
.error-content .eyebrow{ justify-content:center; }
.error-code{ margin-block:20px -12px; color:rgba(201,162,39,.14); font-family:var(--font-display); font-size:clamp(110px,25vw,250px); font-weight:900; line-height:.9; letter-spacing:0; }
.error-content h1{ margin-top:18px; font-size:clamp(34px,5vw,58px); }
.error-content > p:last-of-type{ max-width:560px; margin:18px auto 0; color:var(--ivory-dim); }
.error-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ===================================================================
   PROJECTS PAGE
   =================================================================== */
.projects-section{ padding-block:0 110px; }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:54px;
}
.filter-btn{
  padding:11px 22px;
  border:1px solid rgba(243,238,226,.2);
  border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--ivory-dim);
  transition:.35s var(--ease);
}
.filter-btn:hover{ border-color:var(--gold-core); color:var(--ivory); }
.filter-btn.active{
  background:var(--gold-gradient);
  border-color:transparent;
  color:var(--obsidian);
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.project-card{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(243,238,226,.1);
  background:var(--graphite);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .4s;
}
.js .project-card{ opacity:0; transform:translateY(18px) scale(.96); }
.project-card.card-show{ opacity:1; transform:translateY(0) scale(1); }
.project-card.card-hide{ opacity:0; transform:translateY(18px) scale(.96); pointer-events:none; }
.project-card:hover{ border-color:rgba(201,162,39,.4); }
.project-card .blueprint-bg{ -webkit-mask-image:none; mask-image:none; opacity:.7; }
.project-card-icon{
  position:absolute; top:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  opacity:.4;
}
.project-card-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px;
  background:linear-gradient(to top, rgba(0,0,0,.8) 14%, transparent 65%);
}
.project-tag{
  display:inline-block;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  color:var(--gold-bright); letter-spacing:.05em;
  margin-bottom:8px;
}
.project-card-inner h4{ font-size:17px; color:var(--ivory); font-family:var(--font-display); font-weight:700; }

/* Real photo images inside cards */
.project-img,
.pp-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .65s var(--ease);
}
.project-card:hover .project-img,
.pp-card:hover .pp-img{ transform:scale(1.05); }
.project-card--published{ cursor:pointer; }
.project-card--expanded{ border-color:rgba(245,208,108,.7); }
.project-card--expanded .project-img{ transform:scale(1.06); }
.project-open{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  cursor:pointer;
}
.project-open::after{
  content:'استكشف المشروع';
  position:absolute;
  inset-inline-end:18px;
  inset-block-start:18px;
  padding:6px 10px;
  border:1px solid rgba(243,238,226,.36);
  border-radius:999px;
  background:rgba(10,10,10,.56);
  color:var(--ivory);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
html[dir="ltr"] .project-open::after{ content:'Explore project'; }
.project-card--published:hover .project-open::after,
.project-open:focus-visible::after{ opacity:1; transform:translateY(0); }
/* ===== النمط المعتمد: زوم الصورة + بار غامق ثلث الشاشة + شريط أفقي =====
   القيم الذهبية المقاسة من big.dk: 0.78s / cubic-bezier(.45,0,.55,1) */
/* نافذة المشروع: Overlay يغطي الشاشة، البار بالنص، وكل الخلفية blur */
.project-overlay{
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center;
  background: rgba(5, 5, 5, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.project-overlay.show{ opacity: 1; }
.project-overlay[hidden]{ display: none; }

.project-detail{
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: #111;
  border-block: 1px solid rgba(201,162,39,.4);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  transition: height .78s cubic-bezier(.45,0,.55,1) .1s;
}
.project-detail.open{ height: 50vh; }
.project-lightbox[hidden]{ display: none; }
.detail-strip{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  height: 50vh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-inline: clamp(20px, 4vw, 56px);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-core) transparent;
}
.detail-strip::-webkit-scrollbar{ height: 4px; }
.detail-strip::-webkit-scrollbar-thumb{ background: var(--gold-core); }
.detail-strip::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
.detail-strip > *{
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .55s var(--ease), transform .55s cubic-bezier(.45,0,.55,1);
}
.project-detail.open .detail-strip > *{ opacity: 1; transform: none; }
/* الشريط ارتفاعه ثابت 50vh مع overflow-y:hidden — فبلا هذا السقف تُقتطع
   «قصة المشروع» الطويلة بصمت. يمرَّر عمودياً داخل عموده وحده. */
.detail-specs{
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; max-width: 380px;
  max-height: calc(50vh - 34px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-core) transparent;
}
.detail-specs::-webkit-scrollbar{ width: 4px; }
.detail-specs::-webkit-scrollbar-thumb{ background: var(--gold-core); }
.detail-specs::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
/* نص طويل بعنوان فوقه (وصف المشروع / قصة المشروع) */
.detail-prose{ display: flex; flex-direction: column; gap: 2px; }
.detail-prose .detail-desc{ margin-top: 4px; }
.detail-title{ color: var(--ivory); font-size: clamp(18px, 1.8vw, 26px); margin-bottom: 6px; }
.detail-spec{ display: flex; align-items: baseline; gap: 12px; }
.detail-spec-label{ color: #8a8a8a; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; min-width: 58px; }
.detail-spec-value{ color: #eee; font-size: 14px; font-weight: 500; }
.detail-spec-value.gold{ color: var(--gold-bright); font-weight: 700; }
.detail-desc{
  margin-top: 10px;
  max-width: 360px;
  color: #ccc;
  font-size: 13.5px;
  line-height: 1.85;
  border-inline-start: 3px solid var(--gold-core);
  padding-inline-start: 14px;
}
.detail-shot{
  flex: 0 0 auto;
  height: 26vh;
  padding: 0;
  border: 1px solid rgba(243,238,226,.14);
  background: #1a1a1a;
  cursor: zoom-in;
  overflow: hidden;
}

/* الصورة الرئيسية: الأكبر داخل البار، تدخل نازلة من مكان البطاقة */
.detail-shot--hero{ height: calc(50vh - 8vh); border-color: rgba(201,162,39,.5); }
.detail-strip > .detail-shot--hero{ transform: translateY(-46px); }
.project-detail.open .detail-strip > .detail-shot--hero{ transform: none; }
.detail-shot img{ height: 100%; width: auto; display: block; object-fit: cover; }
.detail-shot:hover, .detail-shot:focus-visible{ box-shadow: 0 0 0 2px var(--gold-bright); outline: none; }
.detail-text{
  flex: 0 0 auto;
  max-width: min(340px, 70vw);
  color: #ccc;
  font-size: 14px;
  line-height: 1.9;
  border-inline-start: 3px solid var(--gold-core);
  padding-inline-start: 16px;
}
.project-detail-close,
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(243,238,226,.35);
  border-radius:50%;
  color:var(--ivory);
  font-size:28px;
  line-height:1;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.project-detail-close{ position:absolute; inset-block-start:12px; inset-inline-end:14px; z-index:2; }
.project-detail-close:hover,
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ border-color:var(--gold-bright); background:rgba(201,162,39,.12); color:var(--gold-bright); }
.project-lightbox{ position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:24px; background:rgba(5,5,5,.94); }
.lightbox-shell{ position:relative; width:min(1120px,100%); display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; gap:16px; }
.lightbox-shell figure{ min-width:0; }
.lightbox-image{ max-width:100%; max-height:76vh; margin-inline:auto; border:1px solid var(--gold-core); border-radius:var(--radius-sm); object-fit:contain; }
.lightbox-caption{ margin-top:12px; color:var(--gold-bright); font-family:var(--font-display); font-size:14px; text-align:center; }
.lightbox-close{ position:absolute; inset-block-start:-8px; inset-inline-end:0; z-index:1; }

.projects-empty{
  display:none;
  text-align:center;
  padding-block:60px;
  color:var(--ivory-dim);
}
.projects-empty.show{ display:block; }

@media (max-width:1024px){
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .projects-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .filter-bar{ gap:9px; }
  .filter-btn{ padding:9px 16px; font-size:13px; }
  .project-detail.open{ height: 56vh; }
  .detail-strip{ height: 56vh; padding-inline: 16px; }
  .detail-shot{ height: 28vh; }
  .detail-shot--hero{ height: calc(56vh - 10vh); }
  .detail-specs{ max-width: 220px; }
  .detail-title{ font-size: 17px; }
  .lightbox-shell{ grid-template-columns:42px minmax(0,1fr) 42px; gap:7px; }
  .lightbox-close{ inset-block-start:-52px; }
}
@media (max-width:480px){
  .projects-grid{ grid-template-columns:1fr; }
}


@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ height:320px; order:initial; }
  .about-inner{ grid-template-columns:1fr; }
  .about-mark{ max-width:320px; margin-inline:auto; }
  .services-grid{ grid-template-columns:1fr; }
  .tower-wrap{ position:static; height:360px; order:-1; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .process-timeline{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-timeline::before{ inset-block-start:28px; inset-inline:28px; }
  .pp-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ===================================================================
   INNER PAGE HERO (Contact / Projects)
   =================================================================== */
.page-hero{
  padding-block:160px 90px;
  position:relative;
  text-align:center;
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{
  margin-top:18px;
  font-size:clamp(34px,5vw,56px);
}
.page-hero p{
  margin:18px auto 0;
  max-width:560px;
  color:var(--ivory-dim);
  font-size:16.5px;
}
.page-hero-crumb{
  margin-top:26px;
  display:flex; justify-content:center; align-items:center; gap:10px;
  font-size:13px; color:var(--ivory-dim);
}
.page-hero-crumb a:hover{ color:var(--gold-bright); }
.page-hero-crumb .sep{ color:var(--gold-deep); }

/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contact-section{ padding-block:0 110px; }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.contact-card{
  padding:34px 28px;
  border:1px solid rgba(243,238,226,.1);
  border-radius:var(--radius-md);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.contact-card:hover{ border-color:rgba(201,162,39,.4); background:rgba(201,162,39,.04); transform:translateY(-4px); }
.contact-icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,162,39,.35);
  border-radius:50%;
  color:var(--gold-core);
  margin-bottom:20px;
}
.contact-card h3{ font-size:17px; color:var(--ivory); margin-bottom:14px; }
.contact-card ul{ display:flex; flex-direction:column; gap:9px; }
.contact-card a, .contact-card .static-line{
  font-size:14.5px; color:var(--ivory-dim);
  transition:color .3s;
}
.contact-card a:hover{ color:var(--gold-bright); }
.contact-card .line-label{ color:var(--gold-core); font-size:12px; display:block; margin-bottom:2px; }

.map-section{ padding-block:0 0; }
.map-frame{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(201,162,39,.25);
  height:440px;
  filter:grayscale(.25) contrast(1.05);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
.map-frame--lazy{
  display:grid;
  place-items:center;
  background:
    linear-gradient(rgba(10,10,10,.72), rgba(10,10,10,.72)),
    radial-gradient(circle at 50% 40%, rgba(201,162,39,.16), transparent 48%),
    var(--graphite);
}
.map-load{
  min-width:min(340px, calc(100% - 48px));
  min-height:112px;
  padding:22px;
  border:1px solid rgba(245,208,108,.44);
  border-radius:var(--radius-sm);
  background:rgba(10,10,10,.72);
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-weight:800;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.map-load:hover{ transform:translateY(-2px); border-color:var(--gold-bright); }
.map-load small{ display:block; margin-top:8px; color:var(--ivory-dim); font-family:var(--font-body); font-size:12px; font-weight:500; }

@media (max-width:1024px){
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
  .map-frame{ height:320px; }
}

@media (max-width:760px){
  .nav-links, .nav-extra .btn, .nav-extra .portal-link, .nav-extra .lang-toggle{ display:none; }

  .main-nav{ position:fixed; inset:0; top:0; z-index:105;
    flex-direction:column; justify-content:center; align-items:center;
    gap:34px;
    background:rgba(10,10,10,.98);
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
  }
  .main-nav.open{ transform:translateY(0); }
  .main-nav.open .nav-links{ display:flex; flex-direction:column; align-items:center; gap:26px; }
  .main-nav.open .nav-links a{ font-size:20px; }
  .main-nav.open .nav-extra{ flex-direction:column; width:min(320px, calc(100vw - 48px)); }
  .main-nav.open .nav-extra .btn{ display:inline-flex; }
  .main-nav.open .nav-extra .portal-link,
  .main-nav.open .nav-extra .lang-toggle{ display:inline-flex; }
  .main-nav.open .nav-extra .portal-link,
  .main-nav.open .nav-extra .btn{ width:100%; min-height:48px; }
  .nav-toggle{ display:flex; }

  .hero{ padding-block:140px 70px; }
  .hero-visual{ display:none; }
  .hero-stats{ flex-direction:column; gap:18px; }
  .stat{ border-inline-start:none; padding-inline-start:0; border-top:1px solid rgba(243,238,226,.14); padding-top:18px; }
  .stat:first-child{ border-top:none; padding-top:0; }

  .why-grid{ grid-template-columns:1fr; }
  .clients-inner{ grid-template-columns:1fr; }
  .client-logo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-timeline{ grid-template-columns:1fr; gap:18px; }
  .process-timeline::before{
    inset-inline-start:27px;
    inset-inline-end:auto;
    inset-block:28px 28px;
    width:1px;
    height:auto;
    background:linear-gradient(180deg, rgba(245,208,108,.65), transparent);
  }
  .process-step{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; align-items:start; }
  .process-marker{ margin-bottom:0; }
  .process-card{ min-height:0; }
  .pp-grid{ grid-template-columns:1fr 1fr; }
  .pp-head{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; gap:40px; }
  .cta-actions{ flex-direction:column; align-items:stretch; }
}

/* ===== إدارة المحتوى — الربط المباشر بالملفات ===== */
.admin-connect{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-bottom:28px; padding:22px 26px;
  background:rgba(201,162,39,.07); border:1px solid rgba(201,162,39,.35); border-radius:var(--radius-md);
}
.admin-connect h2{ font-size:19px; color:var(--gold-bright); }
.admin-connect p{ margin-top:6px; color:var(--ivory-dim); font-size:13.5px; max-width:640px; }
.admin-connect-warn{ color:#e8b7b7 !important; }
.admin-panel-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.admin-sidebar-note{ margin-top:22px; font-size:12px; }
.admin-note-inline{ margin:10px 0 18px; color:var(--ivory-dim); font-size:13px; }
.admin-row-thumb{ width:64px; height:44px; object-fit:cover; border-radius:6px; border:1px solid rgba(243,238,226,.15); }
.admin-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.admin-mini-btn{
  padding:6px 10px; font-family:inherit; font-size:12.5px; cursor:pointer;
  color:var(--ivory); background:rgba(243,238,226,.05);
  border:1px solid rgba(243,238,226,.2); border-radius:8px;
  transition:border-color .2s, color .2s;
}
.admin-mini-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.admin-mini-btn.danger:hover{ border-color:#e88; color:#e88; }
.admin-badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; }
.admin-badge.ok{ color:#bfe8c8; border:1px solid rgba(191,232,200,.4); }
.admin-badge.off{ color:#cfcfcf; border:1px solid rgba(207,207,207,.3); }
.admin-editor{ margin-top:30px; padding:26px; background:rgba(243,238,226,.03); border:1px solid rgba(201,162,39,.3); border-radius:var(--radius-md); }
.admin-editor h2{ color:var(--gold-bright); font-size:20px; }
.admin-label{ display:block; margin-bottom:10px; color:var(--ivory-dim); font-size:13px; }
.admin-check{ display:flex; align-items:center; gap:10px; color:var(--ivory); }
.admin-check input{ width:18px; height:18px; accent-color:var(--gold-core); }
.admin-upload-btn{ cursor:pointer; }
.admin-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.admin-thumbs--library{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.admin-thumb{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:8px; background:rgba(0,0,0,.35);
  border:1px solid rgba(243,238,226,.12); border-radius:10px;
}
.admin-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.admin-thumb small{ color:var(--ivory-dim); font-size:11px; direction:ltr; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-thumb-bar{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.admin-thumb-cover{ display:flex; align-items:center; gap:5px; color:var(--ivory); font-size:12px; cursor:pointer; }
.admin-thumb-cover input{ accent-color:var(--gold-core); }
.admin-thumb--pick{ cursor:pointer; }
.admin-thumb--pick input{ position:absolute; top:12px; inset-inline-start:12px; z-index:1; width:18px; height:18px; accent-color:var(--gold-core); }
.admin-thumb--pick:has(input:checked){ border-color:var(--gold-bright); box-shadow:0 0 0 1px var(--gold-bright); }
.admin-picker{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:4vh 4vw; background:rgba(5,5,5,.9); }
.admin-picker[hidden]{ display:none; }
.admin-picker-shell{
  width:min(980px,100%); max-height:88vh; overflow-y:auto;
  padding:26px; background:#141414;
  border:1px solid rgba(201,162,39,.4); border-radius:var(--radius-md);
}
.admin-picker-shell h2{ margin-bottom:18px; color:var(--gold-bright); font-size:20px; }
.admin-picker-shell .admin-form-actions{ margin-top:20px; }
.admin-git-note{ margin-top:30px; }
.admin-git-note code{
  display:block; margin-top:10px; padding:12px 16px; direction:ltr; text-align:left;
  background:#000; color:#bfe8c8; border-radius:8px; font-size:13px;
  user-select:all;
}
.admin-toast.error{ border-color:#e88; color:#e8b7b7; }