/* ============================================================
   FORNELLO — Home of Italian Pizza
   Roxy, Heliopolis, Cairo
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:      #0e0c0b;
  --ink-1:    #14100e;
  --ink-2:    #1b1512;
  --ink-3:    #251d18;
  --line:     rgba(246,239,228,.11);
  --line-2:   rgba(246,239,228,.18);

  --cream:    #f7f1e7;
  --muted:    #a99885;
  --muted-2:  #7d6f60;

  --ember:    #e2452a;
  --ember-hi: #ff6746;
  --gold:     #e0a94a;
  --basil:    #5c8a54;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ar:    "Cairo", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;

  --wrap: 1200px;
  --r:    14px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:104px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
dl,dd,dt,ul,li{ margin:0; padding:0; list-style:none; }
iframe{ border:0; }
::selection{ background:var(--ember); color:#fff; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.skip{
  position:fixed; inset-inline-start:-999px; top:12px; z-index:999;
  background:var(--ember); color:#fff; padding:10px 18px; border-radius:99px;
}
.skip:focus{ inset-inline-start:12px; }

/* ---------- arabic mode ---------- */
html[lang="ar"] body{ font-family:var(--ar); }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{ font-family:var(--ar); letter-spacing:0; line-height:1.35; }
html[lang="ar"] .h2 em, html[lang="ar"] .hero__h1 em{ font-style:normal; }
.ar{ font-family:var(--ar); font-size:.82em; font-weight:600; color:var(--muted); }
/* in Arabic the Arabic name leads and the Latin name becomes the sub-label */
html[lang="ar"] .ar{ font-size:1em; font-weight:inherit; color:inherit; order:-1; }
html[lang="ar"] .en{ font-family:var(--sans); font-size:.74em; font-weight:500; color:var(--muted-2); letter-spacing:.02em; }

