/* =========================================================
   The Best Family Pizza & More — Cross City, FL
   Palette pulled from the logo: Puerto Rican flag red + cobalt
   blue, black field, white, fire-orange accents. Locked dark theme.
   ========================================================= */

:root {
  /* brand */
  --red:        #e01e2b;   /* flag red  */
  --red-deep:   #b3121e;
  --blue:       #0a55b0;   /* flag blue */
  --blue-bright:#1f74d8;
  --fire-1:     #ff7a18;   /* flame     */
  --fire-2:     #488de8;   /* accent — matches the blue in the logo/hero graphic */

  /* surfaces */
  --ink:        #0c0a0d;   /* near-black field */
  --ink-2:      #141118;
  --ink-3:      #1c1822;
  --line:       rgba(255,255,255,.10);

  /* text */
  --white:      #f8f5f1;
  --muted:      #b6aeb6;

  --maxw: 1180px;
  --nav-maxw: 1560px; /* nav gets more breathing room than section content so
                          the links/logo/CTA aren't stranded far from the
                          edges on wide screens, leaving a black void */
  --radius: 16px;
  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 84px; /* fallback; script.js sets the real measured nav height */

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --font-script: "Caveat", cursive;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 9vw, 120px); }

/* ---------- shared type ---------- */
.eyebrow {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.section__head { max-width: 640px; margin-bottom: 56px; }
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.section__lead { color: var(--muted); font-size: 1.08rem; margin-top: 18px; max-width: 56ch; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .98rem;
  padding: 13px 26px; border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary {
  background: var(--red); color: #fff;
  box-shadow: 0 10px 28px -10px rgba(224,30,43,.7);
}
.btn--primary:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0) scale(.98); }
.btn--ghost {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-2px); }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn--sm { padding: 9px 18px; font-size: .85rem; }

/* =========================================================
   NAV
   ========================================================= */
/* Starts transparent (a soft gradient for legibility over the hero) and
   fades to a solid black bar once scrolled — .nav.is-scrolled is toggled by
   script.js's onScroll(). The logo + padding shrink at the same time via
   the same class, so the whole bar visibly condenses. .nav.is-open (the
   mobile dropdown) gets the same solid treatment so the panel never opens
   on top of a see-through bar. No border-bottom on the transparent state —
   a hairline border under a translucent gradient produced a visible seam
   at the nav's edge in some browsers, hence box-shadow doing all the work
   for the "solid" cue instead. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 70%, transparent 100%);
  transition: background .4s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-scrolled,
.nav.is-open {
  background: #000;                       /* pure black: the logo's black background blends in seamlessly */
  box-shadow: 0 12px 34px -18px rgba(0,0,0,.95);
}
/* Flex row nav; the logo is absolutely centered on top of it. #navLinks,
   .nav__spacer and .nav__right are three flex items — justify-content:center
   groups them as a single centered cluster (rather than stretching links
   flush to the far-left edge and the CTA flush to the far-right edge on
   wide screens), with .nav__spacer reserving a fixed clearance gap in the
   middle for the logo so the links/CTA don't crowd right up against it.
   On mobile, the links become a position:absolute dropdown and the spacer
   is hidden (see media query), leaving just the burger + .nav__right —
   those two switch back to justify-content:space-between there so they
   dock to opposite edges instead of huddling in the center. */
.nav__inner {
  max-width: var(--nav-maxw); margin-inline: auto;
  padding: 14px 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  /* min-height gives the (absolutely positioned, vertically centered) logo
     enough room to fully fit inside the bar — without this, a logo taller
     than the flex row's natural height gets centered relative to a too-short
     box and its top half pokes up above the viewport, getting clipped by
     the browser chrome. */
  min-height: 112px;
  transition: padding .4s var(--ease), min-height .4s var(--ease);
}
.nav.is-scrolled .nav__inner { padding-block: 8px; min-height: 60px; }
/* Deliberately oversized while unscrolled — it's meant to overhang the thin
   transparent bar and sit on top of the hero, then snap down to fit neatly
   inside the solid bar on scroll so the shrink actually reads. */
.nav__logo { height: 96px; width: auto; transition: height .4s var(--ease); }
.nav.is-scrolled .nav__logo { height: 40px; }
.nav__brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.nav__brand-text { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .02em; }
.nav__brand-text strong { color: var(--red); }

