/* =========================================================
   KAPITAN — Burger & Kebs
   Shared design system
   ========================================================= */

:root {
  /* base */
  --graphite: #16110e;
  --graphite-2: #1f1916;
  --graphite-3: #302721;
  --cream: #f4ece0;
  --cream-2: #ebe1d1;
  --off-white: #fbf8f2;
  --ink: #0b0807;

  /* burger accents */
  --orange: #e8741c;
  --orange-2: #ff8a2b;
  --orange-deep: #b9560e;

  /* kebs accents (matched to logo purple) */
  --plum: #7c3482;
  --plum-2: #903a96;
  --plum-deep: #5a2660;

  /* type */
  --f-display: "Anton", "Oswald", Impact, sans-serif;
  --f-script: "Caveat", "Comic Sans MS", cursive;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "Courier New", monospace;

  /* fixed chrome height */
  --topbar-h: 64px;
}

/* brand-level accent tokens — drive shared components (toggle, call bar, drawer) */
body[data-brand="burger"] {
  --accent: var(--orange);
  --accent-2: var(--orange-2);
  --accent-deep: var(--orange-deep);
  --accent-ink: #1a0f06;
}
body[data-brand="kebs"] {
  --accent: var(--plum);
  --accent-2: var(--plum-2);
  --accent-deep: var(--plum-deep);
  --accent-ink: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* clip horizontal overflow at the root too — body's overflow-x:hidden alone
   doesn't contain the off-screen fixed drawer (translateX), which otherwise
   leaves a horizontally scrollable / rubber-band strip on mobile */
html { overflow-x: hidden; }
html { scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  font-family: var(--f-body);
  background: var(--graphite);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* page show/hide */
.page { display: none; min-height: 100vh; }
.page.is-active { display: block; }

/* =========================================================
   PRODUCT PAGE — shared
   ========================================================= */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(14px, 3vw, 28px);
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(22,17,14,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: var(--topbar-h);
}

/* round icon buttons (hamburger, call) — 44px touch targets */
.iconbtn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: var(--cream);
  transition: background .25s, border-color .25s, color .25s;
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:hover, .iconbtn:focus-visible { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.iconbtn--call {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.iconbtn--call:hover, .iconbtn--call:focus-visible { background: var(--accent-2); border-color: var(--accent-2); }

/* segmented Burger / Kebs toggle — the sticky brand switch */
.brand-toggle {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  width: min(100%, 260px);
}
.brand-toggle__opt {
  flex: 1 1 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(244,236,224,.7);
  transition: background .25s, color .25s;
}
.brand-toggle__opt:hover { color: var(--cream); }
.brand-toggle__opt.is-active { color: var(--accent-ink); }
.page--burger .brand-toggle__opt.is-active { background: var(--orange); color: #1a0f06; }
.page--kebs   .brand-toggle__opt.is-active { background: var(--plum-2); color: #fff; }

/* burger / kebs theme tints on topbar */
.page--burger .topbar { border-bottom-color: rgba(232,116,28,.18); }
.page--kebs .topbar { border-bottom-color: rgba(138,58,120,.22); }

/* drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--graphite-2);
  z-index: 100;
  transform: translateX(105%);
  transition: transform .55s cubic-bezier(.7,.05,.2,1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.06);
  box-shadow: -30px 0 60px rgba(0,0,0,.4);
}
.drawer.is-open { transform: translateX(0); }
.drawer__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.drawer__scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.drawer__head h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
  opacity: .65;
}
.drawer__close {
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.drawer__close:hover { background: rgba(255,255,255,.08); }
.drawer__links {
  list-style: none;
  margin: 0;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  overflow-y: auto;
}
.drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .25s, padding-left .25s;
}
.drawer__links a:hover { padding-left: 8px; }
.page--burger .drawer__links a:hover { color: var(--orange); }
.page--kebs .drawer__links a:hover { color: var(--plum-2); }
.drawer__links a .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  opacity: .4;
}
.drawer__foot {
  padding: 22px 28px 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drawer__phone {
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: .02em;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page--burger .drawer__phone { color: var(--orange-2); }
.page--kebs .drawer__phone { color: var(--plum-2); }
.drawer__socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.drawer__socials a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: background .3s, color .3s, border-color .3s;
}
.drawer__socials a:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.drawer__pyszne {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
}
.drawer__pyszne:hover { background: rgba(255,255,255,.08); }

/* =========================================================
   HERO (product)
   ========================================================= */
.hero {
  position: relative;
  /* min-height (not fixed height) so tall copy grows the hero instead of
     being clipped at the top/bottom by overflow:hidden */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  /* stronger, bottom-weighted scrim so white copy stays legible over
     bright parts of the food photography */
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 32%, rgba(0,0,0,.92) 100%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
}
.page--burger .hero__photo { background-image: url("assets/burger_serowy.jpg"); }
.page--kebs .hero__photo { background-image: url("assets/kebab.jpg"); }

.hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 48px) clamp(20px, 4vw, 60px) 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 40px;
}
.hero__logo {
  height: clamp(54px, 9vw, 76px);
  width: auto;
  margin-bottom: 18px;
}
/* The Kebs logo image is near-square with extra internal padding + the skewer
   icon, so its lettering renders ~40% smaller than the Burger wordmark at the
   same height. Scale it up so both brands read as the same visual size. */
.page--kebs .hero__logo { height: clamp(76px, 12.5vw, 106px); }
.hero__kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: .9;
}
.hero__kicker::before {
  content: "";
  width: 28px; height: 1px; background: currentColor;
  display: inline-block;
}
.page--burger .hero__kicker { color: var(--orange-2); }
.page--kebs .hero__kicker { color: var(--plum-2); }
.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 144px);
  line-height: .88;
  text-transform: uppercase;
  margin: 14px 0 10px;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.hero__title .small {
  display: block;
  font-size: .42em;
  letter-spacing: .04em;
  opacity: .85;
}
.hero__hash {
  font-family: var(--f-script);
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--cream);
  display: inline-block;
  transform: rotate(-3deg);
  margin-top: 4px;
}
.page--burger .hero__hash { color: var(--orange-2); }
.page--kebs .hero__hash { color: var(--plum-2); }
.hero__meta {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}
/* live open/closed badge */
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero__status .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #9aa0a6;
  flex: 0 0 auto;
}
.hero__status.is-open { color: #e3f6e8; border-color: rgba(52,208,88,.45); }
.hero__status.is-open .dot { background: #34d058; animation: statusPulse 2.4s ease-in-out infinite; }
.hero__status.is-closed .dot { background: #e0564f; }
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,208,88,.55); }
  50% { box-shadow: 0 0 0 6px rgba(52,208,88,0); }
}
.hero__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--cream);
  max-width: 420px;
  opacity: .9;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
