/* ==========================================================
   LOKEE Decoration Layer v1.0 — "The Key & The Moon Gate"
   Asian-inspired ornaments drawn from the restaurant itself:
   the brass key monogram, the round speakeasy door (moon
   gate), the gold-framed olive menus on the tables and the
   red-leaf tiger mural behind the bar.
   Loaded LAST, after lokee-tokens.css. Overrides on source
   order; decorative pseudo-elements never intercept clicks.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Marcellus&display=swap');

:root {
  --deco-serif: 'Cormorant Garamond', Georgia, serif;
  --deco-title: 'Marcellus', Georgia, serif;
  --deco-ink: #141414;
  --deco-green: #13211a;      /* Lo Kee deep olive green */
  --deco-green-2: #0d1510;
  --deco-gold: #a5762c;       /* brass gold, readable on white (4.6:1) */
  --deco-gold-soft: #c9a45f;  /* bright brass for lines / ornaments */
  --deco-gold-line: rgba(165, 118, 44, .35);
  --deco-red: #a4262f;        /* tiger-mural red, sparingly */
}

/* ----------------------------------------------------------
   1. TYPOGRAPHY — serif elegance, like the printed menu
   ---------------------------------------------------------- */
h1, h2, h3,
.hero-title,
.section-title,
.about-title,
.features-title,
.reserve-heading,
.reserve-title,
.story-title,
.history-title,
.experience-heading,
.journey-heading,
.stats-title,
.page-title,
.chef-name,
.cc-title,
.blog-title,
.post-title,
.category-title,
.contact-heading {
  font-family: var(--deco-title);
  font-weight: 400;
  letter-spacing: .01em;
}

/* Big hero statements get the tall serif with an italic accent feel */
.hero-title,
.page-title,
.story-title {
  font-family: var(--deco-serif);
  font-weight: 500;
  letter-spacing: .005em;
}

/* Eyebrow labels — brass small caps with side rules, like the
   "FIRST TURN OF THE KEY" kickers inside the menu frame */
.about-heading,
.trending-heading,
.booking-sub-title,
.reserve-sub-title,
.features-heading,
.section-heading,
.title-info,
.experience-title,
.journey-title {
  color: var(--deco-gold) !important;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* Dish names & prices pick up the menu's Marcellus small caps */
.menu-text,
.item-price {
  font-family: var(--deco-title);
  letter-spacing: .06em;
}
.item-price {
  color: var(--deco-gold);
}

/* Body copy slightly warmer */
body {
  color: #2e2b26;
}

/* ----------------------------------------------------------
   2. SECTION TITLES — moon-gate rings between gradient rules
   (matches the SOUPS & SALADS dividers inside the menu)
   ---------------------------------------------------------- */
.section-title {
  position: relative;
}
h2.section-title,
.gallery-data h2,
.trending-block h2 {
  font-family: var(--deco-title);
}

/* Decorative divider utility injected by lokee-deco.js */
.lkd-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 0;
  width: min(320px, 60%);
  pointer-events: none;
}
.lkd-divider::before,
.lkd-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--deco-gold-line));
}
.lkd-divider::after {
  background: linear-gradient(90deg, var(--deco-gold-line), transparent);
}
.lkd-divider i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--deco-gold-soft);
  border-radius: 50%;
  flex-shrink: 0;
}
.lkd-divider i.big {
  width: 11px;
  height: 11px;
}

/* ----------------------------------------------------------
   3. BRASS CORNER ORNAMENTS on key imagery — echoes the
   ornamental double frame of the dinner menu
   ---------------------------------------------------------- */
