/* =========================================================
   أبو السيد — Shared design system
   Heritage Egyptian — burgundy / gold / cream / soft black
   English display font: Cause (with Cormorant Garamond fallback, upright)
   ========================================================= */

:root{
  --burgundy:#5E1A23;
  --burgundy-deep:#3F1119;
  --burgundy-ink:#2A0D12;
  --gold:#B68A3E;
  --gold-soft:#C9A766;
  --brass:#8C6A2E;
  --cream:#F4ECDC;
  --cream-warm:#EBDFC6;
  --paper:#FAF5EA;
  --ink:#1B1410;
  --ink-soft:#2D241D;
  --muted:#7A6A57;
  --line:rgba(27,20,16,.12);
  --line-gold:rgba(182,138,62,.35);
  --shadow-lg: 0 30px 60px -30px rgba(42,13,18,.45), 0 12px 24px -16px rgba(42,13,18,.25);
  --shadow-md: 0 14px 30px -18px rgba(42,13,18,.35);
  --radius: 6px;
  --radius-lg: 14px;

  /* English display font — replace Cause if you upload the file.
     All fallbacks are non-italic. */
  --font-en: "Cause", "Cormorant Garamond", "Libre Caslon Text", "DM Serif Display", Georgia, serif;
  --font-ar: "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ar);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* All English display text — upright, never italic */
.eyebrow,
.serif,
.brand-en,
h2.section-title .en,
.hero h1 .deco,
.hero .subline,
.dish .price,
.app-card .tag,
.reserve-img .ribbon,
.reserve-img .caption .en,
.pack .pcount,
.branch .photo .city,
.branch .photo .label,
.branch h3 small,
.gallery-grid .g .ph::after,
.story-img .ph-text,
.review .quote-mark,
.review .body,
.review .avatar,
.stat .num,
.lantern-tag,
.app-logo,
.footer-brand .tagline{
  font-family: var(--font-en);
  font-style: normal !important;
}

.eyebrow{
  font-weight:500;
  color:var(--gold);
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before, .eyebrow::after{
  content:""; width:38px; height:1px; background:var(--gold-soft);
}
.eyebrow.left-only::after{display:none}
.eyebrow.right-only::before{display:none}

.container{max-width:1240px;margin:0 auto;padding:0 28px}
section{position:relative}
.section-pad{padding:120px 0}

/* ---------- Arabesque dividers ---------- */
.divider{
  display:flex; align-items:center; justify-content:center; gap:18px;
  color:var(--gold); padding:8px 0;
}
.divider .line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--gold-soft),transparent);max-width:240px}
.divider svg{width:46px;height:18px;opacity:.85}

/* ====================  TOP STRIP ==================== */
.topstrip{
  background:var(--burgundy-deep);
  color:var(--cream);
  font-size:13px;
  border-bottom:1px solid rgba(182,138,62,.25);
}
.topstrip .row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 28px;max-width:1240px;margin:0 auto;
}
.topstrip .hours{display:inline-flex;align-items:center;gap:10px;color:var(--cream-warm)}
.topstrip .hours svg{width:14px;height:14px;color:var(--gold-soft)}
.topstrip .right{display:inline-flex;align-items:center;gap:18px}
.social-row{display:inline-flex;gap:6px}
.social-row a{
  width:30px;height:30px;display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid rgba(201,167,102,.35); color:var(--gold-soft);
  transition:.25s ease;
}
.social-row a:hover{background:var(--gold);color:var(--burgundy-deep);border-color:var(--gold)}
.social-row svg{width:13px;height:13px}
.lang-toggle{
  display:inline-flex;align-items:center;border:1px solid rgba(201,167,102,.45);
  border-radius:999px; overflow:hidden; font-size:12px; letter-spacing:.08em;
}
.lang-toggle button{padding:5px 12px;color:var(--cream-warm);font-family:var(--font-en)}
.lang-toggle button.active{background:var(--gold);color:var(--burgundy-deep);font-weight:700}

/* ====================  HEADER  ==================== */
header.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(250,245,234,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:all .35s ease;
}
header.nav.shrunk{
  background:rgba(94,26,35,.97);
  color:var(--cream);
  border-bottom-color:rgba(182,138,62,.3);
}
header.nav.shrunk .nav-link{color:var(--cream-warm)}
header.nav.shrunk .brand-mark{color:var(--cream)}
header.nav.shrunk .brand-mark .mark-ring{border-color:var(--gold-soft)}
header.nav.shrunk .brand-mark .mark-ring::before{background:var(--gold)}
header.nav.shrunk .brand-mark .brand-ar{color:var(--cream)}
header.nav.shrunk .btn-ghost{color:var(--cream);border-color:rgba(201,167,102,.45)}
header.nav.shrunk .btn-ghost:hover{background:var(--gold);color:var(--burgundy-deep)}