/* reusable button — full-width-friendly on mobile, 48px tall */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.btn--accent:hover, .btn--accent:focus-visible { background: var(--accent-2); border-color: var(--accent-2); }
.btn--ghost {
  background: rgba(255,255,255,.04);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.4);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; }
.hero__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pill {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
}
.page--burger .pill.accent { background: var(--orange); color: #1a0f06; border-color: var(--orange); }
.page--kebs .pill.accent { background: var(--plum); color: #fff; border-color: var(--plum); }
.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .65;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 28px;
  background: currentColor;
  display: inline-block;
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(.3); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.001% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(.3); transform-origin: bottom; }
}

@media (max-width: 800px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* reset desktop's align-items:end → full-width, left-aligned */
    gap: 16px;
    padding: calc(var(--topbar-h) + 20px) 22px 100px;
  }
  /* push the content group to the bottom when there's room; the auto margin
     collapses to 0 when copy is tall, so nothing is ever clipped at the top */
  .hero__inner > div:first-child { margin-top: auto; }
  .hero__logo { height: clamp(44px, 11vw, 58px); margin-bottom: 12px; }
  .page--kebs .hero__logo { height: clamp(62px, 15vw, 81px); }
  .hero__title { font-size: clamp(34px, 11vw, 58px); margin: 6px 0; overflow-wrap: break-word; }
  .hero__lede { font-size: 16px; max-width: none; }
  .hero__actions { width: 100%; }
  /* on mobile the sticky call bar covers calling — show only the primary CTA */
  .hero__actions .btn--accent { flex: 1 1 100%; }
  .hero__actions .btn--ghost { display: none; }
  /* declutter: the feature pills add noise on a phone hero */
  .hero__pills { display: none; }
  .hero__meta { padding-bottom: 0; gap: 14px; }
  .hero__scroll { display: none; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  position: relative;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 4vw, 60px);
}
.section__inner {
  max-width: 1320px;
  margin: 0 auto;
}
.section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section__num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  white-space: nowrap;
}
.section__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 92px);
  line-height: .92;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
}
.page--burger .section__title .acc { color: var(--orange); }
.page--kebs .section__title .acc { color: var(--plum-2); }
.section--cream {
  background: var(--cream);
  color: var(--ink);
}
.section--cream .section__title { color: var(--ink); }
.section--cream .section__num { color: rgba(0,0,0,.55); }

