@font-face {
  font-family: 'Bricolage Grotesque';
  src: local('Bricolage Grotesque');
}

:root {
  --black: #111110;
  --cream: #f6efe0;
  --cream-dim: #ece2cd;
  --yellow: #f5c518;
  --chile: #e8402a;
  --line: 3px solid var(--black);
  --ff-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --ff-body: 'DM Sans', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--black);
  font-family: var(--ff-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(17, 17, 16, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(246, 239, 224, 0.12);
}

.nav__logo {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  list-style: none;
}

.nav__links a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav__links a:hover::after { transform: scaleX(1); }

.nav__links { display: none; }
@media (min-width: 780px) {
  .nav__links { display: flex; }
}

/* ---------- HERO (scroll-scrubbed video) ---------- */
.hero {
  position: relative;
  height: 400vh;
  background: var(--black);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0.62) saturate(1.05);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.75) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 1.25rem;
  max-width: min(94vw, 64rem);
  width: 100%;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border: var(--line);
  transform: rotate(-2deg);
  margin-bottom: 1.5rem;
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero__title .word {
  display: inline-block;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(-70px) scale(1, 1.4);
}

.hero__title.is-smashed .word {
  animation: smash-in 0.65s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes smash-in {
  0%   { opacity: 0; transform: translateY(-70px) scale(1, 1.4); }
  55%  { opacity: 1; transform: translateY(0) scale(1.06, 0.86); }
  78%  { transform: scale(0.96, 1.06); }
  100% { opacity: 1; transform: scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .word { opacity: 1; transform: none; animation: none; }
}

.hero__sub {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--cream-dim);
}

.hero__scrollcue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--cream);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
}

.hero__scrollcue span {
  width: 1px;
  height: 2.2rem;
  background: var(--cream);
  animation: pulse-line 1.6s ease-in-out infinite;
}

@keyframes pulse-line {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50% { transform: scaleY(0.5); opacity: 1; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border: var(--line);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn--chile {
  background: var(--chile);
  color: var(--cream);
}

.btn--dark {
  background: var(--black);
  color: var(--cream);
}

.btn--ghost {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}

.btn-wrap { position: relative; display: inline-block; }

/* ---------- SECTION SCAFFOLD ---------- */
section { position: relative; }

.section-pad { padding: clamp(4rem, 9vw, 7rem) 0; }

.eyebrow {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chile);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------- STORY ---------- */
.story {
  background: var(--cream);
  border-top: var(--line);
}

.story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  position: relative;
}

@media (min-width: 860px) {
  .story__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
}

.story__text p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  margin-top: 1.25rem;
  max-width: 34rem;
}

.badge-stat {
  position: relative;
  background: var(--black);
  color: var(--cream);
  border: var(--line);
  padding: 2rem;
  transform: rotate(3deg);
  max-width: 20rem;
  margin-left: auto;
  margin-top: 1rem;
}

@media (min-width: 860px) {
  .badge-stat { margin-top: -3rem; margin-right: -1.5rem; }
}

.badge-stat__num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--yellow);
}

.badge-stat__label {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.story__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.tag {
  border: var(--line);
  padding: 0.35rem 0.8rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  background: var(--cream);
}

.tag--yellow { background: var(--yellow); }
.tag--chile { background: var(--chile); color: var(--cream); }

/* ---------- MENU ---------- */
.menu {
  background: var(--black);
  color: var(--cream);
}

.menu .eyebrow { color: var(--yellow); }

/* ---------- MENU 3D GALLERY ---------- */
.menu3d {
  margin-top: 2.75rem;
  position: relative;
}

.menu3d__viewport {
  position: relative;
  width: 100%;
  height: clamp(360px, 46vw, 560px);
  perspective: 1300px;
  perspective-origin: 50% 45%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  border: var(--line);
  border-color: rgba(246, 239, 224, 0.25);
  background: radial-gradient(ellipse at 50% 60%, rgba(245, 197, 24, 0.08), transparent 70%);
}

.menu3d__viewport:active { cursor: grabbing; }
.menu3d__viewport:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.menu3d__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.menu3d__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background: var(--cream);
  color: var(--black);
  border: var(--line);
  overflow: hidden;
  user-select: none;
}

