:root{
  --cream:#F5EFE1;
  --wood:#6B4226;
  --wood-dark:#4A2D1A;
  --charcoal:#1A1714;
  --red:#A8342A;
  --gold:#D99A2B;
  --green:#3F6B3A;
  --navy:#1C3F66;
  --ink:#2A241D;
  --paper:#FBF7EF;
  --font-display:'Aref Ruqaa', serif;
  --font-body:'Tajawal', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  direction:rtl;
  line-height:1.8;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---------- Top bar (Google rating + social) ---------- */
.topbar{
  position:fixed;
  top:0; right:0; left:0;
  z-index:120;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6vw;
  background:var(--charcoal);
  border-bottom:1px solid rgba(217,154,43,0.35);
  font-size:12.5px;
}
.topbar__rating{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--gold);
  font-weight:700;
  white-space:nowrap;
}
.topbar__star{width:15px; height:15px; fill:var(--gold); flex-shrink:0;}
.topbar__social{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
}
.topbar__handle{color:var(--paper); opacity:.85; font-weight:600; letter-spacing:.3px;}
.topbar__social a{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--paper);
  opacity:.85;
  transition:opacity .2s ease, color .2s ease;
}
.topbar__social a:hover{opacity:1; color:var(--gold);}
.topbar__social svg{width:100%; height:100%; fill:currentColor;}
@media (max-width:640px){
  .topbar{padding:0 4.5vw; font-size:11px; gap:6px;}
  .topbar__handle{display:none;}
  .topbar__social{gap:8px;}
  .topbar__social a{width:17px; height:17px;}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  top:38px; right:0; left:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 6vw;
  background:rgba(26,23,20,0.0);
  transition:background .35s ease, padding .35s ease;
}
.nav.scrolled{
  background:rgba(26,23,20,0.92);
  padding:12px 6vw;
}
.nav__brand{
  font-family:var(--font-display);
  color:var(--paper);
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.15;
}
.nav__logo{
  height:48px; width:auto; object-fit:contain;
}
.nav__brand .brand__text{display:flex; flex-direction:column; align-items:flex-start;}
.nav__brand .brand__small{
  font-size:11px;
  color:var(--red);
  letter-spacing:1px;
}
.nav__brand .brand__big{
  font-size:17px;
}
footer .nav__brand.footer__brand{ flex-direction:column; gap:8px; margin-bottom:10px; }
footer .footer__logo{ height:84px; width:auto; object-fit:contain; }
footer .nav__brand .brand__text{ align-items:center; }
footer .nav__brand .brand__big{ font-size:20px; }
.nav__links{
  display:flex;
  gap:32px;
  list-style:none;
  font-size:15px;
}
.nav__links a{
  color:var(--paper);
  opacity:.85;
  transition:opacity .2s;
}
.nav__links a:hover{opacity:1; color:var(--gold);}
.nav__toggle{display:none; color:var(--paper); font-size:26px; background:none; border:none; cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--paper);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:url('images/storefront.jpg') center 30%/cover no-repeat;
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,14,.55) 0%, rgba(20,17,14,.55) 55%, rgba(20,17,14,.9) 100%);
}
.hero__content{
  position:relative;
  z-index:2;
  padding:0 6vw;
  opacity:0;
  transform:translateY(18px);
  animation:heroIn 1.1s ease forwards .25s;
}
@keyframes heroIn{ to{opacity:1; transform:translateY(0);} }
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(34px,6.2vw,64px);
  line-height:1.15;
  margin-bottom:18px;
}
.hero__tagline{
  font-size:17px;
  color:#E9DFC9;
  max-width:480px;
  margin:0 auto 34px;
}
.hero__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.hero__cta{
  display:inline-block;
  background:var(--red);
  color:var(--paper);
  padding:14px 36px;
  border-radius:4px;
  font-size:15px;
  letter-spacing:.5px;
  transition:transform .25s ease, background .25s ease;
}
.hero__cta:hover{background:#8f2b22; transform:translateY(-2px);}
.hero__google{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(251,247,239,0.95);
  color:var(--ink);
  padding:13px 24px;
  border-radius:4px;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.2px;
  transition:transform .25s ease, background .25s ease;
}
.hero__google:hover{background:#fff; transform:translateY(-2px);}
.hero__google-icon{width:20px; height:20px; flex-shrink:0;}
.hero__scroll{
  position:absolute; bottom:28px; right:50%; transform:translateX(50%);
  color:var(--paper); opacity:.6; font-size:12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.hero__scroll span{width:1px; height:32px; background:var(--paper); animation:scrollLine 1.8s ease-in-out infinite;}
@keyframes scrollLine{0%{opacity:.1;} 50%{opacity:.8;} 100%{opacity:.1;}}

/* ---------- Sadu woven divider (signature element) ---------- */
.weave{
  width:100%;
  height:34px;
  display:block;
  background:var(--paper);
}
.weave path{
  stroke-dasharray:900;
  stroke-dashoffset:900;
  transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
}
.weave.in-view path{stroke-dashoffset:0;}
.weave.dark{background:var(--charcoal);}

/* ---------- Section basics ---------- */
section{padding:110px 0;}
.section__eyebrow{
  font-size:13px; letter-spacing:3px; color:var(--red); margin-bottom:12px;
}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,48px);
  margin-bottom:22px;
  color:var(--charcoal);
}
.section__lead{
  max-width:560px;
  color:#5b5346;
  font-size:16px;
}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- About ---------- */
.about{background:var(--paper);}
.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about__img{
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.35);
}
.about__img img{height:520px; object-fit:cover; width:100%;}
.about__text p{margin-top:16px; color:#5b5346; font-size:15.5px;}
.about__stats{
  display:flex; gap:36px; margin-top:36px;
}
.about__stat b{
  display:block; font-family:var(--font-display); font-size:30px; color:var(--wood-dark);
}
.about__stat span{font-size:13px; color:#8a8072;}

/* ---------- Menu ---------- */
.menu{background:var(--charcoal); color:var(--paper);}
.menu .section__title{color:var(--paper);}
.menu .section__lead{color:#c8bfa9;}
.menu__tabs{
  display:flex; flex-wrap:wrap; gap:12px; margin:40px 0 44px;
}
.menu__tab{
  border:1px solid rgba(245,239,225,.25);
  background:transparent;
  color:var(--paper);
  padding:9px 20px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:14px;
  cursor:pointer;
  transition:all .2s;
}
.menu__tab.active, .menu__tab:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--charcoal);
}
.menu__list{display:grid; gap:26px;}
.menu__item{
  display:flex; justify-content:space-between; gap:20px;
  padding-bottom:22px;
  border-bottom:1px dashed rgba(245,239,225,.18);
}
.menu__item h4{font-family:var(--font-display); font-size:21px; margin-bottom:6px; font-weight:400;}
.menu__item p{font-size:14px; color:#a99e88; max-width:420px;}
.menu__kcal{display:inline-block; margin-top:4px; font-size:11px; color:#8f8468; border:1px solid rgba(245,239,225,.25); border-radius:20px; padding:2px 10px;}
.menu__price{
  font-family:var(--font-display); font-size:20px; color:var(--gold); white-space:nowrap;
}

/* ---------- Gallery ---------- */
.gallery{background:var(--paper);}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:160px;
  gap:12px;
  margin-top:40px;
}
.gallery__grid img{width:100%; height:100%; object-fit:cover; border-radius:4px; transition:transform .5s ease;}
.gallery__grid a{overflow:hidden; border-radius:4px; display:block;}
.gallery__grid a:hover img{transform:scale(1.06);}
.gallery__grid a:nth-child(1){grid-column:span 2; grid-row:span 2;}
.gallery__grid a:nth-child(4){grid-row:span 2;}
.gallery__note{margin-top:18px; font-size:13px; color:#a89a80; text-align:center;}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,12,9,.94);
  display:none; align-items:center; justify-content:center; flex-direction:column;
  padding:40px;
}
.lightbox.open{display:flex;}
.lightbox__img{max-width:88vw; max-height:78vh; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox__caption{color:var(--paper); font-size:14px; margin-top:16px; text-align:center; max-width:70vw;}
.lightbox__close{
  position:absolute; top:24px; left:24px; font-size:32px; color:var(--paper); background:none; border:none; cursor:pointer; line-height:1;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(245,239,225,.1); border:1px solid rgba(245,239,225,.3); color:var(--paper);
  width:44px; height:44px; border-radius:50%; font-size:16px; cursor:pointer; transition:background .2s;
}
.lightbox__nav:hover{background:var(--red); border-color:var(--red);}
.lightbox__prev{right:24px;}
.lightbox__next{left:24px;}
@media (max-width:600px){
  .lightbox__nav{width:38px; height:38px;}
  .lightbox__close{top:14px; left:14px;}
}

/* ---------- Contact ---------- */
.contact{background:var(--wood-dark); color:var(--paper);}
.contact .section__title{color:var(--paper);}
.contact .section__lead{color:#dccbb3;}
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:40px;
}
.contact__info{display:flex; flex-direction:column; gap:22px;}
.contact__row{display:flex; gap:14px; align-items:flex-start; font-size:15px;}
.contact__row b{display:block; margin-bottom:2px; color:var(--gold); font-size:13px; letter-spacing:.5px;}
.map__frame{
  border:none; width:100%; height:260px; border-radius:6px; margin-top:8px;
  filter:grayscale(.2) contrast(1.05);
}
.map__directions{
  display:inline-block; margin-top:8px; font-size:13px; color:var(--gold); text-decoration:underline;
}
.social{display:flex; gap:14px; margin-top:10px;}
.social a{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,239,225,.3);
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.social a svg{width:34px; height:34px; fill:var(--paper); transition:fill .2s;}
.social a:hover{background:var(--gold); border-color:var(--gold);}
.social a:hover svg{fill:var(--wood-dark);}

/* Hero social row (light icons on dark hero photo) */
.hero__social{display:flex; gap:12px; justify-content:center; margin-top:26px;}
.hero__social a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(245,239,225,.4);
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.hero__social a svg{width:32px; height:32px; fill:var(--paper); transition:fill .2s;}
.hero__social a:hover{background:var(--red); border-color:var(--red);}
.hero__social a:hover svg{fill:var(--paper);}

/* Footer social row */
.footer__social{display:flex; gap:12px; justify-content:center; margin:14px 0;}
.footer__social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(169,158,136,.4);
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.footer__social a svg{width:29px; height:29px; fill:#a99e88; transition:fill .2s;}
.footer__social a:hover{background:var(--gold); border-color:var(--gold);}
.footer__social a:hover svg{fill:var(--wood-dark);}

.qr-block{
  display:flex; align-items:center; gap:14px;
  background:rgba(245,239,225,.06);
  border:1px solid rgba(245,239,225,.2);
  border-radius:8px;
  padding:14px 16px;
  margin-top:6px;
}
.qr-block img{width:64px; height:64px; border-radius:4px; background:#fff; padding:4px;}
.qr-block span{font-size:13px; color:#dccbb3; max-width:180px;}

.form{display:flex; flex-direction:column; gap:16px;}
.form input, .form textarea{
  background:rgba(245,239,225,.06);
  border:1px solid rgba(245,239,225,.25);
  border-radius:4px;
  padding:13px 16px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:14px;
}
.form input::placeholder, .form textarea::placeholder{color:#b9ac93;}
.form textarea{min-height:110px; resize:vertical;}
.form button{
  align-self:flex-start;
  background:var(--red);
  color:var(--paper);
  border:none;
  padding:13px 32px;
  border-radius:4px;
  font-size:14px;
  cursor:pointer;
  transition:background .2s;
}
.form button:hover{background:#8f2b22;}

/* ---------- Footer ---------- */
footer{
  background:var(--charcoal);
  color:#a99e88;
  text-align:center;
  padding:32px 6vw;
  font-size:13px;
}
footer .nav__brand{display:block; margin-bottom:10px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .about__grid, .contact__grid{grid-template-columns:1fr;}
  .about__img img{height:340px;}
  .gallery__grid{grid-template-columns:repeat(2,1fr);}
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:72vw; height:100vh;
    background:var(--charcoal); flex-direction:column; padding:100px 32px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .nav__links.open{transform:translateX(0);}
  .nav__toggle{display:block;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}