/* =========================================================
   Utopia Fried Chicken
   Brand palette taken from the client's own packaging and
   menu boards: signal red, sign yellow, near black, white.
   Red is a fill in both themes. Small text never sits on red
   in yellow, and never on yellow in white.
   ========================================================= */

:root{
  --red:#D81E24;
  --red-deep:#A6141A;
  --yellow:#FFC81A;
  --black:#141110;
  --white:#FFFFFF;

  --paper:#FAF7F3;
  --surface:#FFFFFF;
  --ink:#141110;
  --muted:#5E5854;
  --line:rgba(20,17,16,.14);
  --accent-text:#C0161C;      /* deep red, AA on paper */
  --shadow:0 16px 40px rgba(20,17,16,.12);

  --r:18px;
  --r-pill:999px;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#131010;
    --surface:#1D1918;
    --ink:#F6F1EC;
    --muted:#A79E98;
    --line:rgba(246,241,236,.15);
    --accent-text:#FFC81A;    /* yellow reads far better than red on black */
    --shadow:0 16px 40px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the animated doodle canvas sits between the page colour and the content:
   html carries the colour, body goes transparent, canvas is fixed at z -1 */
html{background:var(--paper)}
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none}

body{
  margin:0;background:transparent;color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.03;letter-spacing:-.03em}
p{margin:0}
sup{font-size:.55em;top:-.5em;position:relative;font-weight:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--black);padding:12px 18px;z-index:99;font-weight:800}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:4px}

.h2{font-size:clamp(30px,4.4vw,54px);font-weight:900;font-stretch:112%}

/* the nav is sticky at 72px, so anchor targets need clearance or the
   section heading lands underneath it */
#meniu,#deal,#locatii,#contact,#top{scroll-margin-top:88px}

