.hero {
  --hero-image-2: none;
  --hero-image-3: none;
  isolation: isolate;
  padding-bottom: 160px;
}

.hero > * { position: relative; z-index: 2; }
.hero-slide-media { display: none; }
.hero-slide-cta { display: inline-flex; width: fit-content; margin-top: 18px; padding: 13px 22px; border-radius: 10px; text-decoration: none; font-weight: 950; }
.hero-slide-cta[hidden] { display: none !important; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: transform .7s ease, opacity .5s ease;
}

.hero-dots {
  position: absolute;
  z-index: 8;
  bottom: 124px;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0;
}
.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #ffffff66;
  box-shadow: 0 2px 8px #0008;
  transition: width .25s ease, background .25s ease;
}
.hero-dots button.active { width: 30px; background: #fff; }

.hero-action-dock {
  position: absolute;
  z-index: 7;
  right: var(--restaurant-site-gutter,clamp(18px,3vw,56px));
  bottom: 24px;
  left: var(--restaurant-site-gutter,clamp(18px,3vw,56px));
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.hero .hero-action-dock > * {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 2px 10px;
  padding: 14px 16px;
  border: 1px solid #ffffffb8;
  border-radius: 15px;
  background: #fff;
  color: #09243d;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 14px 34px #00182d42;
  backdrop-filter: blur(12px);
}
.hero .hero-action-dock > *:hover { transform: translateY(-3px); box-shadow: 0 18px 40px #00182d59; }
.hero-action-dock > * > span:first-child { grid-row: 1 / 3; align-self: center; font-size: 25px; }
.hero-action-dock b { overflow-wrap: anywhere; font-size: 15px; }
.hero-action-dock .action-label-mobile { display: none; }
.hero-action-dock small { color: #52697a; font-size: 11px; letter-spacing: 0; }

/* 1. Cinematic — the polished full-photo default. */
.hero[data-cover-layout="cinematic"] {
  background-image: linear-gradient(90deg,#06192ded 4%,#06192d83 52%,#06192d28 82%),var(--hero-image);
}

/* 2. Editorial — copy and imagery read like a magazine opening spread. */
.hero[data-cover-layout="editorial"] {
  grid-template-columns: minmax(320px,.82fr) minmax(0,1.18fr);
  background-color: var(--header-bg,#0b2d49);
  background-image: linear-gradient(90deg,var(--header-bg,#0b2d49) 0 43%,#07131d 58%);
}
.hero[data-cover-layout="editorial"]::before {
  inset: 0 0 0 42%;
  opacity: 1;
  background: var(--hero-image) center/cover no-repeat;
}
.hero[data-cover-layout="editorial"] .hero-copy {
  padding: clamp(22px,3vw,48px);
  border-left: 3px solid var(--button-bg,#1976c9);
  background: color-mix(in srgb,var(--header-bg,#0b2d49) 78%,transparent);
}

/* 3. Glass lounge — a blurred, luminous content panel. */
.hero[data-cover-layout="glass"] {
  place-items: center;
  grid-template-columns: minmax(0,900px);
  background-image: linear-gradient(135deg,#03111a7d,#06192d3a),var(--hero-image);
}
.hero[data-cover-layout="glass"] .hero-copy {
  width: min(900px,100%);
  max-width: none;
  padding: clamp(28px,5vw,64px);
  border: 1px solid #ffffff66;
  border-radius: 32px;
  background: linear-gradient(135deg,#071a2dcc,#ffffff1e);
  box-shadow: 0 35px 90px #0008,inset 0 1px #fff8;
  backdrop-filter: blur(18px) saturate(130%);
}

/* 4. Story slideshow — coordinated words and imagery rotate above a fixed action dock. */
.hero[data-cover-layout="spotlight"] {
  min-height: clamp(650px,72vh,790px);
  display: block;
  padding-top: 0;
  padding-bottom: 146px;
  overflow: hidden;
  background: var(--header-bg,#0b2d49);
  color: var(--hero-slide-text,#fff);
}
.hero[data-cover-layout="spotlight"]::before,
.hero[data-cover-layout="spotlight"]::after { display: none; }
.hero[data-cover-layout="spotlight"] .hero-slide-media {
  position: absolute;
  z-index: 0;
  inset: 0 0 136px;
  display: block;
  overflow: hidden;
  background: #07131d;
}
.hero[data-cover-layout="spotlight"] .hero-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,#020b14ed 0%,#04111db8 29%,#04111d4d 53%,#04111d0a 78%);
}
.hero[data-cover-layout="spotlight"] .hero-slide-media span {
  position: absolute;
  inset: 0;
  background-image: var(--hero-desktop-image);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .8s ease,transform 5.4s ease;
}
.hero[data-cover-layout="spotlight"] .hero-slide-media span.active { opacity: 1; transform: scale(1); }
.hero[data-cover-layout="spotlight"] .hero-copy {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: start;
  width: min(680px,52%);
  min-height: 514px;
  max-width: none;
  padding: clamp(58px,7vw,104px) 0 54px;
  color: var(--hero-slide-text,#fff);
  text-shadow: 0 3px 18px #000b;
}
.hero[data-cover-layout="spotlight"] .hero-copy h1 { max-width: 10ch; color: inherit; text-wrap: balance; }
.hero[data-cover-layout="spotlight"] .hero-copy > p,
.hero[data-cover-layout="spotlight"] .hero-brand,
.hero[data-cover-layout="spotlight"] .office-hours-inline,
.hero[data-cover-layout="spotlight"] .hero-address { display: none; }
.hero[data-cover-layout="spotlight"] .hero-brand small { color: var(--hero-slide-accent,#ffc928); }
.hero[data-cover-layout="spotlight"] .hero-slide-cta { background: var(--hero-slide-accent,#ffc928); color: var(--hero-slide-button-text,#111); text-shadow: none; box-shadow: 0 12px 28px #0005; }
.hero[data-cover-layout="spotlight"] .hero-slide-cta:hover { transform: translateY(-2px); box-shadow: 0 17px 34px #0007; }
.hero[data-cover-layout="spotlight"] .hero-action-dock {
  bottom: 20px;
}
.hero[data-cover-layout="spotlight"] .hero-dots { bottom: 157px; left: 50%; transform: translateX(-50%); }

/* 5. Floating bento — image cards cross the cover edge into the page below. */
.hero[data-cover-layout="bento"] {
  min-height: 620px;
  margin-bottom: 92px;
  overflow: visible;
  grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr);
  background: linear-gradient(125deg,var(--header-bg,#0b2d49),#06131d);
}
.hero[data-cover-layout="bento"]::before,
.hero[data-cover-layout="bento"]::after {
  top: 9%;
  bottom: -68px;
  opacity: 1;
  border: 8px solid #fff;
  border-radius: 28px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 70px #001a2d66;
}
.hero[data-cover-layout="bento"]::before { right: 24%; width: 29%; background-image: var(--hero-image-2,var(--hero-image)); transform: translateY(34px); }
.hero[data-cover-layout="bento"]::after { right: 3%; width: 25%; background-image: var(--hero-image-3,var(--hero-image)); transform: translateY(-12px); }

/* 6. 3D showcase — perspective cards create depth without a plugin or canvas. */
.hero[data-cover-layout="dimension"] {
  min-height: 650px;
  margin-bottom: 105px;
  overflow: visible;
  grid-template-columns: minmax(0,.76fr) minmax(500px,1.24fr);
  background: radial-gradient(circle at 75% 42%,color-mix(in srgb,var(--button-bg,#1976c9) 38%,transparent),transparent 32%),linear-gradient(125deg,var(--header-bg,#0b2d49),#06131d 72%);
  perspective: 1200px;
}
.hero[data-cover-layout="dimension"]::before,
.hero[data-cover-layout="dimension"]::after {
  width: 30%;
  height: 78%;
  top: 9%;
  opacity: 1;
  border: 7px solid #fff;
  border-radius: 26px;
  background-position: center;
  background-size: cover;
  box-shadow: 24px 38px 70px #0008;
  transform-style: preserve-3d;
}
.hero[data-cover-layout="dimension"]::before { right: 29%; background-image: var(--hero-image-2,var(--hero-image)); transform: rotateY(-22deg) rotateZ(-3deg) translateY(62px); }
.hero[data-cover-layout="dimension"]::after { right: 4%; background-image: var(--hero-image-3,var(--hero-image)); transform: rotateY(-19deg) rotateZ(4deg) translateY(-8px); }

@media (max-width: 1100px) {
  .hero[data-cover-layout] { grid-template-columns: minmax(0,1fr); min-height: 520px; }
  .hero[data-cover-layout="editorial"]::before { inset: 0; opacity: .55; }
  .hero[data-cover-layout="editorial"] .hero-copy { background: #071a2dcc; }
  .hero[data-cover-layout="spotlight"] .hero-copy { width: min(560px,58%); }
  .hero[data-cover-layout="bento"],.hero[data-cover-layout="dimension"] { margin-bottom: 74px; overflow: visible; }
  .hero[data-cover-layout="bento"]::before,.hero[data-cover-layout="dimension"]::before { left: 8%; right: auto; top: auto; bottom: -56px; width: 40%; height: 180px; transform: rotate(-3deg); }
  .hero[data-cover-layout="bento"]::after,.hero[data-cover-layout="dimension"]::after { right: 8%; top: auto; bottom: -56px; width: 40%; height: 180px; transform: rotate(3deg); }
}

@media (max-width: 760px) {
  :root { --mobile-action-dock-height: 82px; }
  body:not(.owner-mode):not(.dedicated-menu-page) { padding-bottom: calc(var(--mobile-action-dock-height) + env(safe-area-inset-bottom)); }
  body:not(.owner-mode):not(.dedicated-menu-page) .hero { z-index: 20; }
  .owner-mode .hero-action-dock { display: none !important; }
  .hero { padding-bottom: 0; }
  .hero-dots { bottom: 18px; }
  .hero-action-dock {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 6px;
    overflow: visible;
    padding: 7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
    background: var(--header-bg,#0b2d49);
    box-shadow: 0 -8px 28px #00182d45;
  }
  .hero .hero-action-dock > * {
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 1px;
    padding: 7px 3px;
    border-radius: 10px;
    text-align: center;
  }
  .hero .hero-action-dock > *:hover { transform: none; }
  .hero-action-dock > * > span:first-child { grid-row: auto; font-size: 21px; line-height: 1; }
  .hero-action-dock b { max-width: 100%; font-size: 11px; line-height: 1.05; }
  .hero-action-dock .action-label-desktop { display: none; }
  .hero-action-dock .action-label-mobile { display: inline; }
  .hero-action-dock small { display: none; }
  .hero[data-cover-layout="glass"] .hero-copy { border-radius: 22px; padding: 24px 18px; }
  .hero[data-cover-layout="spotlight"] { min-height: clamp(520px,calc(100svh - 168px),680px); padding: 0; }
  .hero[data-cover-layout="spotlight"] .hero-action-dock { inset: auto 0 0; }
  .hero[data-cover-layout="spotlight"] .hero-slide-media { inset: 0; }
  .hero[data-cover-layout="spotlight"] .hero-slide-media span {
    background-image: var(--hero-mobile-image,var(--hero-desktop-image));
    background-position: center;
    background-size: cover;
  }
  .hero[data-cover-layout="spotlight"] .hero-slide-media::after { background: linear-gradient(180deg,#020b14c9 0%,#04111d59 32%,#04111d10 58%,#020b146e 100%); }
  .hero[data-cover-layout="spotlight"] .hero-copy { width: 100%; min-height: inherit; padding: clamp(28px,7vw,44px) var(--restaurant-site-gutter,18px) 72px; align-content: start; }
  .hero[data-cover-layout="spotlight"] .hero-brand,
  .hero[data-cover-layout="spotlight"] .hero-copy > p,
  .hero[data-cover-layout="spotlight"] .office-hours-inline { display: none !important; }
  .hero[data-cover-layout="spotlight"] .hero-copy h1 { width: min(11ch,100%); margin: 0; font-size: clamp(32px,9vw,42px); line-height: .98; }
  .hero[data-cover-layout="spotlight"] .hero-slide-cta { margin-top: 17px; padding: 11px 16px; font-size: 14px; }
  .hero[data-cover-layout="spotlight"] .hero-dots { bottom: 17px; }
  .hero[data-cover-layout="bento"],.hero[data-cover-layout="dimension"] { margin-bottom: 58px; }
  .hero[data-cover-layout="bento"]::before,.hero[data-cover-layout="dimension"]::before,
  .hero[data-cover-layout="bento"]::after,.hero[data-cover-layout="dimension"]::after { bottom: -42px; height: 120px; border-width: 4px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero,.hero::before,.hero::after,.hero-dots button { transition: none !important; }
}