/* Jalapeño Mexican Grill Express — "The Garden Cantina".
   Colours taken from the restaurant itself: the jungle-green walls, the neon jalapeño badge, the warm wood
   and the gold LED light along the stepped wall, the white marble tables, and the red sign outside.
   Buttons are round pills (owner's request); every other edge is square, with the stepped LED line as the
   house motif. */

@font-face { font-family: "Syne"; src: url("../fonts/syne-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --jungle: #0a1d13;        /* page dark */
  --jungle-2: #0f2a1c;      /* raised dark */
  --moss: #1a3d29;          /* lines and fills on dark */
  --neon: #9be15d;          /* the badge's neon green: accents on dark */
  --lime: #d6f04d;          /* the menu board's yellow-green */
  --gold: #f4c56b;          /* LED glow */
  --wood: #8f5c32;
  --cream: #f7f2e8;         /* marble */
  --cream-2: #efe7d7;
  --ink: #132219;           /* text on cream */
  --ink-soft: #3d4a40;
  --chile: #c62f1d;         /* the round red sign: main buttons */
  --chile-hover: #a8261a;
  --on-dark: #f7f2e8;
  --on-dark-soft: rgba(247, 242, 232, .78);
  --line-dark: rgba(155, 225, 93, .22);
  --line-light: rgba(19, 34, 25, .14);
  --display: "Syne", "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ui: "Syne", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--jungle); color: var(--on-dark); font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--chile); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--cream); color: var(--ink); padding: 10px 18px; border-radius: 999px; font: 600 15px var(--ui); text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---- type helpers ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.light .eyebrow { color: #2f6b1f; }
.light .eyebrow::before { box-shadow: none; }
.display { font-size: clamp(44px, 7.4vw, 112px); }
.h2 { font-size: clamp(36px, 5vw, 72px); }
.h3 { font-size: clamp(24px, 2.4vw, 32px); }
em.script, .script { font-style: italic; font-weight: 600; color: var(--gold); }
.light em.script, .light .script { color: #9a4f17; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--on-dark-soft); max-width: 46ch; }
.light .lead { color: var(--ink-soft); }

/* ---- buttons: round pills ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 15.5px/1 var(--ui); letter-spacing: .01em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-order { background: var(--chile); color: #fff; box-shadow: 0 10px 30px -10px rgba(198, 47, 29, .7); }
.btn-order:hover { background: var(--chile-hover); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(247, 242, 232, .55); color: var(--on-dark); background: rgba(10, 29, 19, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--neon); color: var(--neon); }
.light .btn-ghost { border-color: rgba(19, 34, 25, .4); color: var(--ink); background: transparent; backdrop-filter: none; }
.light .btn-ghost:hover { border-color: var(--chile); color: var(--chile); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--ui); color: var(--neon); text-decoration: none; border-bottom: 1.5px solid transparent; padding-bottom: 2px; }
.link-arrow:hover { border-bottom-color: currentColor; }
.light .link-arrow { color: var(--chile); }

/* ---- the stepped LED line (the dining room's lit wooden wall) ---- */
.steps-line { width: 100%; height: 40px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(244, 197, 107, .65)); }
.steps-line path { fill: none; stroke: currentColor; stroke-width: 2; }

/* ---- header ---- */
.site-head { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 84px; max-width: none; }
.site-head.is-solid { background: rgba(10, 29, 19, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-dark); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; filter: drop-shadow(0 0 14px rgba(155, 225, 93, .55)); }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font: 600 22px var(--display); letter-spacing: -.01em; }
.brand-name small { font: 700 10.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--neon); margin-top: 5px; }
.nav { display: flex; gap: 6px; }
.nav a { font: 600 15px var(--ui); text-decoration: none; padding: 10px 14px; border-radius: 999px; color: var(--on-dark-soft); transition: color .2s, background-color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-dark); background: rgba(155, 225, 93, .12); }
.head-cta { display: flex; gap: 10px; }
.menu-btn { display: none; }
@media (max-width: 980px) {
  .nav, .head-cta .btn-call-text { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  .site-head .wrap { height: 72px; gap: 10px; }
  .brand img { width: 44px; height: 44px; }
  .brand-name b { font-size: 19px; }
  .head-cta .btn-order { display: none; }
}

/* phone menu */
.sheet { position: fixed; inset: 0; z-index: 150; background: rgba(10, 29, 19, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; padding: 22px var(--pad) 34px; }
.sheet[hidden] { display: none; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.sheet nav { display: flex; flex-direction: column; gap: 6px; }
.sheet nav a { font: 600 38px/1.15 var(--display); text-decoration: none; padding: 6px 0; }
.sheet nav a:hover { color: var(--neon); }
.sheet .sheet-cta { margin-top: auto; display: grid; gap: 12px; }

/* ---- hero ---- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--jungle); }
.hero-media { position: absolute; inset: 0; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 40%; transform-origin: 50% 40%; }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(10, 29, 19, .92) 0%, rgba(10, 29, 19, .72) 34%, rgba(10, 29, 19, .12) 68%),
  linear-gradient(0deg, rgba(10, 29, 19, .95) 0%, rgba(10, 29, 19, 0) 34%),
  linear-gradient(180deg, rgba(10, 29, 19, .55) 0%, rgba(10, 29, 19, 0) 22%); }
.hero-inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(40px, 9vh, 96px); }
.hero-badge { width: clamp(92px, 9vw, 132px); height: auto; margin-bottom: 26px; animation: neon-on 2.4s steps(1, end) both .2s; filter: drop-shadow(0 0 22px rgba(155, 225, 93, .75)) drop-shadow(0 0 2px rgba(155, 225, 93, .9)); }
@keyframes neon-on { 0% { opacity: 0; } 8% { opacity: .9; } 11% { opacity: .15; } 16% { opacity: 1; } 21% { opacity: .35; } 26%, 100% { opacity: 1; } }
.hero h1 { max-width: 11.5ch; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.hero h1 .line { display: block; }
.hero .lead { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font: 600 14.5px var(--ui); color: var(--on-dark-soft); }
.hero-facts a, .hero-facts span { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hero-facts a:hover { color: var(--on-dark); }
.stars { color: var(--gold); letter-spacing: 1px; }
.open-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 4px rgba(155, 225, 93, .2), 0 0 12px var(--neon); }
.open-dot.is-closed { background: #e2a24b; box-shadow: 0 0 0 4px rgba(226, 162, 75, .2); }
.hero-foot { position: absolute; z-index: 4; right: var(--pad); bottom: clamp(40px, 9vh, 96px); display: flex; align-items: center; gap: 14px; font: 700 12px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }
.scroll-cue { display: flex; align-items: center; gap: 12px; }
.scroll-cue i { display: block; width: 1.5px; height: 46px; background: linear-gradient(var(--neon), transparent); }
.pp { border-radius: 999px; color: var(--on-dark-soft); border-color: rgba(247, 242, 232, .4); background: rgba(10, 29, 19, .35); }
.pp:hover { color: var(--neon); border-color: var(--neon); }

/* falling wisteria petals */
.petals { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.petals i { position: absolute; top: -40px; width: var(--s, 12px); height: calc(var(--s, 12px) * 1.4); border-radius: 60% 0 60% 0; background: var(--c, #d8c3f2); opacity: 0; animation: fall var(--d, 14s) linear var(--delay, 0s) infinite; }
@keyframes fall {
  0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .85; }
  50% { transform: translate3d(var(--x, 40px), 50vh, 0) rotate(200deg); }
  90% { opacity: .7; }
  100% { transform: translate3d(calc(var(--x, 40px) * -0.6), 105vh, 0) rotate(420deg); opacity: 0; }
}
@media (max-width: 760px) {
  .hero-shade { background: linear-gradient(0deg, rgba(10, 29, 19, .97) 8%, rgba(10, 29, 19, .55) 55%, rgba(10, 29, 19, .35) 100%); }
  .hero-media img { object-position: 40% 40%; }
  .hero-foot { display: none; }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* ---- section shells ---- */
section { position: relative; }
.sec { padding: clamp(84px, 12vw, 168px) 0; }
.light { background: var(--cream); color: var(--ink); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head .lead { margin-top: 4px; }

/* ---- the room ---- */
.room { overflow: hidden; }
.room-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.room-text .lead { margin-top: 22px; }
.room-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-light); }
.room-list li { padding: 16px 0; border-bottom: 1px solid var(--line-light); font: 600 16px var(--ui); display: flex; align-items: center; gap: 12px; }
.room-list li:nth-child(odd) { padding-right: 16px; }
.room-list svg { width: 22px; height: 22px; color: #2f6b1f; flex: none; }
.room-photos { position: relative; height: clamp(440px, 52vw, 720px); }
.room-photos figure { position: absolute; margin: 0; overflow: hidden; }
.room-photos figure img { width: 100%; height: 100%; object-fit: cover; }
.room-photos .p1 { inset: 0 18% 14% 0; }
.room-photos .p2 { width: 46%; height: 48%; right: 0; bottom: 0; box-shadow: -18px -18px 0 var(--cream); }
.room-photos .steps-line { position: absolute; left: -2%; bottom: 4%; width: 60%; color: #c88a2c; filter: none; }
.room-photos figcaption { position: absolute; left: 16px; bottom: 14px; font: 700 11.5px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
@media (max-width: 900px) {
  .room-grid { grid-template-columns: 1fr; }
  .room-photos { height: 120vw; max-height: 620px; }
}

/* ---- signature dishes: a sideways reel ---- */
.dishes { background: var(--jungle); overflow: hidden; }
.dishes .sec-head { grid-template-columns: 1fr auto; align-items: end; }
.reel-wrap { position: relative; }
.reel { display: flex; gap: clamp(18px, 2vw, 28px); padding: 0 var(--pad); width: max-content; }
.dish { position: relative; width: clamp(280px, 30vw, 430px); flex: none; background: var(--jungle-2); border: 1px solid var(--line-dark); display: flex; flex-direction: column; }
.dish-photo { aspect-ratio: 4 / 3.3; overflow: hidden; }
.dish-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dish:hover .dish-photo img { transform: scale(1.05); }
/* uploaded photos come with rounded transparent corners: zoom past them */
.dish-photo--cut { background: var(--jungle-2); }
.dish-photo--cut img { transform: scale(1.1); }
.dish:hover .dish-photo--cut img { transform: scale(1.15); }
.dish-photo.type { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(155, 225, 93, .18), transparent 62%), var(--jungle-2); border-bottom: 1px solid var(--line-dark); }
.dish-photo.type span { font: italic 600 clamp(40px, 4vw, 58px)/1 var(--display); color: var(--lime); text-shadow: 0 0 24px rgba(214, 240, 77, .45); text-align: center; padding: 0 20px; }
.dish-body { padding: 22px 24px 26px; display: grid; gap: 8px; }
.dish-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.dish h3 { font-size: clamp(24px, 2vw, 30px); }
.price { font: 700 19px var(--ui); color: var(--lime); white-space: nowrap; }
.dish p { color: var(--on-dark-soft); font-size: 15.5px; }
.reel-bar { margin: 34px var(--pad) 0; height: 2px; background: var(--moss); position: relative; }
.reel-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
@media (max-width: 900px) {
  .dishes .sec-head { grid-template-columns: 1fr; }
  .reel-wrap { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .reel-wrap::-webkit-scrollbar { display: none; }
  .dish { scroll-snap-align: center; width: 78vw; }
  .reel-bar { display: none; }
}

/* ---- burger time ---- */
.burgers { background: radial-gradient(1200px 600px at 80% 0%, rgba(155, 225, 93, .14), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(214, 240, 77, .07), transparent 60%), #071710; overflow: hidden; }
.burger-title { font: italic 600 clamp(54px, 9vw, 140px)/.95 var(--display); color: var(--lime); text-shadow: 0 0 18px rgba(214, 240, 77, .55), 0 0 60px rgba(155, 225, 93, .35); letter-spacing: -.02em; }
.burger-title .flicker { animation: flicker 7s linear infinite; }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .45; } 94% { opacity: 1; } 96% { opacity: .6; } 97% { opacity: 1; } }
.burger-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line-dark); }
.burger { padding: 30px 0 32px; border-bottom: 1px solid var(--line-dark); display: grid; gap: 10px; }
.burger .dish-top h3 { font-size: clamp(26px, 2.6vw, 38px); }
.burger p { color: var(--on-dark-soft); max-width: 48ch; }
.burger .price { font-size: 22px; padding: 6px 14px; border: 1.5px solid var(--lime); border-radius: 999px; box-shadow: 0 0 14px rgba(214, 240, 77, .25), inset 0 0 10px rgba(214, 240, 77, .12); }
@media (max-width: 760px) { .burger-list { grid-template-columns: 1fr; } }

/* ---- guests say ---- */
.guests .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.score { font: 600 clamp(110px, 14vw, 200px)/.85 var(--display); color: var(--ink); letter-spacing: -.04em; }
.score-meta { margin-top: 18px; font: 600 16px var(--ui); color: var(--ink-soft); }
.score-meta .stars { color: #b07a1a; font-size: 22px; display: block; margin-bottom: 6px; }
.quotes { display: grid; gap: 0; }
.quote { margin: 0; padding: 30px 0; border-top: 1px solid var(--line-light); }
.quote:last-child { border-bottom: 1px solid var(--line-light); }
.quote p { font: 400 clamp(21px, 2vw, 28px)/1.4 var(--display); color: var(--ink); }
.quote footer { margin-top: 14px; font: 700 13px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 900px) { .guests .wrap { grid-template-columns: 1fr; } }

/* ---- patio band ---- */
.patio { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.patio-media { position: absolute; inset: -12% 0 0; }
.patio-media img { width: 100%; height: 100%; object-fit: cover; }
.patio::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 29, 19, .92) 0%, rgba(10, 29, 19, .2) 55%, rgba(10, 29, 19, .05) 100%); }
.patio .wrap { position: relative; z-index: 2; padding-bottom: clamp(56px, 9vw, 120px); }
.patio .h2 { max-width: 14ch; }
.patio .lead { margin-top: 18px; }

/* ---- visit ---- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); }
.hours { width: 100%; border-collapse: collapse; margin-top: 8px; font: 500 16px var(--ui); }
.hours th, .hours td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line-light); font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--ink); }
.hours tr.is-today th::after { content: "Today"; margin-left: 10px; font: 700 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #2f6b1f; padding: 4px 9px; border-radius: 999px; vertical-align: 2px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 700 15px var(--ui); margin-bottom: 18px; }
.light .open-dot { box-shadow: 0 0 0 4px rgba(47, 107, 31, .18); background: #3c8a26; }
.light .open-dot.is-closed { background: #c47a1c; box-shadow: 0 0 0 4px rgba(196, 122, 28, .2); }
.visit-card { display: grid; gap: 26px; align-content: start; }
.visit-card address { font: 400 clamp(26px, 2.6vw, 36px)/1.25 var(--display); font-style: normal; }
.visit-card .phone { font: 600 clamp(26px, 2.6vw, 36px) var(--display); text-decoration: none; }
.visit-card .phone:hover { color: var(--chile); }
.visit-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.serve { display: flex; flex-wrap: wrap; gap: 10px; }
.serve span { font: 600 14px var(--ui); padding: 9px 16px; border-radius: 999px; background: var(--cream-2); color: var(--ink); }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.site-foot { background: #061209; padding: 72px 0 40px; color: var(--on-dark-soft); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.foot-grid h2 { font: 700 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--on-dark); text-decoration: underline; }
.foot-brand { display: flex; gap: 16px; align-items: center; }
.foot-brand img { width: 72px; height: 72px; }
.foot-brand p { max-width: 34ch; }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 13.5px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---- sticky phone bar (small screens) ---- */
.mobile-bar { display: none; }
@media (max-width: 560px) {
  .mobile-bar { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px; border-radius: 999px; background: rgba(10, 29, 19, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); border: 1px solid var(--line-dark); transform: translateY(140%); transition: transform .4s var(--ease); }
  .mobile-bar.is-on { transform: none; }
  .mobile-bar .btn { min-height: 48px; padding: 0 12px; font-size: 14.5px; }
  .site-foot { padding-bottom: 110px; }
}

/* ---- inner pages ---- */
.page-hero { position: relative; padding: 180px 0 90px; overflow: hidden; }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--jungle) 0%, rgba(10, 29, 19, .4) 100%); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .lead { margin-top: 20px; }

/* menu page */
.menu-nav { position: sticky; top: 84px; z-index: 40; background: rgba(247, 242, 232, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-light); }
.menu-nav .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.menu-nav .wrap::-webkit-scrollbar { display: none; }
.menu-nav a { flex: none; font: 600 15px var(--ui); text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line-light); color: var(--ink); }
.menu-nav a:hover, .menu-nav a.is-here { border-color: var(--ink); background: var(--ink); color: var(--cream); }
@media (max-width: 560px) { .menu-nav { top: 72px; } }
.menu-sec { padding: clamp(56px, 7vw, 96px) 0 0; }
.menu-sec:last-of-type { padding-bottom: clamp(72px, 9vw, 128px); }
.menu-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 8px; }
.menu-sec-head p { color: var(--ink-soft); font-size: 15px; }
.menu-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); }
.item { padding: 22px 0; border-bottom: 1px solid var(--line-light); display: grid; gap: 6px; }
.item .dish-top h3 { font-size: clamp(21px, 1.8vw, 25px); }
.item .price { color: #9a3412; font-size: 18px; }
.item p { color: var(--ink-soft); font-size: 15.5px; }
.menu-note { margin-top: 32px; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 760px) { .menu-items { grid-template-columns: 1fr; } }

/* generic text page */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 48px 0 14px; }
.prose p, .prose li { color: var(--ink-soft); margin: 0 0 14px; }
.prose a { color: var(--chile); }

