/* ============================================================
   BURGO — editorial smashed-burger site
   Style system matched to the reference: huge outlined type,
   rotated Modak labels, scattered cutouts, jelly dividers.
   ============================================================ */

:root {
  --beige: #f5e3cd;
  --beige-deep: #efd6b8;
  --black: #1b1b1b;
  --mustard: #ffd750;
  --mustard-dark: #f4a804;
  --red: #f91814;
  --red-deep: #4c0016;
  --green: #60a905;
  --brown: #662c00;
  --cream: #fff6e6;
  --white: #ffffff;

  --stroke: clamp(3px, .7vw, 14px);
  --stroke-lg: clamp(4px, 1vw, 20px);
  --stroke-sm: 4px;

  --font-display: "Modak", "Mouse Memoirs", cursive;
  --font-head: "Mouse Memoirs", "Modak", sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;

  --nav-pad: clamp(14px, 2.5vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--beige);
  color: var(--black);
  overflow-x: hidden;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--red); color: var(--cream); }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   TYPE UTILITIES
   ============================================================ */
.heading-hero { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; line-height: .78; font-size: clamp(66px, 27vw, 620px); }
.heading-300 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; line-height: .75; font-size: clamp(44px, 15vw, 340px); }
.heading-180 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; line-height: .85; font-size: clamp(32px, 9vw, 200px); }
.heading-600 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .55; font-size: clamp(72px, 33vw, 720px); }
.label { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .9; font-size: clamp(17px, 2.8vw, 64px); }
.text-40 { font-size: clamp(14px, 1.8vw, 40px); line-height: 1.12; }
.text-60 { font-size: clamp(16px, 2.8vw, 60px); line-height: 1.05; }

