:root{
  --orange:#f36e21;
  --orange-ink:#b3470b;
  --brown:#3b1a0c;
  --brown-2:#5a2a14;
  --grey:#eff0f4;
  --paper:#ffffff;
  --cream:#fff4ea;
  --ink:#24110a;
  --muted:#6d5a50;

  --ar:"Changa",sans-serif;
  --pop:"Lilita One","Changa",sans-serif;

  --gut:clamp(16px,4vw,56px);
  --max:1200px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grey);color:var(--ink);font-family:var(--ar);font-size:17px;line-height:1.75;overflow-x:clip}
html[lang="en"] body{line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:10px}

.btn{display:inline-block;border-radius:16px;text-decoration:none;font:700 16px/1 var(--ar);transition:transform .25s var(--spring),background .2s,color .2s}
.btn>span{display:flex;align-items:center;justify-content:center;gap:.4em;padding:16px 24px;white-space:nowrap}
.btn--orange{background:var(--orange);color:var(--ink);box-shadow:0 5px 0 var(--orange-ink)}
.btn--orange:hover{transform:translateY(-2px)}
.btn--line{box-shadow:inset 0 0 0 2.5px var(--brown);color:var(--brown)}
.btn--line:hover{background:var(--brown);color:#fff}
.btn--brown{background:var(--brown);color:#fff}
.btn--brown:hover{transform:translateY(-2px)}

/* ---------- mascot navigation ---------- */
.buddy{position:fixed;z-index:70;bottom:0;inset-inline-end:14px;display:grid;justify-items:end}
.buddy__btn{position:relative;border:0;padding:0;background:none;cursor:pointer;width:96px;height:112px;overflow:hidden}
.buddy__btn img{position:absolute;bottom:-34px;left:50%;width:96px;height:auto;translate:-50% 0;filter:drop-shadow(0 8px 10px rgba(36,17,10,.3));transition:bottom .45s var(--spring),rotate .3s}
.buddy__btn:hover img{bottom:-18px;rotate:-6deg}
.buddy__btn[aria-expanded="true"] img{bottom:0;rotate:0deg}
.buddy__lbl{position:absolute;top:4px;inset-inline-start:0;background:var(--brown);color:#fff;font:700 12.5px/1 var(--ar);padding:7px 10px;border-radius:999px}
.buddy__btn[aria-expanded="true"] .buddy__lbl{opacity:0}
.bubble{position:relative;width:min(calc(100vw - 28px),330px);margin-bottom:8px;background:var(--paper);border-radius:26px;padding:20px 20px 16px;box-shadow:0 26px 50px -20px rgba(36,17,10,.5),inset 0 0 0 3px var(--ink);transform-origin:bottom;animation:pop .45s var(--spring)}
.bubble[hidden]{display:none}
.bubble::after{content:"";position:absolute;bottom:-14px;inset-inline-end:44px;width:26px;height:26px;background:var(--paper);border-inline-end:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
[dir="ltr"] .bubble::after{transform:rotate(45deg)}
[dir="rtl"] .bubble::after{transform:rotate(-45deg);border-inline-end:0;border-inline-start:3px solid var(--ink)}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(30px)}}
.bubble__q{font:800 15px/1.4 var(--ar);color:var(--orange-ink);margin-bottom:6px}
.bubble__nav{display:grid}
.bubble__nav a{font:800 24px/1.5 var(--ar);text-decoration:none;padding:4px 0;transition:color .2s,padding .3s var(--spring)}
.bubble__nav a:hover{color:var(--orange-ink);padding-inline-start:8px}
.bubble__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:2px dashed #e6ddd6}
.bubble__call{text-decoration:none;font:700 15px/1.3 var(--ar);color:var(--brown)}
.bubble__call bdi{font-family:var(--pop);font-weight:400}
.lang{border:0;padding:0;border-radius:12px;background:var(--orange);color:var(--ink);cursor:pointer}
.lang>span{display:block;padding:10px 14px;font:700 14px/1 var(--ar)}

/* ---------- shared ---------- */
section{position:relative;padding:clamp(80px,10vw,140px) var(--gut)}
.head{max-width:var(--max);margin:0 auto clamp(30px,4vw,50px)}
.head--c{text-align:center}
.head__k{font:800 15px/1.4 var(--ar);color:var(--orange-ink);margin-bottom:18px}
.title{font:800 clamp(38px,5.4vw,76px)/1.4 var(--ar);color:var(--brown)}
.title em{display:inline-block;font-style:normal;color:var(--orange-ink);line-height:1.4}
.title--light{color:#fff}
.title--light em{color:var(--orange)}
html[lang="en"] .title{font:400 clamp(40px,5.6vw,80px)/1.05 var(--pop)}
html[lang="en"] .title em{line-height:1.05}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;padding-inline:max(var(--gut),calc((100% - var(--max))/2));overflow:hidden;isolation:isolate}
.swirl{position:absolute;inset:-10% -5% auto auto;width:min(90vw,900px);z-index:-1;fill:none;stroke:#e4e5ea;stroke-width:34;stroke-linecap:round}
.hero__logo{width:clamp(120px,12vw,170px);height:auto;border-radius:18px;box-shadow:0 14px 30px -18px rgba(36,17,10,.5);transform:rotate(-4deg);margin-bottom:24px}
.hero__title{font:800 clamp(50px,6.6vw,100px)/1.25 var(--ar);color:var(--brown)}
.hero__title em{display:inline-block;font-style:normal;color:var(--orange-ink);line-height:1.25}
html[lang="en"] .hero__title{font:400 clamp(54px,7vw,108px)/1 var(--pop)}
html[lang="en"] .hero__title em{line-height:1}
.hero__sub{font-size:clamp(17px,1.4vw,20px);max-width:27em;margin:18px 0 28px;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.wday{margin-top:22px;display:inline-flex;align-items:center;gap:10px;background:var(--paper);border-radius:14px;padding:10px 14px;font:700 15px/1.5 var(--ar);box-shadow:inset 0 0 0 2px #e4ddd8}
.wday b{color:var(--orange-ink)}
.wday.is-on{background:var(--brown);color:#fff;box-shadow:none}
.wday.is-on b{color:var(--orange)}
.hero__art{position:relative;display:grid;place-items:center;padding:40px 0}
.hero__wings{width:min(100%,640px);height:auto;border-radius:28px;transform:rotate(-3deg)}
.bday{position:absolute;top:0;inset-inline-start:0;width:clamp(160px,17vw,210px);aspect-ratio:1;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-content:center;justify-items:center;text-align:center;text-decoration:none;transform:rotate(-10deg);box-shadow:0 18px 34px -16px rgba(36,17,10,.55),inset 0 0 0 6px rgba(255,255,255,.35);transition:transform .4s var(--spring)}
.bday[hidden]{display:none}
.bday:hover{transform:rotate(0) scale(1.05)}
.bday__k{font:800 14px/1.3 var(--ar);margin-bottom:8px}
.bday__big{display:flex;align-items:baseline;gap:6px;line-height:1.1}
.bday__big b{font:400 clamp(50px,5vw,66px)/1 var(--pop)}
.bday__big i{font:800 17px/1 var(--ar);font-style:normal}
.bday__price{font:800 17px/1.2 var(--ar)}
.bday__price b{font:400 26px/1 var(--pop)}
.bday__left{margin-top:4px;font:700 12.5px/1.3 var(--ar);background:var(--brown);color:#fff;border-radius:999px;padding:5px 10px}

/* ---------- counter ---------- */
.count{background:var(--paper)}
.calc{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.calc__controls{display:grid;gap:22px}
.row{display:grid;gap:10px}
.row[hidden]{display:none}
.row__lbl{font:800 17px/1.5 var(--ar);color:var(--brown)}
.row__lbl b{font:400 20px/1 var(--pop);color:var(--orange-ink)}
.row__hint{font:600 14px/1.5 var(--ar);color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg__b{border:0;padding:0;border-radius:14px;background:var(--grey);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 2px #e2e3e9;transition:background .2s,color .2s,transform .25s var(--spring)}
.seg__b>span{display:block;padding:12px 18px;font:700 16px/1.2 var(--ar)}
.seg__b small{display:block;font:600 12.5px/1.3 var(--ar);opacity:.8;margin-top:3px}
.seg__b:hover{transform:translateY(-2px)}
.seg__b[aria-checked="true"]{background:var(--brown);color:#fff;box-shadow:none}
.seg__b--hot[aria-checked="false"]{box-shadow:inset 0 0 0 2px var(--orange)}
.range{width:100%;accent-color:var(--orange);height:28px}
.cups{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cup{border:0;padding:0;background:none;cursor:pointer;width:100%;color:var(--ink)}
.cup>span{display:grid;justify-items:center;gap:4px}
.cup img{width:100%;max-width:74px;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px transparent;transition:box-shadow .2s,transform .3s var(--spring)}
.cup b{font:700 12.5px/1.3 var(--ar);text-align:center}
.cup[aria-pressed="true"] img{box-shadow:0 0 0 4px var(--orange);transform:scale(1.06)}
.cup[aria-pressed="true"] b{color:var(--orange-ink)}
.calc__tray{position:sticky;top:20px;background:var(--grey);border-radius:28px;padding:22px;display:grid;gap:10px;justify-items:center;text-align:center;box-shadow:inset 0 0 0 3px #e2e3e9}
.pile{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:120px;align-content:center;max-width:320px}
.pile i{width:26px;height:26px;animation:drop .35s var(--spring) both}
.pile svg{width:100%;height:100%}
@keyframes drop{from{transform:translateY(-16px) scale(.4);opacity:0}}
.calc__what{font:800 19px/1.5 var(--ar);color:var(--brown)}
.calc__total{color:var(--orange-ink);font:800 18px/1 var(--ar)}
.calc__total b{font:400 58px/1 var(--pop)}
.calc__note{font:600 14.5px/1.6 var(--ar);color:var(--muted);min-height:1.6em}

/* ---------- burgers ---------- */
.burgers{background:var(--brown);color:#fff}
.burgers .head__k{color:var(--orange)}
.bgs{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bg{background:var(--paper);color:var(--ink);border-radius:26px;padding:18px 16px 18px;display:grid;gap:10px;align-content:start}
.bg__img{height:170px;display:flex;align-items:center;justify-content:center}
.bg__img img{max-height:76%;width:auto;max-width:78%;object-fit:contain;filter:drop-shadow(0 16px 12px rgba(36,17,10,.25));transition:transform .45s var(--spring)}
.bg[data-size="1"] .bg__img img{max-height:88%;max-width:89%}
.bg[data-size="2"] .bg__img img{max-height:100%;max-width:100%}
.bg__name{font:800 26px/1.35 var(--ar);color:var(--brown)}
html[lang="en"] .bg__name{font:400 24px/1.2 var(--pop)}
.bg .seg{gap:6px}
.bg .seg__b>span{padding:9px 11px;font-size:14px}
.bg__price{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:10px;border-top:2px dashed #eee4dd}
.bg__price span{font:700 14px/1.4 var(--ar);color:var(--muted)}
.pr{color:var(--orange-ink);white-space:nowrap}
.pr b{font:400 30px/1 var(--pop)}
.pr small{font:700 13px/1 var(--ar);margin-inline-start:4px}
.burgers__note{max-width:var(--max);margin:18px auto 0;text-align:center;font:600 15px/1.6 var(--ar);color:#f1dfd4}

/* ---------- more ---------- */
.tiles{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tile{background:var(--paper);border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.tile__img{background:var(--bgc,#eff0f4);aspect-ratio:1.15;display:grid;place-items:center;overflow:hidden}
.tile__img img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--spring)}
.tile__img--cut img{width:70%;height:78%}
.tile:hover .tile__img img{transform:scale(1.06) rotate(-2deg)}
.tile__body{padding:12px 16px 16px;display:grid;gap:2px;align-content:start}
.tile__name{font:800 19px/1.45 var(--ar);color:var(--brown)}
.tile__sub{font:600 13.5px/1.5 var(--ar);color:var(--muted)}
.tile .pr b{font-size:26px}

/* ---------- branches ---------- */
.branches{background:var(--paper)}
.brs{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.brc{background:var(--grey);border-radius:24px;padding:24px 22px;display:grid;gap:6px;align-content:start;box-shadow:inset 0 0 0 3px #e2e3e9}
.brc__no{font:400 30px/1 var(--pop);color:var(--orange-ink)}
.brc__name{font:800 25px/1.4 var(--ar);color:var(--brown)}
.brc__map{font:700 14.5px/1.4 var(--ar);color:var(--orange-ink);text-decoration:none;margin-top:6px}
.br-call{text-align:center;margin-top:26px}

/* ---------- footer ---------- */
.foot{background:var(--orange);color:var(--ink);text-align:center;padding:clamp(60px,8vw,100px) var(--gut) 140px;display:grid;justify-items:center;gap:18px}
.foot__logo{width:150px;height:auto;border-radius:18px}
.foot__line{font:400 clamp(30px,4vw,54px)/1 var(--pop);color:var(--brown)}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.foot__links a{text-decoration:none;font:700 15px/1 var(--ar);padding:12px 18px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--brown)}
.foot__links a:hover{background:var(--brown);color:#fff}
.foot__credit{font-size:14px;font-weight:600}
.foot__credit a{text-decoration:none;font-weight:800}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc__tray{position:relative;top:auto}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:60px}
  .brs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero__cta .btn{flex:1 1 auto}
  .cups{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bgs{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile__name{font-size:16.5px}
  .bday{width:150px}
  .bday__big b{font-size:46px}
  .buddy__btn{width:82px;height:96px}
  .buddy__btn img{width:82px;bottom:-30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}