/* ==========================================================================
   آسيا — تواصل معنا (النسخة العربية RTL)
   ========================================================================== */
:root{
  color-scheme:light;
  --ink:#FFFFFF;
  --midnight:#E6E9EF;
  --deep:#FFFFFF;
  --indigo:#EAF6F4;
  --azure:#115E59;
  --sky:#0F766E;
  --pearl:#0A0F10;
  --brass:#D9502E;
  --ink-rgb:255,255,255;
  --pearl-rgb:10,15,16;

  /* لون ثابت لعنوان/مقدمة الترويسة فوق سواد الصورة مباشرة — يظل فاتحًا
     في الوضعين لأن تعتيم الصورة أسفله لا يتغير */
  --on-photo:#FFFFFF;
  --on-photo-rgb:255,255,255;
  --on-photo-accent:#3DD6C6;

  --line:rgba(10,15,16,.1);
  --line-strong:rgba(10,15,16,.22);

  --display:'Readex Pro', 'Montserrat', system-ui, -apple-system, sans-serif;
  --ui:'Readex Pro', 'Montserrat', system-ui, -apple-system, sans-serif;

  --pad:clamp(20px, 5vw, 64px);
  --gutter:min(1240px, 100% - var(--pad) * 2);
}

body{transition:background .35s ease,color .35s ease}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--pearl);
  font-family:var(--ui);
  font-weight:400;
  line-height:1.9;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px}

.wrap{width:var(--gutter);margin-inline:auto}
.section{padding:clamp(64px,8vw,120px) 0;position:relative}
.lat{font-family:var(--ui);direction:ltr;unicode-bidi:isolate}

h1,h2{font-family:var(--display);font-weight:700;line-height:1.42;margin:0}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}
p{margin:0}
.eyebrow{font-size:.86rem;color:var(--sky);font-weight:500;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.75;flex:none}
.lede{font-size:clamp(1.02rem,1.35vw,1.14rem);color:rgba(var(--pearl-rgb),.68);max-width:52ch;line-height:2}

