:root{
  --cream:#faf4ea; --sand:#f0e6d6; --ink:#2e231a; --brown:#5a4029; --gold:#b08d57; --muted:#7d6e5f; --line:#e4d8c5;
  --serif:"Cormorant Garamond","Noto Naskh Arabic",Georgia,serif;
  --sans:"Inter","Noto Naskh Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.7;font-size:17px;overflow-x:hidden}
html[dir=rtl] body{font-family:"Noto Naskh Arabic","Inter",system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* ---- curtain-opening intro ---- */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none}
.intro .panel{position:absolute;top:0;bottom:0;width:50.5%;background:
  repeating-linear-gradient(90deg,#5a4029 0 26px,#4d3622 26px 52px)}
.intro .left{left:0;transform-origin:left}.intro .right{right:0;transform-origin:right}
.intro img{position:relative;width:min(260px,60vw);animation:logoFade 1.9s ease forwards}
.intro.go .left{animation:openL 1.5s cubic-bezier(.77,0,.18,1) .9s forwards}
.intro.go .right{animation:openR 1.5s cubic-bezier(.77,0,.18,1) .9s forwards}
.intro.go{animation:hide 0s 2.5s forwards}
@keyframes openL{to{transform:translateX(-102%) scaleX(.6)}}
@keyframes openR{to{transform:translateX(102%) scaleX(.6)}}
@keyframes logoFade{0%{opacity:0;transform:scale(.92)}25%,60%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hide{to{visibility:hidden}}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(250,244,234,.88);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.top.scrolled{border-color:var(--line);box-shadow:0 4px 20px rgba(60,40,20,.06)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.logo img{height:30px;width:auto}
.top nav{display:none;gap:28px;font-size:.95rem}
.top nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--brown)}
@media(min-width:760px){.top nav{display:flex}}
.langs{display:flex;gap:4px}
.langs a{text-decoration:none;font-size:.82rem;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.langs a[aria-current]{background:var(--brown);border-color:var(--brown);color:#fff}

/* ---- hero ---- */
.hero{padding:44px 0 70px;overflow:hidden;background:
  radial-gradient(60% 50% at 80% 20%,rgba(176,141,87,.18),transparent 70%),
  radial-gradient(50% 50% at 10% 90%,rgba(90,64,41,.08),transparent 70%)}
.hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr;min-height:560px}}
.eyebrow{letter-spacing:.28em;font-size:.72rem;color:var(--gold);font-weight:600;margin-bottom:14px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.1;color:var(--brown)}
html[dir=rtl] .hero h1{line-height:1.45;letter-spacing:0}
.lead{color:var(--muted);font-size:1.12rem;margin:18px 0 30px;max-width:480px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:13px 28px;border-radius:999px;background:var(--brown);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid var(--brown);transition:transform .25s,background .25s,box-shadow .25s}
.btn:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,40,20,.25)}
.btn.ghost{background:transparent;color:var(--brown)}
.btn.ghost:hover{background:var(--brown);color:#fff}
.hero-art{position:relative;height:420px}
@media(min-width:900px){.hero-art{height:540px}}
.hero-art img{position:absolute;border-radius:18px;object-fit:cover;box-shadow:0 24px 50px rgba(60,40,20,.28);animation:rise 1s cubic-bezier(.2,.7,.2,1) both;will-change:transform}
.hero-art .h1{width:52%;height:78%;inset-inline-start:2%;top:8%;animation-delay:2.2s}
.hero-art .h2{width:46%;height:60%;inset-inline-end:2%;top:0;animation-delay:2.4s}
.hero-art .h3{width:42%;height:46%;inset-inline-end:14%;bottom:0;animation-delay:2.6s;border:6px solid var(--cream)}
@keyframes rise{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}

/* ---- sections ---- */
.sec{padding:78px 0}.sec.alt{background:var(--sand)}
.head{text-align:center;margin-bottom:30px}
.head h2{font-family:var(--serif);font-size:clamp(2rem,5vw,2.9rem);color:var(--brown);font-weight:600;line-height:1.3}
.head p{color:var(--muted)}
.head::after{content:"";display:block;width:54px;height:2px;background:var(--gold);margin:14px auto 0}

.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px}
.filters button{font:inherit;font-size:.9rem;background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 20px;border-radius:999px;cursor:pointer;transition:all .25s}
.filters button:hover{border-color:var(--gold);color:var(--brown)}
.filters button.on{background:var(--brown);border-color:var(--brown);color:#fff}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1040px){.gallery{grid-template-columns:repeat(4,1fr)}}
.tile{display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;position:relative;background:var(--line);cursor:zoom-in}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"+";position:absolute;inset-inline-end:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(250,244,234,.92);color:var(--brown);display:grid;place-items:center;font-size:1.3rem;opacity:0;transform:scale(.6);transition:.3s}
.tile:hover::after{opacity:1;transform:none}
.tile.hide{display:none}
.tile.pop{animation:pop .5s ease both}
@keyframes pop{from{opacity:0;transform:scale(.94)}}

.values{display:grid;gap:18px}
@media(min-width:760px){.values{grid-template-columns:repeat(3,1fr);gap:24px}}
.value{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:transform .3s,box-shadow .3s}
.value:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(60,40,20,.12)}
.num{font-family:var(--serif);font-size:2.4rem;color:var(--gold);line-height:1}
.value h3{font-family:var(--serif);font-size:1.5rem;color:var(--brown);margin:8px 0 4px}
.value p{color:var(--muted);font-size:.98rem}

.contact-grid{display:grid;gap:26px}
@media(min-width:860px){.contact-grid{grid-template-columns:1fr 1.3fr}}
.info h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:18px 0 4px;font-weight:600}
.info h3:first-child{margin-top:0}
.phone{direction:ltr;unicode-bidi:embed;display:inline-block;font-size:1.25rem;text-decoration:none;color:var(--brown);font-weight:500}
.phone:hover{color:var(--gold)}
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.social a{text-decoration:none;font-size:.9rem;padding:7px 18px;border:1px solid var(--line);border-radius:999px;transition:.25s}
.social a:hover{background:var(--brown);border-color:var(--brown);color:#fff}
.map iframe{width:100%;height:100%;min-height:340px;border:0;border-radius:18px;box-shadow:0 14px 36px rgba(60,40,20,.14)}

footer{background:var(--brown);color:#e9dcc8;text-align:center;padding:36px 0 46px;font-size:.85rem}
footer img{margin:0 auto 10px;filter:brightness(0) invert(.92);opacity:.9}

.wa-float{position:fixed;bottom:18px;inset-inline-end:18px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:30;animation:pulse 2.6s infinite 4s}
.wa-float svg{width:31px;height:31px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 8px 22px rgba(0,0,0,.28)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 8px 22px rgba(0,0,0,.28)}}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;background:rgba(20,13,8,.93);z-index:60;display:grid;place-items:center;padding:16px}
.lb[hidden]{display:none}
.lb img{max-width:min(92vw,900px);max-height:88vh;border-radius:10px;animation:pop .35s ease}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:1.8rem;cursor:pointer;line-height:1}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb .x{top:16px;right:16px}.lb .prev{left:12px}.lb .next{right:12px}
.lb .nav{top:50%;translate:0 -50%}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.intro{display:none}
}