/* ---------- sticker banners : the brand's own device ---------- */
.stickers{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}
.sticker{
  display:inline-block;padding:7px 16px;
  font-size:clamp(13px,1.5vw,17px);font-weight:900;font-stretch:112%;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
}
.sticker--red{background:var(--red);color:var(--white);transform:rotate(-2deg)}
.sticker--yellow{background:var(--yellow);color:var(--black);transform:rotate(1.5deg)}
.sticker--black{background:var(--black);color:var(--white);transform:rotate(-1.5deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:15px 26px;border-radius:var(--r-pill);
  font-weight:800;font-size:16px;text-decoration:none;border:2px solid transparent;
  transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--red{background:var(--red);color:var(--white)}
.btn--red:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn--yellow{background:var(--yellow);color:var(--black)}
.btn--yellow:hover{transform:translateY(-2px)}
.btn--outline{border-color:currentColor}
.btn--outline:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.975)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.nav__inner{height:72px;max-width:1400px;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:26px}
/* The supplied lockup is white-and-yellow, drawn for a red ground. On the
   light nav it would be invisible, so it keeps its red field as a chip. */
.wordmark{
  text-decoration:none;margin-right:auto;display:flex;align-items:center;
  background:var(--red);border-radius:var(--r);padding:9px 14px;
}
.wordmark img{height:30px;width:auto}
.wordmark__fallback{display:none;flex-direction:column;line-height:1}
.wordmark.is-text .wordmark__fallback{display:flex}
.wordmark__u{font-weight:900;font-stretch:120%;font-size:22px;letter-spacing:-.04em;color:var(--accent-text)}
.wordmark__sub{font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav__links{display:flex;gap:24px}
.nav__links a{text-decoration:none;font-size:15px;font-weight:700;color:var(--muted);transition:color .18s}
.nav__links a:hover{color:var(--accent-text)}
.nav__actions{display:flex;align-items:center;gap:14px}

.langswitch{display:flex;border:2px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.langswitch button{border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:12.5px;font-weight:800;padding:6px 12px;transition:.18s}
.langswitch button.is-on{background:var(--ink);color:var(--paper)}

.nav__burger{display:none;background:transparent;border:0;color:var(--ink);font-size:24px;cursor:pointer;padding:4px}
.nav__mobile{display:none;flex-direction:column;padding:8px var(--gut) 20px;border-top:1px solid var(--line)}
.nav__mobile a{padding:13px 0;text-decoration:none;font-weight:800;font-size:18px;border-bottom:1px solid var(--line)}
.langswitch--drawer{display:none;align-self:flex-start;margin-top:18px}

/* ---------- image slots ---------- */
.shot{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--red-deep)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot__ph{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  background:
    radial-gradient(120% 90% at 25% 10%, rgba(255,200,26,.34), transparent 60%),
    repeating-linear-gradient(135deg, var(--red) 0 14px, var(--red-deep) 14px 28px);
  color:rgba(255,255,255,.92);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;text-align:center;padding:12px;
}
.shot__ph i{font-size:26px;opacity:.7}
.shot.is-empty .shot__ph{display:flex}

/* ---------- hero : the brand's checkered wall ----------
   Full checkerboard, straight from their product photography. The copy sits
   on a red poster panel over the wall; the burger floats on the wall itself. */
.hero{
  position:relative;color:var(--white);overflow:hidden;
  background:
    conic-gradient(from 90deg at 50% 50%, #F2EDE6 25%, #191515 0 50%, #F2EDE6 0 75%, #191515 0);
  background-size:clamp(64px,9vw,110px) clamp(64px,9vw,110px);
  max-width:none;padding:clamp(40px,5.5vw,76px) var(--gut) clamp(56px,7vw,104px);
  display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(28px,4vw,64px);align-items:center;
}
.hero > *{max-width:1400px}
.hero__copy{
  justify-self:end;width:100%;max-width:706px;position:relative;z-index:2;
  background:var(--red);border-radius:var(--r);
  padding:clamp(24px,3.2vw,48px);box-shadow:var(--shadow);
}
.hero__art{justify-self:start;width:100%;max-width:600px;position:relative;z-index:2}
/* sized to set "Pui crocant," and "fără compromis." one line each inside the
   padded poster panel */
.hero__title{font-size:clamp(36px,4.4vw,62px);font-weight:900;font-stretch:120%;letter-spacing:-.045em;line-height:.96}
.hero__title em{display:block;font-style:italic;color:var(--yellow);line-height:1.08;padding-bottom:.06em}
.hero__sub{margin:22px 0 30px;font-size:clamp(16px,1.5vw,19px);color:rgba(255,255,255,.94);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.shot--hero{aspect-ratio:4/5;box-shadow:var(--shadow);background:var(--red-deep)}
/* lives in the carousel section now: peeks over the red block's bottom edge;
   z sits above the faded edge-of-line burgers, and never overlaps the centre */
.hero__mascot{position:absolute;right:-40px;bottom:-30px;width:min(28vw,260px);z-index:8;pointer-events:none}
.hero__mascot > img{width:100%;height:auto;display:block}

/* ---------- mascot googly eyes ----------
   White ellipses slightly smaller than the drawn eye whites sit on top of
   the artwork, each with its own pupil the JS can steer. The originals'
   black outlines stay visible around them. */
/* Each eye is drawn whole (white, outline, pupil) and covers the painted one
   underneath, because the painted pupils poke above the painted whites and a
   white-only patch left dark crescents showing.
   No position on .mascot itself: .hero__mascot is already absolute and a
   later position:relative at equal specificity would knock it into the flow;
   the other variants set their own positioning. */
.mascot img{width:100%;height:auto;display:block}
.mascot__eye{
  position:absolute;
  left:calc(var(--cx) - var(--w)/2);top:calc(var(--cy) - var(--h)/2);
  width:var(--w);height:var(--h);
  background:#fff;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px #241C18;
}
.mascot__pupil{
  position:absolute;left:50%;top:50%;
  width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff 0 24%, #241C18 25%);
  transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px));
  transition:transform .25s var(--ease);
}
.mascot--deal{position:relative;width:clamp(96px,10vw,132px);margin-bottom:16px}
.mascot--foot{
  position:absolute;left:clamp(20px,7vw,90px);top:3px;
  width:clamp(86px,10vw,120px);transform:translateY(-94%);
  pointer-events:none;
}

/* ---------- floating cutout products ---------- */
/* The whole hero is the checkered wall now, so the burger floats straight on
   it with only its shadow, exactly like the brand's posters. */
.float{position:relative;margin:0;display:flex;justify-content:center}
.float img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 26px 26px rgba(0,0,0,.4))}

/* ---------- 3D carousel ---------- */
/* The carousel stays in the hero's red act but one value deeper, so the two
   sections read as related rooms rather than one flat field or a theme flip.
   The slanted clip-path seam quotes the brand's tilted stickers; the hero's
   brighter red shows through the notch. */
.ring{
  --w:clamp(165px,24vw,300px);
  background:var(--red-deep);color:var(--white);
  margin-top:-2.6vw;
  clip-path:polygon(0 2.4vw, 100% 0, 100% 100%, 0 100%);
  padding:clamp(34px,5.4vw,78px) var(--gut) clamp(48px,5.5vw,80px);
  position:relative;overflow:hidden;
}
/* the hero's brighter red returns as a spotlight behind the active burger */
.ring::before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(900px,90vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(216,30,36,.55),transparent 70%);
  pointer-events:none;
}
.ring__head{position:relative;z-index:2;max-width:1400px;margin:0 auto 6px}
.ring__head .sticker{margin-bottom:14px}
.ring__head .h2{color:var(--white);max-width:12em}

