/* =====================================================================
   KafeS'mof — Warm-luxe dining design system
   Fonts: Fraunces (display) · Outfit (UI) · Caveat (script)
   ===================================================================== */

:root{
  /* warm espresso base */
  --bg:        #15100c;
  --bg-2:      #1b140e;
  --surface:   #221913;
  --surface-2: #2b2017;
  --line:      rgba(220,190,140,.14);
  --line-soft: rgba(220,190,140,.08);

  /* warm creams */
  --cream:     #f3e9da;
  --cream-2:   #e8dcc8;
  --muted:     #b6a489;
  --muted-2:   #8d7c66;

  /* gold + ember accents */
  --gold:      #d9a441;
  --gold-2:    #ecc878;
  --gold-deep: #b27e29;
  --ember:     #c0562d;
  --ember-2:   #d97a4a;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
  --r: 18px;
  --r-lg: 26px;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Outfit", system-ui, sans-serif;
  --script:"Caveat", cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#1a120a; }

/* warm radial atmosphere baked into the page */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(217,164,65,.10), transparent 55%),
    radial-gradient(90% 70% at 0% 110%, rgba(192,86,45,.08), transparent 50%),
    var(--bg);
}

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-2%,2%)} 80%{transform:translate(4%,-2%)}
}

/* ---------------------------------------------------------------- LOADER */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.loader__logo{ width:96px; filter:drop-shadow(0 8px 30px rgba(217,164,65,.25)); animation:floatY 3s var(--ease) infinite; }
.loader__bar{ width:160px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:40%; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:load 1.1s ease-in-out infinite; }
@keyframes load{ 0%{transform:translateX(-120%)} 100%{transform:translateX(360%)} }
.loader__tag{ font-family:var(--script); color:var(--gold-2); font-size:1.25rem; letter-spacing:.02em; }
@keyframes floatY{ 50%{ transform:translateY(-9px) } }

/* ---------------------------------------------------------------- NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:24px;
  padding:18px var(--pad);
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav.scrolled{
  padding:11px var(--pad);
  background:rgba(20,15,11,.78);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft), 0 18px 40px -28px rgba(0,0,0,.9);
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__logo{ width:42px; transition:transform .5s var(--ease); }
.nav__brand:hover .nav__logo{ transform:rotate(-8deg) scale(1.06); }
.nav__name{ font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.01em; }
.nav__links{ display:flex; gap:6px; margin-left:auto; }
.nav__link{
  position:relative; padding:9px 14px; font-size:.83rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:var(--cream-2);
  opacity:.82; transition:opacity .3s, color .3s;
}
.nav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out);
}
.nav__link:hover, .nav__link.active{ opacity:1; color:var(--gold-2); }
.nav__link:hover::after, .nav__link.active::after{ transform:scaleX(1); }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:100px; font-size:.84rem; font-weight:600;
  letter-spacing:.03em; color:#1a120a;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 8px 22px -10px rgba(217,164,65,.7);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(217,164,65,.8); }
.nav__burger{ display:none; width:42px; height:38px; background:none; border:none; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; }
.nav__burger span{ height:2px; width:24px; background:var(--cream); border-radius:2px; transition:.35s var(--ease); margin-left:auto; }
.nav__burger span:nth-child(2){ width:18px; }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); width:24px; }
.nav.open .nav__burger span:nth-child(2){ opacity:0; }
.nav.open .nav__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); width:24px; }

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; font-family:var(--sans); font-weight:600;
  font-size:.95rem; letter-spacing:.02em; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s;
  will-change:transform;
}
.btn--gold{ color:#1a120a; background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep)); box-shadow:0 12px 30px -12px rgba(217,164,65,.65); }
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(217,164,65,.8); }
.btn--ghost{ color:var(--cream); border-color:var(--line); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-2); transform:translateY(-3px); }
.btn--full{ width:100%; }

/* ---------------------------------------------------------------- HERO */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:0 var(--pad) clamp(60px,9vh,110px); overflow:hidden; }
.hero__canvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.hero__media{ position:absolute; inset:-6% -6% -6% -6%; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:heroZoom 16s var(--ease) infinite alternate; }
@keyframes heroZoom{ to{ transform:scale(1.16); } }
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(20,15,11,.55) 0%, rgba(20,15,11,.18) 32%, rgba(20,15,11,.65) 72%, rgba(20,15,11,.96) 100%),
    radial-gradient(120% 90% at 18% 90%, rgba(20,15,11,.7), transparent 60%);
}
.hero__content{ position:relative; z-index:3; max-width:max(46vw,560px); }
.hero__eyebrow{ font-size:.82rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-2); margin-bottom:22px; padding-left:4px; }
.hero__title{ font-family:var(--serif); font-weight:300; line-height:.98; font-size:clamp(2.7rem,7.2vw,6.4rem); letter-spacing:-.01em; }
.hero__title span{ display:block; }
.hero__title-em{ font-style:italic; font-weight:500; color:var(--gold-2); font-size:1.06em; }
.hero__sub{ margin-top:26px; font-size:clamp(1rem,1.5vw,1.18rem); color:var(--cream-2); max-width:30em; font-weight:300; }
.hero__actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero__scroll{ position:absolute; z-index:3; left:var(--pad); bottom:34px; display:none; align-items:center; gap:12px; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:0; left:0; width:100%; height:50%; background:var(--gold-2); animation:scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(-100%)} 100%{transform:translateY(200%)} }
.hero__script{ position:absolute; z-index:3; right:var(--pad); bottom:40px; font-family:var(--script); font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--gold-2); opacity:.9; transform:rotate(-4deg); max-width:8em; text-align:right; line-height:1.05; }

