/* =========================================================
   El Amir Palace · v7 "calm luxury"
   Burgundy + warm white. One label, one headline, two lines max,
   then imagery. Soft motion only (see v7.js).
   ========================================================= */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:block;src:url(fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Allura";font-style:normal;font-weight:400;font-display:block;src:url(fonts/allura-mesa.woff2) format("woff2")}
@font-face{font-family:"Allura Eyebrow";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/allura-400.woff2) format("woff2"),url(../fonts/allura-400.ttf) format("truetype")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:block;src:url(../v3/fonts/manrope-latin.woff2) format("woff2")}

:root{
  /* palette: warm off-white, burgundy, antique gold for hairlines only */
  --paper:#F7F4EF; --shell:#EFE9E1; --stone:#E2D9CD;
  --ink:#1F1A19; --ink-2:#5A514E; --ink-3:#7D736E;
  --wine:#7A1F2B; --wine-2:#621823; --wine-3:#4A1119;
  --gold:#B8915A; --cream:#F6EDE4;
  --line:rgba(31,26,25,.12); --hair:rgba(184,145,90,.55);
  /* type */
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-script:"Allura","Brush Script MT",cursive;
  --w-display:340;
  --t-label:12px;
  --t-h2:clamp(40px,5vw,78px);
  --t-body:clamp(16px,1.15vw,18px);
  /* layout */
  --pad:clamp(16px,4vw,64px);
  --max:1360px;
  --sec:clamp(104px,14vw,224px);
  --r:clamp(16px,1.6vw,24px);
  --r-sm:16px;
  --hd-h:76px;
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo.out */
  --ease-soft:cubic-bezier(.22,1,.36,1);    /* power3.out-ish */
  /* aliases used by the shared bottom nav (assets/v4/bnav.css) */
  --ease:var(--ease-soft); --ease-drawer:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--hd-h)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
/* the page must never be wider than the screen, not even for a frame while it builds: on phones that zooms the layout out
   and the fixed bottom nav first sits below the screen, then jumps up (body's own overflow-x moves to the viewport, so clip both) */
html{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.7 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;-webkit-tap-highlight-color:transparent}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--wine);color:#fff}
:focus-visible{outline:2px solid var(--wine);outline-offset:4px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:12px;inset-inline-start:12px;z-index:200;background:var(--wine);color:#fff;padding:12px 20px;border-radius:99px;font-weight:700;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- type ---------- */
.label{display:block;font:700 var(--t-label)/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--wine)}
.h2{font:var(--w-display) var(--t-h2)/1.02 var(--f-display);letter-spacing:-.025em;color:var(--ink)}
.lede{max-width:44ch;color:var(--ink-2)}
:lang(ar) body{font-family:"IBM Plex Sans Arabic",var(--f-body)}
:lang(ar) .h2,:lang(ar) .hero-t,:lang(ar) .intro-t,:lang(ar) .story-line,:lang(ar) .card-n,:lang(ar) .br-n,:lang(ar) .faq-list summary{font-weight:400;font-family:"Amiri",var(--f-display);letter-spacing:0;line-height:1.25}
:lang(ar) .label,:lang(ar) .btn,:lang(ar) .hd-nav a{letter-spacing:0}

/* ---------- buttons: pill, smooth fill ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:99px;border:1px solid currentColor;
  font:700 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:color .6s var(--ease-out),border-color .6s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--fill);transform:translateY(101%);transition:transform .7s var(--ease-out)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn--solid{background:var(--bg);border-color:var(--bg)}
.btn--wine{--bg:var(--wine);--fill:var(--wine-3);color:#fff}
.btn--line{--fill:var(--wine);color:var(--wine)}
.btn--line:hover,.btn--line:focus-visible{color:#fff;border-color:var(--wine)}
.btn--light{--bg:#fff;--fill:var(--wine);color:var(--wine-3)}
.btn--light:hover,.btn--light:focus-visible{color:#fff;border-color:var(--wine)}
.btn--ghost{--fill:#fff;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--wine-3);border-color:#fff}
.hero-cta .btn--ghost{background:var(--wine);border-color:var(--wine);color:#fff}
.hero-cta .btn--ghost:hover,.hero-cta .btn--ghost:focus-visible{color:var(--wine-3);border-color:#fff}
.btn--sm{min-height:44px;padding:0 22px;font-size:12px}
.btn:active{transform:scale(.98)}
.btn .arw{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease-out)}
.btn:hover .arw{transform:translateX(3px)}
[dir=rtl] .btn .arw{transform:scaleX(-1)}
[dir=rtl] .btn:hover .arw{transform:scaleX(-1) translateX(3px)}

/* ---------- loader: every fresh visit / reload, skipped when arriving from another page of the site (class set in <head>, driven by the inline script after it) ---------- */
.loader{display:none}
.is-loading .loader{display:grid;place-items:center;position:fixed;inset:0;z-index:120}
.loader::before{content:"";position:absolute;left:-12%;right:-12%;top:-30vh;bottom:0;background:var(--wine);border-radius:0 0 50% 50%/0 0 0 0;will-change:transform}
.loader b{position:relative}
/* the loader word is the header brand at a large size (same text, weight, caps, tracking --ls and optical size opsz), so it lands on it exactly */
.loader b{--ls:.24em;font:340 clamp(22px,5.2vw,84px)/1 var(--f-display);letter-spacing:var(--ls);text-transform:uppercase;color:var(--paper);opacity:0;white-space:nowrap;font-variation-settings:"opsz" 15}
@media (max-width:899px){.loader b{--ls:.2em;font-variation-settings:"opsz" 13}}
.is-loading.fr .loader b{animation:loader-morph .9s cubic-bezier(.65,0,.35,1) both}
/* ~2s total: morph (1.1s) → the word flies into the header brand while the paper clears (.7s) → hand-over to the real brand (.3s).
   --fx --fy --fs --fc are measured by the inline loader script. */