/* ---------- icons ---------- */
.ic{
  display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto;
  background:currentColor; vertical-align:-.15em;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain;   mask-size:contain;
}
.ic-clock  { -webkit-mask-image:var(--i-clock);  mask-image:var(--i-clock); }
.ic-pin    { -webkit-mask-image:var(--i-pin);    mask-image:var(--i-pin); }
.ic-phone  { -webkit-mask-image:var(--i-phone);  mask-image:var(--i-phone); }
.ic-flame  { -webkit-mask-image:var(--i-flame);  mask-image:var(--i-flame); }
.ic-wheat  { -webkit-mask-image:var(--i-wheat);  mask-image:var(--i-wheat); }
.ic-scooter{ -webkit-mask-image:var(--i-scoot);  mask-image:var(--i-scoot); }
.ic-leaf   { -webkit-mask-image:var(--i-leaf);   mask-image:var(--i-leaf); }
.ic-book   { -webkit-mask-image:var(--i-book);   mask-image:var(--i-book); }
.ic-wa     { -webkit-mask-image:var(--i-wa);     mask-image:var(--i-wa); }
.ic-ig     { -webkit-mask-image:var(--i-ig);     mask-image:var(--i-ig); }
.ic-fb     { -webkit-mask-image:var(--i-fb);     mask-image:var(--i-fb); }
:root{
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 1.9'/%3E%3C/svg%3E");
  --i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.4 7-11.4a7 7 0 1 0-14 0c0 5 7 11.4 7 11.4z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 2.6h3.1a1 1 0 0 1 .94.65l1.3 3.5a1 1 0 0 1-.35 1.15l-1.6 1.18a12.6 12.6 0 0 0 4.93 4.93l1.18-1.6a1 1 0 0 1 1.15-.35l3.5 1.3a1 1 0 0 1 .65.94v3.1a2.1 2.1 0 0 1-2.3 2.1A17.9 17.9 0 0 1 4.5 4.9a2.1 2.1 0 0 1 2.1-2.3z'/%3E%3C/svg%3E");
  --i-flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 22a6.2 6.2 0 0 0 6.2-6.2c0-4.3-3.4-5.4-3.4-9.8 0 0-3.3 1.7-3.3 5.5 0 0-1.8-1.1-1.8-3.3C7.6 9.9 5.8 12.2 5.8 15.8A6.2 6.2 0 0 0 12 22z'/%3E%3C/svg%3E");
  --i-wheat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M12 15c0-2.3 1.9-4.2 4.2-4.2C16.2 13.1 14.3 15 12 15z'/%3E%3Cpath d='M12 15c0-2.3-1.9-4.2-4.2-4.2C7.8 13.1 9.7 15 12 15z'/%3E%3Cpath d='M12 9.4c0-2.3 1.9-4.2 4.2-4.2C16.2 7.5 14.3 9.4 12 9.4z'/%3E%3Cpath d='M12 9.4c0-2.3-1.9-4.2-4.2-4.2C7.8 7.5 9.7 9.4 12 9.4z'/%3E%3C/svg%3E");
  --i-scoot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17.5' r='2.9'/%3E%3Ccircle cx='18.5' cy='17.5' r='2.9'/%3E%3Cpath d='M8.4 17.5h7.2M18.5 14.6V5.6h-3.2M5.5 14.6V9.2h5.1l4.2 5.4'/%3E%3C/svg%3E");
  --i-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5c8.5 2 16.5-3.2 16.5-13.7 0 0-3.2-1-7.4 0S6.2 11 6.2 14.1 4 20.5 4 20.5z'/%3E%3Cpath d='M8.2 16.4c2.1-3.2 5.3-5.3 8.5-6.3'/%3E%3C/svg%3E");
  --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5.2A2.2 2.2 0 0 1 6.2 3H20v18H6.2A2.2 2.2 0 0 1 4 18.8z'/%3E%3Cpath d='M4 17.2h16'/%3E%3C/svg%3E");
  --i-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.22 3.07c.15.2 2.1 3.2 5.08 4.49.7.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.57-.34M12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.89-9.88 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.89a11.82 11.82 0 0 0-3.48-8.41'/%3E%3C/svg%3E");
  --i-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.25' fill='black' stroke='none'/%3E%3C/svg%3E");
  --i-fb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.1 8.7V6.9c0-.8.2-1.3 1.5-1.3h1.6V2.2c-.3 0-1.3-.1-2.4-.1-2.4 0-4.1 1.5-4.1 4.2v2.4H8.2v3.5h2.5V21h3.4v-8.8h2.5l.4-3.5z'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ember); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  padding:.85em 1.6em; border-radius:99px;
  font-weight:600; font-size:.94rem; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--ember{ box-shadow:0 8px 26px -12px var(--ember); }
.btn--ember:hover{ background:var(--ember-hi); box-shadow:0 14px 34px -12px var(--ember); }
.btn--ghost{ --bg:transparent; --fg:var(--cream); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(247,241,231,.06); }
.btn--dark{ --bg:var(--ink); --fg:var(--cream); }
.btn--dark:hover{ --bg:#000; }
.btn--lg{ padding:1.02em 2em; font-size:1rem; }

.linkbtn{
  color:var(--ember-hi); font-weight:600;
  border-bottom:1px solid rgba(255,103,70,.4); padding-bottom:1px;
  transition:border-color .2s,color .2s;
}
.linkbtn:hover{ color:var(--cream); border-color:var(--cream); }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ember-hi);
  margin:0 0 .9rem;
}
html[lang="ar"] .eyebrow{ letter-spacing:0; font-family:var(--ar); }
.h2{ font-size:clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
.h2 em{ font-style:italic; color:var(--gold); }
.sechead{ max-width:640px; margin-bottom:56px; }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead__sub{ color:var(--muted); margin-top:1rem; }

/* ---------- topbar ---------- */
.topbar{
  background:#0a0807; border-bottom:1px solid var(--line);
  font-size:.8rem; color:var(--muted); position:relative; z-index:60;
}
.topbar__in{ display:flex; align-items:center; gap:14px; min-height:42px; padding:6px 0; }
.topbar__item{ white-space:nowrap; }
.topbar__item{ display:inline-flex; align-items:center; gap:.5em; }
.topbar__item .ic{ color:var(--ember); }
.topbar__dot{ opacity:.4; }
.topbar__right{ margin-inline-start:auto; display:flex; align-items:center; gap:14px; }
.topbar__tel{ color:var(--cream); font-weight:600; letter-spacing:.02em; }
.topbar__tel:hover{ color:var(--ember-hi); }
.langtoggle{
  display:inline-flex; border:1px solid var(--line-2); border-radius:99px;
  overflow:hidden; font-size:.72rem; font-weight:700; line-height:1;
}
.langtoggle span{ padding:6px 10px; transition:background .2s,color .2s; }
.langtoggle__on{ background:var(--ember); color:#fff; }
.langtoggle__off{ color:var(--muted); }
html[lang="ar"] .langtoggle__on{ background:none; color:var(--muted); }
html[lang="ar"] .langtoggle__off{ background:var(--ember); color:#fff; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,12,11,.72); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(14,12,11,.94); }
.nav__in{ display:flex; align-items:center; gap:28px; height:74px; }
.nav__brand img{ height:34px; width:auto; }
.nav__links{ display:flex; gap:30px; margin-inline-start:auto; font-size:.9rem; font-weight:500; }
.nav__links a{ position:relative; color:var(--muted); padding:6px 0; transition:color .2s; }
.nav__links a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:1.5px; width:0;
  background:var(--ember); transition:width .28s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after,.nav__links a.is-here::after{ width:100%; }
.nav__links a.is-here{ color:var(--cream); }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__cta{ padding:.7em 1.3em; font-size:.87rem; }
.burger{ display:none; width:34px; height:34px; position:relative; }
.burger span{
  position:absolute; inset-inline:6px; height:2px; background:var(--cream);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:11px; }
.burger span:nth-child(2){ top:16px; }
.burger span:nth-child(3){ top:21px; }
.burger.is-x span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.is-x span:nth-child(2){ opacity:0; }
.burger.is-x span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:min(100svh, 900px); display:flex; align-items:center; padding:90px 0 110px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroDrift 22s ease-in-out infinite alternate; }
@keyframes heroDrift{ to{ transform:scale(1.14) translate3d(-1.5%,-1%,0);} }
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 22% 45%, rgba(14,12,11,.93) 0%, rgba(14,12,11,.72) 42%, rgba(14,12,11,.22) 75%),
    linear-gradient(to top, var(--ink) 2%, rgba(14,12,11,.25) 45%, rgba(14,12,11,.62) 100%);
}
.hero__in{ position:relative; max-width:760px; }
.hero__logo{ height:64px; width:auto; margin-bottom:26px; filter:drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
.hero__h1{ font-size:clamp(2.7rem, 1.4rem + 5.4vw, 5.1rem); margin-bottom:1.1rem; }
.hero__h1 em{ font-style:italic; color:var(--gold); }
.hero__sub{ font-size:clamp(1rem,.95rem + .3vw,1.13rem); color:#dbd0c2; max-width:56ch; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__stats{
  display:flex; flex-wrap:wrap; gap:34px; margin-top:52px;
  padding-top:26px; border-top:1px solid var(--line);
}
.hero__stats li{ display:flex; flex-direction:column; gap:2px; }
.hero__stats b{ font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:-.01em; }
.hero__stats .star{ color:var(--gold); font-size:.85em; margin-inline-start:2px; }
.hero__stats span{ font-size:.8rem; color:var(--muted); }
.hero__scroll{
  position:absolute; bottom:26px; inset-inline-start:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid var(--line-2); border-radius:99px;
}
.hero__scroll span{
  position:absolute; top:7px; inset-inline-start:50%; margin-inline-start:-2px;
  width:4px; height:7px; border-radius:99px; background:var(--ember);
  animation:scrollDot 1.9s ease-in-out infinite;
}
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1;} 60%{ transform:translateY(14px); opacity:0;} }