/* ---- motion preferences ---- */
.js .reveal { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .petals { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* hero: headline lines rise out of their own mask; the line that replaces the hero on scroll (desktop) */
.hero h1 .line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .line-in { display: inline-block; }
.hero-next { position: absolute; z-index: 3; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(40vw, 560px); opacity: 0; pointer-events: none; }
.hero-next-text { margin-top: 20px; font: 600 clamp(36px, 4vw, 64px)/1.08 var(--display); letter-spacing: -.015em; }
.hero-next .steps-line { margin-top: 26px; width: 80%; }
@media (max-width: 899px) { .hero-next { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-next { display: none; } }

/* pictures fill the frame they sit in */
.room-photos figure picture, .dish-photo picture, .patio-media picture, .page-hero .bg picture { width: 100%; height: 100%; }
.link-arrow svg { width: 18px; height: 18px; flex: none; }
.link-arrow { white-space: nowrap; }

/* patio: the photo is bright, so the words get a deeper shade behind them */
.patio::before { background:
  linear-gradient(0deg, rgba(10, 29, 19, .96) 0%, rgba(10, 29, 19, .78) 32%, rgba(10, 29, 19, .2) 68%, rgba(10, 29, 19, .05) 100%),
  linear-gradient(90deg, rgba(10, 29, 19, .55) 0%, rgba(10, 29, 19, 0) 60%); }

.burger-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.burger-badge { width: clamp(120px, 15vw, 220px); height: auto; flex: none; filter: drop-shadow(0 0 26px rgba(155, 225, 93, .6)) drop-shadow(0 0 3px rgba(155, 225, 93, .9)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-3deg); } }
.burger .dish-top { align-items: center; }
@media (max-width: 760px) { .burger-badge { display: none; } }
.burger, .item { align-content: start; }
@media (max-width: 560px) { .brand-name small { font-size: 8.5px; letter-spacing: .12em; white-space: nowrap; } }

/* ===== interactive layer ===== */

/* hero: info strip along the bottom edge, like a shop awning */
.hero-inner { padding-bottom: clamp(110px, 16vh, 150px); }
.hero-strip { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(247, 242, 232, .18); background: linear-gradient(0deg, rgba(10, 29, 19, .7), rgba(10, 29, 19, .25)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-strip .wrap { max-width: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; min-height: 64px; gap: 10px 24px; }
.hero-strip a, .hero-strip > .wrap > span { display: inline-flex; align-items: center; gap: 9px; font: 700 12.5px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); text-decoration: none; white-space: nowrap; }
.hero-strip a:hover { color: var(--on-dark); }
.hero-strip svg { width: 15px; height: 15px; color: var(--neon); }
@media (max-width: 1100px) { .hero-strip .wrap { grid-template-columns: repeat(2, auto); padding-top: 12px; padding-bottom: 12px; } .hero-inner { padding-bottom: 150px; } }
@media (max-width: 760px) { .hero-strip { display: none; } .hero-inner { padding-bottom: 48px; } }

/* hero: the round "Order now · Call" badge that turns slowly */
.spin-badge { position: absolute; z-index: 4; right: var(--pad); bottom: clamp(110px, 17vh, 160px); width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); text-decoration: none; background: rgba(198, 47, 29, .92); box-shadow: 0 16px 50px -14px rgba(198, 47, 29, .8); transition: transform .3s var(--ease); }
.spin-badge:hover { transform: scale(1.06); }
.spin-badge { animation: pop-in 1s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
@keyframes pop-in { from { opacity: 0; scale: .2; rotate: -90deg; } }
.spin-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.spin-badge text { font: 700 14px var(--ui); fill: #fff; }
.spin-badge > span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--chile); }
.spin-badge > span svg { position: static; width: 22px; height: 22px; animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .spin-badge { display: none; } }

/* ribbon: what's cooking, scrolling sideways */
.ribbon { position: relative; background: var(--lime); color: var(--jungle); overflow: hidden; border-top: 1px solid rgba(10, 29, 19, .2); border-bottom: 1px solid rgba(10, 29, 19, .2); }
.ribbon-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ribbon-set { display: flex; list-style: none; margin: 0; padding: 0; }
.ribbon-set li { display: flex; align-items: center; gap: 30px; padding: 22px 0 22px 30px; font: italic 600 clamp(26px, 3vw, 42px)/1 var(--display); white-space: nowrap; }
.ribbon-set li:nth-child(even) span { font-style: normal; font-family: var(--ui); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .78em; }
.ribbon-set svg { width: 30px; height: 30px; color: #2f6b1f; }
.ribbon .pp { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--jungle); border-color: rgba(10, 29, 19, .5); background: var(--lime); }
.ribbon .pp:hover { color: var(--chile); border-color: var(--chile); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* the sentence that lights up word by word */
.story { background: var(--jungle-2); padding: clamp(96px, 14vw, 190px) 0; }
.story-text { font: 400 clamp(32px, 4.4vw, 68px)/1.22 var(--display); letter-spacing: -.015em; max-width: 20ch; margin: 0 auto; text-align: center; color: var(--on-dark); }
.story-text .w { display: inline; }
.js .story-text .w { opacity: .42; }  /* still 3.6:1 before it lights up (large text needs 3:1) */
.pill-pic { display: inline-block; width: 1.9em; height: .95em; border-radius: 999px; overflow: hidden; vertical-align: -.08em; margin: 0 .08em; box-shadow: 0 0 0 2px rgba(155, 225, 93, .45); }
.pill-pic picture, .pill-pic img { width: 100%; height: 100%; object-fit: cover; }

/* explore the menu: big rows, a photo follows the pointer */
.explore { overflow: hidden; }
.explore-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.explore-list a { position: relative; display: grid; grid-template-columns: 60px 1fr auto 64px; align-items: center; gap: 20px; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line-light); text-decoration: none; color: var(--ink); }
.explore-list .n { font: 700 13px var(--ui); letter-spacing: .1em; color: #2f6b1f; }
.explore-list .t { font: 600 clamp(34px, 6vw, 92px)/1 var(--display); letter-spacing: -.025em; transition: transform .45s var(--ease), color .3s; }
.explore-list .from { font: 700 13px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.explore-list .go { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--line-light); display: grid; place-items: center; transition: background-color .3s, border-color .3s, color .3s, transform .45s var(--ease); }
.explore-list .go svg { width: 22px; height: 22px; transform: rotate(-45deg); transition: transform .45s var(--ease); }
.explore-list a:hover .t, .explore-list a:focus-visible .t { transform: translateX(18px); color: #9a3412; }
.explore-list a:hover .go, .explore-list a:focus-visible .go { background: var(--chile); border-color: var(--chile); color: #fff; }
.explore-list a:hover .go svg { transform: rotate(0deg); }
.explore-float { position: fixed; left: 0; top: 0; z-index: 60; width: 270px; height: 270px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(10, 29, 19, .6); }
.explore-float img { width: 100%; height: 100%; object-fit: cover; }
.explore-float.is-badge { background: var(--jungle); }
.explore-float.is-badge img { object-fit: contain; padding: 22px; }
@media (max-width: 760px) {
  .explore-list a { grid-template-columns: 34px 1fr 44px; }
  .explore-list .from { display: none; }
  .explore-list .go { width: 44px; height: 44px; }
  .explore-float { display: none; }
}
@media (hover: none) { .explore-float { display: none; } }

/* burgers: a giant outlined word drifts behind */
.burgers { position: relative; }
.outline-word { position: absolute; top: 50%; left: 0; transform: translateY(-50%); white-space: nowrap; font: italic 600 clamp(160px, 26vw, 420px)/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(214, 240, 77, .13); pointer-events: none; user-select: none; }
.burgers .wrap { position: relative; z-index: 1; }


@media (prefers-reduced-motion: reduce) {
  .js .story-text .w { opacity: 1; }
  .spin-badge svg, .ribbon-track { animation: none; }
}
/* the masks that headlines rise out of leave room for letter tails (g, y, p) */
[data-lines] [class*="mask"] { padding-bottom: .16em; margin-bottom: -.16em; }

/* ======================= v3: new type, canopy, order builder, neon board, footer ======================= */

/* type: Syne for headings (wide, modern), Instrument Serif italic for the accent words */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.display { font-size: clamp(46px, 7.2vw, 116px); }
em.script, .script { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.08em; }
.hero h1 { max-width: 12ch; }
.hero-next-text { font-weight: 700; letter-spacing: -.03em; }
.eyebrow { font-weight: 700; letter-spacing: .2em; }
.btn { font-weight: 700; letter-spacing: .02em; }
.brand-name b { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; }
.nav a { font-weight: 600; }
.burger-title { font-family: var(--serif); font-weight: 400; }
.dish-photo.type span { font-family: var(--serif); font-weight: 400; }
.dish h3 { font-weight: 700; letter-spacing: -.02em; }
.quote p { font-family: var(--serif); font-size: clamp(24px, 2.3vw, 33px); line-height: 1.3; }
.score { font-weight: 800; letter-spacing: -.06em; }
.sheet nav a { font-weight: 800; letter-spacing: -.03em; }
.item .dish-top h3 { font-weight: 700; letter-spacing: -.02em; }

/* ---- the wisteria canopy: strands swing when the pointer passes ---- */
.canopy { position: relative; min-height: 96vh; background: radial-gradient(1200px 700px at 50% 0%, #163a26 0%, var(--jungle) 70%); overflow: hidden; display: flex; align-items: flex-end; }
.strands { position: absolute; inset: 0 0 auto; height: 470px; pointer-events: none; }
.strand { position: absolute; top: -8px; width: 40px; margin-left: -20px; transform-origin: 50% 0; will-change: transform; }
.strand .sway { transform-origin: 50% 0; animation: sway var(--d, 7s) ease-in-out var(--delay, 0s) infinite alternate; }
.strand svg { display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.canopy::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(0deg, var(--jungle) 30%, transparent); pointer-events: none; }
.canopy-inner { position: relative; z-index: 2; padding-bottom: clamp(70px, 10vw, 130px); padding-top: 420px; text-align: center; display: grid; justify-items: center; }
.canopy-inner .h2 { max-width: 16ch; }
.canopy-inner .lead { margin-top: 22px; max-width: 54ch; }
.canopy-hint { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; font: 700 12px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--neon); }
.canopy-hint i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.canopy-hint i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: currentColor; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.canopy .pp { position: absolute; z-index: 3; right: var(--pad); bottom: 28px; }
.petal-fall { position: fixed; z-index: 70; width: 10px; height: 14px; border-radius: 60% 0 60% 0; pointer-events: none; }
@media (hover: none) { .canopy-hint { display: none; } }
@media (max-width: 1024px) { .canopy { min-height: 0; } .canopy-inner { padding-top: 400px; } }
@media (max-width: 760px) { .strands { height: 340px; } .canopy-inner { padding-top: 360px; } .strand:nth-child(even) { display: none; } }

/* ---- build your order ---- */
.builder-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pick { border: 0; margin: 34px 0 0; padding: 0; }
.pick[hidden] { display: none; }
.pick legend { display: flex; align-items: center; gap: 12px; font: 700 13px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; padding: 0; }
.pick legend b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream); letter-spacing: 0; font-size: 13px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 86px; padding: 14px 16px; border: 1.5px solid var(--line-light); background: #fffdf8; transition: border-color .2s, background-color .2s, transform .25s var(--ease), box-shadow .25s; }
.opt b { font: 700 16px/1.2 var(--ui); letter-spacing: -.01em; }
.opt i { font: 400 22px var(--serif); font-style: italic; color: #9a3412; }
.opt:hover span { border-color: var(--ink); transform: translateY(-2px); }
.opt input:checked + span { border-color: var(--chile); background: #fff; box-shadow: 0 0 0 3px rgba(198, 47, 29, .14), 0 14px 30px -18px rgba(198, 47, 29, .6); }
.opt input:focus-visible + span { outline: 2px solid var(--chile); outline-offset: 3px; }
.opt input:disabled + span { opacity: .38; cursor: not-allowed; transform: none; border-color: var(--line-light); }
.pick-4 .opt span { min-height: 64px; justify-content: center; }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; font: 600 22px/1 var(--ui); cursor: pointer; color: var(--ink); }
.stepper button:hover { background: var(--ink); color: var(--cream); }
.stepper output { min-width: 2ch; text-align: center; font: 800 28px var(--display); }
.stepper span { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 980px) { .builder-grid { grid-template-columns: 1fr; } .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pick-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ticket { position: sticky; top: 110px; display: grid; gap: 18px; }
.ticket-paper { position: relative; background: #fffdf6; color: #1d1d1b; padding: 28px 26px 40px; font: 400 15px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; box-shadow: 0 30px 60px -30px rgba(19, 34, 25, .45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; transform: rotate(1deg); }
.ticket-head { display: flex; justify-content: space-between; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; padding-bottom: 12px; border-bottom: 2px dashed #b9b2a2; }
.ticket-shop { margin-top: 12px; font-size: 12.5px; color: #5d584d; }
.ticket-lines { list-style: none; margin: 18px 0; padding: 14px 0; border-top: 1px dashed #b9b2a2; border-bottom: 1px dashed #b9b2a2; display: grid; gap: 8px; min-height: 110px; }
.ticket-lines li { display: flex; justify-content: space-between; gap: 16px; }
.ticket-lines li small { display: block; color: #6b665b; }
.ticket-empty { color: #5f594c; }
.ticket-total { display: flex; justify-content: space-between; font-size: 22px; font-weight: 700; }
.ticket-note { margin-top: 10px; font-size: 12.5px; color: #6b665b; }
.ticket-stamp { position: absolute; right: 16px; top: 62px; padding: 8px 14px; border: 2.5px solid var(--chile); color: var(--chile); font: 700 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-12deg) scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.ticket.is-ready .ticket-stamp { transform: rotate(-12deg) scale(1); opacity: .9; }
.ticket-call { width: 100%; }
@media (max-width: 980px) { .ticket { position: static; } }

/* ---- neon burger board: each burger is a sign that powers on and tilts toward the pointer ---- */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(40px, 6vw, 72px); perspective: 1200px; }
.sign { position: relative; padding: 30px 30px 32px; border: 1.5px solid rgba(214, 240, 77, .5); background: radial-gradient(500px 220px at 20% 0%, rgba(214, 240, 77, .08), transparent 70%), rgba(7, 23, 16, .7); box-shadow: 0 0 0 1px rgba(214, 240, 77, .08), 0 0 26px rgba(214, 240, 77, .16), inset 0 0 22px rgba(214, 240, 77, .07); transform-style: preserve-3d; overflow: hidden; display: grid; gap: 12px; }
.sign h3 { font-size: clamp(30px, 3vw, 46px); color: var(--lime); text-shadow: 0 0 14px rgba(214, 240, 77, .45); transform: translateZ(30px); }
.sign p { color: var(--on-dark-soft); max-width: 46ch; transform: translateZ(18px); }
.sign-top { display: flex; justify-content: space-between; align-items: center; transform: translateZ(24px); }
.sign-n { font: 700 13px var(--ui); letter-spacing: .2em; color: var(--neon); }
.sign-price { font: 800 22px var(--display); color: var(--jungle); background: var(--lime); padding: 8px 16px; border-radius: 999px; box-shadow: 0 0 22px rgba(214, 240, 77, .55); }
.sign-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .14), transparent 60%); opacity: 0; transition: opacity .3s; }
.sign:hover .sign-glare { opacity: 1; }
.js .board .sign { opacity: 0; }
.board .sign.is-on { animation: power-on 1.1s steps(1, end) both; }
@keyframes power-on { 0% { opacity: 0; } 10% { opacity: .9; } 14% { opacity: .1; } 20% { opacity: 1; } 26% { opacity: .3; } 32%, 100% { opacity: 1; } }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }
/* each sign carries its burger's cut-out photo: beside the text on wide cards, above it on phones */
.sign:has(.sign-pic) { grid-template-columns: minmax(0, 1fr) clamp(120px, 13vw, 190px); grid-template-rows: auto auto 1fr; column-gap: clamp(16px, 2vw, 28px); }
.sign:has(.sign-pic) > :not(.sign-pic):not(.sign-glare) { grid-column: 1; }
.sign-pic { grid-column: 2; grid-row: 1 / 4; align-self: center; display: block; transform: translateZ(40px); }
.sign-pic img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(214, 240, 77, .12)); }
@media (max-width: 1024px) and (min-width: 761px) { .sign:has(.sign-pic) { grid-template-columns: 1fr; grid-template-rows: none; align-content: start; } .sign-pic { grid-column: 1; grid-row: auto; order: -1; justify-self: center; width: 170px; } }
@media (max-width: 480px) { .sign:has(.sign-pic) { grid-template-columns: 1fr; grid-template-rows: none; align-content: start; } .sign-pic { grid-column: 1; grid-row: auto; order: -1; justify-self: center; width: min(200px, 60%); } }

/* ---- footer ---- */
.site-foot { padding: 0 0 40px; background: #061209; }
.foot-call { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 32px; padding: clamp(46px, 7vw, 92px) var(--pad); background: var(--chile); color: #fff; text-decoration: none; overflow: hidden; }
.foot-call::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at var(--mx, 70%) 50%, rgba(255, 255, 255, .16), transparent 60%); opacity: 0; transition: opacity .3s; }
.foot-call:hover::before { opacity: 1; }
.foot-call-kicker { font: italic 400 clamp(34px, 4vw, 60px) var(--serif); }
.foot-call-num { font: 800 clamp(44px, 8vw, 128px)/1 var(--display); letter-spacing: -.05em; white-space: nowrap; }
.foot-call-go { width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px); border-radius: 50%; background: #fff; color: var(--chile); display: grid; place-items: center; transition: transform .5s var(--ease); }
.foot-call-go svg { width: 40%; height: 40%; }
.foot-call:hover .foot-call-go { transform: rotate(-18deg) scale(1.08); }
.foot-call-sub { grid-column: 2 / 4; font: 700 13px var(--ui); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.site-foot > .steps-line { height: 34px; margin-top: -1px; }
.site-foot .wrap { padding-top: 56px; }
.foot-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr; gap: 40px; }
.foot-grid h2 { font: 700 12px var(--ui); letter-spacing: .2em; color: var(--neon); margin-bottom: 16px; }
.foot-brand { flex-direction: column; align-items: flex-start; gap: 18px; }
.foot-brand img { width: 96px; height: 96px; filter: drop-shadow(0 0 18px rgba(155, 225, 93, .45)); }
.foot-social { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark); }
.foot-social:hover { border-color: var(--neon); color: var(--neon); }
.foot-social svg { width: 18px; height: 18px; }
.foot-grid nav ul { display: grid; gap: 10px; }
.foot-grid nav a { font: 600 16px var(--ui); color: var(--on-dark); }
.foot-phone { display: block; font: 800 26px var(--display); letter-spacing: -.03em; color: var(--on-dark); margin-bottom: 10px; }
.foot-grid p { margin-bottom: 12px; }
.foot-hours { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.foot-hours th, .foot-hours td { padding: 8px 0; border-bottom: 1px solid var(--line-dark); font-weight: 400; text-align: left; }
.foot-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.foot-hours tr.is-today th, .foot-hours tr.is-today td { color: var(--lime); font-weight: 600; }
.foot-bottom { align-items: center; }
.foot-bottom [data-open] { display: inline-flex; align-items: center; gap: 9px; font: 700 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; }
.to-top { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark); }
.to-top:hover { border-color: var(--neon); color: var(--neon); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .foot-call { grid-template-columns: 1fr auto; }
  .foot-call-kicker { grid-column: 1 / -1; }
  .foot-call-sub { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .foot-call-num { font-size: 40px; } .foot-grid { grid-template-columns: 1fr; } }

/* ---- the LED wall as a scroll gauge (desktop) ---- */
.led-progress { position: fixed; z-index: 80; right: 14px; top: 50%; width: 24px; height: 46vh; transform: translateY(-50%); pointer-events: none; overflow: visible; }
.led-progress path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: var(--p, 1); filter: drop-shadow(0 0 4px rgba(244, 197, 107, .9)); vector-effect: non-scaling-stroke; }
@media (max-width: 980px) { .led-progress { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .board .sign { opacity: 1; }
  .strand .sway { animation: none; }
}
.strand { width: 56px; margin-left: -28px; }
.strand-back { opacity: .5; filter: blur(1.2px); transform-origin: 50% 0; }
.strand-back .sway { scale: .78; transform-origin: 50% 0; }
.strand-front svg { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.foot-call-num { font-size: clamp(36px, 5.6vw, 92px); letter-spacing: -.06em; min-width: 0; }
.foot-phone { font-size: 21px; white-space: nowrap; }
@media (max-width: 480px) { .foot-call-num { font-size: 30px; } }
/* body text slides in but never fades: it stays readable at every moment */
.js .lead.reveal, .js p.reveal { opacity: 1; }

/* ======================= v4: gallery strip, lightbox, testimonials, phone dock ======================= */
.sign-tag { font: 700 11px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--jungle); background: var(--lime); padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 18px rgba(214, 240, 77, .5); }

/* gallery: a strip that drifts on its own, can be dragged and thrown, opens a viewer */
.gallery { background: var(--jungle); padding: clamp(84px, 11vw, 150px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.gallery-ctrl { display: flex; gap: 10px; align-items: center; }
.gallery-ctrl .btn-icon, .gallery-ctrl .pp { width: 52px; height: 52px; border-radius: 50%; }
.gallery-ctrl svg { width: 20px; height: 20px; }
.gal-viewport { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gal-viewport.is-dragging { cursor: grabbing; }
.gal-track { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0 var(--pad); width: max-content; will-change: transform; }
.gal-item { flex: none; }
.gal-open { display: block; padding: 0; border: 0; background: none; cursor: inherit; overflow: hidden; position: relative; }
.gal-open::after { content: ""; position: absolute; inset: 0; border: 1.5px solid transparent; transition: border-color .3s; }
.gal-open:hover::after, .gal-open:focus-visible::after { border-color: var(--neon); }
.gal-open picture, .gal-open img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s var(--ease); }
.gal-open:hover img { transform: scale(1.06); }
.gal-tall .gal-open { width: clamp(220px, 22vw, 340px); height: clamp(300px, 32vw, 470px); }
.gal-wide .gal-open { width: clamp(300px, 34vw, 520px); height: clamp(220px, 24vw, 360px); }
.gal-hint { margin-top: 22px; font: 700 12px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-soft); }
@media (max-width: 760px) { .gallery-head { flex-direction: column; align-items: flex-start; } .gallery-ctrl .btn-icon { display: none; } }

.lightbox { position: fixed; inset: 0; z-index: 160; background: rgba(6, 18, 9, .94); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 70px clamp(12px, 3vw, 40px) 30px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lightbox img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox figcaption { font: 600 15px var(--ui); color: var(--on-dark-soft); text-align: center; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; }
.lb-prev, .lb-next { width: 52px; height: 52px; border-radius: 50%; }
.lightbox svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .lightbox { grid-template-columns: 1fr 1fr; } .lightbox figure { grid-column: 1 / -1; grid-row: 1; } .lb-prev { justify-self: end; } }

/* testimonials: one review at a time */
.testi-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.testi-stage { position: relative; }
.testi-slides { display: grid; }
.testi { grid-area: 1 / 1; margin: 0; display: grid; gap: 22px; align-content: start; }
.testi[hidden] { display: none; }
.testi .stars { color: #b07a1a; font-size: 22px; letter-spacing: 3px; }
.testi blockquote { margin: 0; }
.testi blockquote p { font: 400 clamp(26px, 2.8vw, 42px)/1.22 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.testi figcaption { display: flex; align-items: center; gap: 14px; }
.testi figcaption b { display: block; font: 700 16px var(--ui); color: var(--ink); }
.testi figcaption small { font: 600 13px var(--ui); color: var(--ink-soft); }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--jungle); color: var(--lime); font: 800 17px var(--display); letter-spacing: -.02em; }
.testi-nav { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.testi-nav .btn-icon { width: 52px; height: 52px; border-radius: 50%; }
.testi-nav svg { width: 20px; height: 20px; }
.testi-dots { display: flex; gap: 8px; }
.testi-dots button { position: relative; width: 36px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.testi-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--line-light); }
.testi-dots button::after { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0; background: var(--chile); }
.testi-dots button[aria-selected="true"]::after { width: calc(var(--p, 0) * 100%); }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

/* phone dock: three quick tiles and the order block, edge to edge */
.mobile-bar { display: none !important; }
.dock { display: none; }
@media (max-width: 760px) {
  .dock { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 64px) 1fr; background: rgba(8, 22, 14, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-dark); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
  .dock.is-on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .dock-tile { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 64px; text-decoration: none; color: var(--on-dark); border-right: 1px solid var(--line-dark); font: 700 9.5px var(--ui); letter-spacing: .1em; text-transform: uppercase; }
  .dock-tile svg { width: 20px; height: 20px; color: var(--neon); }
  .dock-tile:active { background: rgba(155, 225, 93, .12); }
  .dock-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; background: var(--chile); color: #fff; text-decoration: none; }
  .dock-order small { display: block; font: italic 400 13px var(--serif); opacity: .9; }
  .dock-order b { display: block; font: 800 15px var(--display); letter-spacing: .02em; text-transform: uppercase; }
  .dock-order svg { width: 22px; height: 22px; }
  .site-foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* pause/play buttons (inca-a11y.js shows and wires them) */
.pp { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer; border: 1.5px solid rgba(247, 242, 232, .4); }
.pp[hidden] { display: none; }
.pp svg { width: 16px; height: 16px; }
.pp .pp-play { display: none; }
.pp.is-paused .pp-pause { display: none; }
.pp.is-paused .pp-play { display: block; }
.testi-score .score { font-size: clamp(84px, 9vw, 140px); }
@media (max-width: 760px) {
  .dock { grid-template-columns: repeat(3, 76px) 1fr; }
  .dock-tile { font-size: 8.5px; letter-spacing: .06em; }
  .dock-order { padding: 0 14px; }
  .dock-order b { font-size: 13.5px; white-space: nowrap; }
}
@media (max-width: 360px) { .dock { grid-template-columns: repeat(3, 66px) 1fr; } }
@media (max-width: 430px) { .dock-order svg { display: none; } .dock-order b { font-size: 13px; letter-spacing: 0; } .dock-order { justify-content: center; } }
/* phones: the hero keeps its words and photo; Call / Order live in the dock, which shows from the start */
@media (max-width: 760px) {
  .hero .hero-cta { display: none; }
  .dock { transform: none; visibility: visible; }
  .dock-order b { font-size: 11.5px; letter-spacing: .02em; }
  .dock-order small { font-size: 12px; }
}
@media (max-width: 760px) { .hero-inner { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* "Call to order" is longer than the old label: give it the room on narrow phones */
@media (max-width: 430px) { .dock-order { padding: 0 8px; } .dock-order b { font-size: 10.5px; letter-spacing: 0; } }
@media (max-width: 370px) { .dock-order b { font-size: 10px; } .dock-order small { font-size: 11px; } }

/* hero logo: a streak of light sweeps across the badge every few seconds (as on the Rodeos hero), clipped to its shape */
.hero-logo { position: relative; display: inline-block; width: clamp(92px, 9vw, 132px); margin-bottom: 26px; }
.hero-logo .hero-badge { width: 100%; margin: 0; }
.hero-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../img/logo-badge-384.webp") center / 100% 100% no-repeat; mask: url("../img/logo-badge-384.webp") center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 230, .95) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 120% 0;
  animation: shine 5.5s cubic-bezier(.2, .8, .2, 1) 2.6s infinite; }
@keyframes shine { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-logo::after { animation: none; display: none; } }

/* ---- lunch light / evening glow: drag to wipe between the two rooms; live local clock ---- */
.dn-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dn-clock { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line-light); display: grid; gap: 10px; }
.dn-time { font: 800 clamp(48px, 6vw, 84px)/1 var(--display); letter-spacing: -.05em; color: var(--ink); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dn-time small { font: italic 400 22px var(--serif); letter-spacing: 0; color: var(--ink-soft); }
.dn-status { display: inline-flex; align-items: center; gap: 10px; font: 700 14px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.dn-compare { position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; box-shadow: 0 40px 80px -40px rgba(19, 34, 25, .55); --cut: 50%; }
.dn-layer { position: absolute; inset: 0; margin: 0; }
.dn-layer picture, .dn-layer img { width: 100%; height: 100%; object-fit: cover; }
.dn-night { clip-path: inset(0 0 0 var(--cut)); }
.dn-layer figcaption { position: absolute; top: 16px; padding: 7px 14px; border-radius: 999px; font: 700 11.5px var(--ui); letter-spacing: .16em; text-transform: uppercase; background: rgba(10, 29, 19, .72); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dn-day figcaption { left: 16px; }
.dn-night figcaption { right: 16px; }
.dn-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(244, 197, 107, .9); pointer-events: none; }
.dn-handle i { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: grid; place-items: center; }
.dn-handle i::before, .dn-handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.dn-handle i::before { left: 12px; border-right-color: var(--jungle); }
.dn-handle i::after { right: 12px; border-left-color: var(--jungle); }
.dn-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.dn-range:focus-visible + * , .dn-compare:focus-within .dn-handle i { outline: 3px solid var(--chile); outline-offset: 3px; }
@media (max-width: 900px) { .dn-grid { grid-template-columns: 1fr; } }
.dn-time span { white-space: nowrap; font-size: clamp(44px, 4.6vw, 70px); }
.dn-grid { grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); }
@media (max-width: 900px) { .dn-grid { grid-template-columns: 1fr; } }
/* gallery: every photo the same frame (user ruling) */
.gal-tall .gal-open, .gal-wide .gal-open { width: clamp(260px, 30vw, 440px); height: auto; aspect-ratio: 4 / 3; }
.gal-track { align-items: stretch; }
@media (max-width: 760px) { .gal-tall .gal-open, .gal-wide .gal-open { width: 78vw; } }

/* gallery as a curved ribbon: frames bend away into depth, the middle one comes forward lit with its caption */
.gal-viewport { perspective: 1500px; perspective-origin: 50% 45%; padding: 40px 0 70px; margin: -40px 0 -50px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.gal-track { position: relative; transform-style: preserve-3d; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
.gal-item { transform-style: preserve-3d; will-change: transform; }
.gal-open { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75); }
.gal-open::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(6, 18, 9, var(--dim, 0)); transition: background .2s; }
.gal-open::after { z-index: 2; }
.gal-item.is-center .gal-open::after { border-color: rgba(214, 240, 77, .85); box-shadow: 0 0 40px rgba(155, 225, 93, .35), inset 0 0 0 1px rgba(214, 240, 77, .4); }
.gal-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 46px 18px 16px; text-align: left; color: #fff; font: 600 14px/1.35 var(--ui);
  background: linear-gradient(transparent, rgba(6, 18, 9, .88)); opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.gal-cap i { display: block; margin-bottom: 4px; font: 700 11px var(--ui); font-style: normal; letter-spacing: .2em; color: var(--lime); }
.gal-item.is-center .gal-cap, .gal-open:hover .gal-cap, .gal-open:focus-visible .gal-cap { opacity: 1; transform: none; }
/* a soft reflection on the floor under the ribbon */
.gal-viewport::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 26px; height: 40px; background: radial-gradient(50% 100% at 50% 0, rgba(155, 225, 93, .14), transparent 70%); pointer-events: none; }
.gal-viewport { position: relative; }
@media (max-width: 760px) { .gal-viewport { perspective: 900px; } .gal-tall .gal-open, .gal-wide .gal-open { width: 72vw; } }

/* gallery: in 3D the strip itself catches taps, so only the photos take the pointer */
.gal-track { pointer-events: none; }
.gal-open { pointer-events: auto; }

/* floating back-to-top: a round neon button whose ring fills as you scroll */
.fab-top { position: fixed; z-index: 96; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--lime);
  background: rgba(10, 29, 19, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px var(--line-dark);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s, box-shadow .3s; }
.fab-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s, box-shadow .3s; }
.fab-top:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 28px rgba(155, 225, 93, .45); }
.fab-top:hover .fab-arrow { transform: translateY(-3px); }
.fab-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fab-ring circle { fill: none; stroke: rgba(247, 242, 232, .14); stroke-width: 2.5; }
.fab-ring .fab-fill { stroke: var(--neon); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sp, 0) * 100); filter: drop-shadow(0 0 4px rgba(155, 225, 93, .8)); }
.fab-arrow { position: relative; width: 20px; height: 20px; transition: transform .3s var(--ease); }
.led-progress { right: 8px; }
@media (max-width: 760px) { .fab-top { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 50px; height: 50px; } }

/* branded scrollbar: jungle track, neon-to-lime thumb */
html { scrollbar-color: #6fbf3f #0a1d13; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #0a1d13; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--lime), var(--neon) 55%, #3f8f2a); border-radius: 999px; border: 3px solid #0a1d13; }
html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e8ff7a, var(--lime)); }
::selection { background: var(--lime); color: var(--jungle); }

/* ---- testimonials as a deck of cards ---- */
.is-deck .testi-slides { position: relative; padding-bottom: 34px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; --pull: 0; }
.is-deck .testi-slides.is-dragging { cursor: grabbing; }
.is-deck .testi { position: relative; background: #fffdf7; border: 1px solid var(--line-light); padding: clamp(28px, 3.6vw, 52px); box-shadow: 0 30px 60px -36px rgba(19, 34, 25, .45); overflow: hidden;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s, box-shadow .3s; transform-origin: 50% 100%; }
.is-deck .testi::before { content: "\201C"; position: absolute; right: clamp(16px, 3vw, 40px); top: -.18em; font: 400 clamp(150px, 16vw, 240px)/1 var(--serif); color: var(--chile); opacity: .1; pointer-events: none; }
.is-deck .testi::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), rgba(155, 225, 93, .16), transparent 70%); }
.is-deck .testi[data-depth="0"]:hover::after { opacity: 1; }
.is-deck .testi[data-depth="0"] { z-index: 5; }
.is-deck .testi[data-depth="1"] { z-index: 4; transform: translateY(calc(16px - var(--pull) * 16px)) scale(calc(.955 + var(--pull) * .045)); }
.is-deck .testi[data-depth="2"] { z-index: 3; transform: translateY(32px) scale(.91); opacity: .7; }
.is-deck .testi[data-depth="3"], .is-deck .testi[data-depth="4"] { z-index: 1; transform: translateY(40px) scale(.88); opacity: 0; }
.is-deck .testi:not([data-depth="0"]) > * { visibility: hidden; }
.is-deck .testi blockquote p .w { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .is-deck .testi { transition: none; } }

/* ---- "Hungry?" band: dialing number, ringing phone, drifting dish names ---- */
.foot-call > :not(.foot-call-marquee) { position: relative; z-index: 1; }
.foot-call-marquee { position: absolute; inset: auto 0 auto 0; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; z-index: 0; overflow: hidden; }
.foot-call-marquee > span { display: inline-block; font: 800 clamp(70px, 11vw, 180px)/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); animation: callDrift 60s linear infinite; }
@keyframes callDrift { to { transform: translateX(-50%); } }
.dial { position: relative; display: inline-block; overflow: hidden; height: 1.1em; line-height: 1.1em; vertical-align: top; }
.dial-ph { color: transparent; }
.dial-col { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--k) * 55ms); }
.dial-col::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9" / ""; display: block; white-space: pre; line-height: 1.1em; text-align: center; }
.is-dialed .dial-col { transform: translate(-50%, calc(var(--d) * -1.1em)); }
.dial-sep { display: inline-block; line-height: 1.1em; vertical-align: top; }
.foot-call-num { line-height: 1.1; }
.foot-call-go { position: relative; transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.foot-call:hover .foot-call-go { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1.08); }
.foot-call-go::before, .foot-call-go::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: ringWave 2.4s cubic-bezier(.2, .7, .3, 1) infinite; pointer-events: none; }
.foot-call-go::after { animation-delay: 1.2s; }
@keyframes ringWave { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.foot-call-go svg { animation: ringShake 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ringShake { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-16deg); } 78% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 90% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .foot-call-marquee > span, .foot-call-go::before, .foot-call-go::after, .foot-call-go svg { animation: none; } .foot-call-go::before, .foot-call-go::after { display: none; } }