/* ---------------------------------------------------------------- MARQUEE */
.marquee{ border-block:1px solid var(--line-soft); background:var(--bg-2); overflow:hidden; padding:18px 0; }
.marquee__track{ display:flex; align-items:center; gap:34px; white-space:nowrap; width:max-content; animation:scrollx 32s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.9rem); color:var(--cream-2); opacity:.65; }
.marquee__track i{ color:var(--gold); font-size:.8rem; font-style:normal; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- SECTIONS */
.section{ max-width:var(--maxw); margin-inline:auto; padding:clamp(70px,11vh,140px) var(--pad); }
.section__head{ max-width:760px; margin-bottom:clamp(40px,6vh,72px); }
.section__head[style], .section--center .section__head{ }
.kicker{ font-size:.78rem; letter-spacing:.36em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.kicker::before{ content:""; width:30px; height:1px; background:var(--gold); display:inline-block; }
.kicker--light{ color:var(--gold-2); }
.section__title{ font-family:var(--serif); font-weight:300; line-height:1.04; font-size:clamp(2rem,5vw,3.7rem); letter-spacing:-.01em; }
.section__title em{ font-style:italic; color:var(--gold-2); font-weight:500; }
.section__lead{ margin-top:20px; color:var(--muted); font-size:1.06rem; font-weight:300; max-width:46em; }

/* ---------------------------------------------------------------- UNIVERS */
.univers__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ucard{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:430px;
  display:flex; align-items:flex-end; border:1px solid var(--line-soft);
  background:var(--surface); transform-style:preserve-3d;
}
.ucard__media{ position:absolute; inset:0; }
.ucard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s; filter:saturate(1.02) brightness(.82); }
.ucard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(15,11,7,.55) 62%,rgba(15,11,7,.96)); transition:opacity .5s; }
.ucard:hover .ucard__media img{ transform:scale(1.09); filter:saturate(1.12) brightness(.92); }
.ucard__body{ position:relative; z-index:2; padding:26px 24px 28px; transform:translateZ(40px); }
.ucard__num{ font-family:var(--serif); font-size:.9rem; color:var(--gold-2); letter-spacing:.1em; }
.ucard__body h3{ font-family:var(--serif); font-weight:500; font-size:1.7rem; margin:6px 0 10px; }
.ucard__body p{ font-size:.92rem; color:var(--cream-2); opacity:0; max-height:0; transform:translateY(10px); transition:opacity .5s var(--ease), max-height .6s var(--ease), transform .5s var(--ease); }
.ucard:hover .ucard__body p{ opacity:.92; max-height:140px; transform:translateY(0); }
.ucard__glare{ position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,235,200,.22), transparent 45%); opacity:0; transition:opacity .4s; }
.ucard:hover .ucard__glare{ opacity:1; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:64px; padding-top:48px; border-top:1px solid var(--line); }
.stat{ text-align:center; }
.stat__num{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5vw,3.4rem); color:var(--gold-2); line-height:1; display:inline-flex; align-items:baseline; }
.stat__small{ font-size:.5em; color:var(--muted); }
.stat__label{ display:block; margin-top:10px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------------------------------------------------------------- HISTOIRE */
.histoire{ }
.histoire__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,6vw,90px); align-items:center; }
.histoire__media{ position:relative; aspect-ratio:1/1.02; }
.histoire__img{ position:absolute; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); border:1px solid var(--line-soft); }
.histoire__img img{ width:100%; height:100%; object-fit:cover; }
.histoire__img--main{ inset:0 16% 14% 0; }
.histoire__img--float{ width:46%; aspect-ratio:3/4; right:0; bottom:0; box-shadow:0 30px 60px -30px rgba(0,0,0,.95); outline:8px solid var(--bg); }
.histoire__badge{ position:absolute; top:8%; right:6%; z-index:3; width:104px; height:104px; border-radius:50%; display:grid; place-items:center; text-align:center; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#1a120a; line-height:1.5; background:linear-gradient(135deg,var(--gold-2),var(--gold-deep)); box-shadow:0 14px 34px -14px rgba(217,164,65,.8); animation:floatY 5s var(--ease) infinite; }
.histoire__badge strong{ font-family:var(--serif); font-size:1.5rem; letter-spacing:0; }
.histoire__text p{ color:var(--muted); margin-top:18px; font-weight:300; font-size:1.04rem; }
.histoire__quote{ margin-top:30px; padding:22px 26px; border-left:2px solid var(--gold); background:linear-gradient(90deg,rgba(217,164,65,.07),transparent); border-radius:0 12px 12px 0; font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--cream); }
.histoire__quote cite{ display:block; margin-top:12px; font-style:normal; font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); }