/* ---------- badge strip ---------- */
.strip{ background:var(--ink-1); border-block:1px solid var(--line); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip__item{
  padding:32px 26px; display:flex; flex-direction:column; gap:3px;
  border-inline-start:1px solid var(--line);
}
.strip__item:first-child{ border-inline-start:0; }
.strip__item .ic{ font-size:1.5rem; color:var(--ember); margin-bottom:10px; }
.strip__item b{ font-size:.98rem; font-weight:600; }
.strip__item span{ font-size:.83rem; color:var(--muted); }

/* ---------- story ---------- */
.story{ padding:clamp(80px,9vw,140px) 0; }
.story__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,90px); align-items:center; }
.story__art{ position:relative; }
.story__img{ border-radius:var(--r-lg); object-fit:cover; }
.story__img--a{ width:100%; aspect-ratio:4/5; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.story__img--b{
  position:absolute; bottom:-42px; inset-inline-end:-34px;
  width:47%; aspect-ratio:1; border:7px solid var(--ink);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.story__badge{
  position:absolute; top:24px; inset-inline-start:-22px;
  background:var(--ember); color:#fff; border-radius:var(--r);
  padding:12px 18px; display:flex; flex-direction:column; line-height:1.15;
  box-shadow:0 18px 40px -18px rgba(226,69,42,.9);
}
.story__badge b{ font-family:var(--serif); font-size:1.35rem; }
.story__badge span{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; opacity:.85; }
.story__copy p{ color:#c9bcad; }
.story__copy p em{ color:var(--cream); font-style:italic; }
.story__copy .h2{ margin-bottom:1.4rem; }
.story__sign{
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--gold);
}

/* ---------- signatures ---------- */
.sig{ padding:clamp(80px,9vw,140px) 0; background:var(--ink-1); border-block:1px solid var(--line); }
.sig__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 30px 60px -34px rgba(0,0,0,.95); }
.card__media{ aspect-ratio:16/11; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.07); }
.card__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.card__tag{
  align-self:flex-start; background:rgba(226,69,42,.14); color:var(--ember-hi);
  border:1px solid rgba(226,69,42,.3); border-radius:99px;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; margin-bottom:12px;
}
html[lang="ar"] .card__tag{ letter-spacing:0; }
.card__t{ font-size:1.3rem; margin-bottom:.5rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.45em; }
.card__d{ font-size:.9rem; color:var(--muted); margin-bottom:1.1rem; }
.card__p{ margin:auto 0 0; display:flex; align-items:baseline; gap:14px; font-family:var(--serif); }
.card__p span{ font-size:1.15rem; font-weight:600; }
.card__p i{ font-style:normal; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; color:var(--muted-2); margin-inline-start:auto; }
.card--hero{ grid-column:span 2; }
.card--hero .card__media{ aspect-ratio:16/9; }
.card--hero .card__t{ font-size:1.7rem; }
.card--hero .card__d{ font-size:.98rem; max-width:52ch; }