.lkd-frame {
  position: relative;
}
.lkd-frame::before,
.lkd-frame::after,
.lkd-frame .lkd-c::before,
.lkd-frame .lkd-c::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--deco-gold-soft);
  border-style: solid;
  border-width: 0;
  z-index: 3;
  pointer-events: none;
}
.lkd-frame::before        { top: 10px;    left: 10px;   border-top-width: 2px; border-left-width: 2px; }
.lkd-frame::after         { top: 10px;    right: 10px;  border-top-width: 2px; border-right-width: 2px; }
.lkd-frame .lkd-c::before { bottom: 10px; left: 10px;   border-bottom-width: 2px; border-left-width: 2px; }
.lkd-frame .lkd-c::after  { bottom: 10px; right: 10px;  border-bottom-width: 2px; border-right-width: 2px; }

/* Hairline gold inset, like a mounted photograph */
.lkd-frame > img,
.lkd-frame .about-img,
.lkd-frame .section-img,
.lkd-frame .story-img,
.lkd-frame .story-img-02,
.lkd-frame .chef-img,
.lkd-frame .experience-img,
.lkd-frame .journey-image img,
.lkd-frame .faq-img {
  outline: 1px solid rgba(165, 118, 44, .28);
  outline-offset: -12px;
}

/* ----------------------------------------------------------
   4. BUTTONS — brass-framed like the menu covers.
   Primary CTA: deep olive green fill, brass text & border
   (replaces the template orange with the restaurant palette).
   ---------------------------------------------------------- */
:root {
  --lk-accent: var(--deco-green);
  --lk-accent-hover: #1d3428;
  --lk-accent-pressed: #0d1510;
  --lk-on-accent: #e3c485;
}
.primary-button:not(.outline),
.contact-button,
.ft-button._02 {
  color: #e3c485;
  background-color: var(--deco-green);
  border: 1px solid rgba(201, 164, 95, .55);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.primary-button:not(.outline):hover,
.contact-button:hover,
.ft-button._02:hover {
  color: #f0d9a8;
  background-color: #1d3428;
  border-color: rgba(201, 164, 95, .8);
}
.primary-button.outline,
.story-button,
.nav-button,
.ft-button,
.insta-button {
  border: 1px solid var(--deco-gold-line);
  font-family: 'Inter', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  background-color: transparent;
}
.primary-button.outline:hover,
.nav-button:hover,
.ft-button:hover,
.insta-button:hover {
  color: var(--deco-gold);
  border-color: var(--deco-gold-soft);
  background-color: rgba(201, 164, 95, .07);
}
/* Hero outline button still sits over the photo */
.hero .primary-button.outline {
  color: #ffffff;
  border-color: rgba(201, 164, 95, .65);
}
.hero .primary-button.outline:hover {
  color: var(--deco-green-2);
  background-color: #e3c485;
  border-color: #e3c485;
}

/* Nav */
.nav-link {
  font-family: 'Inter', sans-serif;
  letter-spacing: .14em;
}
.nav-link.w--current {
  color: var(--deco-gold);
}
.nav-link:hover {
  color: var(--deco-gold);
}
.nav-button {
  border-color: var(--deco-gold-line);
}

/* Focus ring follows the brass */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.w-button:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--deco-gold-soft);
}
::selection {
  background: var(--deco-gold-soft);
  color: var(--deco-green-2);
}

/* ----------------------------------------------------------
   5. WATERMARK HEADINGS — the giant page word becomes a faint
   brass impression instead of a grey block
   ---------------------------------------------------------- */
.heading {
  color: rgba(165, 118, 44, .07);
  font-family: var(--deco-serif);
  font-weight: 500;
}

/* ----------------------------------------------------------
   6. KEY MONOGRAM DIVIDER — injected before the footer
   ---------------------------------------------------------- */
.lkd-key-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 34px 24px 10px;
  pointer-events: none;
}
.lkd-key-divider::before,
.lkd-key-divider::after {
  content: "";
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--deco-gold-line));
}
.lkd-key-divider::after {
  background: linear-gradient(90deg, var(--deco-gold-line), transparent);
}
.lkd-key-divider img {
  width: 34px;
  height: auto;
  opacity: .9;
}

/* Footer heading + hairlines warm up */
.ft-heading {
  font-family: var(--deco-title);
  letter-spacing: .12em;
}
.footer {
  border-top: 1px solid rgba(165, 118, 44, .18);
}

