/* Halal New York Gyro — premium layer.
 * Loads after style.css. Everything here is elevation: type refinement, depth,
 * motion, image treatment and micro-detail. Nothing here changes content.
 * Zero external requests — no webfont CDN, no icon font, no tracking.
 */

/* ---------- self-hosted display type ----------
 * Barlow Condensed, SIL Open Font License 1.1 — free for commercial use and
 * embedding. Three weights served from our own
 * origin, so "zero external requests" still holds: that rule was never
 * "no fonts," it was "no CDN."
 *
 * WHY: the previous stack resolved to Bahnschrift, a Windows system font. The
 * owner called the site "basic" on 2026-08-05, and a 2026-08-05 pixel review of
 * the logo-v2 set found the same defect in the logo. System type is the single
 * strongest "undesigned" tell on a page. This removes it.
 *
 * NOT THE FINAL ANSWER. Barlow is a good, common open face — a designer still
 * reads it as a sensible default. Commissioned or licensed display lettering
 * remains a Phase 1 deliverable in BRAND-BRIEF.md §5. This proves the mechanism
 * and buys the site a real face today at zero cost.
 *
 * The OFL licence ships alongside the fonts at assets/fonts/OFL.txt.
 */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/BarlowCondensed-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");
}

:root {
  --display:
    "Barlow Condensed",
    "Bahnschrift", "Bahnschrift SemiBold Condensed",
    "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Helvetica Neue",
    "Franklin Gothic Medium Cond", "Arial Narrow", Impact, sans-serif;

  --ink-shadow: 0 1px 2px rgba(23,18,20,.05), 0 4px 14px rgba(23,18,20,.06), 0 18px 44px rgba(23,18,20,.07);
  --ink-shadow-lift: 0 2px 6px rgba(23,18,20,.08), 0 12px 30px rgba(23,18,20,.12), 0 34px 70px rgba(23,18,20,.12);
  --ease: cubic-bezier(.22,.7,.28,1);
}

.display {
  font-weight: 700;
  letter-spacing: -.005em;
  /* font-stretch/font-variation-settings dropped 2026-08-05: they existed to pull
     Bahnschrift's variable wdth axis down to 80. Barlow Condensed is drawn
     condensed, so a wdth axis does not exist and font-stretch: condensed has no
     matching face to select — both were no-ops at best. The fallbacks below
     Barlow keep their own condensed cuts by family name. */
  line-height: .92;
}
h1.display {
  letter-spacing: -.018em;
  /* 800 is the heaviest cut shipped. Barlow Condensed at 700 is noticeably
     lighter than Bahnschrift was at wdth 80, so the headline lost presence in
     the swap — 800 puts it back. */
  font-weight: 800;
}
h2.display { letter-spacing: -.014em; }

/* the wrap's outlined signage type, but cut clean instead of crude */
.outline-type {
  color: var(--cream);
  text-shadow:
    0 1px 0 rgba(74,13,20,.9),
    0 2px 0 rgba(74,13,20,.75),
    0 3px 0 rgba(74,13,20,.55),
    0 14px 34px rgba(0,0,0,.42);
}