/* timeline */
.timeline{ margin-top:clamp(70px,10vh,120px); }
.timeline .kicker{ justify-content:center; margin-bottom:48px; }
.timeline .kicker::before{ display:none; }
.timeline__track{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.timeline__line{ position:absolute; top:54px; left:8%; right:8%; height:2px; background:var(--line); }
.timeline__line span{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); transition:right 1.2s var(--ease); }
.tstep{ text-align:center; }
.tstep__year{ font-family:var(--serif); font-size:1.5rem; color:var(--gold-2); }
.tstep__dot{ width:15px; height:15px; border-radius:50%; background:var(--bg); border:2px solid var(--gold); margin:16px auto 22px; position:relative; z-index:2; transition:background .4s, box-shadow .4s; }
.tstep.in .tstep__dot{ background:var(--gold); box-shadow:0 0 0 6px rgba(217,164,65,.16); }
.tstep p{ font-size:.92rem; color:var(--muted); font-weight:300; }

/* ---------------------------------------------------------------- FEATURED */
.featured__grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; gap:22px; }
.fcard{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-soft); transform-style:preserve-3d; background:var(--surface); }
.fcard.big{ grid-row:span 2; grid-column:span 1; }
.fcard__img{ position:absolute; inset:0; }
.fcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); filter:brightness(.92); }
.fcard:hover .fcard__img img{ transform:scale(1.08); }
.fcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(15,11,7,.55) 66%,rgba(15,11,7,.95)); }
.fcard__info{ position:absolute; z-index:2; bottom:0; left:0; right:0; padding:22px 22px 24px; transform:translateZ(36px); }
.fcard__info h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; }
.fcard.big .fcard__info h3{ font-size:1.85rem; }
.fcard__info p{ font-size:.88rem; color:var(--cream-2); opacity:.85; margin-top:5px; max-width:26em; }
.fcard__price{ display:inline-block; margin-top:12px; font-family:var(--serif); font-size:1.2rem; color:var(--gold-2); }
.featured__cta{ margin-top:48px; text-align:center; }