.is-loading.loader-fly .loader::before{transform:translateY(-135%);border-radius:0 0 50% 50%/0 0 24vh 24vh;transition:transform .9s cubic-bezier(.76,0,.24,1),border-radius .9s cubic-bezier(.5,0,.3,1)}
.is-loading.loader-fly .loader b{animation:none;opacity:1;font-weight:340;letter-spacing:var(--ls);color:var(--fc);transform-origin:0 0;transform:translate(var(--fx),var(--fy)) scale(var(--fs));
  will-change:transform;transition:transform .8s cubic-bezier(.65,0,.35,1),color .25s ease .55s,opacity .3s ease}
.is-loading.loader-land .loader b{opacity:0}
.brand b{transition:opacity .3s ease}
.is-loading .hd .brand b{opacity:0}
.is-loading.loader-land .hd .brand b{opacity:1}
.is-loading.loader-skip .loader{animation:loader-out .3s ease forwards}
@keyframes loader-morph{0%{opacity:0;translate:0 12px}100%{opacity:1;translate:0 0}}
@keyframes loader-out{to{opacity:0;visibility:hidden}}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd-h);color:#fff;
  transition:transform .8s var(--ease-out),background-color .5s ease,color .5s ease,box-shadow .5s ease}
.hd-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{width:36px;height:36px;flex:none;background:currentColor;-webkit-mask:url(../../img/brand/emblem.svg) center/contain no-repeat;mask:url(../../img/brand/emblem.svg) center/contain no-repeat}
.brand b{font:var(--w-display) 15px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.hd-nav{display:flex;gap:40px}
.hd-nav a,.lang button{font:600 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.hd-nav a{position:relative;padding:8px 0}
.hd-nav a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease-out)}
.hd-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd-r{display:flex;align-items:center;gap:20px}
.lang{display:flex;gap:2px}
.lang button{min-width:36px;min-height:36px;padding:0 6px;border-radius:99px;opacity:.6;transition:opacity .3s}
.lang button:hover,.lang button[aria-pressed=true]{opacity:1}
.lang button[aria-pressed=true]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.lang button[lang=ar]{font-family:"IBM Plex Sans Arabic",var(--f-body);letter-spacing:0;font-size:14px}
.hd .btn--light{--bg:#fff}
.hd.is-solid{color:var(--wine-3);background:rgba(247,244,239,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hd.is-solid .btn--light{--bg:var(--wine);--fill:var(--wine-3);color:#fff;border-color:var(--wine)}
.hd.is-hidden{transform:translateY(-100%)}
/* over the (untinted) hero photo: a faint shadow under logo, links and button; gone once the header turns solid */
.hd-in{transition:filter .5s ease}
.hd:not(.is-solid) .hd-in{filter:drop-shadow(0 1px 4px rgba(20,8,10,.32))}
@media (max-width:899px){
  .hd-nav{display:none}
  :root{--hd-h:64px}
  .brand-mark{width:30px;height:30px}
  .brand b{font-size:13px;letter-spacing:.2em}
  .hd-r .btn{display:none}
}

/* ---------- 1 · hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:#fff;background:var(--wine-3)}
.hero .hero-media{position:absolute;inset:0}
.hero-pic img{object-position:50% 45%}
/* scalloped bottom edge: a row of paper-coloured half-rounds cuts into the photo where the next section starts */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:2;height:16px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='16' viewBox='0 0 36 16'%3E%3Cpath d='M0 16A18 15 0 0 1 36 16Z' fill='%23F7F4EF'/%3E%3C/svg%3E") repeat-x left bottom/36px 16px}
.hero-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding-bottom:clamp(64px,11vh,128px)}
.hero-t{font:300 clamp(64px,12.5vw,210px)/.9 var(--f-display);letter-spacing:-.045em}
.hero-l{margin-top:clamp(18px,2.4vw,32px);font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.88)}
.hero-cta{margin-top:clamp(28px,3.4vw,48px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:599px){
  .hero-in{padding-bottom:calc(56px + var(--bnav-h,0px))}
  .hero-t{font-size:18vw}
  .hero-cta{width:100%;max-width:360px}
  .hero-cta .btn{flex:1 1 0;padding:0 16px}
}

/* ---------- 2 · intro ---------- */
.intro-sec{padding-block:var(--sec);text-align:center}
.intro-t{max-width:23ch;margin:clamp(40px,4vw,56px) auto 0;font:var(--w-display) clamp(30px,3.5vw,54px)/1.16 var(--f-display);letter-spacing:-.02em;color:var(--ink)}

/* ---------- 3 · la carta: six large rounded cards ---------- */
.sec{padding-bottom:var(--sec)}
.sec-head{display:grid;gap:clamp(24px,2.6vw,36px);max-width:760px;margin-bottom:clamp(56px,7vw,104px)}
.cards{list-style:none;display:grid;gap:clamp(48px,4.4vw,64px) clamp(16px,2.4vw,36px);grid-template-columns:repeat(3,minmax(0,1fr))}
.cards li:nth-child(3n+2){margin-top:clamp(48px,7vw,112px)}
.card{display:block;transition:transform .9s var(--ease-out)}
.card-img{aspect-ratio:4/5;border-radius:var(--r)}
.card-img img{transition:transform 1.6s var(--ease-out)}
.card:hover{transform:translateY(-8px)}
.card:hover .card-img img{transform:scale(1.05)}
.card-tx{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:22px}
.card-n{font:var(--w-display) clamp(24px,2.1vw,34px)/1.1 var(--f-display);letter-spacing:-.015em}
.card-d{font:600 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
:lang(ar) .card-d{letter-spacing:0;font-size:13px}
@media (max-width:899px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards li:nth-child(3n+2){margin-top:0}
  .cards li:nth-child(2n){margin-top:56px}
}
@media (max-width:599px){
  .cards{gap:36px 14px}
  .cards li:nth-child(2n){margin-top:32px}
  .card-n{font-size:20px}
  .card-tx{margin-top:12px}
}

/* ---------- shared: round icon button ---------- */
.arr{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(31,26,25,.22);color:var(--ink);
  transition:background-color .5s var(--ease-out),color .5s var(--ease-out),border-color .5s var(--ease-out),opacity .3s}
.arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.arr:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.arr:disabled{opacity:.3;pointer-events:none}
[dir=rtl] .arr svg{transform:scaleX(-1)}

/* ---------- 4 · platos de la casa: .h-section (pinned on desktop by v7.js, swipe row otherwise) ---------- */
.h-section{--edge:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));padding-bottom:var(--sec)}
.h-track{list-style:none;display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--edge);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scrollbar-width:none}
.h-track::-webkit-scrollbar{display:none}
.dish{flex:0 0 78vw;scroll-snap-align:start}
.dish a{display:block}
.dish-img{aspect-ratio:4/5;border-radius:var(--r)}
.dish-img img{transition:transform 1.6s var(--ease-out);-webkit-user-drag:none}
.dish a:hover .dish-img img{transform:scale(1.04)}
.price{font:500 17px/1 var(--f-body);font-variant-numeric:tabular-nums lining-nums;color:var(--wine);white-space:nowrap}
.price small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-inline-end:6px}
:lang(ar) .price small{letter-spacing:0}
@media (min-width:600px){.dish{flex-basis:min(44vw,420px)}}
/* desktop: the row is pinned and moved with scroll (v7.js adds .is-pinned) */
.h-section.is-pinned{padding-bottom:0;margin-bottom:var(--sec)}
.is-pinned .h-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.is-pinned .sec-head{margin-bottom:clamp(32px,4vh,56px)}
.is-pinned .h-track{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform}
.is-pinned .dish{flex-basis:min(26vw,calc((100svh - 330px) * .8))}