.band{background:var(--midnight);border-block:1px solid var(--line);position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%233DD6C6' stroke-width='1'%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z'/%3E%3Cpath d='M12.7 12.7 H59.3 V59.3 H12.7 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
/* لون الحدود في الوضع الداكن مُضمَّن داخل الـ data URI، لذا يحتاج الوضع الفاتح
   إلى نمط أغمق وأكثر كثافة بدلًا من رفع الشفافية فقط */
.band::before{
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230F766E' stroke-width='1'%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z'/%3E%3Cpath d='M12.7 12.7 H59.3 V59.3 H12.7 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.band > .wrap{position:relative;z-index:1}
.rub{color:var(--brass);opacity:.65;line-height:1}

/* ---------------- شريط المعلومات ---------------- */
.info-bar{
  position:fixed;inset:0 0 auto 0;z-index:61;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--midnight);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.info-bar::-webkit-scrollbar{display:none}
.info-bar-inner{display:flex;align-items:center;gap:14px;padding:0 16px;white-space:nowrap;font-size:.72rem;color:rgba(var(--pearl-rgb),.8)}
.info-item{display:inline-flex;align-items:center;gap:6px}
.info-icon{width:14px;height:14px;color:var(--sky);flex:none}
.info-bar-pipe{opacity:.4}
.info-sep{width:1px;height:12px;background:var(--line-strong);flex:none}

/* ---------------- الترويسة ---------------- */
/* شفافة وعائمة فوق صورة رأس الصفحة افتراضيًا (نص أبيض عبر
   .nav:not(.stuck) أدناه)، ثم صمّاء وضبابية بعد التمرير — بنفس سلوك
   ترويسة الصفحة الرئيسية */
.nav{
  position:fixed;inset:34px 0 auto 0;z-index:60;padding:20px 0px 0px 0px;
  border-bottom:1px solid transparent;
  transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-color .4s ease;
}
.nav.stuck{
  background:rgba(var(--ink-rgb),.84);backdrop-filter:blur(14px);border-bottom-color:var(--line);
  padding:14px 0px 0px 0px;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:-14px}
.brand{display:flex;align-items:center;width:198px;height:76px;overflow:hidden;position:relative}
.brand img{position:absolute;top:50%;left:50%;height:480px;width:480px;transform:translate(-50%,-50%)}
.brand-logo--top,.brand-logo--scroll{transition:opacity .4s ease}
.brand-logo--scroll{opacity:0}
.nav.stuck .brand-logo--top{opacity:0}
.nav.stuck .brand-logo--scroll{opacity:1}
.menu{display:flex;align-items:center;gap:24px}
.menu a{font-size:1rem;color:rgba(var(--pearl-rgb),.74);transition:color .25s}
.menu a:hover,.menu a[aria-current]{color:var(--pearl)}
.nav:not(.stuck) .menu a{color:rgba(var(--on-photo-rgb),.85)}
.nav:not(.stuck) .menu a:hover,.nav:not(.stuck) .menu a[aria-current]{color:var(--on-photo)}
.lang{font-size:.82rem;color:var(--sky);border-inline-start:1px solid var(--line);padding-inline-start:26px;direction:ltr}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 28px;border-radius:999px;font-size:.95rem;
  border:1px solid var(--line-strong);color:var(--pearl);
  transition:background .3s,border-color .3s,transform .3s;
}
.btn:hover{background:rgba(42,168,156,.16);border-color:var(--sky);transform:translateY(-2px)}
.btn-solid{background:var(--azure);border-color:var(--azure);color:#0a0f10;font-weight:500}
.nav:not(.stuck) .btn{color:var(--on-photo);border-color:rgba(var(--on-photo-rgb),.32)}
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center}
.nav:not(.stuck) .burger i,.nav:not(.stuck) .burger i::before,.nav:not(.stuck) .burger i::after{background:var(--on-photo)}
.burger i{display:block;width:20px;height:1px;background:var(--pearl);position:relative;transition:background .2s ease .1s}
.burger i::before,.burger i::after{content:"";position:absolute;right:0;width:20px;height:1px;background:var(--pearl);
  transition:top .25s cubic-bezier(.4,0,.2,1) .1s, transform .25s cubic-bezier(.4,0,.2,1)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent;transition-delay:0s}
.burger[aria-expanded="true"] i::before,.burger[aria-expanded="true"] i::after{
  top:0;transition:top .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1) .1s}
.burger[aria-expanded="true"] i::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:rotate(-45deg)}
.drawer{display:none}

/* ---------------- رأس الصفحة ---------------- */
/* القبة الخضراء ومآذن المسجد النبوي — تحمل نفس فكرة "المشكاة والمصباح"
   التي يحملها محراب الصفحة الرئيسية. التعتيم مركّز قرب الحافة السفلى
   فقط، فتبقى الصورة مضيئة في معظم المساحة وتنتقل بسلاسة (بلا خط أبيض)
   إلى القسم الغامق أسفلها. */