/* ----------------------------------------------------------
   7. CARDS, TILES & FORMS — brass hairlines instead of grey
   ---------------------------------------------------------- */
.menu-block.trending,
.blog-list,
.post-block,
.faq-info,
.chef-bottom,
.experience-title,
.booking-title,
.opening-line,
.menu-line,
.style-inner,
.button-block {
  border-color: rgba(165, 118, 44, .3);
}
.style-dash,
.post-line,
.post-divider {
  background-color: rgba(165, 118, 44, .3);
}
.input,
.textarea,
.pass-input {
  border-bottom-color: rgba(165, 118, 44, .45);
  font-family: 'Inter', sans-serif;
}
.input:focus,
.textarea:focus {
  border-bottom-color: var(--deco-gold);
}

/* Category tiles (Explore by Our Cuisines) — moon-gate hover ring */
.category-block,
.cc-block {
  overflow: hidden;
}
.category-title,
.cc-title {
  font-family: var(--deco-title);
  letter-spacing: .05em;
}

/* Round dish thumbnails get a brass ring, like little medallions */
.menu-img,
.menu-image {
  box-shadow: 0 0 0 1px rgba(165, 118, 44, .4), 0 0 0 5px rgba(255, 255, 255, 1), 0 0 0 6px rgba(165, 118, 44, .22);
}

/* Marquee dots go brass */
.location-dot {
  background-color: var(--deco-gold-soft);
}

/* Pagination + sliders */
.left-arrow, .right-arrow,
.gallery-left, .gallery-right,
.w-pagination-previous, .w-pagination-next {
  border-color: rgba(165, 118, 44, .4);
}
.left-arrow:hover, .right-arrow:hover,
.gallery-left:hover, .gallery-right:hover {
  color: var(--deco-gold);
  border-color: var(--deco-gold-soft);
}

/* Rich text links */
.w-richtext a {
  color: var(--deco-gold);
}
.w-richtext a:hover {
  color: var(--deco-red);
}

/* ----------------------------------------------------------
   8. HERO — subtle brass frame floating inside the photo,
   matching the dinner-menu border (desktop only)
   ---------------------------------------------------------- */
@media (min-width: 992px) {
  .hero {
    position: relative;
  }
  .hero .lkd-hero-frame {
    position: absolute;
    inset: 126px 28px 28px;
    border: 1px solid rgba(201, 164, 95, .38);
    pointer-events: none;
    z-index: 5;
  }
  .hero .lkd-hero-frame::before,
  .hero .lkd-hero-frame::after,
  .hero .lkd-hero-frame i::before,
  .hero .lkd-hero-frame i::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 0 solid #c9a45f;
  }
  .hero .lkd-hero-frame::before        { top: -2px;    left: -2px;   border-top-width: 2px; border-left-width: 2px; }
  .hero .lkd-hero-frame::after         { top: -2px;    right: -2px;  border-top-width: 2px; border-right-width: 2px; }
  .hero .lkd-hero-frame i::before      { bottom: -2px; left: -2px;   border-bottom-width: 2px; border-left-width: 2px; }
  .hero .lkd-hero-frame i::after       { bottom: -2px; right: -2px;  border-bottom-width: 2px; border-right-width: 2px; }
}

/* ----------------------------------------------------------
   9. PAGE HEADERS (inner pages) — richer brass impression
   ---------------------------------------------------------- */
.heading {
  color: rgba(165, 118, 44, .12);
}
.title-wrap {
  position: relative;
}
.title-wrap::after {
  content: "";
  display: block;
  width: min(300px, 50%);
  height: 1px;
  margin: 4px 0 0;
  background: linear-gradient(90deg, var(--deco-gold-line), transparent);
}

/* Gallery captions & small headings pick up the serif */
.gallery-data h5,
.gallery-heading,
h5.experience-heading,
h5.journey-heading {
  font-family: var(--deco-title);
  font-weight: 400;
  letter-spacing: .04em;
}

