:root{--g:#c9a96a;--g2:#f0dfae}
html{scroll-behavior:smooth}body{font-family:'IBM Plex Sans Arabic',sans-serif;background:#050505;color:#f1ece0;overflow-x:hidden}
html[lang=en] body{font-family:'Cormorant Garamond','IBM Plex Sans Arabic',serif;font-size:1.1rem}
.wrap{max-width:1280px;margin:auto;padding-inline:1.25rem;width:100%}.rel{position:relative;z-index:5}
.gold{background:linear-gradient(90deg,#c9a96a,#f3e3b5,#c9a96a);-webkit-background-clip:text;background-clip:text;color:transparent}
.kick{color:var(--g);letter-spacing:.18em;font-size:.78rem;margin-bottom:1rem;text-transform:uppercase}
h1{font-size:clamp(2.2rem,6vw,4.8rem);font-weight:700;line-height:1.2}h2.h{font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.3}
.lead{font-size:1.1rem;color:#d3ccbc;max-width:42rem;line-height:2}.sec{padding:6rem 0}.alt{background:#0b0b0b}
.gline{height:1px;background:linear-gradient(90deg,transparent,#c9a96a,transparent)}
.btn{display:inline-block;padding:.9rem 1.8rem;background:linear-gradient(135deg,#c9a96a,#ecd9a8);color:#050505;font-weight:700;border:1px solid #c9a96a;transition:.35s}
.btn:hover{background:transparent;color:var(--g);box-shadow:0 0 30px #c9a96a40}.btn.o{background:transparent;color:#f1ece0;border-color:#f1ece055}.btn.o:hover{border-color:var(--g);color:var(--g)}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s ease var(--d,0ms),transform 1s ease var(--d,0ms)}.rv.in{opacity:1;transform:none}
#pre{position:fixed;inset:0;z-index:100;background:#050505;display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}#pre.off{opacity:0;visibility:hidden}#pre img{width:150px;animation:pl 1.4s ease-in-out infinite}
#pb{position:fixed;top:0;inset-inline:0;height:3px;z-index:90;background:linear-gradient(90deg,#c9a96a,#f0dfae);transform-origin:left;transform:scaleX(0)}
#cur{position:fixed;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(circle,#c9a96a1a,transparent 65%);pointer-events:none;z-index:3;left:-999px}
#hd{transition:.5s}#hd.sc{background:#050505e6;backdrop-filter:blur(12px);border-bottom:1px solid #c9a96a33}
.hero,.phero{position:relative;overflow:hidden;display:flex;align-items:center}.hero{min-height:100svh}.phero{min-height:68svh;padding-top:6rem}
.sl{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transition:opacity 1.5s;pointer-events:none;padding-top:5rem}.sl.on{opacity:1;pointer-events:auto}
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 20s ease-in-out infinite alternate}
.ov{position:absolute;inset:0;background:linear-gradient(90deg,#050505f2 5%,#050505a6 55%,#05050555),linear-gradient(0deg,#050505,transparent 40%)}
.hero,.phero,.sl,.sv-img,.cimg{background:radial-gradient(circle at 70% 30%,#2a2315,#050505 70%)}
.hero:before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(90deg,#c9a96a0a 0 1px,transparent 1px 140px);pointer-events:none}
.tx>*{opacity:0;transform:translateY(30px)}.sl.on .tx>*{animation:up 1s forwards}.sl.on .tx>:nth-child(2){animation-delay:.2s}.sl.on .tx>:nth-child(3){animation-delay:.4s}.sl.on .tx>:nth-child(4){animation-delay:.6s}
.scene{perspective:900px}.layer{transition:transform .25s;transform-style:preserve-3d}.float{animation:fl 6s ease-in-out infinite}
.logo3d{width:19rem;border:1px solid #c9a96a55;box-shadow:0 40px 80px #000,0 0 60px #c9a96a22}
.mq{overflow:hidden;border-block:1px solid #c9a96a44;background:#080808;padding:1.1rem 0}.mt{display:flex;width:max-content;animation:mq 45s linear infinite}.mt.rev{animation-direction:reverse}
.mt span{white-space:nowrap;font-size:clamp(1.3rem,3vw,2.2rem);font-weight:600;color:#c9a96a;padding-inline:1rem}.mt i{color:#f1ece0;font-style:normal;margin-inline:1.2rem;opacity:.5}.mq:hover .mt{animation-play-state:paused}
.card{display:block;position:relative;background:#0b0b0b;border:1px solid #c9a96a2e;overflow:hidden;transition:border-color .4s,box-shadow .4s;transform-style:preserve-3d}
.card:hover{border-color:var(--g);box-shadow:0 30px 60px -30px #c9a96a66}.card .ci{height:13rem;overflow:hidden;background:#161208}.card .ci img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s;filter:grayscale(.4) brightness(.8)}.card:hover .ci img{transform:scale(1.12);filter:none}
.card .cb{padding:1.6rem}.num{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--g);line-height:1}
.px{overflow:hidden;position:relative}.px img{width:100%;height:115%;object-fit:cover;will-change:transform}
.sv{display:grid;gap:2.5rem;align-items:center;margin-bottom:6rem}@media(min-width:1024px){.sv{grid-template-columns:1fr 1fr}.sv:nth-child(even) .sv-img{order:2}}
.sv-img{height:26rem;border:1px solid #c9a96a44}.sv-img .num{position:absolute;top:1rem;inset-inline-start:1.2rem;font-size:4rem;z-index:4;text-shadow:0 2px 12px #000}
.sv ul{margin:1.2rem 0 1.8rem}.sv li{padding:.55rem 0;border-bottom:1px solid #c9a96a22;color:#d3ccbc}.sv li:before{content:"✦";color:var(--g);margin-inline-end:.7rem;font-size:.7rem}
.pill{border:1px solid #c9a96a55;padding:.5rem 1.1rem;font-size:.9rem;transition:.3s;display:inline-block}.pill:hover,.pill.on{background:var(--g);color:#050505}
.stat{border-top:1px solid var(--g);padding-top:1rem}.stat b{font-family:'Cormorant Garamond',serif;font-size:3.4rem;color:var(--g);display:block;line-height:1}
.fl{position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:60;display:flex;flex-direction:column;gap:.6rem}.fl a,.fl button{width:3.2rem;height:3.2rem;background:#c9a96a;color:#050505;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 8px 30px #000}
.ast{position:fixed;inset-inline-start:1rem;bottom:1rem;z-index:60;background:#0b0b0b;border:1px solid var(--g);color:var(--g);padding:.7rem 1.1rem}
.ap{position:fixed;inset-inline-start:1rem;bottom:4.5rem;z-index:60;width:min(22rem,calc(100vw - 2rem));background:#0b0b0b;border:1px solid var(--g);padding:1.2rem;font-size:.9rem;max-height:70vh;overflow:auto}
.ck{position:fixed;inset-inline:0;bottom:0;z-index:70;background:#0b0b0bf2;border-top:1px solid var(--g);padding:.9rem 1.2rem;display:flex;gap:1rem;align-items:center;justify-content:center;font-size:.85rem}
details{border-bottom:1px solid #c9a96a33;padding:1.3rem 0}summary{cursor:pointer;font-weight:600;list-style:none;font-size:1.1rem}summary:after{content:"+";float:inline-end;color:var(--g)}details[open] summary:after{content:"–"}
input,select,textarea{width:100%;background:#0b0b0b;border:1px solid #c9a96a44;padding:.9rem;color:#f1ece0}input:focus,select:focus,textarea:focus{outline:2px solid var(--g)}.err{color:#f08a7a;font-size:.85rem;min-height:1.1rem}
:focus-visible{outline:2px solid var(--g);outline-offset:3px}.ck.hidden,.ap.hidden,.card.hidden,.btn.hidden,#tp.hidden,#mn.hidden{display:none}#mn.flex{display:flex}
@keyframes up{to{opacity:1;transform:none}}@keyframes kb{to{transform:scale(1.1) translate(-1%,1%)}}@keyframes fl{50%{transform:translateY(-14px)}}@keyframes mq{to{transform:translateX(-50%)}}@keyframes pl{50%{opacity:.4;transform:scale(.95)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.tx>*{opacity:1!important;transform:none!important}}

/* ===== v2.1 controlled enhancements ===== */
:root{--fs-h1:clamp(2rem,4.6vw,4rem);--fs-lead:clamp(1.02rem,.55rem + 1.1vw,1.2rem)}
/* typography scale (Arabic and English tuned independently) */
html[lang=ar] h1,html[lang=ar] h2.h{line-height:1.5;text-wrap:balance}
html[lang=ar] h3{line-height:1.6}
html[lang=en] h1,html[lang=en] h2.h{line-height:1.15;text-wrap:balance}
.lead{font-size:var(--fs-lead);max-width:40rem;line-height:2;text-wrap:pretty}
html[lang=en] .lead{font-size:1.3rem;line-height:1.65}
html[lang=ar] .kick{letter-spacing:0;font-size:.95rem;font-weight:600}
html[lang=ar] main p.text-sm{font-size:.98rem;line-height:2}
html[lang=en] main p.text-sm{font-size:1.1rem;line-height:1.6}
html[lang=ar] main h3.text-xl,html[lang=ar] main h3.text-lg{font-size:1.2rem}
/* hero slider */
.sl .tx{padding-block:1rem 5.5rem}
.sl h1{font-size:var(--fs-h1);max-width:38rem}
.sl .lead{max-width:34rem;margin-block:1.4rem 1.8rem}
html[dir=rtl] .ov{background:linear-gradient(270deg,#050505eb 8%,#050505b3 55%,#05050559),linear-gradient(0deg,#050505,transparent 40%)}
#dt button{position:relative;height:.25rem}#dt button:before{content:"";position:absolute;inset:-1rem -.2rem}
@media(max-width:768px){
 .sl .ov,html[dir=rtl] .sl .ov{background:linear-gradient(0deg,#050505f2 12%,#050505b8 60%,#05050880)}
 .sl .tx{padding-bottom:6.5rem}.sl h1{font-size:clamp(1.8rem,7.6vw,2.4rem)}
 .sl .lead{font-size:1rem;line-height:1.9;margin-block:1rem 1.3rem}
 .sl .kick{margin-bottom:.5rem}
 .sl .btn{flex:1 1 auto;text-align:center;padding:.8rem 1rem}.sl .tx .flex .btn:first-child{flex-basis:100%}
}
/* navbar */
#hd .wrap{transition:padding .4s}#hd.sc .wrap{padding-block:.4rem}#hd.mo{background:#050505f5}
.nv{align-items:center;gap:1.9rem}
.nvl{position:relative;padding:.55rem .1rem;font-size:1.02rem;font-weight:600;color:#e8e1d2;transition:color .3s;white-space:nowrap}
html[lang=en] .nvl{font-size:1.2rem}
.nvl:after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--g);transform:scaleX(0);transition:transform .3s}
.nvl:hover,.nvl.on{color:var(--g)}.nvl:hover:after,.nvl.on:after{transform:scaleX(1)}
.bn{line-height:1.25}.bn b{display:block;font-size:1.05rem}
.bn small{display:none;font-size:.62rem;letter-spacing:.14em;color:var(--g);font-family:'Cormorant Garamond',serif;white-space:nowrap}
@media(min-width:768px){.bn small{display:block}}
#mn{border-top:1px solid #c9a96a33}#mn a{display:flex;align-items:center;min-height:3.1rem;padding-inline:.25rem;font-size:1.05rem}#mn a[aria-current]{color:var(--g)}
#lg,#mb{min-height:2.75rem;min-width:2.75rem}
/* process timeline */
.stp{display:grid;gap:2.2rem;list-style:none;padding:0;margin:0}
.stp li{position:relative;display:flex;gap:1.2rem;align-items:flex-start}
.mk{position:relative;flex:none;width:4.4rem;height:4.4rem;border:1px solid var(--g);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g);background:#0b0b0b;box-shadow:0 0 30px #c9a96a22}
.mk b{position:absolute;top:-.3rem;inset-inline-end:-.3rem;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--g);color:#050505;font-size:.8rem;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif}
.stp li:not(:last-child):after{content:"";position:absolute;inset-inline-start:2.2rem;top:4.4rem;bottom:-2.2rem;border-inline-start:1px dashed #c9a96a88}
@media(min-width:768px){.stp{grid-template-columns:repeat(4,1fr);gap:1.5rem}.stp li{flex-direction:column;align-items:center;text-align:center}
 .stp li:not(:last-child):after{top:2.2rem;bottom:auto;height:0;width:calc(100% - 3.7rem);inset-inline-start:calc(50% + 2.6rem);border-inline-start:0;border-top:1px dashed #c9a96a88}}
/* location */
.loc{display:grid;border:1px solid #c9a96a44;background:#0b0b0b;overflow:hidden}
@media(min-width:1024px){.loc{grid-template-columns:1.05fr 1fr}}
.loc .li{min-height:18rem;position:relative}
.pinbg{position:absolute;inset:0;margin:auto;width:4.5rem;height:4.5rem;color:var(--g);z-index:3}
.loc .lp{padding:clamp(1.6rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.loc-ad{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;line-height:1.6}
/* footer + floating controls */
.fk a{padding-block:.35rem}.fk h4{font-size:1rem}
.fl a,.fl button{transition:background .3s,transform .3s}.fl a:hover,.fl button:hover{background:var(--g2);transform:translateY(-2px)}
summary{padding-block:.2rem}summary:focus-visible{outline-offset:6px}
/* header WhatsApp button: the legacy ".btn.hidden" rule overrode Tailwind's md:block, so it never showed */
@media(min-width:768px){#hd .btn.hidden{display:block}}
/* English hero: tighter metrics so longer copy never reaches the slider controls */
html[lang=en] .sl h1{font-size:clamp(1.9rem,4.2vw,3.6rem)}
html[lang=en] .sl .lead{font-size:1.2rem;line-height:1.55;max-width:36rem}
@media(max-width:768px){html[lang=en] .sl h1{font-size:clamp(1.8rem,7.4vw,2.3rem)}html[lang=en] .sl .lead{font-size:1.08rem;line-height:1.45;margin-block:.8rem 1rem}}
@media(max-height:760px){.hero>.absolute.bottom-10{bottom:1rem}.sl .tx{padding-bottom:4.75rem}.sl .lead{margin-block:1rem 1.2rem}.sl .btn{padding-block:.7rem}}