/* tags */
.tag{ position:absolute; top:16px; left:16px; z-index:3; padding:6px 14px; border-radius:100px; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(6px); }
.tag--pop{ background:rgba(217,164,65,.92); color:#1a120a; }
.tag--sig{ background:rgba(192,86,45,.92); color:#fff; }
.tag--mg{ background:rgba(20,15,11,.7); color:var(--gold-2); border:1px solid var(--gold); }

/* ---------------------------------------------------------------- MENU */
.menu__tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; position:sticky; top:64px; z-index:40; padding:14px 0; }
.menu__tabs::before{ content:""; position:absolute; inset:-2px -40px; background:linear-gradient(var(--bg),var(--bg) 70%,transparent); z-index:-1; }
.mtab{ padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.015); color:var(--cream-2); font-size:.82rem; font-weight:500; letter-spacing:.02em; cursor:pointer; white-space:nowrap; transition:all .3s var(--ease); }
.mtab:hover{ border-color:var(--gold); color:var(--gold-2); }
.mtab.active{ background:linear-gradient(135deg,var(--gold-2),var(--gold-deep)); color:#1a120a; border-color:transparent; box-shadow:0 8px 20px -10px rgba(217,164,65,.7); }

.menu__panel{ display:none; }
.menu__panel.active{ display:block; animation:fadeUp .6s var(--ease); }
.menu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 56px; }
.mitem{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:10px; padding:16px 0; border-bottom:1px dashed var(--line-soft); }
.mitem__main{ min-width:0; }
.mitem__top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mitem__name{ font-family:var(--serif); font-weight:500; font-size:1.16rem; color:var(--cream); }
.mitem__lead{ flex:1; border-bottom:1px dotted var(--muted-2); transform:translateY(-4px); min-width:18px; opacity:.5; }
.mitem__desc{ font-size:.86rem; color:var(--muted); font-weight:300; margin-top:4px; }
.mitem__price{ font-family:var(--serif); font-size:1.1rem; color:var(--gold-2); white-space:nowrap; }
.mtag{ font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:100px; }
.mtag.pop{ background:rgba(217,164,65,.18); color:var(--gold-2); }
.mtag.sig{ background:rgba(192,86,45,.2); color:var(--ember-2); }
.mtag.exc{ background:rgba(120,180,120,.16); color:#9fd3a0; }
.mtag.best{ background:rgba(217,164,65,.18); color:var(--gold-2); }
.menu__note{ text-align:center; margin-top:48px; font-family:var(--script); font-size:1.4rem; color:var(--gold-2); }

/* ---------------------------------------------------------------- FOODTRUCK */
.foodtruck{ position:relative; max-width:none; padding:0; margin-top:40px; }
.foodtruck__bg{ position:absolute; inset:0; z-index:0; }
.foodtruck__bg img{ width:100%; height:100%; object-fit:cover; }
.foodtruck__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(15,11,7,.95) 0%,rgba(15,11,7,.82) 40%,rgba(15,11,7,.45) 100%); }
.foodtruck__content{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding:clamp(80px,13vh,150px) var(--pad); }
.foodtruck__content .section__title{ max-width:14em; }
.foodtruck__lead{ margin-top:20px; max-width:40em; color:var(--cream-2); font-weight:300; font-size:1.06rem; }
.foodtruck__meta{ display:flex; gap:40px; flex-wrap:wrap; margin-top:34px; }
.foodtruck__meta div{ display:flex; flex-direction:column; }
.ft__k{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.ft__v{ font-family:var(--serif); font-size:1.18rem; margin-top:4px; }
.ftmenu{ margin-top:40px; max-width:440px; padding:26px 28px; border:1px solid var(--line); border-radius:var(--r); background:rgba(20,15,11,.55); backdrop-filter:blur(8px); }
.ftmenu__title{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); }
.ftmenu ul{ list-style:none; margin-top:16px; }
.ftmenu li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line-soft); }
.ftmenu li span{ font-family:var(--serif); font-size:1.05rem; }
.ftmenu li span em{ font-family:var(--sans); font-style:normal; font-size:.78rem; color:var(--muted); }
.ftmenu li b{ color:var(--gold-2); font-family:var(--serif); font-weight:500; }