.nav__links { order: 1; display: flex; align-items: center; gap: 24px; min-width: 0; }
.nav__links > a {
  font-weight: 600; font-size: .98rem; color: var(--white); opacity: .85;
  transition: opacity .2s, color .2s;
  white-space: nowrap;
}
.nav__links > a:hover { opacity: 1; color: var(--fire-2); }

/* Reserves clearance for the centered logo — see the .nav__inner comment
   above. Widening this pushes the whole centered group (links + spacer +
   right cluster) further apart, which — since the group as a whole stays
   centered — pulls the links further left and the right cluster further
   right, away from the logo. */
.nav__spacer { order: 2; flex: 0 0 auto; width: 280px; }

.nav__right { order: 3; display: flex; align-items: center; gap: 32px; }

/* Circular outline icon buttons for the socials — subtle translucent ring
   over the hero/nav, filling in on hover. Desktop only (see the mobile
   media query below), matching the reference: hamburger/logo/CTA only on
   small screens, socials only show up once there's room for them. */
.nav__social { display: flex; align-items: center; gap: 14px; }
.nav__social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.05);
  color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.nav__social-btn svg { width: 20px; height: 20px; }
.nav__social-btn:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}

/* CTA styled as a solid white pill/rect button (like the reference's
   "BOOK NOW"), rather than the red brand button used elsewhere on the page. */
.nav__cta {
  flex-shrink: 0;
  padding: 14px 28px;
  background: var(--white); color: var(--ink);
  border-radius: 10px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: none;
}
.nav__cta:hover { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(255,255,255,.3); }

.nav__burger {
  order: 0;
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 6px;
}
.nav__burger span { width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
/* Fixed/pinned hero — the page content (.curtain) scrolls up and over it. */
.hero {
  position: fixed; inset: 0; z-index: 1;
  height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--nav-h) + 24px) 24px 64px;
  overflow: hidden;
}
.curtain {
  position: relative; z-index: 2;
  margin-top: 100dvh;
  background: var(--ink);
}

/* Scroll-driven hero animation: background zooms, content lifts + fades as the
   curtain rises over it. Gated so unsupported browsers simply get the static reveal. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media {
      animation: heroZoom linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100dvh;
    }
    .hero__content {
      animation: heroLift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 78dvh;
    }
  }
}
@keyframes heroZoom { to { transform: scale(1.18); } }
@keyframes heroLift {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-72px); }
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background:
    var(--ink-2)
    url('assets/hero.jpg')
    center/cover no-repeat;
  transform: scale(1.04);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(12,10,13,.12) 0%, rgba(12,10,13,.42) 72%, rgba(12,10,13,.62) 100%),
    linear-gradient(to bottom, rgba(12,10,13,.34), rgba(12,10,13,.06) 42%, rgba(12,10,13,.55));
}
.hero__content { position: relative; z-index: 2; max-width: 880px; }
.hero__eyebrow {
  font-weight: 700; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--white); margin-bottom: 0;
}
.hero__pre { font-family: var(--font-script); font-size: clamp(2rem, 5vw, 3rem); color: var(--white); line-height: .9; margin-bottom: -4px; }
.hero__title {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; line-height: .86; letter-spacing: .01em;
  font-size: clamp(3.4rem, 12vw, 8rem);
  text-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.hero__title-accent {
  color: var(--red);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 38px rgba(224,30,43,.45), 0 8px 40px rgba(0,0,0,.5);
}
.hero__city {
  font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .42em;
  font-size: clamp(.85rem, 2vw, 1.15rem);
  margin-top: 18px; color: var(--white);
  padding-left: .42em; /* offset tracking */
}
.hero__title-wrap { margin: 0; }
.hero__title-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(380px, 64vw);
  max-height: 40vh;
  margin: 24px auto 0;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.55));
}
.hero__slogan {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--white);
  text-shadow: 0 6px 28px rgba(0,0,0,.55);
  text-align: center;
  line-height: 1.3;
  margin-top: 24px;
}
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* =========================================================
   STRIP (flag accent + offerings)
   ========================================================= */
