/* ==========================================================
   LO KEE — shared page hero banner
   Same visual language as the dinner-menu hero:
   dark photo backdrop, gold eyebrow with hairlines,
   Cormorant serif headline with gold italic, subtitle,
   gold key monogram, white fade at the bottom.
   ========================================================== */
.lkph {
  --lkph-ink: #0d1510;
  --lkph-gold: #c9a45f;
  --lkph-gold-bright: #e3c485;
  --lkph-cream: #ede6d6;
  --lkph-cream-dim: #c6bfae;
  --lkph-serif: 'Cormorant Garamond', Georgia, serif;
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: clamp(120px, 16vh, 190px) clamp(20px, 5vw, 60px) clamp(48px, 7vh, 84px);
  background: var(--lkph-ink);
}
.lkph-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(1.04) brightness(.94);
  pointer-events: none;
  user-select: none;
}
.lkph-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 21, 16, .72),
    rgba(13, 21, 16, .5) 45%,
    rgba(13, 21, 16, .85) 82%,
    #ffffff 99.5%);
}
.lkph-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.lkph-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--lkph-gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 22px;
}
.lkph-eyebrow::before,
.lkph-eyebrow::after {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--lkph-gold);
  opacity: .75;
  flex-shrink: 0;
}
.lkph h1 {
  font-family: var(--lkph-serif);
  font-weight: 500;
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.06;
  color: var(--lkph-cream);
  margin: 0;
  text-transform: none;
}
.lkph h1 em {
  font-style: italic;
  color: var(--lkph-gold-bright);
}
.lkph-sub {
  margin: 16px auto 0;
  color: var(--lkph-cream-dim);
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.65;
  max-width: 56ch;
}
.lkph-mark {
  width: 56px;
  height: auto;
  margin: 26px auto 0;
  display: block;
  opacity: .92;
  filter: drop-shadow(0 0 18px rgba(201, 164, 95, .35));
}
/* gentle reveal, mirrors the dinner-menu animation */
.lkph-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.22, .9, .28, 1),
              transform .9s cubic-bezier(.22, .9, .28, 1);
}
.lkph.is-in .lkph-rv { opacity: 1; transform: none; }
.lkph.is-in .lkph-rv:nth-child(2) { transition-delay: .12s; }
.lkph.is-in .lkph-rv:nth-child(3) { transition-delay: .24s; }
.lkph.is-in .lkph-rv:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .lkph-rv { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {
  .lkph { padding-top: 110px; }
}