/* ---------------------------------------------------------------- GALLERY */
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gitem{ position:relative; overflow:hidden; border-radius:14px; cursor:pointer; border:1px solid var(--line-soft); }
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .5s; filter:saturate(1.02) brightness(.9); }
.gitem:hover img{ transform:scale(1.1); filter:saturate(1.15) brightness(1); }
.gitem::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at center,transparent 50%,rgba(15,11,7,.5)); opacity:0; transition:opacity .4s; }
.gitem:hover::after{ opacity:1; }
.gitem .gitem__plus{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .4s, transform .4s; transform:scale(.6); z-index:2; }
.gitem:hover .gitem__plus{ opacity:1; transform:scale(1); }
.gitem__plus svg{ width:36px; height:36px; color:var(--gold-2); }
.g-tall{ grid-row:span 2; } .g-wide{ grid-column:span 2; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:150; background:rgba(8,6,4,.94); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; padding:24px; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 40px 100px -30px #000; transform:scale(.95); transition:transform .4s var(--ease); }
.lightbox.open img{ transform:scale(1); }
.lightbox__close,.lightbox__nav{ position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--cream); border-radius:50%; width:50px; height:50px; display:grid; place-items:center; cursor:pointer; font-size:1.4rem; transition:background .3s,border-color .3s; }
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(217,164,65,.2); border-color:var(--gold); }
.lightbox__close{ top:24px; right:24px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lb-prev{ left:24px; } .lb-next{ right:24px; }

/* ---------------------------------------------------------------- REVIEWS */
.reviews{ }
.reviews__viewport{ overflow:hidden; }
.reviews__track{ display:flex; transition:transform .7s var(--ease); }
.rev{ flex:0 0 100%; padding:0 clamp(0px,4vw,60px); }
.rev__card{ max-width:780px; margin-inline:auto; text-align:center; }
.rev__stars{ color:var(--gold); letter-spacing:.18em; font-size:1.1rem; margin-bottom:22px; }
.rev__text{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.25rem,2.6vw,1.85rem); line-height:1.45; color:var(--cream); }
.rev__author{ margin-top:26px; display:inline-flex; flex-direction:column; align-items:center; gap:4px; }
.rev__avatar{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); color:#1a120a; background:linear-gradient(135deg,var(--gold-2),var(--gold-deep)); font-size:1.1rem; margin-bottom:8px; }
.rev__name{ font-weight:600; letter-spacing:.04em; }
.rev__role{ font-size:.8rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.reviews__dots{ display:flex; gap:10px; justify-content:center; margin-top:40px; }
.rdot{ width:9px; height:9px; border-radius:50%; background:var(--line); border:none; cursor:pointer; transition:.3s; padding:0; }
.rdot.active{ background:var(--gold); width:26px; border-radius:100px; }
.reviews__join{ text-align:center; margin-top:40px; color:var(--muted); font-weight:300; }
.reviews__join strong{ color:var(--gold-2); font-family:var(--serif); }

/* ---------------------------------------------------------------- CONTACT */
.contact{ }
.contact__grid{ display:grid; grid-template-columns:1.2fr .85fr; gap:clamp(34px,5vw,72px); align-items:start; }
.contact__lead{ margin-top:18px; color:var(--muted); font-weight:300; font-size:1.05rem; max-width:40em; }
.contact__rows{ margin-top:36px; display:flex; flex-direction:column; gap:8px; }
.crow{ display:flex; gap:18px; align-items:center; padding:16px; border-radius:14px; border:1px solid var(--line-soft); background:rgba(255,255,255,.012); transition:border-color .3s, background .3s, transform .3s; }
a.crow:hover{ border-color:var(--gold); background:rgba(217,164,65,.05); transform:translateX(4px); }
.crow__ic{ flex:0 0 46px; height:46px; border-radius:12px; display:grid; place-items:center; color:var(--gold-2); background:rgba(217,164,65,.1); border:1px solid var(--line); }
.crow__txt{ display:flex; flex-direction:column; font-size:.96rem; color:var(--cream-2); }
.crow__txt b{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:3px; font-weight:600; }
.contact__socials{ display:flex; gap:12px; margin-top:30px; }
.contact__socials a{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line); color:var(--cream-2); transition:.3s; }
.contact__socials a:hover{ border-color:var(--gold); color:var(--gold-2); transform:translateY(-3px); background:rgba(217,164,65,.06); }