/* Ring cards are image-only: no card-body, so the media fills the card.
   The source photos are landscape stills — "cover" on a tall card crops
   their sides off, so show them uncropped with "contain" instead. */
.menu3d__card-media:only-child {
  height: 100%;
  border-bottom: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--black);
}

.menu3d__card-media {
  height: 130px;
  background-size: cover;
  background-position: center;
  border-bottom: var(--line);
  pointer-events: none;
}

/* ---------- MENU GALLERY (static grid, always visible below the ring) ---------- */
.menu-gallery {
  margin-top: 2.5rem;
}

.menu-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}

.menu-gallery__grid .menu3d__card {
  position: static;
  width: auto;
  height: auto;
}

.menu3d__card-body {
  padding: 1rem 1.1rem 1.1rem;
  pointer-events: none;
}

.menu3d__card-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  line-height: 1.05;
}

.menu3d__card-name .flag {
  display: inline-block;
  background: var(--chile);
  color: var(--cream);
  font-size: 0.6rem;
  font-family: var(--ff-body);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  border-radius: 2px;
}

.menu3d__card-desc {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: rgba(17, 17, 16, 0.65);
}

.menu3d__card-footer {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: auto;
}

.menu3d__price {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.15rem;
}

.menu3d__cta {
  font-size: 0.72rem;
  padding: 0.4rem 0.7rem;
  border-width: 2px;
  white-space: nowrap;
}

.menu3d__hint {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: rgba(246, 239, 224, 0.4);
}

.menu-lists {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(246, 239, 224, 0.2);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .menu-lists { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .menu-lists { grid-template-columns: repeat(4, 1fr); }
}

.menu-lists__title {
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--yellow);
  margin-bottom: 1rem;
}

.menu-lists__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.menu-lists__items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(246, 239, 224, 0.15);
  padding-bottom: 0.6rem;
}

.menu-lists__items li b {
  font-family: var(--ff-display);
  font-weight: 800;
  white-space: nowrap;
}

.menu-lists__col--combo {
  border: var(--line);
  border-color: var(--yellow);
  padding: 1.25rem;
}

.menu-lists__combo {
  font-size: 1rem;
  line-height: 1.5;
}

.menu-lists__combo b {
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--yellow);
  font-size: 1.2rem;
}

.menu__note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: rgba(246,239,224,0.55);
}

/* ---------- REVIEWS ---------- */
.reviews {
  background: var(--cream);
  border-top: var(--line);
  border-bottom: var(--line);
}

.marquee {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__row { overflow: hidden; }

.marquee__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}

.marquee__row--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee__row:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.review-card {
  flex: 0 0 auto;
  width: min(85vw, 320px);
  background: var(--cream);
  border: var(--line);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-card__stars { color: var(--chile); font-size: 1.1rem; letter-spacing: 0.15em; }

.review-card p { font-size: 1.02rem; line-height: 1.45; }

.review-card__author {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__row { overflow-x: auto; }
}

/* ---------- LOCATION ---------- */
.location {
  background: var(--black);
  color: var(--cream);
}

.location__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .location__grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

.location__list {
  list-style: none;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.location__list li {
  display: flex;
  gap: 0.9rem;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(246,239,224,0.2);
  padding-bottom: 1.1rem;
}

.location__list b { display: block; font-family: var(--ff-display); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--yellow); margin-bottom: 0.2rem; }

.location__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.map-embed {
  border: var(--line);
  background: var(--cream);
  padding: 0.6rem;
  transform: rotate(-1deg);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 32vw, 420px);
  border: 0;
  filter: grayscale(0.15) contrast(1.05);
}

/* ---------- FOOTER CTA ---------- */
.final-cta {
  background: var(--yellow);
  color: var(--black);
  text-align: center;
}

.final-cta .section-title { max-width: 40rem; margin: 0 auto; }
.final-cta p { margin-top: 1rem; font-size: 1.1rem; }
.final-cta .btn-wrap { margin-top: 2.2rem; }

footer {
  background: var(--black);
  color: rgba(246,239,224,0.6);
  padding: 2.5rem 0;
  font-size: 0.85rem;
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.footer__links { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; }
.footer__links a { color: rgba(246,239,224,0.75); text-decoration: none; }
.footer__links a:hover { color: var(--yellow); }

/* ---------- REVEAL UTILITY ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scrollcue span { animation: none; }
}