.nav-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 28px;max-width:1240px;margin:0 auto;
  transition:padding .35s ease;
}
header.nav.shrunk .nav-row{padding:10px 28px}

.brand-mark{
  display:inline-flex;align-items:center;gap:14px; color:var(--burgundy);
}
.brand-mark .mark-ring{
  width:54px;height:54px;border-radius:50%;
  border:1.5px solid var(--gold);
  display:grid;place-items:center;position:relative;
  transition:.35s;
}
header.nav.shrunk .brand-mark .mark-ring{width:44px;height:44px}
.brand-mark .mark-ring::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  background:var(--burgundy); opacity:.08;
}
.brand-mark .mark-glyph{
  position:relative; font-family:var(--font-ar);
  font-weight:700; font-size:18px; color:var(--burgundy);
}
header.nav.shrunk .brand-mark .mark-glyph{color:var(--gold)}
.brand-mark .brand-name{
  display:flex;flex-direction:column;line-height:1;gap:4px;
}
.brand-mark .brand-ar{font-weight:800;font-size:22px;letter-spacing:.02em;white-space:nowrap}
.brand-mark .brand-en{font-size:13px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;font-weight:500;white-space:nowrap}

.nav-links{display:flex;gap:30px;align-items:center}
.nav-link{
  font-size:14.5px;font-weight:500;color:var(--ink-soft);
  position:relative;padding:6px 0; transition:.2s;
}
.nav-link::after{
  content:"";position:absolute;left:50%;bottom:0;height:1px;width:0;
  background:var(--gold);transition:.3s;
}
.nav-link:hover, .nav-link.active{color:var(--burgundy)}
.nav-link:hover::after, .nav-link.active::after{width:100%;left:0}
header.nav.shrunk .nav-link.active{color:var(--gold-soft)}
header.nav.shrunk .nav-link.active::after{background:var(--gold-soft)}

.nav-cta{display:flex;gap:10px;align-items:center}

/* Mobile menu toggle */
.menu-toggle{
  display:none; width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-gold); align-items:center; justify-content:center;
}
.menu-toggle svg{width:18px;height:18px;color:var(--burgundy)}
header.nav.shrunk .menu-toggle{border-color:rgba(201,167,102,.4)}
header.nav.shrunk .menu-toggle svg{color:var(--cream)}

/* ----- Buttons ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;font-size:14.5px;font-weight:600;
  border-radius:2px; letter-spacing:.04em;
  transition:.25s ease;
  border:1px solid transparent;
  position:relative; overflow:hidden;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn-primary{
  background:var(--burgundy); color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(182,138,62,.5);
}
.btn-primary:hover{background:var(--burgundy-deep);box-shadow:inset 0 0 0 1px var(--gold), 0 14px 28px -14px rgba(94,26,35,.6)}
.btn-gold{background:var(--gold);color:var(--burgundy-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-1px)}
.btn-outline{
  background:transparent; color:var(--burgundy);
  border-color:var(--burgundy);
}
.btn-outline:hover{background:var(--burgundy);color:var(--cream)}
.btn-outline.light{color:var(--cream);border-color:var(--gold-soft)}
.btn-outline.light:hover{background:var(--gold);color:var(--burgundy-deep);border-color:var(--gold)}
.btn-ghost{
  background:transparent; color:var(--ink-soft);
  border-color:var(--line);
  padding:10px 18px; font-size:13.5px;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--burgundy)}
.btn-lg{padding:18px 34px;font-size:15.5px}

/* ----- Section headers ----- */
h2.section-title{
  font-family:var(--font-ar);
  font-weight:800;
  font-size: clamp(40px, 5vw, 64px);
  line-height:1.05; color:var(--burgundy);
  margin:14px 0 20px; letter-spacing:-.01em;
}
h2.section-title .en{
  display:block;
  font-weight:500; font-size:.32em; color:var(--gold); letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:14px;
}
.sect-head{text-align:center; max-width:680px; margin:0 auto 64px}
.sect-head p.sub{color:var(--muted); font-size:17px; margin-top:8px}