/* ---------- menu ---------- */
.menu{ padding:clamp(80px,9vw,140px) 0; }
.tabs{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:34px;
  justify-content:center; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  padding:.68em 1.3em; border-radius:99px; border:1px solid var(--line);
  font-size:.88rem; font-weight:600; color:var(--muted); white-space:nowrap;
  transition:all .25s var(--ease);
}
.tab:hover{ color:var(--cream); border-color:var(--line-2); }
.tab.is-on{ background:var(--ember); border-color:var(--ember); color:#fff; }

.pane{ display:none; animation:fade .45s var(--ease); }
.pane.is-on{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} }

.pane__head{
  display:grid; grid-template-columns:1fr 1fr; column-gap:70px;
  padding:0 4px 12px; border-bottom:1px solid var(--line-2);
  font-family:var(--serif); font-size:1.05rem; color:var(--gold);
}
.pane__half{ display:flex; align-items:baseline; justify-content:space-between; min-width:0; }
.pane__sizes{ display:flex; gap:0; }
.pane__sizes i{
  font-style:normal; font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
  width:72px; text-align:end;
}
html[lang="ar"] .pane__sizes i{ letter-spacing:0; }

.list{ columns:2; column-gap:70px; }
.list--single{ columns:2; }
.row{
  break-inside:avoid; display:flex; gap:20px; align-items:baseline;
  padding:15px 4px; border-bottom:1px dashed rgba(246,239,228,.09);
}
.row__l{ flex:1; min-width:0; }
.row__l h3{ font-size:1.03rem; font-weight:600; letter-spacing:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.45em; }
.row__l p{ font-size:.82rem; color:var(--muted-2); margin:.28rem 0 0; line-height:1.5; }
.row__p{ display:flex; flex:0 0 auto; }
.row__p b{
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  width:72px; text-align:end; color:var(--cream);
}
.row__p--one{ width:auto !important; }
.row__p--ask{ font-family:var(--sans) !important; font-size:.76rem !important; color:var(--muted-2) !important; font-weight:500 !important; }
.row--star{ background:linear-gradient(90deg, rgba(226,69,42,.09), transparent 70%); border-radius:10px; padding-inline:12px; }
.pill{
  font-style:normal; font-family:var(--sans); font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember-hi);
  border:1px solid rgba(226,69,42,.4); border-radius:99px; padding:3px 8px;
}
html[lang="ar"] .pill{ letter-spacing:0; }
.menu__note{
  margin-top:34px; text-align:center; font-size:.87rem; color:var(--muted-2);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}

