/* ==========================================================================
   FARRO'S GRILLHOUSE — black / red / white
   Interface styling inspired by wingstop.co.uk (bold condensed type, big
   full-bleed imagery, twin CTA buttons, stacked statement bands).
   ========================================================================== */

:root {
  --black:      #0b0b0b;
  --ink:        #0f0f0f;
  --panel:      #151515;
  --panel-2:    #1d1d1d;
  --line:       #2c2c2c;
  --red:        #e01414;
  --red-600:    #c00f0f;
  --red-700:    #9c0b0b;
  --white:      #ffffff;
  --muted:      #b6b6b6;
  --muted-2:    #8b8b8b;
  --gold:       #e7b64b;
  --maxw:       1240px;
  --header-h:   74px;
  --bar-h:      38px;
  --mbar-h:     68px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}

/* ----- reset ----- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain; background:var(--black);
}
body {
  background:var(--black);
  color:var(--white);
  font-family:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:transparent;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
ul { list-style:none; }
::selection { background:var(--red); color:#fff; }

/* native-feeling press states — every tappable thing gives instant feedback */
.btn, .foodcard, .offercard, .loccard__actions .btn, .navtoggle, .nav a,
.menu-nav a, .chips span, .socials a {
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.96); }
.foodcard, .offercard { transition:transform .2s var(--ease), border-color .2s; }
.foodcard:active, .offercard:active { transform:scale(.98); }
@media (hover:none) {
  .foodcard:hover img, .foodcard:hover .foodcard__media { transform:none; }
  .btn:hover { transform:none; }
}

h1,h2,h3,h4 {
  font-family:"Anton", "Oswald", Impact, sans-serif;
  font-weight:400;
  line-height:.98;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

.red { color:var(--red); }
.center { text-align:center; }

/* ----- buttons ----- */
.btn {
  --bg:var(--red);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Oswald", sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-size:15px;
  line-height:1;
  padding:15px 26px 13px;
  background:var(--bg);
  color:#fff;
  border:2px solid var(--bg);
  border-radius:2px;
  transition:transform .15s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); background:var(--red-600); border-color:var(--red-600); }