.ring__stage{
  position:relative;z-index:2;
  height:clamp(240px,34vw,380px);
  margin:clamp(18px,3vw,34px) auto 0;
  touch-action:pan-y;cursor:grab;
}
.ring__stage.is-drag{cursor:grabbing}
.ring__track{position:absolute;inset:0}
/* a flat line: the JS sets translateX / scale / opacity / z-index per item */
.ring__item{
  position:absolute;left:50%;top:50%;
  width:var(--w,260px);
  transform:translate(-50%,-50%);
  background:transparent;border:0;padding:0;cursor:pointer;
  transition:transform .6s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
}
.ring__track.is-drag .ring__item{transition:none}
.ring__item img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 22px rgba(0,0,0,.45))}
.ring__item.is-far{opacity:0 !important;pointer-events:none}

.ring__hud{
  position:relative;z-index:2;max-width:1400px;margin:clamp(20px,3vw,36px) auto 0;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,40px);
}
.ring__nav{
  flex:none;width:52px;height:52px;border-radius:var(--r-pill);cursor:pointer;
  border:2px solid rgba(255,255,255,.45);background:transparent;color:var(--white);
  font-size:22px;display:grid;place-items:center;transition:.18s var(--ease);
}
.ring__nav:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.ring__nav:active{transform:scale(.94)}
.ring__info{text-align:center;min-width:min(340px,64vw)}
.ring__info h3{font-size:clamp(24px,3.2vw,36px);font-weight:900;font-stretch:112%}
.ring__info p{color:rgba(255,255,255,.93);font-size:15px;margin:8px 0 14px;min-height:2.6em}
/* .ring__info p is 0,2,0 and outranks the bare .tag rule, which would leave
   grey text on the yellow chip at 1.9:1 */
.ring__info p.tag{display:inline-block;margin:0;color:var(--black)}

@media (prefers-reduced-motion:reduce){
  .ring__track{transition:none}
  .ring__item{transition:none}
}

/* ---------- proof ---------- */
.proof{
  max-width:1400px;margin:0 auto;padding:clamp(46px,6vw,84px) var(--gut) clamp(50px,6vw,92px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,48px);
}
.proof__item{display:flex;flex-direction:column;gap:4px;padding-top:22px;border-top:5px solid var(--red)}
.proof__ico{
  width:52px;height:52px;border-radius:var(--r);margin-bottom:10px;
  display:grid;place-items:center;font-size:26px;
  background:var(--red);color:var(--white);
}
.proof__item:nth-child(2) .proof__ico{background:var(--yellow);color:var(--black)}
.proof__num{font-size:clamp(34px,4.6vw,58px);font-weight:900;font-stretch:114%;letter-spacing:-.04em;line-height:1}
.proof__stars{color:var(--accent-text);font-size:14px;letter-spacing:1px}
.proof__lbl{color:var(--muted);font-size:14.5px;max-width:26ch}