/* FAQ question rows — brass hairline + serif question */
.faq-question,
.dropdown-toggle {
  border-color: rgba(165, 118, 44, .28);
}
.faq-heading {
  font-family: var(--deco-title);
  font-weight: 400;
}

/* Stats numbers in brass serif */
.stats.stats-copy-only .stats-title-wrap {
  margin-bottom: 0;
}

.stats-number,
.counter-number {
  font-family: var(--deco-serif);
  color: var(--deco-gold);
  font-weight: 500;
}

/* ----------------------------------------------------------
   10. HERO VIDEO — homepage full-bleed video background with
   a single Reserve A Table button at the bottom
   ---------------------------------------------------------- */
.lk-hero-video-wrap {
  display: block;
  grid-template-columns: none;
  background-color: #0d1510;
}
.lk-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero .lk-hero-video-wrap .hero-overly {
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .08) 45%, rgba(13, 21, 16, .55) 100%);
}
.lk-hero-minimal {
  grid-row-gap: 0;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 56px;
}
.lk-hero-reserve {
  opacity: 1 !important;
}
@media screen and (max-width: 767px) {
  .lk-hero-minimal {
    padding-bottom: 40px;
  }
}

/* ============================================================
   Special Events — hero image banner + old-site content section
   ============================================================ */
.se-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 110px;
}
.se-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  z-index: 0;
}
.se-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13, 21, 16, .62) 0%, rgba(13, 21, 16, .35) 45%, rgba(13, 21, 16, .72) 100%);
}
.se-hero-inner {
  position: relative;
  z-index: 2;
}
.se-hero .title-wrap {
  text-align: center;
}
.heading.se-hero-heading {
  color: #f4efe6;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.title-info.se-hero-info {
  color: rgba(244, 239, 230, .88);
  margin-left: auto;
  margin-right: auto;
}
.se-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 22px;
  border: 1px solid rgba(201, 164, 95, .45);
  pointer-events: none;
}

.se-intro {
  padding: 90px 0 70px;
  background: #fdfcf9;
}
.se-intro-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.se-intro-title {
  font-family: var(--deco-title);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  color: var(--deco-ink);
  text-align: center;
  margin: 0 0 14px;
}
.se-intro-title::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--deco-gold-soft), transparent);
}
.se-intro-lead {
  font-family: var(--deco-serif);
  font-size: 22px;
  color: var(--deco-green);
  text-align: center;
  margin: 26px 0 22px;
}
.se-intro-text {
  font-size: 17px;
  line-height: 1.75;
  color: #3c3a35;
  margin: 0 0 18px;
}
.se-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 44px 0 10px;
  padding: 38px 34px;
  border: 1px solid var(--deco-gold-line);
  outline: 1px solid var(--deco-gold-line);
  outline-offset: 5px;
  background: #faf7f0;
}
.se-detail-title {
  font-family: var(--deco-title);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--deco-green);
  margin: 0 0 14px;
}
.se-detail-title + .se-detail-title,
.se-detail-text + .se-detail-title {
  margin-top: 22px;
}
.se-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.se-detail-list li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #3c3a35;
}
.se-detail-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 5px;
  font-size: 9px;
  color: var(--deco-gold-soft);
}
.se-detail-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: #3c3a35;
  margin: 0 0 10px;
}
.se-cta {
  text-align: center;
  margin-top: 38px;
}
.se-inquire-btn {
  display: inline-block;
  padding: 16px 44px;
  font-family: var(--deco-title);
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e9d9b8;
  background: var(--deco-green);
  border: 1px solid var(--deco-gold-soft);
  outline: 1px solid rgba(201, 164, 95, .4);
  outline-offset: 3px;
  transition: background .25s ease, color .25s ease;
}
.se-inquire-btn:hover {
  background: var(--deco-green-2);
  color: var(--deco-gold-soft);
}
@media (max-width: 991px) {
  .se-details { grid-template-columns: 1fr 1fr; }
  .se-intro-title { font-size: 36px; }
}
@media (max-width: 767px) {
  .se-hero { padding: 120px 0 80px; }
  .se-details { grid-template-columns: 1fr; padding: 28px 22px; }
  .se-intro { padding: 64px 0 50px; }
  .se-intro-title { font-size: 30px; }
  .se-intro-lead { font-size: 19px; }
}