.f-head { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
.f-modak { font-family: var(--font-display); }
.f-body { font-family: var(--font-body); }

.c-red { color: var(--red); }
.c-mustard { color: var(--mustard); }
.c-mustard-dark { color: var(--mustard-dark); }
.c-beige { color: var(--beige); }
.c-white { color: var(--white); }
.c-black { color: var(--black); }
.c-red-deep { color: var(--red-deep); }

/* outlined text — white stroke sits behind the fill */
.stroke { -webkit-text-stroke: var(--stroke) var(--white); paint-order: stroke fill; }
.stroke-lg { -webkit-text-stroke-width: var(--stroke-lg); }
.stroke-sm { -webkit-text-stroke-width: var(--stroke-sm); }
.stroke-c-beige { -webkit-text-stroke-color: var(--beige); }
.stroke-c-mustard { -webkit-text-stroke-color: rgba(244, 168, 4, .38); }
.stroke-c-red { -webkit-text-stroke-color: var(--red); }
.stroke-c-black { -webkit-text-stroke-color: var(--black); }

.r-n45 { rotate: -45deg; } .r-n15 { rotate: -15deg; } .r-n12 { rotate: -12deg; }
.r-n8 { rotate: -8deg; } .r-n5 { rotate: -5deg; } .r-n7 { rotate: -7deg; }
.r-5 { rotate: 5deg; } .r-6 { rotate: 6deg; } .r-7 { rotate: 7deg; } .r-8 { rotate: 8deg; }
.r-12 { rotate: 12deg; } .r-15 { rotate: 15deg; } .r-45 { rotate: 45deg; }

.upper { text-transform: uppercase; }
.center { text-align: center; }
.wrap { width: min(1500px, 100% - 6vw); margin-inline: auto; }
.rel { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   JELLY WAVE DIVIDERS
   ============================================================ */
.jelly { display: block; width: 100%; height: auto; pointer-events: none; }
.jelly path { fill: currentColor; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black); color: var(--beige);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__scene { position: relative; width: min(72vw, 460px); aspect-ratio: 1; display: grid; place-items: center; }
.preloader__burger { position: relative; z-index: 3; width: min(60vw, 320px); aspect-ratio: 800 / 720; transform-origin: bottom center; }
.preloader__layer { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.preloader__layer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.preloader__bits { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.preloader__bits i { position: absolute; top: 42%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; display: block; }
.preloader__bits i:nth-child(3n+1) { background: #ffd750; }
.preloader__bits i:nth-child(3n+2) { background: #ffffff; }
.preloader__bits i:nth-child(3n+3) { background: #60a905; }
.preloader__word {
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .34em; font-size: clamp(11px, 1.1vw, 22px);
  margin-top: clamp(22px, 3vw, 56px); color: rgba(245, 227, 205, .9); text-align: center;
}
.preloader__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(8px, 1vw, 20px); background: rgba(255, 255, 255, .15); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--mustard); transition: width .1s linear; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(12px, 1.6vw, 30px) var(--nav-pad);
}
.nav__logo {
  font-family: var(--font-display); color: var(--red);
  font-size: clamp(30px, 4vw, 84px); line-height: 1;
  -webkit-text-stroke: var(--stroke-sm) var(--white); paint-order: stroke fill;
  transition: transform .3s ease;
}
.nav__logo:hover { transform: scale(1.05); }
.nav__actions { display: flex; align-items: center; gap: clamp(8px, 1vw, 18px); }
.pill {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(13px, 1.3vw, 26px); padding: .55vw 1.7vw; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .6vw;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pill--red { background: var(--red); color: var(--beige); }
.pill--red:hover { background: var(--black); }
.pill--ghost { border: 2px solid rgba(27, 27, 27, .22); background: transparent; }
.pill--ghost:hover { border-color: var(--black); }

/* text-swap hover (reference: label slides up, duplicate slides in) */
.swap { position: relative; display: inline-block; overflow: hidden; }
.swap__a, .swap__b { display: block; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.swap__b { position: absolute; inset: 0; transform: translateY(100%); }
a:hover .swap__a, button:hover .swap__a, .swap:hover .swap__a { transform: translateY(-100%); }
a:hover .swap__b, button:hover .swap__b, .swap:hover .swap__b { transform: translateY(0); }
.pill__icon { width: clamp(14px, 1.2vw, 22px); height: clamp(14px, 1.2vw, 22px); position: relative; }
.pill__icon i { position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--black); border-radius: 9px; }
.pill__icon i:nth-child(1) { top: 0; }
.pill__icon i:nth-child(2) { top: 50%; transform: translateY(-50%); width: 70%; }
.pill__icon i:nth-child(3) { bottom: 0; }
.nav__menu { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 1vw); right: 0; width: min(360px, 92vw);
  background: var(--red); color: var(--beige); border-radius: 1.2vw;
  padding: 2vw; box-shadow: 0 1vw 3vw rgba(27, 27, 27, .25);
  transform-origin: top right;
  opacity: 0; visibility: hidden; transform: scale(.3);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility .35s ease;
}
.nav__panel.is-open { opacity: 1; visibility: visible; transform: scale(1); }
.nav__panel a {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px, 2.4vw, 52px); line-height: 1.12; color: var(--beige);
  transition: color .25s ease, transform .25s ease;
}
.nav__panel a:hover { color: var(--mustard); transform: translateX(6px); }
.nav__panel-foot { margin-top: 1.4vw; padding-top: 1vw; border-top: 1px solid rgba(245, 227, 205, .2); }
.nav__panel-foot p { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .2em; font-size: clamp(10px, .9vw, 15px); color: rgba(245, 227, 205, .8); }
.nav__overlay {
  position: fixed; inset: 0; z-index: 998; background: rgba(249, 24, 20, .3);
  backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.nav__overlay.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  padding: calc(var(--nav-pad) + 8vw) 0 9vw;
}
.hero__title { grid-area: 1 / 1; z-index: 1; text-align: center; }
.hero__media {
  grid-area: 1 / 1; z-index: 2;
  width: clamp(190px, 40vw, 560px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; border: 6px solid var(--white);
  box-shadow: 0 30px 70px rgba(27, 27, 27, .32);
  transform: translateY(14%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__brand {
  grid-area: 1 / 1; z-index: 3; transform: translateY(56%);
  font-family: var(--font-display); color: var(--mustard-dark);
  font-size: clamp(56px, 15vw, 320px); line-height: 1; text-transform: uppercase;
}
.hero__label {
  position: absolute; z-index: 4; font-family: var(--font-display);
  font-size: clamp(18px, 2.8vw, 64px); color: var(--mustard-dark);
  text-align: center; line-height: .9;
}
.hero__label--a { top: 15%; left: 5%; }
.hero__label--b { bottom: 17%; right: 5%; }
.hero__foot {
  position: absolute; bottom: 2.5vw; left: 0; width: 100%;
  display: flex; justify-content: space-between; gap: 2vw; padding: 0 var(--nav-pad); z-index: 4;
}
.hero__foot p { width: 23vw; font-size: clamp(13px, 1.5vw, 30px); line-height: 1.15; }
.hero__foot p:last-child { text-align: right; margin-left: auto; }

/* ============================================================
   SECTION : CLASSIC (TOP CLASSIC)
   ============================================================ */
.classic { position: relative; padding: 8vw 0 10vw; text-align: center; }
.classic__label { display: inline-block; }
.classic__head { width: min(1200px, 92%); margin: 1vw auto 0; }
.classic__body { width: min(760px, 90%); margin: 2vw auto 0; font-size: clamp(14px, 1.6vw, 34px); line-height: 1.15; }
.classic__grid {
  position: relative; width: min(1200px, 92%); margin: 3vw auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2vw;
}
.classic__grid figure { border-radius: 4%; overflow: hidden; aspect-ratio: 20 / 25; box-shadow: 0 18px 40px rgba(27,27,27,.22); }
.classic__grid figure img { width: 100%; height: 100%; object-fit: cover; }
.classic__grid figure:nth-child(1) { rotate: 5deg; }
.classic__grid figure:nth-child(2) { rotate: -5deg; }
.classic__grid figure:nth-child(3) { rotate: 8deg; }
.classic__sticker { position: absolute; top: -13vw; left: 4vw; width: clamp(90px, 15vw, 260px); z-index: 5; }

/* ============================================================
   SECTION : EXPERIENCE (red)
   ============================================================ */
.exp { position: relative; background: var(--red); color: var(--beige); padding: 6vw 0 12vw; overflow: hidden; }
.exp__marquee { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; }
.exp__label { position: relative; z-index: 2; text-align: center; }
.exp__head { text-align: center; color: var(--beige); margin-top: 2vw; }
.exp__stats {
  display: flex; justify-content: space-between; gap: 2vw; padding: 0 var(--nav-pad);
  margin-top: 3vw; font-family: var(--font-head); text-transform: uppercase;
  font-size: clamp(15px, 1.8vw, 40px); line-height: 1.1;
}
.exp__stats p:last-child { text-align: right; }
.exp__media { position: relative; width: min(80vw, 1100px); margin: 3vw auto 0; z-index: 2; }
.exp__media img { width: 100%; border-radius: 2vw; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.exp__badge { position: absolute; bottom: 8%; right: 6%; z-index: 3; }
.exp__hands { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); display: flex; gap: 60%; z-index: 3; }
.exp__hands span { width: clamp(30px, 7vw, 120px); aspect-ratio: 3/4; background: var(--cream); border-radius: 10px; }

/* ============================================================
   SECTION : CHEESY SPACER
   ============================================================ */
.cheesy { position: relative; height: 150vh; overflow: hidden; }
.cheesy__img {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(52vw, 780px); will-change: transform;
}
.cheesy__img img { width: 100%; border-radius: 3vw; box-shadow: 0 40px 90px rgba(27,27,27,.3); }

/* ============================================================
   SECTION : QUALITY (scattered ingredients)
   ============================================================ */
.quality { position: relative; background: var(--beige); padding: 14vw 3vw 16vw; overflow: hidden; }
.quality__lines { display: flex; flex-direction: column; align-items: center; gap: .5vw; text-align: center; position: relative; z-index: 2; }
.quality__img { position: absolute; z-index: 3; filter: drop-shadow(0 18px 30px rgba(27,27,27,.25)); }
.quality__img img { width: 100%; border-radius: 50%; border: 5px solid var(--white); object-fit: cover; }
.q-tomato { width: clamp(90px, 18vw, 300px); right: 12vw; top: 16vw; aspect-ratio: 1; }
.q-cheese { width: clamp(110px, 23vw, 380px); left: 10vw; top: 38vw; aspect-ratio: 1; z-index: 4; }
.q-meat { width: clamp(100px, 20vw, 320px); right: 13vw; bottom: -2vw; aspect-ratio: 1; z-index: 5; }
.q-lettuce { width: clamp(120px, 24vw, 400px); left: 12vw; top: 2vw; aspect-ratio: 1; z-index: 6; }

/* ============================================================
   SECTION : TAKE AWAY (mustard — plane flies the dashed route)
   Matched to the reference: 163vw tall route, plane.png flies the
   dashed path while the five country cards pop in on scroll.
   ============================================================ */
.takeaway { position: relative; background: var(--mustard); overflow: hidden; }
.takeaway__route-wrap { position: relative; width: 100%; height: 163vw; }
.takeaway__route { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.takeaway__plane { position: absolute; top: 0; left: 0; width: 15vw; z-index: 2; pointer-events: none; will-change: transform; backface-visibility: hidden; }
.takeaway__intro { position: relative; z-index: 10; margin-top: 20vw; }
.takeaway__label { display: inline-block; margin-left: 1vw; translate: 0 -6vw; }
.takeaway__head { width: 80vw; line-height: .85; }
.takeaway__desc { width: min(30vw, 620px); margin: 2vw 0 0 1vw; font-family: var(--font-head); text-transform: uppercase; font-size: clamp(15px, 1.8vw, 38px); line-height: 1.1; }
.tcard { position: absolute; display: flex; flex-direction: column; gap: 1.5vw; z-index: 200; will-change: transform; cursor: pointer; }
.tcard__label { font-family: var(--font-display); color: var(--red); font-size: clamp(22px, 3.2vw, 72px); line-height: .9; will-change: transform; }
.tcard__img { width: 14vw; height: 17vw; border-radius: 1vw; overflow: hidden; box-shadow: 0 22px 50px rgba(27,27,27,.28); background: var(--cream); }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; }
.tc-berlin { right: 5vw; top: 50vw; align-items: flex-end; }
.tc-london { left: 35vw; top: 64vw; align-items: flex-start; }
.tc-newyork { right: 20vw; top: 80vw; align-items: flex-end; }
.tc-sydney { left: 15vw; top: 105vw; align-items: flex-start; }
.tc-tokyo { right: 14vw; top: 130vw; align-items: flex-end; }

/* ============================================================
   SECTION : CTA
   ============================================================ */
.cta { position: relative; background: var(--beige); padding: 10vw var(--nav-pad) 12vw; overflow: hidden; }
.cta__inner { display: flex; align-items: center; gap: 3vw; width: min(1500px, 100%); margin-inline: auto; }
.cta__copy { width: 55%; display: flex; flex-direction: column; align-items: flex-start; gap: 2vw; }
.cta__body { width: min(520px, 90%); font-family: var(--font-head); text-transform: uppercase; font-size: clamp(15px, 1.8vw, 38px); line-height: 1.12; }
.cta__media { width: 45%; aspect-ratio: 3 / 4; border-radius: 2vw; overflow: hidden; box-shadow: 0 30px 70px rgba(27,27,27,.3); }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__sticker { position: absolute; bottom: 2vw; left: 50%; translate: -50% 0; width: clamp(90px, 18vw, 320px); z-index: 4; }

/* ============================================================
   BLOB BUTTON
   ============================================================ */
.blob-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; isolation: isolate; }
.blob-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.blob-btn svg path { fill: var(--red); transition: fill .25s ease; }
.blob-btn:hover svg path { fill: var(--black); }
.blob-btn span {
  position: relative; z-index: 1; color: var(--white); font-family: var(--font-head);
  text-transform: uppercase; font-size: clamp(15px, 1.8vw, 40px);
  padding: 1.5vw 4.5vw; white-space: nowrap;
}

/* ============================================================
   FOOTER (big word + juggling ingredients, matched to reference)
   ============================================================ */
.footer { position: relative; background: var(--beige); padding: 7vw var(--nav-pad) 0; overflow: hidden; }
.footer__top { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 2vw; flex-wrap: wrap; padding-bottom: 1vw; }
.footer__links { display: flex; flex-wrap: wrap; gap: 2vw; }
.footer__links a { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(18px, 1.8vw, 40px); transition: color .25s ease; }
.footer__links a:hover { color: var(--red); }
.footer__copy { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(14px, 1.5vw, 30px); opacity: .8; }
.footer__rule { position: relative; z-index: 30; height: 2px; background: rgba(27, 27, 27, .2); margin: 1.5vw 0 1vw; transform-origin: left center; }
.footer__tag { position: relative; z-index: 30; font-family: var(--font-head); text-transform: uppercase; font-size: clamp(14px, 1.5vw, 30px); opacity: .8; }
.footer__brand { position: relative; margin-top: 10vw; min-height: 18vw; }
.footer__juggle { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 20; pointer-events: none; }
.footer__juggle img { position: absolute; bottom: 0; opacity: 0; user-select: none; will-change: transform, opacity; }
.footer__juggle img:nth-child(1) { left: 12%; width: 11vw; }
.footer__juggle img:nth-child(2) { left: 34%; width: 9vw; }
.footer__juggle img:nth-child(3) { left: 56%; width: 12vw; }
.footer__juggle img:nth-child(4) { left: 80%; width: 13vw; }
.no-js .footer__juggle img { opacity: 1; transform: translateX(-50%); }
.footer__word {
  position: relative; z-index: 10; text-align: center; color: var(--red);
  -webkit-text-stroke: var(--stroke-lg) var(--white); paint-order: stroke fill;
  translate: 0 5vw;
}
.footer__word .char { display: inline-block; will-change: transform; }

/* ============================================================
   FIXED "CRAVING..." OVERLAY
   ============================================================ */
.craving {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  display: grid; place-items: center; overflow: hidden; opacity: 0; transition: opacity .5s ease;
}
.craving.is-visible { opacity: 1; }
.craving span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(64px, 18vw, 400px); color: rgba(76, 0, 22, .5); line-height: 1; }

/* ============================================================
   ROPE CURSOR (matches the reference: white trailing rope with
   four ingredient knots that gather at the pointer when idle)
   ============================================================ */
.rope-cursor {
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none; overflow: hidden; opacity: 0;
}
.rope-cursor__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rope-cursor__knot { position: absolute; left: 0; top: 0; will-change: transform; }
.rope-cursor__dot {
  width: 2.2vw; height: 2.2vw; border-radius: 50%;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(12px);
  border: 1px solid rgba(27, 27, 27, .2);
  display: grid; place-items: center;
}
.rope-cursor__dot img { width: 70%; height: 70%; object-fit: contain; user-select: none; }

/* ============================================================
   SCROLL REVEAL / WORD SPLIT
   ============================================================ */
.word { display: inline-block; will-change: transform; }
.reveal { opacity: 0; transform: translateY(40px); }
.no-js .reveal, .reveal.is-shown { opacity: 1; transform: none; }

/* ============================================================
   INNER PAGES (menu / spices / contact)
   ============================================================ */
.page { position: relative; padding: calc(var(--nav-pad) + 10vw) 0 8vw; overflow: hidden; }
.page__label { display: inline-block; margin-left: 2vw; }
.page__title { width: min(1400px, 96%); margin: 1vw auto 0; }
.page__desc { width: min(760px, 90%); margin: 2vw auto 0; text-align: center; font-size: clamp(14px, 1.6vw, 34px); line-height: 1.15; }
.page__big { position: absolute; z-index: 0; }

/* menu */
.tabs { display: flex; flex-wrap: wrap; gap: 1vw; justify-content: center; margin: 4vw auto 3vw; }
.tab {
  font-family: var(--font-head); text-transform: uppercase; font-size: clamp(14px, 1.4vw, 30px);
  padding: .5vw 2vw; border-radius: 999px; border: 2px solid rgba(27,27,27,.25);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tab.is-active, .tab:hover { background: var(--black); color: var(--mustard); border-color: var(--black); }
.menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4vw 3vw; width: min(1300px, 92%); margin-inline: auto; }
.dish { display: grid; grid-template-columns: clamp(90px, 12vw, 200px) 1fr; gap: 1.4vw; align-items: center; padding: 1.2vw 0; border-bottom: 2px solid rgba(27,27,27,.14); }
.dish__img { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--white); box-shadow: 0 10px 24px rgba(27,27,27,.2); }
.dish__img img { width: 100%; height: 100%; object-fit: cover; }
.dish h3 { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 56px); line-height: 1; }
.dish p { font-size: clamp(13px, 1vw, 18px); opacity: .75; margin-top: .5vw; }
.dish__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1vw; margin-top: .6vw; }
.dish__price { font-family: var(--font-display); color: var(--red); font-size: clamp(22px, 2.2vw, 46px); }
.dish__tag { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(11px, .9vw, 16px); letter-spacing: .12em; padding: .2vw 1vw; border-radius: 999px; background: var(--black); color: var(--mustard); }
.dish__tag--veg { background: var(--green); color: var(--cream); }

/* spices */
.spices-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; width: min(1400px, 92%); margin-inline: auto; }
.spice { position: relative; }
.spice__num { font-family: var(--font-display); color: var(--red); font-size: clamp(40px, 5vw, 110px); line-height: .8; }
.spice h3 { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 58px); line-height: 1; margin-top: .4vw; }
.spice p { font-size: clamp(13px, 1vw, 18px); opacity: .78; margin-top: .8vw; }
.heat { display: flex; gap: .4vw; margin-top: 1vw; }
.heat i { width: clamp(10px, 1vw, 18px); aspect-ratio: 1; border-radius: 50%; background: rgba(27,27,27,.16); }
.heat i.on { background: var(--red); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; width: min(1400px, 92%); margin-inline: auto; }
.cform { display: grid; gap: 1.4vw; }
.field { display: grid; gap: .5vw; }
.field label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(13px, 1.1vw, 20px); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: clamp(14px, 1.1vw, 20px);
  padding: 1vw 1.4vw; border: 3px solid var(--black); border-radius: 14px; background: var(--cream); color: var(--black);
}
.field textarea { min-height: 140px; resize: vertical; }
.info-item { display: grid; grid-template-columns: clamp(44px, 4vw, 74px) 1fr; gap: 1.2vw; margin-bottom: 1.6vw; }
.info-item__icon { width: clamp(44px, 4vw, 74px); aspect-ratio: 1; border-radius: 50%; background: var(--mustard); border: 3px solid var(--black); display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 34px); }
.info-item h4 { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(18px, 1.6vw, 34px); }
.info-item p { font-size: clamp(13px, 1vw, 18px); opacity: .78; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .heading-hero { font-size: clamp(58px, 24vw, 400px); line-height: .82; }
  .heading-300 { font-size: 22vw; }
  .heading-180 { font-size: 15vw; }
  .pill { font-size: 3.6vw; padding: 1.8vw 5vw; gap: 2vw; }
  .nav__actions { gap: 2.5vw; }
  .nav__panel { width: 91vw; padding: 5vw; border-radius: 4vw; margin-top: 2vw; }
  .nav__panel a { font-size: 8vw; }
  .nav__panel-foot p { font-size: 3.4vw; }
  .nav__toggle-btn { display: inline-flex; }
  .hero { padding-top: calc(var(--nav-pad) + 26vw); }
  .hero__media { width: 78vw; }
  .hero__brand { translate: 0 46%; font-size: 22vw; }
  .hero__label--a { top: 4%; left: 3%; }
  .hero__label--b { bottom: 4%; right: 3%; }
  .hero__foot { position: static; flex-direction: column; align-items: center; margin-top: 4vw; }
  .hero__foot p { width: 90%; text-align: center !important; }
  .classic__grid { grid-template-columns: 1fr; max-width: 80vw; gap: 4vw; }
  .classic__grid figure { rotate: 0deg !important; }
  .classic__sticker { top: -18vw; width: 28vw; }
  .exp__stats { flex-direction: column; align-items: center; text-align: center !important; }
  .exp__stats p { text-align: center !important; }
  .quality { padding: 30vw 4vw; }
  .quality__img { opacity: .95; }
  .q-tomato { width: 26vw; right: 4vw; top: 26vw; }
  .q-cheese { width: 32vw; left: 4vw; top: 66vw; }
  .q-meat { width: 28vw; right: 4vw; }
  .q-lettuce { width: 36vw; left: 4vw; top: 20vw; }
  .takeaway__route-wrap { height: auto; padding-bottom: 24vw; }
  .takeaway__plane { width: 26vw; }
  .takeaway__intro { margin-top: 18vw; padding: 0 var(--nav-pad); }
  .takeaway__label { translate: 0 -2vw; }
  .takeaway__head { width: 100%; }
  .takeaway__desc { width: 100%; margin-left: 0; }
  .tcard { position: static; align-items: center !important; margin-top: 8vw; width: 80vw; }
  .tcard__img { width: 80vw; height: 96vw; }
  .cta__inner { flex-direction: column; }
  .cta__copy { width: 100%; align-items: center; text-align: center; }
  .cta__body { width: 100%; text-align: center; }
  .cta__media { width: 100%; aspect-ratio: 4/3; }
  .footer__brand { margin-top: 5vw; min-height: 18vw; }
  .footer__word { translate: 0 0; }
  .menu-list, .spices-list, .contact-grid { grid-template-columns: 1fr; }
  .dish { grid-template-columns: 90px 1fr; }
  .rope-cursor { display: none; }
}

@media (min-width: 901px) {
  .nav__toggle-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}