/* ====================  PAGE HERO (interior pages) ==================== */
.page-hero{
  position:relative; color:var(--cream); overflow:hidden;
  padding:90px 0 110px;
  background:var(--burgundy-deep);
  isolation:isolate;
}
.page-hero .ph-bg{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, var(--burgundy-deep) 0%, var(--burgundy-ink) 100%);
}
.page-hero .ph-img{
  position:absolute; inset:0; z-index:-1; opacity:.32;
  background-size:cover; background-position:center;
  filter: saturate(.85) contrast(1.05);
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23B68A3E' stroke-width='.6'><path d='M40 0 L80 40 L40 80 L0 40 Z'/><path d='M40 14 L66 40 L40 66 L14 40 Z'/><circle cx='40' cy='40' r='6'/></g></svg>");
  background-size:80px 80px; opacity:.08;
}
.page-hero .crumbs{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft);
  margin-bottom:22px;
}
.page-hero .crumbs span{opacity:.5}
.page-hero h1{
  font-family:var(--font-ar);
  font-weight:800;
  font-size: clamp(48px, 7vw, 90px);
  line-height:1; margin:0 0 14px; color:var(--cream);
  letter-spacing:-.01em;
}
.page-hero h1 .en{
  display:block; font-family:var(--font-en); font-weight:500;
  color:var(--gold); font-size:.32em; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:14px;
}
.page-hero .lead{
  font-size:19px; color:var(--cream-warm); max-width:640px; line-height:1.7;
}

/* ====================  CARDS (shared) ==================== */
.dish{text-align:center; position:relative; padding-top:8px}
.dish .disc{
  width:170px;height:170px;border-radius:50%;margin:0 auto;
  background:#3a1218 center/cover no-repeat;
  border:1px solid var(--line-gold);
  box-shadow:0 18px 30px -18px rgba(94,26,35,.4), inset 0 0 0 6px rgba(250,245,234,.15);
  transition:.4s cubic-bezier(.2,.7,.2,1);
  position:relative;
  overflow:hidden;
}
.dish .disc::after{
  content:""; position:absolute; inset:10px; border-radius:50%;
  border:1px dashed rgba(250,245,234,.25); pointer-events:none;
}
.dish:hover .disc{transform:translateY(-6px) rotate(-2deg); box-shadow:0 30px 50px -22px rgba(94,26,35,.55)}
.dish h3{
  font-family:var(--font-ar); font-weight:700; font-size:21px;
  color:var(--burgundy-ink); margin:22px 0 6px;
}
.dish p{color:var(--muted); font-size:14.5px; margin:0 0 12px; min-height:42px}
.dish .price{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--gold); font-size:18px;
}
.dish .price small{font-family:var(--font-ar);font-weight:400;font-size:12px;color:var(--muted)}

/* ====================  FOOTER ==================== */
footer.site-footer{
  background:var(--burgundy-ink); color:var(--cream); position:relative;
  padding:90px 0 30px;
}
footer.site-footer::before{
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23B68A3E' stroke-width='.4' opacity='.5'><path d='M40 0 L80 40 L40 80 L0 40 Z'/><circle cx='40' cy='40' r='8'/></g></svg>");
  background-size:80px; opacity:.06; pointer-events:none;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px;
  position:relative; align-items:start;
}
.footer-grid h4{
  font-family:var(--font-ar); font-weight:700; font-size:16px; color:var(--gold-soft);
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 22px;
}
.footer-grid p, .footer-grid li{font-size:14.5px; color:rgba(244,236,220,.75); line-height:1.9}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid ul li a{transition:.2s; display:inline-block}
.footer-grid ul li a:hover{color:var(--gold)}

/* Branch (location) columns: uniform vertical rhythm + right-aligned phone */
.footer-loc p{margin:0 0 12px}
.footer-loc p:last-child{margin-bottom:0}
.footer-loc .num{
  unicode-bidi:embed; letter-spacing:.04em;
}

.footer-brand .brand-mark{color:var(--cream)}
.footer-brand .brand-mark .mark-glyph{color:var(--gold)}
.footer-brand .brand-mark .brand-ar{color:var(--cream)}
.footer-brand .tagline{
  color:var(--gold-soft);
  margin-top:18px; font-size:16px; max-width:300px; line-height:1.6;
}
.footer-social{display:flex;gap:8px;margin-top:24px}
.footer-social a{
  width:38px;height:38px;border:1px solid rgba(201,167,102,.35); border-radius:50%;
  display:grid;place-items:center; color:var(--gold-soft); transition:.25s;
}
.footer-social a:hover{background:var(--gold);color:var(--burgundy-ink);border-color:var(--gold)}
.footer-social svg{width:15px;height:15px}