/* se-hero fixes: tame the giant webflow watermark heading inside the banner */
.se-hero .heading {
  white-space: normal;
  font-size: clamp(54px, 9vw, 120px);
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
}
.se-hero .title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.se-hero .title-info {
  position: static;
  max-width: 560px;
  text-align: center;
}
/* the moon-gate divider is injected right after .page-title — hide it for the banner variant */
.se-hero + .lkd-divider { display: none; }
@media (max-width: 767px) {
  .se-hero .heading { font-size: clamp(40px, 12vw, 70px); }
}

/* keep detail lists as a single clean column (webflow ul defaults split them) */
.se-detail-list {
  display: block !important;
  columns: 1 !important;
  column-count: 1 !important;
  grid-template-columns: none !important;
}
.se-detail-list li {
  display: block;
  width: 100%;
}

/* Webflow IX2 applies an inline parallax translate3d on .heading (class-based
   trigger) which pushes the hero title off-center — kill it for the banner */
.se-hero .heading,
.se-hero .title-wrap,
.se-hero .title-info {
  transform: none !important;
  will-change: auto !important;
}


/* ==========================================================
   Mobile nav — refined full-screen overlay (<= 991px)
   Keeps the Lo Kee design language: deep olive green, brass
   gold hairlines, Marcellus letterspaced links, corner frame.
   ========================================================== */
@media (max-width: 991px) {
  /* let the webflow overlay cover the whole viewport */
  .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* the webflow slide animation translates the menu — keep it flush */
  .w-nav-overlay [data-nav-menu-open],
  .w-nav-overlay .nav-menu {
    transform: none !important;
    width: 100% !important;
    left: 0 !important;
  }
  /* the navbar itself must not create a containing block for the fixed overlay */
  .navbar {
    transform: none !important;
    filter: none;
  }
  /* when closed, Webflow keeps .nav-menu inside .navbar-wrap: hide it there */
  .navbar-wrap > .nav-menu { display: none !important; }
  .w-nav-overlay .nav-menu {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    background-color: var(--deco-green-2);
    background-image:
      radial-gradient(ellipse at 50% -10%, rgba(201, 164, 95, .10), transparent 55%);
    border-bottom: none;
    padding: 96px 28px 140px;
  }
  /* slim gold frame hugging the link block, centered in the free space */
  .w-nav-overlay .nav-menu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(348px, 90vw);
    height: 360px;
    border: 1px solid rgba(201, 164, 95, .28);
    pointer-events: none;
    margin-top: -22px;
  }
  /* compact, elegant links — lock every state so the brass
     separators never vanish on tap/hover/current */
  .w-nav-overlay .nav-link,
  .w-nav-overlay .nav-link:hover,
  .w-nav-overlay .nav-link:focus,
  .w-nav-overlay .nav-link:active,
  .w-nav-overlay .nav-link:focus-visible,
  .w-nav-overlay .nav-link.w--current {
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 13px 0;
    display: flex;
    width: min(320px, 78vw);
    border-bottom: 1px solid rgba(201, 164, 95, .18) !important;
    background: transparent !important;
    overflow: hidden;
  }
  .w-nav-overlay .nav-link:last-of-type,
  .w-nav-overlay .nav-link:last-of-type:hover,
  .w-nav-overlay .nav-link:last-of-type:focus,
  .w-nav-overlay .nav-link:last-of-type:active,
  .w-nav-overlay .nav-link:last-of-type.w--current { border-bottom: none !important; }
  /* Webflow's tap animation slides the .link-text layers with an
     inline transform, which stretches the row and hides the rule
     below it — pin the visible layer and keep row height fixed */
  .w-nav-overlay .nav-link .link-text,
  .w-nav-overlay .nav-link:active .link-text {
    font-family: var(--deco-title);
    font-size: 17px;
    letter-spacing: .22em;
    color: #ece5d3;
    transform: none !important;
    opacity: 1 !important;
  }
  .link-text.hover { display: none !important; }
  /* mobile Reserve button — gold outline, same as desktop CTA */
  .nav-button.mobile {
    margin-top: 26px;
    padding: 14px 42px;
    border: 1px solid var(--deco-gold-soft);
    outline: 1px solid rgba(201, 164, 95, .35);
    outline-offset: 3px;
    background: transparent;
  }
  .nav-button.mobile .button-text {
    font-family: var(--deco-title);
    letter-spacing: .22em;
    color: var(--deco-gold-soft);
  }
  /* keep the header (logo + close button) above the overlay:
     the overlay is a CHILD of .navbar, so raise the navbar's own
     container instead of the navbar itself */
  .navbar { z-index: 1001; }
  .w-nav-overlay { z-index: 1; }
  .navbar .container,
  .navbar .navbar-wrap {
    position: relative;
    z-index: 5;
  }
  /* on the dark overlay, keep brand + menu button legible */
  .w-nav[data-nav-menu-open-state="open"] .menu-button,
  .navbar .menu-button { position: relative; z-index: 6; }
  /* when the menu is open, flip the dark wordmark to a light one */
  body.lk-nav-open .brand img {
    filter: brightness(0) invert(0.92) sepia(0.25) saturate(3) hue-rotate(10deg);
  }
  body.lk-nav-open .menu-button .top-line,
  body.lk-nav-open .menu-button .center-line,
  body.lk-nav-open .menu-button .bottom-line {
    background-color: #c9a45f !important;
  }
  body.lk-nav-open .menu-button { color: #ece5d3; }
}

