/* Layout: full-bleed bands (black for footage, cream for reading, red for the brand) around a 1440px content column.
   One art direction throughout: warm, low-key light, real footage and photography shown whole. */
:root{
  --black:#0B0A09;
  --black-2:#16120F;
  --cream:#F1E6CC;
  --red:#8E0B0E;
  --red-deep:#6A080B;
  --ink:#22160E;
  --mute-d:#A99B8B;   /* secondary text on black */
  --mute-l:#6D5A49;   /* secondary text on cream */
  --mute-r:#EDC6BD;   /* secondary text on red */
  --ember:#E9773F;

  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mark:"Bowlby One","Arial Black",sans-serif;
  --arabic:"Lalezar","Geeza Pro","Noto Naskh Arabic",serif;

  --gutter:clamp(20px,4.4vw,72px);
  --section:clamp(96px,11vw,176px);
  --t-sm:clamp(.84rem,.82rem + .1vw,.92rem);
  --t-base:clamp(1rem,.97rem + .18vw,1.1rem);
  --t-lg:clamp(1.15rem,1.05rem + .45vw,1.45rem);
  --t-xl:clamp(1.6rem,1.2rem + 1.5vw,2.5rem);
  --t-2xl:clamp(2.5rem,1.4rem + 4.2vw,5.4rem);
  --t-3xl:clamp(3.2rem,1.2rem + 7.6vw,9.4rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--black);overflow-x:clip}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--sans);font-size:var(--t-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
p{margin:0}
img,video{display:block;max-width:100%}
img{color:transparent}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;text-wrap:balance}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:6px}
[lang="ar"]{font-family:var(--arabic);font-weight:400;letter-spacing:0}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.display,.h2,.h3{font-family:var(--sans);font-weight:850;font-stretch:72%;text-transform:uppercase;letter-spacing:-.004em}
.display{line-height:.88;font-size:var(--t-3xl)}
.h2{line-height:.9;font-size:var(--t-2xl)}
.h3{line-height:.95;font-size:var(--t-xl)}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:80;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0;pointer-events:none}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nav .wrap > *{pointer-events:auto}
.pill{background:rgba(11,10,9,.62);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(241,230,204,.14);border-radius:999px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;padding:10px 18px}
.logo b{font-family:var(--mark);font-weight:400;font-size:1.15rem;letter-spacing:.01em;line-height:1}
.logo span{font-size:1.05rem;color:var(--mute-d);line-height:1}
.links{display:flex;gap:2px;padding:5px}
.links a{text-decoration:none;font-size:.93rem;font-weight:500;padding:8px 15px;border-radius:999px;transition:background-color .2s}
.links a:hover{background:rgba(241,230,204,.1)}
.links a.cta{background:var(--cream);color:var(--red);font-weight:650}
.links a.cta:hover{background:#fff6e0}
@media (max-width:820px){.links a:not(.cta){display:none}.logo span{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;text-decoration:none;font-weight:650;font-size:1rem;transition:background-color .2s,border-color .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:var(--cream)}
.btn-red:hover{background:#a8121a}
.btn-cream{background:var(--cream);color:var(--red)}
.btn-cream:hover{background:#fff6e0}
.btn-ghost{border:1px solid rgba(241,230,204,.45)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(241,230,204,.08)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:660px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--black)}
.hero-media{position:absolute;inset:0;overflow:hidden;transform-origin:50% 0}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(11,10,9,.88) 0%,rgba(11,10,9,.55) 38%,rgba(11,10,9,.08) 72%),
  linear-gradient(0deg,rgba(11,10,9,.92) 0%,rgba(11,10,9,0) 38%)}
.hero-content{position:relative;z-index:2;display:grid;gap:clamp(20px,3vh,30px);padding-bottom:clamp(28px,5vh,52px)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > span{display:block}
.hero h1 .ln:nth-child(2){color:var(--ember)}
.hero .lede{font-size:var(--t-lg);line-height:1.45;color:#e2d6be;max-width:30rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-bar{position:relative;z-index:2;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
.hero-bar > div{display:flex;flex-wrap:wrap;gap:8px 48px;padding-top:18px;border-top:1px solid rgba(241,230,204,.2);font-size:var(--t-sm);color:var(--mute-d)}
.hero-bar b{color:var(--cream);font-weight:600}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--cream)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#9c8f80;flex:none}
.status.open::before{background:#6fd38a;box-shadow:0 0 0 4px rgba(111,211,138,.18)}
@media (max-width:760px){
  .hero-shade{background:linear-gradient(0deg,rgba(11,10,9,.95) 0%,rgba(11,10,9,.6) 45%,rgba(11,10,9,.15) 80%)}
  .hero-media video,.hero-media img{object-position:62% 50%}
  .hero h1{font-size:clamp(2.9rem,13.5vw,5rem)}
  .hero-bar .addr{display:none}
}

/* ---------- manifesto ---------- */
.manifesto{position:relative;z-index:5;background:var(--cream);color:var(--ink);border-radius:28px 28px 0 0;padding-block:var(--section) calc(var(--section) * .8)}
.manifesto .big{font-weight:650;font-stretch:88%;font-size:clamp(1.9rem,1.1rem + 3.2vw,4.3rem);line-height:1.08;letter-spacing:-.018em;max-width:1160px}
.manifesto .big em{font-style:normal;color:var(--red)}
.facts{margin-top:clamp(56px,7vw,104px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(34,22,14,.2)}
.fact{padding:24px 24px 0 0;display:grid;gap:6px;min-width:0}
.fact + .fact{padding-left:24px;border-left:1px solid rgba(34,22,14,.2)}
.fact b{font-weight:850;font-stretch:72%;font-size:var(--t-2xl);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.fact span{color:var(--mute-l);max-width:18rem}
@media (max-width:700px){.facts{grid-template-columns:minmax(0,1fr)}.fact + .fact{border-left:0;padding-left:0;border-top:1px solid rgba(34,22,14,.2)}.fact{padding-bottom:22px}}

/* ---------- process (sticky media) ---------- */
.process{position:relative;z-index:5;background:var(--black);padding-block:var(--section)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 56px;margin-bottom:clamp(40px,6vw,88px)}
.sec-head p{max-width:25rem;font-size:var(--t-lg);line-height:1.4}
.process .sec-head p{color:var(--mute-d)}
.proc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,120px)}
.proc-media{position:sticky;align-self:start;top:max(96px,14vh);height:min(76vh,760px);perspective:1500px}
.pm-frame{position:relative;height:100%;border-radius:22px;overflow:hidden;background:var(--black-2);transform-origin:50% 50%}
.pm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.pm.on{opacity:1;transform:scale(1)}
.pm-count{position:absolute;left:20px;bottom:18px;z-index:2;font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--t-sm);color:var(--cream);background:rgba(11,10,9,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px}
.steps{list-style:none;margin:0;padding:0}
.pstep{min-height:min(76vh,760px);display:grid;align-content:center;gap:14px;border-top:1px solid rgba(241,230,204,.16);opacity:.32;transition:opacity .5s}
.pstep.on{opacity:1}
.pstep:last-child{border-bottom:1px solid rgba(241,230,204,.16)}
.pstep .when{color:var(--ember);font-weight:600;font-variant-numeric:tabular-nums}
.pstep p{color:var(--mute-d);max-width:27rem;font-size:var(--t-lg);line-height:1.45}
.pstep-media{display:none;margin:0 0 6px;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--black-2)}
.pstep-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .proc-grid{grid-template-columns:minmax(0,1fr)}
  .proc-media{display:none}
  .pstep{min-height:0;opacity:1;padding-block:36px;align-content:start}
  .pstep-media{display:block}
}

/* ---------- signature ---------- */
.signature{position:relative;z-index:5;background:var(--red);color:var(--cream);padding-block:var(--section)}
.sig-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:center}
.sig-photo{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--red-deep);box-shadow:0 60px 100px -50px rgba(30,0,0,.75)}
.sig-photo img{width:100%;height:118%;object-fit:cover;object-position:50% 40%}
.sig-text{display:grid;gap:26px;align-content:center;min-width:0}
.sig-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.sig-title .price{font-weight:850;font-stretch:72%;font-size:var(--t-2xl);line-height:.9;font-variant-numeric:tabular-nums}
.sig-text > p{font-size:var(--t-lg);line-height:1.45;color:#f4dcd4;max-width:32rem}
.specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0;border-top:1px solid rgba(241,230,204,.3)}
.specs div{padding:16px 16px 16px 0;border-bottom:1px solid rgba(241,230,204,.3);min-width:0}
.specs div:nth-child(even){padding-left:16px;border-left:1px solid rgba(241,230,204,.3)}
.specs dt{font-size:var(--t-sm);color:var(--mute-r)}
.specs dd{margin:2px 0 0;font-weight:600}
@media (max-width:899px){.sig-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- menu ---------- */
.menu{position:relative;z-index:5;background:var(--cream);color:var(--ink);padding-block:var(--section)}
.menu .h2{color:var(--red);font-size:var(--t-3xl)}
.menu-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:start}
.frame{position:sticky;top:110px;margin:0;perspective:1600px}
.frame-in{position:relative;aspect-ratio:4/5;max-height:calc(100vh - 150px);border-radius:22px;overflow:hidden;background:var(--black)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.frame img.on{opacity:1}
.frame figcaption{position:absolute;left:16px;bottom:16px;z-index:2;color:var(--cream);font-size:var(--t-sm);font-weight:600;background:rgba(11,10,9,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px}
.cats{display:grid;gap:clamp(56px,6vw,96px)}
.cat-photo{display:none;margin:0 0 20px;border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:var(--black)}
.cat-photo img{width:100%;height:100%;object-fit:cover}
.cat h3{display:flex;justify-content:space-between;align-items:baseline;gap:16px;color:var(--red);padding-bottom:14px;border-bottom:2px solid var(--red)}
.cat h3 [lang="ar"]{font-size:.8em;text-transform:none}
.cat ul{list-style:none;margin:0;padding:0}
.cat li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;padding:18px 0;border-bottom:1px solid rgba(34,22,14,.14)}
.cat li b{font-weight:650;font-size:1.1rem}
.cat li .p{grid-row:span 2;font-weight:800;font-stretch:80%;font-size:1.2rem;color:var(--red);font-variant-numeric:tabular-nums}
.cat li span:not(.p){color:var(--mute-l);font-size:.95rem}
.menu-note{color:var(--mute-l);font-size:var(--t-sm);max-width:40rem}
@media (max-width:899px){.menu-grid{grid-template-columns:minmax(0,1fr)}.frame{display:none}.cat-photo{display:block}}

/* ---------- band ---------- */
.band{position:relative;z-index:5;height:92vh;height:92svh;min-height:600px;overflow:hidden;background:var(--black);display:flex;align-items:flex-end}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.25) 50%,rgba(11,10,9,.1) 100%)}
.band .wrap{position:relative;z-index:2;padding-bottom:clamp(40px,7vh,80px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 56px}
.band .h2{font-size:var(--t-3xl);max-width:12ch}
.band p{max-width:24rem;font-size:var(--t-lg);line-height:1.45;color:#e2d6be}

/* ---------- shops ---------- */
.shops{position:relative;z-index:5;background:var(--cream);color:var(--ink);padding-block:var(--section)}
.shops .h2{color:var(--red)}
.shops-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:start}
.shop{padding:clamp(24px,3vw,36px) 0;border-top:2px solid var(--red);display:grid;gap:18px;min-width:0}
.shop + .shop{border-top:1px solid rgba(34,22,14,.2)}
.shop-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px}
.shop h3{color:var(--red)}
.shop dl{display:grid;grid-template-columns:7rem 1fr;gap:8px 20px;margin:0;font-variant-numeric:tabular-nums}
.shop dt{color:var(--mute-l)}
.shop dd{margin:0}
.shop .status{color:var(--ink)}
.shop .status::before{background:#a8957a}
.shop .status.open::before{background:#2f9e44;box-shadow:0 0 0 4px rgba(47,158,68,.16)}
.shops .note{color:var(--mute-l);max-width:32rem;padding-top:8px}
.shop-photo{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--black)}
.shop-photo img{width:100%;height:116%;object-fit:cover;object-position:46% 50%}
@media (max-width:899px){.shops-grid{grid-template-columns:minmax(0,1fr)}.shop-photo{aspect-ratio:4/3;order:-1}}

/* ---------- footer ---------- */
.foot{position:relative;z-index:5;background:var(--red);color:var(--cream);padding-block:clamp(64px,8vw,110px) calc(env(safe-area-inset-bottom,0px) + 26px);overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 48px}
.foot-top p{max-width:26rem;font-size:var(--t-lg);line-height:1.4}
.foot-top nav{display:flex;gap:26px;flex-wrap:wrap;font-weight:600}
.foot-top nav a{text-decoration:none}
.foot-top nav a:hover{text-decoration:underline;text-underline-offset:5px}
.wordmark{display:flex;align-items:flex-end;justify-content:space-between;gap:3vw;margin-top:clamp(48px,7vw,96px)}
.wordmark b{font-family:var(--mark);font-weight:400;font-size:clamp(4.4rem,23vw,24rem);line-height:.74;letter-spacing:-.035em}
.wordmark span{font-size:clamp(2.4rem,9vw,8.5rem);line-height:1;color:var(--mute-r);padding-bottom:1%}
.legal{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.82rem;color:var(--mute-r)}