.page-head{
  padding:224px 0 90px;position:relative;overflow:hidden;
  min-height:88vh;display:flex;align-items:flex-end;
  background:
    linear-gradient(270deg, rgba(10,15,16,.8) 0%, rgba(10,15,16,.4) 38%, transparent 64%),
    linear-gradient(180deg, rgba(10,15,16,.08) 0%, rgba(10,15,16,.14) 55%, rgba(10,15,16,.4) 78%, rgba(10,15,16,.55) 90%, var(--ink) 120%),
    /* أساس داكن تحت الصورة: العنوان والنص أبيضان ثابتان، فبدونه يظهران
       على بياض الصفحة حتى تُحمّل الصورة */
    var(--page-head-img, url("../img/hero-contact.jpg")) center top / cover no-repeat #17302c;
  border-bottom:1px solid var(--line);
}
@media (min-width:901px){
  /* عرض كامل بارتفاع محدود — مطابقة نسبة الصورة تمامًا جعلت القسم
     ضخمًا على الشاشات الواسعة، فعدنا لارتفاع محدود (العرض الكامل
     مضمون عبر cover، مع اقتصاص طفيف علوي/سفلي يُفضّل إظهار القباب
     والمآذن) */
  .page-head{
    min-height:700px;height:56vh;
    background:
      linear-gradient(270deg, rgba(10,15,16,.8) 0%, rgba(10,15,16,.4) 38%, transparent 64%),
      linear-gradient(180deg, rgba(10,15,16,.08) 0%, rgba(10,15,16,.14) 55%, rgba(10,15,16,.4) 78%, rgba(10,15,16,.55) 90%, var(--ink) 120%),
      var(--page-head-img, url("../img/hero-contact.jpg")) center 28% / cover no-repeat #17302c;
  }
}
.crumb{font-size:.88rem;color:rgba(var(--on-photo-rgb),.72);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.crumb a{color:var(--on-photo-accent)}
.crumb span{opacity:.6}
.page-head h1{max-width:20ch;color:var(--on-photo);text-shadow:0 2px 24px rgba(10,15,16,.8)}
.page-head .lede{margin-top:16px;color:rgba(var(--on-photo-rgb),.88);text-shadow:0 1px 14px rgba(10,15,16,.7)}
.head-text{position:relative;z-index:1}
@media (max-width:600px){
  .page-head{padding:184px 0 60px;min-height:64vh}
}

/* ---------------- التواصل ---------------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(36px,6vw,88px);align-items:start;
}
.contact-aside{display:grid;gap:20px}
.contact-aside .line{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:rgba(var(--pearl-rgb),.7)}
.contact-aside .line b{color:var(--pearl);font-weight:500;display:block;font-size:.85rem;color:var(--sky);margin-bottom:2px}
.contact-aside .line .rub{margin-top:8px}
.contact-aside .wa-line{
  display:flex;align-items:center;gap:12px;margin-top:6px;padding:16px 18px;
  border:1px solid var(--line);border-radius:8px;background:rgba(42,168,156,.08);
}
.contact-aside .wa-line svg{width:22px;height:22px;flex:none;color:var(--sky)}
.contact-aside .wa-line span{font-size:.94rem;color:rgba(var(--pearl-rgb),.72)}
.contact-aside .wa-line b{color:var(--sky);font-weight:500}

form{
  display:grid;gap:18px;background:#FFFFFF;border:1px solid var(--line);
  border-radius:24px;padding:clamp(26px,4vw,40px);
  box-shadow:0 90px 60px rgba(10,15,16,.03),0 40px 40px rgba(10,15,16,.05),0 16px 24px rgba(10,15,16,.07),0 4px 10px rgba(10,15,16,.06);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
label{font-size:.88rem;color:rgba(var(--pearl-rgb),.6)}
input,select,textarea{
  font:inherit;font-size:1rem;color:var(--pearl);
  background:var(--midnight);border:1px solid transparent;
  padding:13px 16px;border-radius:10px;transition:border-color .25s,background .25s,box-shadow .25s;
}
input::placeholder,textarea::placeholder{color:rgba(var(--pearl-rgb),.4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:transparent;background:#fff;box-shadow:0 0 0 2px var(--sky)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233DD6C6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center}
select option{background:var(--midnight);color:var(--pearl)}
textarea{resize:vertical;min-height:140px}
input[type="tel"]{direction:ltr;text-align:right}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:rgba(var(--pearl-rgb),.6);line-height:1.8}
.consent input{appearance:auto;width:16px;height:16px;margin:5px 0 0;padding:0;flex:none;border:0;background:none;accent-color:var(--azure)}
form .btn-solid{
  margin-top:4px;padding:17px 30px;border-radius:12px;border:0;color:#fff;font-weight:700;
  background:linear-gradient(180deg,#1c3d3a 0%,#0f2b28 50%,#0a1f1d 100%);
  transition:box-shadow .3s,background .3s,transform .3s;
}
form .btn-solid:hover{background:linear-gradient(180deg,#22504c 0%,#123531 50%,#0c2624 100%);box-shadow:0 0 0 3px rgba(15,118,110,.22)}
.sent{border:1px solid rgba(255,111,77,.45);padding:clamp(30px,4vw,44px);display:grid;gap:14px;background:linear-gradient(200deg,rgba(28,48,45,.4),transparent)}
.sent p{font-size:1rem;color:rgba(var(--pearl-rgb),.7)}

/* كشف ناعم، بنفس تقليد صفحة المعرض */
#contact.priming [data-reveal]{opacity:0;transform:translateY(24px)}
[data-reveal]{transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1)}
[data-reveal]:nth-child(1){transition-delay:0ms}
[data-reveal]:nth-child(2){transition-delay:90ms}
[data-reveal]:nth-child(3){transition-delay:180ms}