/* tighter header + smaller logo on phones so the bar stays slim */
@media (max-width: 767px) {
  .brand img { max-height: 64px; width: auto; }
  .navbar-wrap { padding-top: 8px; padding-bottom: 8px; }
  .w-nav-overlay .nav-menu { padding-top: 88px; }
  .w-nav-overlay .nav-menu::before { height: 352px; }
  .w-nav-overlay .nav-link,
  .w-nav-overlay .nav-link:hover,
  .w-nav-overlay .nav-link:focus,
  .w-nav-overlay .nav-link:active,
  .w-nav-overlay .nav-link.w--current { padding: 12px 0; }
  .w-nav-overlay .nav-link .link-text { font-size: 16px; }
}

/* ----------------------------------------------------------
   ORDER TAKEOUT — DoorDash link button next to Reserve
   Outlined brass variant so Reserve keeps visual priority.
   The Webflow hover text-swap is driven by data-w-id JS which
   this static button does not have, so hide the duplicate
   .hover text and animate colors in pure CSS instead.
   ---------------------------------------------------------- */
.nav-button.lk-takeout {
  background-color: transparent;
  border: 1px solid var(--deco-gold-soft);
  transition: background-color .3s, border-color .3s;
}

.nav-button.lk-takeout .button-text {
  color: var(--deco-gold-soft);
  transition: color .3s;
}

.nav-button.lk-takeout .button-text.hover {
  display: none;
}

.nav-button.lk-takeout:hover {
  background-color: var(--deco-gold-soft);
  border-color: var(--deco-gold-soft);
}

.nav-button.lk-takeout:hover .button-text {
  color: var(--deco-green-2);
}

/* Desktop placement: sits to the left of Reserve inside .nav-right */
.nav-button.lk-takeout.desktop-pos {
  margin-right: 12px;
}

/* Hide desktop variant on mobile (mirrors Webflow's .nav-button.desktop rules) */
@media screen and (max-width: 991px) {
  .nav-button.lk-takeout.desktop-pos {
    display: none;
  }
  .nav-button.lk-takeout.mobile {
    margin-top: 12px;
  }
}