/* ---------- menu ---------- */
.menu{max-width:1400px;margin:0 auto;padding:0 var(--gut) clamp(64px,8vw,110px)}
.menu__head{margin-bottom:30px}
.menu__head .sticker{margin-bottom:16px}
.menu__head .h2{max-width:12em}
.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.tab{
  font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;padding:11px 21px;
  border-radius:var(--r-pill);border:2px solid var(--line);background:transparent;color:var(--muted);
  transition:.18s var(--ease);
}
.tab:hover{color:var(--accent-text);border-color:var(--accent-text)}
.tab.is-on{background:var(--red);border-color:var(--red);color:var(--white)}

/* stretch, not start: a start-aligned row leaves a hole beside the tall
   photo card. Stretched cards pin their price tag to the bottom instead. */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
.item{
  grid-column:span 2;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.item[hidden]{display:none}   /* author display:flex beats the UA [hidden] rule */
.item:hover{transform:translateY(-4px);border-color:var(--red)}
@media (prefers-reduced-motion:reduce){.item:hover{transform:none}}
.item--half{grid-column:span 3}
.item--full{grid-column:span 6}
/* the menu is text-only; the carousel and deal section carry the visuals */
.item__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.item__body h3{font-size:22px;font-weight:900;font-stretch:108%}
.item__body p{color:var(--muted);font-size:15px;line-height:1.5}
.note{font-weight:700}

/* red and yellow feature cards keep their own readable text colors */
.card--red{background:var(--red);border-color:var(--red)}
.card--red .item__body h3,.card--red .what li{color:var(--white)}
.card--red .what li::marker{color:var(--yellow)}
.card--yellow{background:var(--yellow);border-color:var(--yellow)}

.what{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:15px;line-height:1.45}

.tag{
  align-self:flex-start;margin-top:auto;
  background:var(--yellow);color:var(--black);
  padding:8px 15px;font-weight:900;font-size:20px;font-stretch:108%;letter-spacing:-.02em;
}

.rows{display:flex;flex-direction:column;margin-top:2px}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border-bottom:0}
.row span{color:var(--muted)}
.row b{font-size:18px;font-weight:900;color:var(--accent-text);white-space:nowrap}

/* ---------- text menu rows : classic name-dots-price typography ---------- */
.mrows{display:grid;grid-template-columns:1fr 1fr;gap:6px clamp(28px,4vw,64px);margin-top:14px}
.mrow{padding:11px 0}
.mrow__head{display:flex;align-items:baseline;gap:12px}
.mrow__head h3{font-size:19px;font-weight:900;font-stretch:108%;white-space:nowrap}
.mrow__dots{flex:1;border-bottom:3px dotted color-mix(in srgb,var(--ink) 26%,transparent);transform:translateY(-5px)}
.mrow__price{font-size:18px;font-weight:900;color:var(--accent-text);white-space:nowrap}
.mrow p{color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:5px;max-width:52ch}

.chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.chips li{padding:9px 17px;border-radius:var(--r-pill);font-size:14.5px;font-weight:700;background:var(--white);color:var(--black)}

/* Colour-block overrides last, so they beat the base .row / .tag rules.
   Without this the tag inherits the red card's white text and lands on
   yellow at 1.5:1, and the yellow card's rows keep --muted, which fails
   against yellow in dark mode. */
/* .item__body p is 0,1,1 and outranks the bare .tag rule, so the tag would
   inherit --muted and sit grey-on-yellow. Restate it at 0,2,0. */