.contact__card{ position:sticky; top:100px; }
.rescard{ padding:clamp(28px,3vw,40px); border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(165deg,var(--surface),var(--bg-2)); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); text-align:center; }
.rescard__logo{ width:72px; margin:0 auto 18px; }
.rescard h3{ font-family:var(--serif); font-weight:500; font-size:1.6rem; }
.rescard p{ color:var(--muted); font-weight:300; margin:12px 0 24px; font-size:.96rem; }
.rescard .btn{ margin-bottom:12px; }
.rescard__hours{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.rescard__hours div{ display:flex; justify-content:space-between; font-size:.92rem; }
.rescard__hours span{ color:var(--muted); }
.rescard__hours b{ color:var(--cream); font-weight:500; }

/* ---------------------------------------------------------------- FOOTER */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(54px,8vh,90px) var(--pad) 30px; }
.footer__top{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:46px; }
.footer__brand img{ width:60px; margin-bottom:14px; }
.footer__tag{ font-family:var(--script); color:var(--gold-2); font-size:1.3rem; margin-bottom:14px; }
.footer__desc{ color:var(--muted); font-weight:300; font-size:.94rem; max-width:34em; }
.footer h4{ font-family:var(--serif); font-weight:500; font-size:1.1rem; margin-bottom:18px; color:var(--cream); }
.footer__nav{ display:flex; flex-direction:column; gap:11px; }
.footer__nav a{ color:var(--muted); font-size:.94rem; transition:color .3s, padding-left .3s; width:fit-content; }
.footer__nav a:hover{ color:var(--gold-2); padding-left:5px; }
.footer__contact p{ color:var(--muted); font-size:.94rem; margin-bottom:10px; font-weight:300; }
.footer__contact a{ color:var(--gold-2); display:inline-block; margin-bottom:10px; }
.footer__bottom{ max-width:var(--maxw); margin:48px auto 0; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted-2); font-size:.84rem; }
.footer__credit{ font-family:var(--script); font-size:1.05rem; color:var(--gold-deep); }

/* to-top */
.totop{ position:fixed; right:24px; bottom:24px; z-index:80; width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background:rgba(20,15,11,.8); backdrop-filter:blur(10px); color:var(--gold-2); display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(14px); transition:.4s var(--ease); }
.totop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ border-color:var(--gold); background:rgba(217,164,65,.14); }
/* totop sits above the floating WhatsApp button */
.totop{ bottom:88px; }