/* ---------- 5 · quotes ---------- */
.rev{padding-block:var(--sec);background:var(--shell);text-align:center}
.rev .label{margin-bottom:clamp(40px,5vw,72px)}
.q-mark{display:block;font:var(--w-display) 96px/.5 var(--f-display);color:var(--wine);height:40px;margin-bottom:24px}
.quotes{display:grid}
.q{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .7s var(--ease-soft),transform 1s var(--ease-soft),visibility 0s linear .7s}
.q.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 1s var(--ease-soft) .35s,transform 1.3s var(--ease-out) .35s,visibility 0s}
.q.is-out{transform:translateY(-18px)}
.q p{max-width:28ch;margin-inline:auto;font:var(--w-display) clamp(28px,3.3vw,50px)/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.q figcaption{margin-top:clamp(28px,3vw,40px);font:600 12px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.q figcaption b{color:var(--ink);font-weight:700}
.q-nav{margin-top:clamp(48px,5vw,72px);display:flex;align-items:center;justify-content:center;gap:28px}
.q-count{min-width:64px;font:var(--w-display) 22px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- 6 · nuestra historia: expanding long-table image + the hand-drawn "la mesa" ---------- */
.story{padding-block:var(--sec);text-align:center}
.story-head{display:grid;gap:clamp(28px,3vw,40px);margin-bottom:clamp(56px,7vw,104px)}
.grow-wrap{overflow:hidden}
.grow{width:min(84%,calc(100% - 2*var(--pad)));margin:0 var(--pad) 0 auto;aspect-ratio:16/8;border-radius:var(--r);transform-origin:100% 0}
.story-tx{display:grid;justify-items:center;gap:clamp(28px,3vw,40px);margin-top:clamp(64px,8vw,120px)}
.story-tx .lede{margin-inline:auto;max-width:46ch}
.story-line{max-width:24ch;text-wrap:balance;font:var(--w-display) clamp(30px,3.3vw,50px)/1.25 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.script{font:400 1.75em/0 var(--f-script);letter-spacing:0;color:var(--wine);white-space:nowrap}
.script svg{display:inline-block;overflow:visible}
.script text{fill:currentColor;stroke:currentColor}
:lang(ar) .script{font-family:"Aref Ruqaa",serif;font-size:1.2em;font-weight:700}
@media (max-width:599px){.grow{aspect-ratio:4/5}}

/* ---------- 7 · sucursales ---------- */
.br-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.branch{--r:clamp(14px,1.2vw,18px);display:flex;flex-direction:column;background:var(--shell);border-radius:clamp(20px,2vw,28px);padding:10px 10px clamp(28px,3vw,40px)}
.branch .media{aspect-ratio:16/10}
.br-body{display:grid;gap:22px;padding:clamp(24px,2.6vw,36px) clamp(14px,2vw,28px) 0;flex:1}
.br-n{font:var(--w-display) clamp(34px,3.2vw,48px)/1 var(--f-display);letter-spacing:-.015em}
.br-a{margin-top:8px;color:var(--ink-3);font-size:15px}
.hours{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;font-size:15px;padding-block:20px;border-block:1px solid var(--line)}
.hours dt{color:var(--ink-3)}
.hours dd{text-align:end;font-variant-numeric:tabular-nums}
.br-tel{font:var(--w-display) 24px/1 var(--f-display);font-variant-numeric:lining-nums;justify-self:start;border-bottom:1px solid transparent;transition:border-color .4s}
.br-tel:hover{border-color:currentColor}
.br-act{display:flex;flex-wrap:wrap;gap:10px;align-self:end}
.br-note{margin-top:clamp(40px,4vw,56px);text-align:center;color:var(--ink-3);font-size:15px}
@media (max-width:767px){.br-grid{grid-template-columns:1fr}.br-act .btn{flex:1 1 0;padding:0 16px}}

/* ---------- 8 · faq ---------- */
:root{interpolate-size:allow-keywords}
.faq-in{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,112px);align-items:start}
.faq-list{border-bottom:1px solid var(--line)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;
  font:var(--w-display) clamp(22px,1.9vw,28px)/1.25 var(--f-display)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary i{position:relative;flex:none;width:16px;height:16px}
.faq-list summary i::before,.faq-list summary i::after{content:"";position:absolute;inset:50% 0 auto;height:1px;background:currentColor;transition:transform .6s var(--ease-out)}
.faq-list summary i::after{transform:rotate(90deg)}
.faq-list details[open] summary i::after{transform:rotate(0)}
.faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .7s var(--ease-out),content-visibility .7s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
.faq-list details p{max-width:60ch;padding-bottom:28px;color:var(--ink-2)}
@media (max-width:899px){.faq-in{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ft{background:var(--wine);color:var(--cream);border-radius:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 0 0;padding-top:clamp(96px,11vw,176px)}
.ft-cta{text-align:center;display:grid;justify-items:center;gap:clamp(24px,2.6vw,36px)}
.ft-mark{display:block;width:56px;height:56px;background:var(--gold);-webkit-mask:url(../../img/brand/emblem.svg) center/contain no-repeat;mask:url(../../img/brand/emblem.svg) center/contain no-repeat}
.ft-cta .h2{color:#fff}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-top:clamp(96px,10vw,160px);padding-block:56px;border-top:1px solid rgba(246,237,228,.18)}
.ft-grid h3{font:700 11px/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.ft-grid p,.ft-grid li{font-size:15px;line-height:1.9;color:rgba(246,237,228,.82)}
.ft-grid ul{list-style:none}
.ft-grid a{transition:color .3s}
.ft-grid a:hover{color:#fff}
.ft-brand b{display:block;font:var(--w-display) 22px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.ft-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:28px 40px;border-top:1px solid rgba(246,237,228,.18);font-size:13px;color:rgba(246,237,228,.65)}
.ft .lang button{color:var(--cream)}
.ft :focus-visible{outline-color:#fff}
@media (max-width:899px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:479px){.ft-grid{grid-template-columns:1fr}}

/* ---------- about page ---------- */
.hero--page{height:86vh;height:86svh}
.ab-block{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,6vw,112px);padding-bottom:var(--sec)}
.ab-block .h2{font-size:clamp(36px,4vw,64px)}
.ab-block p{max-width:52ch;color:var(--ink-2);font-size:clamp(17px,1.35vw,21px);line-height:1.75}
.ab-block p+p{margin-top:1.1em}
.ab-pair{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,2.4vw,36px);align-items:end;padding-bottom:var(--sec)}
.ab-pair .media:first-child{aspect-ratio:4/5}
.ab-pair .media:last-child{aspect-ratio:4/3}
.ab-wide{padding-bottom:var(--sec)}
.ab-wide .media{aspect-ratio:21/9}
.ab-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding-bottom:var(--sec)}
@media (max-width:767px){.ab-block,.ab-pair{grid-template-columns:1fr}.ab-wide .media{aspect-ratio:4/3}}

/* ---------- media: rounded frames ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--shell);transform:translateZ(0)}
.media-in{position:absolute;inset:-7% 0}
.media img{width:100%;height:100%;object-fit:cover}

/* ---------- motion system (v7.js): data-reveal · data-reveal-group · data-split · .parallax · .grow-wrap · .h-section ----------
   Hidden states only apply while html.motion is set; the <head> failsafe removes it if v7.js never runs. */
.parallax{position:relative;overflow:hidden;background:var(--shell)}
.parallax__inner{position:absolute;inset:0;transform:scale(1.12)}
.parallax__inner img,.parallax__inner picture{display:block;width:100%;height:100%;object-fit:cover}
.motion [data-reveal],.motion [data-reveal-group]>*,.motion [data-split]{opacity:0}

.motion .grow{transform:scale(.68)}
.sl{display:block;overflow:hidden;padding-block:.06em .12em;margin-block:-.06em -.12em}
.si{display:block}
.no-motion .grow{width:min(84%,calc(100% - 2*var(--pad)));margin:0 var(--pad) 0 auto}

/* section label with a thin gold rule */
.sec-label{display:flex;align-items:center;gap:20px;font:700 var(--t-label)/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--wine)}
.sec-label::after{content:"";flex:1;height:1px;background:var(--hair)}
.sec-label::before{content:"";flex:1;height:1px;background:var(--hair)}
:lang(ar) .sec-label{letter-spacing:0}
/* eyebrow word in the hand-drawn script of "la mesa" (traced by v7.js) */
.sec-label>span{font:400 clamp(60px,5.6vw,84px)/1.1 "Allura Eyebrow",var(--f-script);letter-spacing:0;text-transform:none;color:inherit;white-space:nowrap}
.sec-label>.script{line-height:1.1}
:lang(ar) .sec-label>span{font:700 clamp(44px,4vw,60px)/1.3 "Aref Ruqaa",serif}
/* reviews marquee (v7.js clones the cards and sets --marq-x / --marq-d) */
.rev{overflow-x:clip}
.rev-row.is-marquee{overflow:visible;scroll-snap-type:none;width:max-content;animation:rev-marq var(--marq-d,60s) linear infinite}
.rev-row.is-marquee:hover,.rev-row.is-marquee:focus-within{animation-play-state:paused}
.rev:has(.is-marquee) .arrs{display:none}
@keyframes rev-marq{to{transform:translateX(var(--marq-x,-50%))}}

@media (prefers-reduced-motion:reduce){
  .btn::before,.card,.card-img img,.hd,.hd-nav a::after,.q,.q.is-on,.dish-img img,.faq-list details::details-content,.faq-list summary i::before,.faq-list summary i::after{transition:none}
  .q,.q.is-out{transform:none}
  .card:hover{transform:none}
  .parallax__inner{transform:none}
  .motion .grow{transform:none}
}

/* numbers stay left-to-right inside RTL text */
a[href^="tel:"],.q-count,.amt{direction:ltr;unicode-bidi:isolate}
.q figcaption b{unicode-bidi:isolate}

/* ---------- stage 3: branches status, today, info-only footer ---------- */
.br-img{aspect-ratio:16/10;border-radius:var(--r)}
.br-status{display:inline-flex;align-items:center;gap:10px;justify-self:start;font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.br-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.br-status.is-open{color:var(--wine)}
.br-status.is-open::before{background:var(--wine);box-shadow:0 0 0 4px rgba(122,31,43,.14)}
:lang(ar) .br-status{letter-spacing:0;font-size:13px}
.hours .is-today{color:var(--wine);font-weight:600}
.ft{padding-top:clamp(72px,8vw,120px)}
.ft-grid{margin-top:0;border-top:0;padding-top:0}
.ft-brand .ft-mark{margin-bottom:22px}
.rev .sec-label{margin-bottom:clamp(48px,5vw,80px)}
#sucursales{padding-top:var(--sec)}

/* ---------- hero entrance: CSS only, paused while the loader is up (no JS needed for first paint / LCP) ---------- */
.hero-t{overflow:hidden;padding-block:.04em .1em}
.hero-t>span{display:block}
.motion .hero-t>span{animation:hero-rise 3.4s var(--ease-out) .2s both}
.motion [data-hero-in]{animation:hero-fade 1.3s var(--ease-soft) calc(.8s + var(--i,0) * .15s) both}
.motion .hero-pic img{animation:hero-zoom 2.4s var(--ease-out) .1s both}
.is-loading:not(.loader-out) .hero-t>span,.is-loading:not(.loader-out) [data-hero-in],.is-loading:not(.loader-out) .hero-pic img{animation-play-state:paused}
@keyframes hero-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes hero-fade{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.motion .hero-t>span,.motion .hero-pic img{animation:none}.motion [data-hero-in]{animation:hero-fade-o .6s ease both}}
@keyframes hero-fade-o{from{opacity:0}to{opacity:1}}
.ft-grid h3{color:#EBD3BE}
.lang button{opacity:.82}
.ft .lang button{opacity:.9}

/* ---------- 6 · reseñas: review cards row (swipe; arrows on desktop) ---------- */
.rev{text-align:start}
.rev .sec-label{margin-bottom:0}
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(48px,6vw,80px)}
.rev-head .sec-head{margin-bottom:0}
.arrs{display:flex;gap:10px;flex:none}
.rev-row{--edge:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));list-style:none;display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;overscroll-behavior-x:contain;
  padding-inline:var(--edge);padding-bottom:8px;scroll-padding-inline:var(--edge);scroll-snap-type:x mandatory;scrollbar-width:none}
.rev-row::-webkit-scrollbar{display:none}
.rev-row:focus-visible{outline-offset:-2px}
.rcard{flex:0 0 min(400px,84vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:20px;padding:clamp(24px,2.4vw,34px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);transition:transform .8s var(--ease-out),box-shadow .8s var(--ease-out)}
.rcard:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(31,26,25,.35)}
.rc-top{display:flex;align-items:center;gap:14px}
.rc-av{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;object-fit:cover;background:var(--wine);color:#fff;font:400 21px/1 var(--f-display)}
.rc-who{display:grid;gap:3px;min-width:0}
.rc-who b{font-size:15px;font-weight:700;color:var(--ink);unicode-bidi:plaintext}
.rc-meta{font-size:13px;color:var(--ink-3)}
.rc-stars{display:flex;gap:3px;color:var(--wine)}
.rc-stars svg{width:16px;height:16px}
.rcard blockquote p{font:var(--w-display) clamp(19px,1.45vw,22px)/1.45 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:599px){.arrs{display:none}
  .rev-row{gap:12px}
  .rcard{flex-basis:82vw;gap:16px;padding:22px 20px;scroll-snap-stop:always}
  .rcard:hover{transform:none;box-shadow:none}
  .rcard::before{font-size:88px}
  .rcard blockquote p{font-size:17px;line-height:1.5}
  .rev-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
  .rev-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .3s var(--ease-out),background-color .3s}
  .rev-dots i.on{width:20px;background:#fff}}
@media (prefers-reduced-motion:reduce){.rcard{transition:none}.rcard:hover{transform:none}}
.br-map{position:relative;overflow:hidden;background:var(--shell)}
.br-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.75) contrast(.95)}

/* ---------- 7 · find us: one map, branch toggle, floating info card ---------- */
.find{position:relative;aspect-ratio:16/9;min-height:600px;border-radius:var(--r);overflow:hidden;background:var(--shell)}
.find-map{position:absolute;inset:0}
.find-map iframe{width:100%;height:100%;border:0;filter:saturate(.7) contrast(.95);transition:opacity .45s var(--ease-soft)}
.find-map.is-swap iframe{opacity:0}
.find-tabs{position:absolute;top:clamp(16px,2vw,28px);inset-inline-start:clamp(16px,2vw,28px);display:flex;gap:4px;padding:5px;border-radius:99px;
  background:rgba(247,244,239,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px -16px rgba(31,26,25,.4)}
.find-tabs button{min-height:44px;padding:0 22px;border-radius:99px;font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
.find-tabs button[aria-selected=true]{background:var(--wine);color:#fff}
:lang(ar) .find-tabs button{letter-spacing:0;font-size:14px}
.find-card{position:absolute;bottom:clamp(16px,2vw,28px);inset-inline-start:clamp(16px,2vw,28px);width:min(420px,calc(100% - 32px));padding:clamp(24px,2.4vw,34px);
  background:var(--paper);border-radius:20px;box-shadow:0 30px 60px -30px rgba(31,26,25,.5)}
.find-panel{display:grid;gap:14px;animation:find-in .6s var(--ease-soft) both}
.find-panel .br-a{margin-top:-8px}
.find-week summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;border-block:1px solid var(--line);font-size:15px}
.find-week summary::-webkit-details-marker{display:none}
.find-today{color:var(--ink)}
.find-more{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--wine);white-space:nowrap}
:lang(ar) .find-more{letter-spacing:0;font-size:13px}
.find-week .hours{border:0;padding:14px 0 4px}
.find .br-act{margin-top:6px}
@keyframes find-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:767px){
  .find{aspect-ratio:auto;min-height:0;overflow:visible;background:none}
  .find-map{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--shell)}
  .find-card{position:static;width:auto;margin-top:16px;box-shadow:none;background:var(--shell)}
  .find .br-act .btn{flex:1 1 0;padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.find-panel{animation:none}.find-map iframe{transition:none}}
.find-panel[hidden]{display:none}
.find-card{z-index:1}.find-tabs{z-index:2}
/* Google draws its place box top-left: keep the toggle top-right in both directions */
.find-tabs{inset-inline-start:auto;left:auto;right:clamp(16px,2vw,28px)}
.find .br-act{flex-wrap:nowrap}
.find .br-act .btn{min-height:48px;padding:0 20px}
@media (max-width:767px){.find-tabs{right:12px;top:12px}}
/* map grows to the full section width while scrolling (v7.js adds .is-bleed on desktop) */
.find.is-bleed{width:100vw;margin-inline:calc(50% - 50vw);transform-origin:50% 50%;will-change:transform}
/* fit one screen: height follows the viewport, not the (now full) width */
@media (min-width:768px){.find{aspect-ratio:auto;min-height:0;height:clamp(460px,calc(100svh - var(--hd-h) - 64px),720px)}}

/* ---------- burgundy sections (Platos de la casa, Reseñas) ---------- */
.is-wine{background:var(--wine);color:var(--cream);--hair:rgba(235,211,190,.35);--line:rgba(246,237,228,.18)}
.is-wine .h2{color:#fff}
.is-wine .sec-label{color:#EBD3BE}
.is-wine .lede{color:rgba(246,237,228,.82)}
.is-wine .arr{color:#fff;border-color:rgba(255,255,255,.4)}
.is-wine .arr:hover{background:#fff;color:var(--wine);border-color:#fff}
.is-wine :focus-visible{outline-color:#fff}
.is-wine .parallax,.is-wine .dish-img{background:var(--wine-2)}
.is-wine .card-n{color:#fff}
.is-wine .price{color:#EBD3BE}
.is-wine .price small{color:rgba(246,237,228,.7)}
.h-section.is-wine{padding-top:var(--sec)}
.h-section.is-wine.is-pinned{padding-top:0;margin-bottom:0}
.rev.is-wine .rcard{border-color:transparent;box-shadow:0 30px 60px -36px rgba(0,0,0,.55)}
.rev.is-wine .rc-av{background:var(--wine-3)}

/* ---------- story: portrait photo + text side by side; dish card video ---------- */
.story-body{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,120px);align-items:center;margin-top:clamp(64px,8vw,120px);text-align:start}
.story-photo{aspect-ratio:4/5;border-radius:var(--r)}
.story-body .story-tx{margin-top:0;justify-items:start}
.story-body .story-tx .lede{margin-inline:0}
.story-body .story-line{max-width:20ch}
@media (max-width:899px){.story-body{grid-template-columns:1fr}.story-photo{aspect-ratio:4/3;order:2}}
.dish-vid{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- video section: text + portrait reel ---------- */
.vid{padding-top:var(--sec)}
.vid-in{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,120px);align-items:center}
.vid-tx{display:grid;gap:clamp(24px,2.6vw,36px);justify-items:start}
.vid-tx .h2{max-width:12ch}
.vid-frame{justify-self:center;width:min(100%,calc((100svh - 140px) * .5625));aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--shell)}
.vid-frame video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.vid-in{grid-template-columns:1fr}.vid-frame{width:min(100%,360px)}}

/* ---------- mobile fixes ---------- */
@media (max-width:767px){
  .find .br-act{flex-wrap:wrap}
  .find .br-act .btn{flex:1 1 140px;min-width:0;padding:0 14px}
  .find-card{padding:22px}
  .find-week summary{flex-wrap:wrap;row-gap:6px}
  .motion .grow{transform:scale(.9)}
}

/* horizontal rows never scroll vertically; room for the card lift + shadow */
.rev-row,.h-track{overflow-y:hidden}
.rev-row{padding-top:10px;padding-bottom:40px;margin-bottom:-32px}
@media (hover:none){.rcard:hover{transform:none;box-shadow:none}}

/* "Ver más" under each carta card */
.card-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-bottom:4px;font:700 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease-out)}
.card:hover .card-more{background-size:100% 1px}
[dir=rtl] .card-more{background-position:100% 100%}
:lang(ar) .card-more{letter-spacing:0;font-size:13px}

/* intro: wide photo under the paragraph */
.intro-img{aspect-ratio:21/9;border-radius:var(--r);margin-top:clamp(56px,7vw,104px)}
.intro-img img{object-position:50% 62%}
@media (max-width:767px){.intro-img{aspect-ratio:4/5}}

/* platos: free row (no pin) */
.h-section .rev-head{margin-bottom:clamp(40px,5vw,64px)}
@media (min-width:600px){.h-section .dish{flex-basis:min(30vw,400px)}}

/* platos row: small inset before the first card */
.h-track{padding-inline-start:clamp(16px,2vw,28px);scroll-padding-inline-start:clamp(16px,2vw,28px)}

/* ---------- salon: interior gallery (2 rows, 7/5 then 5/7) ---------- */
.salon-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(200px,28vw,420px);gap:clamp(10px,1.4vw,20px)}
.salon-i{margin:0;overflow:hidden;border-radius:var(--r);background:var(--shell)}
.salon-i img{display:block;width:100%;height:100%;object-fit:cover}
.salon-i--1{grid-column:span 7}.salon-i--2{grid-column:span 5}.salon-i--3{grid-column:span 5}.salon-i--4{grid-column:span 7}
.salon-i--1 img{object-position:50% 40%}
/* desktop: "palace arch" composition. A tall arched hero photo (the Lebanese arch motif, with a gold
   inner frame) anchors the left; the title sits top right; three photos step down beside it with
   numbered captions. The ul becomes display:contents so header + photos share one 12-col grid. */
@media (min-width:900px){
  /* bento: big photo, tall photo, text tile, small photo / wide photo, text tile */
  .salon .wrap{counter-reset:salon}
  .salon-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:clamp(12px,1.6vw,22px)}
  .salon-i{position:relative;counter-increment:salon;border-radius:var(--r);box-shadow:0 1px 0 rgba(31,26,25,.04),0 24px 48px -28px rgba(31,26,25,.35)}
  .salon-i--1{grid-column:1/3;grid-row:1/3}.salon-i--2{grid-column:3;grid-row:1/3}
  .salon-txt--1{grid-column:4;grid-row:1}.salon-i--3{grid-column:4;grid-row:2}
  .salon-i--4{grid-column:1/3;grid-row:3}.salon-txt--2{grid-column:3/5;grid-row:3}
  .salon-i img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .salon-i:hover img{transform:scale(1.045)}
  /* numbered caption chip (no copy to translate) */
}
.salon-txt{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:clamp(18px,2vw,28px);border-radius:var(--r);background:var(--wine);color:var(--cream)}
.salon-txt b{font:400 clamp(28px,3.2vw,50px)/1 var(--f-display);color:var(--gold)}
.salon-txt span{font-size:14px;line-height:1.5;opacity:.88}
.salon-txt--2{background:var(--gold);color:var(--wine)}
.salon-txt--2 b{color:var(--wine)}
@media (max-width:899px){
  /* phones: wide photo, 2 photos, 2 text tiles, wide photo */
  .salon-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .salon-i{grid-column:auto;aspect-ratio:1/1}
  .salon-i--1,.salon-i--4{grid-column:1/-1;aspect-ratio:16/10}
  .salon-i--1{order:1}.salon-i--2{order:2}.salon-i--3{order:3}.salon-txt--1{order:4}.salon-txt--2{order:5}.salon-i--4{order:6}
  .salon-txt{min-height:150px;padding:16px}
  .salon-txt b{font-size:26px}
  .salon-txt span{font-size:13px}
}

/* story photo's 1.25 curtain scale + parallax must not widen the page (it panned sideways on phones) */
.story-body{overflow-x:clip}

/* hero: vapor rising out of the middle of the photo. Each layer is a pre-rendered image of white wisps (img/steam, rendered once
   from the old fractal-noise SVG filters, which were redrawn every frame and halved the frame rate on phones), faded by a soft
   mask and lifted slowly with transform/opacity only; three layers at different sizes and speeds so it billows instead of looping
   visibly. Off for reduced motion. */
.hero-steam{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-steam i{position:absolute;left:50%;bottom:6%;width:clamp(260px,46vw,720px);height:80%;margin-left:calc(clamp(260px,46vw,720px) / -2);opacity:0;will-change:transform,opacity;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 0,rgba(0,0,0,.6) 52%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 0,rgba(0,0,0,.6) 52%,transparent 100%);
  animation:hero-steam 12s linear infinite}
.hero-steam i{background:center/100% 100% no-repeat}
.hero-steam .st-a{background-image:url(../../img/steam/steam-a.webp)}
.hero-steam .st-b{background-image:url(../../img/steam/steam-b.webp);width:clamp(200px,36vw,560px);margin-left:calc(clamp(200px,36vw,560px) / -2);left:44%;animation-duration:15s;animation-delay:-5s}
.hero-steam .st-c{background-image:url(../../img/steam/steam-c.webp);width:clamp(220px,40vw,640px);margin-left:calc(clamp(220px,40vw,640px) / -2);left:57%;animation-duration:18s;animation-delay:-11s}
@keyframes hero-steam{
  0%{opacity:0;transform:translate3d(0,22%,0) scale(.88)}
  22%{opacity:.5}
  70%{opacity:.35}
  100%{opacity:0;transform:translate3d(-4%,-32%,0) scale(1.18)}
}
@media (prefers-reduced-motion:reduce){.hero-steam{display:none}}

/* ---------- footer: structured columns ---------- */
.ft-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(32px,4vw,64px);padding-bottom:clamp(48px,5vw,72px)}
.ft-brand p{max-width:30ch}
.ft-place{margin-top:6px;font-size:13px!important;letter-spacing:.04em;color:rgba(246,237,228,.6)!important}
.ft-grid ul li{line-height:2.1}
.ft-grid a{position:relative;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .3s,background-size .35s var(--ease-out)}
.ft-grid a:hover{background-size:100% 1px}
.ft-sub{margin-top:28px}
.ft-hours div{display:flex;justify-content:space-between;gap:16px;padding-block:9px;border-bottom:1px solid rgba(246,237,228,.12);font-size:14px}
.ft-hours div:first-child{padding-top:0}
.ft-hours dt{color:rgba(246,237,228,.82)}
.ft-hours dd{color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.ft-bot-r{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.ft-top{font:600 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--cream);opacity:.85;transition:opacity .3s}
.ft-top:hover{opacity:1}
:lang(ar) .ft-top{letter-spacing:0;font-size:13px}
@media (max-width:1099px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:479px){.ft-grid{grid-template-columns:1fr}.ft-bot{flex-direction:column;align-items:flex-start}}
.salon{overflow-x:clip}