/* ---------- paper: a fine grain so flat colour never reads as flat ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.site-head, .hero, .section, .site-foot, .buildbar { position: relative; z-index: 2; }

/* ---------- header ---------- */
.site-head {
  background: linear-gradient(180deg, #1c1618 0%, var(--char) 100%);
  box-shadow: 0 1px 0 rgba(251,246,236,.07);
}
.site-head__inner { padding-block: 1rem; }
.brandmark__unit {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 3px 12px rgba(163,35,47,.4);
  background: linear-gradient(160deg, #bd2c39 0%, var(--red) 55%, #8b1b26 100%);
}
.brandmark__name { letter-spacing: -.008em; }
.nav a { position: relative; border-bottom: 0; transition: color .2s var(--ease); }
.nav a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .24rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.callbtn {
  box-shadow: 0 2px 10px rgba(227,190,85,.28);
  transition: transform .16s var(--ease), box-shadow .22s var(--ease);
}
.callbtn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(227,190,85,.4); }

.trim { height: 6px; opacity: .92; }

/* ---------- hero ---------- */
.hero__media img { transform: scale(1.06); filter: saturate(1.08) contrast(1.04); }
.hero__media::after {
  background:
    radial-gradient(120% 90% at 8% 30%, rgba(74,13,20,.55) 0%, rgba(74,13,20,.9) 55%, rgba(23,18,20,.97) 100%),
    linear-gradient(180deg, rgba(23,18,20,.5) 0%, rgba(23,18,20,0) 35%);
}
.hero__inner { padding-block: clamp(4rem, 12vw, 8.5rem); }
.hero__ayah { text-shadow: 0 2px 20px rgba(227,190,85,.35); }
.hero__ayah-en { letter-spacing: .16em; font-size: .74rem; }
.hero__tag { color: var(--gold); text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero .lede { color: rgba(251,246,236,.9); }

/* hairline rule under the hero, like a printed edge */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,190,85,.6), transparent);
}

/* ---------- buttons ---------- */
.btn {
  border-radius: 2px;
  transition: transform .16s var(--ease), background .22s var(--ease),
              color .22s var(--ease), box-shadow .26s var(--ease), border-color .22s var(--ease);
  will-change: transform;
}
.btn--gold { box-shadow: 0 3px 14px rgba(227,190,85,.3); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(227,190,85,.42); }
.btn--red { box-shadow: 0 3px 14px rgba(163,35,47,.26); }
.btn--red:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(163,35,47,.36); }
.btn--ghost:hover { transform: translateY(-2px); }