/* ---------------------------------------------------------------- SKIP LINK */
.skip-link{ position:fixed; top:-60px; left:50%; transform:translateX(-50%); z-index:300; background:var(--gold); color:#1a120a; padding:10px 22px; border-radius:0 0 12px 12px; font-weight:600; font-size:.85rem; text-decoration:none; transition:top .3s var(--ease); }
.skip-link:focus{ top:0; outline:none; }

/* ---------------------------------------------------------------- FOCUS VISIBLE */
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:6px; }

/* ---------------------------------------------------------------- OPEN STATUS (nav) */
.nav__status{ display:inline-flex; align-items:center; gap:7px; margin-left:-8px; padding:5px 12px; border-radius:100px; font-size:.72rem; font-weight:600; letter-spacing:.02em; border:1px solid var(--line); background:rgba(255,255,255,.02); white-space:nowrap; }
.nav__status-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted-2); position:relative; flex:none; }
.nav__status.is-open .nav__status-dot{ background:#5fd47e; box-shadow:0 0 0 0 rgba(95,212,126,.6); animation:pulseDot 2.2s infinite; }
.nav__status.is-open{ color:#bff0c8; border-color:rgba(95,212,126,.3); background:rgba(95,212,126,.08); }
.nav__status.is-closed{ color:var(--ember-2); border-color:rgba(217,122,74,.3); background:rgba(217,122,74,.07); }
.nav__status.is-closed .nav__status-dot{ background:var(--ember-2); }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(95,212,126,.55);} 70%{ box-shadow:0 0 0 7px rgba(95,212,126,0);} 100%{ box-shadow:0 0 0 0 rgba(95,212,126,0);} }