/* ---------- order ---------- */
.order{ padding:clamp(80px,9vw,140px) 0; background:var(--ink-1); border-block:1px solid var(--line); }
.order__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ocard{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; display:flex; flex-direction:column; gap:6px; text-align:center; align-items:center;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.ocard:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.ocard .ic{ font-size:1.9rem; color:var(--ember); margin-bottom:12px; }
.ocard--wa .ic{ color:#25d366; }
.ocard b{ font-family:var(--serif); font-size:1.3rem; font-weight:600; }
.ocard > span{ font-size:1.02rem; color:var(--cream); font-weight:500; letter-spacing:.02em; }
.ocard em{ font-style:normal; font-size:.79rem; color:var(--muted-2); margin-top:8px; }
.ocard__apps{ display:flex; gap:10px; margin-top:6px; }
.ocard__apps a{
  border:1px solid var(--line-2); border-radius:99px; padding:.5em 1.1em;
  font-size:.85rem; font-weight:600; transition:all .25s;
}
.ocard__apps a:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

.promo{
  margin-top:26px; background:linear-gradient(105deg, var(--gold), #f0c473 55%, var(--gold));
  color:#2a1c10; border-radius:var(--r-lg); padding:26px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.promo__l{ display:flex; flex-direction:column; gap:2px; }
.promo__kicker{ font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.62; }
html[lang="ar"] .promo__kicker{ letter-spacing:0; }
.promo__l b{ font-family:var(--serif); font-size:clamp(1.2rem,1rem + .8vw,1.6rem); font-weight:600; }
.promo__ar{ font-family:var(--ar); font-size:.95rem; opacity:.8; }
html[lang="ar"] .promo__ar{ display:none; }

/* ---------- gallery ---------- */
.gal{ padding:clamp(80px,9vw,140px) 0 clamp(60px,6vw,100px); overflow:hidden; }
.gal__rail{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px calc((100vw - min(100vw - 40px, var(--wrap)))/2) 22px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.gal__rail::-webkit-scrollbar{ height:5px; }
.gal__rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.gal__i{
  margin:0; flex:0 0 auto; width:min(78vw, 330px); scroll-snap-align:start;
  border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--ink-2);
}
.gal__i img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease); }
.gal__i:hover img{ transform:scale(1.06); }
.gal__i figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:38px 20px 18px;
  font-size:.85rem; color:#efe6d9;
  background:linear-gradient(to top, rgba(10,8,7,.94), transparent);
}
.gal__foot{ text-align:center; margin-top:18px; }

/* ---------- visit ---------- */
.visit{ padding:clamp(80px,9vw,140px) 0; background:var(--ink-1); border-top:1px solid var(--line); }
.visit__in{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(40px,5vw,72px); align-items:center; }
.info{ margin:2rem 0; }
.info > div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.info dt{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); padding-top:3px; }
html[lang="ar"] .info dt{ letter-spacing:0; }
.info dd{ font-size:.95rem; color:#cdc0b1; }
.info dd a{ border-bottom:1px solid var(--line-2); transition:color .2s,border-color .2s; }
.info dd a:hover{ color:var(--ember-hi); border-color:var(--ember-hi); }
.info__ar{ display:block; font-family:var(--ar); direction:rtl; color:var(--muted-2); font-size:.9rem; margin-top:5px; }
html[lang="ar"] .info__ar{ display:none; }
.visit__map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--ink-2); }
.visit__map iframe{ width:100%; height:100%; filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg); }