.btn--ghost { background:transparent; border-color:#fff; color:#fff; }
.btn--ghost:hover { background:#fff; color:var(--black); border-color:#fff; }
.btn--dark { background:var(--black); border-color:var(--black); }
.btn--dark:hover { background:#000; border-color:#000; }
.btn--lg { font-size:17px; padding:19px 40px 16px; }
.btn--block { display:flex; width:100%; }

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.topbar {
  background:var(--black);
  border-bottom:1px solid var(--line);
  height:var(--bar-h);
  display:flex; align-items:center;
  overflow:hidden;
  position:relative; z-index:60;
}
.topbar__track {
  display:flex; align-items:center; gap:44px;
  white-space:nowrap;
  font-family:"Oswald", sans-serif;
  font-size:12.5px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  animation:marquee 26s linear infinite;
  padding-left:44px;
}
.topbar__track span b { color:#fff; font-weight:600; }
.topbar__track span a { color:var(--red); font-weight:700; }
.topbar__track span a:hover { text-decoration:underline; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .topbar__track{ animation:none; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,11,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s, background .25s;
}
.site-header.is-stuck { box-shadow:0 14px 34px rgba(0,0,0,.55); }
.site-header__inner {
  height:var(--header-h);
  display:flex; align-items:center; gap:26px;
}
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img { height:40px; width:auto; }
.brand__txt {
  display:block;
  font-family:"Anton", sans-serif;
  font-size:26px; letter-spacing:1.5px; line-height:1;
  color:#fff; padding-top:4px;
}

.nav { display:flex; align-items:center; gap:24px; margin-left:6px; }
.nav a {
  font-family:"Oswald", sans-serif;
  font-weight:600; text-transform:uppercase;
  letter-spacing:1.6px; font-size:15px;
  padding:6px 0; position:relative; color:#fff;
}
.nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  background:var(--red); transition:right .25s var(--ease);
}
.nav a:hover::after, .nav a.active::after { right:0; }

.header-cta { margin-left:auto; display:flex; gap:12px; }
.header-cta .btn { padding:12px 20px 10px; font-size:13px; }

/* burger */
.navtoggle { display:none; width:44px; height:44px; border:0; background:transparent; margin-left:auto; }
.navtoggle span, .navtoggle span::before, .navtoggle span::after {
  content:""; display:block; width:24px; height:2.5px; background:#fff; border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s;
}
.navtoggle span { margin:0 auto; position:relative; }
.navtoggle span::before { position:absolute; top:-7px; left:0; }
.navtoggle span::after  { position:absolute; top:7px; left:0; }
body.nav-open .navtoggle span { background:transparent; }
body.nav-open .navtoggle span::before { transform:translateY(7px) rotate(45deg); }
body.nav-open .navtoggle span::after  { transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position:relative;
  min-height:calc(100svh - var(--header-h) - var(--bar-h));
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#000;
}
.hero__slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.1s var(--ease), transform 7s linear;
}
.hero__slide.is-active { opacity:1; transform:scale(1); }
.hero__video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:#000;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.6) 100%),
    linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,0) 70%);
}
.hero__inner { position:relative; z-index:2; padding:60px 0 70px; }
.hero__logo {
  width:clamp(150px, 17vw, 220px); height:auto; margin-bottom:26px;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.7));
}
.hero__kicker {
  font-family:"Oswald",sans-serif; font-weight:600;
  letter-spacing:4px; text-transform:uppercase; font-size:14px;
  color:#fff; margin-bottom:18px;
  display:inline-flex; align-items:center; gap:12px;
}
.hero__kicker::before { content:""; width:44px; height:3px; background:var(--red); display:inline-block; }
.hero h1 {
  font-size:clamp(44px, 7vw, 104px);
  text-shadow:0 6px 30px rgba(0,0,0,.55);
}
.hero h1 span { display:block; }
.hero h1 em { color:var(--red); font-style:normal; }
.hero__sub {
  margin-top:20px; max-width:46ch;
  font-size:19px; color:#e9e9e9; font-weight:500;
}
.hero__actions { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__dots { position:absolute; right:24px; bottom:26px; z-index:3; display:flex; gap:9px; }
.hero__dots button {
  width:11px; height:11px; border-radius:50%; border:2px solid #fff; background:transparent;
  padding:0; transition:background .2s, transform .2s;
}
.hero__dots button.is-active { background:var(--red); border-color:var(--red); transform:scale(1.15); }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section { padding:88px 0; position:relative; }
.section--tight { padding:60px 0; }
.section--panel { background:var(--panel); }
.section--wood {
  background:linear-gradient(rgba(8,8,8,.86),rgba(8,8,8,.92)), url("../img/backgrounds__Dark-Wood-Panels-background.jpg");
  background-size:cover; background-attachment:fixed; background-position:center;
}
.section__head { max-width:760px; margin-bottom:44px; }
.section__head.center { margin-left:auto; margin-right:auto; }
.eyebrow {
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:4px; font-size:13px; color:var(--red); display:block; margin-bottom:14px;
}
.section h2 { font-size:clamp(36px, 5.4vw, 66px); }
.section__head p { margin-top:16px; color:var(--muted); font-size:18px; }

/* ==========================================================================
   FOOD CATEGORY GRID
   ========================================================================== */
.foodgrid {
  display:grid; gap:18px;
  grid-template-columns:repeat(3, 1fr);
}
.foodcard {
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:4/3; display:block;
  background:#000;
}
.foodcard img, .foodcard__media {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease); filter:brightness(.72) saturate(1.05);
  background:#000;
}
/* the food-grid clips are square-shot — contain (not cover) so the full
   frame always shows inside the 4:3 card, never cropped top/bottom */