.strip { position: relative; background: var(--ink-2); border-block: 1px solid var(--line); }
.strip__flag {
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0 33%, #fff 33% 66%, var(--blue) 66% 100%);
}
.strip__list {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 22px; padding: 22px 24px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(.95rem, 2vw, 1.4rem);
}
.strip__sep { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* =========================================================
   MENU / BENTO
   ========================================================= */
.menu { background: var(--ink); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 230px; grid-column: span 2;
  display: flex; align-items: flex-end;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  isolation: isolate;
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform .6s var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,6,9,.94) 8%, rgba(8,6,9,.45) 55%, rgba(8,6,9,.1) 100%);
}
.tile:hover::before { transform: scale(1.06); }
.tile--feature { grid-column: span 2; grid-row: span 2; min-height: 480px; }
.tile--wide { grid-column: span 4; min-height: 280px; }

.tile__body { padding: 26px 28px; }
.tile__tag {
  display: inline-block; font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--red); color: #fff; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.tile__tag--blue { background: var(--blue); }
.tile__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.tile--feature .tile__name { font-size: clamp(2rem, 4vw, 3rem); }
.tile__desc { color: #ded7dd; margin-top: 8px; max-width: 42ch; font-size: .98rem; }
.tile__price {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-display); color: var(--white);
  font-size: 1.35rem; letter-spacing: .02em;
}

.menu__note { text-align: center; margin-top: 40px; color: var(--muted); font-size: 1.1rem; }
.menu__note a { color: var(--fire-2); font-family: var(--font-display); letter-spacing: .02em; }

/* ---- Tabbed menu ---- */
.menu-tabs {
  position: sticky; top: var(--nav-h); z-index: 30;
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 16px 0; margin-bottom: 18px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.menu-tab {
  font-family: var(--font-body); font-weight: 700; font-size: .92rem;
  color: var(--muted); background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.menu-tab:hover { color: var(--white); transform: translateY(-1px); }
.menu-tab.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.menu-tab:focus-visible { outline: 2px solid var(--fire-2); outline-offset: 2px; }

.menu-panel { display: none; }
.menu-panel.is-active { display: block; animation: panelIn .4s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Menu photo strip (single photo or scrolling carousel) ---- */
.menu-photos {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--fire-2) transparent;
}
.menu-photos::-webkit-scrollbar { height: 7px; }
.menu-photos::-webkit-scrollbar-track { background: transparent; }
.menu-photos::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.menu-photos::-webkit-scrollbar-thumb:hover { background: var(--fire-2); }
.menu-photos__item {
  flex: 0 0 auto; width: 240px; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.7);
}
.menu-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-photos--single .menu-photos__item { width: min(340px, 100%); }

.menu-group { margin-top: 34px; }
.menu-panel > .menu-group:first-child { margin-top: 4px; }
.menu-group__title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.5rem; color: var(--white);
  padding-bottom: 8px; border-bottom: 2px solid var(--red); display: inline-block;
}
.menu-group__until {
  font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: .8rem; color: var(--fire-2); margin-left: 8px;
}
.menu-group__note { color: var(--muted); font-size: .92rem; margin-top: 12px; max-width: 64ch; }

.menu-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.menu-row__main { min-width: 0; }
.menu-row__name { font-weight: 600; color: var(--white); font-size: 1.05rem; }
.menu-row__qty { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: 4px; }
.menu-row__desc { display: block; color: var(--muted); font-size: .88rem; margin-top: 3px; max-width: 62ch; }
.menu-row__price { font-family: var(--font-display); color: var(--white); font-size: 1.2rem; white-space: nowrap; }