.footer-bottom{
  border-top:1px solid rgba(201,167,102,.18); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:13px; color:rgba(244,236,220,.5);
}
.footer-bottom a:hover{color:var(--gold-soft)}

/* ====================  WHATSAPP FAB ==================== */
.wa-fab{
  position:fixed; bottom:26px; left:26px; z-index:80;
  width:62px; height:62px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.7);
  animation: pulseWa 2.6s ease-out infinite;
  transition:transform .25s;
}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:30px;height:30px}
@keyframes pulseWa{
  0%{box-shadow:0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 20px rgba(37,211,102,0)}
  100%{box-shadow:0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,0)}
}

/* ====================  REVEAL ==================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ====================  FORMS (shared) ==================== */
.form-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  padding:50px 48px;
  border-radius:6px;
  position:relative;
}
.form-card::before{
  content:""; position:absolute; top:14px; right:14px; bottom:14px; left:14px;
  border:1px solid var(--line-gold); pointer-events:none; border-radius:3px;
}
.form-card .form-title{
  font-family:var(--font-ar); font-weight:700; font-size:24px;
  color:var(--burgundy); margin:0 0 6px;
}
.form-card .form-sub{color:var(--muted); margin-bottom:30px; font-size:14.5px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; position:relative;}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{
  font-size:12px; color:var(--ink-soft); letter-spacing:.1em; font-weight:600;
  text-transform:uppercase;
}
.field input, .field select, .field textarea{
  font:inherit; padding:12px 14px; border:1px solid var(--line);
  background:var(--paper); border-radius:3px; color:var(--ink);
  transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 3px rgba(182,138,62,.15);
}
.field textarea{resize:vertical;min-height:80px}

/* image-placeholder card */
.image-frame{
  position:relative; border-radius:6px; overflow:hidden;
  border:1px solid var(--line-gold);
  background:#3a1218 center/cover no-repeat;
  box-shadow:var(--shadow-lg);
}
.image-frame .corner{
  position:absolute; width:32px; height:32px; border:1px solid var(--gold); pointer-events:none;
}
.image-frame .corner.tl{top:10px;left:10px;border-bottom:0;border-right:0}
.image-frame .corner.tr{top:10px;right:10px;border-bottom:0;border-left:0}
.image-frame .corner.bl{bottom:10px;left:10px;border-top:0;border-right:0}
.image-frame .corner.br{bottom:10px;right:10px;border-top:0;border-left:0}

/* ----- Responsive ----- */
@media (max-width: 1080px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:40px}
}
@media (max-width: 820px){
  .nav-links{
    position:absolute; top:100%; right:0; left:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:0;
    max-height:0; overflow:hidden; transition:.35s;
  }
  header.nav.shrunk .nav-links{background:var(--burgundy-deep)}
  .nav-links.open{max-height:60vh;padding:14px 0}
  .nav-links a{padding:14px 28px; width:100%; border-bottom:1px solid var(--line)}
  .menu-toggle{display:inline-flex}
  .nav-cta .btn{padding:10px 18px;font-size:13px}
}
@media (max-width: 720px){
  .section-pad{padding:80px 0}
  .topstrip .row{flex-direction:column;gap:8px;font-size:12px;text-align:center}
  .nav-row{padding:14px 18px}
  header.nav.shrunk .nav-row{padding:8px 18px}
  .container{padding:0 20px}
  .footer-grid{grid-template-columns:1fr; gap:34px}
  .form-card{padding:32px 22px}
  .form-grid{grid-template-columns:1fr}
  .wa-fab{width:56px;height:56px;bottom:18px;left:18px}
}
@media (max-width: 540px){
  /* Header: relieve crowding between logo, menu toggle and CTA */
  .nav-row{gap:12px; padding:12px 16px}
  header.nav.shrunk .nav-row{padding:10px 16px}
  .brand-mark{gap:10px; min-width:0}
  .brand-mark .mark-ring{width:44px; height:44px}
  .brand-mark .brand-ar{font-size:18px}
  .brand-mark .brand-en{font-size:9.5px; letter-spacing:.2em}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:9px 14px; font-size:12.5px}
  .menu-toggle{width:38px; height:38px}
}