/* phones: the ringing icon sits beside "Hungry?", the number gets its own full line */
@media (max-width: 760px) {
  .foot-call { grid-template-columns: 1fr auto; gap: 14px 16px; }
  .foot-call-kicker { grid-column: 1; grid-row: 1; align-self: center; }
  .foot-call-go { grid-column: 2; grid-row: 1; width: 60px; height: 60px; }
  .foot-call-num { grid-column: 1 / -1; grid-row: 2; font-size: clamp(30px, 9.4vw, 52px); }
  .foot-call-sub { grid-column: 1 / -1; grid-row: 3; font-size: 11.5px; letter-spacing: .14em; }
}

/* footer: Explore and Visit side by side, also on phones */
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot-brand, .foot-hours-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-phone { font-size: 16px; letter-spacing: -.02em; }
  .foot-visit p, .foot-grid nav a { font-size: 14.5px; }
}
.is-deck .testi { align-content: center; }
/* motion rules: nothing here runs on its own for more than 5 s — the names move with scroll, the phone rings briefly on arrival and again on hover */
.foot-call-marquee > span { animation: none; transform: translateX(var(--drift, 0px)); will-change: transform; }
.foot-call-go::before, .foot-call-go::after, .foot-call-go svg { animation: none; }
.foot-call.is-dialed .foot-call-go::before { animation: ringWave 2.2s cubic-bezier(.2, .7, .3, 1) .4s 2 both; }
.foot-call.is-dialed .foot-call-go::after { animation: ringWave 2.2s cubic-bezier(.2, .7, .3, 1) 1.5s 1 both; }
.foot-call.is-dialed .foot-call-go svg { animation: ringShake 3.2s ease-in-out .3s 1; }
.foot-call.is-dialed:hover .foot-call-go::before { animation: ringWave2 2.2s cubic-bezier(.2, .7, .3, 1) infinite; }
.foot-call.is-dialed:hover .foot-call-go::after { animation: ringWave2 2.2s cubic-bezier(.2, .7, .3, 1) 1.1s infinite; }
.foot-call.is-dialed:hover .foot-call-go svg { animation: ringShake2 1.6s ease-in-out infinite; }
@keyframes ringWave2 { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
@keyframes ringShake2 { 0%, 40%, 100% { transform: rotate(0); } 48% { transform: rotate(-16deg); } 56% { transform: rotate(14deg); } 64% { transform: rotate(-12deg); } 72% { transform: rotate(10deg); } 80% { transform: rotate(0); } }
.foot-call-go::before, .foot-call-go::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .foot-call .foot-call-go::before, .foot-call .foot-call-go::after, .foot-call .foot-call-go svg { animation: none !important; } }
@media (max-width: 760px) { .foot-call-num { font-size: clamp(24px, 7.9vw, 52px); letter-spacing: -.05em; } }
@media (max-width: 420px) { .testi-nav { gap: 10px; } .testi-dots { gap: 6px; } .testi-dots button { width: 24px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .foot-phone { font-size: clamp(13.5px, 4.4vw, 16px); } }

/* ---- menu page: real text menu with dotted price leaders ---- */
.menu-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.menu-sec { padding: clamp(56px, 8vw, 110px) 0; }
.menu-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(36px, 5vw, 60px); }
.menu-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-light); border-radius: 999px; font: 700 14.5px/1 var(--ui); color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease); }
.menu-jump a:hover { border-color: var(--chile); color: var(--chile); }
.menu-cat { scroll-margin-top: 100px; min-width: 0; }
.menu-cat-title { font: 800 clamp(30px, 3.6vw, 48px)/1.05 var(--display); letter-spacing: -.03em; margin: 0 0 6px; padding-bottom: 16px; border-bottom: 1px solid currentColor; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.mi { padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.mi-row { display: flex; align-items: baseline; gap: 10px; }
.mi h3 { font: 700 18px/1.3 var(--ui); margin: 0; overflow-wrap: anywhere; }
.mi-dots { flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted rgba(19, 34, 25, .3); transform: translateY(-5px); }
.mi-price { flex: none; font: 700 18px/1.3 var(--ui); color: var(--chile); font-variant-numeric: tabular-nums; }
.mi p { margin: 4px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; max-width: 56ch; }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 80px) clamp(40px, 6vw, 96px); }
.menu-foot { grid-column: 1 / -1; color: var(--ink-soft); margin: 0; }
.menu-foot a { color: var(--chile); }
@media (min-width: 900px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .menu-cat--wide { grid-column: 1 / -1; }
  .menu-cat--wide .menu-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); }
}
.menu-burgers { background: var(--jungle-2); color: var(--on-dark); scroll-margin-top: 80px; }
.menu-burgers-grid > .menu-cat { max-width: 760px; }
.menu-burgers .mi { border-color: var(--line-dark); }
.menu-burgers .mi-dots { border-color: rgba(247, 242, 232, .3); }
.menu-burgers .mi-price { color: var(--lime); }
.menu-burgers .mi p { color: var(--on-dark-soft); }
.mi--pic { display: grid; grid-template-columns: clamp(56px, 14vw, 84px) minmax(0, 1fr); gap: clamp(12px, 2vw, 20px); align-items: center; }
.mi-pic { display: block; }
.mi-pic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }

/* ---- home: longer hero headline + FAQ ---- */
.hero h1.display { font-size: clamp(38px, 5vw, 80px); max-width: none; }
.hero .lead a { color: inherit; text-underline-offset: 3px; }
.faq { padding-top: 0; }
.faq-grid { display: grid; gap: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-light); padding-top: clamp(56px, 8vw, 112px); }
.faq-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-light); }
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--line-light); display: grid; gap: 8px; }
.faq-item dt { font: 800 clamp(19px, 1.6vw, 23px)/1.25 var(--display); letter-spacing: -.02em; }
.faq-item dd { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.faq-item dd a { color: var(--chile); font-weight: 600; }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.faq .h2 { font-size: clamp(34px, 3.8vw, 56px); }