/* ---------------- التذييل ---------------- */
.foot{padding:clamp(56px,7vw,88px) 0 34px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:48px}
.foot-grid h4{font-family:var(--ui);font-size:.88rem;color:var(--sky);margin:0 0 16px;font-weight:500}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.97rem;color:rgba(var(--pearl-rgb),.62)}
.foot-grid a:hover{color:var(--pearl)}
.foot-social{display:flex;gap:10px;margin-top:18px}.foot-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:rgba(var(--pearl-rgb),.6);transition:color .3s,border-color .3s,background .3s}.foot-social a:hover{color:var(--pearl);border-color:var(--sky);background:rgba(var(--pearl-rgb),.06)}.foot-social svg{width:16px;height:16px}
.foot-brand p{font-size:.97rem;color:rgba(var(--pearl-rgb),.58);max-width:42ch;margin-top:14px;line-height:2}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--line);font-size:.88rem;color:rgba(var(--pearl-rgb),.45);
}

.wa{
  position:fixed;inset-inline-end:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:var(--azure);color:#0a0f10;
  box-shadow:0 10px 30px rgba(10,15,16,.6);transition:transform .3s,background .3s,box-shadow .3s,color .3s;
}
.wa:hover{transform:translateY(-3px);background:var(--sky)}
.wa{box-shadow:none;color:#fff}
.wa svg{width:26px;height:26px}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .info-bar-inner{gap:6px;padding:0 10px;font-size:.62rem}
  .info-item:has(#ibDate),.info-item:has(#ibTime){display:none}
  .info-sep:nth-of-type(1),.info-sep:nth-of-type(2){display:none}
  .info-icon{width:12px;height:12px}
  .nav{padding:8px 0}
  .brand{width:271px;height:104px}
  .brand img{position:absolute;top:60%;left:27%;height:480px;width:480px;transform:translate(-50%,-50%)}
  .menu{display:none}
  .burger{display:flex}
  .drawer{
    display:grid;position:fixed;inset:0;z-index:59;
    background:rgba(var(--ink-rgb),.97);backdrop-filter:blur(10px);
    place-content:center;gap:16px;padding:122px 20px 24px;overflow-y:auto;text-align:center;
    opacity:0;visibility:hidden;transform:scale(.97);
    transition:opacity .45s cubic-bezier(.19,1,.22,1), transform .55s cubic-bezier(.19,1,.22,1), visibility .45s;
  }
  .drawer.open{opacity:1;visibility:visible;transform:scale(1)}
  .drawer a{
    font-family:var(--display);font-size:1.3rem;
    opacity:0;transform:translateY(12px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .drawer.open a{opacity:1;transform:translateY(0)}
  .drawer a:nth-child(1){transition-delay:.06s}
  .drawer a:nth-child(2){transition-delay:.1s}
  .drawer a:nth-child(3){transition-delay:.14s}
  .drawer a:nth-child(4){transition-delay:.18s}
  .drawer a:nth-child(5){transition-delay:.22s}
  .drawer a:nth-child(6){transition-delay:.26s}
  .drawer a:nth-child(7){transition-delay:.3s}
  .drawer .lang{border-inline-start:0;padding-inline-start:0;border-right:1px solid var(--line);padding-right:24px}
  .row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}