.foodcard__media { object-fit:contain; }
.foodcard::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.05) 60%);
}
.foodcard:hover img, .foodcard:hover .foodcard__media { transform:scale(1.08); }
.foodcard__label {
  position:absolute; left:20px; bottom:16px; z-index:2; right:20px;
}
.foodcard__label h3 { font-size:30px; }
.foodcard__label span {
  font-family:"Oswald",sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:2px; color:var(--red); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.foodcard__label span::after {
  content:"→"; transition:transform .25s var(--ease);
}
.foodcard:hover .foodcard__label span::after { transform:translateX(6px); }

/* ==========================================================================
   STATEMENT / PERI BAND
   ========================================================================== */
.statement {
  background:var(--red);
  color:#fff; text-align:center;
  padding:84px 0;
  background-image:linear-gradient(135deg, var(--red) 0%, var(--red-700) 100%);
}
.statement h2 {
  font-size:clamp(40px, 8vw, 104px);
  line-height:.92;
}
.statement p {
  font-family:"Oswald",sans-serif; letter-spacing:3px; text-transform:uppercase;
  font-weight:500; margin-top:14px; font-size:15px; color:#ffd9d9;
}
.heatrow {
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;
}
.heatrow span {
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:1.5px; font-size:14px;
  border:2px solid rgba(255,255,255,.6); border-radius:2px;
  padding:9px 16px 7px;
}
.heatrow span:hover { background:#000; border-color:#000; }

/* ==========================================================================
   SPLIT / FEATURE
   ========================================================================== */
.split {
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border:1px solid var(--line);
}
.split__media { position:relative; min-height:420px; }
.split__media img, .split__media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
/* the book-the-room clip is square-shot and was reading as an oversized,
   over-cropped zoom against the rest of the site — contain it and dim/desaturate
   to sit at the same visual weight as the site's other imagery.
   (selector must out-specificity ".split__media video" above) */
.split__media video.split__media-video { object-fit:contain; filter:brightness(.8) saturate(.9); }
.split__body { padding:56px; background:var(--panel); display:flex; flex-direction:column; justify-content:center; }
.split__body h2 { font-size:clamp(32px,4vw,52px); }
.split__body p { color:var(--muted); margin-top:16px; }
.split__body .btn { margin-top:28px; align-self:flex-start; }
.split--rev .split__media { order:2; }

/* ==========================================================================
   OFFERS
   ========================================================================== */
.offergrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.offercard {
  background:var(--panel); border:1px solid var(--line); border-radius:3px; overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s;
}
.offercard:hover { transform:translateY(-4px); border-color:var(--red); }
.offercard img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#0b0b0b; }
.offergrid--posters .offercard { margin:0; }
.offercard__c { padding:18px 18px 22px; }
.offercard__c h3 { font-size:21px; }
.offercard__c p { font-size:14.5px; color:var(--muted); margin-top:8px; }

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
.loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.loccard {
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  padding:38px; display:flex; flex-direction:column; gap:14px;
}
.loccard h3 { font-size:30px; }
.loccard h3 span { color:var(--red); }
.loccard address { font-style:normal; color:var(--muted); font-size:17px; line-height:1.7; }
.loccard .tel {
  font-family:"Anton",sans-serif; font-size:26px; letter-spacing:1px; color:#fff;
}
.loccard__hours {
  border-top:1px solid var(--line); padding-top:14px; margin-top:4px;
  font-size:14.5px; color:var(--muted-2);
}
.loccard__hours b { color:#fff; font-weight:600; }
.loccard__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
.loccard__actions .btn { font-size:12.5px; padding:11px 16px 9px; }

/* ==========================================================================
   NEWSLETTER / CTA BAND
   ========================================================================== */
.ctaband {
  background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:70px 0; text-align:center;
}
.ctaband h2 { font-size:clamp(34px,5vw,58px); }
.ctaband p { color:var(--muted); margin-top:12px; }
.signup { display:flex; gap:10px; max-width:520px; margin:28px auto 0; }
.signup input {
  flex:1; background:var(--black); border:2px solid var(--line); color:#fff;
  padding:14px 16px; border-radius:2px; font:inherit;
}
.signup input:focus { outline:none; border-color:var(--red); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background:#070707; border-top:3px solid var(--red); padding:64px 0 30px; }
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand img { height:120px; width:auto; margin-bottom:14px; }
.footer-brand p { color:var(--muted-2); font-size:14.5px; max-width:34ch; }
.site-footer h4 {
  font-family:"Oswald",sans-serif; font-weight:600; letter-spacing:2px;
  font-size:14px; color:var(--red); margin-bottom:16px;
}
.site-footer li { margin-bottom:10px; }
.site-footer li a { color:var(--muted); font-size:15px; }
.site-footer li a:hover { color:#fff; }
.socials { display:flex; gap:12px; margin-top:6px; }
.socials a {
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .2s, border-color .2s;
}
.socials a:hover { background:var(--red); border-color:var(--red); }
.socials img { width:18px; height:18px; }
.footer-base {
  margin-top:48px; border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--muted-2); font-size:13px;
}

/* ==========================================================================
   PAGE HEADER (interior pages)
   ========================================================================== */
.pagehead {
  position:relative; padding:70px 0 56px; text-align:center;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.8)), var(--pagehead-img, none);
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--line);
}
.pagehead h1 { font-size:clamp(44px,7vw,86px); }
.pagehead p { color:var(--muted); margin-top:12px; font-size:18px; }
.crumbs { font-family:"Oswald",sans-serif; letter-spacing:2px; font-size:12px; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.crumbs a:hover { color:var(--red); }

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.menu-nav {
  position:sticky; top:calc(var(--header-h)); z-index:40;
  background:rgba(11,11,11,.97); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.menu-nav__track {
  display:flex; gap:8px; overflow-x:auto; padding:12px 22px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; overscroll-behavior-x:contain;
}
.menu-nav__track::-webkit-scrollbar { display:none; }
.menu-nav a {
  flex:0 0 auto; scroll-snap-align:start;
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:1.4px; font-size:13px;
  padding:9px 15px 7px; border:1px solid var(--line); border-radius:2px;
  color:var(--muted); white-space:nowrap; transition:all .18s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.menu-nav a:hover { color:#fff; border-color:#fff; }
.menu-nav a:active { color:#fff; background:var(--panel); }
.menu-nav a.active { background:var(--red); border-color:var(--red); color:#fff; }

.menu-sec { padding:66px 0 12px; scroll-margin-top:140px; }
.menu-sec__head { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:8px; }
.menu-sec__head h2 { font-size:clamp(34px,4.6vw,54px); }
.menu-sec__head .tag {
  font-family:"Oswald",sans-serif; font-weight:500; letter-spacing:2px; font-size:12px;
  text-transform:uppercase; color:var(--red);
}
.menu-sec__note { color:var(--muted-2); font-size:15px; margin-bottom:26px; max-width:70ch; }
.menu-sec__note em { color:var(--gold); font-style:normal; }

.mlist { border-top:1px solid var(--line); }
.mitem {
  display:grid; grid-template-columns:1fr auto; gap:8px 24px;
  padding:20px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.mitem__name {
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; font-size:19px;
}
.mitem__desc { grid-column:1 / -1; color:var(--muted); font-size:15.5px; max-width:74ch; }
.mitem__price {
  font-family:"Anton",sans-serif; font-size:22px; color:var(--red); letter-spacing:.5px;
  white-space:nowrap;
}
.mitem--sub { padding:14px 0; }
.mitem--sub .mitem__name { font-size:16px; color:var(--muted); }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 30px; }
.chips span {
  font-family:"Oswald",sans-serif; font-size:12.5px; font-weight:500; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:2px; padding:7px 12px 5px;
}
.chips span b { color:#fff; font-weight:600; }

.buildcard {
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  padding:24px; margin:10px 0 30px;
}
.buildcard img { width:170px; height:auto; }
.buildcard h3 { font-size:24px; margin-bottom:8px; }
.buildcard p { color:var(--muted); font-size:15px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.infocard { background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:28px; }
.infocard h3 { font-size:22px; margin-bottom:10px; }
.infocard p, .infocard address { color:var(--muted); font-style:normal; line-height:1.75; }
.infocard a { color:#fff; }
.infocard a:hover { color:var(--red); }

/* contact form layout */
.contact-layout { display:grid; grid-template-columns:1.5fr 1fr; gap:34px; align-items:start; }
.contact-form-wrap h2 { font-size:clamp(30px,4vw,46px); margin:6px 0 10px; }
.cform__lead { color:var(--muted); margin-bottom:26px; max-width:52ch; }
.cform { display:flex; flex-direction:column; gap:16px; }
.cform__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cform__field {
  display:flex; flex-direction:column; gap:7px;
  font-family:"Oswald",sans-serif; font-weight:500; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
}
.cform__field b { color:var(--red); }
.cform input, .cform select, .cform textarea {
  font-family:"Barlow",sans-serif; font-size:16px; font-weight:400;
  letter-spacing:0; text-transform:none; color:#fff;
  background:var(--black); border:2px solid var(--line); border-radius:2px;
  padding:13px 14px; width:100%;
}
.cform textarea { resize:vertical; min-height:120px; }
.cform input[type="date"], .cform input[type="time"] { color-scheme:dark; }
.cform input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(0.85); cursor:pointer; }
.cform select { appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px, calc(100% - 14px) 20px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:38px;
}
.cform input:focus, .cform select:focus, .cform textarea:focus { outline:none; border-color:var(--red); }
.cform__field.err input, .cform__field.err textarea { border-color:var(--red); background:rgba(224,20,20,.08); }
.cform .btn { align-self:flex-start; margin-top:6px; }
.cform__hint { font-size:13px; color:var(--muted-2); }

.cform__done { border:1px solid var(--red); border-radius:3px; padding:26px; background:var(--panel); }
.cform__done h3 { font-size:24px; margin-bottom:10px; }
.cform__done p { color:var(--muted); margin-bottom:12px; }
.cform__done a { color:#fff; }
.cform__done textarea {
  width:100%; min-height:150px; background:var(--black); color:#fff;
  border:2px solid var(--line); border-radius:2px; padding:12px; font:14px/1.5 "Barlow",sans-serif; resize:vertical;
}
.cform__done-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.contact-aside { display:flex; flex-direction:column; gap:16px; }
.contact-aside .infocard { padding:22px; }

@media (max-width:900px){
  .contact-layout { grid-template-columns:1fr; }
  .cform__row { grid-template-columns:1fr; }
}

/* ==========================================================================
   SPA VIEWS (single-file app build only)
   ========================================================================== */
.view { display:none; }
.view.is-active { display:block; animation:viewin .28s var(--ease); }
@keyframes viewin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ==========================================================================
   BOOK A TABLE BAND
   ========================================================================== */
.bookband {
  background:var(--red);
  background-image:linear-gradient(135deg, var(--red) 0%, var(--red-700) 100%);
  border-top:1px solid var(--red-700); border-bottom:1px solid var(--red-700);
}
.bookband__inner {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:40px 22px; flex-wrap:wrap;
}
.bookband .eyebrow { color:#ffd9d9; }
.bookband h2 { font-size:clamp(30px,4.4vw,50px); color:#fff; }
.bookband p { color:#ffe4e4; margin-top:10px; max-width:60ch; font-size:16px; }
.bookband p b { color:#fff; }
.bookband .btn { background:#0b0b0b; border-color:#0b0b0b; flex-shrink:0; }
.bookband .btn:hover { background:#000; border-color:#000; transform:translateY(-2px); }
@media (max-width:760px){ .bookband__inner { flex-direction:column; align-items:flex-start; } .bookband .btn { width:100%; } }

/* ==========================================================================
   GAME BAND (homepage promo for Steak Ninja)
   ========================================================================== */
.gameband {
  background:linear-gradient(120deg, #1a0d0f 0%, #0c0708 60%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.gameband__inner {
  display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center;
  padding:64px 22px;
}
.gameband__text h2 { font-size:clamp(34px,5vw,60px); }
.gameband__text h2 em { color:var(--red); font-style:normal; }
.gameband__text p { color:var(--muted); margin:14px 0 26px; max-width:44ch; }
.gameband__art {
  position:relative; height:220px; border-radius:6px;
  background:radial-gradient(120% 100% at 50% 100%, rgba(224,20,20,.25), transparent 70%),
            #100a0b;
  border:1px solid var(--line);
  display:block; overflow:hidden;
}
.gameband__steak, .gameband__bomb {
  position:absolute; font-size:64px; line-height:1;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));
}
.gameband__steak { left:22%; top:50%; animation:toss 3.2s var(--ease) infinite; }
.gameband__bomb  { right:24%; top:60%; animation:toss 3.2s var(--ease) infinite .6s; }
@keyframes toss {
  0%,100% { transform:translateY(40px) rotate(-8deg); }
  50% { transform:translateY(-46px) rotate(14deg); }
}
.gameband__blade {
  position:absolute; left:-10%; top:50%; width:120%; height:3px;
  background:linear-gradient(90deg, transparent, #fff 45%, var(--red) 55%, transparent);
  transform:rotate(-16deg); transform-origin:center;
  box-shadow:0 0 18px rgba(224,20,20,.8);
  animation:swipe 3.2s ease-in-out infinite;
}
@keyframes swipe {
  0%,100% { opacity:0; transform:rotate(-16deg) translateX(-30%); }
  45% { opacity:0; }
  55% { opacity:1; }
  70% { opacity:1; transform:rotate(-16deg) translateX(20%); }
  85% { opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .gameband__steak,.gameband__bomb,.gameband__blade { animation:none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav { gap:18px; }
  .nav a { font-size:14px; letter-spacing:1.2px; }
  .header-cta .btn--ghost { display:none; }
  body.nav-open .header-cta .btn--ghost { display:flex; }
}
@media (max-width:1080px){
  .footer-grid { grid-template-columns:1fr 1fr; }
}
/* mobile bottom action bar — thumb-reachable, app-style */
.mobilebar { display:none; }
@media (max-width:960px){
  body.has-mobilebar { padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  .mobilebar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    height:var(--mbar-h); padding-bottom:env(safe-area-inset-bottom);
    background:rgba(11,11,11,.92); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.4);
  }
  body.nav-open .mobilebar, body.call-open .mobilebar { display:none; }
  .mobilebar a {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
    letter-spacing:1.2px; font-size:14px; color:#fff;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .mobilebar a:active { background:rgba(255,255,255,.06); }
  .mobilebar a.mobilebar__primary { background:var(--red); }
  .mobilebar a.mobilebar__primary:active { background:var(--red-600); }
  .mobilebar__divider { width:1px; background:var(--line); margin:12px 0; }

  /* call picker — native action-sheet, pick a branch to ring */
  .callsheet-backdrop {
    display:none; position:fixed; inset:0; z-index:58;
    background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s var(--ease);
  }
  body.call-open .callsheet-backdrop { display:block; opacity:1; }
  body.call-open { overflow:hidden; }

  .callsheet {
    position:fixed; left:0; right:0; bottom:0; z-index:59;
    background:var(--panel); border-radius:16px 16px 0 0;
    padding:10px 20px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(110%); transition:transform .32s var(--ease);
    box-shadow:0 -10px 40px rgba(0,0,0,.55);
  }
  body.call-open .callsheet { transform:translateY(0) !important; }
  .callsheet__handle { width:40px; height:4px; background:var(--line); border-radius:2px; margin:8px auto 16px; }
  .callsheet h3 {
    font-size:20px; text-align:center; margin-bottom:6px;
    letter-spacing:.5px;
  }
  .callsheet__row {
    display:flex; justify-content:space-between; align-items:center;
    padding:17px 4px; border-top:1px solid var(--line);
    font-family:"Oswald",sans-serif;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .callsheet__row span { text-transform:uppercase; letter-spacing:1.5px; font-size:14px; color:var(--muted); }
  .callsheet__row b { font-family:"Anton",sans-serif; font-size:19px; color:#fff; letter-spacing:.4px; }
  .callsheet__row:active { background:var(--panel-2); }
  .callsheet__cancel {
    display:block; width:100%; margin-top:16px; padding:15px;
    background:var(--panel-2); border:none; border-radius:10px;
    font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1.4px;
    font-size:14px; color:#fff; text-align:center;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .callsheet__cancel:active { background:var(--line); }

  /* single-file app build: one shared bar, hidden on views that don't want it */
  body:has(#v-game.is-active) .mobilebar,
  body:has(#v-reservations.is-active) .mobilebar { display:none; }
  body.has-mobilebar:has(#v-game.is-active),
  body.has-mobilebar:has(#v-reservations.is-active) { padding-bottom:0; }
}

/* mobile nav backdrop */
.nav-backdrop {
  display:none; position:fixed; inset:0; z-index:44;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .3s var(--ease);
}
body.nav-open .nav-backdrop { display:block; opacity:1; }

@media (max-width:960px){
  :root { --header-h:66px; }
  .nav, .header-cta { display:none; }
  .navtoggle { display:block; }
  body.nav-open { overflow:hidden; }
  .nav {
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:var(--black); flex-direction:column; align-items:stretch;
    gap:0; padding:10px 0 20px; border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .3s var(--ease); z-index:45;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav { transform:translateY(0); display:flex; }
  .nav a { padding:16px 22px; border-bottom:1px solid var(--line); font-size:17px; }
  .nav a:active { background:var(--panel); }
  .nav a::after { display:none; }
  body.nav-open .header-cta {
    display:flex; position:fixed; left:0; right:0; top:calc(var(--header-h) + 262px);
    padding:16px 22px; gap:12px; z-index:45; background:var(--black);
  }
  body.nav-open .header-cta .btn { flex:1; }
  .foodgrid { grid-template-columns:1fr 1fr; }
  .offergrid { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1fr; }
  .split--rev .split__media { order:0; }
  .split__body { padding:40px 28px; }
  .loc-grid, .contact-grid { grid-template-columns:1fr; }
  .section { padding:64px 0; }
  .gameband__inner { grid-template-columns:1fr; text-align:center; }
  .gameband__text p { margin-left:auto; margin-right:auto; }
  .gameband__art { order:-1; height:180px; }
}
@media (max-width:560px){
  body { font-size:16px; }
  .foodgrid { grid-template-columns:1fr; }
  .offergrid { grid-template-columns:1fr; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .hero__actions .btn { width:100%; }
  .signup { flex-direction:column; }
  .brand__txt { display:none; }
  .buildcard { grid-template-columns:1fr; text-align:center; }
  .buildcard img { margin:0 auto; }
  .footer-grid { grid-template-columns:1fr; }
  .mitem__price { font-size:20px; }
  .brand__txt { font-size:22px; }
}