/* status inside reservation card */
.rescard__status{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 14px; padding:6px 14px; border-radius:100px; font-size:.78rem; font-weight:600; }
.rescard__status-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.rescard__status.is-open{ color:#1f7a37; background:rgba(95,212,126,.16); }
.rescard__status.is-open .rescard__status-dot{ background:#23a24b; animation:pulseDot 2.2s infinite; }
.rescard__status.is-closed{ color:#9a3d1c; background:rgba(217,122,74,.16); }
.rescard__status.is-closed .rescard__status-dot{ background:var(--ember); }

/* ---------------------------------------------------------------- MENU SEARCH */
.menu__search{ position:relative; max-width:560px; margin:0 auto 30px; }
.menu__search-ic{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.menu__search input{ width:100%; padding:15px 46px 15px 50px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--cream); font-family:var(--sans); font-size:.95rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.menu__search input::placeholder{ color:var(--muted-2); }
.menu__search input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(217,164,65,.12); }
.menu__search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.menu__search-clear{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,.06); color:var(--cream-2); cursor:pointer; font-size:.8rem; line-height:1; transition:.25s var(--ease); }
.menu__search-clear:hover{ background:var(--ember); color:#fff; }

.menu__results{ animation:fadeUp .5s var(--ease); }
.menu__results-head{ text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:26px; }
.menu__results-head b{ color:var(--gold-2); }
.menu__results .mcat-label{ font-family:var(--serif); font-size:1.05rem; color:var(--gold-2); margin:26px 0 8px; padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
.menu__results .mcat-label:first-child{ margin-top:0; }
.menu__empty{ text-align:center; padding:50px 20px; color:var(--muted); }
.menu__empty b{ display:block; font-family:var(--serif); font-size:1.3rem; color:var(--cream); margin-bottom:8px; }
mark{ background:rgba(217,164,65,.28); color:var(--gold-2); border-radius:3px; padding:0 2px; }

/* ---------------------------------------------------------------- WHATSAPP BTN */
.btn--wa{ color:#fff; background:linear-gradient(135deg,#34c759,#1faa4b); box-shadow:0 12px 30px -12px rgba(37,211,102,.6); }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(37,211,102,.75); }
.btn--wa svg{ vertical-align:-3px; margin-right:6px; }
.soc-wa:hover{ color:#34c759 !important; border-color:#34c759 !important; }

/* floating WhatsApp */
.wafab{ position:fixed; right:24px; bottom:24px; z-index:80; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#34c759,#1faa4b); box-shadow:0 14px 34px -8px rgba(37,211,102,.6); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.wafab::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:waPulse 2.6s infinite; }
.wafab:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 20px 44px -8px rgba(37,211,102,.75); }
@keyframes waPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------------------------------------------------------------- MOBILE ACTION BAR */
.mobilebar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:90; grid-template-columns:repeat(3,1fr); background:rgba(18,13,9,.94); backdrop-filter:blur(18px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0); }
.mobilebar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:11px 4px; color:var(--cream-2); font-size:.7rem; font-weight:600; letter-spacing:.01em; position:relative; }
.mobilebar a:not(:last-child)::after{ content:""; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:var(--line-soft); }
.mobilebar a svg{ color:var(--gold-2); }
.mobilebar a:active{ background:rgba(217,164,65,.1); }
.mobilebar__wa svg{ color:#34c759 !important; }


.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* hide floating elements when a drawer/lightbox is open */
.mobilebar{ transition:transform .4s var(--ease); }
body.locked .mobilebar{ transform:translateY(110%); }
body.locked .wafab{ opacity:0; visibility:hidden; transform:scale(.7); }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width:1080px){
  .univers__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }
  .featured__grid{ grid-template-columns:repeat(2,1fr); }
  .fcard.big{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:860px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(78vw,330px); flex-direction:column; justify-content:center; gap:8px; padding:40px; background:rgba(18,13,9,.97); backdrop-filter:blur(20px); transform:translateX(100%); transition:transform .5s var(--ease); border-left:1px solid var(--line); }
  .nav.open .nav__links{ transform:translateX(0); }
  .nav__link{ font-size:1rem; padding:12px 14px; }
  .nav__link::after{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; margin-left:auto; }
  .hero__script{ display:none; }
  .histoire__grid{ grid-template-columns:1fr; }
  .histoire__media{ max-width:520px; margin-inline:auto; aspect-ratio:1/1; }
  .timeline__track{ grid-template-columns:1fr; gap:6px; text-align:left; padding-left:30px; }
  .timeline__line{ top:0; bottom:0; left:6px; right:auto; width:2px; height:auto; }
  .timeline__line span{ inset:0 0 100% 0; background:linear-gradient(180deg,var(--gold-deep),var(--gold-2)); }
  .tstep{ text-align:left; display:grid; grid-template-columns:auto 1fr; gap:0 18px; padding:14px 0; align-items:center; position:relative; }
  .tstep__year{ grid-row:1; }
  .tstep__dot{ position:absolute; left:-30px; margin:0; top:24px; }
  .tstep p{ grid-column:1/-1; }
  .menu__grid{ grid-template-columns:1fr; gap:0; }
  .contact__grid{ grid-template-columns:1fr; }
  .contact__card{ position:static; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
  .menu__tabs{ top:58px; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:14px 0; margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad); }
  .menu__tabs::-webkit-scrollbar{ display:none; }
}
@media (max-width:560px){
  .univers__grid{ grid-template-columns:1fr; }
  .ucard{ min-height:340px; }
  .ucard__body p{ opacity:.9; max-height:140px; transform:none; }
  .featured__grid{ grid-template-columns:1fr; grid-auto-rows:260px; }
  .fcard.big{ grid-column:span 1; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .stats{ grid-template-columns:1fr 1fr; gap:34px 20px; }
  .footer__top{ grid-template-columns:1fr; }
  .hero__actions .btn{ flex:1; }
  .foodtruck__meta{ gap:24px; }
}
@media (max-width:700px){
  .mobilebar{ display:grid; }
  .wafab{ display:none; }
  .totop{ bottom:calc(70px + env(safe-area-inset-bottom,0px)); right:18px; width:46px; height:46px; }
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:560px){
  .nav__status{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ animation:none; transform:scale(1.05); }
}