/* =========================================================
   MENU
   ========================================================= */
.menu {
  background: var(--graphite-2);
}
.menu__categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px) clamp(24px, 4vw, 60px);
}
@media (max-width: 800px) {
  .menu__categories { grid-template-columns: 1fr; }
}
.menu-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 14px;
  margin-bottom: 22px;
  gap: 10px;
}
.menu-cat__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
}
.page--burger .menu-cat__title { color: var(--orange); }
.page--kebs .menu-cat__title { color: var(--plum-2); }
.menu-cat__tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .55;
}
.menu-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.menu-item:last-child { border-bottom: none; }
.menu-item__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cream);
}
.menu-item__price {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--cream);
}
.page--burger .menu-item__price { color: var(--orange-2); }
.page--kebs .menu-item__price { color: var(--plum-2); }
.menu-item__desc {
  grid-column: 1 / -1;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(244,236,224,.65);
}
.menu-item--simple { grid-template-columns: 1fr auto; }
.menu-item--simple .menu-item__name { font-size: 17px; }

/* add-on strip under a category (e.g. "Doładuj smasha") */
.menu-cat__addons {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.menu-cat__addons-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* muted via colour (not opacity) so the accented price can stay full-strength */
  color: rgba(244,236,224,.6);
}
.menu-cat__addons-label .addon-price { color: var(--accent-2); }
.menu-addons {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.addon-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cream);
}
.addon-chip__emoji { font-size: 14px; line-height: 1; }
.addon-chip__img { width: 20px; height: 20px; object-fit: contain; }

/* compact list for non-burgers */
.menu-cat--compact .menu-item { padding-bottom: 12px; }
.menu-cat--compact .menu-item__name { font-size: 17px; letter-spacing: .04em; }
.menu-cat--compact .menu-list { gap: 14px; }

/* placeholder (kebs) */
.menu-placeholder {
  border: 1.5px dashed rgba(255,255,255,.2);
  padding: clamp(48px, 6vw, 80px);
  text-align: center;
  border-radius: 6px;
  position: relative;
}
.menu-placeholder__stamp {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  padding: 6px 12px;
  border: 1px solid rgba(156,58,147,.55);
  color: var(--plum-2);
  border-radius: 999px;
  transform: rotate(4deg);
}
.menu-placeholder h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--plum-2);
}
.menu-placeholder p {
  max-width: 540px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(244,236,224,.75);
}
.menu-placeholder__ico {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid rgba(156,58,147,.55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-size: 28px;
  color: var(--plum-2);
}

/* single signature product (kebs menu) */
.menu__single { max-width: 760px; }
.kebs-signature {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: clamp(26px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(156,58,147,.10), rgba(255,255,255,.02));
}
.kebs-signature__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 18px;
  margin-bottom: 20px;
}
.kebs-signature__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--plum-2);
}
.kebs-signature__tag {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .55;
}
.kebs-signature__price {
  font-family: var(--f-mono);
  font-size: 22px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--plum-2);
}
.kebs-signature__desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(244,236,224,.78);
  margin: 0;
}
.kebs-choice { margin-top: 26px; }
.kebs-choice__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .6;
}
.kebs-choice__opts {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kebs-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cream);
}
.kebs-chip b {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--plum-2);
}
.kebs-chip--sauce { font-size: 16px; }
.kebs-chip__emoji { font-size: 18px; line-height: 1; }