.item__body .tag{background:var(--yellow);color:var(--black)}
.card--red .item__body p:not(.tag){color:var(--white)}
.card--red .tag{background:var(--yellow);color:var(--black)}
.card--yellow .item__body p:not(.tag),
.card--yellow .row span,
.card--yellow .row b,
.card--yellow .item__body h3{color:var(--black)}
.card--yellow .tag{background:var(--red);color:var(--white)}
.card--yellow .row{border-bottom-color:rgba(20,17,16,.22)}

/* ---------- All In Deal : checkerboard ---------- */
.deal{
  /* No checkerboard band: the deal is a red card on the cream body, the same
     language as the team card. The checker motif lives inside the photo. */
  padding:clamp(16px,3vw,40px) var(--gut) clamp(48px,6vw,92px);
}
.deal__inner{
  position:relative;
  max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px);align-items:center;
  background:var(--red);border-radius:var(--r);padding:clamp(28px,3.4vw,56px);color:var(--white);
  box-shadow:var(--shadow);
}
.deal__flag{
  position:absolute;top:-14px;right:clamp(14px,3vw,40px);
  transform:rotate(4deg);z-index:3;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.deal__sub{margin:6px 0 20px;font-size:clamp(16px,1.5vw,19px);color:rgba(255,255,255,.94);max-width:40ch}
.deal__price{font-size:clamp(46px,6vw,80px);font-weight:900;font-stretch:118%;letter-spacing:-.045em;color:var(--yellow);line-height:1;margin-bottom:26px}
.deal__price em{font-style:normal;font-size:.34em;letter-spacing:0}
.deal__art{aspect-ratio:4/5;max-height:600px;background:var(--red-deep)}
.deal .btn--red{background:var(--white);color:var(--red-deep)}
.deal .btn--red:hover{background:var(--yellow);color:var(--black)}

/* ---------- bento ---------- */
.bento{
  max-width:1400px;margin:0 auto;padding:clamp(64px,8vw,110px) var(--gut);
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px);
}
.bento__cell{
  border-radius:var(--r);padding:32px;border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;gap:10px;justify-content:flex-end;min-height:210px;
}
.bento__cell i{font-size:46px;color:var(--accent-text)}
.bento__cell h3{font-size:19px;font-weight:900}
.bento__cell p{color:var(--muted);font-size:15px;line-height:1.5}
.bento__cell--a{grid-column:span 4;justify-content:center;background:var(--red);border-color:var(--red)}
.bento__cell--a .h2,.bento__cell--a p{color:var(--white)}
.bento__cell--a p{max-width:38ch;font-size:17px;margin-top:10px}
.bento__cell--b{grid-column:span 2}
.bento__cell--c{grid-column:span 2;padding:0;min-height:260px;border:0}
.bento__cell--d{grid-column:span 2}
.bento__cell--e{grid-column:span 2;background:var(--yellow);border-color:var(--yellow)}
.bento__cell--e i,.bento__cell--e h3,.bento__cell--e p{color:var(--black)}

/* ---------- team ---------- */
.team{max-width:1400px;margin:0 auto;padding:0 var(--gut) clamp(64px,8vw,110px)}
.team__head{margin-bottom:30px}
.team__head .sticker{margin-bottom:16px}
.team__head .h2{max-width:13em}
.team__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(14px,1.8vw,26px);align-items:stretch}
.team__ph{aspect-ratio:auto;min-height:340px}
/* yellow, not red: the deal card and the bento lead cell are already red, and
   a third identical red block in the body read as a habit rather than a system */
.team__copy{
  background:var(--yellow);border-radius:var(--r);padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:16px;color:var(--black);
}
/* the lockup is white and yellow, drawn for red: it keeps a red chip here,
   the same treatment as the nav wordmark */
.team__logo{
  height:40px;width:auto;align-self:flex-start;margin-bottom:6px;
  background:var(--red);border-radius:12px;padding:9px 14px;box-sizing:content-box;
}
.team__copy p{font-size:clamp(16px,1.4vw,18.5px);line-height:1.55;color:rgba(20,17,16,.9)}
.team__copy .btn{align-self:flex-start;margin-top:8px}