/* price matrix */
.pricetable-wrap { overflow-x: auto; margin-top: 16px; -webkit-overflow-scrolling: touch; }
.pricetable { width: 100%; border-collapse: collapse; min-width: 520px; }
.pricetable th, .pricetable td { padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: right; }
.pricetable thead th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.pricetable thead th:first-child, .pricetable tbody th { text-align: left; }
.pricetable tbody th { font-weight: 600; color: var(--white); font-size: 1.02rem; max-width: 280px; }
.pricetable tbody th small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; margin-top: 2px; white-space: normal; }
.pricetable tbody td { font-family: var(--font-display); color: var(--white); font-size: 1.05rem; }
.pricetable tbody tr:hover { background: rgba(255,255,255,.03); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.chip {
  font-size: .85rem; color: var(--white); background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}

.menu-foot-note { text-align: center; margin-top: 40px; color: var(--muted); font-size: 1.1rem; }
.menu-foot-note a { color: var(--fire-2); font-family: var(--font-display); letter-spacing: .02em; }

/* No mobile override here anymore — .menu-tabs just inherits top:var(--nav-h)
   from the base rule. It used to hardcode top:64px, which went stale once
   the nav's actual mobile height became dynamic (it shrinks/grows with
   scroll), leaving a gap under the nav where the menu photos peeked
   through before the sticky tabs caught up. */
@media (prefers-reduced-motion: reduce) {
  .menu-panel.is-active { animation: none; }
}

/* =========================================================
   STORY
   ========================================================= */
.story { background: var(--ink-2); }
.story__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.story__media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 460px;
  background: var(--ink-3);
}
/* Self-scrolling photo carousel: 4 images crossfade on an infinite loop,
   each offset by a negative delay so they take turns without any JS or
   user interaction. */
.story__slide {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  /* 3 slides now (was 4) — duration = stagger(4s) × slide count, so each
     photo still gets the same ~4s hold before crossfading to the next. */
  animation: storyFade 12s var(--ease) infinite;
}
.story__slide:nth-child(1) { animation-delay: 0s; }
.story__slide:nth-child(2) { animation-delay: -4s; }
.story__slide:nth-child(3) { animation-delay: -8s; }
@keyframes storyFade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}
.story__flag {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; z-index: 1;
  background: linear-gradient(90deg, var(--red) 0 33%, #fff 33% 66%, var(--blue) 66% 100%);
}
.story__text p { color: var(--muted); margin-top: 16px; font-size: 1.08rem; max-width: 52ch; }
.story__text .btn { margin-top: 28px; }

/* =========================================================
   REVIEWS — single-quote slider
   ========================================================= */
.reviews { background: var(--ink); }
.reviews2 { max-width: 900px; text-align: center; margin-inline: auto; }
.reviews2__eyebrow {
  font-weight: 700; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red);
}
.reviews2__title {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; line-height: .96;
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-top: 10px;
}
.reviews2__divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 26px 0;
}
.reviews2__divider span { width: 90px; height: 1px; background: var(--line); }
.reviews2__divider i { font-style: normal; color: var(--red); font-size: 1.1rem; }

.reviews2__stars { color: var(--red); font-size: 1.3rem; letter-spacing: 6px; margin-bottom: 30px; }

.reviews2__track { position: relative; min-height: 180px; }
.reviews2__slide { display: none; }
.reviews2__slide.is-active { display: block; animation: reviewFade .5s var(--ease) both; }
@keyframes reviewFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.reviews2__quote {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.5; color: var(--white);
  max-width: 46ch; margin-inline: auto;
}
.reviews2__meta {
  margin-top: 26px; color: var(--muted);
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.reviews2__nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 44px;
}
.reviews2__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--white); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.reviews2__arrow:hover { background: var(--ink-3); border-color: var(--fire-2); transform: translateY(-1px); }
.reviews2__dots {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 9px; max-width: 380px;
}
.reviews2__dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--red); background: transparent; padding: 0;
  cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease);
}
.reviews2__dot.is-active { background: var(--red); transform: scale(1.15); }
.reviews2__dot:hover { background: var(--red); opacity: .7; }

@media (max-width: 640px) {
  .reviews2__divider span { width: 50px; }
  .reviews2__dots { max-width: 240px; }
}

/* =========================================================
   ORDER BAND
   ========================================================= */
.band {
  background:
    linear-gradient(120deg, rgba(12,10,13,.2), rgba(12,10,13,0)),
    linear-gradient(90deg, var(--fire-1), var(--red) 70%);
  color: #fff;
}
.band__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-block: clamp(40px, 6vw, 64px);
}
.band__kicker { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; font-size: .82rem; opacity: .9; }
.band__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .95; font-size: clamp(1.8rem, 4vw, 3rem); margin-top: 8px; }
.band__phone {
  font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: .01em; color: #fff;
  text-shadow: 0 6px 24px rgba(0,0,0,.3);
  transition: transform .25s var(--ease);
}
.band__phone:hover { transform: scale(1.03); }