/* drinks + coffee grid below the signature card on the kebs menu */
.menu__categories--kebs { margin-top: clamp(48px, 6vw, 80px); }

/* =========================================================
   DELIVERY
   ========================================================= */
.delivery {
  background: var(--cream);
  color: var(--ink);
}
.delivery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .delivery__grid { grid-template-columns: 1fr; } }
.del-card {
  background: var(--off-white);
  border: 1px solid rgba(0,0,0,.08);
  padding: 36px 30px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.del-card__num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  color: rgba(0,0,0,.06);
}
.del-card__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.del-card__icon svg { width: 22px; height: 22px; }
.page--burger .del-card__icon { background: var(--orange); color: #1a0f06; }
.page--kebs .del-card__icon { background: var(--plum); color: #fff; }
.del-card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.del-card p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
  color: rgba(0,0,0,.7);
}
.del-card__meta {
  list-style: none; padding: 0; margin: auto 0 0;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  border-top: 1px dashed rgba(0,0,0,.15);
  padding-top: 16px;
}
.del-card__meta li {
  display: flex; justify-content: space-between; gap: 10px;
}
.del-card__meta b { font-weight: 700; }
.del-card__cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--graphite);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: background .25s;
}
.del-card__cta:hover { background: var(--ink); }
.page--burger .del-card__cta { background: var(--orange); color: #1a0f06; }
.page--burger .del-card__cta:hover { background: var(--orange-deep); color: var(--cream); }
.page--kebs .del-card__cta { background: var(--plum); color: #fff; }
.page--kebs .del-card__cta:hover { background: var(--plum-deep); }
.del-card__lede {
  background: var(--graphite);
  color: var(--cream);
}
.del-card__lede h3 { color: #fff; }
.del-card__lede p { color: rgba(244,236,224,.78); }
.del-card__lede .del-card__num { color: rgba(255,255,255,.08); }
.del-card__lede .del-card__icon { background: var(--cream); color: var(--ink); }
.page--burger .del-card__lede .del-card__icon { background: var(--orange); color: #1a0f06; }
.page--kebs .del-card__lede .del-card__icon { background: var(--plum); color: #fff; }

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  background: var(--graphite);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }
.about__lede {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.page--burger .about__lede .acc { color: var(--orange); }
.page--kebs .about__lede .acc { color: var(--plum-2); }
.about__body p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
  color: rgba(244,236,224,.78);
}
.about__pillars {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.about-pillar {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.about-pillar:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.about-pillar__ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--cream);
}
.about-pillar__ico svg { width: 22px; height: 22px; }
.page--burger .about-pillar__ico { color: var(--orange-2); border-color: rgba(232,116,28,.4); }
.page--kebs .about-pillar__ico { color: var(--plum-2); border-color: rgba(156,58,147,.45); }
.about-pillar h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.about-pillar p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(244,236,224,.7);
}
.about__stamp {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 32px;
  letter-spacing: .02em;
}
.about__stamp .acc { font-family: var(--f-script); font-size: 1.1em; font-weight: 400; text-transform: none; }
.page--burger .about__stamp .acc { color: var(--orange-2); }
.page--kebs .about__stamp .acc { color: var(--plum-2); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  background: var(--cream);
  color: var(--ink);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--off-white);
  border: 1px solid rgba(0,0,0,.08);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 4px;
}
.contact-card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.contact__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.contact__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.contact__list .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .6;
  display: block;
  margin-bottom: 4px;
}
.contact__list .val {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--ink);
  text-transform: uppercase;
}
.contact__list .val a:hover { text-decoration: underline; }
.contact__list .ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.page--burger .contact__list .ico { background: var(--orange); color: #1a0f06; }
.page--kebs .contact__list .ico { background: var(--plum); color: #fff; }
.map-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 360px;
}
.map-card iframe {
  width: 100%; height: 100%;
  min-height: 360px;
  border: 0;
  filter: grayscale(.4) contrast(1.05);
}

/* =========================================================
   FOODTRUCK
   ========================================================= */
.foodtruck {
  background: var(--graphite);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.foodtruck__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 900px) { .foodtruck__grid { grid-template-columns: 1fr; } }
.foodtruck__image {
  position: relative;
  min-height: 420px;
  background-image: url("assets/foodtruck.jpg");
  background-size: cover;
  background-position: center;
}
.foodtruck__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.2), rgba(0,0,0,.55));
}
.foodtruck__image .stamp {
  position: absolute;
  bottom: 24px; left: 24px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  background: rgba(0,0,0,.6);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
}
.foodtruck__copy {
  padding: clamp(36px, 5vw, 72px);
  background: var(--graphite-2);
  display: flex; flex-direction: column; justify-content: center;
}
.foodtruck__copy h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.page--burger .foodtruck__copy h3 .acc { color: var(--orange); }
.page--kebs .foodtruck__copy h3 .acc { color: var(--plum-2); }
.foodtruck__copy p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(244,236,224,.78);
  margin: 0 0 14px;
}
.foodtruck__menu {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foodtruck__menu li {
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.foodtruck__menu li::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  opacity: .6;
}
.page--burger .foodtruck__menu li:nth-child(1) { color: var(--orange-2); }
.foodtruck__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: background .25s;
}
.page--burger .foodtruck__cta { background: var(--orange); color: #1a0f06; }
.page--burger .foodtruck__cta:hover { background: var(--orange-2); }
.page--kebs .foodtruck__cta { background: var(--plum); color: #fff; }
.page--kebs .foodtruck__cta:hover { background: var(--plum-2); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 60px clamp(20px, 4vw, 60px) 30px;
}
.footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 30px;
  align-items: center;
}
@media (max-width: 700px) { .footer__inner { grid-template-columns: 1fr; text-align: left; } }
.footer__brand {
  font-family: var(--f-display);
  font-size: 32px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.page--burger .footer__brand .acc { color: var(--orange); }
.page--kebs .footer__brand .acc { color: var(--plum-2); }
.footer__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
}
.footer__socials {
  display: flex; gap: 10px;
}
.footer__socials a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.footer__socials a:hover { background: var(--cream); color: var(--ink); }

/* =========================================================
   small reveal animation
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   MOBILE STICKY CALL BAR
   ========================================================= */
.callbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none;            /* shown on mobile only */
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  min-height: 56px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.callbar__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
}
.callbar__ico svg { width: 22px; height: 22px; }
.callbar__txt {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex: 1 1 auto;
}
.callbar__num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .85;
  white-space: nowrap;
}

/* =========================================================
   MOBILE REFINEMENTS
   ========================================================= */
@media (max-width: 800px) {
  /* show sticky call bar + reserve room so footer isn't covered */
  .callbar { display: flex; }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* readable body text & comfortable menu rows on phones */
  .menu-item__name { font-size: 20px; }
  .menu-item__desc { font-size: 15px; }
  .menu-cat__title { font-size: 28px; }

  /* hide topbar call icon on mobile — the sticky call bar covers it
     (the empty 44px grid column keeps the toggle centred) */
  .iconbtn--call { visibility: hidden; }
}

/* keep the segmented toggle tappable but compact on the very small screens */
@media (max-width: 360px) {
  .brand-toggle__opt { font-size: 14px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__scroll::after { animation: none; }
}