/* ---------- footer ---------- */
.foot{ background:#0a0807; border-top:1px solid var(--line); padding:60px 0 0; }
.foot__in{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:40px; align-items:center; padding-bottom:44px; }
.foot__brand img{ height:38px; width:auto; margin-bottom:12px; }
.foot__brand p{ font-size:.85rem; color:var(--muted-2); margin:0; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.88rem; }
.foot__nav a{ color:var(--muted); transition:color .2s; }
.foot__nav a:hover{ color:var(--cream); }
.foot__soc{ display:flex; gap:12px; }
.foot__soc a{
  width:40px; height:40px; border-radius:99px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); transition:all .25s var(--ease);
}
.foot__soc a:hover{ color:#fff; background:var(--ember); border-color:var(--ember); transform:translateY(-2px); }
.foot__soc .ic{ font-size:1.05rem; }
.foot__bar{
  border-top:1px solid var(--line); padding:20px 0 24px;
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  font-size:.76rem; color:var(--muted-2);
}

/* ---------- mobile dock ---------- */
.dock{
  position:fixed; inset-inline:0; bottom:0; z-index:40; display:none;
  background:rgba(10,8,7,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.dock a{
  flex:1; padding:11px 4px; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.68rem; font-weight:600; color:var(--muted);
}
.dock a .ic{ font-size:1.15rem; color:var(--ember); }
.dock a:nth-child(2) .ic{ color:#25d366; }

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(6,5,4,.95);
  overflow-y:auto; padding:70px 16px 40px; animation:fade .3s var(--ease);
}
.lb[hidden]{ display:none; }
.lb__in{ display:flex; flex-direction:column; gap:20px; max-width:820px; margin-inline:auto; }
.lb__in img{ width:100%; border-radius:var(--r); }
.lb__x{
  position:fixed; top:18px; inset-inline-end:20px; width:44px; height:44px;
  border-radius:99px; border:1px solid var(--line-2); font-size:1.6rem; line-height:1;
  color:var(--cream); background:rgba(14,12,11,.85); transition:all .25s;
}
.lb__x:hover{ background:var(--ember); border-color:var(--ember); color:#fff; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ============ responsive ============ */
@media (max-width:1080px){
  .sig__grid{ grid-template-columns:repeat(2,1fr); }
  .card--hero{ grid-column:span 2; }
  .list, .list--single{ columns:1; }
  .pane__head{ grid-template-columns:1fr; }
  .pane__half--echo{ display:none; }
  .strip__in{ grid-template-columns:repeat(2,1fr); }
  .strip__item:nth-child(3){ border-inline-start:0; }
  .strip__item:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:900px){
  html{ scroll-padding-top:80px; }
  .topbar__item--area,.topbar__dot{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; }
  .nav{ background:#0e0c0b; }
  .nav__links{
    position:absolute; top:100%; inset-inline:0; flex-direction:column; gap:0;
    background:#0a0807; border-bottom:1px solid var(--line);
    padding:8px 20px 22px; font-size:1.05rem;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    box-shadow:0 24px 40px -24px rgba(0,0,0,.9);
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); }
  .nav__links a::after{ display:none; }
  .story__in,.visit__in{ grid-template-columns:1fr; }
  .story__art{ max-width:460px; margin-inline:auto; }
  .story__img--b{ inset-inline-end:-14px; bottom:-26px; }
  .story__badge{ inset-inline-start:-10px; }
  .order__grid{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:26px; }
  .foot__nav{ justify-content:center; }
  .dock{ display:flex; }
  body{ padding-bottom:64px; }
  .hero__scroll{ display:none; }
}
@media (max-width:620px){
  .wrap{ width:calc(100% - 32px); }
  .sig__grid{ grid-template-columns:1fr; }
  .card--hero{ grid-column:span 1; }
  .strip__in{ grid-template-columns:1fr; }
  .strip__item{ border-inline-start:0; border-top:1px solid var(--line); padding:24px 20px; }
  .strip__item:first-child{ border-top:0; }
  .hero{ padding:64px 0 84px; min-height:auto; }
  .hero__logo{ height:48px; }
  .hero__stats{ gap:22px 30px; margin-top:38px; }
  .hero__cta .btn{ flex:1; }
  .info > div{ grid-template-columns:1fr; gap:4px; }
  .promo{ padding:22px; }
  .tabs{ justify-content:flex-start; }
  .foot__bar{ justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}