/* ===== Careers page: intro + resume upload field ===== */
.lk-jobs-intro {
  margin: 14px 0 6px;
  max-width: 560px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.85;
}
.lk-resume-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lk-resume-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.lk-resume-hint {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}
.lk-resume-input {
  padding: 12px 0;
  height: auto;
  cursor: pointer;
  border-bottom: 1px solid rgba(165, 118, 44, .45);
}
.lk-resume-input::file-selector-button {
  margin-right: 14px;
  padding: 8px 18px;
  border: 1px solid var(--deco-gold-line);
  border-radius: 100px;
  background: transparent;
  color: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.lk-resume-input::file-selector-button:hover {
  color: var(--deco-gold);
  border-color: var(--deco-gold-soft);
  background-color: rgba(201, 164, 95, .07);
}

/* ----------------------------------------------------------
   LANDING — home split sections (Dinner / Cocktail / Events /
   Takeout) + In the Press block, replacing The Space gallery
   ---------------------------------------------------------- */
.lk-home-section {
  padding: 70px 0;
}
.lk-home-section .lk-hs-wrap {
  align-items: stretch;
}
.lk-home-section .lk-hs-wrap.lk-hs-reverse {
  flex-direction: row-reverse;
}
.lk-hs-img {
  min-height: 486px;
}
.lk-hs-img .section-img,
.lk-hs-img .section-image {
  width: 100%;
  height: 100%;
}
.lk-hs-img .section-image {
  object-fit: cover;
  display: block;
}
.lk-hs-text {
  justify-content: center;
}
.lk-hs-text .location-heading {
  margin-bottom: 18px;
}
.lk-hs-text .single-text {
  margin-bottom: 14px;
}
.lk-hs-text .primary-button {
  margin-top: 10px;
}
.lk-eyebrow {
  color: var(--deco-gold);
  font-family: var(--deco-title);
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lk-home-press {
  padding: 80px 0;
}
.lk-home-press .section-title {
  margin-bottom: 50px;
}
.lk-press-more {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
@media screen and (max-width: 991px) {
  .lk-home-section .lk-hs-wrap,
  .lk-home-section .lk-hs-wrap.lk-hs-reverse {
    flex-direction: column;
    grid-row-gap: 30px;
  }
  .lk-home-section .location-image,
  .lk-home-section .location-right {
    max-width: 100%;
  }
  .lk-hs-img {
    min-height: 340px;
  }
  .lk-home-section {
    padding: 50px 0;
  }
  /* Stacked view: image always sits above the copy, like the other
     home split sections (Dinner / Special Events). */
  .lk-hs-cocktail .lk-hs-wrap .lk-hs-img {
    order: -1;
  }
}
@media screen and (max-width: 479px) {
  .lk-hs-img {
    min-height: 240px;
  }
}

/* Scroll reveal for home-section images (slide + un-blur, Webflow-like) */
.lk-hs-img {
  overflow: hidden;
}
.lk-hs-img .section-img.lk-reveal {
  transform: translate3d(-110%, 0, 0);
  transition: transform 1s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}
.lk-hs-img .section-img.lk-reveal .section-image {
  transform: translate3d(100%, 0, 0) scale3d(1.5, 1.5, 1);
  filter: blur(10px);
  transition: transform 1s cubic-bezier(.25, .46, .45, .94), filter 1s ease;
  will-change: transform, filter;
}
.lk-hs-img .section-img.lk-reveal.lk-reveal-in {
  transform: translate3d(0, 0, 0);
}
.lk-hs-img .section-img.lk-reveal.lk-reveal-in .section-image {
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .lk-hs-img .section-img.lk-reveal,
  .lk-hs-img .section-img.lk-reveal .section-image {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Clickable address links */
.lk-address-link{color:inherit;text-decoration:none;transition:opacity .2s ease}
.lk-address-link:hover{text-decoration:underline;text-underline-offset:3px}