/* =========================================================
   VISIT
   ========================================================= */
.visit { background: var(--ink); }
.visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.hours { margin-top: 8px; border-top: 1px solid var(--line); }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
}
.hours li span:first-child { color: var(--white); font-weight: 600; }
.hours li span:last-child { color: var(--muted); }
.hours__closed { color: var(--red) !important; font-weight: 700; }
.visit__addr { color: var(--muted); font-size: 1.15rem; margin-top: 6px; line-height: 1.7; }
.visit__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* Address + buttons sit beside the embedded map; wraps to stacked on
   narrow widths since it's already inside the .visit__grid column that
   itself collapses to one column at <=900px. */
.visit__find { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-top: 6px; }
.visit__find-text { flex: 1 1 220px; min-width: 220px; }
.visit__find-text .visit__addr { margin-top: 0; }
.visit__map {
  flex: 1 1 260px; min-width: 240px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
}
.visit__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { background: #000; border-top: 1px solid var(--line); padding-top: 64px; }
.foot__inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 44px; }
.foot__logo { height: 172px; width: auto; margin-bottom: 18px; }
.foot__brand-text { font-family: var(--font-display); font-size: 1.4rem; }
.foot__brand-text strong { color: var(--red); }
.foot__tag { color: var(--muted); max-width: 34ch; margin-top: 10px; }
.foot__links { display: flex; flex-direction: column; gap: 12px; }
.foot__links a { color: var(--muted); font-weight: 600; transition: color .2s; }
.foot__links a:hover { color: var(--fire-2); }

.foot__contact { display: flex; flex-direction: column; gap: 14px; }
.foot__contact .eyebrow { margin-bottom: 2px; }
.foot__contact-row {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--white); font-weight: 600;
  transition: color .2s;
}
.foot__contact-row:hover { color: var(--fire-2); }
.foot__contact-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--muted);
  transition: color .2s;
}
.foot__contact-row:hover .foot__contact-icon { color: var(--fire-2); }
.foot__bar {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 22px; border-top: 1px solid var(--line);
  color: #6f6670; font-size: .9rem;
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile--feature, .tile--wide { grid-column: span 2; grid-row: auto; min-height: 240px; }
  .tile--feature { min-height: 320px; }
  .story__grid, .visit__grid { grid-template-columns: 1fr; }
  .story__media { min-height: 320px; }
}

/* Mobile nav: hamburger (left) — centered logo — CTA (right), matching the
   reference. .nav__links switches from a plain row to a position:absolute
   dropdown column here; the social icons are hidden entirely on mobile
   (also matching the reference), leaving the CTA as the only thing pinned
   top-right. */
@media (max-width: 720px) {
  .nav__inner { padding: 10px 16px; gap: 12px; min-height: 78px; justify-content: space-between; }
  .nav__logo { height: 66px; }
  .nav.is-scrolled .nav__inner { padding-block: 6px; min-height: 44px; }
  .nav.is-scrolled .nav__logo { height: 28px; }

  /* var(--nav-h) only reflects the nav bar's own measured box — it doesn't
     account for the logo visually overhanging below that box (deliberate,
     see .nav__logo comments above), so on mobile the hero's eyebrow text
     was sitting right up against the bottom of the overhanging logo. Extra
     buffer here on top of the usual +24px gives it real breathing room. */
  .hero { padding-top: calc(var(--nav-h) + 56px); }

  .nav__burger { display: flex; }
  .nav__social { display: none; }
  .nav__spacer { display: none; }

  .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap;
    position: absolute; top: 100%; left: 0; right: 0;
    gap: 2px;
    background: #000;
    border-bottom: 1px solid var(--line);
    padding: 0 20px; margin: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s var(--ease), opacity .25s var(--ease), padding .3s var(--ease);
  }
  .nav.is-open .nav__links {
    max-height: 360px; opacity: 1;
    padding: 12px 20px 20px;
  }
  .nav__links > a {
    width: 100%; font-size: .95rem; padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .nav__cta { padding: 9px 16px; font-size: .74rem; }

  .band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile--feature, .tile--wide { grid-column: span 1; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tile::before, .hero__media { transition: none; }
  .story__slide { animation: none; opacity: 0; }
  .story__slide:first-child { opacity: 1; }
}