/* ---------- locations ---------- */
.loc{max-width:1400px;margin:0 auto;padding:0 var(--gut) clamp(64px,8vw,110px)}
.loc__head{margin-bottom:30px}
.loc__head .sticker{margin-bottom:16px}
.loc__head .h2{max-width:13em}
.loc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.place{padding:34px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.place h3{font-size:clamp(28px,3.4vw,40px);font-weight:900;font-stretch:114%}
.place__addr{margin-top:8px;font-size:18px;color:var(--muted)}
.place__hours{margin-top:16px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.place__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.place__links a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:11px 19px;
  border-radius:var(--r-pill);border:2px solid var(--line);font-size:14.5px;font-weight:800;transition:.18s var(--ease);
}
.place__links a:hover{border-color:var(--red);color:var(--accent-text)}

/* ---------- footer : black block ---------- */
.foot{
  position:relative;   /* anchors the peeking mascot */
  background:var(--black);color:#F6F1EC;
  padding:clamp(48px,6vw,80px) var(--gut) 34px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;
}
.foot > *{max-width:1400px}
.foot__logo{height:44px;width:auto}
.foot__tag{margin-top:14px;color:#B3A9A2;font-size:15px;max-width:26ch}
.foot__col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px;font-weight:800}
.foot__col a,.foot__col p{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:15.5px;font-weight:700;padding:5px 0}
.foot__col a:hover{color:var(--yellow)}
.foot__legal{
  grid-column:1/-1;padding-top:26px;border-top:1px solid rgba(246,241,236,.16);
  color:#B3A9A2;font-size:13.5px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.foot__law{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__law a{color:#B3A9A2;text-decoration:none;font-weight:600;padding:0}
.foot__law a:hover{color:var(--yellow)}

/* ---------- motion : reveal on enter ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* feedback when a menu category is switched */
@media (prefers-reduced-motion:no-preference){
  .item.in{animation:pop .38s var(--ease) both}
  @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;padding-top:32px}
  .hero__copy{justify-self:stretch;max-width:none}
  /* the cutout is 582px wide at source, so never let the stacked hero
     stretch it past that or it goes soft and swallows the fold */
  .hero__art{justify-self:center;max-width:min(100%,440px)}
  .shot--hero{aspect-ratio:16/11}
  .hero__mascot{width:150px;right:-24px;bottom:-16px}
  .grid,.bento{grid-template-columns:repeat(4,1fr)}
  .item,.item--half{grid-column:span 2}
  .item--full{grid-column:span 4}
  .bento__cell--a{grid-column:span 4}
  .bento__cell--b,.bento__cell--c,.bento__cell--d,.bento__cell--e{grid-column:span 2}
  .deal__inner{grid-template-columns:1fr}
  .deal__art{aspect-ratio:16/10;max-height:none}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  body{font-size:16px}
  .nav__inner{gap:14px}
  .nav__links{display:none}
  .nav__actions > .langswitch{display:none}   /* moves into the drawer, keeps the order CTA labelled */
  .nav__burger{display:block}
  .nav.is-open .nav__mobile{display:flex}
  .nav.is-open .langswitch--drawer{display:flex}
  .hero__mascot{display:none}
  /* two 52px buttons plus a 64vw label overflow a 375px row */
  .ring__hud{gap:10px}
  .ring__nav{width:44px;height:44px;font-size:19px}
  .ring__info{min-width:0;flex:1 1 auto}
  .proof{grid-template-columns:1fr;gap:22px}
  .grid,.bento{grid-template-columns:1fr}
  .item,.item--half,.item--full,
  .bento__cell--a,.bento__cell--b,.bento__cell--c,.bento__cell--d,.bento__cell--e{grid-column:span 1}
  .mrows{grid-template-columns:1fr}
  .team__grid{grid-template-columns:1fr}
  .team__ph{min-height:240px}
  .loc__grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}