/* ---------- board ---------- */
.board {
  border-width: 1px;
  border-color: rgba(227,190,85,.4);
  background: linear-gradient(180deg, #201a1c 0%, var(--char) 100%);
  box-shadow: var(--ink-shadow-lift);
  border-radius: 4px;
}
.board__head { padding: 1.15rem 1.4rem; }
.board__title { letter-spacing: -.01em; }
.board__row {
  padding: 1.1rem 1.4rem;
  transition: background .25s var(--ease);
}
.board__row:hover { background: rgba(251,246,236,.035); }
.board__unit {
  border-radius: 2px; border-color: rgba(227,190,85,.35);
  background: linear-gradient(160deg, #bd2c39 0%, var(--red) 60%, #7e1922 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.board__row.is-shut .board__unit { filter: grayscale(.75) brightness(.72); }

/* ---------- cards ---------- */
.card, .loc {
  border-radius: 4px;
  border-color: rgba(23,18,20,.08);
  box-shadow: var(--ink-shadow);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.card:hover, .loc:hover { transform: translateY(-4px); box-shadow: var(--ink-shadow-lift); }
.card__media img { transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.4rem 1.5rem 1.6rem; }
.loc { padding: 1.6rem 1.65rem; }
.loc--flagship {
  border-width: 1px;
  box-shadow: var(--ink-shadow), inset 4px 0 0 var(--red);
}
.loc__unit { font-size: 6.5rem; color: rgba(163,35,47,.07); top: -1rem; }

/* ---------- section rhythm ---------- */
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--red {
  background:
    radial-gradient(100% 120% at 85% 0%, #b32a37 0%, var(--red) 45%, #8d1c27 100%);
}
.section--ink { background: linear-gradient(180deg, var(--char) 0%, #1d1719 100%); }
.eyebrow { position: relative; padding-left: 2.6rem; }
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 2rem; height: 2px;
  background: currentColor; opacity: .8;
}
html[dir="rtl"] .eyebrow { padding-left: 0; padding-right: 2.6rem; }
html[dir="rtl"] .eyebrow::before { left: auto; right: 0; }

/* ---------- images ---------- */
.strip img, .split img {
  border-radius: 3px;
  box-shadow: var(--ink-shadow-lift);
}
.strip { gap: .6rem; }

/* ---------- menu ---------- */
.menugroup__head { border-bottom-width: 1px; border-color: rgba(23,18,20,.16); padding-bottom: .75rem; }
.menuitem { border-bottom-color: rgba(23,18,20,.09); padding: 1rem 0; }
.menuitem__price { letter-spacing: -.01em; font-weight: 700; }

/* ---------- popularity rank (from the shop's own ordering data) ---------- */
.rank {
  display: inline-block; vertical-align: middle;
  background: var(--red); color: var(--cream);
  font-family: var(--body); font-weight: 800;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 2px;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163,35,47,.28);
}

/* ---------- notice / tbd ---------- */
.notice { border-radius: 4px; box-shadow: var(--ink-shadow); }
.tbd { border-radius: 2px; }

/* ---------- form ---------- */
.field input, .field select, .field textarea {
  border-radius: 3px; border-color: rgba(23,18,20,.14);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(163,35,47,.12);
}

/* ---------- footer ---------- */
.site-foot { background: linear-gradient(180deg, #1d1719 0%, #120e10 100%); }
.site-foot h4 { letter-spacing: -.008em; }

/* ---------- build bar ---------- */
.buildbar { letter-spacing: .06em; font-size: .74rem; }

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__media img { transform: none; }
}

/* ---------- icons (icons.js injects the symbols) ---------- */
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  display: inline-block; vertical-align: -.18em;
  color: var(--gold-deep);
}
.qitem .ico, .section--red .ico, .section--ink .ico, .quality .ico { color: var(--gold); }
.qitem h3, .dishgroup__head h2, .sec-title { display: flex; align-items: center; gap: .55rem; }
html[dir="rtl"] .qitem h3, html[dir="rtl"] .sec-title { flex-direction: row-reverse; }

/* ---------- catering tray planner ---------- */
.planner__controls {
  display: grid; gap: 1.2rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-bottom: 1.8rem;
}
.planner__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin-top: .6rem; padding: 0;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 100%);
  border: 0; border-radius: 3px; cursor: pointer;
}
.planner__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--paper, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer;
}
.planner__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer;
}
.planner__meat { border: 2px solid var(--line); border-radius: 3px; padding: .8rem 1rem; }
.planner__meat legend {
  font-weight: 800; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 0 .4rem;
}
.planner__meat label { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1rem; font-weight: 600; }
.planner__meat input { width: auto; }

.planner__out {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.traycard {
  background: var(--white, #fff); border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; box-shadow: var(--ink-shadow);
}
.traycard__art { margin: 0; background: #f1ece3; }
.traycard__art img { width: 100%; display: block; }
.traycard__body { padding: .85rem 1rem 1rem; display: grid; gap: .1rem; }
.traycard__qty {
  font-family: var(--display); font-weight: 700; font-size: 2rem;
  line-height: 1; color: var(--red); letter-spacing: -.02em;
}
.traycard__label { font-weight: 700; }
.traycard__unit { font-size: .82rem; color: var(--grey); }
.planner__summary {
  margin-top: 1.3rem; display: grid; gap: .2rem;
  font-size: 1.02rem;
}
.planner__summary strong { font-size: 1.2rem; }
.planner__summary span { color: var(--grey); }

/* ---------- proposal: anchor pricing + rate card ---------- */
.was {
  margin: 0 0 .1rem; font-size: 1.15rem; color: var(--grey);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.was-inline {
  display: inline-block; margin-left: .35rem; font-size: .8rem;
  color: var(--grey); text-decoration: line-through;
}
.tier__note {
  margin: .9rem 0 0; padding-top: .8rem; font-size: .85rem; color: var(--grey);
  border-top: 1px solid var(--line);
}
.ratecard {
  margin-top: 2.2rem; padding: 1.6rem 1.8rem;
  background: var(--red); color: #fff; border-radius: 3px;
  box-shadow: var(--ink-shadow-lift);
}
.ratecard h3 { color: #fff; }
.ratecard p { margin: 0; }
.ratecard .muted { color: rgba(255,255,255,.75); }

/* ---------- proposal: wrap section ---------- */
.wrapshot { margin: 0; }
.wrapshot img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 3px; border: 1px solid rgba(217,164,65,.3);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.wrapshot figcaption {
  margin-top: .55rem; font-size: .82rem; color: rgba(247,241,231,.6); line-height: 1.4;
}
.wraplist { margin: .6rem 0 0; padding-left: 1.1rem; }
.wraplist li { margin-bottom: .6rem; color: rgba(247,241,231,.82); font-size: .95rem; }
.wraplist strong { color: var(--gold); }

/* ---------- proposal: tier positioning line ---------- */
.tier__who {
  margin: .1rem 0 .9rem; font-size: .88rem; line-height: 1.45;
  color: var(--grey); font-style: italic;
}
.tier ul { margin-top: .6rem; }
.tier li { margin-bottom: .55rem; line-height: 1.45; }
.tier__note strong:first-child { color: var(--red); }

/* ================= MULTILINGUAL TYPE =================
 * Four languages, three scripts. Latin (en/es), Arabic (ar) and — the one that
 * gets fumbled — Urdu, which is Nastaliq, NOT Naskh. Setting Urdu in an Arabic
 * naskh face is legible but reads wrong to anyone who actually reads it, the way
 * blackletter English would. Windows ships "Urdu Typesetting"; macOS has no real
 * Nastaliq, so it falls back to Noto and then to naskh as a last resort.
 */
:root {
  --font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Sakkal Majalla", "Traditional Arabic", "Segoe UI", "Geeza Pro",
                 "Noto Naskh Arabic", "Al Bayan", Tahoma, serif;
  --font-urdu: "Urdu Typesetting", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq",
               "Alvi Nastaleeq", "Nafees Nastaleeq", "Sakkal Majalla",
               "Segoe UI", "Geeza Pro", Tahoma, serif;
  --font-display-arabic: "Sakkal Majalla", "Traditional Arabic", "Segoe UI", "Geeza Pro", serif;
}

/* --- Arabic --- */
html[data-lang="ar"] body,
html[data-lang="ar"] .display,
html[data-lang="ar"] .lede { font-family: var(--font-arabic); }
html[data-lang="ar"] .display { font-stretch: normal; font-variation-settings: normal; letter-spacing: 0; line-height: 1.35; }
html[data-lang="ar"] body { line-height: 1.85; }
html[data-lang="ar"] .eyebrow,
html[data-lang="ar"] .sectionno { letter-spacing: .04em; }

/* --- Urdu: Nastaliq needs far more leading and a size bump; its descenders
       sweep down and to the left, so tight leading collides lines. --- */
html[data-lang="ur"] body,
html[data-lang="ur"] .display,
html[data-lang="ur"] .lede { font-family: var(--font-urdu); }
html[data-lang="ur"] body { line-height: 2.25; font-size: 1.06em; }
html[data-lang="ur"] .display {
  font-stretch: normal; font-variation-settings: normal;
  letter-spacing: 0; line-height: 1.75; font-weight: 500;
}
html[data-lang="ur"] h1.display { font-size: clamp(2.2rem, 6.5vw, 4rem); }
html[data-lang="ur"] h2.display { font-size: clamp(1.7rem, 4vw, 2.8rem); }
html[data-lang="ur"] .lede { line-height: 2.1; }
html[data-lang="ur"] .eyebrow,
html[data-lang="ur"] .sectionno,
html[data-lang="ur"] .concept__tag { letter-spacing: 0; text-transform: none; }
html[data-lang="ur"] .dish__price,
html[data-lang="ur"] .tier__price,
html[data-lang="ur"] .traycard__qty { font-family: var(--display); }

/* both RTL scripts: don't uppercase or track — neither has a capital form */
html[dir="rtl"] .display,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn { text-transform: none; }

/* --- Spanish: same Latin stack, but it runs ~20% longer than English --- */
html[data-lang="es"] .display { letter-spacing: -.02em; }
html[data-lang="es"] .btn { font-size: .86rem; }

/* ---------- language switcher ---------- */
.langswitch {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(251,246,236,.28); border-radius: 3px; overflow: hidden;
}
.langswitch button {
  background: transparent; border: 0; cursor: pointer;
  padding: .42rem .6rem; min-width: 2.4rem;
  color: rgba(251,246,236,.7);
  font-family: var(--body); font-weight: 800; font-size: .78rem;
  letter-spacing: .04em; line-height: 1.4;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.langswitch button + button { border-inline-start: 1px solid rgba(251,246,236,.18); }
.langswitch button:hover { background: rgba(251,246,236,.08); color: var(--cream, #f7f1e7); }
.langswitch button.is-on { background: var(--gold); color: var(--char, #16100f); }
.langswitch button[lang="ar"], .langswitch button[lang="ur"] { font-family: var(--font-arabic); font-size: .92rem; }
.langswitch button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- fix: menu list rendered on the red section ----------
 * renderTrays reuses .menuitem, which is styled for dark-on-paper. On
 * .section--red the muted greys drop to ~2:1 and the Arabic line vanishes.
 */
.section--red .menuitem { border-bottom-color: rgba(251,246,236,.22); }
.section--red .menuitem__name { color: var(--cream, #fbf6ec); }
.section--red .menuitem__ar { color: rgba(251,246,236,.72); }
.section--red .menuitem__price { color: var(--gold); }
.section--red .menuitem__price--tbd { color: rgba(251,246,236,.8); }
.section--red .menugroup__head { border-bottom-color: rgba(251,246,236,.35); }
.section--red .menugroup__head h2 { color: var(--cream, #fbf6ec); }

/* the tray illustrations are 4:3 artwork — never crop them */
.strip img[src$=".svg"] { aspect-ratio: 4 / 3; object-fit: contain; background: #f1ece3; }

/* ---------- meal calculator ---------- */
.mealcalc__head {
  display: grid; gap: 1rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-bottom: 1.6rem;
}
.mealcalc__rows { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.mealrow {
  display: grid; grid-template-columns: 3.4rem 1fr auto auto; gap: .8rem;
  align-items: center; padding: .7rem .85rem;
  background: var(--white, #fff); border: 1px solid var(--line); border-radius: 3px;
}
.mealrow__art { width: 3.4rem; height: 3.4rem; border-radius: 2px; overflow: hidden; background: #f1ece3; }
.mealrow__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mealrow__name { font-weight: 700; line-height: 1.25; }
.mealrow__each { font-size: .8rem; color: var(--grey); }
.mealrow__qty {
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  color: var(--char); min-width: 2.2rem; text-align: center;
}
.mealrow__sum { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--red); min-width: 4.4rem; text-align: end; }
.mealcalc__total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.2rem; border-radius: 3px;
  background: var(--char, #16100f); color: var(--cream, #f7f1e7);
}
.mealcalc__total .lbl { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,241,231,.65); }
.mealcalc__total .amt { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--gold); letter-spacing: -.02em; line-height: 1; }
.mealcalc__go {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; width: 100%; justify-content: center;
}
.mealcalc__go .arrow { font-size: 1.2em; line-height: 1; transition: transform .2s var(--ease); }
.mealcalc__go:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .mealcalc__go .arrow { transform: scaleX(-1); }
html[dir="rtl"] .mealcalc__go:hover .arrow { transform: scaleX(-1) translateX(4px); }
.mealcalc__note { font-size: .84rem; color: var(--grey); margin-top: .8rem; }

/* ---------- three pillars: plates / wraps / catering ---------- */
.pillars {
  display: grid; gap: .8rem; margin-bottom: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.pillar {
  display: grid; gap: .1rem; text-decoration: none; color: inherit;
  background: var(--white, #fff); border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; padding-bottom: 1rem;
  box-shadow: var(--ink-shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--ink-shadow-lift); }
.pillar img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: .85rem; }
.pillar img[src$=".svg"] { object-fit: contain; background: #f1ece3; }
.pillar__k {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.015em; padding: 0 1rem; color: var(--red);
}
.pillar__d { font-size: .88rem; color: var(--grey); padding: 0 1rem; line-height: 1.4; }